From aeecb103cf6fe1ba8ad5eb1fb22672853172db6a Mon Sep 17 00:00:00 2001
From: 小小儁爺 <1694218219@qq.com>
Date: 星期二, 30 七月 2024 17:39:13 +0800
Subject: [PATCH] 1.增加列表数据求和功能

---
 src/views/workOrder/workOrderList.vue |  453 +++++++++++++++++++++++++++++++++++++++----------------
 1 files changed, 318 insertions(+), 135 deletions(-)

diff --git a/src/views/workOrder/workOrderList.vue b/src/views/workOrder/workOrderList.vue
index 2d963b1..6f348d3 100644
--- a/src/views/workOrder/workOrderList.vue
+++ b/src/views/workOrder/workOrderList.vue
@@ -135,6 +135,8 @@
           :data="tableData"
           :height="isExpandForm?tableHeight:(tableHeight+80)+'px'"
           border
+          :summary-method="getSummaries"
+          show-summary
           :row-class-name="tableRowClassName"
           :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+80)+'px'}"
           highlight-current-row
@@ -365,12 +367,12 @@
                   <i
                     class="el-icon-edit-outline"
                     :style="{color:$store.state.settings.theme}"
-                    @click.stop="edit('edit',row)"
+                    @click="edit('edit',row)"
                   />
                 </el-tooltip>
 
                 <el-tooltip v-del-tab-index class="item" effect="dark" content="鍒犻櫎" placement="top">
-                  <i class="el-icon-delete" :style="{color:$store.state.settings.theme}" @click.stop="del(row)" />
+                  <i class="el-icon-delete" :style="{color:$store.state.settings.theme}" @click="del(row)" />
                 </el-tooltip>
 
                 <el-tooltip class="item" effect="dark" content="鎵撳嵃宸ュ崟" placement="top">
@@ -383,7 +385,7 @@
                     :style="{color:$store.state.settings.theme}"
                     class="el-icon-printer"
                     style="cursor: pointer;margin-right: 15px"
-                    @click.stop="handlePrint(row.wo_code)"
+                    @click="handlePrint(row.wo_code,row.saleOrderCod)"
                   />
                 </el-tooltip>
 
@@ -392,7 +394,7 @@
                     class="el-icon-view"
                     style="cursor: pointer;"
                     :style="{color:$store.state.settings.theme}"
-                    @click.stop="edit('view',row)"
+                    @click="edit('view',row)"
                   />
                 </el-tooltip>
 
@@ -791,7 +793,7 @@
                 placeholder="璇疯緭鍏ュ伐搴忓崟浠�"
                 oninput="value=value.replace(/[^0-9.]/g,'')"
                 style="width: 100%"
-                @click.stop=""
+                @click=""
               />
             </template>
           </el-table-column>
@@ -1310,6 +1312,7 @@
     <el-dialog
       v-el-drag-dialog
       title=""
+      top="7vh"
       :visible.sync="dialogVisibleApprove"
       width="812px"
       class="dialogVisibleConfirmClass"
@@ -1319,129 +1322,265 @@
     >
       <!-- 瑕佹墦鍗扮殑鍖哄煙 -->
       <div id="printMe" style="padding: 30px">
-        <div style="font-size: 26px; text-align: center">娴佺▼鍗�</div>
+        <!--        <div v-for="(item,index) in tableDataPrint" :key="index">-->
+        <div>
+          <div style="font-size: 26px; text-align: center">娴佺▼鍗�</div>
 
-        <div style="display: flex;justify-content: space-around;margin-top: 20px; position: relative;">
-          <div style="width: 78%">
-            <el-form
-              ref="formApprove"
-              :model="formApprove"
-              label-width="80px"
-              inline
-              style="display: flex;justify-content: space-between"
+          <div style="display: flex;justify-content: space-around;margin-top: 20px; position: relative;">
+            <div style="width: 78%">
+              <el-form
+                ref="formApprove"
+                :model="formApprove"
+                label-width="80px"
+                inline
+                style="display: flex;justify-content: space-between"
+              >
+                <div class="elForm">
+                  <el-form-item label="閿�鍞崟鍙�:" class="formContent">
+                    {{ formApprove.saleOrderCode ?formApprove.saleOrderCode :'/' }}
+                  </el-form-item>
+                  <el-form-item label="宸ュ崟缂栧彿:" class="formContent">
+                    {{ formApprove.mesordercode }}
+                  </el-form-item>
+                  <el-form-item label="婧愬崟鍗曞彿:" class="formContent">
+                    {{ formApprove.m_po }}
+                  </el-form-item>
+                  <el-form-item label="浜у搧缂栫爜:" class="formContent">
+                    {{ formApprove.partcode }}
+                  </el-form-item>
+                  <el-form-item label="浜у搧鍚嶇О:" class="formContent">
+                    {{ formApprove.partname }}
+                  </el-form-item>
+                  <el-form-item label="浜у搧瑙勬牸:" class="formContent">
+                    {{ formApprove.partspec }}
+                  </el-form-item>
+                  <el-form-item label="宸ュ崟鏁伴噺:" class="formContent">
+                    {{ formApprove.plan_qty }}
+                  </el-form-item>
+                  <!--                <el-form-item label="宸ヨ壓璺嚎:" class="formContent">-->
+                  <!--                  {{ formApprove.routename }}-->
+                  <!--                </el-form-item>-->
+                  <el-form-item label="鎵撳嵃浜哄憳:" class="formContent">
+                    <!--                  {{ localStorage.getItem('username') }}-->
+                    {{ formApprove.routename }}
+                  </el-form-item>
+                  <el-form-item label="鎵撳嵃鏃堕棿:" class="formContent">
+                    {{ formApprove.lm_date }}
+                  </el-form-item>
+                </div>
+              </el-form>
+            </div>
+            <div
+              id="qrCode0"
+              style="width: 22%;height:90px;
+                        margin-top: 20px;
+                        overflow-y: scroll;display: flex;
+                        justify-content: center;
+                        position: relative;"
             >
-              <div class="elForm">
-                <el-form-item label="宸ュ崟缂栧彿:" class="formContent">
-                  {{ formApprove.mesordercode }}
-                </el-form-item>
-                <el-form-item label="婧愬崟鍗曞彿:" class="formContent">
-                  {{ formApprove.m_po }}
-                </el-form-item>
-                <el-form-item label="浜у搧缂栫爜:" class="formContent">
-                  {{ formApprove.partcode }}
-                </el-form-item>
-                <el-form-item label="浜у搧鍚嶇О:" class="formContent">
-                  {{ formApprove.partname }}
-                </el-form-item>
-                <el-form-item label="浜у搧瑙勬牸:" class="formContent">
-                  {{ formApprove.partspec }}
-                </el-form-item>
-                <el-form-item label="宸ュ崟鏁伴噺:" class="formContent">
-                  {{ formApprove.plan_qty }}
-                </el-form-item>
-                <!--                <el-form-item label="宸ヨ壓璺嚎:" class="formContent">-->
-                <!--                  {{ formApprove.routename }}-->
-                <!--                </el-form-item>-->
-                <el-form-item label="鎵撳嵃浜哄憳:" class="formContent">
-                  <!--                  {{ localStorage.getItem('username') }}-->
-                  {{ formApprove.routename }}
-                </el-form-item>
-                <el-form-item label="鎵撳嵃鏃堕棿:" class="formContent">
-                  {{ formApprove.lm_date }}
-                </el-form-item>
-              </div>
-            </el-form>
+              <div id="qrCode00" ref="qrCodeDiv00" />
+            </div>
+            <div style="background-color: #fff;width: 20px;height:120px; position: absolute;right: 0" />
+            <div
+              style="z-index: 10;background-color:transparent;width: 120px;height:120px; position: absolute;right: 21px"
+            />
           </div>
-          <div
-            id="qrCode"
-            style="width: 22%;height:90px;
-            margin-top: 20px;
-            overflow-y: scroll;display: flex;
-            justify-content: center;
-            position: relative;"
+
+          <el-table
+            id="table"
+            :data="tableDataPrint[0]"
+            border
+            class="tableDataPrint"
+            :header-cell-style="{ background: '#c0c0c0',textAlign:'center',color:'#000',borderColor:'#000'}"
+            :cell-style="{textAlign: 'center',color:'#000',borderColor:'#000'}"
+            style="width: 100%;margin-top: 20px;text-align: center;border-color: #000"
           >
-            <div id="qrCode0" ref="qrCodeDiv0" />
-          </div>
-          <div style="background-color: #fff;width: 20px;height:120px; position: absolute;right: 0" />
-          <div
-            style="z-index: 10;background-color:transparent;width: 120px;height:120px; position: absolute;right: 21px"
-          />
+            <el-table-column
+              id="column0"
+              prop="seq"
+              label="宸ュ簭鍙�"
+              width="70"
+              align="center"
+            />
+            <el-table-column
+              id="column1"
+              prop="stepqrcode"
+              label="宸ュ簭浜岀淮鐮�"
+              width="100"
+              align="center"
+            >
+              <template slot-scope="{row}">
+
+                <div :id="'qrCode'+row.seq" :ref="'qrCodeDiv'+row.seq" :key="'qrCodeDiv'+row.seq" class="tableColumn" />
+              </template>
+            </el-table-column>
+            <el-table-column
+              id="column2"
+              prop="stepname"
+              label="宸ュ簭"
+              width="120"
+              align="center"
+            />
+            <el-table-column
+              id="column3"
+              prop="plan_qty"
+              label="鍔犲伐鏁伴噺"
+              width="100"
+              align="center"
+            />
+            <el-table-column
+              id="column4"
+              prop="good_qty"
+              width="100"
+              align="center"
+              label="鍚堟牸鏁伴噺"
+            />
+            <el-table-column
+              id="column5"
+              width="100"
+              prop="ng_qty"
+              align="center"
+              label="涓嶈壇鏁伴噺"
+            />
+            <el-table-column
+              id="column6"
+              prop="desc"
+              align="center"
+              width="120"
+              label="澶囨敞"
+            />
+          </el-table>
         </div>
 
-        <!--          <div style="width:100%;height: 30px;border-bottom: 1px solid #eee;margin-bottom: 20px" />-->
-        <el-table
-          id="table"
-          :data="tableDataPrint"
-          border
-          class="tableDataPrint"
-          :header-cell-style="{ background: '#c0c0c0',textAlign:'center',color:'#000',borderColor:'#000'}"
-          :cell-style="{textAlign: 'center',color:'#000',borderColor:'#000'}"
-          style="width: 100%;margin-top: 20px;text-align: center;border-color: #000"
-        >
-          <el-table-column
-            id="column0"
-            prop="seq"
-            label="宸ュ簭鍙�"
-            width="70"
-            align="center"
-          />
-          <el-table-column
-            id="column1"
-            prop="stepqrcode"
-            label="宸ュ簭浜岀淮鐮�"
-            width="100"
-            align="center"
+        <div v-if="tableDataPrint[1]" style="margin-top: 100px;">
+          <div style="font-size: 26px; text-align: center">娴佺▼鍗�</div>
+
+          <div style="display: flex;justify-content: space-around;margin-top: 20px; position: relative;">
+            <div style="width: 78%">
+              <el-form
+                ref="formApprove"
+                :model="formApprove"
+                label-width="80px"
+                inline
+                style="display: flex;justify-content: space-between"
+              >
+                <div class="elForm">
+                  <el-form-item label="閿�鍞崟鍙�:" class="formContent">
+                    {{ formApprove.saleOrderCode ?formApprove.saleOrderCode :'/' }}
+                  </el-form-item>
+                  <el-form-item label="宸ュ崟缂栧彿:" class="formContent">
+                    {{ formApprove.mesordercode }}
+                  </el-form-item>
+                  <el-form-item label="婧愬崟鍗曞彿:" class="formContent">
+                    {{ formApprove.m_po }}
+                  </el-form-item>
+                  <el-form-item label="浜у搧缂栫爜:" class="formContent">
+                    {{ formApprove.partcode }}
+                  </el-form-item>
+                  <el-form-item label="浜у搧鍚嶇О:" class="formContent">
+                    {{ formApprove.partname }}
+                  </el-form-item>
+                  <el-form-item label="浜у搧瑙勬牸:" class="formContent">
+                    {{ formApprove.partspec }}
+                  </el-form-item>
+                  <el-form-item label="宸ュ崟鏁伴噺:" class="formContent">
+                    {{ formApprove.plan_qty }}
+                  </el-form-item>
+                  <!--                <el-form-item label="宸ヨ壓璺嚎:" class="formContent">-->
+                  <!--                  {{ formApprove.routename }}-->
+                  <!--                </el-form-item>-->
+                  <el-form-item label="鎵撳嵃浜哄憳:" class="formContent">
+                    <!--                  {{ localStorage.getItem('username') }}-->
+                    {{ formApprove.routename }}
+                  </el-form-item>
+                  <el-form-item label="鎵撳嵃鏃堕棿:" class="formContent">
+                    {{ formApprove.lm_date }}
+                  </el-form-item>
+                </div>
+              </el-form>
+            </div>
+            <div
+              id="qrCode1"
+              style="width: 22%;height:90px;
+                        margin-top: 20px;
+                        overflow-y: scroll;display: flex;
+                        justify-content: center;
+                        position: relative;"
+            >
+              <div id="qrCode01" ref="qrCodeDiv01" />
+            </div>
+            <div style="background-color: #fff;width: 20px;height:120px; position: absolute;right: 0" />
+            <div
+              style="z-index: 10;background-color:transparent;width: 120px;height:120px; position: absolute;right: 21px"
+            />
+          </div>
+
+          <el-table
+            id="table"
+            :data="tableDataPrint[1]"
+            border
+            class="tableDataPrint"
+            :header-cell-style="{ background: '#c0c0c0',textAlign:'center',color:'#000',borderColor:'#000'}"
+            :cell-style="{textAlign: 'center',color:'#000',borderColor:'#000'}"
+            style="width: 100%;margin-top: 20px;text-align: center;border-color: #000"
           >
-            <template slot-scope="{row}">
-              <div :id="'qrCode'+row.seq" :ref="'qrCodeDiv'+row.seq" class="tableColumn" />
-            </template>
-          </el-table-column>
-          <el-table-column
-            id="column2"
-            prop="stepname"
-            label="宸ュ簭"
-            width="120"
-            align="center"
-          />
-          <el-table-column
-            id="column3"
-            prop="plan_qty"
-            label="鍔犲伐鏁伴噺"
-            width="100"
-            align="center"
-          />
-          <el-table-column
-            id="column4"
-            prop="good_qty"
-            width="100"
-            align="center"
-            label="鍚堟牸鏁伴噺"
-          />
-          <el-table-column
-            id="column5"
-            width="100"
-            prop="ng_qty"
-            align="center"
-            label="涓嶈壇鏁伴噺"
-          />
-          <el-table-column
-            id="column6"
-            prop="desc"
-            align="center"
-            width="120"
-            label="澶囨敞"
-          />
-        </el-table>
+            <el-table-column
+              id="column0"
+              prop="seq"
+              label="宸ュ簭鍙�"
+              width="70"
+              align="center"
+            />
+            <el-table-column
+              id="column1"
+              prop="stepqrcode"
+              label="宸ュ簭浜岀淮鐮�"
+              width="100"
+              align="center"
+            >
+              <template slot-scope="{row}">
+
+                <div :id="'qrCode'+row.seq" :ref="'qrCodeDiv'+row.seq" :key="'qrCodeDiv'+row.seq" class="tableColumn" />
+              </template>
+            </el-table-column>
+            <el-table-column
+              id="column2"
+              prop="stepname"
+              label="宸ュ簭"
+              width="120"
+              align="center"
+            />
+            <el-table-column
+              id="column3"
+              prop="plan_qty"
+              label="鍔犲伐鏁伴噺"
+              width="100"
+              align="center"
+            />
+            <el-table-column
+              id="column4"
+              prop="good_qty"
+              width="100"
+              align="center"
+              label="鍚堟牸鏁伴噺"
+            />
+            <el-table-column
+              id="column5"
+              width="100"
+              prop="ng_qty"
+              align="center"
+              label="涓嶈壇鏁伴噺"
+            />
+            <el-table-column
+              id="column6"
+              prop="desc"
+              align="center"
+              width="120"
+              label="澶囨敞"
+            />
+          </el-table>
+        </div>
+
       </div>
       <span slot="footer" class="dialog-footer">
         <div class="footerButton">
@@ -3047,19 +3186,22 @@
       this.dialogVisibleSearch = false
     },
     // 澶勭悊鎵撳嵃
-    handlePrint(wo_code) {
+    handlePrint(wo_code, saleOrderCode) {
       // const number = Math.random() * Math.random()
       // this.number = number === 0 ? (10 + Math.random()) : number
       // console.log(number)
-
+      this.formApprove.saleOrderCode = this.formApprove.saleOrderCode !== '' ? this.formApprove.saleOrderCode : saleOrderCode
       const data2 = {
         mesordercode: wo_code || this.dialogForm.mesordercode
       }
       MesOrderPrintSearch(data2).then(res2 => {
         if (res2.code === '200') {
-          const res3 = res2.data.recordset
+          this.dialogVisibleApprove = true
 
-          this.tableDataPrint = res3
+          const res3 = res2.data.recordset
+          // this.tableDataPrint = res3
+          this.tableDataPrint = this.chunkArray(res3, 8)
+
           this.formApprove.mesordercode = res3[0].wo_code
           this.formApprove.m_po = res3[0].m_po || '/'
           this.formApprove.partcode = res3[0].partcode
@@ -3070,17 +3212,20 @@
           this.formApprove.lm_date = res3[0].lm_date
 
           this.$nextTick(() => {
-            res3.forEach(i => {
-              this.bindQRCode(i.seq, i.stepqrcode, 'small')
+            this.tableDataPrint.forEach((item, index) => {
+              item.forEach(i => {
+                this.bindQRCode(i.seq, i.stepqrcode, 'small')
+              })
+              this.bindQRCode(index, this.formApprove.mesordercode, 'big')
+              const div = document.getElementById('qrCode' + index)
+              div.scrollTop = div.scrollHeight // 婊氬姩鏉′綅浜庢渶搴曢儴
             })
-            this.bindQRCode('0', this.formApprove.mesordercode, 'big')
 
-            const div = document.getElementById('qrCode')
-            // 杩欎箞澶氫唬鐮佸彧闇�瑕佽繖涓�鍙ュ疄鐜版垜浠墍闇�瑕佺殑鍔熻兘锛屽畾浣峝iv婊氬姩鏉′綅缃湪搴曢儴锛宻crollHeight璁$畻鍑篸iv鐨勯珮搴︼紝鍐峴crollTop 璁剧疆婊氬姩鏉$殑楂樺害涓哄灏�
-            div.scrollTop = div.scrollHeight // 婊氬姩鏉′綅浜庢渶搴曢儴
-            // div.scrollTop = 0 // 婊氬姩鏉′綅浜庢渶椤堕儴
+          // const div = document.getElementById('qrCode')
+          // 杩欎箞澶氫唬鐮佸彧闇�瑕佽繖涓�鍙ュ疄鐜版垜浠墍闇�瑕佺殑鍔熻兘锛屽畾浣峝iv婊氬姩鏉′綅缃湪搴曢儴锛宻crollHeight璁$畻鍑篸iv鐨勯珮搴︼紝鍐峴crollTop 璁剧疆婊氬姩鏉$殑楂樺害涓哄灏�
+          // div.scrollTop = div.scrollHeight // 婊氬姩鏉′綅浜庢渶搴曢儴
+          // div.scrollTop = 0 // 婊氬姩鏉′綅浜庢渶椤堕儴
           })
-          this.dialogVisibleApprove = true
         }
       })
     },
@@ -3093,6 +3238,15 @@
     // 杩斿洖鎸夐挳
     dialogVisibleBackPreview() {
       this.dialogVisibleApprove = false
+    },
+    chunkArray(array, size) {
+      const chunked = []
+      let i = 0
+      while (i < array.length) {
+        chunked.push(array.slice(i, i + size))
+        i += size
+      }
+      return chunked
     },
     // dialogVisibleConfirmPreview(param) {
     //   this.$refs.dialogForm.validate(valid => {
@@ -3113,8 +3267,7 @@
     // 鐢熸垚浜岀淮鐮�    宸ュ崟鎶ヨ〃浜岀淮鐮�
     bindQRCode(seq, text, size) {
       if (size === 'big') {
-        console.log(text, 1)
-        new QRCode(this.$refs.qrCodeDiv0, {
+        new QRCode(this.$refs['qrCodeDiv0' + seq], {
           text: text,
           width: size === 'big' ? 90 : 60,
           height: size === 'big' ? 90 : 60,
@@ -3137,6 +3290,7 @@
     },
 
     dialogVisibleConfirmClose() {
+      this.formApprove.saleOrderCode = ''
       // this.dialogForm.mesordercode = ''
       this.formApprove.mesordercode = ''
       this.formApprove.m_po = ''
@@ -3438,6 +3592,7 @@
     },
     //  琛岀偣鍑讳簨浠�
     async rowClick(row, event, column) {
+      this.formApprove.saleOrderCode = row.saleOrderCode
       this.routeCode = row.route_code ? row.route_code : ''
       this.partCode = row.partcode ? row.partcode : ''
       const data = {
@@ -3504,6 +3659,34 @@
     },
     stepSelectedValueChange(val) {
       // console.log(val, 123)
+    },
+    getSummaries(param) {
+      const { columns, data } = param
+      const sums = []
+      const i = 9
+      columns.forEach((column, index) => {
+        if (index === i) {
+          sums[index] = '鎬绘暟'
+          return
+        }
+        const values = data.map(item => Number(item[column.property]))
+        if (column.property === 'plan_qty') {
+          sums[index] = values.reduce((prev, curr) => {
+            const value = Number(curr)
+            if (!isNaN(value)) {
+              return prev + curr
+              // return Math.round(prev * 100) / 100 + Math.round(curr * 100) / 100
+            }
+          }, 0)
+
+          sums[index] += ' 鍗�'
+        }
+      })
+
+      this.$nextTick(() => {
+        this.$refs.tableDataRef.doLayout()
+      })
+      return sums
     }
   }
 }

--
Gitblit v1.9.3