权限项列表

.gitignore

@@ -13,6 +13,7 @@ yarn-error.log*
 package-lock.json
 yarn.lock
 index-1.js
+todo.md
 
 # Editor directories and files
 .idea

src/api/permission.js

@@ -5,6 +5,11 @@ const api = {
   addMenu: '/menu-add', // 添加菜单、添加子菜单
   editMenu: '/menu-edit', // 编辑菜单
   delMenu: '/menu-del', // 删除菜单
+  addAuthItem: '/add-auth-item', // 添加权限项
+  editAuthItem: '/edit-auth-item', // 编辑权限项
+  delAuthItem: '/del-auth-item', // 删除权限项
+  getAuthItemList: '/auth-item-list', // 获取权限项列表
+  getOperationItemList: '/operation-item-list', // 获取操作项列表
 }
 
 export default getFetch(api, '/hb-manage-web');

src/layout/layout.vue

 <template>
   <div class="layout">
     <yw-header @updateAsideMenu="updateAsideMenu"></yw-header>
+    <aside-menu :menu="menu"></aside-menu>
     <div class="main">
-      <aside-menu :menu="menu"></aside-menu>
+      <el-breadcrumb separator-class="el-icon-arrow-right" v-if="breadList.length">
+        <el-breadcrumb-item v-for="item in breadList" :key="item" :to="{ path: item.path }">{{ item.name }}</el-breadcrumb-item>
+      </el-breadcrumb>
       <keep-alive>
-        <router-view v-if="$route.meta.keepAlive" :key="$route.fullPath"></router-view>
+        <router-view v-if="$route.meta.keepAlive" :key="$route.fullPath" @updateBread="updateBread"></router-view>
       </keep-alive>
-      <router-view v-if="!$route.meta.keepAlive" :key="$route.fullPath"></router-view>
+      <router-view v-if="!$route.meta.keepAlive" :key="$route.fullPath" @updateBread="updateBread"></router-view>
     </div>
   </div>
 </template>
@@ -19,18 +22,22 @@ export default {
   components: { YwHeader, AsideMenu },
   data() {
     return {
-      menu: []
+      menu: [],
+      breadList: []
     }
   },
   methods: {
     updateAsideMenu(menu) {
       this.menu = menu || [];
     },
+    updateBread(val) {
+      this.breadList = val || [];
+    }
   }
 }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 .layout {
   padding: 84px 20px 20px 240px;
   min-width: 1400px;
@@ -42,4 +49,15 @@ export default {
   background: #fff;
   overflow-y: scroll;
 }
+.el-breadcrumb {
+  width: 100%;
+  padding: 17px 20px 18px;
+  background-color: #fff;
+  border-bottom: 1px solid @gray-separator;
+}
+/deep/.el-breadcrumb__inner {
+  a:hover, &.is-link:hover {
+    color: @blue;
+  }
+}
 </style>

src/views/permission/menu-config/menu-list.vue

@@ -187,6 +187,7 @@ export default {
     }
   },
   mounted() {
+    this.menuList = [];
     this.getMenuList();
   },
   methods: {

src/views/permission/permission-list.vue

 <template>
-  <div>权限项列表</div>
+  <div style="padding: 20px">
+    <div style="text-align: right">
+      <el-button type="primary">新建权限项</el-button>
+    </div>
+    <el-table style="margin-top: 20px" :data="authList">
+      <el-table-column label="权限名称" prop="authItemName" :formatter="(row, col, val) => val || '--'"></el-table-column>
+      <el-table-column label="包含操作项" prop="operationItemNames" :formatter="(row, col, val) => val || '--'"></el-table-column>
+      <el-table-column label="操作">
+        <el-button type="text">编辑</el-button>
+        <el-button type="text">删除</el-button>
+      </el-table-column>
+    </el-table>
+    <el-dialog :visible.sync="editAuth.show" :title="editAuth.authItemId ? '编辑权限项' : '新建权限项'" width="600px">
+      <el-form :model="editAuth" ref="editAuth">
+        <el-form-item label="权限项名称">
+          <el-input
+            type="text"
+            placeholder="请输入权限项名称"
+            style="width: 440px"
+            maxlength="20"
+            show-limit-word
+            v-model.trim="editAuth.authItemName"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="包含操作项"></el-form-item>
+      </el-form>
+      <template slot="footer">
+        <el-button @click="editAuth.show = false">取消</el-button>
+        <el-button type="primary" :loading="editAuth.loading">{{ editAuth.authItemId ? '保存' : '新建' }}</el-button>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
+import api from '@/api/permission.js';
+
+// eslint-disable-next-line
+const { addAuthItem, editAuthItem, delAuthItem, getAuthItemList, getOperationItemList } = api;
+
 export default {
-  name: 'permission-list'
+  name: 'permission-list',
+  data() {
+    return {
+      bread: [
+        { path: '/menu-config', name: '权限配置'},
+        { name: '权限项'}
+      ],
+      menuId: '',
+      // 操作项列表
+      operationList: [],
+      // 权限项列表
+      authList: [],
+      // 新建、编辑权限项弹窗相关的数据
+      editAuth: {
+        show: true,
+        loading: false,
+        authItemId: '',
+        authItemName: '',
+        operationItemNames: '',
+        operationItemIds: ''
+      }
+    }
+  },
+  created() {
+    const { menuId } = this.$route.query;
+    if (!menuId) {
+      return this.$router.go(-1);
+    }
+    this.menuId = menuId;
+    this.initData();
+    this.$emit('updateBread', this.bread)
+  },
+  methods: {
+    initData() {
+      this.getAuthItemList();
+      return;
+      getOperationItemList({ menuId: this.menuId }).then(res => {
+        this.operationList = res.result || [];
+      })
+      this.getAuthItemList();
+    },
+    getAuthItemList() {
+      this.authList = [
+        {
+          menuId: '',
+          authItemId: '123',
+          authItemName: '权限项名称123',
+          operationItemNames: '操作项集合123',
+          operationItemIds: ''
+        },
+        {
+          menuId: '',
+          authItemId: '456',
+          authItemName: '权限项名称456',
+          operationItemNames: '操作项集合456',
+          operationItemIds: ''
+        },
+      ]
+      return;
+      getAuthItemList({ menuId: this.menuId }).then(res => {
+        this.authList = res.result || [];
+      })
+    }
+  }
 }
 </script>