<template>
<div class="sortDiv">
<el-button type="primary" @click="openDialog">新建一级</el-button>
<el-tree :data="sortData" draggable node-key="id" ref="sortTree" default-expand-all :expand-on-click-node="false" :render-content="renderContent">
</el-tree>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
一级节点<el-input v-model="rootName" autocomplete="off"></el-input>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addRoot">确 定</el-button>
</span>
</el-dialog>
<el-dialog
:title="type==='add' ? '新增':'编辑'"
:visible.sync="editdialogVisible"
width="30%"
:before-close="handleEditClose">
节点<el-input v-model="name" autocomplete="off"></el-input>
<span slot="footer" class="dialog-footer">
<el-button @click="editdialogVisible = false">取 消</el-button>
<el-button type="primary" @click="type==='add' ? addName() : editName()">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'Sort',
data() {
return {
sortData: [
{
id: 1,
label: '一级 1',
checkItem: true,
children: [
{
id: 4,
label: '二级 1-1',
checkItem: false
},
{
id: 9,
label: '二级 1-2',
checkItem: false
},
{
id: 10,
label: '二级 1-3',
checkItem: false
}
]
},
{
id: 2,
label: '一级 2',
checkItem: true,
children: [
{
id: 5,
label: '二级 2-1',
checkItem: true
},
{
id: 6,
label: '二级 2-2',
checkItem: true
}
]
},
{
id: 3,
label: '一级 3',
checkItem: true,
children: [
{
id: 7,
label: '二级 3-1',
checkItem: true
},
{
id: 8,
label: '二级 3-2',
checkItem: false
}
]
}
],
dialogVisible: false,
editdialogVisible:false,
rootName:"",
name:"",
type:"add"
};
},
methods: {
openDialog(){
this.dialogVisible = true
},
addRoot(){
this.sortData.push({
id: this.sortData.length,
label: this.rootName,
checkItem: true,
})
this.dialogVisible = false
},
edit(node, data){
this.type = "edit"
this.editdialogVisible = true
this.name = data.label
},
handleEditClose(){
this.$confirm('确认关闭?')
.then(_ => {
done();
})
.catch(_ => {});
},
handleClose(done) {
this.$confirm('确认关闭?')
.then(_ => {
done();
})
.catch(_ => {});
},
addName(){
//todo 掉新增接口
console.log(123);
this.editdialogVisible = false
},
editName(){
//todo 掉编辑接口
this.editdialogVisible = false
},
delete(node, data){
this.$confirm('确认删除?')
.then(_ => {
//掉删除接口
})
.catch(_ => {});
},
//获取数据
getData () {
let result = this.$refs['sortTree'].data;
let sortRulesMaps = [];
result.forEach((element, index) => {
let item = null;
if (element.checkItem) {
if (element.children && element.children.length > 0) {
item = {
orderIndex: index,
sortField: element.label,
rule: ['OTHERS']
};
element.children.forEach(i => {
if (i.checkItem) {
item.rule.push(i.label);
}
});
item.rule = item.rule.join('_');
}
}
item && sortRulesMaps.push(item);
});
},
changeNode(r, node, data) {
data.checkItem = r;
},
add(){
this.type = "add"
this.name = ""
this.editdialogVisible = true
},
//自定义内容
renderContent(h, { node, data }) {
return (
<span class="custom-tree-node">
<span>{data.label}</span>
<span>
<el-button
size="mini"
type="text"
on-click={() => this.add(node, data)}
style="color:#707375;margin-left:10px"
>
<i class="el-icon-plus">新增</i>
</el-button>
<el-button
size="mini"
type="text"
on-click={() => this.edit(node, data)}
style="color:#707375;margin-left:10px"
>
<i class="el-icon-edit">编辑</i>
</el-button>
<el-button
size="mini"
type="text"
on-click={() => this.delete(node, data)}
style="color:#707375;margin-left:10px"
>
<i class="el-icon-delete">删除</i>
</el-button>
</span>
</span>
);
}
}
};
</script>
<style lang="scss">
.sortDiv {
.el-icon-caret-right:before {
content: '\E604';
}
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
</style>
网络中使用最多的图片格式有哪些?
最新推荐文章于 2021-11-29 16:01:02 发布