501 lines
25 KiB
Vue
Raw Normal View History

2022-06-08 14:51:11 +08:00
<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)"
2022-06-08 14:51:11 +08:00
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">
2022-06-08 14:51:11 +08:00
<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>