动态路由删除修改等操作

QMPlusVuePage/src/view/superAdmin/authority/authority.vue

@@ -44,11 +44,11 @@
     <el-dialog :visible.sync="menuDialogFlag" title="关联菜单">
       <el-tree
         :data="treeData"
+        :default-checked-keys="treeIds"
         :props="defaultProps"
         default-expand-all
         highlight-current
         node-key="ID"
-        :default-checked-keys="treeIds"
         ref="tree"
         show-checkbox
       ></el-tree>
@@ -67,6 +67,7 @@ import {
   createAuthority
 } from '@/api/authority'
 import { getBaseMenuTree, addMenuAuthority, getMenuAuthority } from '@/api/menu'
+import { mapActions } from 'vuex'
 export default {
   name: 'Authority',
   data() {
@@ -77,7 +78,7 @@ export default {
       pageSize: 10,
       tableData: [],
       treeData: [],
-      treeIds:[],
+      treeIds: [],
       defaultProps: {
         children: 'children',
         label: 'nickName'
@@ -91,6 +92,8 @@ export default {
     }
   },
   methods: {
+    ...mapActions('router', ['SetAsyncRouter']),
+
     // 条数
     handleSizeChange(val) {
       this.pageSize = val
@@ -109,19 +112,12 @@ export default {
         type: 'warning'
       })
         .then(async () => {
-          try {
-            const res = await deleteAuthority({ authorityId: row.authorityId })
-            this.$message({
-              type: 'success',
-              message: '删除成功!'
-            })
-            this.getAuthList()
-          } catch (err) {
-            this.$message({
-              type: 'error',
-              message: '删除失败!' + err
-            })
-          }
+          const res = await deleteAuthority({ authorityId: row.authorityId })
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          })
+          this.getAuthList()
         })
         .catch(() => {
           this.$message({
@@ -152,12 +148,6 @@ export default {
         })
         this.getAuthList()
         this.closeDialog()
-      } else {
-        this.$message({
-          type: 'error',
-          message: '添加失败!'
-        })
-        this.closeDialog()
       }
       this.initForm()
       this.dialogFormVisible = false
@@ -168,26 +158,24 @@ export default {
     },
     // 获取用户列表
     async getAuthList(page = this.page, pageSize = this.pageSize) {
-      try {
-        const table = await getAuthorityList({ page, pageSize })
-        this.tableData = table.data.authList
-      } catch (err) {
-        console.log(err)
-      }
+      const table = await getAuthorityList({ page, pageSize })
+      this.tableData = table.data.authList
     },
+    // 关联用户列表关系
     async addAuthMenu(row) {
-      const res1 = await getMenuAuthority({authorityId:row.authorityId})
+      const res1 = await getMenuAuthority({ authorityId: row.authorityId })
       const menus = res1.data.menus
       const arr = []
-      menus.map(item=>{arr.push(Number(item.menuId))})
+      menus.map(item => {
+        arr.push(Number(item.menuId))
+      })
       this.treeIds = arr
       const res2 = await getBaseMenuTree()
       this.treeData = res2.data.menus
-      console.log(this.treeData)
       this.activeUserId = row.authorityId
       this.menuDialogFlag = true
     },
-    // 关联树
+    // 关联树 确认方法
     async relation() {
       const checkArr = this.$refs.tree
         .getCheckedNodes()
@@ -201,6 +189,7 @@ export default {
           type: 'success',
           message: '添加成功!'
         })
+        this.SetAsyncRouter()
       }
       this.closeDialog()
     }
@@ -208,7 +197,6 @@ export default {
   },
   created() {
     this.getAuthList()
-    
   }
 }
 </script>

QMPlusVuePage/src/view/superAdmin/menu/menu.vue

@@ -4,24 +4,29 @@
       <el-button @click="addMenu('0')" type="primary">新增根菜单</el-button>
     </div>
     <el-table :data="tableData" border stripe>
-      <el-table-column label="ID" min-width="80" prop="ID"></el-table-column>
-      <el-table-column label="路径" min-width="180" prop="path"></el-table-column>
-      <el-table-column label="名称" min-width="180" prop="name"></el-table-column>
-      <el-table-column label="是否隐藏" min-width="180" prop="hidden"></el-table-column>
-      <el-table-column label="父节点Id" min-width="180" prop="parentId"></el-table-column>
-      <el-table-column label="文件路径" min-width="180" prop="component"></el-table-column>
-      <el-table-column label="展示名称" min-width="180" prop="authorityName">
+      <el-table-column label="ID" min-width="40" prop="ID"></el-table-column>
+      <el-table-column label="路径" min-width="100" prop="path"></el-table-column>
+      <el-table-column label="名称" min-width="100" prop="name"></el-table-column>
+      <el-table-column label="是否隐藏" min-width="80" prop="hidden">
+        <template slot-scope="scope">
+          <span>{{scope.row.hidden?"隐藏":"显示"}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="父节点Id" min-width="70" prop="parentId"></el-table-column>
+      <el-table-column label="文件路径" min-width="250" prop="component"></el-table-column>
+      <el-table-column label="展示名称" min-width="80" prop="authorityName">
         <template slot-scope="scope">
           <span>{{scope.row.meta.title}}</span>
         </template>
       </el-table-column>
-       <el-table-column label="图标" min-width="180" prop="authorityName">
+      <el-table-column label="图标" min-width="180" prop="authorityName">
         <template slot-scope="scope">
           <span>{{scope.row.meta.icon}}</span>
         </template>
       </el-table-column>
-      <el-table-column fixed="right" label="操作" width="100">
+      <el-table-column fixed="right" label="操作" width="300">
         <template slot-scope="scope">
+          <el-button @click="deleteMenu(scope.row.ID)" size="small" type="text">删除菜单</el-button>
           <el-button @click="addMenu(scope.row.ID)" size="small" type="text">添加子菜单</el-button>
         </template>
       </el-table-column>
@@ -74,7 +79,8 @@
 </template>
 
 <script>
-import { getMenuList, addBaseMenu } from '@/api/menu'
+import { getMenuList, addBaseMenu, deleteBaseMenu } from '@/api/menu'
+import { mapActions } from 'vuex'
 export default {
   name: 'Menus',
   data() {
@@ -98,6 +104,7 @@ export default {
     }
   },
   methods: {
+    ...mapActions('router',['SetAsyncRouter']),
     handleSizeChange(val) {
       this.pageSize = val
       this.getMenuList()
@@ -106,26 +113,20 @@ export default {
       this.page = val
       this.getMenuList()
     },
-    deleteAuth(row) {
+    deleteMenu(ID) {
       this.$confirm('此操作将永久删除所有角色下该菜单, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       })
         .then(async () => {
-          try {
-            const res = await deleteAuthority({ authorityId: row.authorityId })
-            this.$message({
-              type: 'success',
-              message: '删除成功!'
-            })
-            this.getAuthList()
-          } catch (err) {
-            this.$message({
-              type: 'error',
-              message: '删除失败!' + err
-            })
-          }
+          const res = await deleteBaseMenu({ ID })
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          })
+          this.getMenuList()
+          this.SetAsyncRouter()
         })
         .catch(() => {
           this.$message({
@@ -175,8 +176,8 @@ export default {
       this.dialogFormVisible = true
     },
     async getMenuList(page = this.page, pageSize = this.pageSize) {
-        const table = await getMenuList({ page, pageSize })
-        this.tableData = table.data.menuList
+      const table = await getMenuList({ page, pageSize })
+      this.tableData = table.data.menuList
     }
   },
   created() {