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

<template>
    <hc-new-card title="合同材料">
        <template #extra>
            <el-button hc-btn type="primary" @click="rowAddClick">
                <HcIcon name="add" />
                <span>新增</span>
            </el-button>
        </template>
        <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">
                        <template #action="{ row }">
                            <el-link type="success" @click="rowEditClick(row)">修改</el-link>
                            <el-link type="danger" @click="delRowClick(row)">删除</el-link>
                        </template>
                    </hc-table>
                    <template #action>
                        <hc-pages :pages="searchForm" @change="pageChange" />
                    </template>
                </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>
                        <el-form-item label="材料编号：">
                            <el-input v-model="infoData.materialNumber" />
                        </el-form-item>
                        <el-form-item label="材料名称：">
                            <el-input v-model="infoData.materialName" />
                        </el-form-item>
                        <el-form-item label="规格型号：">
                            <el-input v-model="infoData.specification" />
                        </el-form-item>
                        <el-form-item label="单位：">
                            <el-input v-model="infoData.unit" />
                        </el-form-item>
                        <el-form-item label="单价：">
                            <el-input v-model="infoData.price" />
                        </el-form-item>
                        <el-form-item label="数量：">
                            <el-input v-model="infoData.amount" />
                        </el-form-item>
                    </el-form>
                </hc-card-item>
            </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">
                <el-form-item label="材料编号：">
                    <el-input v-model="formModel.materialNumber" />
                </el-form-item>
                <el-form-item label="材料名称：" prop="materialName">
                    <el-input v-model="formModel.materialName" />
                </el-form-item>
                <el-form-item label="规格型号：">
                    <el-input v-model="formModel.specification" />
                </el-form-item>
                <el-form-item label="单位：">
                    <el-input v-model="formModel.unit	" />
                </el-form-item>
                <el-form-item label="单价：">
                    <el-input-number v-model="formModel.price" :controls="false" :min="0" class="w-100" />
                </el-form-item>
                <el-form-item label="数量：">
                    <el-input-number v-model="formModel.amount" :controls="false" :min="0" class="w-100" />
                </el-form-item>
            </el-form>
        </hc-new-dialog>
    </hc-new-card>
</template>

<script setup>
import { onActivated, onMounted, 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 { delMessageV2 } from '~com/message/index.js'
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId)
const contractId = ref(useAppState.getContractId)

defineOptions({
    name: 'DebitPayMaterialContract',
})

//渲染完成
onActivated(() => {
    getTableData()
})

//搜索表单
const searchForm = ref({
    current: 1, size: 10, total: 0,
})

//分页
const pageChange = ({ current, size }) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}

//表格数据
const tableLoading = ref(false)
const tableColumn = ref([
    { 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([])
const infoData = 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'])
        searchForm.value.total = data['total']
        if (tableData.value.length > 0) {
            infoData.value = tableData.value[0]
            // getDetail(tableData.value[0].id)
        }


    } else {
        tableData.value = []
        searchForm.value.total = 0

    }
}
const viewRow = ({ row })=>{
    infoData.value = row
}
const modalTitle = ref('')
//新增
const isFormModal = ref(false)
const rowAddClick = () => {
    isFormModal.value = true
    formModel.value = {}
    modalTitle.value = '合同材料新增'
}

//表单数据
const formRef = ref(null)
const formModel = ref({})
const formRules = {
    materialName: {
        required: true,
        trigger: 'blur',
        message: '请输入材料名称',
    },
}

//修改
const rowEditClick = (row) => {
    modalTitle.value = '合同材料修改'
    isFormModal.value = true
    formModel.value = deepClone(row)
}

//保存
const saveLoaing = ref(false)
const modalSave = async () => {
    const res = await formValidate(formRef.value)
    if (res) {
        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)
        } else {
            window.$message.error(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, 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
}
</script>

<style scoped lang="scss">

</style>