|
@@ -2,71 +2,66 @@
|
|
<hc-card>
|
|
<hc-card>
|
|
<template #header>
|
|
<template #header>
|
|
<div class="w-200px">
|
|
<div class="w-200px">
|
|
- <el-select v-model="searchForm.key1" filterable clearable block placeholder="期名称">
|
|
|
|
- <el-option label="2023年资金预算" value="2023" />
|
|
|
|
- <el-option label="2024年资金预算" value="2024" />
|
|
|
|
- <el-option label="2025年资金预算" value="2025" />
|
|
|
|
|
|
+ <el-select v-model="formPeriodId" filterable clearable block placeholder="期名称">
|
|
|
|
+ <el-option v-for="item in yearDatas" :key="item.id" :label="item.periodName" :value="item.id" />
|
|
</el-select>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<template #extra>
|
|
<template #extra>
|
|
<span class="mr-20px text-12px" style="color: #FF7D43">*金额单位均为:万元</span>
|
|
<span class="mr-20px text-12px" style="color: #FF7D43">*金额单位均为:万元</span>
|
|
- <el-button v-if="isTableEdit" hc-btn type="warning" @click="tableEditSave">保存</el-button>
|
|
|
|
|
|
+ <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>
|
|
<el-button v-else hc-btn type="primary" @click="tableEditClick">编辑</el-button>
|
|
</template>
|
|
</template>
|
|
<hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" :is-index="false">
|
|
<hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" :is-index="false">
|
|
- <template #key6="{ row }">
|
|
|
|
- <hc-table-input v-if="isTableEdit" v-model="row.key6" />
|
|
|
|
- <span v-else>{{ row.key6 }}</span>
|
|
|
|
|
|
+ <template #one="{ row }">
|
|
|
|
+ <hc-table-input v-if="isTableEdit" v-model="row.one" />
|
|
|
|
+ <span v-else>{{ row.one }}</span>
|
|
</template>
|
|
</template>
|
|
- <template #key7="{ row }">
|
|
|
|
- <hc-table-input v-if="isTableEdit" v-model="row.key7" />
|
|
|
|
- <span v-else>{{ row.key7 }}</span>
|
|
|
|
|
|
+ <template #two="{ row }">
|
|
|
|
+ <hc-table-input v-if="isTableEdit" v-model="row.two" />
|
|
|
|
+ <span v-else>{{ row.two }}</span>
|
|
</template>
|
|
</template>
|
|
- <template #key8="{ row }">
|
|
|
|
- <hc-table-input v-if="isTableEdit" v-model="row.key8" />
|
|
|
|
- <span v-else>{{ row.key8 }}</span>
|
|
|
|
|
|
+ <template #three="{ row }">
|
|
|
|
+ <hc-table-input v-if="isTableEdit" v-model="row.three" />
|
|
|
|
+ <span v-else>{{ row.three }}</span>
|
|
</template>
|
|
</template>
|
|
- <template #key9="{ row }">
|
|
|
|
- <hc-table-input v-if="isTableEdit" v-model="row.key9" disabled />
|
|
|
|
- <span v-else>{{ row.key9 }}</span>
|
|
|
|
|
|
+ <template #four="{ row }">
|
|
|
|
+ <hc-table-input v-if="isTableEdit" v-model="row.four" disabled />
|
|
|
|
+ <span v-else>{{ row.four }}</span>
|
|
</template>
|
|
</template>
|
|
- <template #key10="{ row }">
|
|
|
|
- <hc-table-input v-if="isTableEdit" v-model="row.key10" />
|
|
|
|
- <span v-else>{{ row.key10 }}</span>
|
|
|
|
|
|
+ <template #five="{ row }">
|
|
|
|
+ <hc-table-input v-if="isTableEdit" v-model="row.five" />
|
|
|
|
+ <span v-else>{{ row.five }}</span>
|
|
</template>
|
|
</template>
|
|
- <template #key11="{ row }">
|
|
|
|
- <hc-table-input v-if="isTableEdit" v-model="row.key11" />
|
|
|
|
- <span v-else>{{ row.key11 }}</span>
|
|
|
|
|
|
+ <template #six="{ row }">
|
|
|
|
+ <hc-table-input v-if="isTableEdit" v-model="row.six" />
|
|
|
|
+ <span v-else>{{ row.six }}</span>
|
|
</template>
|
|
</template>
|
|
- <template #key12="{ row }">
|
|
|
|
- <hc-table-input v-if="isTableEdit" v-model="row.key12" />
|
|
|
|
- <span v-else>{{ row.key12 }}</span>
|
|
|
|
|
|
+ <template #seven="{ row }">
|
|
|
|
+ <hc-table-input v-if="isTableEdit" v-model="row.seven" />
|
|
|
|
+ <span v-else>{{ row.seven }}</span>
|
|
</template>
|
|
</template>
|
|
- <template #key13="{ row }">
|
|
|
|
- <hc-table-input v-if="isTableEdit" v-model="row.key13" />
|
|
|
|
- <span v-else>{{ row.key13 }}</span>
|
|
|
|
|
|
+ <template #eight="{ row }">
|
|
|
|
+ <hc-table-input v-if="isTableEdit" v-model="row.eight" />
|
|
|
|
+ <span v-else>{{ row.eight }}</span>
|
|
</template>
|
|
</template>
|
|
- <template #key14="{ row }">
|
|
|
|
- <hc-table-input v-if="isTableEdit" v-model="row.key14" />
|
|
|
|
- <span v-else>{{ row.key14 }}</span>
|
|
|
|
|
|
+ <template #nine="{ row }">
|
|
|
|
+ <hc-table-input v-if="isTableEdit" v-model="row.nine" />
|
|
|
|
+ <span v-else>{{ row.nine }}</span>
|
|
</template>
|
|
</template>
|
|
- <template #key15="{ row }">
|
|
|
|
- <hc-table-input v-if="isTableEdit" v-model="row.key15" />
|
|
|
|
- <span v-else>{{ row.key15 }}</span>
|
|
|
|
|
|
+ <template #ten="{ row }">
|
|
|
|
+ <hc-table-input v-if="isTableEdit" v-model="row.ten" />
|
|
|
|
+ <span v-else>{{ row.ten }}</span>
|
|
</template>
|
|
</template>
|
|
- <template #key16="{ row }">
|
|
|
|
- <hc-table-input v-if="isTableEdit" v-model="row.key16" />
|
|
|
|
- <span v-else>{{ row.key16 }}</span>
|
|
|
|
|
|
+ <template #eleven="{ row }">
|
|
|
|
+ <hc-table-input v-if="isTableEdit" v-model="row.eleven" />
|
|
|
|
+ <span v-else>{{ row.eleven }}</span>
|
|
</template>
|
|
</template>
|
|
- <template #key17="{ row }">
|
|
|
|
- <hc-table-input v-if="isTableEdit" v-model="row.key17" />
|
|
|
|
- <span v-else>{{ row.key17 }}</span>
|
|
|
|
|
|
+ <template #twelve="{ row }">
|
|
|
|
+ <hc-table-input v-if="isTableEdit" v-model="row.twelve" />
|
|
|
|
+ <span v-else>{{ row.twelve }}</span>
|
|
</template>
|
|
</template>
|
|
</hc-table>
|
|
</hc-table>
|
|
- <template #action>
|
|
|
|
- <hc-pages :pages="searchForm" @change="pageChange" />
|
|
|
|
- </template>
|
|
|
|
</hc-card>
|
|
</hc-card>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -89,54 +84,56 @@ defineOptions({
|
|
onActivated(() => {
|
|
onActivated(() => {
|
|
projectId.value = store.getProjectId
|
|
projectId.value = store.getProjectId
|
|
contractId.value = store.getContractId
|
|
contractId.value = store.getContractId
|
|
|
|
+ getYearDatas()
|
|
getTableData()
|
|
getTableData()
|
|
})
|
|
})
|
|
|
|
|
|
//搜索表单
|
|
//搜索表单
|
|
-const searchForm = ref({ current: 1, size: 20, total: 0 })
|
|
|
|
|
|
+const formPeriodId = ref('')
|
|
|
|
|
|
-//分页
|
|
|
|
-const pageChange = ({ current, size }) => {
|
|
|
|
- searchForm.value.current = current
|
|
|
|
- searchForm.value.size = size
|
|
|
|
- getTableData()
|
|
|
|
|
|
+//获取年份
|
|
|
|
+const yearDatas = ref([])
|
|
|
|
+const getYearDatas = async () => {
|
|
|
|
+ const { data } = await mainApi.periodPage({
|
|
|
|
+ projectId: projectId.value,
|
|
|
|
+ contractId: contractId.value,
|
|
|
|
+ })
|
|
|
|
+ yearDatas.value = getArrValue(data)
|
|
}
|
|
}
|
|
|
|
|
|
//表格数据
|
|
//表格数据
|
|
-const tableData = ref([
|
|
|
|
- { key1:'xxxx', key2: '路基工程', key3: '378920987.26', key4: '0', key5:'378920987.26' },
|
|
|
|
-])
|
|
|
|
|
|
+const tableData = ref([])
|
|
const tableColumn = ref([
|
|
const tableColumn = ref([
|
|
- { key: 'key1', name: '清单编号', width: 120, align: 'center' },
|
|
|
|
- { key: 'key2', name: '清单名称', width: 160, align: 'center' },
|
|
|
|
- { key: 'key3', name: '合同金额', width: 140, align: 'center' },
|
|
|
|
- { key: 'key4', name: '变更金额', width: 140, align: 'center' },
|
|
|
|
- { key: 'key5', name: '变更后金额', width: 140, align: 'center' },
|
|
|
|
- { key: 'key6', name: '1月', width: 140, align: 'center' },
|
|
|
|
- { key: 'key7', name: '2月', width: 140, align: 'center' },
|
|
|
|
- { key: 'key8', name: '3月', width: 140, align: 'center' },
|
|
|
|
- { key: 'key9', name: '4月', width: 140, align: 'center' },
|
|
|
|
- { key: 'key10', name: '5月', width: 140, align: 'center' },
|
|
|
|
- { key: 'key11', name: '6月', width: 140, align: 'center' },
|
|
|
|
- { key: 'key12', name: '7月', width: 140, align: 'center' },
|
|
|
|
- { key: 'key13', name: '8月', width: 140, align: 'center' },
|
|
|
|
- { key: 'key14', name: '9月', width: 140, align: 'center' },
|
|
|
|
- { key: 'key15', name: '10月', width: 140, align: 'center' },
|
|
|
|
- { key: 'key16', name: '11月', width: 140, align: 'center' },
|
|
|
|
- { key: 'key17', name: '12月', width: 140, align: 'center' },
|
|
|
|
|
|
+ { key: 'formNumber', name: '清单编号', width: 120, align: 'center' },
|
|
|
|
+ { key: 'formName', name: '清单名称', width: 160, 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: 140, align: 'center' },
|
|
|
|
+ { key: 'two', name: '2月', width: 140, align: 'center' },
|
|
|
|
+ { key: 'three', name: '3月', width: 140, align: 'center' },
|
|
|
|
+ { key: 'four', name: '4月', width: 140, align: 'center' },
|
|
|
|
+ { key: 'five', name: '5月', width: 140, align: 'center' },
|
|
|
|
+ { key: 'six', name: '6月', width: 140, align: 'center' },
|
|
|
|
+ { key: 'seven', name: '7月', width: 140, align: 'center' },
|
|
|
|
+ { key: 'eight', name: '8月', width: 140, align: 'center' },
|
|
|
|
+ { key: 'nine', name: '9月', width: 140, align: 'center' },
|
|
|
|
+ { key: 'ten', name: '10月', width: 140, align: 'center' },
|
|
|
|
+ { key: 'eleven', name: '11月', width: 140, align: 'center' },
|
|
|
|
+ { key: 'twelve', name: '12月', width: 140, align: 'center' },
|
|
])
|
|
])
|
|
|
|
|
|
//获取表格数据
|
|
//获取表格数据
|
|
const tableLoading = ref(false)
|
|
const tableLoading = ref(false)
|
|
const getTableData = async () => {
|
|
const getTableData = async () => {
|
|
- /*tableLoading.value = true
|
|
|
|
- const { data } = await mainApi.getPage({
|
|
|
|
- ...searchForm.value,
|
|
|
|
|
|
+ tableLoading.value = true
|
|
|
|
+ const { data } = await mainApi.getFormPlan({
|
|
projectId: projectId.value,
|
|
projectId: projectId.value,
|
|
|
|
+ contractId: contractId.value,
|
|
|
|
+ formPeriodId: formPeriodId.value,
|
|
})
|
|
})
|
|
tableLoading.value = false
|
|
tableLoading.value = false
|
|
- tableData.value = getArrValue(data?.records)
|
|
|
|
- searchForm.value.total = data['total'] || 0*/
|
|
|
|
|
|
+ tableData.value = getArrValue(data)
|
|
}
|
|
}
|
|
|
|
|
|
//编辑模式
|
|
//编辑模式
|
|
@@ -146,8 +143,22 @@ const tableEditClick = () => {
|
|
}
|
|
}
|
|
|
|
|
|
//保存
|
|
//保存
|
|
-const tableEditSave = () => {
|
|
|
|
- isTableEdit.value = false
|
|
|
|
|
|
+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
|
|
|
|
+ getTableData().then()
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|