class="treeclass"
default-expand-all=""ref="tree":data="treeData":props="defaultProps"@node-click="nodeclick"@check-change="handleClick"check-strictly
node-key="id"
>
{{ node.label }}
保存
重置
listCategory,
getCategory,
delCategory,
addCategory,
updateCategory,
exportCategory,
listCategorytree
} from"@/api/cms/category";
import DotDropdown from"./drop.vue";
import Treeselect from"@riophae/vue-treeselect";
import"@riophae/vue-treeselect/dist/vue-treeselect.css";
exportdefault{
name:"Category",
components: {
DotDropdown,
Treeselect
},
data() {return{
tit:'新建同级',
dropevents: [
{ label:'新建同级', funcName: 'addPeerNode'},
{ label:'新建子级', funcName: 'addNode'},
{ label:'编辑', funcName: 'editNode'},
{ label:'删除', funcName: 'removeNode'}
],
showdelete:false,
treeData: [],
defaultProps: {
children:"children",
label:"label"},
form: {
id:'',
parentId:'',
link:"",
path:"",
name:"",
sortNum:"",
},//rules表单验证
rules: {//parentId: [
//{ required: true, message: "请选择父级菜单", trigger: "blur" }
//],
name: [
{ required:true, message: "请输入菜单名称", trigger: "blur"}
],
link: [{ required:true, message: "请输入link", trigger: "blur"}],
path: [{ required:true, message: "请输入path", trigger: "blur"}],
sortNum: [
{ required:true, message: "请输入菜单顺序", trigger: "blur"}
]
},
fmenu: [],
};
},
created() {//this.getList();
this.getdata();//this.getmenu();
//console.log(DotDropdown, " DotDropdown,");
},
methods: {//弹框的四个操作
//新建同级
addPeerNode(item){
console.log(item,'新建同级')this.reset('form')this.form.id=''
//这个能确保建立子级的同级
this.form.parentId=item.node.parent.data.id
console.log(item.node.parent.data.id,"item.node.id")this.tit = '新建同级'},//新建子级
addNode(item){
console.log(item,'新建子级')
let id=item.data.idthis.form.parentId =idthis.reset('form')this.form.id=''
this.tit = '新建子级'},//编辑
editNode(item){
console.log(item,'编辑')this.tit = '编辑'let id=item.data.id
getCategory(id)
.then(res=>{
console.log(res,"根据id查信息");this.form =res.data//console.log(JSON.stringify(res))
//this.form = res.data.data
//this.$refs.tree.setCheckedNodes([])
//this.$refs.tree.setCheckedNodes([arr])
})
.catch(err =>{this.loading = false;this.$message.error("用户管理获取失败,请稍后再试!");
});
},//删除(ok)
removeNode(item){this.tit = '删除'let id=item.data.id//console.log(id,"kk")
delCategory(id).then(res=>{this.getdata();this.reset('form')this.form.id=''
this.tit="新建同级"
this.$message.success("删除成功!");
})
.catch(err =>{this.$message.error("表删除失败,请稍后再试!");
})
},//获取数据
getdata() {
listCategorytree()
.then(res=>{this.treeData =res.categorys;
})
.catch(err =>{this.loading = false;this.$message.error("菜单管理列表失败,请稍后再试!");
});
},//添加
addModule() {//this.showdelete = false;
this.form.link = "";this.form.name = "";this.form.path = "";this.form.sortNum = "";this.form.parentId = "";this.form.id = "";
},//获取父级菜单
//getmenu() {
//listCategory()
//.then(response => {
为啥返回的parentid不一样
//response.rows.forEach(a=>{
//a.parentId =0
//})
//this.fmenu = [];
//const menu = { id: '', menuName: "主类目", children: [] };
//menu.children = this.handleTree(response.rows, "id");
//this.fmenu.push(menu);
//})
//.catch(err => {
//this.loading = false;
//this.$message.error("父级菜单列表获取失败,请稍后再试!");
//});
//},
/** 转换菜单数据结构*/
//normalizer(node) {
console.log(node,"nnn")
//if (node.children && !node.children.length) {
//delete node.children;
//}
//return {
//id: node.id,
//label: node.name,
//children: node.children
//};
//},
//复选变单选
handleClick(data, checked, node) {if(checked) {//this.$refs.tree.setCheckedNodes([]);
//this.$refs.tree.setCheckedNodes([data]);
this.showdelete = true;
}else{
}
},//点击节点
nodeclick(arr, node, self) {
},//保存菜单
saveModule(editData) {this.$refs[editData].validate(valid =>{if(valid) {
console.log(this.form,this.form.parentId,"idiidid")if (this.form.id != '') {
updateCategory(this.form).then(response =>{this.msgSuccess("修改成功");this.getdata();//this.getmenu();
this.reset('form')
});
}else{
addCategory(this.form).then(response =>{this.msgSuccess("新增成功");this.getdata();//this.getmenu();
this.reset('form')
});
}
}else{return false;
}
});
},//重置
reset(formName) {this.$refs[formName].resetFields();
}
}
};
margin-bottom: 30px;
}
.el-tree-node__content {
position: relative;
}
.el-tree-node__content :hover,
.el-tree-node__content :focus-within {
.operate-btns {
display: inline;
}
}
.operate-btns {
position: absolute;
right: 2px;
}//.bg-purple {
background: #d3dce6;
}
.rightform{
border: #f1f3f7 solid 1px;
padding: 30px 30px 20px 0px;
box-shadow: 5px 5px 5px #cdcfcf;
background: #fff
}
.lefttree{
border: #f1f3f7 solid 1px;
padding: 30px 30px 20px 0px;
box-shadow: 5px 5px 5px #cdcfcf;
background: #fff
}
.tit-box{//border-bottom: #666 solid 1px;
text-align: center;
width:100%;/*margin: 0 auto;*/margin-bottom: 20px;
}