refactor: ♻️ 授权页面重构

重构授权页面

web/src/views/system/role/components/api.ts

@@ -0,0 +1,117 @@
+import { request } from "/@/utils/service";
+
+/**
+ * 获取角色所拥有的菜单
+ * @param params
+ */
+export function GetMenu(params:any) {
+    return request({
+        url: '/api/system/role_menu_button_permission/role_get_menu/',
+        method: 'get',
+        params:params
+    });
+}
+
+/***
+ * 新增权限
+ * @param data
+ * @constructor
+ */
+export function SaveMenuPermission(data:any) {
+    return request({
+        url: '/api/system/role_menu_permission/save_auth/',
+        method: 'post',
+        data:data
+    });
+}
+
+
+/**
+ * 获取菜单下的按钮
+ * @param params
+ * @constructor
+ */
+export function GetMenuButton(params:any) {
+    return request({
+        url: '/api/system/role_menu_button_permission/role_menu_get_button/',
+        method: 'get',
+        params:params
+    });
+}
+
+
+/***
+ * 根据角色获取已授权的菜单
+ * @param params
+ * @constructor
+ */
+export function role_to_menu (params:any={}) {
+    return request({
+        url: '/api/system/role_menu_button_permission/role_to_menu/',
+        method: 'get',
+        params: params
+    })
+}
+
+/***
+ * 根据角色获取数据权限范围
+ * @constructor
+ */
+export function GetDataScope (params:any={}) {
+    return request({
+        url: '/api/system/role_menu_button_permission/data_scope/',
+        method: 'get',
+        params: params
+    })
+}
+
+/***
+ * 获取权限部门
+ * @constructor
+ */
+export function GetDataScopeDept (params:any) {
+    return request({
+        url: '/api/system/role_menu_button_permission/role_to_dept_all/',
+        method: 'get',
+        params: params
+    })
+}
+
+/***
+ * 新增权限
+ * @param data
+ * @constructor
+ */
+export function CreatePermission(data:any) {
+    return request({
+        url: '/api/system/role_menu_button_permission/',
+        method: 'post',
+        data:data
+    });
+}
+
+/***
+ * 根据菜单获取菜单下按钮
+ * @param params
+ */
+export function getObj(params:any) {
+    return request({
+        url: '/api/system/role_menu_button_permission/menu_to_button/',
+        method: 'get',
+        params:params
+    });
+}
+
+/**
+ * 删除按钮权限
+ * @param data
+ * @constructor
+ */
+export function DeletePermission(data:any) {
+    return request({
+        url: `/api/system/role_menu_button_permission/${data.id}/`,
+        method: 'delete',
+        data:{}
+    });
+}
+

web/src/views/system/role/components/permission.vue

@@ -0,0 +1,377 @@
+<template>
+  <el-drawer
+      size="70%"
+      v-model="drawer"
+      direction="rtl"
+      destroy-on-close
+      :before-close="handleClose"
+  >
+    <template #header>
+      <div>
+        <el-tag size="large" type="primary">当前角色:{{ editedRoleInfo.name }}</el-tag>
+      </div>
+    </template>
+    <div style="padding: 1em">
+      <div style="margin-bottom: 10px">
+        <el-button size="mini" type="primary" @click="onSaveAuth">保存菜单授权</el-button>
+      </div>
+      <vxe-table
+          ref="tableRef"
+          border
+          resizable
+          :row-config="{keyField: 'menu_id'}"
+          :tree-config="{transform: true, rowField: 'menu_id', parentField: 'parent'}"
+          :checkbox-config="{labelField: 'menu_id', checkRowKeys: multipleTableData,checkStrictly:true}"
+          :data="menuData">
+        <vxe-column type="checkbox" title="ID" width="200" tree-node></vxe-column>
+        <vxe-column field="name" title="目录/菜单" ></vxe-column>
+        <vxe-column type="expand" title="已授予权限" width="120">
+          <template #content="{ row, rowIndex }">
+            <div style="padding: 10px 0px" v-if="!row.is_catalog">
+              <el-button type="primary" size="small" style="margin-bottom: 0.5em"
+                         @click="createBtnPermission">新增
+              </el-button>
+              <el-table size="small" :data="buttonPermissionData" border style="width: 100%">
+                <el-table-column prop="menu_button" label="权限名称" width="100">
+                  <template #default="scope">
+                    <div>{{ scope.row.menu_button__name }}</div>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="menu_button__value" label="权限值" width="100">
+                </el-table-column>
+                <el-table-column prop="data_range" label="权限范围" width="140">
+                  <template #default="scope">
+                    <div>{{ formatDataRange(scope.row.data_range) }}</div>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="dept" label="权限涉及部门"/>
+                <el-table-column fixed="right" label="操作" width="120">
+                  <template #default="scope">
+                    <el-button type="danger" size="small" @click="onDeleteBtn(scope)">删除
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </template>
+        </vxe-column>
+      </vxe-table>
+      <!--      弹窗-->
+      <el-dialog v-model="dialogFormVisible" append-to-body width="400px" title="配置按钮权限">
+        <el-form ref="buttonFormRef" :model="buttonForm" :rules="buttonRules" label-width="120px">
+          <el-form-item label="按钮" prop="menu_button">
+            <el-select v-model="buttonForm.menu_button" placeholder="请选择按钮" @change="onChangeButton">
+              <el-option v-for="(item,index) in buttonOptions" :key="index" :label="item.name"
+                         :value="item.btn_id"/>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="权限范围" prop="data_range">
+            <el-select v-model="buttonForm.data_range" placeholder="请选择按钮">
+              <el-option v-for="(item,index) in dataScopeOptions" :key="index" :label="item.label"
+                         :value="item.value"/>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="数据部门" prop="dept" v-show="buttonForm.data_range === 4">
+            <div class="dept-tree">
+              <el-tree
+                  :data="deptOptions"
+                  show-checkbox
+                  default-expand-all
+                  :default-checked-keys="deptCheckedKeys"
+                  ref="deptTree"
+                  node-key="dept_id"
+                  :check-strictly="true"
+                  :props="{ label: 'name' }"
+              ></el-tree>
+            </div>
+          </el-form-item>
+        </el-form>
+        <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="onSaveButtonForm">
+          确定
+        </el-button>
+      </span>
+        </template>
+      </el-dialog>
+    </div>
+  </el-drawer>
+</template>
+
+<script lang="ts" setup>
+import {ref, defineExpose, reactive, toRefs} from 'vue'
+import {ElMessageBox, ElTable} from 'element-plus'
+import * as api from './api.ts'
+import type {FormRules, FormInstance} from 'element-plus'
+import {ElMessage} from 'element-plus'
+import XEUtils from 'xe-utils'
+import { VXETable, VxeTableInstance } from 'vxe-table'
+
+interface tableRow {
+  menu_id: number
+  name: string
+}
+
+//抽屉是否显示
+const drawer = ref(false)
+//当前编辑的角色信息
+const editedRoleInfo = ref({})
+
+//抽屉关闭确认
+const handleClose = (done: () => void) => {
+  ElMessageBox.confirm('您确定要关闭?', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+      .then(() => {
+        done()
+      })
+      .catch(() => {
+        // catch error
+      })
+}
+
+/*****菜单的配置项***/
+const defaultProps = {
+  children: 'children',
+  label: 'name',
+  isLeaf: 'hasChild'
+}
+
+interface Tree {
+  name: string
+  children?: Tree[],
+  id: number
+}
+
+let menuData = ref<Tree>()
+//获取菜单
+const getMenuData = () => {
+  api.GetMenu({}).then((res: any) => {
+    const {data} = res
+    menuData.value = data
+  })
+}
+
+//获取已授权的菜单
+const tableRef = ref<VxeTableInstance<tableRow>>()
+const multipleTableData = ref()
+const getRoleToMenu = () => {
+  api.role_to_menu({role: editedRoleInfo.value.id}).then((res: any) => {
+    const {data} = res
+    multipleTableData.value=data
+  })
+}
+
+let isBtnPermissionShow = ref(false)
+let buttonOptions = ref<[]>()
+let editedMenuInfo = ref()
+//菜单节点点击事件
+const menuNodeClick = (node: any) => {
+  isBtnPermissionShow.value = !node.is_catalog
+  if (!node.is_catalog) {
+    buttonOptions.value = []
+    editedMenuInfo.value = node
+    api.GetMenuButton({menu: node.menu_id}).then((res: any) => {
+      const {data} = res
+      buttonOptions.value = data
+    })
+    api.getObj({menu: node.menu_id, role: editedRoleInfo.value.id}).then((res: any) => {
+      const {data} = res
+      buttonPermissionData.value = data
+    })
+  }
+
+}
+const menuTree = ref()
+/*****菜单的配置项***/
+/***按钮授权的弹窗****/
+//是否显示新增表单
+const dialogFormVisible = ref(false)
+//部门树
+const deptTree = ref()
+//自定义部门数据
+const deptOptions = ref()
+//选中的部门数据
+const deptCheckedKeys = []
+//按钮表单
+const buttonForm = reactive({
+  menu_button: null,
+  role: null,
+  menu: null,
+  data_range: null,
+  dept: []
+})
+//按钮表格数据
+let buttonPermissionData = ref([])
+//按钮表单验证
+const buttonRules = reactive<FormRules>({
+  menu_button: [
+    {required: true, message: '必填项'}
+  ],
+  data_range: [
+    {required: true, message: '必填项'}
+  ]
+})
+//新增按钮
+const buttonFormRef = ref<FormInstance>()
+const createBtnPermission = () => {
+  dialogFormVisible.value = true
+  buttonForm.menu_button = null
+  buttonForm.menu = null
+  buttonForm.role = null
+  buttonForm.data_range = null
+  buttonForm.dept = []
+}
+//权限范围数据
+const dataScopeOptions = ref<[]>()
+//按钮值变化事件
+const onChangeButton = (val: any) => {
+  dataScopeOptions.value = []
+  //获取权限值范围
+  api.GetDataScope({menu_button: val}).then((res: any) => {
+    dataScopeOptions.value = res.data
+  })
+  //获取权限部门值
+  api.GetDataScopeDept({menu_button: val}).then((res: any) => {
+    deptOptions.value = XEUtils.toArrayTree(res.data, {parentKey: 'parent', strict: false})
+  })
+
+}
+//过滤按钮名称
+const formatMenuBtn = (val: any) => {
+  let obj: any = buttonOptions.value?.find((item: any) => {
+    return item.id === val
+  })
+  return obj ? obj.name : null
+}
+//过滤权限范围
+const formatDataRange = (val: any) => {
+  let obj: any = [
+    {
+      "value": 0,
+      "label": '仅本人数据权限'
+    },
+    {
+      "value": 1,
+      "label": '本部门及以下数据权限'
+    },
+    {
+      "value": 2,
+      "label": '本部门数据权限'
+    },
+    {
+      "value": 3,
+      "label": '全部数据权限'
+    },
+    {
+      "value": 4,
+      "label": '自定义数据权限'
+    }
+  ].find((item: any) => {
+    return item.value === val
+  })
+  return obj ? obj.label : null
+}
+//保存按钮表单
+
+const onSaveButtonForm = async () => {
+  const {id: roleId} = editedRoleInfo.value
+  const {id: menuId} = editedMenuInfo.value
+  const form: any = Object.assign({}, buttonForm)
+  form.role = roleId
+  form.menu = menuId
+  //选中的部门
+  const checkedList = deptTree.value.getCheckedKeys()
+  form.dept = checkedList
+  if (!buttonFormRef.value) return
+  await buttonFormRef.value.validate((valid, fields) => {
+    if (valid) {
+      api.CreatePermission(form).then((res: any) => {
+        const {data} = res
+        buttonPermissionData.value.push(data)
+        dialogFormVisible.value = false
+        ElMessage({
+          type: 'success',
+          message: res.msg,
+        })
+      })
+    } else {
+      ElMessage({
+        type: 'error',
+        title: '提交错误',
+        message: 'F12控制台看详情',
+      })
+      console.log('提交错误', fields)
+    }
+  })
+
+}
+//删除按钮权限
+const onDeleteBtn = (scope: any) => {
+  const {row, $index} = scope
+  ElMessageBox.confirm(
+      '您是否要删除数据?',
+      '温馨提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+  ).then(() => {
+    api.DeletePermission({id: row.id}).then((res: any) => {
+      buttonPermissionData.value.splice($index, 1)
+      ElMessage({
+        type: 'success',
+        message: res.msg,
+      })
+    })
+  })
+      .catch(() => {
+        ElMessage({
+          type: 'info',
+          message: '取消删除',
+        })
+      })
+
+}
+/***按钮授权的弹窗****/
+//初始化数据
+const initGet = () => {
+  getMenuData()
+  getRoleToMenu()
+}
+
+/**
+ * 保存授权
+ */
+const onSaveAuth = () => {
+
+  const $table = tableRef.value
+  if ($table) {
+    const selectRecords = $table.getCheckboxRecords()
+    const menuIdList =  selectRecords.map((record:any) => record.menu_id)
+    const {id: roleId} = editedRoleInfo.value
+    const data = {
+      role: roleId,
+      menu: menuIdList
+    }
+    api.SaveMenuPermission(data).then((res: any) => {
+      ElMessage({
+        message: res.msg,
+        type: 'success',
+      })
+    })
+  }
+
+}
+
+
+defineExpose({drawer, editedRoleInfo, initGet})
+</script>
+
+<style scoped>
+
+</style>

web/src/views/system/role/crud.tsx

@@ -27,6 +27,8 @@ export const createCrudOptions = function ({ crudExpose, rolePermission }: { cru
 	//权限判定
 	const hasPermissions = inject("$hasPermissions")
 
+	// @ts-ignore
+	// @ts-ignore
 	return {
 		crudOptions: {
 			request: {

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

@@ -5,7 +5,8 @@
 				<el-tag size="small">{{ scope.row.url }}</el-tag>
 			</template>
 		</fs-crud>
-		<RolePermission ref="rolePermission"></RolePermission>
+<!--		<RolePermission ref="rolePermission"></RolePermission>-->
+    <permission ref="rolePermission"></permission>
 	</fs-page>
 </template>
 
@@ -14,6 +15,7 @@ import { ref, onMounted } from 'vue';
 import { useExpose, useCrud, dict } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
 import RolePermission from '/@/views/system/rolePermission/index.vue';
+import permission from './components/permission.vue'
 import * as api from './api';
 import _ from 'lodash-es';
 const rolePermission = ref();

web/src/views/system/rolePermission/index.vue

@@ -198,7 +198,7 @@ let menuData = ref<Tree>()
 const getMenuData = () => {
     api.GetMenu({}).then((res: any) => {
         const {data} = res
-        const list = XEUtils.toArrayTree(data, {parentKey: "parent", strict: true})
+        const list = XEUtils.toArrayTree(data, {parentKey: "parent", key:'menu_id',strict: true})
         menuData.value = list
     })
 }
@@ -212,11 +212,11 @@ const menuNodeClick = (node: any, obj: any) => {
     if (!node.is_catalog) {
         buttonOptions.value = []
         editedMenuInfo.value = node
-        api.GetMenuButton({menu: node.id}).then((res: any) => {
+        api.GetMenuButton({menu: node.menu_id}).then((res: any) => {
             const {data} = res
             buttonOptions.value = data
         })
-        api.getObj({menu: node.id, role: editedRoleInfo.value.id}).then((res: any) => {
+        api.getObj({menu: node.menu_id, role: editedRoleInfo.value.id}).then((res: any) => {
             const {data} = res
             buttonPermissionData.value = data
         })