<template>
|
<div class="app-container">
|
<el-container>
|
<el-header class="header-title">项目名称：{{ planInfoData.projectName }} ({{planInfoData.planTime}} {{ planInfoData.planTimeFlag === 0 ? '月度计划' : planInfoData.planTimeFlag === 1 ? '季度计划' : '年度计划' }})</el-header>
|
<h4 style="text-align: center">项目代码：{{ planInfoData.projectCode }}</h4>
|
<el-main>
|
<el-card shadow="hover">
|
<el-row :gutter="20">
|
<el-col :span="24" class="mb-4">
|
<el-button
|
type="text"
|
size="medium"
|
icon="el-icon-plus"
|
@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="medium"
|
style="width: 130px"
|
value-format="yyyy-MM-dd HH:mm:ss"/>
|
</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="medium" style="width: 130px" value-format="yyyy-MM-dd HH:mm:ss"/>
|
</template>
|
</el-table-column>
|
<el-table-column :label="planInfoData.planTimeFlag === 0 ? '月度' : planInfoData.planTimeFlag === 1 ? '季度' : '年度' " width="100" align="center">
|
<template #default="scope">
|
<span>{{ planInfoData.planTime }}{{ planInfoData.planTimeFlag === 0 ? '月度' : planInfoData.planTimeFlag === 1 ? '季度' : '年度' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column fixed="right" label="操作" align="center">
|
<template #default="scope">
|
<el-button
|
size="medium"
|
type="text"
|
icon="el-icon-check"
|
@click="handleSave(scope.$index)">保存</el-button>
|
<el-button
|
size="medium"
|
type="text"
|
icon="el-icon-refresh-left"
|
@click="handleReset(scope.$index)">重置</el-button>
|
<el-button
|
size="medium"
|
type="text"
|
icon="el-icon-delete"
|
@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="text"
|
size="medium"
|
icon="el-icon-upload2"
|
@click="handleSubmit">上报</el-button>
|
<el-button
|
type="text"
|
size="medium"
|
icon="el-icon-refresh-left"
|
@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,
|
// 接收传递过来的项目计划数据
|
projectInfoData: {},
|
planInfoData: {},
|
tableData: [
|
{
|
title: '',
|
startTime: '',
|
endTime: ''
|
},
|
],
|
// 投资金额
|
actualInvest: '',
|
// 新增参数
|
addData: {
|
projectPlanRecordId: '',
|
actualInvest: '',
|
addList:[]
|
}
|
}
|
},
|
created() {
|
this.getProjectInfoData();
|
},
|
methods: {
|
// 页面加载
|
search() {
|
this.getPlanInfoData(this.planInfoData.id);
|
},
|
// 获取传递过来的项目计划详情
|
getProjectInfoData() {
|
// 从查询参数中获取数据
|
this.projectInfoData = JSON.parse(this.$route.query.projectInfoData)
|
this.planInfoData = JSON.parse(this.$route.query.data)
|
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.planInfoData.id,
|
actualInvest: this.actualInvest,
|
addList: validList
|
}
|
addPlanInfo(this.addData).then(response => {
|
this.handlePlanRecord()
|
this.$message.success('上报成功');
|
})
|
},
|
// 重置当前行数据
|
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.projectInfoData.id;
|
savePlanInfo(this.tableData[index], this.planInfoData.id).then(response => {
|
this.$message.success('保存成功');
|
});
|
},
|
/** 返回项目计划记录 */
|
handlePlanRecord() {
|
this.$router.push({
|
path: '/projectManage/planRecord',
|
query: {
|
data: JSON.stringify(this.projectInfoData)
|
}
|
})
|
}
|
},
|
};
|
</script>
|
|
<style scoped>
|
.header-title {
|
font-size: 24px; /* 根据需要调整字体大小 */
|
text-align: center; /* 居中对齐 */
|
line-height: 64px; /* 如果需要与 header 高度对齐 */
|
}
|
</style>
|
