501 lines
25 KiB
Vue
501 lines
25 KiB
Vue
<template>
|
||
<div class="panoramaPlan">
|
||
<div class="header-box">
|
||
<div class="search-item">
|
||
<div class="search-label">
|
||
<!-- 节点名称： -->
|
||
{{$t('message.projectInfo.nodeName')+':'}}
|
||
</div>
|
||
<el-input
|
||
v-model="nodeName"
|
||
:placeholder="$t('message.projectInfo.placeholder')"
|
||
class=""
|
||
></el-input>
|
||
</div>
|
||
<el-button type="primary" @click="loadData">
|
||
<!-- 查询 -->
|
||
{{$t('message.projectInfo.query')}}
|
||
</el-button>
|
||
<el-button type="primary" @click="addForm">
|
||
{{$t('message.projectInfo.add')}}
|
||
<!-- 新增 -->
|
||
</el-button>
|
||
</div>
|
||
<div class="table-box">
|
||
<el-table class="tables" :data="tableData">
|
||
<!-- 节点责任人编号 -->
|
||
<el-table-column prop="chargerId" :label="$t('message.projectInfo.nodeOwnerID')"></el-table-column>
|
||
<!-- 节点责任人 -->
|
||
<el-table-column prop="chargerName" :label="$t('message.projectInfo.nodeResponsiblePerson')"></el-table-column>
|
||
<!-- <el-table-column prop="deliverable" label="成果物明细"></el-table-column>-->
|
||
<!-- <el-table-column label="节点失效标记">-->
|
||
<!-- <template slot-scope="scope">-->
|
||
<!-- {{scope.row.isDeleted ? '失效':'有效'}}-->
|
||
<!-- </template>-->
|
||
<!-- </el-table-column>-->
|
||
<!-- <el-table-column label="是否退回">-->
|
||
<!-- <template slot-scope="scope">-->
|
||
<!-- {{scope.row.isSendBack ? '是':'否'}}-->
|
||
<!-- </template>-->
|
||
<!-- </el-table-column>-->
|
||
<!-- 节点级别 -->
|
||
<el-table-column prop="levelId" :label="$t('message.projectInfo.nodeLevel')"></el-table-column>
|
||
<!-- 节点等级名称 -->
|
||
<el-table-column prop="levelName" :label="$t('message.projectInfo.nodeLevelName')"></el-table-column>
|
||
<!-- 状态 -->
|
||
<el-table-column width="150" :label="$t('message.projectInfo.status')">
|
||
<template slot-scope="scope">
|
||
{{options[scope.row.status - 2].label}}
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 节点编号 -->
|
||
<el-table-column prop="nodeCode" :label="$t('message.projectInfo.nodeNumber')"></el-table-column>
|
||
<!-- 节点名称 -->
|
||
<el-table-column prop="nodeName" :label="$t('message.projectInfo.nodeName')"></el-table-column>
|
||
<!-- 职能条线 -->
|
||
<el-table-column prop="phaseName" :label="$t('message.projectInfo.theFunctionLine')"></el-table-column>
|
||
<!-- 计划完成时间 -->
|
||
<el-table-column prop="plannedFinishDate" :label="$t('message.projectInfo.planCompleteTime')"></el-table-column>
|
||
<!-- 实际完成时间 -->
|
||
<el-table-column prop="actualFinishDate" :label="$t('message.projectInfo.realCompleteTime')"></el-table-column>
|
||
<!-- 预计完成时间 -->
|
||
<el-table-column prop="predictFinishDate" :label="$t('message.projectInfo.predictCompleteTime')"></el-table-column>
|
||
<!-- 节点唯一标识 -->
|
||
<el-table-column prop="uniqueCode" :label="$t('message.projectInfo.nodeOnlyMark')"></el-table-column>
|
||
<!-- 版本ID -->
|
||
<el-table-column prop="versionId" :label="$t('message.projectInfo.visionID')"></el-table-column>
|
||
<!-- 操作 -->
|
||
<el-table-column :label="$t('message.projectInfo.operation')" width="220">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" icon="el-icon-tickets" @click="previewData(scope.row)">
|
||
<!-- 查看 -->
|
||
{{$t('message.projectInfo.look')}}
|
||
</el-button>
|
||
<el-button type="text" icon="el-icon-edit-outline" @click="editData(scope.row)">
|
||
<!-- 编辑 -->
|
||
{{$t('message.projectInfo.edit')}}
|
||
</el-button>
|
||
<el-button class="delete-btn" type="text" icon="el-icon-delete" @click="deleteData(scope.row)">
|
||
<!-- 删除 -->
|
||
{{$t('message.projectInfo.delete')}}
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
class="pagerBox"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="pageNo"
|
||
:page-sizes="$store.state.PAGESIZRS"
|
||
:page-size="pageSize"
|
||
layout="total, sizes, prev, pager, next"
|
||
:total="Number(total)"
|
||
background
|
||
></el-pagination>
|
||
</div>
|
||
<el-dialog
|
||
class="dialog"
|
||
:title="dialogTitle"
|
||
:modal-append-to-body="false"
|
||
:visible.sync="dialogVisible"
|
||
@close="closeDialog"
|
||
destroy-on-close
|
||
width="50%"
|
||
>
|
||
<div class="dialog-content">
|
||
<vue-scroll>
|
||
<el-form
|
||
ref="form"
|
||
:model="dialogdata"
|
||
:rules="rules"
|
||
label-width="130px"
|
||
size="medium"
|
||
class="dialogFormBox">
|
||
<el-form-item :label="$t('message.projectInfo.realCompleteTime')" prop="actualFinishDate">
|
||
<el-date-picker
|
||
v-model="dialogdata.actualFinishDate"
|
||
value-format="yyyy-MM-dd"
|
||
type="date"
|
||
:disabled="formType == 3"
|
||
:placeholder="$t('message.projectInfo.chooseDate')">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('message.projectInfo.planCompleteTime')" prop="plannedFinishDate" required>
|
||
<el-date-picker
|
||
v-model="dialogdata.plannedFinishDate"
|
||
value-format="yyyy-MM-dd"
|
||
type="date"
|
||
:placeholder="$t('message.projectInfo.chooseDate')"
|
||
:disabled="formType == 3">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('message.projectInfo.predictCompleteTime')" prop="predictFinishDate">
|
||
<el-date-picker
|
||
v-model="dialogdata.predictFinishDate"
|
||
value-format="yyyy-MM-dd"
|
||
type="date"
|
||
:disabled="formType == 3"
|
||
:placeholder="$t('message.projectInfo.chooseDate')">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('message.projectInfo.nodeOwnerID')" prop="chargerId" required>
|
||
<el-input
|
||
v-model="dialogdata.chargerId"
|
||
:disabled="formType == 3"
|
||
:placeholder="$t('message.projectInfo.placeholder')"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('message.projectInfo.nodeResponsiblePersonName')" prop="chargerName" required>
|
||
<el-input
|
||
v-model="dialogdata.chargerName"
|
||
:disabled="formType == 3"
|
||
:placeholder="$t('message.projectInfo.placeholder')"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="成果物明细" prop="deliverable" required>-->
|
||
<!-- <el-input-->
|
||
<!-- v-model="dialogdata.deliverable"-->
|
||
<!-- :disabled="formType == 3"-->
|
||
<!-- placeholder="请输入"-->
|
||
<!-- ></el-input>-->
|
||
<!-- </el-form-item>-->
|
||
<!-- <el-form-item label="节点失效标记" prop="isDeleted" required>-->
|
||
<!-- <el-radio-group v-model="dialogdata.isDeleted" :disabled="formType == 3" size="medium">-->
|
||
<!-- <el-radio :label="1">失效</el-radio>-->
|
||
<!-- <el-radio :label="0">有效</el-radio>-->
|
||
<!-- </el-radio-group>-->
|
||
<!-- </el-form-item>-->
|
||
<!-- <el-form-item label="是否退回" prop="isSendBack" required>-->
|
||
<!-- <el-radio-group v-model="dialogdata.isSendBack" :disabled="formType == 3" size="medium">-->
|
||
<!-- <el-radio :label="1">是</el-radio>-->
|
||
<!-- <el-radio :label="0">否</el-radio>-->
|
||
<!-- </el-radio-group>-->
|
||
<!-- </el-form-item>-->
|
||
<el-form-item :label="$t('message.projectInfo.nodeLevel')" prop="levelId" required>
|
||
<el-input
|
||
v-model="dialogdata.levelId"
|
||
:disabled="formType == 3"
|
||
:placeholder="$t('message.projectInfo.placeholder')"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('message.projectInfo.nodeLevelName')" prop="levelName" required>
|
||
<el-input
|
||
v-model="dialogdata.levelName"
|
||
:disabled="formType == 3"
|
||
:placeholder="$t('message.projectInfo.placeholder')"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 节点编码 -->
|
||
<el-form-item :label="$t('message.projectInfo.nodeCode')" prop="nodeCode" required>
|
||
<el-input
|
||
v-model="dialogdata.nodeCode"
|
||
:placeholder="$t('message.projectInfo.placeholder')"
|
||
:disabled="formType == 3"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('message.projectInfo.nodeName')" prop="nodeName" required>
|
||
<el-input
|
||
v-model="dialogdata.nodeName"
|
||
:placeholder="$t('message.projectInfo.placeholder')"
|
||
:disabled="formType == 3"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('message.projectInfo.theFunctionLine')" prop="phaseName" required>
|
||
<el-input
|
||
v-model="dialogdata.phaseName"
|
||
:placeholder="$t('message.projectInfo.placeholder')"
|
||
:disabled="formType == 3"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('message.projectInfo.status')" prop="status" required>
|
||
<!-- 请选择 -->
|
||
<el-select v-model="dialogdata.status" :disabled="formType == 3" :placeholder="$t('message.projectInfo.pleaseChoose')">
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('message.projectInfo.nodeOnlyMark')" prop="uniqueCode">
|
||
<el-input
|
||
v-model="dialogdata.uniqueCode"
|
||
:placeholder="$t('message.projectInfo.placeholder')"
|
||
:disabled="formType == 3"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('message.projectInfo.visionID')" prop="versionId" required>
|
||
<!-- 请输入 -->
|
||
<el-input
|
||
v-model="dialogdata.versionId"
|
||
:placeholder="$t('message.projectInfo.placeholder')"
|
||
:disabled="formType == 3"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</vue-scroll>
|
||
</div>
|
||
<div class="dialog-btn" v-if="formType != 3">
|
||
<el-button type="primary" @click="submitForm">
|
||
<!-- 确定 -->
|
||
{{$t('message.energyManage.material.confirm')}}
|
||
</el-button>
|
||
<el-button @click="closeDialog">
|
||
<!-- 取消 -->
|
||
{{$t('message.energyManage.material.cancel')}}
|
||
</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
addPanoramaNodePlan,
|
||
editPanoramaNodePlan,
|
||
deletePanoramaNodePlan,
|
||
queryPanoramaNodePlan,
|
||
queryByIdPanoramaNodePlan
|
||
} from "@/assets/js/api/projectSummary.js";
|
||
import {
|
||
addProgressNodeLibraryApi,
|
||
deleteProgressNodeLibraryApi,
|
||
editProgressNodeLibraryApi,
|
||
selectPageListApi,
|
||
queryByIdProgressNodeLibraryApi
|
||
} from "@/assets/js/api/NodeLibrary.js";
|
||
|
||
import moment from "moment";
|
||
export default {
|
||
data(){
|
||
return{
|
||
dialogTitle: /* '添加计划', */this.$t('message.projectInfo.addPlan'),
|
||
formType: 1, //1.新增 2.编辑 3.查看
|
||
nodeName: "",
|
||
tableData:[],
|
||
dialogVisible: false,
|
||
dialogdata:{
|
||
"actualFinishDate": "",//实际完成时间
|
||
"chargerId": "",//节点责任人编号
|
||
"chargerName": "",//节点责任人名称
|
||
// "createDate": "",//创建时间
|
||
// "deliverable": "",//成果物明细
|
||
// "isDeleted": "",//节点失效标记
|
||
// "isSendBack": "",//是否退回
|
||
"levelId": "",//节点级别
|
||
"levelName": "",//节点等级名称
|
||
"nodeCode": "",//节点编码
|
||
"nodeName": "",//节点名称
|
||
"phaseName": "",//职能条线
|
||
"plannedFinishDate": "",//计划完成时间
|
||
"predictFinishDate": "",//预计完成时间
|
||
"projectSn": "",//项目SN
|
||
"status": "",//状态2-已发布（进行中）,3-节点汇报审批中,4-计划审批中,6-归档（完成）
|
||
"uniqueCode": "",//节点唯一标识
|
||
"versionId": ""//版本ID
|
||
},
|
||
rules:{
|
||
chargerId: { required: true, message: this.$t('message.projectInfo.placeholder')+this.$t('message.projectInfo.nodeOwnerID')},
|
||
chargerName: { required: true, message: this.$t('message.projectInfo.placeholder')+this.$t('message.projectInfo.nodeResponsiblePerson')},
|
||
// deliverable: { required: true, message: '请输入成果物明细'},
|
||
// isDeleted: { required: true, message: '请选择节点失效标记'},
|
||
// isSendBack: { required: true, message: '请选择是否回退'},
|
||
levelId: { required: true, message: this.$t('message.projectInfo.placeholder')+this.$t('message.projectInfo.nodeLevel')},
|
||
levelName: { required: true, message:this.$t('message.projectInfo.placeholder')+this.$t('message.projectInfo.nodeLevelName')},
|
||
nodeCode: { required: true, message: this.$t('message.projectInfo.placeholder')+this.$t('message.projectInfo.nodeNumber')},
|
||
nodeName: { required: true, message: this.$t('message.projectInfo.placeholder')+this.$t('message.projectInfo.nodeName')},
|
||
phaseName: { required: true, message: this.$t('message.projectInfo.theFunctionLine')},
|
||
plannedFinishDate: {type: 'string', required: true, message: this.$t('message.projectInfo.pleaseChoose')+this.$t('message.projectInfo.planCompleteTime')},
|
||
status: { required: true, message: this.$t('message.projectInfo.pleaseChoose')+this.$t('message.projectInfo.status')},
|
||
uniqueCode: { required: true, message: this.$t('message.projectInfo.placeholder')+this.$t('message.projectInfo.nodeOnlyMark')},
|
||
versionId: { required: true, message: this.$t('message.projectInfo.placeholder')+this.$t('message.projectInfo.visionID')},
|
||
},
|
||
options:this.$t('message.projectInfo.nodeOptions'),
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
projectSn: ""
|
||
}
|
||
},
|
||
created(){
|
||
this.projectSn = this.$store.state.projectSn;
|
||
this.loadData()
|
||
},
|
||
methods:{
|
||
loadData(){
|
||
let data = {
|
||
nodeName: this.nodeName,
|
||
projectSn: this.projectSn,
|
||
pageNo: this.pageNo,
|
||
pageSize: this.pageSize,
|
||
}
|
||
selectPageListApi(data).then(res=>{
|
||
console.log(res);
|
||
if(res.code == 200){
|
||
this.tableData = res.result.records
|
||
this.total = res.result.total
|
||
}
|
||
})
|
||
},
|
||
addForm(){
|
||
this.dialogVisible = true
|
||
this.dialogTitle = /* '添加计划' */this.$t('message.projectInfo.addPlan'),
|
||
this.formType = 1
|
||
},
|
||
submitForm(){
|
||
this.$refs['form'].validate((valid) => {
|
||
console.log(valid)
|
||
if(valid){
|
||
let data = this.dialogdata
|
||
data.projectSn = this.projectSn
|
||
console.log(data)
|
||
if(this.formType == 1){
|
||
addProgressNodeLibraryApi(data).then(res=>{
|
||
console.log(res)
|
||
if(res.code == 200){
|
||
this.$message.success(this.$t('message.projectInfo.addSuccess')+'!')
|
||
this.closeDialog()
|
||
this.loadData()
|
||
}
|
||
})
|
||
} else if(this.formType == 2){
|
||
editProgressNodeLibraryApi(data).then(res=>{
|
||
console.log(res)
|
||
if(res.code == 200){
|
||
this.$message.success(this.$t('message.projectInfo.editSuccess')+'!')
|
||
this.closeDialog()
|
||
this.loadData()
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
closeDialog(){
|
||
this.dialogVisible = false
|
||
this.dialogdata = {}
|
||
this.dialogdata = {
|
||
"actualFinishDate": "",//实际完成时间
|
||
"chargerId": "",//节点责任人编号
|
||
"chargerName": "",//节点责任人名称
|
||
// "createDate": "",//创建时间
|
||
// "deliverable": "",//成果物明细
|
||
// "isDeleted": "",//节点失效标记
|
||
// "isSendBack": "",//是否退回
|
||
"levelId": "",//节点级别
|
||
"levelName": "",//节点等级名称
|
||
"nodeCode": "",//节点编码
|
||
"nodeName": "",//节点名称
|
||
"phaseName": "",//职能条线
|
||
"plannedFinishDate": "",//计划完成时间
|
||
"predictFinishDate": "",//预计完成时间
|
||
"projectSn": "",//项目SN
|
||
"status": "",//状态2-已发布（进行中）,3-节点汇报审批中,4-计划审批中,6-归档（完成）
|
||
"uniqueCode": "",//节点唯一标识
|
||
"versionId": ""//版本ID
|
||
}
|
||
},
|
||
handleSizeChange(val){
|
||
this.pageSize = val
|
||
this.loadData()
|
||
},
|
||
handleCurrentChange(val){
|
||
this.pageNo = val
|
||
this.loadData()
|
||
},
|
||
previewData(val){
|
||
this.dialogdata = val
|
||
this.dialogVisible = true
|
||
this.dialogTitle = /* '查看计划' */this.$t('message.projectInfo.lookPlan')
|
||
this.formType = 3
|
||
},
|
||
editData(val){
|
||
this.dialogdata = val
|
||
this.dialogVisible = true
|
||
this.dialogTitle = /* '编辑计划' */this.$t('message.projectInfo.editPlan')
|
||
this.formType = 2
|
||
},
|
||
deleteData(val){
|
||
this.$confirm(this.$t('message.projectInfo.confirmTipText')+'?', this.$t('message.projectInfo.tip'), {
|
||
confirmButtonText: /* '确定' */this.$t('message.energyManage.material.confirm'),
|
||
cancelButtonText: /* '取消' */this.$t('message.energyManage.material.cancel'),
|
||
type: 'warning'
|
||
}).then(() => {
|
||
deleteProgressNodeLibraryApi({id: val.id}).then(res=>{
|
||
if(res.code == 200){
|
||
this.$message({
|
||
type: 'success',
|
||
message: /* '删除成功!' */this.$t('message.projectInfo.deleteSuccess')+'!'
|
||
});
|
||
this.loadData()
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: /* '已取消删除' */this.$t('message.projectInfo.cancelDelete')+'!'
|
||
});
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.panoramaPlan{
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #fff;
|
||
padding: 20px;
|
||
box-sizing: border-box;
|
||
.header-box{
|
||
margin-bottom: 20px;
|
||
padding-left: 10px;
|
||
.search-item{
|
||
display: inline-flex;
|
||
align-items: center;
|
||
white-space: nowrap;
|
||
margin-right: 20px;
|
||
/deep/.el-input{
|
||
width: 200px;
|
||
}
|
||
}
|
||
}
|
||
.delete-btn{
|
||
color: #F56C6C;
|
||
}
|
||
.dialogFormBox{
|
||
width: 100%;
|
||
padding: 0 30px;
|
||
box-sizing: border-box;
|
||
/deep/.el-form-item{
|
||
display: inline-block;
|
||
width: 50%;
|
||
.el-select{
|
||
width: 260px !important;
|
||
}
|
||
.el-date-picker{
|
||
width: 260px !important;
|
||
}
|
||
.el-cascader{
|
||
width: 260px !important;
|
||
}
|
||
.el-input{
|
||
width: 260px !important;
|
||
}
|
||
}
|
||
}
|
||
.dialog-content{
|
||
/*height: 360px;*/
|
||
margin-bottom: 60px;
|
||
}
|
||
.dialog-btn{
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
}
|
||
</style>
|