measure/src/views/debit-pay/admin/components/certificate/editModal.vue

<template>
    <hc-new-dialog is-table widths="1200px" :show="isShow" title="修改中期支付证书" @save="addModalSave" @close="addModalClose">
        <el-scrollbar>
            <!-- 基础表单 -->
            <hc-card-item>
                <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto">
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="计量期：">
                                <el-select v-model="formModel.contractPeriodId" disabled block>
                                    <el-option v-for="item in allPeriodData" :key="item.id" :label="item.periodNumber" :value="item.id" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="证书编号：">
                                <el-input v-model="formModel.certificateNumber" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" />
                        <el-col :span="8">
                            <el-form-item label="开始日期：">
                                <el-date-picker v-model="formModel.startDate" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" disabled />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="结束日期：">
                                <el-date-picker v-model="formModel.endDate" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" disabled />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="打印日期：">
                                <el-date-picker v-model="formModel.printDate" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" disabled />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <el-form class="no-rules" :model="formModel" label-position="left" label-width="auto">
                    <el-form-item label="开工预付计量期：">
                        <div class="form-item-div hc-flex flex-1">
                            <el-checkbox-group v-model="startPeriodIds">
                                <template v-for="item in startPeriodData" :key="item.id">
                                    <el-checkbox v-if="item.periodNumber" :label="item.periodNumber">{{ item.periodName }}</el-checkbox>
                                </template>
                            </el-checkbox-group>
                        </div>
                    </el-form-item>
                    <el-form-item label="材料计量期：">
                        <div class="form-item-div hc-flex flex-1">
                            <el-checkbox-group v-model="materialPeriodIds">
                                <template v-for="item in meterPeriodData" :key="item.id">
                                    <el-checkbox v-if="item.periodNumber" :label="item.periodNumber">{{ item.periodName }}</el-checkbox>
                                </template>
                            </el-checkbox-group>
                        </div>
                    </el-form-item>
                </el-form>
            </hc-card-item>

            <!-- 表格数据 -->
            <hc-card-item class="mt-3">
                <hc-table is-new :is-index="false" :column="tableColumn" :datas="tableData">
                    <template #key8="{ row }">
                        <hc-table-input v-model="row.key8" disabled />
                    </template>
                </hc-table>
            </hc-card-item>
        </el-scrollbar>
    </hc-new-dialog>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import { getArrValue, getObjValue } from 'js-fast-way'
import mainApi from '~api/debit-pay/admin/certificate'

const props = defineProps({
    ids: {
        type: [String, Number],
        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,
})

onMounted(() => {
    getAllPeriod()
    getMeterPeriod()
    getStartPeriod()
})

//监听
const dataId = ref(props.ids)
watch(() => props.ids, (id) => {
    dataId.value = id
}, { immediate: true })

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

//获取合同计量期
const allPeriodData = ref([])
const getAllPeriod = async () => {
    const { data } = await mainApi.getAllPeriod({
        projectId: projectId.value,
        contractId: contractId.value,
    })
    allPeriodData.value = getArrValue(data)
}

//获取材料计量期
const meterPeriodData = ref([])
const materialPeriodIds = ref([])
const getMeterPeriod = async () => {
    const { data } = await mainApi.getMeterPeriod({
        projectId: projectId.value,
        contractId: contractId.value,
        type: 1,
    })
    meterPeriodData.value = getArrValue(data)
}

//获取开工计量期
const startPeriodData = ref([])
const startPeriodIds = ref([])
const getStartPeriod = async () => {
    const { data } = await mainApi.getMeterPeriod({
        projectId: projectId.value,
        contractId: contractId.value,
        type: 2,
    })
    startPeriodData.value = getArrValue(data)
}


//表单数据
const formRef = ref(null)
const formModel = ref({})
const formRules = {}

//获取详情
const getDataDetail = async () => {
    const { data } = await mainApi.getDetail({ id: dataId.value })
    const form = getObjValue(data)
    formModel.value = form
    tableData.value = getArrValue(form['payList'])
    materialPeriodIds.value = form['materialPeriodIds'].split(',')
    startPeriodIds.value = form['startPeriodIds'].split(',')
}

//表格数据
const tableColumn = ref([
    { key: 'key1', name: '支付章号' },
    { key: 'key2', name: '支付项名称' },
    { key: 'key3', name: '合同金额(元)' },
    { key: 'key4', name: '变更金额(元)' },
    { key: 'key5', name: '变更后的金额(元)' },
    { key: 'key6', name: '本期未累计完成(元)' },
    { key: 'key7', name: '上期未累计完成(元)' },
    { key: 'key8', name: '本期完成(元)' },
])
const tableData = ref([])


const addModalSave = () => {
    emit('finish')
    addModalClose()
}

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