增加路由备注

src/views/permission/menu.vue

@@ -2,34 +2,19 @@
   <div class="app-container">
     <p>管理动态路由</p>
     <el-button type="primary" @click="addFirst">添加第一级路由</el-button>
-    <el-tree
-      :data="data"
-      node-key="id"
-      default-expand-all
-      :props="defaultProps"
-      :expand-on-click-node="false">
+    <el-tree :data="data" node-key="id" default-expand-all :props="defaultProps" :expand-on-click-node="false">
       <span class="custom-tree-node" slot-scope="{ node, data }">
         <span>{{ node.label }}</span>
         <span>
           <svg-icon v-if="!convertToBool(data.hidden)" icon-class="eye-open" />
           <svg-icon v-else icon-class="eye" />
-          <el-button
-            type="text"
-            size="mini"
-            @click="() => append(data)"
-            v-if="!data.parentId || data.parentId == 0">
+          <el-button type="text" size="mini" @click="() => append(data)" v-if="!data.parentId || data.parentId == 0">
             添加子路由
           </el-button>
-          <el-button
-            type="text"
-            size="mini"
-            @click="() => edit(data)">
+          <el-button type="text" size="mini" @click="() => edit(data)">
             修改路由
           </el-button>
-          <el-button
-            type="text"
-            size="mini"
-            @click="() => remove(data)">
+          <el-button type="text" size="mini" @click="() => remove(data)">
             删除路由
           </el-button>
         </span>
@@ -44,16 +29,19 @@
         <el-form-item label="名称" prop="name">
           <el-input v-model="permission.name" placeholder="路由名称" />
         </el-form-item>
+        <el-form-item label="路由备注">
+          <el-input v-model="permission.menuExplain" placeholder="路由备注" />
+        </el-form-item>
         <el-form-item label="组件名称" prop="component">
           <el-input v-model="permission.component" placeholder="组件名称" />
         </el-form-item>
-        <el-form-item label="重定向路径" >
+        <el-form-item label="重定向路径">
           <el-input v-model="permission.redirect" placeholder="重定向路径" />
         </el-form-item>
         <el-form-item label="主题" prop="meta.title">
           <el-input v-model="permission.meta.title" placeholder="路由主题" />
         </el-form-item>
-        <el-form-item label="图标" >
+        <el-form-item label="图标">
           <el-input v-model="permission.meta.icon" placeholder="路由图标" />
         </el-form-item>
         <el-form-item label="高亮菜单">
@@ -67,9 +55,9 @@
         <el-checkbox v-model="permission.meta.breadcrumb" label="面包屑"></el-checkbox>
       </el-form>
 
-      <br/>
+      <br />
       <div style="text-align:right;">
-        <el-button type="danger" @click="dialogVisible=false" >取消</el-button>
+        <el-button type="danger" @click="dialogVisible = false">取消</el-button>
         <el-button type="primary" @click="comfirmMenu">提交</el-button>
       </div>
     </el-dialog>
@@ -115,19 +103,19 @@ export default {
         children: 'children',
         label: 'title'
       },
-      rules:{
-        path:[{
-          required: true, validator:pathValid, trigger: "blur"
+      rules: {
+        path: [{
+          required: true, validator: pathValid, trigger: "blur"
         }],
-        name:[{ required: true, message: "请输入名称", trigger: "blur" }],
-        component:[{ required: true, message: "请输入组件名称", trigger: "blur" }],
-        'meta.title':[{required: true, message: "请输入主题", trigger: "blur"}]
+        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
+        component: [{ required: true, message: "请输入组件名称", trigger: "blur" }],
+        'meta.title': [{ required: true, message: "请输入主题", trigger: "blur" }]
       }
 
     }
   },
 
-  created(){
+  created() {
     this.getMenuData()
   },
 
@@ -147,14 +135,14 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-          deleteMenu(data.id).then(res=>{
-            if(res.status == 'success'){
+        deleteMenu(data.id).then(res => {
+          if (res.status == 'success') {
             this.getMenuData()
             this.$message({
               type: 'success',
               message: '删除成功!'
             })
-            }else{
+          } else {
             this.$message.error(res.data)
           }
         })
@@ -171,17 +159,17 @@ export default {
       this.dialogVisible = true
     },
 
-    addFirst(){
+    addFirst() {
       this.permission = deepClone(defaultPermisson)
       this.dialogType = 'new'
       this.dialogVisible = true
       this.dialogTitle = '新增一级菜单'
     },
 
-    async comfirmMenu(){
-      this.$refs.form.validate((valid)=>{
-        if(valid){
-          if ( this.dialogType === 'edit') {
+    async comfirmMenu() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          if (this.dialogType === 'edit') {
             // 修改菜单信息
             // 整理boolean属性
             let submitMenu = deepClone(this.permission)
@@ -193,26 +181,29 @@ export default {
             submitMenu.meta.affix = this.convertToNumber(submitMenu.meta.affix)
             submitMenu.meta.breadcrumb = this.convertToNumber(submitMenu.meta.breadcrumb)
 
-        editMenu(submitMenu).then((res)=>{
-          if(res.status=="success"){
+            editMenu(submitMenu).then((res) => {
+              if (res.status == "success") {
+                this.getMenuData()
                 this.$message({
                   type: 'success',
                   message: '修改成功!'
                 })
-          }else{
+              } else {
                 this.$message({
                   type: 'error',
                   message: res.data
                 })
               }
-        }).catch(err=>{
+            }).catch(err => {
               this.$message({
                 type: 'error',
                 message: '修改失败!'
               })
             })
             this.dialogVisible = false
-        this.getMenuData()
+            // setTimeout(() => {
+            //   this.getMenuData()
+            // }, 500);
             this.permission = defaultPermisson
           } else {
             // 添加菜单信息
@@ -225,21 +216,21 @@ export default {
             submitMenu.meta.affix = this.convertToNumber(submitMenu.meta.affix)
             submitMenu.meta.breadcrumb = this.convertToNumber(submitMenu.meta.breadcrumb)
 
-        addMenu(submitMenu).then((res)=>{
-            if(res.status == "success"){
+            addMenu(submitMenu).then((res) => {
+              if (res.status == "success") {
                 this.$message({
                   type: 'success',
                   message: '添加成功!'
                 })
                 this.getMenuData()
-            }else{
+              } else {
                 this.$message({
                   type: 'error',
                   message: res.data
                 })
               }
 
-          }).catch(err=>{
+            }).catch(err => {
               this.$message({
                 type: 'error',
                 message: '添加失败!'
@@ -253,7 +244,7 @@ export default {
       })
     },
 
-    async getMenuData(){
+    async getMenuData() {
       // 请求后端，获取动态路由tree
       let res = await getMenuTree()
       // 按el-tree组件的要求，整理数据结构
@@ -266,7 +257,7 @@ export default {
       for (let route of routes) {
         const data = route
         // 将路由里面的title元数据，赋给data的title属性
-        data.title = route.meta && route.meta.title
+        data.title = route.meta && route.meta.title,//route.meta && route.meta.title
 
           // 将路由里面的相关属性的值，改成boolean类型
           data.hidden = this.convertToBool(data.hidden)
@@ -283,11 +274,11 @@ export default {
       }
       return res
     },
-    convertToBool(v){
-      return v==0?false:true
+    convertToBool(v) {
+      return v == 0 ? false : true
     },
-    convertToNumber(v){
-      return v?1:0
+    convertToNumber(v) {
+      return v ? 1 : 0
     }
   }
 };
@@ -298,10 +289,12 @@ export default {
   .roles-table {
     margin-top: 30px;
   }
+
   .permission-tree {
     margin-bottom: 30px;
   }
 }
+
 .custom-tree-node {
   flex: 1;
   display: flex;

src/views/permission/role.vue

@@ -159,7 +159,7 @@ export default {
         if(route.id != 1){
           const data = {
             path: path.resolve(basePath, route.path),
-            title: route.meta && route.meta.title,
+            title: route.meta && (route.menuExplain ? `${route.meta.title}（${route.menuExplain}）`: route.meta.title),
             id: route.id
           }
           if (route.children.length>0) {