<template> <div id="menuBox"> <div id="menuTop"> <el-button type="primary" icon="el-icon-search" @click="loadGridData()" v-has="'Search'">刷新</el-button> <el-button type="primary" icon="el-icon-search" @click="AddTop()" v-has="'m9-4-b1'">新增一级菜单</el-button> </div> <div id="menuCentent" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" > <el-table :data="TableData" style="width: 100%;height:calc(100%)" row-key="menuId" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}" > <el-table-column prop="name" label="名称"> <template slot-scope="scope"> <span v-if="scope.row.type==2" style="color:orange;font-size:12px">{{scope.row.name}}</span> <span v-else>{{scope.row.name}}</span> </template> </el-table-column> <el-table-column prop="type" label="类型"> <template slot-scope="scope"> <span v-if="scope.row.type==2" style="color:orange;font-size:12px">按钮</span> <span v-else>菜单</span> </template> </el-table-column> <el-table-column prop="orderNum" label="排序" sortable> <template slot-scope="scope"> <span v-if="scope.row.type==2" style="color:orange;font-size:12px" >{{scope.row.orderNum}}</span> <span v-else>{{scope.row.orderNum}}</span> </template> </el-table-column> <el-table-column prop="perms" label="菜单权限标识"> <template slot-scope="scope"> <span v-if="scope.row.type==2" style="color:orange;font-size:12px">{{scope.row.perms}}</span> <span v-else>{{scope.row.perms}}</span> </template> </el-table-column> <el-table-column label="操作" width="500px"> <template slot-scope="scope"> <span v-if="scope.row.type==2" style="color:orange;font-size:12px"> <el-button type="text" size="small" @click="EditNow(scope.$index, scope.row)" v-has="'m9-4-b5'" >修改按钮</el-button> <el-button type="text" size="small" @click="DelNow(scope.$index, scope.row)" v-has="'m9-4-b6'" >删除按钮</el-button> </span> <span v-else> <el-button type="text" size="small" @click="AddChild(scope.$index, scope.row)" v-has="'m9-4-b2'" >新增子集菜单/按钮</el-button> <el-button type="text" size="small" @click="EditNow(scope.$index, scope.row)" v-has="'m9-4-b3'" >修改当前菜单</el-button> <el-button type="text" size="small" @click="DelNow(scope.$index, scope.row)" v-has="'m9-4-b4'" >删除当前菜单</el-button> </span> </template> </el-table-column> </el-table> </div> <!-- 新增组织架构 --> <el-dialog :title="DialogTitle" :visible.sync="AddDialog" width="400px"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px"> <el-form-item label="名 称" prop="name" style="width:100%"> <el-input size="small" v-model="ruleForm.name" clearable></el-input> <el-input size="small" v-model="ruleForm.parentId" v-show="false"></el-input> <el-input size="small" v-model="ruleForm.menuId" v-show="false"></el-input> </el-form-item> <el-form-item label="排 序" prop="orderNum" style="width:100%"> <el-input size="small" v-model="ruleForm.orderNum" clearable type="number"></el-input> </el-form-item> <el-form-item label="权限标识" prop="perms" style="width:100%"> <el-input size="small" v-model="ruleForm.perms" clearable></el-input> </el-form-item> <el-form-item label="添加类型" prop="type" style="width:100%"> <el-select size="small" v-model="ruleForm.type" style="width:100%"> <el-option v-for="item in typeoptions" :key="item.value" :label="item.lable" :value="item.value" ></el-option> </el-select> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="AddDialog = false">取 消</el-button> <el-button type="primary" @click="AddBtn('ruleForm')">确 定</el-button> </span> </el-dialog> </div> </template> <script> import { message } from "./../../util/item"; export default { name: "menuBox", data: function() { return { loading: false, AddDialog: false, TableData: [], //表格数据 AddBoxinput: "", //组织名称 ruleForm: { parentId: "", //默认为0,新增一级架构时传0 menuId: "", //只在修改时起作用 // 需要进行操作的四个值 name: "", perms: "", //权限标识 orderNum: "", type: "" //类型 }, rules: { type: [ { required: true, message: "请选择", trigger: "change" } ], name: [ { required: true, message: "此项为必填项", trigger: "blur" } ], orderNum: [ { required: true, message: "此项为必填项", trigger: "blur" } ], perms: [ { required: true, message: "此项为必填项", trigger: "blur" } ] }, typeoptions: [ { value: "1", lable: "菜单" }, { value: "2", lable: "按钮" } ], addAndEditURL: "", //新增/修改的URl DialogTitle: "" //弹窗标题 }; }, watch: { AddDialog(val) { if(!val) { if(this.$refs['ruleForm']) { this.$refs['ruleForm'].resetFields(); } this.resetForm(); } } }, methods: { // 获取所有的用户 loadGridData() { this.loading = true; this.TableData = []; this.$http .post(this.nozzle.menuGetMenuTree) .then(response => { this.loading = false; if (response.data.code === 1) { this.TableData = response.data.data; } else { message(response); } }) .catch(response => { this.loading = false; message(response); }); }, // 点击新增组织架构 AddTop() { this.AddDialog = true; this.$nextTick(function() { this.$refs["ruleForm"].resetFields(); }); this.ruleForm.parentId = "0"; this.ruleForm.menuId = ""; this.addAndEditURL = this.nozzle.menuAddMenu; this.DialogTitle = "新增"; }, // 点击新增子项 AddChild(index, rows) { // this.$nextTick(function() { // this.$refs["ruleForm"].resetFields(); // }); // setTimeout(() => { // this.$refs["ruleForm"].resetFields(); // }, 0); this.AddDialog = true; this.ruleForm.parentId = rows.menuId; this.ruleForm.menuId = ""; this.addAndEditURL = this.nozzle.menuAddMenu; this.DialogTitle = "新增"; }, // AddBtn 新增/修改弹窗的 确认提交按钮 AddBtn(formName) { this.$refs[formName].validate(valid => { if (valid) { this.$http .post(this.addAndEditURL, this.ruleForm) .then(response => { if (response.data.code === 1) { this.$message({ message: response.data.msg, type: "success" }); } else { this.$message({ message: response.data.msg, type: "warning" }); } this.loadGridData(); this.AddDialog = false; this.$refs[formName].resetFields(); }) .catch(response => { this.loading = false; message(response); }); } else { console.log("error submit!!"); return false; } }); }, // 删除 DelNow(index, rows) { this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }) .then(() => { var DelList = [rows.menuId]; this.$http .post(this.nozzle.menuDeleteMenu, DelList) .then(response => { if (response.data.code === 1) { this.$message({ message: response.data.msg, type: "success" }); } else { this.$message({ message: response.data.msg, type: "warning" }); } this.loadGridData(); }) .catch(response => { this.loading = false; message(response); }); }) .catch(() => { this.$message({ type: "info", message: "已取消删除" }); }); }, // 修改 EditNow(index, rows) { this.AddDialog = true; this.DialogTitle = "修改"; this.ruleForm = { ...{}, ...rows }; this.ruleForm.parentId = ""; this.ruleForm.type = String(rows.type); // this.ruleForm.menuId = rows.menuId; // this.ruleForm.name = rows.name; // this.ruleForm.perms = rows.perms; // this.ruleForm.orderNum = rows.orderNum; this.addAndEditURL = this.nozzle.menuUpdateMenu; }, //重置表单 resetForm() { this.ruleForm = { parentId: "", //默认为0,新增一级架构时传0 menuId: "", //只在修改时起作用 // 需要进行操作的四个值 name: "", perms: "", //权限标识 orderNum: "", type: "" //类型 } } }, mounted: function() { this.loadGridData(); } }; </script> <style scoped> #menu { width: 100%; height: 100%; } /* 顶部搜索 */ #menuTop { width: 100%; height: 60px; line-height: 60px; text-align: left; } #menuTop .el-input { width: 250px; margin: 0 10px; } /* 表格 */ #menuCentent { width: 100%; height: calc(100% - 70px); margin-top: 10px; background: rgba(53, 53, 53, 0.5); } .el-form-item__label { text-align: left !important; } </style> <style> .el-table__body-wrapper { height: calc(100% - 60px) !important; overflow-y: auto !important; background: rgba(27, 27, 28, 0) !important; } .el-form-item__label { text-align: left !important; } </style>