update

src/api/system/power/menu.js

@@ -25,6 +25,15 @@ export function menuEdit(id, parameter) {
   })
 }
 
+export function saveChange(parameter) {
+  return request({
+    url: '/menu/save_change',
+    method: 'put',
+    data: parameter
+
+  })
+}
+
 export function menuDetail(id) {
   return request({
     url: '/menu/' + id + '/detail',

src/store/getters.js

@@ -8,6 +8,8 @@ const getters = {
   token: state => state.user.token,
   avatar: state => state.user.avatar,
   name: state => state.user.name,
+  menus: state => state.user.menus,
+  is_admin: state => state.user.is_admin,
   announcements: state => state.user.announcements,
   addRouters: state => state.permission.addRouters,
   multiTab: state => state.app.multiTab,

src/store/modules/user.js

@@ -8,8 +8,9 @@ const getDefaultState = () => {
     name: '',
     avatar: '',
     user_info: null,
-    announcements: null
-
+    announcements: null,
+    menus: null,
+    is_admin: false
   }
 }
 
@@ -33,6 +34,12 @@ const mutations = {
   },
   SET_ANNOUNCEMENTS: (state, announcements) => {
     state.announcements = announcements
+  },
+  SET_MENUS: (state, menus) => {
+    state.menus = menus
+  },
+  SET_IS_ADMIN: (state, is_admin) => {
+    state.is_admin = is_admin
   }
 }
 
@@ -82,12 +89,14 @@ const actions = {
           return reject('获取配置失败，请重新登录')
         }
 
-        const { user_info, announcements } = data
+        const { user_info, announcements, menus, is_admin } = data
 
         commit('SET_USER_INFO', user_info)
         commit('SET_NAME', user_info.name)
         commit('SET_AVATAR', user_info.avatar_full_url)
+        commit('SET_MENUS', menus)
         commit('SET_ANNOUNCEMENTS', announcements)
+        commit('SET_IS_ADMIN', is_admin)
 
         resolve(data)
       }).catch(error => {

src/utils/request.js

@@ -2,6 +2,7 @@ import axios from 'axios'
 import { Message } from 'element-ui'
 import store from '@/store'
 import { getToken } from '@/utils/auth'
+import router from '@/router'
 // create an axios instance
 const service = axios.create({
   baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
@@ -62,11 +63,13 @@ service.interceptors.response.use(
         Message.error('无权操作')
         break
       case 401:
-        Message.error('请先登录')
         if (token) {
           Message.error('登录已过期')
           store.dispatch('user/resetToken')
+        } else {
+          Message.error('请先登录')
         }
+        router.push('/login')
         break
       default:
         Message({

src/utils/util.js

+import { Message } from 'element-ui'
+import store from '../store'
+
 export function listToTree(list, tree, parentId) {
   list.forEach(item => {
     // 判断是否为父级菜单
@@ -33,3 +36,23 @@ export function deepClone(source) {
   })
   return targetObj
 }
+
+export function getRoleAction(menus, action, router) {
+  const parentMatchedRoute = router.matched[router.matched.length - 2]
+  const parent_name = parentMatchedRoute.name
+  const role_action = []
+  action.forEach((action) => {
+    if (menus.find(item => item.key === parent_name + '.' + action)) {
+      role_action.push(action)
+    }
+  })
+  return role_action
+}
+
+export function checkRoleAction(action, role_action) {
+  if (!store.getters.is_admin && !role_action.includes(action)) {
+    Message.error('无权操作')
+    return false
+  }
+  return true
+}

src/views/login/index.vue

@@ -55,6 +55,8 @@
 <script>
 // import { validUsername } from '@/utils/validate'
 
+import { Message } from 'element-ui'
+
 export default {
   name: 'Login',
   data() {
@@ -102,7 +104,7 @@ export default {
         if (valid) {
           this.loading = true
           this.$store.dispatch('user/login', this.loginForm).then((res) => {
-            console.log(res)
+            Message.success('登录成功')
             this.$router.push({ path: this.redirect || '/' })
             this.loading = false
           }).catch((error) => {

src/views/system/announcement/index.vue

@@ -54,9 +54,10 @@
 
 <script>
 import { announcementAdd, announcementDel, announcementEdit, announcementList, announcementChange } from '@/api/system/announcement'
-import { deepClone } from '@/utils/util'
+import { checkRoleAction, deepClone, getRoleAction } from '@/utils/util'
 import { Message } from 'element-ui'
 import Pagination from '@/components/Pagination'
+import { mapGetters } from 'vuex'
 
 export default {
   components: { Pagination },
@@ -87,7 +88,13 @@ export default {
     }
   },
   computed: {
-
+    ...mapGetters([
+      'menus'
+    ]),
+    role_action() {
+      const action = ['add', 'edit', 'del', 'change']
+      return getRoleAction(this.menus, action, this.$route)
+    }
   },
   created() {
     this.getAnnouncements()
@@ -105,16 +112,22 @@ export default {
     },
 
     handleAdd() {
+      if (!checkRoleAction('add', this.role_action)) return
+
       this.form = Object.assign({})
       this.dialogType = 'new'
       this.dialogVisible = true
     },
     handleEdit(scope) {
+      if (!checkRoleAction('edit', this.role_action)) return
+
       this.dialogType = 'edit'
       this.dialogVisible = true
       this.form = deepClone(scope.row)
     },
     handleDelete({ $index, row }) {
+      if (!checkRoleAction('del', this.role_action)) return
+
       this.$confirm('确定要删除嘛?', '删除', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -155,6 +168,8 @@ export default {
       this.dialogVisible = false
     },
     handleChange(scope, type) {
+      if (!checkRoleAction('change', this.role_action)) return
+
       const { $index, row } = scope
       this.listLoading = true
       announcementChange(row.id, { type: type })

src/views/system/company/department/index.vue

@@ -52,9 +52,10 @@
 
 <script>
 import { departmentAdd, departmentDel, departmentEdit, departmentList } from '@/api/system/company/department'
-import { deepClone } from '@/utils/util'
+import { checkRoleAction, deepClone, getRoleAction } from '@/utils/util'
 import { Message } from 'element-ui'
 import Pagination from '@/components/Pagination'
+import { mapGetters } from 'vuex'
 
 export default {
   components: { Pagination },
@@ -84,7 +85,13 @@ export default {
     }
   },
   computed: {
-
+    ...mapGetters([
+      'menus'
+    ]),
+    role_action() {
+      const action = ['add', 'edit', 'del']
+      return getRoleAction(this.menus, action, this.$route)
+    }
   },
   created() {
     this.getDepartments()
@@ -102,16 +109,22 @@ export default {
     },
 
     handleAdd() {
+      if (!checkRoleAction('add', this.role_action)) return
+
       this.form = Object.assign({})
       this.dialogType = 'new'
       this.dialogVisible = true
     },
     handleEdit(scope) {
+      if (!checkRoleAction('edit', this.role_action)) return
+
       this.dialogType = 'edit'
       this.dialogVisible = true
       this.form = deepClone(scope.row)
     },
     handleDelete({ $index, row }) {
+      if (!checkRoleAction('del', this.role_action)) return
+
       this.$confirm('确定要删除嘛?', '删除', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',

src/views/system/company/user/edit.vue

@@ -7,7 +7,7 @@
             <el-input v-model="form.username" placeholder="登录账号" />
           </el-form-item>
           <el-form-item label="登录密码" prop="password">
-            <el-input v-model="form.password" placeholder="不填默认123456" />
+            <el-input v-model="form.password" placeholder="为空不修改" />
           </el-form-item>
           <el-form-item label="头像" prop="avatar">
             <el-upload
@@ -25,7 +25,7 @@
               <i v-else class="el-icon-plus avatar-uploader-icon" />
             </el-upload>
           </el-form-item>
-          <el-form-item label="角色" prop="role_id">
+          <el-form-item v-if="!form.is_admin" label="角色" prop="role_id">
             <el-select v-model="form.role_id" placeholder="请选择">
               <el-option
                 v-for="item in roleData"
@@ -37,7 +37,7 @@
           </el-form-item>
 
         </el-tab-pane>
-        <el-tab-pane label="员工信息" name="staff">
+        <el-tab-pane v-if="!form.is_admin" label="员工信息" name="staff">
           <el-form-item label="姓名" prop="name">
             <el-input v-model="form.name" placeholder="姓名" />
           </el-form-item>

src/views/system/company/user/index.vue

@@ -99,6 +99,8 @@ import { userAdd, userDel, userEdit, userList, uploadFile } from '@/api/system/c
 import { Message } from 'element-ui'
 import { roleList } from '@/api/system/power/role'
 import Pagination from '@/components/Pagination'
+import { mapGetters } from 'vuex'
+import { checkRoleAction, getRoleAction } from '@/utils/util'
 
 export default {
   components: { Pagination },
@@ -135,8 +137,12 @@ export default {
     }
   },
   computed: {
-    domain() {
-      return this.$store.state.app.domain
+    ...mapGetters([
+      'menus'
+    ]),
+    role_action() {
+      const action = ['add', 'edit', 'del']
+      return getRoleAction(this.menus, action, this.$route)
     }
   },
   created() {
@@ -159,36 +165,22 @@ export default {
     },
 
     handleAddRole() {
-      // this.user = Object.assign({})
-      // this.dialogType = 'new'
-      // this.dialogVisible = true
+      if (!checkRoleAction('add', this.role_action)) return
+
       const parentMatchedRoute = this.$route.matched[this.$route.matched.length - 2]
       const parent_name = parentMatchedRoute.name
-      this.$router.push({ name: parent_name + '.add' })
+      this.$router.push({ path: parentMatchedRoute.path + '/' + parent_name + '.add' })
     },
     handleEdit(scope) {
+      if (!checkRoleAction('edit', this.role_action)) return
+
       const parentMatchedRoute = this.$route.matched[this.$route.matched.length - 2]
       const parent_name = parentMatchedRoute.name
       this.$router.push({ name: parent_name + '.edit', params: { id: scope.row.id }})
-
-      // this.dialogType = 'edit'
-      // this.dialogVisible = true
-      // const row = deepClone(scope.row)
-      // // this.user = row
-      // // this.user.role_id = row.roles.data.id
-      // this.user = {
-      //   id: row.id,
-      //   username: row.username,
-      //   password: '',
-      //   name: row.name,
-      //   avatar: row.avatar,
-      //   avatar_full_url: row.avatar_full_url,
-      //   role_id: row.role.data.id,
-      //   is_admin: row.is_admin,
-      //   created_at: row.created_at
-      // }
     },
     handleDelete({ $index, row }) {
+      if (!checkRoleAction('del', this.role_action)) return
+
       this.$confirm('确定要删除嘛?', '删除', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',

src/views/system/power/menu/index.vue

 <template>
   <div class="app-container">
     <div class="block">
+      <el-button type="primary" @click="handleSaveChange">保存</el-button>
+
       <el-tree
+        v-loading="loading"
         :data="treeData"
         node-key="id"
         :props="{label:'title'}"
         default-expand-all
+        draggable
+        @node-drop="handleDrop"
       >
         <span slot-scope="{ node, data }" class="custom-tree-node">
           <span>
@@ -30,6 +35,7 @@
             </el-button>
             <el-button
               v-if="data.id !== 0"
+              :loading="loading"
               type="text"
               size="mini"
               @click="() => remove(node, data)"
@@ -81,8 +87,10 @@
 </template>
 
 <script>
-import { menuList, menuAdd, menuDel, menuEdit } from '@/api/system/power/menu'
+import { menuList, menuAdd, menuDel, menuEdit, saveChange } from '@/api/system/power/menu'
 import { Message } from 'element-ui'
+import { mapGetters } from 'vuex'
+import { checkRoleAction, getRoleAction } from '@/utils/util'
 
 export default {
   name: 'List',
@@ -106,10 +114,18 @@ export default {
         api: '',
         icon: '',
         is_menu: 1
-      }
+      },
+      dropData: {}
     }
   },
   computed: {
+    ...mapGetters([
+      'menus'
+    ]),
+    role_action() {
+      const action = ['add', 'edit', 'del', 'save_change']
+      return getRoleAction(this.menus, action, this.$route)
+    }
   },
   created() {
     this.init()
@@ -172,6 +188,8 @@ export default {
       })
     },
     add(node, data) {
+      if (!checkRoleAction('add', this.role_action)) return
+
       this.form = Object.assign({ is_menu: 1 })
       this.form_parent_menu_id = data.id
       this.form.parent_id = data.id
@@ -179,6 +197,8 @@ export default {
       this.dialogFormVisible = true
     },
     edit(node, data) {
+      if (!checkRoleAction('add', this.role_action)) return
+
       this.resetForm()
       this.form_menu_id = data.id
       this.dialogStatus = 'edit'
@@ -186,6 +206,8 @@ export default {
       this.form = data
     },
     remove(node, data) {
+      if (!checkRoleAction('del', this.role_action)) return
+
       this.$confirm('确定要删除嘛?', '删除', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -193,6 +215,7 @@ export default {
       })
         .then(_ => {
           const menu_id = data.id
+          this.loading = true
           menuDel(menu_id).then(res => {
             Message.success('已删除')
             const parent = node.parent
@@ -200,19 +223,50 @@ export default {
             const index = children.findIndex(d => d.id === data.id)
             children.splice(index, 1)
           })
-        }).catch(_ => {})
+        }).finally(() => { this.loading = false })
     },
     async onSubmit() {
       this.loading = true
       if (this.dialogStatus === 'create') {
-        await menuAdd(this.form)
+        await menuAdd(this.form).finally(() => { this.loading = false })
         Message.success('已添加')
       } else {
-        await menuEdit(this.form.id, this.form)
+        await menuEdit(this.form.id, this.form).finally(() => { this.loading = false })
         Message.success('已修改')
       }
-      this.loading = false
       this.init()
+    },
+    handleDrop(draggingNode, dropNode, dropType, ev) {
+      switch (dropType) {
+        case 'before':
+        case 'after':
+          dropNode.parent.childNodes.forEach((item, index) => {
+            this.dropData[item.data.id] = {
+              id: item.data.id,
+              order: index,
+              parent_id: dropNode.data.parent_id
+            }
+          })
+          break
+        case 'inner':
+          dropNode.childNodes.forEach((item, index) => {
+            this.dropData[item.data.id] = {
+              id: item.data.id,
+              order: index,
+              parent_id: dropNode.data.id
+            }
+          })
+          break
+      }
+    },
+    handleSaveChange() {
+      if (!checkRoleAction('save_change', this.role_action)) return
+
+      this.loading = true
+      saveChange({ change_data: this.dropData })
+        .then(() => {
+          Message.success('成功')
+        }).finally(() => { this.loading = false })
     }
   }
 }

src/views/system/power/role/index.vue

@@ -65,10 +65,11 @@
 
 <script>
 import { roleAdd, roleDel, roleEdit, roleList } from '@/api/system/power/role'
-import { deepClone } from '@/utils/util'
+import { checkRoleAction, deepClone, getRoleAction } from '@/utils/util'
 import { menuList } from '@/api/system/power/menu'
 import { Message } from 'element-ui'
 import Pagination from '@/components/Pagination'
+import { mapGetters } from 'vuex'
 
 export default {
   components: { Pagination },
@@ -102,6 +103,13 @@ export default {
   computed: {
     menuTree() {
       return this.menuTreeData
+    },
+    ...mapGetters([
+      'menus'
+    ]),
+    role_action() {
+      const action = ['add', 'edit', 'del']
+      return getRoleAction(this.menus, action, this.$route)
     }
   },
   created() {
@@ -150,6 +158,8 @@ export default {
     },
 
     handleAddRole() {
+      if (!checkRoleAction('add', this.role_action)) return
+
       this.role = Object.assign({})
       if (this.$refs.tree) {
         this.$refs.tree.setCheckedNodes([])
@@ -158,6 +168,8 @@ export default {
       this.dialogVisible = true
     },
     handleEdit(scope) {
+      if (!checkRoleAction('edit', this.role_action)) return
+
       this.dialogType = 'edit'
       this.dialogVisible = true
       this.checkStrictly = true
@@ -172,6 +184,8 @@ export default {
       })
     },
     handleDelete({ $index, row }) {
+      if (!checkRoleAction('del', this.role_action)) return
+
       this.$confirm('确定要删除嘛?', '删除', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',