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

<template>
    <hc-new-dialog is-table widths="90%" :show="isShow" title="变更清单添加" @save="addModalSave" @close="addModalClose">
        <hc-card-item>
            <template #header>
                <div class="w-60">
                    <hc-search-input v-model="searchForm.searchValue" placeholder="请输入清单编号" @search="searchClick" />
                </div>
            </template>
            <template #extra>
                <el-link type="primary" @click="showTypeClick">{{ searchForm.showType === 1 ? '显示已分解' : '显示所有' }}</el-link>
            </template>
            <hc-table
                :column="tableColumn" :datas="tableData" :loading="tableLoading"
                is-new :index-style="{ width: 60 }" is-check :check-style="{ width: 29 }"
                @selection-change="tableCheckChange"
            />
        </hc-card-item>
    </hc-new-dialog>
</template>

<script setup>
import { nextTick, ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import { getArrValue } from 'js-fast-way'
import orderApi from '~api/alter/admin/order'
import mainApi from '~api/tasks/hc-data'

const props = defineProps({
    info: {
        type: Object,
        default: () => ({}),
    },
})

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

const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId || '')
const contractId = ref(useAppState.getContractId || '')

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

//监听数据
const taskInfo = ref({})
watch(() => props.info, (obj) => {
    taskInfo.value = obj
}, { immediate: true, deep: true })

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

//搜索
const searchClick = () => {
    getTableData()
}

//显示类型
const showTypeClick = () => {
    const { showType } = searchForm.value
    searchForm.value.showType = showType === 1 ? 2 : 1
    getTableData()
}

//搜索表单
const searchForm = ref({ searchValue: null, showType: 1})

//表格数据
const tableLoading = ref(false)
const tableColumn = ref([
    { key: 'formNumber', name: '清单编号', width: 120 },
    { key: 'formName', name: '清单名称' },
    { key: 'currentPrice', name: '单价(元)', width: 100 },
    { key: 'contractTotal', name: '合同数量', width: 100 },
    { key: 'changeTotal', name: '合同变更后数量', width: 120 },
    { key: 'buildChangeTotal', name: '施工图变更后数量', width: 140 },
    { key: 'resolveResidueTotal', name: '分解剩余量', width: 100 },
])
const tableData = ref([])
const getTableData = async () => {
    tableData.value = []
    tableLoading.value = true
    const {ids, treeId, taskId, dataId, primaryKeyIdMeter} = taskInfo.value
    const { data } = await orderApi.addForm({
        ...searchForm.value,
        primaryKeyIdMeter: primaryKeyIdMeter ?? '',
        projectId: projectId.value,
        contractId: contractId.value,
        taskId: taskId ?? '',
        nodeId: treeId ?? '',
        dataId: dataId ?? '',
        ids: ids ?? '',
    })
    tableData.value = getArrValue(data)
    tableLoading.value = false
}

//表格勾选
const tableCheck = ref([])
const tableCheckChange = (rows) => {
    tableCheck.value = rows
}

//保存
const addModalSave = async () => {
    const {primaryKeyIdMeter, treeId, dataId, taskId} = taskInfo.value
    const { error, code, msg } = await mainApi.changeTokenInventorySave({
        projectId: projectId.value,
        contractId: contractId.value,
        primaryKeyIdMeter: primaryKeyIdMeter ?? '',
        formList: tableCheck.value,
        nodeId: treeId ?? '',
        dataId: dataId ?? '',
        taskId: taskId ?? '',
    })
    if (!error && code === 200) {
        addModalClose()
        emit('finish')
    } else {
        window.$message.error(msg ?? '确认失败')
    }
}

//关闭弹窗
const addModalClose = () => {
    isShow.value = false
    emit('close')
}
</script>