增加提交loading逻辑. 编辑表单增加sku表单项. statement id容错处理.

src/pages/payment-record/components/edit.vue

@@ -25,6 +25,12 @@
                 placeholder="eg: POXXXX"
               />
             </el-form-item>
+            <el-form-item
+              label="SKU"
+              prop="sku"
+            >
+              <el-input v-model="form.sku" />
+            </el-form-item>
 
             <el-form-item
               label="Unit Price"
@@ -101,17 +107,23 @@
 
             <el-form-item
               label="Statement Name"
-              prop="statement_name"
+              prop="statement"
             >
               <el-select
-                v-model="form.statement_name"
+                v-model="form.statement"
                 style="width: 100%"
+                @change="
+                  (v) => {
+                    form.statement_id = v.value
+                    form.statement_name = v.label
+                  }
+                "
               >
                 <el-option
                   v-for="option in statementList as IOptionItem[]"
                   :key="option.value"
                   :label="option.label"
-                  :value="option.value"
+                  :value="option"
                 ></el-option>
               </el-select>
             </el-form-item>
@@ -180,7 +192,9 @@ import {
   ElButton,
 } from 'element-plus'
 import type { FormInstance, FormRules } from 'element-plus'
-import { IPoItem, IOptionItem } from '../inteface'
+import { 
+  // IPoItem,
+   IOptionItem } from '../inteface'
 
 const props = defineProps({
   visible: {
@@ -233,19 +247,19 @@ const paymentOption = [
 const dialogVisible = ref(false)
 
 const mainForm = ref<FormInstance>()
-const form = ref({} as IPoItem)
+const form:any = ref({})
 const formRule = ref<FormRules>({
   po_number: {
     required: true,
     message: '必填项',
     trigger: 'blur',
   },
-  // po_id: {
+  // sku: {
   //   required: true,
   //   message: '必填项',
   //   trigger: 'blur',
   // },
-  statement_name: {
+  statement: {
     required: true,
     message: '必填项',
     trigger: 'blur',
@@ -293,7 +307,9 @@ watchEffect(() => {
       setup_service_fee: '',
       total: '',
       currency: 'CNY',
+      statement: {}, // 混入了特殊字段, 下拉选项需要同时变更两个字段, 不这样做不出效果
       statement_name: '',
+      statement_id: '',
       description: '',
       payment_type: '货款',
     },

src/pages/payment-record/index.vue

@@ -3,15 +3,19 @@
     <div
       v-if="loading"
       v-loading="true"
-      style="width: 100%; height: 100vh"
+      style="
+        width: 100vw;
+        height: 100vh;
+        z-index: 999;
+        position: fixed;
+        top: 0;
+        left: 0;
+      "
       class=""
       element-loading-text="Loading..."
       element-loading-background="rgba(0, 0, 0, 0.3)"
     ></div>
-    <div
-      v-else
-      class="main-content"
-    >
+    <div class="main-content">
       <div class="flex between">
         <div class="flex btn-wrap">
           <el-button
@@ -308,15 +312,17 @@ const computedTableData = computed(() => {
       )
 })
 const computedStatementList = computed(() => {
-  const result: string[] = []
+  const result: any[] = []
+  const result2: any[] = []
   tableData.value.forEach((i) => {
     if (i.statement_name?.length && !result.includes(i.statement_name)) {
       result.push(i.statement_name)
+      result2.push(i.statement_id)
     }
   })
-  return result.map((i) => {
+  return result.map((i, index) => {
     return {
-      value: i,
+      value: result2[index],
       label: i,
     }
   })
@@ -405,9 +411,14 @@ const save = function () {
       ),
     )
   }
-  Promise.all(pool).then(() => {
-    tableData.value = []
-  })
+  loading.value = true
+  Promise.all(pool)
+    .then(() => {
+      tableData.value = []
+    })
+    .finally(() => {
+      loading.value = true
+    })
 }
 
 const send = (