mysql vue 菜谱_vue项目左右布局的菜单效果,树形菜单

菜单目录

class="treeclass"

default-expand-all=""ref="tree":data="treeData":props="defaultProps"@node-click="nodeclick"@check-change="handleClick"check-strictly

node-key="id"

>

{{ node.label }}

{{tit}}

保存

重置

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;

}