合同材料接口调用

src/api/modules/debit-pay/material/contract.js

@@ -0,0 +1,28 @@
+import { HcApi } from '../../../request/index'
+//  合同材料
+export default {
+    //分页
+    async getPage(form, msg = true) {
+        return HcApi({
+            url: '/api/blade-meter/contractMaterial/list',
+            method: 'get',
+            params: form,
+        }, msg)
+    },
+    //新增或修改
+    async submit(form, msg = true) {
+        return HcApi({
+            url: '/api/blade-meter/contractMaterial/submit',
+            method: 'post',
+            data: form,
+        }, msg)
+    },
+    //删除
+    async remove(form, msg = true) {
+    return HcApi({
+        url: '/api/blade-meter/contractMaterial/remove',
+        method: 'post',
+        params: form,
+    }, msg)
+},
+}

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

@@ -9,10 +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 }">
+                    <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-new :index-style="{ width: 60 }" is-current-row @row-click="viewRow">
                         <template #action="{ row }">
                             <el-link type="success" @click="rowEditClick(row)">修改</el-link>
-                            <el-link type="danger">删除</el-link>
+                            <el-link type="danger" @click="delRowClick(row)">删除</el-link>
                         </template>
                     </hc-table>
                     <template #action>
@@ -24,47 +24,47 @@
                 <hc-card-item title="详情信息" scrollbar>
                     <el-form label-position="left" :model="formModel" label-width="auto" size="large" disabled>
                         <el-form-item label="材料编号：">
-                            <el-input v-model="formModel.key1" />
+                            <el-input v-model="formModel.materialNumber" />
                         </el-form-item>
                         <el-form-item label="材料名称：">
-                            <el-input v-model="formModel.key2" />
+                            <el-input v-model="formModel.materialName" />
                         </el-form-item>
                         <el-form-item label="规格型号：">
-                            <el-input v-model="formModel.key3" />
+                            <el-input v-model="formModel.specification" />
                         </el-form-item>
                         <el-form-item label="单位：">
-                            <el-input v-model="formModel.key4" />
+                            <el-input v-model="formModel.unit" />
                         </el-form-item>
                         <el-form-item label="单价：">
-                            <el-input v-model="formModel.key5" />
+                            <el-input v-model="formModel.price" />
                         </el-form-item>
                         <el-form-item label="数量：">
-                            <el-input v-model="formModel.key6" />
+                            <el-input v-model="formModel.amount" />
                         </el-form-item>
                     </el-form>
                 </hc-card-item>
             </div>
         </div>
         <!-- 新增/修改 -->
-        <hc-new-dialog widths="30rem" :show="isFormModal" title="合同材料新增" @save="modalSave" @close="modalClose">
+        <hc-new-dialog widths="30rem" :show="isFormModal" title="合同材料新增" :loading="saveLoaing" @save="modalSave" @close="modalClose">
             <el-form ref="formRef" class="p-2" label-position="top" :model="formModel" :rules="formRules" size="large">
                 <el-form-item label="材料编号：">
-                    <el-input v-model="formModel.key1" />
+                    <el-input v-model="formModel.materialNumber" />
                 </el-form-item>
-                <el-form-item label="材料名称：" prop="key2">
-                    <el-input v-model="formModel.key2" />
+                <el-form-item label="材料名称：" prop="materialName">
+                    <el-input v-model="formModel.materialName" />
                 </el-form-item>
                 <el-form-item label="规格型号：">
-                    <el-input v-model="formModel.key3" />
+                    <el-input v-model="formModel.specification" />
                 </el-form-item>
                 <el-form-item label="单位：">
-                    <el-input v-model="formModel.key4" />
+                    <el-input v-model="formModel.unit	" />
                 </el-form-item>
                 <el-form-item label="单价：">
-                    <el-input v-model="formModel.key5" />
+                    <el-input v-model="formModel.price" />
                 </el-form-item>
                 <el-form-item label="数量：">
-                    <el-input v-model="formModel.key6" />
+                    <el-input v-model="formModel.amount" />
                 </el-form-item>
             </el-form>
         </hc-new-dialog>
@@ -73,13 +73,21 @@
 
 <script setup>
 import { onMounted, ref } from 'vue'
+import mainApi from '~api/debit-pay/material/contract.js'
+import { useAppStore } from '~src/store'
+import { getArrValue } from 'js-fast-way'
+import { delMessageV2 } from '~com/message/index.js'
+const useAppState = useAppStore()
+const projectId = ref(useAppState.getProjectId)
+const contractId = ref(useAppState.getContractId)
+
 defineOptions({
     name: 'DebitPayMaterialContract',
 })
 
 //渲染完成
 onMounted(() => {
-
+    getTableData()
 })
 
 //搜索表单
@@ -96,22 +104,44 @@ const pageChange = ({ current, size }) => {
 //表格数据
 const tableLoading = ref(false)
 const tableColumn = ref([
-    { key: 'key1', name: '材料编号' },
-    { key: 'key2', name: '材料名称' },
-    { key: 'key3', name: '规格型号' },
-    { key: 'key4', name: '单位' },
-    { key: 'key5', name: '单价' },
-    { key: 'key6', name: '数量' },
+    { key: 'materialNumber', name: '材料编号' },
+    { key: 'materialName', name: '材料名称' },
+    { key: 'specification', name: '规格型号' },
+    { key: 'unit', name: '单位' },
+    { key: 'price', name: '单价' },
+    { key: 'amount', name: '数量' },
     { key: 'action', name: '操作', width: 100 },
 ])
-const tableData = ref([
-    { key1: '1111' },
-])
-
+const tableData = ref([])
+const getTableData = async () => {
+    tableLoading.value = true
+    const { error, code, data } = await mainApi.getPage({
+       ...searchForm.value,
+       projectId:projectId.value,
+       contractId:contractId.value,
+    })
+    tableLoading.value = false
+    if (!error && code === 200) {
+        tableData.value = getArrValue(data['records'])
+        if (tableData.value.length > 0) {
+            formModel.value = tableData.value[0]
+            // getDetail(tableData.value[0].id)
+        }
+       
+      
+    } else {
+        tableData.value = []
+  
+    }
+}
+const viewRow = ({ row })=>{
+   formModel.value = row
+}
 //新增
 const isFormModal = ref(false)
 const rowAddClick = () => {
     isFormModal.value = true
+    formModel.value = {}
 }
 
 //表单数据
@@ -120,15 +150,51 @@ const formModel = ref({})
 const formRules = {}
 
 //修改
-const rowEditClick = () => {
-
+const rowEditClick = (row) => {
+    isFormModal.value = true
+    formModel.value = row
 }
 
 //保存
-const modalSave = () => {
+const saveLoaing = ref(false)
+const modalSave = async () => {
+    saveLoaing.value = true
+    const { error, code, msg } = await mainApi.submit({
+        ...formModel.value,
+        projectId:projectId.value,
+        contractId:contractId.value,
+       
+        })
+        //判断状态
+        saveLoaing.value = false
+        if (!error && code === 200) {
+            window?.$message?.success(msg)
+        }
+        getTableData()
     modalClose()
 }
-
+const delRowClick = async (row)=>{
+    delMessageV2(async (action, instance, done) => {
+            if (action === 'confirm') {
+                instance.confirmButtonLoading = true
+                removeCon(row.id)
+                instance.confirmButtonLoading = false
+                done()
+            } else {
+                done()
+            }
+    })
+}
+const removeCon = async (id) => {
+    const { error, code } = await mainApi.remove({
+        ids: id, 
+    })
+    if (!error && code === 200) {
+        window?.$message?.success('删除成功')
+       getTableData()
+        formModel.value = {}
+    }
+}
 //关闭弹窗
 const modalClose = () => {
     isFormModal.value = false