<template><div class="app-container"><div class="mt30"></div><el-row :gutter="20"><!-- title --><!-- <div class="modt-box">导航管理</div> --><el-col :span="2"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><!-- default-expand-all="" tree-border--><div class="lefttree"><div class="tit-box">菜单目录</div><el-treeclass="treeclass"default-expand-all=""ref="tree":data="treeData":props="defaultProps"@node-click="nodeclick"@check-change="handleClick"check-strictlynode-key="id"><!-- 操作的插槽 --><span class="custom-tree-node" slot-scope="{ node, data }"><div class="custom-tree-node-wrapper"><span class="custom-tree-node-label">{{ node.label }}</span><span class="operate-btns"><dot-dropdown :eventsa="dropevents" :data="{node,data}" @addPeerNode="addPeerNode" @addNode="addNode" @editNode="editNode" @removeNode="removeNode" /></span></div></span></el-tree></div></el-col><el-col :span="2"><div class="grid-content bg-purple"></div></el-col><el-col :span="16"><div class="rightform"><div class="tit-box">{{tit}}</div><!-- <div class="mod-btnbox"><el-button type="primary" icon="el-icon-plus" @click="addModule">添加</el-button></div>--><el-form ref="form" :model="form" label-width="80px" :rules="rules"><!-- <el-form-item label="父级菜单" prop="parentId"><el-select v-model="form.parentId" placeholder="请选择" class="selectw"><el-option v-for="parm in fmenu" :key="parm.id" :label="parm.name" :value="parm.id"></el-option></el-select></el-form-item> --><!-- <el-form-item label="上级菜单"><treeselectv-model="form.id":options="fmenu":normalizer="normalizer":show-count="true"placeholder="选择上级菜单"/></el-form-item> --><el-form-item label="名称" prop="name"><el-input v-model="form.name"></el-input></el-form-item><!-- <el-form-item label="图标" prop="moduleIcon"><el-input v-model="form.moduleIcon"></el-input></el-form-item>--><el-form-item label="Path" prop="path"><el-input v-model="form.path"></el-input></el-form-item><el-form-item label="Link" prop="link"><el-input v-model="form.link"></el-input></el-form-item><el-form-item label="顺序" prop="sortNum"><el-input v-model="form.sortNum"></el-input></el-form-item><el-form-item><el-button type="primary" @click="saveModule('form')">保存</el-button><el-button v-show="!form.id" type="primary" @click="reset('form')">重置</el-button><!-- <el-button type="primary" v-show="showdelete" @click="deleteModule">删除</el-button> --></el-form-item></el-form></div></el-col><!-- <dot-dropdown :events="sysDropMenuEvents" :data="{node,data}" @addNode="addResource" /> --></el-row></div>
</template><script>
import {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";
export default {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.idconsole.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.idgetCategory(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();}}
};
</script>
<style lang="less" scoped>
.mt30 {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;}</style>自组件drop
<template><el-dropdown trigger="click" class="custom-tree-menu" size="small"><i class="el-icon-more rotate " /><el-dropdown-menu slot="dropdown"><el-dropdown-item v-for='(item,index) in eventsa' :key="index" :divided="index >0" @click.native="clickMenu(item)">{{item.label}}</el-dropdown-item></el-dropdown-menu></el-dropdown>
</template>
<script>
export default {props: {eventsa: {type: Array,default: function() {return [{ label: '新建同级', funcName: 'addPeerNode' },{ label: '新建子级', funcName: 'addNode' },// { label: '分配操作', funcName: 'distributeAction' },{ label: '编辑', funcName: 'editNode' },{ label: '删除', funcName: 'removeNode' }]}},// 注入数据data: {type: Object}},data(){return{// events2:[] }},methods: {clickMenu(item) {console.log(item,"item",this.data)this.$emit(item.funcName, this.data)}}
}
</script>
<style scoped>.el-icon-more:before {content: "\E794";color: #c0c4cc;font-size: 15px;
}
.rotate {cursor: pointer;margin-left: 5px;transform: rotate(90deg);}/* .rotate:focus {width: 15px;height: 15px;border-radius: 4em;background-color: rgba(130, 132, 138, 0.2);
} */
</style>实现的效果：
有个问题 点击按钮就会在页面顶部闪现
teleported这个设置为false 就好了
