328 lines
11 KiB
Vue
328 lines
11 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<div class="table">
|
||
<div class="name">
|
||
<span>项目名称</span>
|
||
<el-select v-model="projectValue" placeholder="请选择项目名称" filterable>
|
||
<el-option
|
||
v-for="item in project"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"/>
|
||
</el-select>
|
||
<el-button v-if="isEdit" type="primary" class="el-icon-edit" style="margin-left: 20px;" @click="edit">修改</el-button>
|
||
<el-button v-else type="primary" class="el-icon-circle-check-outline" style="margin-left: 20px;" @click="save">保存</el-button>
|
||
</div>
|
||
|
||
<table class="tg">
|
||
<tr>
|
||
<td colspan="8" class="title">一、项目基本情况</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="2">项目名称</td>
|
||
<td colspan="2">{{ projectName }}</td>
|
||
<td colspan="2">项目编号</td>
|
||
<td colspan="2">
|
||
<el-input size="small" placeholder="请输入内容" v-model="tableData.项目编号" v-if="!isEdit">
|
||
</el-input>
|
||
<span v-else>{{ tableData.项目编号 }}</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="2">制作人</td>
|
||
<td colspan="2">
|
||
<el-input size="small" placeholder="请输入内容" v-model="tableData.制作人" v-if="!isEdit">
|
||
</el-input>
|
||
<span v-else>{{ tableData.制作人 }}</span>
|
||
</td>
|
||
<td colspan="2">审核人</td>
|
||
<td colspan="2">
|
||
<el-input size="small" placeholder="请输入内容" v-model="tableData.审核人" v-if="!isEdit">
|
||
</el-input>
|
||
<span v-else>{{ tableData.审核人 }}</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="2">项目经理</td>
|
||
<td colspan="2">
|
||
<el-input size="small" placeholder="请输入内容" v-model="tableData.项目经理" v-if="!isEdit">
|
||
</el-input>
|
||
<span v-else>{{ tableData.项目经理 }}</span>
|
||
</td>
|
||
<td colspan="2">制作品日期</td>
|
||
<td colspan="2">
|
||
<el-date-picker size="small" type="date" placeholder="请选择日期" v-model="tableData.制作日期" v-if="!isEdit">
|
||
</el-date-picker>
|
||
<span v-else>{{ tableData.制作日期 | formatTime }}</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="8" class="title">二、项目完成情况总结</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="8">1、时间总结</td>
|
||
</tr>
|
||
<tr>
|
||
<td>开始时间</td>
|
||
<td>
|
||
<el-date-picker size="small" type="date" placeholder="请选择日期" v-model="tableData.开始时间" v-if="!isEdit">
|
||
</el-date-picker>
|
||
<span v-else>{{ tableData.开始时间 | formatTime }}</span>
|
||
</td>
|
||
<td colspan="2">计划完成日期</td>
|
||
<td>
|
||
<el-date-picker size="small" type="date" placeholder="请选择日期" v-model="tableData.计划完成日期" v-if="!isEdit">
|
||
</el-date-picker>
|
||
<span v-else>{{ tableData.计划完成日期 | formatTime }}</span>
|
||
</td>
|
||
<td colspan="2">实际完成日期</td>
|
||
<td>
|
||
<el-date-picker size="small" type="date" placeholder="请选择日期" v-model="tableData.实际完成日期" v-if="!isEdit">
|
||
</el-date-picker>
|
||
<span v-else>{{ tableData.实际完成日期 | formatTime }}</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="8">时间（差异）分析</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="8">
|
||
<el-input size="small" placeholder="请输入内容" v-model="tableData.时间分析" v-if="!isEdit">
|
||
</el-input>
|
||
<span v-else>{{ tableData.时间分析 }}</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="8">2、成本总结</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="2">计划费用</td>
|
||
<td colspan="2">
|
||
<el-input size="small" placeholder="请输入内容" v-model="tableData.计划费用" v-if="!isEdit">
|
||
</el-input>
|
||
<span v-else>{{ tableData.计划费用 }}</span>
|
||
</td>
|
||
<td colspan="2">实际费用</td>
|
||
<td colspan="2">
|
||
<el-input size="small" placeholder="请输入内容" v-model="tableData.实际费用" v-if="!isEdit">
|
||
</el-input>
|
||
<span v-else>{{ tableData.实际费用 }}</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="8">成本（差异）分析 </td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="8">
|
||
<el-input size="small" placeholder="请输入内容" v-model="tableData.成本分析" v-if="!isEdit">
|
||
</el-input>
|
||
<span v-else>{{ tableData.成本分析 }}</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="8">3、交付结果总结</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="8">计划交付结果</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="8">
|
||
<el-input size="small" placeholder="请输入内容" v-model="tableData.计划交付结果" v-if="!isEdit">
|
||
</el-input>
|
||
<span v-else>{{ tableData.计划交付结果 }}</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="8">实际交付结果</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="8">
|
||
<el-input size="small" placeholder="请输入内容" v-model="tableData.实际交付结果" v-if="!isEdit">
|
||
</el-input>
|
||
<span v-else>{{ tableData.实际交付结果 }}</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="8">未交付结果</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="8">
|
||
<el-input size="small" placeholder="请输入内容" v-model="tableData.未交付结果" v-if="!isEdit">
|
||
</el-input>
|
||
<span v-else>{{ tableData.未交付结果 }}</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="8">交付结果（差异）分析</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="8">
|
||
<el-input size="small" placeholder="请输入内容" v-model="tableData.交付结果分析" v-if="!isEdit">
|
||
</el-input>
|
||
<span v-else>{{ tableData.交付结果分析 }}</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="8" class="title">三、项目经验、教训总结</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="8">
|
||
<el-input class="textarea" type="textarea" size="small" placeholder="请输入内容" v-model="tableData.项目经验教训总结" v-if="!isEdit" style="min-height: 160px">
|
||
</el-input>
|
||
<div v-html="summary"></div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="4">签字</td>
|
||
<td colspan="4">日期</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="2">审核人</td>
|
||
<td colspan="2">
|
||
<el-input size="small" placeholder="请输入内容" v-model="tableData.审核人" v-if="!isEdit">
|
||
</el-input>
|
||
<span v-else>{{ tableData.审核人 }}</span>
|
||
</td>
|
||
<td colspan="4">
|
||
<el-date-picker type="date" size="small" placeholder="请输入内容" v-model="tableData.审核人签字日期" v-if="!isEdit">
|
||
</el-date-picker>
|
||
<span v-else>{{ tableData.审核人签字日期 | formatTime }}</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="2">项目经理</td>
|
||
<td colspan="2">
|
||
<el-input size="small" placeholder="请输入内容" v-model="tableData.项目经理" v-if="!isEdit">
|
||
</el-input>
|
||
<span v-else>{{ tableData.项目经理 }}</span>
|
||
</td>
|
||
<td colspan="4">
|
||
<el-date-picker size="small" type="date" placeholder="请选择日期" v-model="tableData.项目经理签字日期" v-if="!isEdit">
|
||
</el-date-picker>
|
||
<span v-else>{{ tableData.项目经理签字日期 | formatTime }}</span>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { projectSelect, getTableData, editTableData } from '../../api/ProjectManagement/summarize'
|
||
export default {
|
||
name: 'Summarize',
|
||
data() {
|
||
return {
|
||
projectValue: '',
|
||
project: [],
|
||
isEdit: true,
|
||
tableData: {}
|
||
}
|
||
},
|
||
watch: {
|
||
project(val) {
|
||
if(val.length > 0){
|
||
this.projectValue = val[0].value
|
||
}
|
||
},
|
||
projectValue(val) {
|
||
this.getData(val)
|
||
}
|
||
},
|
||
computed: {
|
||
projectName() {
|
||
for (let i = 0; i < this.project.length; i++) {
|
||
if (this.project[i].value === this.projectValue) {
|
||
return this.project[i].label
|
||
}
|
||
}
|
||
},
|
||
summary() {
|
||
if(this.tableData.项目经验教训总结) {
|
||
return this.tableData.项目经验教训总结.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, ' ')
|
||
} else {
|
||
return ''
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.fetchData()
|
||
},
|
||
methods: {
|
||
fetchData() {
|
||
this.getSelect(projectSelect, ['项目名称', '项目流水号'], 'project')
|
||
},
|
||
async getData(val) {
|
||
this.tableData = {}
|
||
const response = await getTableData(val)
|
||
this.tableData = response.data[0]
|
||
},
|
||
edit() {
|
||
this.isEdit = false
|
||
this.getData(this.projectValue)
|
||
},
|
||
async save() {
|
||
this.isEdit = true
|
||
console.log(this.tableData.项目经验教训总结)
|
||
const response = await editTableData(this.tableData.项目总结流水号, this.projectValue, this.projectName, this.tableData.项目编号, this.tableData.制作人, this.tableData.审核人, this.tableData.项目经理, this.tableData.制作日期, this.tableData.开始时间, this.tableData.计划完成日期, this.tableData.实际完成日期, this.tableData.时间分析, this.tableData.计划费用, this.tableData.实际费用, this.tableData.成本分析, this.tableData.计划交付结果, this.tableData.实际交付结果, this.tableData.未交付结果, this.tableData.交付结果分析, this.tableData.项目经验教训总结, this.tableData.项目经理签字日期, this.tableData.审核人签字日期)
|
||
if (response.data[0].result === '0') this.$message.error(`编辑失败`)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.tg{
|
||
border-collapse:collapse;
|
||
border-spacing:0;
|
||
}
|
||
.tg td{
|
||
width: 12%;
|
||
font-size:16px;
|
||
padding:12px 10px;
|
||
border-style:solid;
|
||
border-width:1px;
|
||
overflow:hidden;
|
||
word-break:normal;
|
||
color: #606266;
|
||
border-color:#ebeef5;
|
||
}
|
||
.tg th{
|
||
font-size:14px;
|
||
font-weight:normal;
|
||
padding:10px 5px;
|
||
border-style:solid;
|
||
border-width:1px;
|
||
overflow:hidden;
|
||
word-break:normal;
|
||
border-color:black;
|
||
}
|
||
.tg .title{
|
||
font-weight: 500;
|
||
font-size: 24px;
|
||
color: #909399;
|
||
}
|
||
.table table{
|
||
width: 1080px;
|
||
margin: 0 auto;
|
||
}
|
||
.main {
|
||
with:1080px;
|
||
font-size: 30px;
|
||
font-weight: bolder;
|
||
}
|
||
.name {
|
||
width: 1080px;
|
||
margin: 10px auto;
|
||
}
|
||
.name span {
|
||
font-size: 22px;
|
||
margin: 20px;
|
||
}
|
||
</style>
|
||
<style>
|
||
.textarea .el-textarea__inner{
|
||
min-height: 150px!important;
|
||
}
|
||
</style>
|