上传

src/views/Clue/Order/Comp/DialogExtraPay.vue

@@ -8,7 +8,8 @@
         form.extraPay.push({
           extraPayType: undefined,
           extraPayMoney: 0,
-          dictType: 'extra_pay_type'
+          dictType: 'extra_pay_type',
+          editabled: true
         })
       "
     >
@@ -18,7 +19,13 @@
       <el-table-column type="index" width="50" />
       <el-table-column prop="extraPayType" label="费用类型" width="200px">
         <template #default="{ row }">
-          <el-select v-model="row.extraPayType" size="small" placeholder="其他费用类型" filterable>
+          <el-select
+            v-if="row.editabled"
+            v-model="row.extraPayType"
+            size="small"
+            placeholder="其他费用类型"
+            filterable
+          >
             <el-option
               v-for="item in extraPayOptions"
               :key="item.value"
@@ -30,12 +37,17 @@
       </el-table-column>
       <el-table-column prop="extraPayMoney" label="费用金额" width="180px">
         <template #default="{ row }">
-          <el-input-number v-model="row.extraPayMoney" size="small" :controls="false" />
+          <el-input-number
+            v-if="row.editabled"
+            v-model="row.extraPayMoney"
+            size="small"
+            :controls="false"
+          />
         </template>
       </el-table-column>
       <el-table-column prop="remark" label="备注">
         <template #default="{ row }">
-          <el-input v-model="row.remark" size="small" placeholder="备注信息" />
+          <el-input v-if="row.editabled" v-model="row.remark" size="small" placeholder="备注信息" />
         </template>
       </el-table-column>
       <el-table-column label="操作" width="60px">
@@ -43,7 +55,7 @@
           <Icon
             icon="ep:remove-filled"
             class="text-red-500"
-            :disabled="row.id"
+            v-if="row.editabled"
             @click="handleRemove('extraPay', $index)"
           />
         </template>
@@ -60,7 +72,7 @@
 </template>
 
 <script setup name="DialogExtraPay">
-import { signAddPay } from '@/api/clue/sign'
+import { signAddPay, getSignExtraPayList } from '@/api/clue/sign'
 import { getDictOptions } from '@/utils/dict'
 
 const extraPayOptions = getDictOptions('extra_pay_type')
@@ -70,6 +82,7 @@ const show = ref(false)
 function open(id) {
   show.value = true
   resetForm(id)
+  getFormList()
 }
 defineExpose({
   open
@@ -83,6 +96,15 @@ function resetForm(id) {
   }
 }
 
+function getFormList() {
+  getSignExtraPayList({ id: form.value.signId }).then((data) => {
+    form.value.extraPay = data.map((it) => ({
+      ...it,
+      editabled: false
+    }))
+  })
+}
+
 const formLoading = ref(false)
 async function onSubmit() {
   // 校验表单
@@ -99,11 +121,12 @@ async function onSubmit() {
   formLoading.value = true
   try {
     const params = {
-      signId: form.value.id,
-      extraPay: form.value.extraPay.filter((it) => !it.id)
+      signId: form.value.signId,
+      extraPay: form.value.extraPay.filter((it) => it.editabled)
     }
     await signAddPay(params)
     message.success('添加额外支出成功！')
+    getFormList()
   } finally {
     formLoading.value = false
   }