<template>
|
<win-lg :title="setting.title" @close="close" :width="'800px'">
|
<el-table
|
v-loading="loading"
|
border
|
height="calc(100vh - 400px)"
|
:span-method="spanMethod"
|
:data="tableData"
|
style="width: 100%">
|
<el-table-column
|
prop="stageName"
|
align="center"
|
label="阶段"/>
|
<el-table-column
|
prop="nodeName"
|
align="center"
|
label="节点"/>
|
<el-table-column
|
prop="nodeTimeStart"
|
align="center"
|
label="自项目开始第n天"
|
width="130"/>
|
<el-table-column
|
prop="nodeTimeDays"
|
align="center"
|
label="持续天数"
|
width="80"/>
|
<el-table-column
|
align="center"
|
label="完成后提醒"
|
width="95">
|
<template slot-scope="{row}">
|
{{ row.completeNotifyStatus === 1 ? '是' : '否' }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
label="提醒节点"
|
width="240">
|
<template slot-scope="{row,$index}">
|
<div>阶段：{{ row.notifyStage.join("、") }}</div>
|
<div>节点：{{ row.notifyNode.join("、") }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
label="临期预警"
|
width="80">
|
<template slot-scope="{row}">
|
{{ row.warnNeed === 1 ? '是' : '否' }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
label="附件必传"
|
width="80">
|
<template slot-scope="{row}">
|
{{ row.fileNeed === 1 ? '是' : '否' }}
|
</template>
|
</el-table-column>
|
</el-table>
|
<div slot="footer" align="center" class="dialog-footer">
|
<my-button name="取消" site="form" @click="close"/>
|
</div>
|
</win-lg>
|
</template>
|
|
<script>
|
import winLg from '@/components/win/win-lg'
|
import {getStageNode} from "@/api/projectConfig/buildPlanNode";
|
import myButton from "@/components/myButton/myButton";
|
|
export default {
|
name: 'detail',
|
components: {winLg, myButton},
|
props: {
|
// setting 中须至少包含控制dialog显示或隐藏的属性,其余属性可拓展
|
// 将添加/修改的大量数据及逻辑从列表页面中分离出来,避免列表页面代码过多,审查困难
|
// 若此页面须回传数据至父页面,可在引用组件时添加事件,本页面使用this.$emit('事件名',参数1,参数2...)回传数据
|
setting: {
|
type: Object,
|
default: () => {
|
}
|
}
|
},
|
data() {
|
return {
|
loading: false,
|
tableData: [],
|
spanArr: [],
|
pos: 0
|
}
|
},
|
mounted() {
|
this.loading = true
|
getStageNode({id: this.setting.id}).then(res => {
|
this.loading = false
|
this.tableData = res
|
this.getSpanArr(res)
|
}).catch(() => {
|
this.loading = false
|
})
|
},
|
methods: {
|
close() {
|
this.$emit('close')
|
},
|
spanMethod({row, column, rowIndex, columnIndex}) {
|
if (columnIndex === 0) {
|
const rowspan = this.spanArr[rowIndex]
|
const colspan = rowspan > 0 ? 1 : 0
|
return {
|
rowspan, //行
|
colspan //列
|
};
|
}
|
},
|
getSpanArr(data) {
|
this.spanArr = [];
|
for (let i = 0; i < data.length; i++) {
|
if (i === 0) {
|
this.spanArr.push(1);
|
this.pos = 0;
|
} else {
|
// 判断当前元素与上一个元素是否相同
|
if (data[i].id === data[i - 1].id && data[i].id) {
|
this.spanArr[this.pos] += 1;
|
this.spanArr.push(0);
|
} else {
|
this.spanArr.push(1);
|
this.pos = i;
|
}
|
}
|
}
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
