measure/src/views/tasks/components/hc-data/addBillBase.vue

<template>
    <hc-new-dialog is-table widths="1200px" :show="isShow" title="添加分解清单" @save="modalSave" @close="modalClose">
        <hc-table
            :column="tableColumn" :datas="tableData" :loading="tableLoading"
            is-new is-check :check-style="{ width: 29 }" :index-style="{ width: 60 }"
            @selection-change="tableCheckChange"
        />
    </hc-new-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { arrToId, getArrValue } from 'js-fast-way'
import middlepayApi from '~api/debit-pay/admin/middlepay'
import mainApi from '~api/tasks/hc-data'

const props = defineProps({
    info: {
        type: Object,
        default: () => ({}),
    },
    table: {
        type: Object,
        default: () => ({}),
    },
    ids: {
        type: [String, Number],
        default: '',
    },
    projectId: {
        type: [String, Number],
        default: '',
    },
    contractId: {
        type: [String, Number],
        default: '',
    },
})

//事件
const emit = defineEmits(['finish', 'close'])

const taskInfo = ref(props.info)
const tableInfo = ref(props.table)
const tableIds = ref(props.ids)
const contractId = ref(props.contractId)
const projectId = ref(props.projectId)

//双向绑定
// eslint-disable-next-line no-undef
const isShow = defineModel('modelValue', {
    default: false,
})

//监听
watch(() => [
    props.ids,
    props.projectId,
    props.contractId,
], ([ids, pid, cid]) => {
    tableIds.value = ids
    projectId.value = pid
    contractId.value = cid
}, { immediate: true, deep: true })

//监听数据
watch(() => [
    props.table,
    props.info,
], ([table, row]) => {
    tableInfo.value = table
    taskInfo.value = row
}, { deep: true })

//监听
watch(isShow, (val) => {
    if (val) {
        getTableData()
    }
})

//表格数据
const tableLoading = ref(false)
const tableColumn = [
    { key: 'formNumber', name: '清单编号' },
    { key: 'formName', name: '清单名称' },
    { key: 'currentPrice', name: '单价(元)' },
    { key: 'contractTotal', name: '合同数量' },
    { key: 'changeTotal', name: '合同变更后数量' },
    { key: 'buildChangeTotal', name: '施工图变更后数量' },
    { key: 'resolveResidueTotal', name: '分解剩余量' },
]
const tableData = ref([])
const getTableData = async () => {
    tableData.value = []
    tableLoading.value = true
    const { contractPeriodId, contractUnitId } = tableInfo.value
    const { data } = await middlepayApi.addFormList({
        contractPeriodId: contractPeriodId,
        contractId: contractId.value,
        ids: tableIds.value,
        nodeId: contractUnitId,
    })
    tableData.value = getArrValue(data)
    tableLoading.value = false
}

//表格选择
const checksData = ref([])
const tableCheckChange = (data) => {
    checksData.value = data
}

//确定保存
const modalSave = async () => {
    const rows = checksData.value
    if (rows.length <= 0) {
        window.$message.warning('请先选择清单')
        return false
    }
    const rowIds = arrToId(rows)
    const { contractPeriodId, contractUnitId, id } = tableInfo.value
    const { data } = await mainApi.tableFormApplyTaskSave({
        contractPeriodId: contractPeriodId,
        projectId: projectId.value,
        contractId: contractId.value,
        nodeId: contractUnitId,
        taskId: taskInfo.value.id,
        dataId: id,
        ids: rowIds,
    })
    emit('finish', getArrValue(data))
    modalClose()
}

//取消关闭
const modalClose = () => {
    isShow.value = false
    emit('close')
}
</script>