指令权限

src/store/modules/user.js

@@ -8,7 +8,8 @@ const state = {
   avatar: '',
   introduction: '',
   roles: [],
-  menus: []
+  menus: [],
+  permissions: []
 }
 
 const mutations = {
@@ -30,6 +31,9 @@ const mutations = {
   SET_MENUS: (state, menus) => {
     state.menus = menus
   },
+  SET_PERMISSIONS: (state, permissions) => {
+    state.permissions = permissions
+  },
   SET_ROLEDESC: (state, roleDesc) => {
     state.roleDesc = roleDesc
   },
@@ -70,7 +74,7 @@ const actions = {
             reject('Verification failed, please Login again.')
           }
 
-          const { roles, menus, id, username, avatar, roleDesc, fullName, phone } = data
+          const { roles, menus, permissions, id, username, avatar, roleDesc, fullName, phone } = data
 
           // roles must be a non-empty array
           if (!roles || roles.length <= 0) {
@@ -79,6 +83,7 @@ const actions = {
 
           commit('SET_ROLES', roles)
           commit('SET_MENUS', menus)
+          commit('SET_PERMISSIONS', permissions)
           commit('SET_USERID', id)
           commit('SET_USERNAME', username)
           commit('SET_AVATAR', avatar)

src/views/sys/menus/form.vue

@@ -35,6 +35,28 @@
         <el-form-item label="排序:">
           <el-input v-model="menu.sort" />
         </el-form-item>
+        <el-form-item v-if="null === menu.childCount || menu.childCount === 0" label="按钮权限:" prop="permissionJson">
+          <el-table row-key="title" :data="permissions" border highlight-current-row>
+            <el-table-column label="按钮标题" prop="title" align="center">
+              <template slot-scope="{row}">
+                <el-input v-model="row.title" />
+              </template>
+            </el-table-column>
+            <el-table-column label="权限标识" prop="name" align="center">
+              <template slot-scope="{row}">
+                <el-input v-model="row.name" />
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center">
+              <template slot-scope="{row}">
+                <el-button size="mini" type="danger" @click="handlePermissionDelete(row)">删除按钮</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="permission-btn">
+            <el-button type="primary" @click="handlePermissionCreate">添加按钮</el-button>
+          </div>
+        </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="onSubmit('menuFrom')">提交</el-button>
           <el-button v-if="!isEdit" type="info" @click="resetForm('menuFrom')">重置</el-button>
@@ -54,8 +76,15 @@ const defaultMenu = {
   hidden: 0,
   status: 0,
   sort: 0,
+  childCount: 0,
+  permissionJson: '',
   parentId: 0
 }
+const defaultPermission = {
+  id: 0,
+  name: '',
+  title: ''
+}
 export default {
   name: 'SysMenuEdit',
   data() {
@@ -66,6 +95,8 @@ export default {
       },
       parentTitle: '',
       menu: Object.assign({}, defaultMenu),
+      permissions: [],
+      disableNextLevel: false,
       isEdit: false
     }
   },
@@ -99,6 +130,10 @@ export default {
           this.menu.status = response.data.status
           this.menu.sort = response.data.sort
           this.menu.parentId = response.data.parentId
+          this.menu.childCount = response.data.childCount
+          if (response.data.permissions) {
+            this.permissions = response.data.permissions
+          }
         })
       } else {
         this.menu.id = ''
@@ -119,6 +154,7 @@ export default {
       this.getFormData()
     },
     onSubmit(formName) {
+      this.menu.permissionJson = JSON.stringify(this.permissions)
       this.$refs[formName].validate(valid => {
         if (valid) {
           this.$confirm('是否提交数据', '提示', {
@@ -158,10 +194,28 @@ export default {
           return false
         }
       })
+    },
+    handlePermissionDelete(row) {
+      const temp = this.permissions
+      const newList = []
+      temp.forEach(item => {
+        if (item.id !== row.id) {
+          newList.push(item)
+        }
+      })
+      this.permissions = newList
+    },
+    handlePermissionCreate() {
+      this.permissions.push(Object.assign({}, defaultPermission))
     }
   }
 }
 </script>
 
 <style scoped>
+.permission-btn{
+  text-align: center;
+  padding:15px 0;
+  border-bottom: 1px solid #e6ebf5;
+}
 </style>

src/views/sys/menus/list.vue

@@ -42,7 +42,6 @@
         <template slot-scope="{row}">
           <el-button plain size="mini" :disabled="row.childCount | disableNextLevel" @click="handleShowNextLevel(row)">查看子菜单</el-button>
           <el-button plain size="mini" @click="handleCreateNextLevel(row)">添加子菜单</el-button>
-          <!-- <el-button plain size="mini" @click="handleCreatePermission(row)">添加按钮权限</el-button> -->
         </template>
       </el-table-column>
       <el-table-column label="操作" width="150" align="center">
@@ -57,49 +56,16 @@
 
     <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
 
-    <!-- <el-dialog title="添加按钮权限" :visible.sync="dialogFormVisible">
-      <el-form :model="permission">
-        <el-form-item label="当前菜单:" label-width="150px">
-          <el-input v-model="menuTitle" readonly />
-          <input v-model="menuId" type="hidden">
-        </el-form-item>
-        <el-form-item label="权限名称:" label-width="150px">
-          <el-input v-model="form.name" autocomplete="off" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">取 消</el-button>
-        <el-button type="primary" @click="submitPermission">确 定</el-button>
-      </div>
-    </el-dialog> -->
-
   </div>
 </template>
 
 <script>
 import { fetchList, deleteMenu, updateSelective } from '@/api/sys/menu'
 import Pagination from '@/components/Pagination'
-// const defaultPermission = {
-//   id: 0,
-//   name: '',
-//   desc: '',
-//   menuId: 0,
-//   menuTitle: ''
-// }
 export default {
   name: 'SysMenuList',
   components: { Pagination },
   filters: {
-    iconFilter(value) {
-      if (!value) {
-        return ''
-      }
-      if (value.substr(0, 7) === 'el-icon') {
-        return '<i class="' + value + '" />'
-      } else {
-        return '<svg-icon :icon-class="' + value + '" />'
-      }
-    },
     disableNextLevel(value) {
       if (value === 0) {
         return true
@@ -126,9 +92,6 @@ export default {
         { label: '启用', key: '0' },
         { label: '停用', key: '1' }
       ]
-      // ,
-      // dialogFormVisible: false,
-      // permission: Object.assign({}, defaultPermission)
     }
   },
   watch: {
@@ -189,17 +152,6 @@ export default {
     handleCreateNextLevel(row) {
       this.$router.push({ path: '/sys/menus/add', query: { parentId: row.id, title: row.title }})
     },
-    // handleCreatePermission(row) {
-    //   // 添加按钮权限
-    //   this.permission.menuId = row.id
-    //   this.permission.menuTitle = row.title
-    //   this.dialogFormVisible = true
-    // },
-    // submitPermission() {
-    //   // 提交菜单权限
-    //   // todo
-
-    // },
     handleDelete(row) {
       this.$confirm('是否要删除该菜单', '提示', {
         confirmButtonText: '确定',

src/views/sys/roles/form.vue

@@ -10,7 +10,7 @@
           <el-input v-model="role.roleDesc" maxlength="20" />
         </el-form-item>
         <el-form-item label="角色授权：">
-          <el-tree ref="tree" :data="menuTree" node-key="id" :props="menuProps" show-checkbox default-expand-all check-strictly="true" @check-change="handleTreeChange" />
+          <el-tree ref="tree" :data="menuTree" node-key="id" :props="menuProps" show-checkbox default-expand-all check-strictly />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="onSubmit('roleFrom')">提交</el-button>