销售合同页面展示优化

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

@@ -15,6 +15,11 @@
           },
         ]"
         @get-list="getList">
+        <template #code="{ item }">
+          <div style="width: 100%">
+            <a style="color: #409eff; cursor: pointer; word-break: break-all" @click="pushProcessApproval(item)">{{ item.code }}</a>
+          </div>
+        </template>
         <template #amount="{ item }">
           <div>
             <span style="padding-right: 4px">{{ item.currency }}</span>
@@ -44,188 +49,191 @@
     </div>
 
     <el-dialog title="打印" v-if="openPrint" v-model="openPrint" width="860">
-      <div id="pdfDom" style="width: 800px; padding: 16px; font-size: 12px !important">
-        <div style="font-size: 18px; text-align: center">
-          {{ printDetails.sellCorporationNameEn }}
-        </div>
-        <div style="text-align: center">
-          {{ printDetails.sellCountryName }},{{ printDetails.sellProvinceName }},{{ printDetails.sellCityName }},{{ printDetails.sellDetailedAddress }}
-        </div>
-        <div style="font-size: 14px; color: #409eff; text-align: center; padding-top: 16px">PROFORMA INVOICE</div>
-        <div style="padding-top: 8px">
-          <div>PI NO. : {{ printDetails.contractCode }}</div>
-          <div>PI DATE: {{ printDetails.createTimeEn }}</div>
-        </div>
-        <div style="border: 1px solid black; display: flex">
-          <div style="width: 50%; border-right: 1px solid black">
-            <div style="color: #409eff">VENDOR:</div>
-            <div>{{ printDetails.sellCorporationNameEn }}</div>
-            <div style="padding: 16px 0">
-              {{ printDetails.sellCountryName }},{{ printDetails.sellProvinceName }},{{ printDetails.sellCityName }},{{ printDetails.sellDetailedAddress }}
-            </div>
-            <div>CONTACT: {{ printDetails.sellContactName }}</div>
-            <div>TEL.: {{ printDetails.sellContactNumber }}</div>
+      <div id="printMe">
+        <div id="pdfDom" style="width: 800px; padding: 16px; font-size: 12px !important">
+          <div style="font-size: 18px; text-align: center">
+            {{ printDetails.sellCorporationNameEn }}
           </div>
-          <div style="width: 50%">
-            <div style="color: #409eff">BUYER:</div>
-            <div>{{ printDetails.buyCorporationName }}</div>
-            <div style="padding: 16px 0">
-              {{ printDetails.buyDetailedAddress }},{{ printDetails.buyCityName }},{{ printDetails.buyProvinceName }},{{ printDetails.buyCountryName }}
-            </div>
-            <div>CONTACT: {{ printDetails.buyContactName }}</div>
-            <div>TEL.: {{ printDetails.buyContactNumber }}</div>
+          <div style="text-align: center">
+            {{ printDetails.sellCountryName }},{{ printDetails.sellProvinceName }},{{ printDetails.sellCityName }},{{ printDetails.sellDetailedAddress }}
           </div>
-        </div>
-        <div style="height: 16px"></div>
-        <div style="border: 1px solid black">
-          <div style="display: flex; width: 100%">
-            <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="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 style="font-size: 14px; color: #409eff; text-align: center; padding-top: 16px">PROFORMA INVOICE</div>
+          <div style="padding-top: 8px">
+            <div>PI NO. : {{ printDetails.contractCode }}</div>
+            <div>PI DATE: {{ printDetails.createTimeEn }}</div>
+          </div>
+          <div style="border: 1px solid black; display: flex">
+            <div style="width: 50%; border-right: 1px solid black">
+              <div style="color: #409eff">VENDOR:</div>
+              <div>{{ printDetails.sellCorporationNameEn }}</div>
+              <div style="padding: 16px 0">
+                {{ printDetails.sellCountryName }},{{ printDetails.sellProvinceName }},{{ printDetails.sellCityName }},{{ printDetails.sellDetailedAddress }}
+              </div>
+              <div>CONTACT: {{ printDetails.sellContactName }}</div>
+              <div>TEL.: {{ printDetails.sellContactNumber }}</div>
             </div>
-            <div style="width: 33%; border-bottom: 1px solid black">
-              <div style="color: #409eff">PLACE OF DISCHARGE:</div>
-              <div>{{ printDetails.transportRemark }}</div>
+            <div style="width: 50%">
+              <div style="color: #409eff">BUYER:</div>
+              <div>{{ printDetails.buyCorporationName }}</div>
+              <div style="padding: 16px 0">
+                {{ printDetails.buyDetailedAddress }},{{ printDetails.buyCityName }},{{ printDetails.buyProvinceName }},{{ printDetails.buyCountryName }}
+              </div>
+              <div>CONTACT: {{ printDetails.buyContactName }}</div>
+              <div>TEL.: {{ printDetails.buyContactNumber }}</div>
             </div>
           </div>
-          <div style="display: flex; width: 100%">
-            <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 style="height: 16px"></div>
+          <div style="border: 1px solid black">
+            <div style="display: flex; width: 100%">
+              <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="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>
+              <div style="width: 33%; border-bottom: 1px solid black">
+                <div style="color: #409eff">PLACE OF DISCHARGE:</div>
+                <div>{{ printDetails.transportRemark }}</div>
               </div>
             </div>
-            <div style="width: 34%; border-bottom: 1px solid black; border-right: 1px solid black">
-              <div style="color: #409eff">CURRENCY:</div>
-              <div>
-                {{ printDetails.currency }}
+            <div style="display: flex; width: 100%">
+              <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="width: 34%; border-bottom: 1px solid black; border-right: 1px solid black">
+                <div style="color: #409eff">CURRENCY:</div>
+                <div>
+                  {{ printDetails.currency }}
+                </div>
+              </div>
+              <div style="width: 33%; border-bottom: 1px solid black">
+                <div style="color: #409eff">EXPORT BY/VIA:</div>
+                <div>
+                  {{ dictValueLabel(printDetails.transportMethod, shippingMethod) }}
+                </div>
               </div>
             </div>
-            <div style="width: 33%; border-bottom: 1px solid black">
-              <div style="color: #409eff">EXPORT BY/VIA:</div>
-              <div>
-                {{ dictValueLabel(printDetails.transportMethod, shippingMethod) }}
+            <div style="display: flex; width: 100%">
+              <div style="width: 33%; border-right: 1px solid black">
+                <div style="color: #409eff">DELIVERY TIME:</div>
+                <div>{{ printDetails.deliveryTime }}</div>
+              </div>
+              <div style="width: 67%">
+                <div style="color: #409eff">TERMS OF PAYMENT:</div>
+                <div>{{ printDetails.remark }}</div>
               </div>
             </div>
           </div>
-          <div style="display: flex; width: 100%">
-            <div style="width: 33%; border-right: 1px solid black">
-              <div style="color: #409eff">DELIVERY TIME:</div>
-              <div>{{ printDetails.deliveryTime }}</div>
-            </div>
-            <div style="width: 67%">
-              <div style="color: #409eff">TERMS OF PAYMENT:</div>
-              <div>{{ printDetails.remark }}</div>
-            </div>
+          <div style="height: 16px"></div>
+          <div class="baseRow" style="display: flex; color: #409eff">
+            <div class="contentRow" style="width: 50px; text-align: center">NO.</div>
+            <div class="contentRow" style="width: calc(100% - 450px); text-align: center">COMMODITY, SPECIFICATION</div>
+            <div class="contentRow" style="width: 100px; text-align: center">UNIT</div>
+            <div class="contentRow" style="width: 100px; text-align: center">QUANTITY</div>
+            <div class="contentRow" style="width: 100px; text-align: center">UNIT PRICE</div>
+            <div class="contentRow" style="width: 100px; text-align: center">TOTAL PRICE</div>
           </div>
-        </div>
-        <div style="height: 16px"></div>
-        <div class="baseRow" style="display: flex; color: #409eff">
-          <div class="contentRow" style="width: 50px; text-align: center">NO.</div>
-          <div class="contentRow" style="width: calc(100% - 450px); text-align: center">COMMODITY, SPECIFICATION</div>
-          <div class="contentRow" style="width: 100px; text-align: center">UNIT</div>
-          <div class="contentRow" style="width: 100px; text-align: center">QUANTITY</div>
-          <div class="contentRow" style="width: 100px; text-align: center">UNIT PRICE</div>
-          <div class="contentRow" style="width: 100px; text-align: center">TOTAL PRICE</div>
-        </div>
-        <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="contentRow" style="width: 50px; text-align: center">
-              {{ index + 1 }}
-            </div>
-            <div class="contentRow" style="width: calc(100% - 450px); text-align: center">
-              {{ item.productName }}
+          <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="contentRow" style="width: 50px; text-align: center">
+                {{ index + 1 }}
+              </div>
+              <div class="contentRow" style="width: calc(100% - 450px); text-align: center">
+                {{ item.productName }}
+              </div>
+              <div class="contentRow" style="width: 100px; text-align: center">
+                {{ dictValueLabel(item.productUnit, productUnit) }}
+              </div>
+              <div class="contentRow" style="width: 100px; text-align: center">
+                {{ item.productQuantity }}
+              </div>
+              <div class="contentRow" style="width: 100px; text-align: center">
+                {{ item.productPrice }}
+              </div>
+              <div class="contentRow" style="width: 100px; text-align: center">
+                {{ item.amount }}
+              </div>
             </div>
+          </div>
+          <div class="baseRow" style="display: flex; color: #409eff">
+            <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">
-              {{ dictValueLabel(item.productUnit, productUnit) }}
+              {{ statistics("productQuantity", 0) }}
             </div>
+            <div class="contentRow" style="width: 100px; text-align: center"></div>
             <div class="contentRow" style="width: 100px; text-align: center">
-              {{ item.productQuantity }}
+              {{ statistics("amount", 2) }}
             </div>
-            <div class="contentRow" style="width: 100px; text-align: center">
-              {{ item.productPrice }}
+          </div>
+          <!-- <div v-if="printDetails.quotationPayList && printDetails.quotationPayList.length > 0">
+            <div class="baseRow" style="display: flex" v-for="(item, index) in printDetails.quotationPayList" :key="index">
+              <div class="contentRow" style="width: calc(100% - 100px); text-align: right; color: #409eff">{{ item.payName }}:</div>
+              <div class="contentRow" style="width: 100px; text-align: center">{{ item.amount }}</div>
             </div>
+          </div> -->
+          <div class="baseRow" style="display: flex">
+            <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">
-              {{ item.amount }}
+              {{ statisticsTwo("amount", 2) }}
             </div>
           </div>
-        </div>
-        <div class="baseRow" style="display: flex; color: #409eff">
-          <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">
-            {{ statistics("productQuantity", 0) }}
-          </div>
-          <div class="contentRow" style="width: 100px; text-align: center"></div>
-          <div class="contentRow" style="width: 100px; text-align: center">
-            {{ statistics("amount", 2) }}
-          </div>
-        </div>
-        <!-- <div v-if="printDetails.quotationPayList && printDetails.quotationPayList.length > 0">
-          <div class="baseRow" style="display: flex" v-for="(item, index) in printDetails.quotationPayList" :key="index">
-            <div class="contentRow" style="width: calc(100% - 100px); text-align: right; color: #409eff">{{ item.payName }}:</div>
-            <div class="contentRow" style="width: 100px; text-align: center">{{ item.amount }}</div>
-          </div>
-        </div> -->
-        <div class="baseRow" style="display: flex">
-          <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">
-            {{ statisticsTwo("amount", 2) }}
+          <div class="baseRow" style="display: flex">
+            <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">
+              {{ printDetails.totalAmount }}
+            </div>
           </div>
-        </div>
-        <div class="baseRow" style="display: flex">
-          <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">
-            {{ printDetails.totalAmount }}
+          <div class="baseRow" style="display: flex; border-bottom: 1px solid black">
+            <div class="contentRow" style="width: 100%">
+              {{ translateIntoEnglish(printDetails.totalAmount, printDetails.currency) }}
+            </div>
           </div>
-        </div>
-        <div class="baseRow" style="display: flex; border-bottom: 1px solid black">
-          <div class="contentRow" style="width: 100%">
-            {{ translateIntoEnglish(printDetails.totalAmount, printDetails.currency) }}
+          <div style="height: 16px"></div>
+          <div class="baseRow" style="color: #409eff">
+            <div class="contentRow" style="width: 100%">ACCOUNT INFORMATION:</div>
           </div>
-        </div>
-        <div style="height: 16px"></div>
-        <div class="baseRow" style="color: #409eff">
-          <div class="contentRow" style="width: 100%">ACCOUNT INFORMATION:</div>
-        </div>
-        <div class="baseRow" style="border-bottom: 1px solid black">
-          <div class="contentRow" style="width: 100%">
-            <div style="line-height: 24px; padding-left: 4px; word-break: break-all; word-wrap: break-word">
-              Beneficiary Name: {{ printDetails.beneficiaryName }}
-            </div>
-            <div style="line-height: 24px; padding-left: 4px; word-break: break-all; word-wrap: break-word">
-              Beneficiary Bank: {{ printDetails.beneficiaryBank }}
-            </div>
-            <div style="line-height: 24px; padding-left: 4px; word-break: break-all; word-wrap: break-word">
-              Beneficiary Bank Address: {{ printDetails.beneficiaryBankAddress }}
+          <div class="baseRow" style="border-bottom: 1px solid black">
+            <div class="contentRow" style="width: 100%">
+              <div style="line-height: 24px; padding-left: 4px; word-break: break-all; word-wrap: break-word">
+                Beneficiary Name: {{ printDetails.beneficiaryName }}
+              </div>
+              <div style="line-height: 24px; padding-left: 4px; word-break: break-all; word-wrap: break-word">
+                Beneficiary Bank: {{ printDetails.beneficiaryBank }}
+              </div>
+              <div style="line-height: 24px; padding-left: 4px; word-break: break-all; word-wrap: break-word">
+                Beneficiary Bank Address: {{ printDetails.beneficiaryBankAddress }}
+              </div>
+              <div style="line-height: 24px; padding-left: 4px; word-break: break-all; word-wrap: break-word">
+                Beneficiary Account Number: {{ printDetails.beneficiaryAccountNumber }}
+              </div>
+              <div style="line-height: 24px; padding-left: 4px; word-break: break-all; word-wrap: break-word">Swift Code: {{ printDetails.swiftCode }}</div>
+              <div style="line-height: 24px; padding-left: 4px; word-break: break-all; word-wrap: break-word">
+                Beneficiary Address: {{ printDetails.beneficiaryAddress }}
+              </div>
             </div>
-            <div style="line-height: 24px; padding-left: 4px; word-break: break-all; word-wrap: break-word">
-              Beneficiary Account Number: {{ printDetails.beneficiaryAccountNumber }}
+          </div>
+          <div style="height: 32px"></div>
+          <div style="display: flex">
+            <div style="width: 50%">
+              <div style="color: #409eff">CONFIRMED BY VENDOR:</div>
+              <div>{{ printDetails.sellCorporationNameEn }}</div>
             </div>
-            <div style="line-height: 24px; padding-left: 4px; word-break: break-all; word-wrap: break-word">Swift Code: {{ printDetails.swiftCode }}</div>
-            <div style="line-height: 24px; padding-left: 4px; word-break: break-all; word-wrap: break-word">
-              Beneficiary Address: {{ printDetails.beneficiaryAddress }}
+            <div style="width: 50%">
+              <div style="color: #409eff">CONFIRMED BY BUYER:</div>
+              <div>{{ printDetails.buyCorporationName }}</div>
             </div>
           </div>
         </div>
-        <div style="height: 32px"></div>
-        <div style="display: flex">
-          <div style="width: 50%">
-            <div style="color: #409eff">CONFIRMED BY VENDOR:</div>
-            <div>{{ printDetails.sellCorporationNameEn }}</div>
-          </div>
-          <div style="width: 50%">
-            <div style="color: #409eff">CONFIRMED BY BUYER:</div>
-            <div>{{ printDetails.buyCorporationName }}</div>
-          </div>
-        </div>
       </div>
       <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>
       </template>
     </el-dialog>
@@ -340,7 +348,7 @@ const config = computed(() => {
     {
       attrs: {
         label: "合同编码",
-        prop: "code",
+        slot: "code",
         width: 180,
       },
     },
@@ -620,6 +628,25 @@ const clickAccomplish = (row) => {
     getList();
   });
 };
+const pushProcessApproval = (row) => {
+  proxy.$router.push({
+    path: "/platform_manage/process/processApproval",
+    query: {
+      flowKey: "contract_flow",
+      id: row.flowId,
+      processType: 20,
+      random: proxy.random(),
+      flowName: "销售合同详情",
+    },
+  });
+  return;
+};
+const printObj = ref({
+  id: "printMe",
+  popTitle: "",
+  extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
+  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
+});
 </script>
 
 <style lang="scss" scoped>