1.完成新版接口授权

web/src/plugin/permission/store.permission.ts

@@ -9,7 +9,7 @@ export const BtnPermissionStore = defineStore('BtnPermission', {
     actions: {
         async getBtnPermissionStore() {
             request({
-                url: '/api/system/menu_button/menu_button_all_permission/',
+                url: '/api/system/menu/menu_button_all_permission/',
                 method: 'get',
             }).then((ret: {
                 data: []

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

@@ -0,0 +1,57 @@
+import { request } from '/@/utils/service';
+import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
+import XEUtils from "xe-utils";
+
+export const apiPrefix = '/api/system/role_api_permission/';
+export function GetList(query: UserPageQuery) {
+	return request({
+		url: apiPrefix,
+		method: 'get',
+		params: query,
+	});
+}
+export function GetObj(id: InfoReq) {
+	return request({
+		url: apiPrefix + id,
+		method: 'get',
+	});
+}
+
+export function AddObj(obj: AddReq) {
+	return request({
+		url: apiPrefix,
+		method: 'post',
+		data: obj,
+	});
+}
+
+export function UpdateObj(obj: EditReq) {
+	return request({
+		url: apiPrefix + obj.id + '/',
+		method: 'put',
+		data: obj,
+	});
+}
+
+export function DelObj(id: DelReq) {
+	return request({
+		url: apiPrefix + id + '/',
+		method: 'delete',
+		data: { id },
+	});
+}
+
+/**
+ * 获取数据范围授权的所有部门
+ * @param query
+ * @constructor
+ */
+export function GetAllDeptData(query: UserPageQuery) {
+	return request({
+		url: apiPrefix+'role_to_dept_all/',
+		method: 'get',
+		params: query,
+	}).then((res:any)=>{
+		return  XEUtils.toArrayTree(res.data,{ parentKey: 'parent', key: 'id', children: 'children',})
+	})
+}

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

@@ -0,0 +1,207 @@
+import * as api from './api';
+import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
+import { request } from '/@/utils/service';
+import { dictionary } from '/@/utils/dictionary';
+import { successMessage } from '/@/utils/message';
+import {inject} from "vue";
+
+export const createCrudOptions = function ({ crudExpose,propsContext }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+	const pageRequest = async (query: UserPageQuery) => {
+		return await api.GetList(query);
+	};
+	const editRequest = async ({ form, row }: EditReq) => {
+		form.id = row.id;
+		return await api.UpdateObj(form);
+	};
+	const delRequest = async ({ row }: DelReq) => {
+		return await api.DelObj(row.id);
+	};
+	const addRequest = async ({ form }: AddReq) => {
+		form.role = propsContext.roleId
+		return await api.AddObj(form);
+	};
+
+	//权限判定
+	const hasPermissions = inject("$hasPermissions")
+
+	return {
+		crudOptions: {
+			request: {
+				pageRequest,
+				addRequest,
+				editRequest,
+				delRequest,
+			},
+			rowHandle: {
+				//固定右侧
+				fixed: 'right',
+			},
+			form: {
+				col: { span: 24 },
+				labelWidth: '110px',
+				wrapper: {
+					is: 'el-dialog',
+					width: '600px',
+				},
+			},
+			columns: {
+				_index: {
+					title: '序号',
+					form: { show: false },
+					column: {
+						//type: 'index',
+						align: 'center',
+						width: '70px',
+						columnSetDisabled: true, //禁止在列设置中选择
+						//@ts-ignore
+						formatter: (context) => {
+							//计算序号,你可以自定义计算规则，此处为翻页累加
+							let index = context.index ?? 1;
+							let pagination: any = crudExpose!.crudBinding.value.pagination;
+							return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
+						},
+					},
+				},
+				name:{
+					title: '接口名称',
+					type: 'text',
+					search:{
+						show:true
+					},
+					column:{
+						width:150
+					}
+				},
+				method: {
+					title: '请求方式',
+					sortable: 'custom',
+					search: {
+						show:true
+					},
+					type: 'dict-select',
+					dict: dict({
+						data: [
+							{
+								label: 'GET',
+								value: 0,
+							},
+							{
+								label: 'POST',
+								value: 1,
+							},
+							{
+								label: 'PUT',
+								value: 2,
+							},
+							{
+								label: 'DELETE',
+								value: 3,
+							},
+							{
+								label: 'PATCH',
+								value: 4,
+							},
+						],
+					}),
+					column:{
+						width: 100,
+					},
+					form: {
+						rules: [
+							// 表单校验规则
+							{
+								required: true,
+								message: '必填项',
+							},
+						],
+						component: {
+							span: 12,
+						},
+					},
+				},
+				api: {
+					title: '接口地址',
+					sortable: 'custom',
+					search: {
+						disabled: true,
+					},
+					type: 'dict-select',
+					dict: dict({
+						async getData(dict: any) {
+							return request('/swagger.json').then((ret: any) => {
+								const res = Object.keys(ret.paths);
+								const data = [];
+								for (const item of res) {
+									const obj = { label: '', value: '' };
+									obj.label = item;
+									obj.value = item;
+									data.push(obj);
+								}
+								return data;
+							});
+						},
+					}),
+					column:{
+						minWidth: 200,
+					},
+					form: {
+						rules: [
+							// 表单校验规则
+							{
+								required: true,
+								message: '必填项',
+							},
+						],
+						component: {
+							span: 24,
+							props: {
+								allowCreate: true,
+								filterable: true,
+								clearable: true,
+							},
+						},
+						helper: {
+							position: 'label',
+							tooltip: {
+								placement: 'top-start',
+							},
+							text: '请正确填写，以免请求时被拦截。匹配单例使用正则,例如:/api/xx/.*?/',
+						},
+					},
+				},
+				data_range: {
+					title: '数据权限范围',
+					search: {
+						show:true
+					},
+					type: 'dict-select',
+					dict:dict({
+						url:'/api/system/role_api_permission/data_scope/'
+					}),
+					column: {
+						minWidth:120,
+					},
+
+				},
+				dept:{
+					title:'数据权限部门',
+					column:{
+						minWidth:120,
+					},
+					form:{
+						show: compute(({form})=>{
+							return form.data_range===4
+						})
+					}
+				},
+				description:{
+					title:'描述',
+					type:'textarea',
+					column:{
+						width:300
+					}
+				}
+			},
+		},
+	};
+};

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

@@ -0,0 +1,59 @@
+<template>
+  <div style="height: 86vh">
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #form_dept="scope">
+        <div>
+          <el-tree-select
+              v-model="scope.form.dept"
+              :data="allDeptData"
+              :props="treeProps"
+              node-key="id"
+              multiple
+              :render-after-expand="false"
+              show-checkbox
+              check-strictly
+              check-on-click-node
+          >
+            <template #default="{ data: { name } }">
+              {{ name }}
+            </template
+            >
+          </el-tree-select>
+        </div>
+      </template>
+    </fs-crud>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref, onMounted, reactive} from 'vue';
+import {useFs} from '@fast-crud/fast-crud';
+import {createCrudOptions} from './crud';
+import {GetAllDeptData} from './api'
+const propsContext = defineProps({
+  roleId:{
+    type:String||Number,
+    required:true
+  }
+})
+const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions,propsContext});
+
+// 获取所有部门数据
+const allDeptData = ref<any[]>([]);
+const treeProps ={
+  label: 'name',
+  value: 'id',
+  children: 'children',
+}
+
+onMounted(async () => {
+  const res = await GetAllDeptData({role:propsContext.roleId});
+  allDeptData.value = res;
+  crudExpose.doSearch({form:{role:propsContext.roleId}})
+});
+
+</script>
+
+<style scoped>
+
+</style>

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

@@ -1,5 +1,7 @@
 <template>
-  <el-drawer v-model="drawerVisible" title="权限配置" direction="rtl" size="60%" :close-on-click-modal="false"
+  <el-drawer v-model="drawerVisible" title="权限配置" direction="rtl" size="60%"
+             :close-on-click-modal="false"
+             destroy-on-close
              :before-close="handleDrawerClose">
     <template #header>
       <el-row>
@@ -11,12 +13,14 @@
       </el-row>
     </template>
    <div>
-     <el-tabs type="border-card">
-       <el-tab-pane label="菜单/按钮授权">
+     <el-tabs type="border-card" v-model="permissionTab">
+       <el-tab-pane label="菜单/按钮授权" name="menu">
          <MenuPermission ref="menuPermissionRef" :role-id="props.roleId" @handleDrawerClose="handleDrawerClose"></MenuPermission>
        </el-tab-pane>
-       <el-tab-pane label="请求接口授权"></el-tab-pane>
-       <el-tab-pane label="接口权限">角色管理</el-tab-pane>
+       <el-tab-pane label="请求接口授权" name="api">
+         <ApiPermission :role-id="props.roleId"></ApiPermission>
+       </el-tab-pane>
+       <el-tab-pane label="接口权限" name="column">角色管理</el-tab-pane>
      </el-tabs>
    </div>
   </el-drawer>
@@ -28,7 +32,7 @@ import XEUtils from 'xe-utils';
 import {errorNotification} from '/@/utils/message';
 import {ElMessage} from 'element-plus'
 import MenuPermission from "./MenuPermission/index.vue";
-
+import ApiPermission from "./ApiPermission/index.vue";
 const props = defineProps({
   roleId: {
     type: Number,
@@ -45,28 +49,24 @@ const props = defineProps({
 })
 const emit = defineEmits(['update:drawerVisible'])
 const menuPermissionRef = ref()
+const permissionTab = ref('menu')
 const drawerVisible = ref(false)
 watch(
     () => props.drawerVisible,
     (val) => {
       drawerVisible.value = val;
       nextTick(()=>{
-        console.log(menuPermissionRef)
         menuPermissionRef.value.getMenuPremissionTreeData()
       })
       // fetchData()
     }
 );
 const handleDrawerClose = () => {
+  permissionTab.value ='menu'
   emit('update:drawerVisible', false);
 }
 
 
-const defaultTreeProps = {
-  children: 'children',
-  label: 'name',
-  value: 'id',
-};
 
 
 let collapseCurrent = ref(['1']);

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

@@ -79,12 +79,8 @@ export const createCrudOptions = function ({
 					}, */
 					customNew: {
 						type: 'primary',
-						text: '权限配置',
+						text: '授权',
 						show: hasPermissions('role:Update'),
-						tooltip: {
-							placement: 'top',
-							content: '权限配置',
-						},
 						click: (context: any): void => {
 							const { row } = context;
 							handleDrawerOpen(row);
@@ -183,40 +179,6 @@ export const createCrudOptions = function ({
 						value: 1,
 					},
 				},
-				admin: {
-					title: '是否管理员',
-					search: { show: false },
-					type: 'dict-radio',
-					dict: dict({
-						data: [
-							{
-								label: '是',
-								value: true,
-								color: 'success',
-							},
-							{
-								label: '否',
-								value: false,
-								color: 'danger',
-							},
-						],
-					}),
-					column: {
-						minWidth: 130,
-						sortable: 'custom',
-						show: columnPermission('admin', 'is_query'),
-					},
-					addForm: {
-						show: columnPermission('admin', 'is_create'),
-					},
-					editForm: {
-						show: columnPermission('admin', 'is_update'),
-					},
-					form: {
-						rules: [{ required: true, message: '是否管理员必填' }],
-						value: false,
-					},
-				},
 				status: {
 					title: '状态',
 					search: { show: true },