导出pdf 加总计

src/components/DialogTagApplyOrderExport.vue

@@ -36,25 +36,25 @@
             </tr>
           </thead>
           <tbody>
-            <tr v-for="(item,index) in data.details" :key="index">
+            <tr v-if="details.length > 0" v-for="(item,index) in details" :key="index">
               <td align="center"><div class="cell">{{ index + 1 }}</div></td>
-              <td align="center"><div class="cell">{{ data.providerName }}</div></td>
-              <td align="center"><div class="cell">{{ data.applicantName }}</div></td>
+              <td align="center"><div class="cell">{{ providerName }}</div></td>
+              <td align="center"><div class="cell">{{ applicantName }}</div></td>
               <td align="center"><div class="cell">{{ item.tagTypeName}}</div></td>
-              <td align="center"><div class="cell">{{ data.dataTime }}</div></td>
+              <td align="center"><div class="cell">{{ formatDataTime }}</div></td>
               <td align="center"><div class="cell">{{ item.number }}</div></td>
               <td align="center"><div class="cell">{{ item.unitPrice }}</div></td>
               <td align="center"><div class="cell">{{ item.amount }}</div></td>
             </tr>
             <tr>
+              <td align="center"><div class="cell">总计</div></td>
               <td><div class="cell"></div></td>
               <td><div class="cell"></div></td>
               <td><div class="cell"></div></td>
               <td><div class="cell"></div></td>
+              <td align="center"><div class="cell">{{number}}</div></td>
               <td><div class="cell"></div></td>
-              <td><div class="cell"></div></td>
-              <td><div class="cell"></div></td>
-              <td><div class="cell"></div></td>
+              <td align="center"><div class="cell">{{amount}}</div></td>
             </tr>
           </tbody>
         </table>
@@ -104,12 +104,24 @@ export default {
   },
   data: () => ({
     visible: false,
-    data: null
+    data: null,
+    details: [],
+    providerName: '',
+    applicantName: '',
+    formatDataTime: '',
+    amount: null,
+    number: 0
   }),
   methods: {
     open (data) {
       this.data = data
       this.visible = true
+      this.details = this.data && this.data.details ? this.data.details : []
+      this.providerName = data.providerName
+      this.applicantName = data.applicantName
+      this.formatDataTime = (!this.data || !this.data.dataTime) ? '' : new Date(data.dataTime).format('YYYY-MM-DD')
+      this.amount = data.amount
+      this.number = (!this.data || !this.data.details) ? 0 : this.data.details.reduce((sum, item) => sum + item.number, 0)
     },
     async onExportPdfBtnClick () {
       const { data } = this

src/components/DialogTagPurchaseOrderExport.vue

@@ -24,29 +24,29 @@
           <thead>
             <tr>
               <th><div class="cell">序号</div></th>
+              <th><div class="cell">采购日期</div></th>
+              <th><div class="cell">采购人员</div></th>
               <th><div class="cell">标签类型</div></th>
               <th><div class="cell">需采购数量（个）</div></th>
               <th><div class="cell">总价（元）</div></th>
-              <th><div class="cell">采购人员</div></th>
-              <th><div class="cell">采购日期</div></th>
             </tr>
           </thead>
           <tbody>
-            <tr v-for="(item, index) in data.details" :key="index">
+            <tr v-if="details.length > 0" v-for="(item, index) in details" :key="index">
               <td align="center"><div class="cell">{{ index + 1 }}</div></td>
+              <td align="center"><div class="cell">{{ formatDataTime}}</div></td>
+              <td align="center"><div class="cell">{{ buyerName}}</div></td>
               <td align="center"><div class="cell">{{ item.tagTypeName}}</div></td>
-              <td align="center"><div class="cell">{{ item. number}}</div></td>
-              <td align="center"><div class="cell">{{ item. amount}}</div></td>
-              <td align="center"><div class="cell">{{ data. buyerName}}</div></td>
-              <td align="center"><div class="cell">{{ data. dataTime}}</div></td>
+              <td align="center"><div class="cell">{{ item.number}}</div></td>
+              <td align="center"><div class="cell">{{ item.amount}}</div></td>
             </tr>
             <tr>
+              <td align="center"><div class="cell">总计</div></td>
               <td><div class="cell"></div></td>
               <td><div class="cell"></div></td>
               <td><div class="cell"></div></td>
-              <td><div class="cell"></div></td>
-              <td><div class="cell"></div></td>
-              <td><div class="cell"></div></td>
+              <td align="center"><div class="cell">{{number}}</div></td>
+              <td align="center"><div class="cell">{{amount}}</div></td>
             </tr>
           </tbody>
         </table>
@@ -111,12 +111,22 @@ export default {
   },
   data: () => ({
     visible: false,
-    data: null
+    data: null,
+    formatDataTime: '',
+    buyerName: '',
+    details: [],
+    amount: null,
+    number: 0
   }),
   methods: {
     open (data) {
       this.data = data
       this.visible = true
+      this.details = this.data && this.data.details ? this.data.details : []
+      this.buyerName = data.buyerName
+      this.formatDataTime = (!this.data || !this.data.dataTime) ? '' : new Date(data.dataTime).format('YYYY-MM-DD')
+      this.amount = data.amount
+      this.number = (!this.data || !this.data.details) ? 0 : this.data.details.reduce((sum, item) => sum + item.number, 0)
     },
     async onExportPdfBtnClick () {
       const { data } = this