Merge pull request '审批打印' (#19) from yyw into master

Reviewed-on: #19

package-lock.json

@@ -286,6 +286,11 @@
         "@babel/types": "^7.16.0"
       }
     },
+    "@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="
+    },
     "@babel/helper-validator-identifier": {
       "version": "7.15.7",
       "resolved": "https://registry.nlark.com/@babel/helper-validator-identifier/download/@babel/helper-validator-identifier-7.15.7.tgz?cache=0&sync_timestamp=1631920000984&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fhelper-validator-identifier%2Fdownload%2F%40babel%2Fhelper-validator-identifier-7.15.7.tgz",
@@ -1172,6 +1177,11 @@
       "resolved": "https://registry.npmmirror.com/@element-plus/icons/-/icons-0.0.11.tgz",
       "integrity": "sha512-iKQXSxXu131Ai+I9Ymtcof9WId7kaXvB1+WRfAfpQCW7UiAMYgdNDqb/u0hgTo2Yq3MwC4MWJnNuTBEpG8r7+A=="
     },
+    "@element-plus/icons-vue": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.2.tgz",
+      "integrity": "sha512-OzIuTaIfC8QXEPmJvB4Y4kw34rSXdCJzxcD1kFStBvr8bK6X1zQAYDo0CNMjojnfTqRQCJ0I7prlErcoRiET2A=="
+    },
     "@floating-ui/core": {
       "version": "1.6.8",
       "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.6.8.tgz",
@@ -5168,6 +5178,7 @@
       "integrity": "sha512-ZlVAdUOoJliv4kW3ntWnnSHMT+u/Os7mXJjk2xzOlqNeHaI2/ozlF+R58ZCEak8ZnDi6+5A2viWEYRsq64IuiA==",
       "requires": {
         "@ctrl/tinycolor": "^3.4.1",
+        "@element-plus/icons-vue": "^2.3.1",
         "@floating-ui/dom": "^1.0.1",
         "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
         "@types/lodash": "^4.14.182",
@@ -9976,7 +9987,6 @@
       "version": "2.4.1",
       "resolved": "https://registry.nlark.com/prettier/download/prettier-2.4.1.tgz?cache=0&sync_timestamp=1631777167012&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fprettier%2Fdownload%2Fprettier-2.4.1.tgz",
       "integrity": "sha1-Zx4RyJwUpM/Ids5WQQbEpnJsn1w=",
-      "dev": true,
       "optional": true
     },
     "pretty-error": {
@@ -12968,6 +12978,88 @@
         }
       }
     },
+    "vue-print-nb": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmmirror.com/vue-print-nb/-/vue-print-nb-1.7.5.tgz",
+      "integrity": "sha512-iNbNyUVRWz0Ha1UTiCKxMPtHLUDGgNI8e8xmD3xqm9RlXIUeX9bT7DgNAfY8vPzqyFRHqGjxLI1rycKH366ziQ==",
+      "requires": {
+        "vue": "^2.6.11"
+      },
+      "dependencies": {
+        "@babel/helper-validator-identifier": {
+          "version": "7.27.1",
+          "resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
+          "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow=="
+        },
+        "@babel/parser": {
+          "version": "7.28.4",
+          "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.28.4.tgz",
+          "integrity": "sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==",
+          "requires": {
+            "@babel/types": "^7.28.4"
+          }
+        },
+        "@babel/types": {
+          "version": "7.28.4",
+          "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.28.4.tgz",
+          "integrity": "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==",
+          "requires": {
+            "@babel/helper-string-parser": "^7.27.1",
+            "@babel/helper-validator-identifier": "^7.27.1"
+          }
+        },
+        "@vue/compiler-sfc": {
+          "version": "2.7.16",
+          "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
+          "integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
+          "requires": {
+            "@babel/parser": "^7.23.5",
+            "postcss": "^8.4.14",
+            "prettier": "^1.18.2 || ^2.0.0",
+            "source-map": "^0.6.1"
+          }
+        },
+        "nanoid": {
+          "version": "3.3.11",
+          "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.11.tgz",
+          "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="
+        },
+        "picocolors": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz",
+          "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
+        },
+        "postcss": {
+          "version": "8.5.6",
+          "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.6.tgz",
+          "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+          "requires": {
+            "nanoid": "^3.3.11",
+            "picocolors": "^1.1.1",
+            "source-map-js": "^1.2.1"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "source-map-js": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
+          "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="
+        },
+        "vue": {
+          "version": "2.7.16",
+          "resolved": "https://registry.npmmirror.com/vue/-/vue-2.7.16.tgz",
+          "integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==",
+          "requires": {
+            "@vue/compiler-sfc": "2.7.16",
+            "csstype": "^3.1.0"
+          }
+        }
+      }
+    },
     "vue-router": {
       "version": "4.0.12",
       "resolved": "https://registry.npmmirror.com/vue-router/download/vue-router-4.0.12.tgz?cache=0&sync_timestamp=1635262041312&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fvue-router%2Fdownload%2Fvue-router-4.0.12.tgz",
@@ -13000,6 +13092,14 @@
       "integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
       "dev": true
     },
+    "vue3-print-nb": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmmirror.com/vue3-print-nb/-/vue3-print-nb-0.1.4.tgz",
+      "integrity": "sha512-LExI7viEzplR6ZKQ2b+V4U0cwGYbVD4fut/XHvk3UPGlT5CcvIGs6VlwGp107aKgk6P8Pgx4rco3Rehv2lti3A==",
+      "requires": {
+        "vue": "^3.0.5"
+      }
+    },
     "vue3-treeselect": {
       "version": "0.1.10",
       "resolved": "https://registry.npmmirror.com/vue3-treeselect/-/vue3-treeselect-0.1.10.tgz",

package.json

@@ -26,7 +26,9 @@
     "sass": "^1.43.4",
     "sortablejs": "^1.15.0",
     "vue": "^3.0.0",
+    "vue-print-nb": "^1.7.5",
     "vue-router": "^4.0.0-0",
+    "vue3-print-nb": "^0.1.4",
     "vue3-treeselect": "^0.1.10",
     "vuex": "^4.1.0",
     "wangeditor": "^4.7.9",

src/components/approval/detail.vue

@@ -1,5 +1,9 @@
 <template>
   <div>
+    <div class="opaBox" v-if="Type == 1">
+      <el-button type="primary" v-print="printOption"><el-icon><Printer /></el-icon>&nbsp;打印</el-button>
+    </div>
+    <div id="printBox" class="printBox" :class="isPrint ? 'print' : ''">
       <el-form label-position="right" label-width="110px" v-loading="loading" :disabled="true">
         <el-form-item label="公司名称：">
           <el-select v-model="itemInfo.company_id" placeholder="请选择" clearable filterable style="width: 320px;">
@@ -66,7 +70,8 @@
             </div>
             <template v-if="item.type == 1 || item.type == 3">
               <el-form-item label="商品信息：">
-              <el-table :data="item.extend.purchaseOrder.products" style="width: 100%;margin-top: 15px;" border>
+                <!-- <div class="bvan" :class="isPrint ? 'on' : ''">
+                  <el-table :data="item.extend.purchaseOrder.products" style="width: 100%;margin-top: 15px;" border id="pagetable">
                     <el-table-column label="商品名称" prop="goods_title" />
                     <el-table-column label="规格名称" prop="sku_title" />
                     <el-table-column label="预计产品单价（含税）" align="center" prop="expect_unit_price" />
@@ -97,10 +102,52 @@
                       <template #default="scope"><span class="blue">{{ scope.row.apply_amount }}</span></template>
                     </el-table-column>
                   </el-table>
+                </div> -->
+
+                <div class="normal">
+                  <table cellspacing="0" border="1">
+                    <thead>
+                      <tr>
+                        <td>商品名称</td>
+                        <td>规格名称</td>
+                        <td>预计产品单价（含税）</td>
+                        <td v-if="item.type == 3">实际产品单价（含税）</td>
+                        <td>单位</td>
+                        <td>预计采购数量</td>
+                        <td v-if="item.type == 3">实际采购数量</td>
+                        <td>预付款比例(%)</td>
+                        <td>交货时间</td>
+                        <td>预计订单金额(元)</td>
+                        <td v-if="item.type == 3">实际订单金额</td>
+                        <td v-if="item.type == 1">预付款(元)</td>
+                        <td v-if="item.type == 3">已打款</td>
+                        <td v-if="item.type == 1">尾款(元)</td>
+                        <td v-if="item.type == 3">申请打款金数</td>
+                      </tr>
+                    </thead>
+                    <tr v-for="(it, index) in item.extend.purchaseOrder.products" :key="index">
+                      <td>{{ it.goods_title }}</td>
+                      <td>{{ it.sku_title }}</td>
+                      <td>{{ it.expect_unit_price }}</td>
+                      <td v-if="item.type == 3" class="blue">{{ it.real_unit_price }}</td>
+                      <td>{{ it.unit }}</td>
+                      <td>{{ it.expect_quantity }}</td>
+                      <td v-if="item.type == 3" class="blue">{{ it.real_quantity }}</td>
+                      <td>{{ it.prepayment_ratio}}%</td>
+                      <td>{{ it.delivery_date}}</td>
+                      <td>{{ it.estimated_order_amount }}</td>
+                      <td v-if="item.type == 3" class="blue">{{ it.real_amount }}</td>
+                      <td v-if="item.type == 1">{{ it.advance_payment }}</td>
+                      <td v-if="item.type == 3" class="blue">{{ it.has_paid_amount }}</td>
+                      <td v-if="item.type == 1">{{ it.balance_payment }}%</td>
+                      <td v-if="item.type == 3" class="blue">{{ it.apply_amount }}</td>
+                    </tr>
+                  </table>
+                </div>
               </el-form-item>
 
               <el-form-item label="其他费用：">
-              <el-table :data="filteredData(item.extend.purchaseOrder.other_expenses, item)" style="width: 100%;margin-top: 15px;" border>
+                <el-table :data="filteredData(item.extend.purchaseOrder.other_expenses, item)" style="width: 900px;margin-top: 15px;" border>
                   <el-table-column label="费用名称" prop="fee_name" />
                   <el-table-column label="订单金额" prop="amount" />
                   <el-table-column label="打款信息">
@@ -184,17 +231,18 @@
           </div>
         </div>
       </div>
+    </div>
     <div class="space"></div>
   </div>
 </template>
 
 <script>
-import { Plus, Search } from "@element-plus/icons"
+import { Plus, Search, Printer } from "@element-plus/icons"
-import { reactive, toRefs, watch } from 'vue'
+import { reactive, toRefs, watch, ref } from 'vue'
 import { get } from '@/api/request'
 
 export default {
-  components: { Plus, Search },
+  components: { Plus, Search, Printer },
   props: {
     show: {
       type: Boolean,
@@ -226,7 +274,8 @@ export default {
         '2': '',
         '3': '尾款打款审批'
       },
-      Type: 1
+      Type: 1,
+      isPrint: false
     })
 
     async function getDetail() {
@@ -334,9 +383,21 @@ export default {
       }
     }
 
+    const printOption = ref({
+      id: 'printBox',
+      popTitle: '审批信息',
+      preview: true,
+      previewBeforeOpenCallback() {
+        data.isPrint = true
+      },
+      closeCallback() {
+        data.isPrint = false
+      }
+    })
+
     watch(() => props, async (newProps) => {
       if (newProps.show) {
-        data.Type = newProps.type
+        data.Type = newProps.type || 0
         await getDetail()
         getLogsList()
         getCompany()
@@ -347,6 +408,7 @@ export default {
     }, { deep: true, immediate: true })
 
     return {
+      printOption,
       ...toRefs(data),
       getCompany,
       getManagerList,
@@ -361,6 +423,11 @@ export default {
 </script>
 
 <style scoped lang="scss">
+  .opaBox{
+    position: absolute;
+    right: 100px;
+    top: 30px;
+  }
   .space{
     background: repeating-linear-gradient(-45deg, #F56C6C 0, #F56C6C 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
     height: 2px;
@@ -413,4 +480,68 @@ export default {
   .blue{
     color: #1989fa;
   }
+  .bvan{
+    width: 100%;
+    &.on{
+      // width: auto;
+    }
+  }
+  ::v-deep .bvan table {
+    table-layout: auto !important;
+  }
+  ::v-deep .bvan .el-table__header {
+    width: 100% !important;
+  }
+  ::v-deep .bvan .el-table__body {
+    width: 100% !important;
+  }
+  ::v-deep .bvan #pagetable table{
+    table-layout: fixed !important;
+  }
+  .normal{
+    width: 100%;
+    table {
+      font-family: Arial, sans-serif;
+      font-size: 14px;
+      background-color: #f0f2f5;
+      border-collapse: collapse;
+      color: #454545;
+      table-layout: auto;
+      width: 100%;
+      text-align: center;
+      border-color: #ebeef5;
+      border-bottom-width: 1px;
+      border-bottom-style: solid;
+      border-bottom-color: #ebeef5;
+      thead {
+        border-top-width: 1px;
+        border-top-style: solid;
+        border-top-color: #ebeef5;
+        line-height: 40px;
+        font-weight: bold;
+        color: #333;
+      }
+      tr {
+        border-top-width: 1px;
+        border-top-style: solid;
+        border-top-color: #ebeef5;
+        line-height: 23px;
+      }
+      td{
+        padding: 12px 10px;
+        font-size: 14px;
+        font-family: Verdana;
+        width: 100px;
+        word-break: break-all; // 元素换行
+      }
+      // 斑马纹效果stripe
+      tr:nth-child(even) {
+        background: #F5F7F9;
+      }
+      tr:nth-child(odd) {
+        background: #FFF;
+      }
+    }
+  }
+  
 </style>

src/main.js

@@ -7,9 +7,11 @@ import 'element-plus/dist/index.css'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import '@/assets/icon/iconfont.css'
 import '@/assets/main.scss'
+import print from 'vue3-print-nb'
 
 createApp(App)
     .use(store)
+    .use(print)
     .use(router)
     .use(ElementPlus, { locale: zhCn, zIndex: 3000, size: 'default' })
     .mount('#app')

src/views/purchase/approval.vue

@@ -156,7 +156,7 @@
       </template>
     </el-dialog>
 
-    <el-dialog v-model="showDetail" width="1400px" title="查看详情">
+    <el-dialog v-model="showDetail" title="查看详情" fullscreen>
       <approval-detail :id="curId" :type="1" :show="showDetail"></approval-detail>
     </el-dialog>
 

src/views/purchase/supplier.vue

@@ -34,8 +34,10 @@
         </el-table-column>
         <el-table-column label="合同">
           <template #default="scope">
-            <div class="imgBox" v-if="scope.row.contract_path">
+            <div v-if="scope.row.contract_path">
-              <a :href="scope.row.contract_path" target="_blank">合同附件</a>
+              <div v-for="(it, i) in scope.row.contract_path" :key="i">
+                <a :href="it" target="_blank">合同附件</a>
+              </div>
             </div>
           </template>
         </el-table-column>
@@ -108,6 +110,7 @@
             :on-error="handleUploadError"
             :on-preview="previewFile"
             :headers="headers"
+            multiple
             :file-list="fileList"
             :show-file-list="true">
             <el-button type="primary">上传附件</el-button>
@@ -229,7 +232,12 @@ export default {
       data.itemInfo = JSON.parse(JSON.stringify(item))
       data.yyzzList = item.business_license_path ? [{url: item.business_license_path}] : []
       data.xkzList = item.production_license_path ? [{url: item.production_license_path}] : []
-      data.fileList = item.contract_path ? [{name: '合同附件', url: item.contract_path}] : []
+      data.fileList = []
+      if(item.contract_path && item.contract_path.length) {
+        item.contract_path.forEach(it => {
+          data.fileList.push({name: '合同附件', url: it})
+        })
+      }
       data.showDialog = true
     }
     
@@ -248,11 +256,16 @@ export default {
         return ElMessage.info('请输入银行开户名')
       }
       data.opa_loading = true
+      let imgs = []
+      for (let index = 0; index < data.fileList.length; index++) {
+        const obj = data.fileList[index]
+        imgs.push(obj.url)
+      }
       let params = {
         supplier_name: data.itemInfo.supplier_name,
         business_license_path: data.yyzzList[0].url,
         production_license_path: data.xkzList[0] && data.xkzList[0].url || '',
-        contract_path: data.fileList[0].url,
+        contract_path: imgs,
         bank_account: data.itemInfo.bank_account,
         bank_account_holder: data.itemInfo.bank_account_holder,
         bank_branch_name: data.itemInfo.bank_branch_name
@@ -312,9 +325,7 @@ export default {
     }
 
     function handleFileSuccess(res, ress) {
-      if (res.code === 0) {
+      data.fileList.push({ url: res.data.link })
-        data.fileList = [{ name: ress.name, url: res.data.link }]
-      }
     }
     function handleFileRemove(res, ress) {
       data.fileList = ress