报价单页面优化

package.json

@@ -51,7 +51,8 @@
     "vue-cropper": "1.0.3",
     "vue-i18n": "^9.3.0-beta.17",
     "vue-router": "4.1.4",
-    "vue-super-flow": "^1.3.8"
+    "vue-super-flow": "^1.3.8",
+    "vue3-print-nb": "^0.1.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "3.1.0",

src/main.js

@@ -77,6 +77,10 @@ import TreeSelect from '@/components/TreeSelect'
 import DictTag from '@/components/DictTag'
 // 多语言
 import i18n from "@/lang/index";
+
+// 打印
+import print from "vue3-print-nb"
+
 const app = createApp(App)
 console.log(i18n.global.t('login.welcomeToLogin'))
 // 全局方法挂载
@@ -123,6 +127,7 @@ app.use(plugins)
 
 app.use(i18n)
 app.use(elementIcons)
+app.use(print)
 app.component('svg-icon', SvgIcon)
 
 directive(app)

src/views/finance/fundManage/funds/index.vue

@@ -836,6 +836,7 @@ const pushProcessApproval = (row) => {
       id: row.flowInfoId,
       processType: 20,
       random: proxy.random(),
+      flowName: "请款详情",
     },
   });
   return;

src/views/salesMange/saleContract/priceSheet/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>
@@ -30,192 +35,195 @@
     </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">
-          {{ getLabel(printDetails.sellCorporationId, corporationList, "nameEn") }}
-        </div>
-        <div style="text-align: center">
-          {{ printDetails.sellCountryName }},{{ printDetails.sellProvinceName }},{{ printDetails.sellCityName }},{{ printDetails.sellAddress }}
-        </div>
-        <div style="font-size: 14px; color: #409eff; text-align: center; padding-top: 16px">QUOTATION</div>
-        <div style="padding-top: 8px">
-          <div>Reference NO. : {{ printDetails.code }}</div>
-          <div style="display: flex">
-            <div style="width: 50%">DATE: {{ moment(printDetails.createTime).format("DD/MMM/yyyy") }}</div>
-            <div style="width: 50%">Valid Date:</div>
+      <div id="printMe">
+        <div id="pdfDom" style="width: 800px; padding: 16px; font-size: 12px !important">
+          <div style="font-size: 18px; text-align: center">
+            {{ getLabel(printDetails.sellCorporationId, corporationList, "nameEn") }}
           </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>
-              {{ getLabel(printDetails.sellCorporationId, corporationList, "nameEn") }}
-            </div>
-            <div style="padding: 16px 0">
-              {{ printDetails.sellCountryName }},{{ printDetails.sellProvinceName }},{{ printDetails.sellCityName }},{{ printDetails.sellAddress }}
-            </div>
-            <div>{{ printDetails.sellContactName }},{{ printDetails.sellContactNumber }}</div>
+          <div style="text-align: center">
+            {{ printDetails.sellCountryName }},{{ printDetails.sellProvinceName }},{{ printDetails.sellCityName }},{{ printDetails.sellAddress }}
           </div>
-          <div style="width: 50%">
-            <div style="color: #409eff">BUYER:</div>
-            <div>
-              {{ getLabel(printDetails.buyCorporationId, customerList, "name") }}
+          <div style="font-size: 14px; color: #409eff; text-align: center; padding-top: 16px">QUOTATION</div>
+          <div style="padding-top: 8px">
+            <div>Reference NO. : {{ printDetails.code }}</div>
+            <div style="display: flex">
+              <div style="width: 50%">DATE: {{ moment(printDetails.createTime).format("DD/MMM/yyyy") }}</div>
+              <div style="width: 50%">Valid Date:</div>
             </div>
-            <div style="padding: 16px 0">
-              {{ printDetails.buyCountryName }},{{ printDetails.buyProvinceName }},{{ printDetails.buyCityName }},{{ printDetails.buyAddress }}
-            </div>
-            <div>{{ printDetails.buyContactName }},{{ printDetails.buyContactNumber }}</div>
           </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>
-            <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="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 style="border: 1px solid black; display: flex">
+            <div style="width: 50%; border-right: 1px solid black">
+              <div style="color: #409eff">VENDOR:</div>
               <div>
-                {{ dictValueLabel(printDetails.tradeMethods, tradeMethods) }}
+                {{ getLabel(printDetails.sellCorporationId, corporationList, "nameEn") }}
               </div>
-            </div>
-            <div style="width: 34%; border-bottom: 1px solid black; border-right: 1px solid black">
-              <div style="color: #409eff">CURRENCY:</div>
-              <div>
-                {{ dictValueLabel(printDetails.currency, accountCurrency) }}
+              <div style="padding: 16px 0">
+                {{ printDetails.sellCountryName }},{{ printDetails.sellProvinceName }},{{ printDetails.sellCityName }},{{ printDetails.sellAddress }}
               </div>
+              <div>{{ printDetails.sellContactName }},{{ printDetails.sellContactNumber }}</div>
             </div>
-            <div style="width: 33%; border-bottom: 1px solid black">
-              <div style="color: #409eff">EXPORT BY/VIA:</div>
+            <div style="width: 50%">
+              <div style="color: #409eff">BUYER:</div>
               <div>
-                {{ dictValueLabel(printDetails.transportMethod, shippingMethod) }}
+                {{ getLabel(printDetails.buyCorporationId, customerList, "name") }}
               </div>
+              <div style="padding: 16px 0">
+                {{ printDetails.buyCountryName }},{{ printDetails.buyProvinceName }},{{ printDetails.buyCityName }},{{ printDetails.buyAddress }}
+              </div>
+              <div>{{ printDetails.buyContactName }},{{ printDetails.buyContactNumber }}</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>
-            <div style="width: 67%">
-              <div style="color: #409eff">TERMS OF PAYMENT:</div>
-              <div>{{ printDetails.remark }}</div>
-            </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.quotationProductList && printDetails.quotationProductList.length > 0">
-          <div class="baseRow" style="display: flex" v-for="(item, index) in printDetails.quotationProductList" :key="item.productId">
-            <div class="contentRow" style="width: 50px; text-align: center">
-              {{ index + 1 }}
+          <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 class="contentRow" style="width: calc(100% - 450px); text-align: center">
-              {{ item.productName }}
+            <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>
+                  {{ dictValueLabel(printDetails.currency, accountCurrency) }}
+                </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 class="contentRow" style="width: 100px; text-align: center">
-              {{ item.productUnit }}
+            <div style="display: flex; width: 100%">
+              <div style="width: 33%; border-right: 1px solid black">
+                <div style="color: #409eff">DELIVERY TIME:</div>
+              </div>
+              <div style="width: 67%">
+                <div style="color: #409eff">TERMS OF PAYMENT:</div>
+                <div>{{ printDetails.remark }}</div>
+              </div>
             </div>
-            <div class="contentRow" style="width: 100px; text-align: center">
-              {{ item.quantity }}
+          </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.quotationProductList && printDetails.quotationProductList.length > 0">
+            <div class="baseRow" style="display: flex" v-for="(item, index) in printDetails.quotationProductList" :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">
+                {{ item.productUnit }}
+              </div>
+              <div class="contentRow" style="width: 100px; text-align: center">
+                {{ item.quantity }}
+              </div>
+              <div class="contentRow" style="width: 100px; text-align: center">
+                {{ item.price }}
+              </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">
-              {{ item.price }}
+              {{ statistics("quantity", 0) }}
             </div>
+            <div class="contentRow" style="width: 100px; text-align: center"></div>
             <div class="contentRow" style="width: 100px; text-align: center">
-              {{ item.amount }}
+              {{ statistics("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("quantity", 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 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>
-        <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="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">
-              {{ item.amount }}
+              {{ getAllMoney(statistics("amount", 2)) }}
             </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">
-            {{ getAllMoney(statistics("amount", 2)) }}
+          <div class="baseRow" style="display: flex; border-bottom: 1px solid black">
+            <div class="contentRow" style="width: 100%">
+              {{ translateIntoEnglish(printDetails.amount, printDetails.currency) }}
+            </div>
           </div>
-        </div>
-        <div class="baseRow" style="display: flex; border-bottom: 1px solid black">
-          <div class="contentRow" style="width: 100%">
-            {{ translateIntoEnglish(printDetails.amount, 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>
-            <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 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>
-        </div> -->
-        <div style="height: 32px"></div>
-        <div style="display: flex">
-          <div style="width: 50%">
-            <div style="color: #409eff">CONFIRMED BY VENDOR:</div>
-            <div>
-              {{ getLabel(printDetails.sellCorporationId, corporationList, "nameEn") }}
+          </div> -->
+          <div style="height: 32px"></div>
+          <div style="display: flex">
+            <div style="width: 50%">
+              <div style="color: #409eff">CONFIRMED BY VENDOR:</div>
+              <div>
+                {{ getLabel(printDetails.sellCorporationId, corporationList, "nameEn") }}
+              </div>
             </div>
-          </div>
-          <div style="width: 50%">
-            <div style="color: #409eff">CONFIRMED BY BUYER:</div>
-            <div>
-              {{ getLabel(printDetails.buyCorporationId, customerList, "name") }}
+            <div style="width: 50%">
+              <div style="color: #409eff">CONFIRMED BY BUYER:</div>
+              <div>
+                {{ getLabel(printDetails.buyCorporationId, customerList, "name") }}
+              </div>
             </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>
@@ -289,7 +297,7 @@ const config = computed(() => {
     {
       attrs: {
         label: "报价单号",
-        prop: "code",
+        slot: "code",
         width: 200,
       },
     },
@@ -592,6 +600,25 @@ const generateContract = (row) => {
     },
   });
 };
+const pushProcessApproval = (row) => {
+  proxy.$router.push({
+    path: "/platform_manage/process/processApproval",
+    query: {
+      flowKey: "sale_quotation_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>