Selaa lähdekoodia

Merge remote-tracking branch 'origin/dev' into dev

Hwf 1 kuukausi sitten
vanhempi
commit
9072535b12

+ 2 - 4
src/types/components.d.ts

@@ -27,6 +27,7 @@ declare module 'vue' {
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
@@ -46,7 +47,6 @@ declare module 'vue' {
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
-    ElLink: typeof import('element-plus/es')['ElLink']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
@@ -56,6 +56,7 @@ declare module 'vue' {
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSegmented: typeof import('element-plus/es')['ElSegmented']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
     ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
@@ -83,9 +84,6 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
-    IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
-    IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
-    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']

+ 171 - 137
src/views/comprehensiveGuarantee/MaterialReserveManagement/TransferRecord.vue

@@ -4,7 +4,7 @@
       <div style="display: flex; align-items: center; justify-content: space-between">
         <h1>调拨记录</h1>
         <div>
-          <el-button type="primary">导出</el-button>
+          <el-button type="primary" @click="exportTableData">导出</el-button>
           <el-button type="primary" :disabled="multiple" v-print="printTransferOrder" @click="batchPrint">批量打印</el-button>
         </div>
       </div>
@@ -34,107 +34,110 @@
       </el-table>
     </div>
     <div id="transferOrder" style="display: none; width: 850px">
-      <h1 style="display: flex; justify-content: center">行政事业单位资产调拨单</h1>
-      <div style="display: flex; margin-top: -10px; margin-left: 20px;  font-size:13px">
-        <div style="display:flex; flex-direction: column">
-          <div style="margin-bottom: 2px">调拨单位:茂名市应急管理局</div>
-          <div>调出单位性质:行政单位</div>
+      <div v-for="(record, index) in selectedRecords" :key="index" class="print-page">
+        <h1 style="display: flex; justify-content: center">行政事业单位资产调拨单</h1>
+        <div style="display: flex; margin-top: -10px; margin-left: 20px;  font-size:13px">
+          <div style="display:flex; flex-direction: column">
+            <div style="margin-bottom: 2px">调拨单位:茂名市应急管理局</div>
+            <div>调出单位性质:行政单位</div>
+          </div>
+          <div style="display:flex; flex-direction: column; margin-left: 200px; margin-bottom: 2px">
+            <div style="margin-bottom: 2px">调入单位:茂南区人民政府站前街道办事处</div>
+            <div>调入单位行政:行政单位</div>
+          </div>
         </div>
-        <div style="display:flex; flex-direction: column; margin-left: 200px; margin-bottom: 2px">
-          <div style="margin-bottom: 2px">调入单位:茂南区人民政府站前街道办事处</div>
-          <div>调入单位行政:行政单位</div>
-        </div>
-      </div>
-      <div class="asset-table-container" style="margin-top: -1px">
-        <table class="asset-table">
-          <thead>
-          <tr>
-            <th style="width: 150px">资产名称</th>
-            <th style="width: 100px">购置时间</th>
-            <th style="width: 80px">数量</th>
-            <th>单价</th>
-            <th style="width: 150px">账面价值</th>
-            <th style="width: 150px">调拨原因</th>
-            <th style="width: 120px">备注</th>
-          </tr>
-          </thead>
-          <tbody>
-          <tr v-for="(asset, index) in selectedData" :key="index">
-            <td>{{ asset.material_name }}</td>
-            <td>{{ asset.application_time }}</td>
-            <td>{{ asset.num }}</td>
-            <td>{{ asset.price }}</td>
-            <td>{{ asset.material_name }}</td>
-            <td>{{ asset.material_name }}</td>
-            <td>{{ asset.material_name }}</td>
-          </tr>
-          </tbody>
-          <tbody>
-          <tr v-for="i in 2" :key="i">
-            <td>&nbsp;</td>
-            <td>&nbsp;</td>
-            <td>&nbsp;</td>
-            <td>&nbsp;</td>
-            <td>&nbsp;</td>
-            <td>&nbsp;</td>
-            <td>&nbsp;</td>
-          </tr>
-          <tr>
-            <td>合计</td>
-            <td>&nbsp;</td>
-            <td>{{ numSum }}</td>
-            <td>{{ priceSum }}</td>
-            <td>&nbsp;</td>
-            <td>&nbsp;</td>
-            <td>&nbsp;</td>
-          </tr>
-          <tr>
-            <td colspan="7" style="text-align: left; padding: 8px;">
-              调拨处理办法:1、无偿调拨&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp2、有偿调拨
-            </td>
-          </tr>
-          <tr style="height: 120px; vertical-align: top; position: relative;">
-            <td colspan="2" style="text-align: left; position: relative;">
-              调出单位意见:
-              <div style="position: absolute; right: 8px; bottom: 8px; font-size: 12px;">
-                年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日
-              </div>
-            </td>
-            <td colspan="3" style="text-align: left; position: relative;">
-              调入单位意见:
-              <div style="position: absolute; right: 8px; bottom: 8px; font-size: 12px;">
-                年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日
-              </div>
-            </td>
-            <td colspan="2" rowspan="2" style="text-align: left; position: relative; vertical-align: top;">
-              财政部门意见:
-              <div style="position: absolute; right: 8px; bottom: 8px; font-size: 12px;">
-                年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日
-              </div>
-            </td>
-          </tr>
-          <tr style="height: 120px; vertical-align: top; position: relative;">
-            <td colspan="2" style="text-align: left; position: relative;">
-              调出单位主管部门意见:
-              <div style="position: absolute; right: 8px; bottom: 8px; font-size: 12px;">
-                年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日
-              </div>
-            </td>
-            <td colspan="3" style="text-align: left; position: relative;">
-              调入单位主管部门意见:
-              <div style="position: absolute; right: 8px; bottom: 8px; font-size: 12px;">
-                年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日
-              </div>
-            </td>
-          </tr>
-          </tbody>
-        </table>
-        <div style="display: flex; justify-content: space-between; font-size: 13px">
-          <div>本表一式五份</div>
-          <div>填报人:</div>
-          <div>联系电话:15200000000</div>
+        <div class="asset-table-container" style="margin-top: -1px">
+          <table class="asset-table">
+            <thead>
+            <tr>
+              <th style="width: 150px">资产名称</th>
+              <th style="width: 100px">购置时间</th>
+              <th style="width: 80px">数量</th>
+              <th>单价</th>
+              <th style="width: 150px">账面价值</th>
+              <th style="width: 150px">调拨原因</th>
+              <th style="width: 120px">备注</th>
+            </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(asset, assetIndex) in record.material" :key="assetIndex">
+                <td>{{ asset.name }}</td>
+                <td>{{ asset.purchaseTime }}</td>
+               <td>{{ asset.num }}</td>
+               <td>{{ asset.price }}</td>
+               <td>{{ calculateBookValue(asset.num, asset.price) }}</td>
+               <td>{{ record.reason_transfer }}</td>
+               <td>{{ record.notes }}</td>
+              </tr>
+            </tbody>
+            <tbody>
+            <tr v-for="i in 2" :key="i">
+              <td>&nbsp;</td>
+              <td>&nbsp;</td>
+              <td>&nbsp;</td>
+              <td>&nbsp;</td>
+              <td>&nbsp;</td>
+              <td>&nbsp;</td>
+              <td>&nbsp;</td>
+            </tr>
+            <tr>
+              <td>合计</td>
+              <td>&nbsp;</td>
+              <td>{{ calculateSum(record.material, 'num') }}</td>
+              <td>&nbsp;</td>
+              <td>{{ calculateSum2(record.material, 'bookValue') }}</td>
+              <td>&nbsp;</td>
+              <td>&nbsp;</td>
+            </tr>
+            <tr>
+              <td colspan="7" style="text-align: left; padding: 8px;">
+                调拨处理办法:1、无偿调拨&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp2、有偿调拨
+              </td>
+            </tr>
+            <tr style="height: 120px; vertical-align: top; position: relative;">
+              <td colspan="2" style="text-align: left; position: relative;">
+                调出单位意见:
+                <div style="position: absolute; right: 8px; bottom: 8px; font-size: 12px;">
+                  年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日
+                </div>
+              </td>
+              <td colspan="3" style="text-align: left; position: relative;">
+                调入单位意见:
+                <div style="position: absolute; right: 8px; bottom: 8px; font-size: 12px;">
+                  年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日
+                </div>
+              </td>
+              <td colspan="2" rowspan="2" style="text-align: left; position: relative; vertical-align: top;">
+                财政部门意见:
+                <div style="position: absolute; right: 8px; bottom: 8px; font-size: 12px;">
+                  年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日
+                </div>
+              </td>
+            </tr>
+            <tr style="height: 120px; vertical-align: top; position: relative;">
+              <td colspan="2" style="text-align: left; position: relative;">
+                调出单位主管部门意见:
+                <div style="position: absolute; right: 8px; bottom: 8px; font-size: 12px;">
+                  年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日
+                </div>
+              </td>
+              <td colspan="3" style="text-align: left; position: relative;">
+                调入单位主管部门意见:
+                <div style="position: absolute; right: 8px; bottom: 8px; font-size: 12px;">
+                  年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日
+                </div>
+              </td>
+            </tr>
+            </tbody>
+          </table>
+          <div style="display: flex; justify-content: space-between; font-size: 13px">
+            <div>本表一式五份</div>
+            <div>填报人:</div>
+            <div>联系电话:15200000000</div>
+          </div>
         </div>
       </div>
+
     </div>
     <TransferRecordDetail v-if="viewRecord" :id="material_id" @close="handleCancel" />
     <TransferRecordEdit v-if="editRecord" :id="material_id" @close="handleCancel" />
@@ -147,11 +150,30 @@ import { ElTable, ElTableColumn, ElText } from 'element-plus';
 import TransferRecordDetail from '@/views/comprehensiveGuarantee/MaterialReserveManagement/TransferRecordDetail.vue';
 import TransferRecordEdit from '@/views/comprehensiveGuarantee/MaterialReserveManagement/TransferRecordEdit.vue';
 import { ref } from 'vue';
+import { fillingTable } from '@/api/dataFilling/fillingManage';
+import { download2 } from '@/utils/request';
 
 const tableData = ref([
   {
     id: '1',
-    material_name: '皮划艇',
+    material: [
+      {
+        name: '皮划艇',
+        type: '2039TP',
+        unit: '只',
+        num: '5',
+        price: '5000',
+        purchaseTime: '2025-03-31'
+      },
+      {
+        name: '电脑',
+        type: '2039TP',
+        unit: '台',
+        num: '3',
+        price: '8000',
+      purchaseTime: '2025-03-31'
+      }
+    ],
     application_time: '2023-01-01',
     applicant: '应急局',
     processing_person: '张三',
@@ -166,13 +188,20 @@ const tableData = ref([
     contacts: '张三',
     contacts_phone: '13309897689',
     notes: '无',
-    num: '5',
-    price: '5000',
     reason: 'no',
   },
   {
     id: '2',
-    material_name: '电脑',
+    material: [
+      {
+        name: '皮划艇',
+        type: '2039TP',
+        unit: '只',
+        num: '5',
+        price: '5000',
+        purchaseTime: '2025-03-31'
+      }
+    ],
     application_time: '2023-01-01',
     applicant: '应急局',
     processing_person: '张三',
@@ -187,55 +216,52 @@ const tableData = ref([
     contacts: '张三',
     contacts_phone: '13309897689',
     notes: '无',
-    num: '9',
-    price: '2000',
     reason: 'no',
   }
 ]);
-const selectedData = ref([]);
 const viewRecord = ref(false);
 const editRecord = ref(false);
 const material_id = ref();
-const numSum = ref();
-const priceSum = ref();
 const multiple = ref(true);
 const multipleTable = ref();
+const selectedRecords = ref([]); // 存储被选中的完整记录
+const ids = ref<Array<number | string>>([]);
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+const filename = '行政事业单位资产调拨单';
 
 const printOrder = (row) => {
   multipleTable.value.clearSelection();
-  if (selectedData.value.length === 0) {
-    selectedData.value.push(row);
-  } else {
-    selectedData.value = [];
-    selectedData.value.push(row);
-  }
-  totalQuantity();
-  totalPrice();
+  selectedRecords.value = [row]; // 单条记录打印
 }
 const batchPrint = () => {
-  totalQuantity();
-  totalPrice();
+  const selection = multipleTable.value.getSelectionRows();
+  selectedRecords.value = selection; // 存储所有被选中的记录
 }
+// 计算单条记录中物资的合计
+const calculateSum = (materials, field) => {
+  return materials.reduce((sum, item) => {
+    return sum + (field === 'num' ? parseInt(item[field]) : parseFloat(item[field]));
+  }, 0);
+}
+// 计算合计行
+const calculateSum2 = (materials, field) => {
+  return materials.reduce((sum, item) => {
+    if (field === 'bookValue') {
+      return sum + (parseInt(item.num) * parseFloat(item.price));
+    }
+    return sum + (field === 'num' ? parseInt(item[field]) : parseFloat(item[field]));
+  }, 0).toFixed(2);
+};
+// 计算单行账面价值(数量×单价)
+const calculateBookValue = (num, price) => {
+  return (parseInt(num) * parseFloat(price)).toFixed(2);
+};
+
 let printTransferOrder = reactive({
   id: 'transferOrder', // 这里是要打印元素的ID
   popTitle: '',
   extraCss: '/print.css'
 });
-const totalQuantity = () => {
-  let total = 0;
-  selectedData.value.forEach((item) => {
-    total += parseInt(item.num);
-  })
-  numSum.value = total;
-}
-const totalPrice = () => {
-  let total = 0;
-  selectedData.value.forEach((item) => {
-    total += parseFloat(item.price);
-  })
-  priceSum.value = total;
-}
-
 const handleView = (row) => {
   viewRecord.value = true;
   material_id.value = row.id;
@@ -249,10 +275,11 @@ const handleCancel = () => {
 }
 const handleSelectionChange = (selection) => {
   multiple.value = selection.length === 0;
-  selectedData.value = [];
-  selection.forEach((item) => {
-    selectedData.value.push(item);
-  })
+  selectedRecords.value = selection;
+};
+const exportTableData = () => {
+  fillingTable(ids.value[0]);
+  download2(baseUrl + '/api/dataFilling/export_to_excel?report_id='+ids.value[0], filename + '.xlsx');
 };
 </script>
 
@@ -288,9 +315,16 @@ const handleSelectionChange = (selection) => {
   color: #333;
   padding: 8px;
 }
+
 @media print {
   #transferOrder {
     display: block !important;
   }
+  .print-page {
+    page-break-after: always; /* 每个表格后强制分页 */
+  }
+  .print-page:last-child {
+    page-break-after: auto; /* 最后一个表格后不分页 */
+  }
 }
 </style>

+ 53 - 9
src/views/comprehensiveGuarantee/MaterialReserveManagement/TransferRecordDetail.vue

@@ -46,15 +46,31 @@
           <div style="display:flex; flex-direction: column; margin-top: 10px">
             <div style="display: flex; justify-content: space-between">
               <div>物资列表</div>
-              <div>合计: 元</div>
+              <div>合计:{{ totalAmount }} 元</div>
             </div>
-            <el-table ref="multipleTable" v-loading="loading" :data="tableData" border class="image-table" :max-height="maxHeight">
-              <el-table-column label="物资名称" align="center" prop="material_name" />
-              <el-table-column label="规格/型号" align="center" prop="model" />
+            <el-table ref="multipleTable" v-loading="loading" :data="form.material" border class="image-table" :max-height="maxHeight">
+              <el-table-column label="物资名称" align="center" prop="name" />
+              <el-table-column label="规格/型号" align="center" prop="type" />
               <el-table-column label="单位" align="center" prop="unit" />
-              <el-table-column label="数量" align="center" prop="quantity" />
-              <el-table-column label="金额" align="center" prop="amount_money" />
-              <el-table-column label="合计" align="center" prop="amount" />
+              <el-table-column label="数量" align="center" width="150">
+                <template #default="{row, $index}">
+                  <div style="display: flex; align-items: center; justify-content: center">
+                    <el-input-number
+                      v-model="row.num"
+                      :min="1"
+                      size="small"
+                      style="width: 80px; margin: 0 5px"
+                      @change="updateTotal"
+                    />
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column label="金额" align="center" prop="price" />
+              <el-table-column label="合计" align="center" width="130px">
+                <template #default="{row}">
+                  {{ calculateAmount(row.num, row.price) }}
+                </template>
+              </el-table-column>
             </el-table>
           </div>
 
@@ -75,12 +91,40 @@ const props = defineProps({
   id: String
 });
 const emits = defineEmits(['close']);
-const form = ref({});
+const form = ref({
+  material: [
+    {
+      name: '皮划艇',
+      type: '2039TP',
+      unit: '只',
+      num: '5',
+      price: '5000',
+      purchaseTime: '2025-03-31'
+    },
+    {
+      name: '电脑',
+      type: '2039TP',
+      unit: '台',
+      num: '3',
+      price: '8000',
+      purchaseTime: '2025-03-31'
+    }
+  ]
+});
 
 const closeDialog = () => {
   emits('close');
 };
-
+// 计算单行合计
+const calculateAmount = (num, price) => {
+  return (num * parseFloat(price)).toFixed(2);
+};
+// 计算总金额
+const totalAmount = computed(() => {
+  return form.value.material.reduce((sum, item) => {
+    return sum + (item.num * parseFloat(item.price));
+  }, 0).toFixed(2);
+});
 </script>
 
 

+ 53 - 9
src/views/comprehensiveGuarantee/MaterialReserveManagement/TransferRecordEdit.vue

@@ -46,15 +46,31 @@
           <div style="display:flex; flex-direction: column; margin-top: 10px">
             <div style="display: flex; justify-content: space-between">
               <div>物资列表</div>
-              <div>合计: 元</div>
+              <div>合计:{{ totalAmount }} 元</div>
             </div>
-            <el-table ref="multipleTable" v-loading="loading" :data="tableData" border class="image-table" :max-height="maxHeight">
-              <el-table-column label="物资名称" align="center" prop="material_name" />
-              <el-table-column label="规格/型号" align="center" prop="model" />
+            <el-table ref="multipleTable" v-loading="loading" :data="form.material" border class="image-table" :max-height="maxHeight">
+              <el-table-column label="物资名称" align="center" prop="name" />
+              <el-table-column label="规格/型号" align="center" prop="type" />
               <el-table-column label="单位" align="center" prop="unit" />
-              <el-table-column label="数量" align="center" prop="quantity" />
-              <el-table-column label="金额" align="center" prop="amount_money" />
-              <el-table-column label="合计" align="center" prop="amount" />
+              <el-table-column label="数量" align="center" width="150">
+                <template #default="{row, $index}">
+                  <div style="display: flex; align-items: center; justify-content: center">
+                    <el-input-number
+                      v-model="row.num"
+                      :min="1"
+                      size="small"
+                      style="width: 80px; margin: 0 5px"
+                      @change="updateTotal"
+                    />
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column label="金额" align="center" prop="price" />
+              <el-table-column label="合计" align="center" width="130px">
+                <template #default="{row}">
+                  {{ calculateAmount(row.num, row.price) }}
+                </template>
+              </el-table-column>
             </el-table>
           </div>
 
@@ -75,12 +91,40 @@ const props = defineProps({
   id: String
 });
 const emits = defineEmits(['close']);
-const form = ref({});
+const form = ref({
+  material: [
+    {
+      name: '皮划艇',
+      type: '2039TP',
+      unit: '只',
+      num: '5',
+      price: '5000',
+      purchaseTime: '2025-03-31'
+    },
+    {
+      name: '电脑',
+      type: '2039TP',
+      unit: '台',
+      num: '3',
+      price: '8000',
+      purchaseTime: '2025-03-31'
+    }
+  ]
+});
 
 const closeDialog = () => {
   emits('close');
 };
-
+// 计算单行合计
+const calculateAmount = (num, price) => {
+  return (num * parseFloat(price)).toFixed(2);
+};
+// 计算总金额
+const totalAmount = computed(() => {
+  return form.value.material.reduce((sum, item) => {
+    return sum + (item.num * parseFloat(item.price));
+  }, 0).toFixed(2);
+});
 </script>