中间计量

src/views/debit-pay/admin/components/certificate/addModal.vue

@@ -1,5 +1,5 @@
 <template>
-    <hc-new-dialog widths="30rem" :show="isShow" title="新增中期支付证书" @save="addModalSave" @close="addModalClose">
+    <hc-new-dialog widths="30rem" :show="isShow" title="新增中期支付证书" is-footer-center @close="addModalClose">
         <el-form ref="formRef" class="p-2" label-position="top" :model="formModel" :rules="formRules" size="large">
             <el-form-item label="计量期：" prop="contractPeriodId">
                 <el-select v-model="formModel.contractPeriodId" block @change="changePeriod">
@@ -13,7 +13,7 @@
                 <div v-if="meterPeriodData.length > 0" class="form-item-div">
                     <el-checkbox-group v-model="materialPeriodIds">
                         <template v-for="item in meterPeriodData" :key="item.id">
-                            <el-checkbox v-if="item.periodNumber" :label="item.periodNumber">{{ item.periodName }}</el-checkbox>
+                            <el-checkbox v-if="item.periodNumber" :value="item.periodNumber">{{ item.periodName }}</el-checkbox>
                         </template>
                     </el-checkbox-group>
                 </div>
@@ -23,7 +23,7 @@
                 <div v-if="startPeriodData.length > 0" class="form-item-div">
                     <el-checkbox-group v-model="startPeriodIds">
                         <template v-for="item in startPeriodData" :key="item.id">
-                            <el-checkbox v-if="item.periodNumber" :label="item.periodNumber">{{ item.periodName }}</el-checkbox>
+                            <el-checkbox v-if="item.periodNumber" :value="item.periodNumber">{{ item.periodName }}</el-checkbox>
                         </template>
                     </el-checkbox-group>
                 </div>
@@ -33,13 +33,18 @@
                 <el-date-picker v-model="formModel.printDate" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" disabled />
             </el-form-item>
         </el-form>
+        <template #footer>
+            <el-button hc-btn @click="addModalClose">取消</el-button>
+            <el-button hc-btn type="primary" :loading="submitLoading" @click="addModalSave">提交</el-button>
+            <el-button hc-btn type="primary" :loading="submitLoading" @click="submitClose">提交并关闭</el-button>
+        </template>
     </hc-new-dialog>
 </template>
 
 <script setup>
 import { ref, watch } from 'vue'
 import { useAppStore } from '~src/store'
-import { formValidate, getArrValue } from 'js-fast-way'
+import { formValidate, getArrValue, getObjValue } from 'js-fast-way'
 import mainApi from '~api/debit-pay/admin/certificate'
 
 //事件
@@ -63,9 +68,13 @@ const getAllPeriod = async () => {
         projectId: projectId.value,
         contractId: contractId.value,
     })
-    allPeriodData.value = getArrValue(data)
-    formModel.value.contractPeriodId = allPeriodData.value[ allPeriodData.value.length - 1].id
-    formModel.value.printDate = allPeriodData.value[ allPeriodData.value.length - 1].formPrintDate
+    const res = getArrValue(data)
+    allPeriodData.value = res
+    if (res.length > 0) {
+        const info = getObjValue(res[ res.length - 1])
+        formModel.value.contractPeriodId = info.id
+        formModel.value.printDate = info.formPrintDate
+    }
 }
 
 //获取材料计量期
@@ -86,7 +95,7 @@ const changePeriod = (val)=>{
         }
     })
 }
- 
+
 
 //获取开工计量期
 const startPeriodData = ref([])
@@ -119,11 +128,12 @@ const formRules = {
         trigger: 'blur',
         message: '请选择计量期',
     },
-
 }
 
-//保存
-const addModalSave = async () => {
+//提交保存
+const submitLoading = ref(false)
+const submitData = async () => {
+    submitLoading.value = true
     const isValidate = await formValidate(formRef.value)
     if (!isValidate) return false
     const form = formModel.value
@@ -134,10 +144,34 @@ const addModalSave = async () => {
     const { error, code, msg } = await mainApi.add(form)
     if (!error && code === 200) {
         window.$message.success('保存成功')
-        addModalClose()
-        emit('finish')
+        return true
     } else {
+        submitLoading.value = false
         window.$message.error(msg ?? '保存失败')
+        return false
+    }
+}
+
+//保存
+const addModalSave = async () => {
+    const isValidate = await submitData()
+    if (isValidate) {
+        formModel.value = {}
+        formModel.value = {}
+        await getAllPeriod()
+        await getMeterPeriod()
+        await getStartPeriod()
+        submitLoading.value = false
+    }
+}
+
+//提交并关闭
+const submitClose = async () => {
+    const isValidate = await submitData()
+    if (isValidate) {
+        submitLoading.value = false
+        addModalClose()
+        emit('finish')
     }
 }