for_client/src/views/ledger/components/construction.vue

<template>
    <HcNewCard>
        <HcTable :column="tableConstructionColumn" :datas="tableConstructionData" :loading="tableConstructionLoading" is-new :index-style="{ width: 60 }">
            <template #action="{ row }">
                <HcTooltip keys="write_construction_edit">
                    <el-button plain size="small" type="primary" @click="tableConstructionEdit(row)">
                        <HcIcon name="edit" />
                        <span>编辑</span>
                    </el-button>
                </HcTooltip>
            </template>
        </HcTable>
        <template #action>
            <HcPages :pages="searchConstructionForm" @change="pageConstructionChange" />
        </template>
    </HcNewCard>

    <!-- 编辑施工台账 -->
    <hc-new-dialog v-model="showConstructionEditModal" title="编辑施工台账" widths="38rem">
        <el-form ref="constructionFormRef" :model="constructionFormModel" :rules="constructionFormRules" label-position="top" label-width="auto" size="large">
            <div class="flex">
                <el-form-item class="flex-1" label="施工起始日期" prop="siteStartTime">
                    <el-date-picker v-model="constructionFormModel.siteStartTime" class="block" format="YYYY-MM-DD" placeholder="施工起始日期" type="date" value-format="YYYY-MM-DD" />
                </el-form-item>
                <el-form-item class="mx-4" label=" ">至</el-form-item>
                <el-form-item class="flex-1" label="施工停止日期" prop="siteEndTime">
                    <el-date-picker v-model="constructionFormModel.siteEndTime" class="block" format="YYYY-MM-DD" placeholder="施工停止日期" type="date" value-format="YYYY-MM-DD" />
                </el-form-item>
            </div>
            <div class="flex">
                <el-form-item class="flex-1" label="检测起始日期" prop="detectionStartTime">
                    <el-date-picker
                        v-model="constructionFormModel.detectionStartTime" :disabled="!constructionFormModel.siteStartTime || !constructionFormModel.siteEndTime"
                        class="block"
                        format="YYYY-MM-DD" placeholder="检测起始日期" type="date"
                        value-format="YYYY-MM-DD"
                    />
                </el-form-item>
                <el-form-item class="mx-4" label=" ">至</el-form-item>
                <el-form-item class="flex-1" label="检测停止日期" prop="detectionEndTime">
                    <el-date-picker
                        v-model="constructionFormModel.detectionEndTime" :disabled="!constructionFormModel.siteStartTime || !constructionFormModel.siteEndTime"
                        class="block"
                        format="YYYY-MM-DD" placeholder="检测停止日期" type="date"
                        value-format="YYYY-MM-DD"
                    />
                </el-form-item>
            </div>
            <el-form-item label="设计方量">
                <el-input v-model="constructionFormModel.designVolume" placeholder="请输入设计方量" />
            </el-form-item>
            <el-form-item label="实际方量">
                <el-input v-model="constructionFormModel.actualVolume" placeholder="请输入实际方量" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button size="large" @click="showConstructionEditModal = false">
                    <HcIcon name="close" />
                    <span>取消</span>
                </el-button>
                <el-button :loading="saveConstructionLoading" hc-btn type="primary" @click="saveConstructionClick">
                    <HcIcon name="save" />
                    <span>提交保存</span>
                </el-button>
            </div>
        </template>
    </hc-new-dialog>
</template>

<script setup>
import { nextTick, ref, watch } from 'vue'
import { deepClone, formValidate, getArrValue } from 'js-fast-way'
import constructionApi from '~api/ledger/construction'

//参数
const props = defineProps({
    projectId: {
        type: [String, Number],
        default: '',
    },
    contractId: {
        type: [String, Number],
        default: '',
    },
    treeData: {
        type: Object,
        default: () => ({}),
    },
})

//变量
const projectId = ref(props.projectId)
const contractId = ref(props.contractId)
const nodeData = ref(props.treeData)

//监听
watch(() => [
    props.treeData,
], ([treeData]) => {
    nodeData.value = treeData
    setQueryData(treeData)
})

//渲染完成
nextTick(() => {
    setQueryData(props.treeData)
})

//获取相关数据
const setQueryData = (data) => {
    const cid = data?.contractIdRelation || ''
    const wbsId = data['contractIdRelation'] ? data['id'] : data['primaryKeyId']
    if (wbsId) {
        searchConstructionForm.value.contractId = cid ? cid : contractId.value
        searchConstructionForm.value.contractIdRelation = data['contractIdRelation']
        searchConstructionForm.value.wbsIds = [wbsId]
        searchConstructionClick()
    }
}

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

//搜索
const searchConstructionClick = () => {
    if (searchConstructionForm.value?.wbsIds) {
        searchConstructionForm.value.current = 1
        getTableConstructionData()
    } else {
        window?.$message?.warning('请先选择一个树节点')
    }
}

//分页被点击
const pageConstructionChange = ({ current, size }) => {
    searchConstructionForm.value.current = current
    searchConstructionForm.value.size = size
    getTableConstructionData()
}

//施工台账表头
const tableConstructionColumn = ref([
    { key: 'station', name: '施工桩号' },
    { key: 'site', name: '施工部位' },
    { key: 'siteTimeStr', name: '施工起止日期' },
    { key: 'detectionTimeStr', name: '检测日期' },
    { key: 'designVolume', name: '设计方量' },
    { key: 'actualVolume', name: '实际方量' },
    { key: 'action', name: '操作', width: 100 },
])
const tableConstructionData = ref([])

//获取数据
const tableConstructionLoading = ref(false)
const getTableConstructionData = async () => {
    tableConstructionLoading.value = true
    const { error, code, data, msg } = await constructionApi.queryConstructionPage({
        ...searchConstructionForm.value,
        projectId: projectId.value,
    })
    //判断状态
    tableConstructionLoading.value = false
    if (!error && code === 200) {
        tableConstructionData.value = getArrValue(data?.records) || []
        searchConstructionForm.value.total = data?.total || 0
    } else {
        tableConstructionData.value = []
        searchConstructionForm.value.total = 0
        window?.$message?.error(msg)
    }
}

//施工台账编辑
const showConstructionEditModal = ref(false)
const tableConstructionEdit = (row) => {
    constructionFormModel.value = deepClone(row)
    saveConstructionLoading.value = false
    constructionFormRef.value?.resetFields()
    showConstructionEditModal.value = true
}

//施工台账表单
const constructionFormRef = ref(null)
const constructionFormModel = ref({
    siteStartTime: null,
    siteEndTime: null,
    detectionStartTime: null,
    detectionEndTime: null,
    designVolume: '',
    actualVolume: '',
})
const constructionFormRules = ref({
    siteStartTime: {
        required: true,
        validator: (rule, value, callback) => {
            const endTime = constructionFormModel.value?.siteEndTime ?? ''
            if (!value) {
                callback(new Error('请选择施工起始日期'))
            } else {
                callback()
            }
        },
        trigger: 'blur',
    },
    siteEndTime: {
        required: true,
        validator: (rule, value, callback) => {
            const startTime = constructionFormModel.value?.siteStartTime ?? ''
            if (!value) {
                callback(new Error('请选择施工停止日期'))
            } else if (value < startTime) {
                callback(new Error('施工停止日期 不能 小于 施工起始日期'))
            } else {
                callback()
            }
        },
        trigger: 'blur',
    },
    detectionStartTime: {
        required: true,
        validator: (rule, value, callback) => {
            const endTime = constructionFormModel.value?.siteEndTime ?? ''
            const startTime = constructionFormModel.value?.siteStartTime ?? ''
            if (!value) {
                callback(new Error('请选择检测起始日期'))
            } else if (value < startTime) {
                callback(new Error('检测起始日期 不能 小于 施工起始日期'))
            } else {
                callback()
            }
        },
        trigger: 'blur',
    },
    detectionEndTime: {
        required: true,
        validator: (rule, value, callback) => {
            const startTime = constructionFormModel.value?.detectionStartTime ?? ''
            if (!value) {
                callback(new Error('请选择检测停止日期'))
            } else if (value < startTime) {
                callback(new Error('检测停止日期 不能 小于 检测起始日期'))
            } else {
                callback()
            }
        },
        trigger: 'blur',
    },
    designVolume: {
        required: true,
        trigger: 'blur',
        message: '请输入设计方量',
    },
    actualVolume: {
        required: true,
        trigger: 'blur',
        message: '请输入实际方量',
    },
})

//提交保存
const saveConstructionClick = async () => {
    const validate = await formValidate(constructionFormRef.value)
    if (validate) {
        const formData = constructionFormModel.value
        const { siteStartTime, siteEndTime, detectionStartTime, detectionEndTime } = formData
        //施工时间
        formData.siteTimeStr = siteStartTime + '~' + siteEndTime
        //检测时间
        formData.detectionTimeStr = detectionStartTime + '~' + detectionEndTime
        //请求保存
        updateConstructionPage(formData)
    }
}
//确认保存
const saveConstructionLoading = ref(false)
const updateConstructionPage = async (formData) => {
    //发起请求
    saveConstructionLoading.value = true
    const { error, code } = await constructionApi.updateConstructionPage({
        ...formData,
        projectId: projectId.value,
        contractId: contractId.value,
    }, false)
    //处理数据
    saveConstructionLoading.value = false
    if (!error && code === 200) {
        window?.$message?.success('保存成功')
        showConstructionEditModal.value = false
        getTableConstructionData()
    } else {
        window?.$message?.error('保存失败')
    }
}
</script>