<template>
|
<div class="app-container">
|
<el-container>
|
<el-header v-show="planRecordData && planRecordData.projectName" class="header-title">项目名称：{{ planRecordData.projectName }} {{ planRecordData.planTimeFlag === 0 ? '(月度计划)' : planRecordData.planTimeFlag === 1 ? '(季度计划)' : '(年度计划)' }}</el-header>
|
<h4 v-show="planRecordData && planRecordData.projectCode" style="text-align: center">项目代码：{{ planRecordData.projectCode }}</h4>
|
<el-main>
|
<el-card shadow="hover">
|
<el-row :gutter="20">
|
<el-col :span="24" class="mb-4">
|
<el-button type="primary" size="small" @click="handleAdd" style="float: right; margin-bottom: 10px">新增</el-button>
|
<el-table :data="tableData" border stripe style="width: 100%; margin-bottom: 20px">
|
<el-table-column prop="index" label="序号" width="50" align="center">
|
<template #default="scope">
|
{{ scope.$index + 1 }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="taskName" label="事项名称" width="500" align="center">
|
<template #default="scope">
|
<el-input type="textarea" v-model="scope.row.title" placeholder="请输入" rows="3" />
|
</template>
|
</el-table-column>
|
<el-table-column prop="startTime" label="计划开始时间" width="160" align="center">
|
<template #default="scope">
|
<el-date-picker v-model="scope.row.startTime" type="date" placeholder="选择日期" size="small" style="width: 130px" />
|
</template>
|
</el-table-column>
|
<el-table-column prop="endTime" label="计划完成时间" width="160" align="center">
|
<template #default="scope">
|
<el-date-picker v-model="scope.row.endTime" type="date" placeholder="选择日期" size="small" style="width: 130px" />
|
</template>
|
</el-table-column>
|
<el-table-column :label="planRecordData.planTimeFlag === 0 ? '月度' : planRecordData.planTimeFlag === 1 ? '季度' : '年度' " width="100" align="center">
|
<template #default="scope">
|
<span>{{ planRecordData.planTime }}{{ planRecordData.planTimeFlag === 0 ? '月度' : planRecordData.planTimeFlag === 1 ? '季度' : '年度' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column fixed="right" label="操作" align="center">
|
<template #default="scope">
|
<el-button size="small" @click="handleSave(scope.$index)">保存</el-button>
|
<el-button size="small" type="danger" @click="handleReset(scope.$index)">重置</el-button>
|
<el-button size="small" type="danger" @click="handleDelete(scope.$index)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div style="display: flex; align-items: center;">
|
<h1 style="margin: 0;">
|
截止本计划进度完成投资（万元）：
|
</h1>
|
<el-input
|
placeholder="请输入投资金额"
|
style="flex: 1"
|
v-model="actualInvest"
|
clearable
|
:type="number"
|
@input="handleInput">
|
</el-input>
|
</div>
|
<div style="display: flex; justify-content: center; align-items: center; margin-top: 20px">
|
<el-button type="primary" size="small" @click="handleSubmit">上报</el-button>
|
<el-button type="primary" size="small" @click="handleResetAll">重置</el-button>
|
</div>
|
</el-col>
|
</el-row>
|
</el-card>
|
</el-main>
|
</el-container>
|
</div>
|
</template>
|
|
<script>
|
import { getPlanInfoData, addPlanInfo, savePlanInfo } from "@/api/projectPlan/index";
|
|
export default {
|
name: "planInfo",
|
data() {
|
return {
|
loading: true,
|
// 接收传递过来的项目计划数据
|
planRecordData: {},
|
planInfoData: {},
|
tableData: [
|
{
|
title: '',
|
startTime: '',
|
endTime: ''
|
},
|
],
|
// 投资金额
|
actualInvest: '',
|
// 新增参数
|
addData: {
|
projectPlanRecordId: '',
|
actualInvest: '',
|
addList:[]
|
}
|
}
|
},
|
|
methods: {
|
// 页面加载
|
search() {
|
this.getPlanInfoData(this.planRecordData.id);
|
},
|
// 获取传递过来的项目计划详情
|
getPlanRecordData() {
|
// 从查询参数中获取数据
|
if (this.$route.query.data) {
|
this.planRecordData = JSON.parse(this.$route.query.data)
|
}
|
this.planInfoData = this.$route.query.planInfoData
|
this.search();
|
},
|
// 获取项目计划项
|
getPlanInfoData(id) {
|
getPlanInfoData(id).then(response => {
|
this.actualInvest = response.data.actualInvest;
|
if (response.data.list.length === 0){
|
this.tableData = [{ title: '', startTime: '', endTime: '' }];
|
}else {
|
this.tableData = response.data.list;
|
}
|
});
|
},
|
// 新增一行空白数据
|
handleAdd() {
|
this.tableData.push({ title: '', startTime: '', endTime: '' });
|
},
|
// 删除一行数据
|
handleDelete(index) {
|
this.tableData.splice(index, 1);
|
},
|
// 上报数据
|
handleSubmit() {
|
// 遍历tableData，获得值不为空字符串的行
|
const validList = this.tableData.filter(item => item.title !== '' && item.startTime !== '' && item.endTime !== '');
|
this.addData = {
|
projectPlanRecordId: this.planRecordData.id,
|
actualInvest: this.actualInvest,
|
addList: validList
|
}
|
addPlanInfo(this.addData).then(response => {
|
this.handlePlanRecord(this.planInfoData)
|
})
|
},
|
// 重置当前行数据
|
handleReset(index) {
|
this.tableData[index].title = '';
|
this.tableData[index].startTime = '';
|
this.tableData[index].endTime = '';
|
},
|
// 重置所有数据
|
handleResetAll() {
|
this.tableData = this.tableData.map(item => {
|
item.title = '';
|
item.startTime = '';
|
item.endTime = '';
|
return item;
|
});
|
this.actualInvest = '';
|
},
|
// 保存当前行数据
|
handleSave(index) {
|
this.tableData[index].projectPlanRecordId = this.planRecordData.id;
|
savePlanInfo(this.tableData[index]).then(response => {
|
this.search();
|
this.$message.success('保存成功');
|
});
|
},
|
/** 返回项目计划记录 */
|
handlePlanRecord(planInfoData) {
|
this.$router.push({
|
path: '/projectPlan/planRecord',
|
query: {
|
data: JSON.stringify(planInfoData)
|
}
|
})
|
}
|
},
|
created() {
|
this.getPlanRecordData();
|
},
|
};
|
</script>
|
|
<style scoped>
|
.header-title {
|
font-size: 24px; /* 根据需要调整字体大小 */
|
text-align: center; /* 居中对齐 */
|
line-height: 64px; /* 如果需要与 header 高度对齐 */
|
}
|
</style>
|
