动态menu和角色关联以及基础menu构建

2019-09-19 23:48:45 +08:00
parent dc4700c557
commit 968b8c21cd
11 changed files with 516 additions and 64 deletions
--- a/QMPlusVuePage/src/api/menu.js
+++ b/QMPlusVuePage/src/api/menu.js
@@ -9,4 +9,67 @@ export const asyncMenu = () => {
        url: "/menu/getMenu",
        method: 'post',
    })
+}
+
+// @Summary 获取menu列表
+// @Produce  application/json
+// @Param {
+//  page     int
+//	pageSize int
+// }
+// @Router /menu/getMenuList [post]
+export const getMenuList = (data) => {
+    return service({
+        url: "/menu/getMenuList",
+        method: 'post',
+        data
+    })
+}
+
+
+// @Summary 获取menu列表
+// @Produce  application/json
+// @Param menu Object
+// @Router /menu/getMenuList [post]
+export const addBaseMenu = (data) => {
+    return service({
+        url: "/menu/addBaseMenu",
+        method: 'post',
+        data
+    })
+}
+
+// @Summary 获取基础路由列表
+// @Produce  application/json
+// @Param 可以什么都不填 调一下即可
+// @Router /menu/getBaseMenuTree [post]
+export const getBaseMenuTree = () => {
+    return service({
+        url: "/menu/getBaseMenuTree",
+        method: 'post',
+    })
+}
+
+// @Summary 添加用户menu关联关系
+// @Produce  application/json
+// @Param menus Object authorityId string
+// @Router /menu/getMenuList [post]
+export const addMenuAuthority = (data) => {
+    return service({
+        url: "/menu/addMenuAuthority",
+        method: 'post',
+        data
+    })
+}
+
+// @Summary 获取用户menu关联关系
+// @Produce  application/json
+// @Param authorityId string
+// @Router /menu/getMenuAuthority [post]
+export const getMenuAuthority = (data) => {
+    return service({
+        url: "/menu/getMenuAuthority",
+        method: 'post',
+        data
+    })
 }
--- a/QMPlusVuePage/src/view/layout/index.vue
+++ b/QMPlusVuePage/src/view/layout/index.vue
@@ -1,8 +1,6 @@
 <template>
  <el-container class="layout-cont">
-    <el-header class="header-cont">
-   
-    </el-header>
+    <el-header class="header-cont"></el-header>
    <el-container>
      <el-aside class="main-cont main-left">
        <Aside class="aside" />
@@ -12,7 +10,11 @@
        <el-main class="main-cont main-right">
          <!-- 当前面包屑用路由自动生成可根据需求修改 -->
          <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
-            <el-breadcrumb-item v-for="item in matched.slice(1,matched.length)" :key="item.path" :to="{ path: item.path }">{{item.meta.title}}</el-breadcrumb-item>
+            <el-breadcrumb-item
+              :key="item.path"
+              :to="{ path: item.path }"
+              v-for="item in matched.slice(1,matched.length)"
+            >{{item.meta.title}}</el-breadcrumb-item>
          </el-breadcrumb>
          <transition mode="out-in" name="el-fade-in-linear">
            <router-view></router-view>
@@ -38,16 +40,13 @@ export default {
      this.$bus.emit('totalCollapse')
    }
  },
-  computed:{
-    title(){
-      return this.$route.meta.title||'当前页面'
+  computed: {
+    title() {
+      return this.$route.meta.title || '当前页面'
    },
-    matched(){
+    matched() {
      return this.$route.matched
    }
-  },
-  created(){
-    console.log(this.$route.matched)
  }
 }
 </script>
@@ -68,13 +67,13 @@ $mainHight: calc(100vh - 52px);
    background: palevioletred;
  }
  .main-cont {
-    .breadcrumb{
+    .breadcrumb {
      line-height: 24px;
      padding: 6px;
      border-bottom: 1px solid #eee;
      margin-bottom: 6px;
    }
-    &.el-main{
+    &.el-main {
      padding: 0px 10px;
      margin: 0px 0px 0px 12px;
      background: #fff;
--- a/QMPlusVuePage/src/view/superAdmin/menu/menu.vue
+++ b/QMPlusVuePage/src/view/superAdmin/menu/menu.vue
@@ -1,14 +1,194 @@
 <template>
-    <div>
-        新建菜单
+  <div>
+    <div class="button-box clearflex">
+      <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">
+        <template slot-scope="scope">
+          <span>{{scope.row.meta.title}}</span>
+        </template>
+      </el-table-column>
+       <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">
+        <template slot-scope="scope">
+          <el-button @click="addMenu(scope.row.ID)" size="small" type="text">添加子菜单</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :current-page="page"
+      :page-size="pageSize"
+      :page-sizes="[10, 30, 50, 100]"
+      :style="{float:'right',padding:'20px'}"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+      hide-on-single-page
+      layout="total, sizes, prev, pager, next, jumper"
+    ></el-pagination>
+
+    <el-dialog :visible.sync="dialogFormVisible" title="新增角色">
+      <el-form :inline="true" :model="form" label-width="80px">
+        <el-form-item label="路径">
+          <el-input autocomplete="off" v-model="form.path"></el-input>
+        </el-form-item>
+        <el-form-item label="名称">
+          <el-input autocomplete="off" v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item label="是否隐藏">
+          <el-select placeholder="是否在列表隐藏" v-model="form.hidden">
+            <el-option :value="false" label="否"></el-option>
+            <el-option :value="true" label="是"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="父节点Id">
+          <el-input autocomplete="off" disabled v-model="form.parentId"></el-input>
+        </el-form-item>
+        <el-form-item label="文件路径">
+          <el-input autocomplete="off" v-model="form.component"></el-input>
+        </el-form-item>
+        <el-form-item label="展示名称">
+          <el-input autocomplete="off" v-model="form.meta.title"></el-input>
+        </el-form-item>
+        <el-form-item label="图标">
+          <el-input autocomplete="off" v-model="form.meta.icon"></el-input>
+        </el-form-item>
+      </el-form>
+      <div class="dialog-footer" slot="footer">
+        <el-button @click="closeDialog">取 消</el-button>
+        <el-button @click="enterDialog" type="primary">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>

 <script>
+import { getMenuList, addBaseMenu } from '@/api/menu'
 export default {
-    name:"Menus",
+  name: 'Menus',
+  data() {
+    return {
+      page: 1,
+      total: 10,
+      pageSize: 10,
+      tableData: [],
+      dialogFormVisible: false,
+      form: {
+        path: '',
+        name: '',
+        hidden: '',
+        parentId: '',
+        component: '',
+        meta: {
+          title: '',
+          icon: ''
+        }
+      }
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      this.pageSize = val
+      this.getMenuList()
+    },
+    handleCurrentChange(val) {
+      this.page = val
+      this.getMenuList()
+    },
+    deleteAuth(row) {
+      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
+            })
+          }
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          })
+        })
+    },
+    initForm() {
+      this.form = {
+        path: '',
+        name: '',
+        hidden: '',
+        parentId: '',
+        component: '',
+        meta: {
+          title: '',
+          icon: ''
+        }
+      }
+    },
+    closeDialog() {
+      this.initForm()
+      this.dialogFormVisible = false
+    },
+    async enterDialog() {
+      const res = await addBaseMenu(this.form)
+      if (res.success) {
+        this.$message({
+          type: 'success',
+          message: '添加成功!'
+        })
+        this.getAuthList()
+        this.closeDialog()
+      } else {
+        this.$message({
+          type: 'error',
+          message: '添加失败!'
+        })
+        this.closeDialog()
+      }
+      this.initForm()
+      this.dialogFormVisible = false
+    },
+    addMenu(id) {
+      this.form.parentId = String(id)
+      this.dialogFormVisible = true
+    },
+    async getMenuList(page = this.page, pageSize = this.pageSize) {
+        const table = await getMenuList({ page, pageSize })
+        this.tableData = table.data.menuList
+    }
+  },
+  created() {
+    this.getMenuList()
+  }
 }
 </script>
 <style lang="scss">
-    
+.button-box {
+  padding: 10px 20px;
+  .el-button {
+    float: right;
+  }
+}
 </style>