今天我们来做菜单这部分
我想用树形表格，但是element-ui中不提供。所以只能变为树形控件，中间放详细，右侧放操作。
我们先去element-ui找到树形控件的demo放里。
然后使用row来进行分隔，然后中间放到form，右面放个table，同样直接从演示时找代码放里。效果如下
然后我们先来处理左面的树形。后台提供加载数据。
前台添加method加载tree数据，同时添加点击事件。
我们看到效果了。点击左侧的，右面的内容跟着变了。
调整一下样式，disabled=”true”，右面的table调整成三列，名称，操作，是否生效。这个也是随着菜单选择进行变化的。
剩下就是新增和修改了。就不讲了吧。本章完
1 <template> 2 <div> 3 <div>菜单管理</div> 4 <el-row> 5 <el-col> 6 <el-button>添加菜单</el-button> 7 <el-button>编辑菜单</el-button> 8 <el-button>添加操作</el-button> 9 <el-button>编辑操作</el-button> 10 </el-col> 11 </el-row> 12 <el-row :gutter="20"> 13 <el-col :span="6"> 14 <el-tree :data="treeData" v-loading="loading" node-key="id" @node-click="treeClick"> 15 </el-tree> 16 </el-col> 17 <el-col :span="12"> 18 <el-form ref="form" :model="form" label-width="80px" class="form" v-loading="loading"> 19 <el-form-item label="父级菜单"> 20 <el-input v-model="form.pname" disabled="disabled"></el-input> 21 </el-form-item> 22 <el-form-item label="菜单编码"> 23 <el-input v-model="form.code" disabled="disabled"></el-input> 24 </el-form-item> 25 <el-form-item label="菜单名称"> 26 <el-input v-model="form.name" disabled="disabled"></el-input> 27 </el-form-item> 28 <el-form-item label="菜单图标"> 29 <el-input v-model="form.icon" disabled="disabled"></el-input> 30 </el-form-item> 31 <el-form-item label="菜单地址"> 32 <el-input v-model="form.url" disabled="disabled"></el-input> 33 </el-form-item> 34 <el-form-item label="是否启用"> 35 <el-switch v-model="form.isValid" disabled="disabled"></el-switch> 36 </el-form-item> 37 <el-form-item label="备注"> 38 <el-input type="textarea" v-model="form.remarks" disabled="disabled"></el-input> 39 </el-form-item> 40 41 </el-form> 42 </el-col> 43 <el-col :span="6"> 44 <el-table title="操作" :data="tableData" stripe style="width: 100%" v-loading="loading"> 45 <el-table-column prop="name" label="名称"></el-table-column> 46 <el-table-column prop="code" label="操作"></el-table-column> 47 <el-table-column label="是否生效"> 48 <template slot-scope="scope"> 49 <span style="color:green" v-if="scope.row.isValid">生效</span> 50 <span style="color:red" v-else="scope.row.isValid">停用</span> 51 </template> 52 </el-table-column> 53 </el-table> 54 </el-col> 55 </el-row> 56 </div> 57 </template> 58 59 <script> 60 import Vue from "vue"; 61 62 export default { 63 name: "menuManage", 64 data() { 65 return { 66 loading: false, 67 treeData: [], 68 defaultProps: { 69 children: 'children', 70 label: 'label' 71 }, 72 form: {}, 73 tableData: [] 74 }; 75 }, 76 mounted: function () { 77 this.queryList(); 78 }, 79 methods: { 80 treeClick: function (data) { 81 this.loadData(data.id); 82 this.loadOperate(data.id); 83 }, 84 queryList: function () { 85 var _this = this; 86 var queryUrl = "/api/menu/queryTree"; 87 this.loading = true; 88 Vue.axios.post(queryUrl) 89 .then(function (res) { 90 _this.loading = false; 91 if (res.status === 200) { 92 let result = res.data; 93 if (result.success) { 94 _this.treeData = result.data; 95 } else { 96 _this.$message({ 97 message: result.message, 98 type: "error", 99 }); 100 } 101 } else { 102 _this.$message({ 103 message: res.message, 104 type: "error", 105 }); 106 } 107 }) 108 .catch(function (error) { 109 _this.$message({ 110 message: "发生错误" + error, 111 type: "error", 112 }) 113 }); 114 }, 115 loadData: function (id) { 116 var _this = this; 117 var queryUrl = "/api/menu/getModule"; 118 var param = {id: id}; 119 this.loading = true; 120 Vue.axios.post(queryUrl, param) 121 .then(function (res) { 122 _this.loading = false; 123 if (res.status === 200) { 124 let result = res.data; 125 if (result.success) { 126 _this.form = result.data; 127 } else { 128 _this.$message({ 129 message: result.message, 130 type: "error", 131 }); 132 } 133 } else { 134 _this.$message({ 135 message: res.message, 136 type: "error", 137 }); 138 } 139 }) 140 .catch(function (error) { 141 _this.$message({ 142 message: "发生错误" + error, 143 type: "error", 144 }) 145 }); 146 }, 147 loadOperate: function (id) { 148 var _this = this; 149 var queryUrl = "/api/menu/queryOperate"; 150 var param = {pid: id}; 151 this.loading = true; 152 Vue.axios.post(queryUrl, param) 153 .then(function (res) { 154 _this.loading = false; 155 if (res.status === 200) { 156 let result = res.data; 157 if (result.success) { 158 _this.tableData = result.data; 159 } else { 160 _this.$message({ 161 message: result.message, 162 type: "error", 163 }); 164 } 165 } else { 166 _this.$message({ 167 message: res.message, 168 type: "error", 169 }); 170 } 171 }) 172 .catch(function (error) { 173 _this.$message({ 174 message: "发生错误" + error, 175 type: "error", 176 }) 177 }); 178 } 179 } 180 } 181 </script> 182 183 <style scoped> 184 .form { 185 background-color: #fff; 186 } 187 188 .form .el-input, .form textarea { 189 width: 300px; 190 } 191 192 .form input:disabled { 193 color: #606266; 194 } 195 </style>
1 @Api(value = "菜单管理", description = "菜单管理") 2 @RestController 3 @RequestMapping("menu") 4 public class ModuleController extends BaseController { 5 6 @Autowired 7 private ModuleService moduleService; 8 9 @ApiOperation(value = "获取所有菜单", notes = "获取所有菜单") 10 @PostMapping("queryTree") 11 public Object queryTree() { 12 QueryModule queryModule = new QueryModule(); 13 queryModule.setRootId(0); 14 queryModule.setPid(-1); 15 queryModule.setType(1); 16 List<Tree> trees = moduleService.queryTree(queryModule); 17 return getResultMessage(trees); 18 } 19 20 @ApiOperation(value = "获取单条信息", notes = "获取单条信息") 21 @PostMapping("getModule") 22 public Object getModule(QueryModule vo){ 23 Module module = moduleService.get(vo); 24 return getResultMessage(module); 25 } 26 27 @ApiOperation(value = "获取操作", notes = "获取操作") 28 @PostMapping("queryOperate") 29 public Object queryOperate(QueryModule vo){ 30 vo.setType(2); 31 List<Module> list = moduleService.query(vo); 32 return getResultMessage(list); 33 } 34 }
1 public interface ModuleService { 2 List<Tree> queryTree(QueryModule vo); 3 4 List<Module> query(QueryModule vo); 5 6 int add(Module module); 7 8 int edit(Module module); 9 10 int del(Module module); 11 12 Module get(QueryModule vo); 13 }
1 @Service 2 public class ModuleServiceImpl implements ModuleService { 3 @Autowired 4 private ModuleMapper moduleMapper; 5 6 @Override 7 public List<Tree> queryTree(QueryModule vo) { 8 Tree tree = new Tree(); 9 List<Module> list = moduleMapper.select(vo); 10 11 List<Tree> trees = TreeUtils.queryObject(list,"getId","getPid","getName",vo.getRootId()); 12 if(trees.size()>0){ 13 return trees; 14 } 15 return new ArrayList<>(); 16 } 17 18 @Override 19 public List<Module> query(QueryModule vo) { 20 return moduleMapper.select(vo); 21 } 22 23 public void setModuleMapper(ModuleMapper moduleMapper) { 24 this.moduleMapper = moduleMapper; 25 } 26 27 @Override 28 public int add(Module module) { 29 return moduleMapper.add(module); 30 } 31 32 @Override 33 public int edit(Module module) { 34 return moduleMapper.edit(module); 35 } 36 37 @Override 38 public int del(Module module) { 39 return 0; 40 } 41 42 @Override 43 public Module get(QueryModule vo) { 44 return moduleMapper.get(vo); 45 } 46 }
1 @Mapper 2 public interface ModuleMapper { 3 4 List<Module> select(QueryModule vo); 5 6 int add(Module user); 7 8 int edit(Module user); 9 10 Module get(QueryModule vo); 11 }
1 public class QueryModule { 2 private int id; 3 private int pid; 4 private int type; 5 6 private int rootId; 7 8 public int getId() { 9 return id; 10 } 11 12 public void setId(int id) { 13 this.id = id; 14 } 15 16 public int getPid() { 17 return pid; 18 } 19 20 public void setPid(int pid) { 21 this.pid = pid; 22 } 23 24 public int getType() { 25 return type; 26 } 27 28 public void setType(int type) { 29 this.type = type; 30 } 31 32 public int getRootId() { 33 return rootId; 34 } 35 36 public void setRootId(int rootId) { 37 this.rootId = rootId; 38 } 39 }
1 /** 2 * 模块 3 */ 4 public class Module { 5 private int id; 6 private int pid; 7 private String pids; 8 private String code; 9 private String name; 10 private String icon; 11 private String url; 12 private int levels; 13 private int type; 14 private int orderNum; 15 private Boolean isValid; 16 private String remarks; 17 @JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone="GMT+8") 18 private Date createTime; 19 @JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone="GMT+8") 20 private Date editTime; 21 private int editor; 22 private String editorName; 23 24 private String pname; 25 26 public int getId() { 27 return id; 28 } 29 30 public void setId(int id) { 31 this.id = id; 32 } 33 34 public int getPid() { 35 return pid; 36 } 37 38 public void setPid(int pid) { 39 this.pid = pid; 40 } 41 42 public String getPids() { 43 return pids; 44 } 45 46 public void setPids(String pids) { 47 this.pids = pids; 48 } 49 50 public String getCode() { 51 return code; 52 } 53 54 public void setCode(String code) { 55 this.code = code; 56 } 57 58 public String getName() { 59 return name; 60 } 61 62 public void setName(String name) { 63 this.name = name; 64 } 65 66 public String getIcon() { 67 return icon; 68 } 69 70 public void setIcon(String icon) { 71 this.icon = icon; 72 } 73 74 public String getUrl() { 75 return url; 76 } 77 78 public void setUrl(String url) { 79 this.url = url; 80 } 81 82 public int getLevels() { 83 return levels; 84 } 85 86 public void setLevels(int levels) { 87 this.levels = levels; 88 } 89 90 public int getType() { 91 return type; 92 } 93 94 public void setType(int type) { 95 this.type = type; 96 } 97 98 public int getOrderNum() { 99 return orderNum; 100 } 101 102 public void setOrderNum(int orderNum) { 103 this.orderNum = orderNum; 104 } 105 106 public Boolean getIsValid() { 107 return isValid; 108 } 109 110 public void setIsValid(Boolean valid) { 111 isValid = valid; 112 } 113 114 public String getRemarks() { 115 return remarks; 116 } 117 118 public void setRemarks(String remarks) { 119 this.remarks = remarks; 120 } 121 122 public Date getCreateTime() { 123 return createTime; 124 } 125 126 public void setCreateTime(Date createTime) { 127 this.createTime = createTime; 128 } 129 130 public Date getEditTime() { 131 return editTime; 132 } 133 134 public void setEditTime(Date editTime) { 135 this.editTime = editTime; 136 } 137 138 public int getEditor() { 139 return editor; 140 } 141 142 public void setEditor(int editor) { 143 this.editor = editor; 144 } 145 146 public String getEditorName() { 147 return editorName; 148 } 149 150 public void setEditorName(String editorName) { 151 this.editorName = editorName; 152 } 153 154 public String getPname() { 155 return pname; 156 } 157 158 public void setPname(String pname) { 159 this.pname = pname; 160 } 161 }
1 <?xml version="1.0" encoding="UTF-8" ?> 2 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" > 3 <mapper namespace="xyz.txfan.tqms.mng.mapper.ModuleMapper"> 4 <resultMap type="xyz.txfan.tqms.mng.entity.model.Module" id="ModuleResultMap"> 5 <id column="id" property="id"/> 6 <result column="pid" property="pid"/> 7 <result column="pids" property="pids"/> 8 <result column="code" property="code"/> 9 <result column="name" property="name"/> 10 <result column="icon" property="icon"/> 11 <result column="url" property="url"/> 12 <result column="levels" property="levels"/> 13 <result column="type" property="type"/> 14 <result column="order_num" property="orderNum"/> 15 <result column="is_valid" property="isValid"/> 16 <result column="remarks" property="remarks"/> 17 <result column="create_time" property="createTime"/> 18 <result column="edit_time" property="editTime"/> 19 <result column="editor" property="editor"/> 20 <result column="editor_name" property="editorName"/> 21 </resultMap> 22 <sql id="columns"> 23 id, pid, pids, code, name , icon, url, levels, type ,order_num, is_valid, remarks, 24 create_time, edit_time, editor, editor_name 25 </sql> 26 <select id="select" resultMap="ModuleResultMap"> 27 select 28 <include refid="columns"/> 29 from ts_module 30 where 1 = 1 31 <if test="pid != null and pid != -1 "> 32 and pid = #{pid} 33 </if> 34 <if test="type != null and type !=''"> 35 and type = #{type} 36 </if> 37 </select> 38 <select id="get" resultMap="ModuleResultMap" parameterType="xyz.txfan.tqms.mng.entity.model.Module"> 39 select * from (select 40 <include refid="columns"/> 41 from ts_module 42 where id = #{id}) t left join (select name as pname, id as _pid from ts_module) u on t.pid = u._pid 43 </select> 44 <insert id="add" parameterType="xyz.txfan.tqms.mng.entity.model.Module"> 45 insert into ts_module(pid, pids, code, name , icon, url, levels, type ,order_num, is_valid, remarks, 46 create_time, edit_time, editor, editor_name) 47 values(#{pid}, #{pids}, #{code}, #{name} , #{icon}, #{url}, #{levels}, #{type} ,#{order_num}, #{is_valid}, #{remarks}, #{createTime}, #{editTime}, #{editor}, #{editorName}) 48 </insert> 49 <update id="edit" parameterType="xyz.txfan.tqms.mng.entity.model.Module"> 50 update ts_module 51 <set> 52 <if test="realname!=null and realname!=''"> 53 realname = #{realname}, 54 </if> 55 <if test="sex!=null and sex!=''"> 56 sex = #{sex}, 57 </if> 58 <if test="mail!=null and mail!=''"> 59 mail = #{mail}, 60 </if> 61 <if test="phone!=null and phone!=''"> 62 phone = #{phone}, 63 </if> 64 <if test="remarks!=null and remarks!=''"> 65 remarks = #{remarks}, 66 </if> 67 <if test="status!=null and status!=''"> 68 status = #{status}, 69 </if> 70 edit_time = #{editTime}, 71 editor = #{editor}, 72 editor_name = #{editorName}, 73 </set> 74 where id = #{id} 75 </update> 76 </mapper>