添加营销系统模块

This commit is contained in:
hedekun
2018-11-08 08:39:42 +08:00
commit f7eb22e5bb
181 changed files with 35426 additions and 0 deletions

View File

@@ -0,0 +1,327 @@
<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>