销售合同打印增加规格型号

src/components/PDF/contractPDF.vue

@@ -1,10 +1,7 @@
 <template>
   <div>
     <div id="printMe">
-      <div
-        id="pdfDom"
-        style="padding: 16px; font-size: 12px !important; font-family: 'msyh'"
-      >
+      <div id="pdfDom" style="padding: 16px; font-size: 12px !important; font-family: 'msyh'">
         <div style="font-size: 18px; text-align: center">
           {{ printDetails.sellCorporationNameEn }}
         </div>
@@ -15,14 +12,12 @@
             printDetails.sellCountryName
           }}
         </div>
-        <div
-          style="
+        <div style="
             font-size: 14px;
             color: #409eff;
             text-align: center;
             padding-top: 16px;
-          "
-        >
+          ">
           PROFORMA INVOICE
         </div>
         <div style="padding-top: 8px">
@@ -47,8 +42,7 @@
             <div style="color: #409eff">BUYER:</div>
             <div>{{ printDetails.buyCorporationName }}</div>
             <div style="padding-top: 16px">
-              <span style="color: #409eff">TAX NUMBER:</span
-              ><span>{{ printDetails.taxNumber }}</span>
+              <span style="color: #409eff">TAX NUMBER:</span><span>{{ printDetails.taxNumber }}</span>
             </div>
             <div style="padding: 16px 0">
               {{ printDetails.buyDetailedAddress }},{{
@@ -70,23 +64,19 @@
         <div style="height: 16px"></div>
         <div style="border: 1px solid black">
           <div style="display: flex; width: 100%">
-            <div
-              style="
+            <div style="
                 width: 33%;
                 border-bottom: 1px solid black;
                 border-right: 1px solid black;
-              "
-            >
+              ">
               <div style="color: #409eff">COUNTRY OF ORIGIN:</div>
               <div>{{ printDetails.sellCountryName }}</div>
             </div>
-            <div
-              style="
+            <div style="
                 width: 34%;
                 border-bottom: 1px solid black;
                 border-right: 1px solid black;
-              "
-            >
+              ">
               <div style="color: #409eff">COUNTRY OF DESTINATION:</div>
               <div>{{ printDetails.buyCountryName }}</div>
             </div>
@@ -96,25 +86,21 @@
             </div>
           </div>
           <div style="display: flex; width: 100%">
-            <div
-              style="
+            <div style="
                 width: 33%;
                 border-bottom: 1px solid black;
                 border-right: 1px solid black;
-              "
-            >
+              ">
               <div style="color: #409eff">TERMS OF DELIVERY:</div>
               <div>
                 {{ dictValueLabel(printDetails.tradeMethods, tradeMethods) }}
               </div>
             </div>
-            <div
-              style="
+            <div style="
                 width: 34%;
                 border-bottom: 1px solid black;
                 border-right: 1px solid black;
-              "
-            >
+              ">
               <div style="color: #409eff">CURRENCY:</div>
               <div>
                 {{ printDetails.currency }}
@@ -145,10 +131,7 @@
           <div class="contentRow" style="width: 50px; text-align: center">
             NO.
           </div>
-          <div
-            class="contentRow"
-            style="width: calc(100% - 450px); text-align: center"
-          >
+          <div class="contentRow" style="width: calc(100% - 450px); text-align: center">
             COMMODITY, SPECIFICATION
           </div>
           <div class="contentRow" style="width: 100px; text-align: center">
@@ -164,26 +147,17 @@
             TOTAL PRICE
           </div>
         </div>
-        <div
-          v-if="
+        <div v-if="
             printDetails.productInfoList &&
             printDetails.productInfoList.length > 0
-          "
-        >
-          <div
-            class="baseRow"
-            style="display: flex"
-            v-for="(item, index) in printDetails.productInfoList"
-            :key="item.productId"
-          >
+          ">
+          <div class="baseRow" style="display: flex" v-for="(item, index) in printDetails.productInfoList" :key="item.productId">
             <div class="contentRow" style="width: 50px; text-align: center">
               {{ index + 1 }}
             </div>
-            <div
-              class="contentRow"
-              style="width: calc(100% - 450px); text-align: center"
-            >
+            <div class="contentRow" style="width: calc(100% - 450px); text-align: center">
               {{ item.productName }}
+              <div>{{item.productModel}}</div>
             </div>
             <div class="contentRow" style="width: 100px; text-align: center">
               {{ dictValueLabel(item.productUnit, productUnit) }}
@@ -200,23 +174,14 @@
           </div>
         </div>
         <div class="baseRow" style="display: flex; color: #409eff">
-          <div
-            class="contentRow"
-            style="width: calc(100% - 400px); text-align: center"
-          >
+          <div class="contentRow" style="width: calc(100% - 400px); text-align: center">
             SUBTOTAL:
           </div>
-          <div
-            class="contentRow"
-            style="width: 100px; text-align: center"
-          ></div>
+          <div class="contentRow" style="width: 100px; text-align: center"></div>
           <div class="contentRow" style="width: 100px; text-align: center">
             {{ statistics("productQuantity", 2) }}
           </div>
-          <div
-            class="contentRow"
-            style="width: 100px; text-align: center"
-          ></div>
+          <div class="contentRow" style="width: 100px; text-align: center"></div>
           <div class="contentRow" style="width: 100px; text-align: center">
             {{ statistics("amount", 2) }}
           </div>
@@ -228,10 +193,7 @@
             </div>
           </div> -->
         <div class="baseRow" style="display: flex">
-          <div
-            class="contentRow"
-            style="width: calc(100% - 100px); text-align: right; color: #409eff"
-          >
+          <div class="contentRow" style="width: calc(100% - 100px); text-align: right; color: #409eff">
             FREIGHT COST:
           </div>
           <div class="contentRow" style="width: 100px; text-align: center">
@@ -239,20 +201,14 @@
           </div>
         </div>
         <div class="baseRow" style="display: flex">
-          <div
-            class="contentRow"
-            style="width: calc(100% - 100px); text-align: right; color: #409eff"
-          >
+          <div class="contentRow" style="width: calc(100% - 100px); text-align: right; color: #409eff">
             TOTAL PRICE:
           </div>
           <div class="contentRow" style="width: 100px; text-align: center">
             {{ moneyFormat(printDetails.totalAmount, 2) }}
           </div>
         </div>
-        <div
-          class="baseRow"
-          style="display: flex; border-bottom: 1px solid black"
-        >
+        <div class="baseRow" style="display: flex; border-bottom: 1px solid black">
           <div class="contentRow" style="width: 100%">
             {{
               translateIntoEnglish(
@@ -268,66 +224,54 @@
         </div>
         <div class="baseRow" style="border-bottom: 1px solid black">
           <div class="contentRow" style="width: 100%">
-            <div
-              style="
+            <div style="
                 line-height: 24px;
                 padding-left: 4px;
                 word-break: break-all;
                 word-wrap: break-word;
-              "
-            >
+              ">
               Beneficiary Name: {{ printDetails.beneficiaryName }}
             </div>
-            <div
-              style="
+            <div style="
                 line-height: 24px;
                 padding-left: 4px;
                 word-break: break-all;
                 word-wrap: break-word;
-              "
-            >
+              ">
               Beneficiary Bank: {{ printDetails.beneficiaryBank }}
             </div>
-            <div
-              style="
+            <div style="
                 line-height: 24px;
                 padding-left: 4px;
                 word-break: break-all;
                 word-wrap: break-word;
-              "
-            >
+              ">
               Beneficiary Bank Address:
               {{ printDetails.beneficiaryBankAddress }}
             </div>
-            <div
-              style="
+            <div style="
                 line-height: 24px;
                 padding-left: 4px;
                 word-break: break-all;
                 word-wrap: break-word;
-              "
-            >
+              ">
               Beneficiary Account Number:
               {{ printDetails.beneficiaryAccountNumber }}
             </div>
-            <div
-              style="
+            <div style="
                 line-height: 24px;
                 padding-left: 4px;
                 word-break: break-all;
                 word-wrap: break-word;
-              "
-            >
+              ">
               Swift Code: {{ printDetails.swiftCode }}
             </div>
-            <div
-              style="
+            <div style="
                 line-height: 24px;
                 padding-left: 4px;
                 word-break: break-all;
                 word-wrap: break-word;
-              "
-            >
+              ">
               Beneficiary Address: {{ printDetails.beneficiaryAddress }}
             </div>
           </div>

src/views/salesMange/saleContract/contract/index.vue

@@ -1,29 +1,16 @@
 <template>
   <div class="tenant">
     <div class="content">
-      <byTable
-        :source="sourceList.data"
-        :pagination="sourceList.pagination"
-        :config="config"
-        :loading="loading"
-        :selectConfig="selectConfig"
-        highlight-current-row
-        :statConfig="statConfig"
-        :action-list="[
+      <byTable :source="sourceList.data" :pagination="sourceList.pagination" :config="config" :loading="loading" :selectConfig="selectConfig"
+               highlight-current-row :statConfig="statConfig" :action-list="[
           {
             text: '创建合同',
             action: () => newContract(),
           },
-        ]"
-        @get-list="getList"
-      >
+        ]" @get-list="getList">
         <template #code="{ item }">
           <div style="width: 100%">
-            <a
-              style="color: #409eff; cursor: pointer; word-break: break-all"
-              @click="openDetails(item)"
-              >{{ item.code }}</a
-            >
+            <a style="color: #409eff; cursor: pointer; word-break: break-all" @click="openDetails(item)">{{ item.code }}</a>
           </div>
         </template>
         <template #amount="{ item }">
@@ -41,38 +28,23 @@
           <div>
             <el-popover :width="520" trigger="hover">
               <template #reference>
-                <a
-                  style="color: #409eff; cursor: pointer; word-break: break-all"
-                  >{{ moneyFormat(item.sumClaimMoney, 4) }}</a
-                >
+                <a style="color: #409eff; cursor: pointer; word-break: break-all">{{ moneyFormat(item.sumClaimMoney, 4) }}</a>
               </template>
               <template #default>
-                <div
-                  style="width: 100%; padding: 10px"
-                  v-if="
+                <div style="width: 100%; padding: 10px" v-if="
                     item.claimContractList && item.claimContractList.length > 0
-                  "
-                >
-                  <div
-                    v-for="(record, index) in item.claimContractList"
-                    :key="index"
-                    style="background: #f1f1f1; border-radius: 2px"
-                    :style="{
+                  ">
+                  <div v-for="(record, index) in item.claimContractList" :key="index" style="background: #f1f1f1; border-radius: 2px" :style="{
                       'margin-bottom':
                         index !== item.claimContractList.length - 1
                           ? '20px'
                           : '0px',
-                    }"
-                    :class="{ 'act-class': record.id === currentId }"
-                    @mouseenter="handleMoveEnter(record)"
-                  >
-                    <div
-                      style="
+                    }" :class="{ 'act-class': record.id === currentId }" @mouseenter="handleMoveEnter(record)">
+                    <div style="
                         display: flex;
                         justify-content: space-around;
                         padding: 5px 0;
-                      "
-                    >
+                      ">
                       <div style="color: #333333">
                         <div style="color: #999999; margin-bottom: 4px">
                           认领金额:
@@ -127,10 +99,7 @@
           </div>
         </template>
         <template #buyCorporationId="{ item }">
-          <div
-            style="cursor: pointer; color: #409eff; word-break: break-all"
-            @click="handleClickName(item)"
-          >
+          <div style="cursor: pointer; color: #409eff; word-break: break-all" @click="handleClickName(item)">
             {{ item.buyCorporationName }}
           </div>
         </template>
@@ -142,18 +111,11 @@
       <template #footer>
         <el-button @click="openPrint = false" size="large">取消</el-button>
         <el-button v-print="printObj" size="large">打印</el-button>
-        <el-button type="primary" @click="clickDownload()" size="large"
-          >下载PDF</el-button
-        >
+        <el-button type="primary" @click="clickDownload()" size="large">下载PDF</el-button>
       </template>
     </el-dialog>
 
-    <el-dialog
-      title="合同详情"
-      v-if="openDetailsDialog"
-      v-model="openDetailsDialog"
-      width="1100"
-    >
+    <el-dialog title="合同详情" v-if="openDetailsDialog" v-model="openDetailsDialog" width="1100">
       <ContractDetails :contractId="currentContractId"></ContractDetails>
     </el-dialog>
   </div>
@@ -575,7 +537,7 @@ const getDict = () => {
 const getList = async (req) => {
   sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
   loading.value = true;
-  getTotal()
+  getTotal();
   proxy.post("/contract/page", sourceList.value.pagination).then((res) => {
     sourceList.value.data = res.rows;
     sourceList.value.pagination.total = res.total;
@@ -584,73 +546,74 @@ const getList = async (req) => {
     }, 200);
   });
 };
-const statConfig = ref(
-  [{
-      label: "合计",
-      data: [],
-    }]
-)
+const statConfig = ref([
+  {
+    label: "合计",
+    data: [],
+  },
+]);
 getDict();
 if (route.query.code) {
   sourceList.value.pagination.keyword = route.query.code;
 }
 onMounted(() => {
   getList();
-})
+});
 const getTotal = () => {
-  proxy.post("/contract/getHeadCustomerStatistics",sourceList.value.pagination).then((res) => {
-    statConfig.value = [
-      {
-        label: "合计",
-        data: [],
-      },
-    ];
-    statConfig.value[0].data.push({
-      label: "合计",
-      data: [
-        {
-          label: "数量",
-          num: res.sumQuantity,
-          color: "rgb(171 0 255)",
-        },
-        {
-          label: "金额",
-          num: res.sumAmount.toFixed(2),
-          color: "rgb(171 0 255)",
-        },
+  proxy
+    .post("/contract/getHeadCustomerStatistics", sourceList.value.pagination)
+    .then((res) => {
+      statConfig.value = [
         {
-          label: "到账金额",
-          num: res.sumArrivalAmount.toFixed(2),
-          color: "rgb(171 0 255)",
+          label: "合计",
+          data: [],
         },
-      ],
-    });
-    for (let i = 0; i < res.list.length; i++) {
+      ];
       statConfig.value[0].data.push({
-        label: res.list[i].sellCorporationName,
+        label: "合计",
         data: [
           {
             label: "数量",
-            num: res.list[i].sumQuantity,
-            color: "blue",
+            num: res.sumQuantity,
+            color: "rgb(171 0 255)",
           },
           {
             label: "金额",
-            num: res.list[i].sumAmount.toFixed(2),
-            color: "blue",
+            num: res.sumAmount.toFixed(2),
+            color: "rgb(171 0 255)",
           },
           {
             label: "到账金额",
-            num: res.list[i].sumClaimMoney.toFixed(2),
-            color: "blue",
+            num: res.sumArrivalAmount.toFixed(2),
+            color: "rgb(171 0 255)",
           },
         ],
       });
-      
-    }
-    console.log(statConfig.value)
-    console.log(res);
-  });
+      for (let i = 0; i < res.list.length; i++) {
+        statConfig.value[0].data.push({
+          label: res.list[i].sellCorporationName,
+          data: [
+            {
+              label: "数量",
+              num: res.list[i].sumQuantity,
+              color: "blue",
+            },
+            {
+              label: "金额",
+              num: res.list[i].sumAmount.toFixed(2),
+              color: "blue",
+            },
+            {
+              label: "到账金额",
+              num: res.list[i].sumClaimMoney.toFixed(2),
+              color: "blue",
+            },
+          ],
+        });
+      }
+      console.log(statConfig.value);
+      console.log(res);
+    });
 };
 
 const newContract = () => {