feat: 权限配置

src/assets/theme/style.scss

 $--color-primary: #3276fc;
 $--color-info: #3c4043;
-// border
-$--border-radius-small: 8px !default;
 
 // dialog
 $--message-close-size: 20px !default;
@@ -10,3 +8,7 @@ $--message-close-size: 20px !default;
 $--font-path: 'element-ui/lib/theme-chalk/fonts';
 
 @import 'element-ui/packages/theme-chalk/src/index';
+
+.el-dialog {
+  border-radius: 8px;
+}

src/modules/roles/api.js

@@ -39,17 +39,17 @@ export function deleteRole(data) {
  * 获取权限列表
  */
 export function getPermissionList(params) {
-  return httpRequest.get(`/api/xedu/admin/v1/${params.app_id}/application/permissions`, { params })
+  return httpRequest.get('/api/xedu/admin/v1/permissions', { params })
 }
 /**
  * 获取角色所有权限
  */
 export function getRolePermissions(params) {
-  return httpRequest.get(`/api/xedu/admin/v1/${params.app_id}/application/assign/role-permissions`, { params })
+  return httpRequest.get(`/api/xedu/admin/v1/assign/${params.role_id}/permissions`, { params })
 }
 /**
  * 更新角色权限
  */
 export function updateRolePermissions(data) {
-  return httpRequest.post(`/api/xedu/admin/v1/${data.app_id}/application/assign/permissions-to-role`, data)
+  return httpRequest.post('/api/xedu/admin/v1/assign/permissions-to-role', data)
 }

src/modules/roles/components/Permissions.vue

 <template>
-  <el-dialog title="权限配置" :close-on-click-modal="false" v-bind="$attrs" v-on="$listeners" width="700px">
-    <el-tabs v-model="activeName">
-      <el-tab-pane label="菜单权限" name="2"></el-tab-pane>
-      <el-tab-pane label="功能权限" name="1"></el-tab-pane>
-      <el-tab-pane label="资源权限" name="3"></el-tab-pane>
-      <el-tab-pane label="按钮权限" name="4"></el-tab-pane>
-    </el-tabs>
-    <el-tree
-      :data="permissions"
-      show-checkbox
-      default-expand-all
-      node-key="id"
-      ref="tree"
-      :props="defaultProps"
-      :filter-node-method="filterNode"
-      v-loading="submitLoading"
-    >
-    </el-tree>
+  <el-dialog title="权限配置" :close-on-click-modal="false" v-bind="$attrs" v-on="$listeners" width="800px">
+    <el-form ref="form" :model="form" :rules="rules" label-position="top" v-loading="loading">
+      <el-form-item label="选择系统" prop="system_tag">
+        <el-checkbox-group v-model="form.system_tag">
+          <el-checkbox v-for="item in options" :label="item.system_tag" :key="item.system_tag">
+            {{ item.name }}
+          </el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="权限设置" prop="name">
+        <div v-for="(item, index) in options" :key="index" v-show="form.system_tag.includes(item.system_tag)">
+          {{ item.name }}
+          <el-cascader-panel
+            :options="item.permissions"
+            :props="defaultProps"
+            v-model="item.value"
+            ref="tree"
+            @change="handleChange"
+          ></el-cascader-panel>
+        </div>
+      </el-form-item>
+    </el-form>
     <template #footer>
       <el-button type="text" @click="onCancel">取消</el-button>&nbsp;&nbsp;
       <el-button type="primary" size="medium" @click="onPrimary" :loading="submitLoading">保存</el-button>
@@ -32,21 +36,21 @@ export default {
   },
   data() {
     return {
-      activeName: '2',
+      loading: true,
+      form: {
+        system_tag: []
+      },
+      rules: {
+        system_tag: [{ required: true, message: '请选择系统', trigger: 'change' }]
+      },
       permissions: [], // 所有权限
-      currentPermissions: [], // 当前角色权限
-      defaultProps: { children: 'children', label: 'name' },
-      submitLoading: false
-    }
-  },
-  computed: {
-    appid() {
-      return this.$store.state.appid
-    }
-  },
-  watch: {
-    activeName(val) {
-      this.$refs.tree && this.$refs.tree.filter(val)
+      defaultProps: { label: 'name', value: 'id', multiple: true, expandTrigger: 'hover', emitPath: false },
+      submitLoading: false,
+      options: [
+        { name: '学校管理系统', system_tag: 1, permissions: [], value: [] },
+        { name: '教师端', system_tag: 2, permissions: [], value: [] },
+        { name: '学生端', system_tag: 3, permissions: [], value: [] }
+      ]
     }
   },
   async beforeMount() {
@@ -60,31 +64,37 @@ export default {
       if (!value) return true
       return parseInt(value) === data.type
     },
-    getTypeName(value) {
-      const map = { 1: '功能', 2: '菜单', 3: '资源', 4: '按钮' }
-      return map[value] || value
-    },
     // 获取所有权限
     getPermissions() {
-      return getPermissionList({ app_id: this.appid, limit: 500 }).then(res => {
-        this.permissions = res.data.data
-        this.$nextTick(() => {
-          this.$refs.tree.filter(this.activeName)
-        })
+      return getPermissionList({ is_format: 1 }).then(res => {
+        // 移除空数组
+        const permissions = JSON.parse(JSON.stringify(res.data).replaceAll(',"children":[]', ''))
+        this.options = permissions.reduce((result, item) => {
+          const index = result.findIndex(i => i.system_tag === item.system_tag)
+          if (index !== -1) {
+            result[index].permissions.push(item)
+          }
+          return result
+        }, this.options)
       })
     },
     // 获取当前角色的权限
     getRolePermissions() {
-      getRolePermissions({ app_id: this.appid, role_id: this.data.id }).then(res => {
-        if (res.data.length) {
-          this.currentPermissions = res.data.map(item => item.id)
-          // 有bug，暂时不用
-          // this.$refs.tree.setCheckedKeys(this.currentPermissions)
-          this.currentPermissions.forEach(id => {
-            this.$refs.tree.setChecked(id, true)
+      getRolePermissions({ role_id: this.data.id })
+        .then(res => {
+          res.data.items.forEach(permission => {
+            if (!this.form.system_tag.includes(permission.system_tag)) {
+              this.form.system_tag.push(permission.system_tag)
+            }
+            const index = this.options.findIndex(i => i.system_tag === permission.system_tag)
+            if (index !== -1) {
+              this.options[index].value.push(permission.id)
+            }
           })
-        }
-      })
+        })
+        .finally(() => {
+          this.loading = false
+        })
     },
     // 取消
     onCancel() {
@@ -92,25 +102,30 @@ export default {
     },
     // 确定
     onPrimary() {
-      // 选中的权限
-      const checkedKeys = this.$refs.tree.getCheckedKeys()
-      // 半选中的权限
-      const halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys()
-      const params = {
-        app_id: this.appid,
-        role_id: this.data.id,
-        permission_ids: JSON.stringify([...checkedKeys, ...halfCheckedKeys])
-      }
-      this.submitLoading = true
-      updateRolePermissions(params)
-        .then(res => {
-          this.$message.success('配置成功')
-          this.$emit('update:visible', false)
-          this.$emit('success', res.data)
-        })
-        .finally(() => {
-          this.submitLoading = false
-        })
+      this.$refs.form.validate().then(() => {
+        const params = {
+          role_id: this.data.id,
+          data: this.options.reduce((result, item) => {
+            if (this.form.system_tag.includes(item.system_tag)) {
+              result.push({ system_tag: item.system_tag, permission_ids: item.value })
+            }
+            return result
+          }, [])
+        }
+        this.submitLoading = true
+        updateRolePermissions(params)
+          .then(res => {
+            this.$message.success('配置成功')
+            this.$emit('update:visible', false)
+            this.$emit('success', res.data)
+          })
+          .finally(() => {
+            this.submitLoading = false
+          })
+      })
+    },
+    handleChange(e) {
+      console.log(e)
     }
   }
 }

src/modules/roles/views/List.vue

@@ -5,9 +5,9 @@
         <el-button type="primary" icon="el-icon-plus" @click="handleCreate">添加角色</el-button>
       </template>
       <template v-slot:table-x="{ row }">
-        <el-button type="primary" @click="handleUpdate(row)">修改</el-button>
-        <el-button type="danger" @click="onRemove(row)">删除</el-button>
-        <el-button type="info" @click="handlePermission(row)">权限配置</el-button>&nbsp;
+        <el-button type="primary" plain @click="handleUpdate(row)">修改</el-button>
+        <el-button type="danger" plain @click="onRemove(row)">删除</el-button>
+        <el-button type="info" plain @click="handlePermission(row)">权限配置</el-button>&nbsp;
       </template>
     </app-list>
     <!-- 创建/编辑 -->

src/modules/school/index.js

@@ -5,7 +5,7 @@ const routes = [
     meta: { title: '机构管理' },
     children: [
       { path: '', component: () => import('./views/List.vue') },
-      { path: 'view', component: () => import('./views/Detail.vue') }
+      { path: 'view', component: () => import('./views/Detail.vue'), meta: { title: '机构详情' } }
     ]
   }
 ]

src/modules/school/views/Detail.vue

 <template>
-  <app-card :title="detail.name">
+  <app-card :title="detail.name" v-loading="loading">
     <template #header-aside>
       <el-button type="primary" @click="visible = true">编辑</el-button>
     </template>
@@ -13,8 +13,8 @@
       <el-descriptions-item label="机构角色">
         <el-tag>{{ detail.role_name }}</el-tag>
       </el-descriptions-item>
-      <el-descriptions-item label="有效期"
-        >{{ detail.validity_date }}
+      <el-descriptions-item label="有效期">
+        {{ detail.validity_date }}
         <el-tag v-if="detail.is_valid">未过期</el-tag>
         <el-tag type="danger" v-else>已过期</el-tag>
       </el-descriptions-item>
@@ -39,6 +39,7 @@ export default {
   },
   data() {
     return {
+      loading: false,
       visible: false,
       detail: { name: '清华大学' }
     }
@@ -53,9 +54,17 @@ export default {
   },
   methods: {
     getDetail() {
-      getOrg({ id: this.id }).then(res => {
-        this.detail = res.data
-      })
+      this.loading = true
+      getOrg({ id: this.id })
+        .then(res => {
+          this.detail = res.data
+        })
+        .catch(() => {
+          this.$router.replace('/school')
+        })
+        .finally(() => {
+          this.loading = false
+        })
     },
     // 更新成功
     handleUpdateSuccess(data) {

src/modules/school/views/List.vue

@@ -13,10 +13,10 @@
       </template>
       <template v-slot:table-x="{ row }">
         <router-link :to="{ path: 'school/view', query: { id: row.id } }" target="_blank" style="margin-right: 10px">
-          <el-button>查看</el-button>
+          <el-button plain>查看</el-button>
         </router-link>
-        <el-button type="primary" @click="handleUpdate(row)">编辑</el-button>
-        <el-button type="danger" @click="onRemove(row)">删除</el-button>
+        <el-button type="primary" plain @click="handleUpdate(row)">编辑</el-button>
+        <el-button type="danger" plain @click="onRemove(row)">删除</el-button>
       </template>
     </app-list>
     <!-- 创建/编辑 -->

src/utils/axios.js

 import axios from 'axios'
 import queryString from 'query-string'
 import { Message } from 'element-ui'
+import router from '../router'
 
 const httpRequest = axios.create({
   timeout: 60000,
-  withCredentials: true,
-  headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
+  withCredentials: true
+  // headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
 })
 
 // 请求拦截
@@ -36,7 +37,15 @@ httpRequest.interceptors.response.use(
     if (data.code === 0) {
       return data
     }
-    Message({ message: data.message || data.msg, type: 'error' })
+    // 未登录
+    if (data.code === 4001) {
+      window.location.href = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(window.location.href)}`
+    }
+    // 没有权限
+    if (data.code === 4008) {
+      router.push('/401')
+    }
+    Message({ message: data.message, type: 'error' })
     return Promise.reject(data)
   },
   function (error) {