<el-scrollbar class="scrollbar-wrapper">
<el-tree :data="nodeList" ref="tree" :props="defaultProps" :expand-on-click-node="false">
<template slot-scope="{ node, data }">
<div class="custom-tree-node">
<template v-if="node.label">
<span>{{node.label}} <span v-if="node.level==4 && false" style="padding-left:30px">
<el-checkbox v-model="data.isCommon" true-label="Y" false-label="N">是否常用分类</el-checkbox>
</span>
</span>
<span style="margin-left:20px">
<el-button size="small" type="text" @click.stop="appendNode(node,data)"
:disabled='node.level==4'>新增</el-button>
<el-button size="small" type="text" @click.stop="editNode(node,data)">编辑</el-button>
<el-button size="small" type="text" @click.stop="removeNode(node,data)">删除</el-button>
</span>
</template>
<template v-else="!node.investFormCodeText">
<el-row :gutter="20" style="width:80%">
<el-col :span="3">
<div class="">编号：</div>
</el-col>
<el-col :span="6">
<el-input v-model="data.investFormCode" size="small" placeholder="请输入编号"></el-input>
</el-col>
<el-col :span="3">
<div class="">描述：</div>
</el-col>
<el-col :span="12">
<el-input v-model="data.investFormCodeDesc" size="small" placeholder="请输入描述"></el-input>
</el-col>
</el-row>
<span style="margin-left:20px">
<el-button size="small" @click="handleCancel(node,data)">取消</el-button>
<el-button size="small" type="primary" @click.stop="addChild(node,data)"
:disabled='node.level==4'>保存</el-button>
</span>
</template>
</div>
</template>
</el-tree>
</el-scrollbar>
data () {
return {
nodeList: [],
defaultProps: {
children: 'childList',
label: 'investFormCodeText'
},
deleteList: [],
}
}
appendNode (node, data) {
//为 Tree 中的一个节点追加一个子节点
this.$refs.tree.append({
dictKey: "marketQuotationInvestForm",
investFormCodeText: '',
childList: []
}, node)
},
editNode (node, data) {
this.$set(data, "tempInvestFormCodeText", data.investFormCodeText);
this.$set(data, "investFormCodeText", "");
},
removeNode (node, data) {
const parent = node.parent;
const childList = parent.data.childList || parent.data;
const index = childList.findIndex(d => d === data);
if (data.id) {
this.$confirm('删除配置项将影响历史数据，请确认是否删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
childList.splice(index, 1);
this.deleteList.push({
id: data.id
});
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
else {
childList.splice(index, 1);
}
},
// 数据结构
"nodeList": [{
"investFormCodeText": "TF01 -- 搜索广告",
"investFormCode": "TF01",
"childList": null,
"id": 14,
"investFormCodeDesc": "搜索广告",
"parentId": 0
},
{
"investFormCodeText": "TF02 -- 开屏",
"investFormCode": "TF02",
"childList": [{
"investFormCodeText": "A001 -- 抖音-开屏",
"investFormCode": "A001",
"childList": [{
"investFormCodeText": "B001 -- 优选互动",
"investFormCode": "B001",
"childList": null,
"id": 17,
"investFormCodeDesc": "优选互动",
"parentId": 16
},
{
"investFormCodeText": "B002 -- 优选点击",
"investFormCode": "B002",
"childList": null,
"id": 18,
"investFormCodeDesc": "优选点击",
"parentId": 16
},
{
"investFormCodeText": "B003 -- 超级优选",
"investFormCode": "B003",
"childList": null,
"id": 19,
"investFormCodeDesc": "超级优选",
"parentId": 16
}
],
"id": 16,
"investFormCodeDesc": "抖音-开屏",
"parentId": 15
},
{
"investFormCodeText": "A002 -- 头条-开屏",
"investFormCode": "A002",
"childList": [{
"investFormCodeText": "B001 -- 优选互动",
"investFormCode": "B001",
"childList": null,
"id": 21,
"investFormCodeDesc": "优选互动",
"parentId": 20
},
{
"investFormCodeText": "B002 -- 优选点击",
"childList": null,
"id": 22,
"investFormCodeDesc": "优选点击",
"parentId": 20
}
],
"id": 20,
"investFormCodeDesc": "头条-开屏",
"parentId": 15
}
],
