measure/src/views/funding/budget.vue

<template>
    <hc-card>
        <template #header>
            <div class="w-200px">
                <el-select v-model="formPeriodId" filterable block placeholder="期名称" @change="formPeriodChange">
                    <el-option v-for="item in yearDatas" :key="item.id" :label="item.periodName" :value="item.id" />
                </el-select>
            </div>
        </template>
        <template #extra>
            <span class="mr-20px text-12px" style="color: #FF7D43">*金额单位均为：元</span>
            <el-button v-if="isTableEdit" hc-btn type="warning" :loading="saveLoading" @click="tableEditSave">保存</el-button>
            <el-button v-else hc-btn type="primary" @click="tableEditClick">编辑</el-button>
        </template>
        <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" :is-index="false">
            <template #one="{ row }">
                <hc-table-input v-if="isTableEdit" v-model="row.one" type="number" :disabled="meterMonth.indexOf('one') !== -1" />
                <span v-else>{{ row.one }}</span>
            </template>
            <template #two="{ row }">
                <hc-table-input v-if="isTableEdit" v-model="row.two" type="number" :disabled="meterMonth.indexOf('two') !== -1" />
                <span v-else>{{ row.two }}</span>
            </template>
            <template #three="{ row }">
                <hc-table-input v-if="isTableEdit" v-model="row.three" type="number" :disabled="meterMonth.indexOf('three') !== -1" />
                <span v-else>{{ row.three }}</span>
            </template>
            <template #four="{ row }">
                <hc-table-input v-if="isTableEdit" v-model="row.four" type="number" :disabled="meterMonth.indexOf('four') !== -1" />
                <span v-else>{{ row.four }}</span>
            </template>
            <template #five="{ row }">
                <hc-table-input v-if="isTableEdit" v-model="row.five" type="number" :disabled="meterMonth.indexOf('five') !== -1" />
                <span v-else>{{ row.five }}</span>
            </template>
            <template #six="{ row }">
                <hc-table-input v-if="isTableEdit" v-model="row.six" type="number" :disabled="meterMonth.indexOf('six') !== -1" />
                <span v-else>{{ row.six }}</span>
            </template>
            <template #seven="{ row }">
                <hc-table-input v-if="isTableEdit" v-model="row.seven" type="number" :disabled="meterMonth.indexOf('seven') !== -1" />
                <span v-else>{{ row.seven }}</span>
            </template>
            <template #eight="{ row }">
                <hc-table-input v-if="isTableEdit" v-model="row.eight" type="number" :disabled="meterMonth.indexOf('eight') !== -1" />
                <span v-else>{{ row.eight }}</span>
            </template>
            <template #nine="{ row }">
                <hc-table-input v-if="isTableEdit" v-model="row.nine" type="number" :disabled="meterMonth.indexOf('nine') !== -1" />
                <span v-else>{{ row.nine }}</span>
            </template>
            <template #ten="{ row }">
                <hc-table-input v-if="isTableEdit" v-model="row.ten" type="number" :disabled="meterMonth.indexOf('ten') !== -1" />
                <span v-else>{{ row.ten }}</span>
            </template>
            <template #eleven="{ row }">
                <hc-table-input v-if="isTableEdit" v-model="row.eleven" type="number" :disabled="meterMonth.indexOf('eleven') !== -1" />
                <span v-else>{{ row.eleven }}</span>
            </template>
            <template #twelve="{ row }">
                <hc-table-input v-if="isTableEdit" v-model="row.twelve" type="number" :disabled="meterMonth.indexOf('twelve') !== -1" />
                <span v-else>{{ row.twelve }}</span>
            </template>
        </hc-table>
    </hc-card>
</template>

<script setup>
import { onActivated, ref } from 'vue'
import { useAppStore } from '~src/store'
import { getArrValue } from 'js-fast-way'
import mainApi from '~api/funding/index'

//获取全局变量
const store = useAppStore()
const projectId = ref(store.getProjectId)
const contractId = ref(store.getContractId)

defineOptions({
    name: 'FundingBudget',
})

//选项卡被激活
onActivated(() => {
    projectId.value = store.getProjectId
    contractId.value = store.getContractId
    getYearDatas()
})

//搜索表单
const formPeriodId = ref('')
const formPeriodChange = () => {
    getDataApi()
}

//获取年份
const yearDatas = ref([])
const getYearDatas = async () => {
    const { data } = await mainApi.periodPage({
        projectId: projectId.value,
        contractId: contractId.value,
    })
    const res = getArrValue(data)
    yearDatas.value = res
    if (res.length > 0) {
        formPeriodId.value = res[res.length - 1].id
        getDataApi()
    }
}

//获取相关数据
const getDataApi = () => {
    getTableData()
    getMeterMonth()
}

//获取已经计量月份
const meterMonth = ref([])
const getMeterMonth = async () => {
    const { data } = await mainApi.getMeterMonth({
        projectId: projectId.value,
        contractId: contractId.value,
        formPeriodId: formPeriodId.value,
    })
    console.log(data)
    meterMonth.value = getArrValue(data)
}

//表格数据
const tableData = ref([])
const tableColumn = ref([
    { key: 'formNumber', name: '清单编号', width: 100, align: 'center' },
    { key: 'formName', name: '清单名称', width: 180, align: 'center' },
    { key: 'contractMoney', name: '合同金额', width: 140, align: 'center' },
    { key: 'realChangeMoney', name: '变更金额', width: 140, align: 'center' },
    { key: 'changeMoney', name: '变更后金额', width: 140, align: 'center' },
    { key: 'one', name: '1月', width: 120, align: 'center' },
    { key: 'two', name: '2月', width: 120, align: 'center' },
    { key: 'three', name: '3月', width: 120, align: 'center' },
    { key: 'four', name: '4月', width: 120, align: 'center' },
    { key: 'five', name: '5月', width: 120, align: 'center' },
    { key: 'six', name: '6月', width: 120, align: 'center' },
    { key: 'seven', name: '7月', width: 120, align: 'center' },
    { key: 'eight', name: '8月', width: 120, align: 'center' },
    { key: 'nine', name: '9月', width: 120, align: 'center' },
    { key: 'ten', name: '10月', width: 120, align: 'center' },
    { key: 'eleven', name: '11月', width: 120, align: 'center' },
    { key: 'twelve', name: '12月', width: 120, align: 'center' },
])

//获取表格数据
const tableLoading = ref(false)
const getTableData = async () => {
    tableLoading.value = true
    const { data } = await mainApi.getFormPlan({
        projectId: projectId.value,
        contractId: contractId.value,
        formPeriodId: formPeriodId.value,
    })
    tableLoading.value = false
    tableData.value = getArrValue(data)
}

//编辑模式
const isTableEdit = ref(false)
const tableEditClick = () => {
    isTableEdit.value = true
}

//保存
const saveLoading = ref(false)
const tableEditSave = async () => {
    const table = tableData.value
    saveLoading.value = true
    const { error, code } = await mainApi.updateFormPlan({
        projectId: projectId.value,
        contractId: contractId.value,
        formPeriodId: formPeriodId.value,
        list: table,
    })
    saveLoading.value = false
    if (!error && code === 200) {
        window?.$message?.success('保存成功')
        isTableEdit.value = false
        getDataApi().then()
    }
}
</script>