合同材料

src/views/debit-pay/material/contract.vue

@@ -9,7 +9,10 @@
         <div class="relative h-full flex">
             <div class="flex-1">
                 <hc-card-item>
-                    <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-new :index-style="{ width: 60 }" is-current-row @row-click="viewRow">
+                    <hc-table
+                        :column="tableColumn" :datas="tableData" :index-style="{ width: 60 }" :loading="tableLoading"
+                        is-current-row is-new @row-click="viewRow"
+                    >
                         <template #action="{ row }">
                             <el-link type="success" @click="rowEditClick(row)">修改</el-link>
                             <el-link type="danger" @click="delRowClick(row)">删除</el-link>
@@ -21,8 +24,8 @@
                 </hc-card-item>
             </div>
             <div class="ml-3 w-[400px]">
-                <hc-card-item title="详情信息" scrollbar>
-                    <el-form label-position="left" :model="infoData" label-width="auto" size="large" disabled>
+                <hc-card-item scrollbar title="详情信息">
+                    <el-form :model="infoData" disabled label-position="left" label-width="auto" size="large">
                         <el-form-item label="材料编号：">
                             <el-input v-model="infoData.materialNumber" />
                         </el-form-item>
@@ -46,8 +49,8 @@
             </div>
         </div>
         <!-- 新增/修改 -->
-        <hc-new-dialog widths="30rem" :show="isFormModal" :title="modalTitle" :loading="saveLoaing" @save="modalSave" @close="modalClose">
-            <el-form ref="formRef" class="p-2" label-position="top" :model="formModel" :rules="formRules" size="large">
+        <hc-new-dialog :show="isFormModal" :title="modalTitle" is-footer-center widths="30rem" @close="modalClose">
+            <el-form ref="formRef" :model="formModel" :rules="formRules" class="p-2" label-position="top" size="large">
                 <el-form-item label="材料编号：">
                     <el-input v-model="formModel.materialNumber" />
                 </el-form-item>
@@ -67,16 +70,22 @@
                     <el-input-number v-model="formModel.amount" :controls="false" :min="0" class="w-100" />
                 </el-form-item>
             </el-form>
+            <template #footer>
+                <el-button hc-btn @click="modalClose">取消</el-button>
+                <el-button :loading="saveLoaing" hc-btn type="primary" @click="modalSave">提交</el-button>
+                <el-button v-if="!formModel.id" :loading="saveLoaing" hc-btn type="primary" @click="modalSaveClose">提交并关闭</el-button>
+            </template>
         </hc-new-dialog>
     </hc-new-card>
 </template>
 
 <script setup>
-import { onActivated, onMounted, ref } from 'vue'
+import { HcDelMsg } from 'hc-vue3-ui'
+import { deepClone, formValidate, getArrValue, isNullES } from 'js-fast-way'
+import { onActivated, ref } from 'vue'
 import mainApi from '~api/debit-pay/material/contract.js'
 import { useAppStore } from '~src/store'
-import { deepClone, formValidate, getArrValue } from 'js-fast-way'
-import { HcDelMsg } from 'hc-vue3-ui'
+
 const useAppState = useAppStore()
 const projectId = ref(useAppState.getProjectId)
 const contractId = ref(useAppState.getContractId)
@@ -118,9 +127,9 @@ const infoData = ref({})
 const getTableData = async () => {
     tableLoading.value = true
     const { error, code, data } = await mainApi.getPage({
-       ...searchForm.value,
-       projectId:projectId.value,
-       contractId:contractId.value,
+        ...searchForm.value,
+        projectId: projectId.value,
+        contractId: contractId.value,
     })
     tableLoading.value = false
     if (!error && code === 200) {
@@ -130,18 +139,16 @@ const getTableData = async () => {
             infoData.value = tableData.value[0]
             // getDetail(tableData.value[0].id)
         }
-
-
     } else {
         tableData.value = []
         searchForm.value.total = 0
-
     }
 }
-const viewRow = ({ row })=>{
+const viewRow = ({ row }) => {
     infoData.value = row
 }
 const modalTitle = ref('')
+
 //新增
 const isFormModal = ref(false)
 const rowAddClick = () => {
@@ -170,52 +177,73 @@ const rowEditClick = (row) => {
 
 //保存
 const saveLoaing = ref(false)
-const modalSave = async () => {
+const submitData = async () => {
     const res = await formValidate(formRef.value)
-    if (res) {
-        saveLoaing.value = true
+    if (!res) return
+    saveLoaing.value = true
     const { error, code, msg } = await mainApi.submit({
         ...formModel.value,
-        projectId:projectId.value,
-        contractId:contractId.value,
+        projectId: projectId.value,
+        contractId: contractId.value,
+    })
+    //判断状态
+    saveLoaing.value = false
+    if (!error && code === 200) {
+        window.$message.success(msg)
+        return true
+    } else {
+        window.$message.error(msg ?? '操作失败')
+        return false
+    }
+}
 
-        })
-        //判断状态
-        saveLoaing.value = false
-        if (!error && code === 200) {
-            window?.$message?.success(msg)
-        } else {
-            window.$message.error(msg ?? '操作失败')
-        }
-            getTableData()
-             modalClose()
+//提交保存
+const isSubmit = ref(false)
+const modalSave = async () => {
+    const form = formModel.value
+    const isValidate = await submitData()
+    if (isValidate && isNullES(form.id)) {
+        isSubmit.value = true
+        formModel.value = {}
+    } else if (isValidate && !isNullES(form.id)) {
+        getTableData().then()
+        modalClose()
     }
+}
 
+//提交并关闭
+const modalSaveClose = async () => {
+    const isValidate = await submitData()
+    if (isValidate) {
+        getTableData().then()
+        modalClose()
+    }
 }
-const delRowClick = (row)=>{
-    HcDelMsg(async ( resolve) => {
-             await removeCon(row.id)
+
+//删除
+const delRowClick = (row) => {
+    HcDelMsg(async (resolve) => {
+        const { error, code, msg } = await mainApi.remove({ ids: row.id })
+        if (!error && code === 200) {
+            window?.$message?.success('删除成功')
+            getTableData().then()
+            formModel.value = {}
             resolve() //关闭弹窗的回调
+        } else {
+            window.$message.error(msg ?? '操作失败')
+        }
     })
 }
-const removeCon = async (id) => {
-    const { error, code, msg } = await mainApi.remove({
-        ids: id,
-    })
-    if (!error && code === 200) {
-        window?.$message?.success('删除成功')
-       getTableData()
-        formModel.value = {}
-    } else {
-        window.$message.error(msg ?? '操作失败')
-    }
-}
+
 //关闭弹窗
 const modalClose = () => {
     isFormModal.value = false
+    if (isSubmit.value) {
+        getTableData()
+    }
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 
 </style>