<template>
|
<div>
|
<el-tabs tab-position="left" style="">
|
<template v-for="(stage,i) in tree">
|
<el-tab-pane v-if="stage.checked" :key="i" :label="stage.name">
|
<el-form :model="{tableData: tree}" ref="ruleForm" label-width="120px" class="demo-dynamic">
|
<el-form-item label="阶段总周期(天)">
|
<el-input-number v-model="stage.stageTimeDays" :controls="false" :min="1" :step="1" step-strictly style="width: 400px;text-align: left"></el-input-number>
|
</el-form-item>
|
<el-table
|
border
|
height="calc(100vh - 501px)"
|
:data="stage.children.filter(item=>item.checked)"
|
style="width: 100%">
|
<el-table-column
|
prop="name"
|
align="center"
|
label="节点"/>
|
<el-table-column
|
align="center"
|
label="自项目开始第n天"
|
width="180">
|
<template slot-scope="{row}">
|
<el-input-number v-model="row.nodeTimeStart" :controls="false" :min="getStageStart(i)" :max="getStageEnd(i)" :step="1" step-strictly style="width: 100%;text-align: left"></el-input-number>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
label="持续天数"
|
width="180">
|
<template slot-scope="{row}">
|
<el-input-number v-model="row.nodeTimeDays" :controls="false" :min="1" :max="stage.stageTimeDays||Infinity" :step="1" step-strictly style="width: 100%;text-align: left"></el-input-number>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
label="完成后提醒"
|
width="95">
|
<template slot-scope="{row}">
|
<el-switch
|
@change="notifyChange($event,row)"
|
v-model="row.completeNotifyStatus"
|
active-color="#13ce66"
|
:active-value="1"
|
:inactive-value="0">
|
</el-switch>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
label="提醒节点"
|
width="180">
|
<template slot-scope="{row,$index}">
|
<el-cascader
|
v-model="row.notifyTempStageNodeId"
|
:ref="'cascade'+i+$index"
|
:disabled="row.completeNotifyStatus===0"
|
@change="cascadeChange($event,row,'cascade'+i+$index)"
|
:options="options"
|
:show-all-levels="false"
|
:props="{ multiple: true, checkStrictly: true, emitPath: false }"
|
clearable></el-cascader>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
label="临期预警"
|
width="80">
|
<template slot-scope="{row}">
|
<el-switch
|
v-model="row.warnNeed"
|
active-color="#13ce66"
|
:active-value="1"
|
:inactive-value="0">
|
</el-switch>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
label="附件必传"
|
width="80">
|
<template slot-scope="{row}">
|
<el-switch
|
v-model="row.fileNeed"
|
active-color="#13ce66"
|
:active-value="1"
|
:inactive-value="0">
|
</el-switch>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-form>
|
</el-tab-pane>
|
</template>
|
</el-tabs>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
options: [],
|
tree: []
|
}
|
},
|
mounted() {
|
this.$EventBus.$on('setTree', data => {
|
this.tree = data
|
let arr = []
|
data.map(item => {
|
if (item.checked) {
|
let stage = {
|
value: item.id,
|
label: item.name,
|
notifyTempType: 0, // 0阶段 1节点
|
children: []
|
}
|
item.children.map(node => {
|
if (node.checked) {
|
stage.children.push({
|
value: node.id,
|
label: node.name,
|
notifyTempType: 1, // 0阶段 1节点
|
})
|
}
|
})
|
arr.push(stage)
|
}
|
})
|
this.options = arr //可选择为提醒节点的列表
|
})
|
},
|
computed:{
|
getStageStart(){
|
return (i)=>{
|
let num = 0
|
this.tree.map((item,idx)=>{
|
if(idx<i){
|
num+=(item.stageTimeDays||0)
|
}
|
})
|
return num+1
|
}
|
|
},
|
getStageEnd(){
|
return (i)=>{
|
let num = 0
|
this.tree.map((item,idx)=>{
|
if(idx<i+1){
|
num+=(item.stageTimeDays||0)
|
}
|
})
|
return num+1
|
}
|
|
}
|
},
|
beforeDestroy() {
|
this.$EventBus.$off('setTree')
|
},
|
methods: {
|
getSelectTree(){
|
let arr = []
|
this.tree.map(item => {
|
if (item.checked) {
|
let stage = JSON.parse(JSON.stringify(item))
|
delete stage.checked
|
delete stage.checkedList
|
delete stage.name
|
let children =[]
|
stage.children.map(node => {
|
if (node.checked) {
|
let item = JSON.parse(JSON.stringify(node))
|
delete item.checked
|
delete item.notifyTempStageNodeId
|
delete item.name
|
children.push(item)
|
}
|
})
|
stage.children = children
|
arr.push(stage)
|
}
|
})
|
return arr
|
},
|
notifyChange(e,row){
|
row.notify = []
|
row.notifyStageNodes = []
|
},
|
cascadeChange(e, row, ref) {
|
let nodes = this.$refs[ref][0].getCheckedNodes(false)
|
let arr = []
|
nodes.map(item => {
|
if (item.checked) {
|
arr.push({
|
tempStageNodeId: row.id,
|
notifyTempType: item.level - 1,
|
notifyTempStageNodeId: item.value
|
})
|
}
|
})
|
row.notify = arr
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.tab-content {
|
height: calc(100vh - 450px);
|
overflow-y: auto;
|
}
|
</style>
|
