<template>
|
<win-md :title="setting.title" @close="close" :width="'800px'">
|
<div style="min-height: 300px">
|
<el-table
|
v-loading="loading"
|
border
|
:data="tableData"
|
style="width: 100%;margin-top: 15px">
|
<el-table-column
|
prop="tempProjectName"
|
align="center"
|
width="200"
|
label="模板"/>
|
<el-table-column
|
align="center"
|
label="选择节点">
|
<template slot-scope="{row,$index}">
|
<el-cascader
|
:key="$index"
|
style="width: 100%;"
|
v-model="row.tempStageNodeIds"
|
:options="row.options"
|
:show-all-levels="false"
|
:props="{ multiple: true, emitPath: false,value:'id', label:'name'}"
|
clearable></el-cascader>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<div slot="footer" align="center" class="dialog-footer">
|
<my-button name="取消" site="form" @click="close"/>
|
<my-button name="保存" site="form" @click="save"/>
|
</div>
|
</win-md>
|
</template>
|
|
<script>
|
import winMd from '@/components/win/win-md'
|
import myButton from '@/components/myButton/myButton'
|
import {getList, getTree, upd} from "@/api/projectConfig/kanbanNode";
|
|
export default {
|
name: 'nodeChoose',
|
components: {winMd, myButton},
|
props: {
|
// setting 中须至少包含控制dialog显示或隐藏的属性,其余属性可拓展
|
// 将添加/修改的大量数据及逻辑从列表页面中分离出来,避免列表页面代码过多,审查困难
|
// 若此页面须回传数据至父页面,可在引用组件时添加事件,本页面使用this.$emit('事件名',参数1,参数2...)回传数据
|
setting: {
|
type: Object,
|
default: () => {
|
}
|
}
|
},
|
data() {
|
return {
|
loading: false,
|
options: [],
|
tableData: []
|
}
|
},
|
mounted() {
|
},
|
created() {
|
this.getList()
|
},
|
methods: {
|
getList() {
|
this.loading = true
|
getList({id: this.setting.id}).then(res => {
|
let count = res.length
|
res.map((item) => {
|
getTree({tempProjectId: item.id}).then(ret => {
|
item.options = ret
|
count--
|
if (count < 1) {
|
this.tableData = res
|
this.loading = false
|
}
|
})
|
})
|
})
|
},
|
close() {
|
this.loading = false
|
this.tableData = []
|
this.$emit('close')
|
},
|
save() {
|
let arr = []
|
if (this.tableData.every(item => item.tempStageNodeIds.length === 0)) {
|
this.$modal.msgError('请选择节点')
|
return;
|
}
|
for (let i = 0; i < this.tableData.length; i++) {
|
const item = this.tableData[i]
|
item.tempStageNodeIds.map(node => {
|
item.tempStageNodeId = node
|
arr.push({...item})
|
})
|
}
|
arr.map(item => {
|
item.tempProjectId = item.id
|
delete item.tempStageNodeIds
|
delete item.id
|
delete item.options
|
delete item.tempProjectName
|
})
|
this.loading = true
|
upd({
|
id: this.setting.id,
|
tempProjectBoardNode: arr
|
}).then(res => {
|
this.loading = false
|
if (res) {
|
this.$message.success('保存成功！')
|
this.close()
|
this.$emit('search')
|
} else {
|
this.$message.error('保存失败')
|
}
|
}).catch(() => {
|
this.loading = false
|
})
|
}
|
}
|
}
|
</script>
|
