From c7633330243d21b1b9f70572b76d42f758c01650 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8C=BF=E5=B0=8F=E5=A4=A9?= <1638245306@qq.com> Date: Fri, 24 Nov 2023 15:12:46 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=A3=80=E6=B5=8B=E7=9B=AE?= =?UTF-8?q?=E5=89=8D=E6=89=80=E6=9C=89=E8=8F=9C=E5=8D=95=E6=9D=83=E9=99=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend/dvadmin/system/views/menu_button.py | 16 +- web/src/main.ts | 3 +- web/src/plugin/permission/index.ts | 6 +- web/src/stores/btnPermission.ts | 26 + web/src/utils/authDirective.ts | 15 +- web/src/utils/authFunction.ts | 15 +- web/src/views/system/areas/crud.tsx | 457 +++++++++-------- .../dept/components/DeptUserCom/crud.tsx | 14 +- .../dept/components/DeptUserCom/index.vue | 2 +- web/src/views/system/dictionary/crud.tsx | 10 +- .../views/system/dictionary/subDict/index.vue | 6 +- web/src/views/system/fileList/crud.tsx | 1 + .../menu/components/MenuButtonCom/crud.tsx | 411 +++++++-------- .../menu/components/MenuFieldCom/crud.tsx | 22 +- .../menu/components/MenuTreeCom/index.vue | 10 +- web/src/views/system/messageCenter/crud.tsx | 10 +- web/src/views/system/role/crud.tsx | 37 +- web/src/views/system/role/index.vue | 61 ++- web/src/views/system/rolePermission/api.ts | 107 ---- web/src/views/system/rolePermission/index.vue | 432 ---------------- web/src/views/system/user/crud.tsx | 12 +- web/src/views/system/whiteList/crud.tsx | 478 +++++++++--------- 22 files changed, 852 insertions(+), 1299 deletions(-) create mode 100644 web/src/stores/btnPermission.ts delete mode 100644 web/src/views/system/rolePermission/api.ts delete mode 100644 web/src/views/system/rolePermission/index.vue diff --git a/backend/dvadmin/system/views/menu_button.py b/backend/dvadmin/system/views/menu_button.py index 245b347..4473d47 100644 --- a/backend/dvadmin/system/views/menu_button.py +++ b/backend/dvadmin/system/views/menu_button.py @@ -11,7 +11,7 @@ from rest_framework.decorators import action from rest_framework.permissions import IsAuthenticated from dvadmin.system.models import MenuButton, RoleMenuButtonPermission -from dvadmin.utils.json_response import DetailResponse +from dvadmin.utils.json_response import DetailResponse, SuccessResponse from dvadmin.utils.serializers import CustomModelSerializer from dvadmin.utils.viewset import CustomModelViewSet @@ -49,12 +49,24 @@ class MenuButtonViewSet(CustomModelViewSet): retrieve:单例 destroy:删除 """ - queryset = MenuButton.objects.all() + queryset = MenuButton.objects.order_by('create_datetime') serializer_class = MenuButtonSerializer create_serializer_class = MenuButtonCreateUpdateSerializer update_serializer_class = MenuButtonCreateUpdateSerializer extra_filter_class = [] + def list(self, request, *args, **kwargs): + """ + 重写list方法 + :param request: + :param args: + :param kwargs: + :return: + """ + queryset = self.filter_queryset(self.get_queryset()) + serializer = self.get_serializer(queryset, many=True, request=request) + return SuccessResponse(serializer.data,msg="获取成功") + @action(methods=['get'],detail=False,permission_classes=[IsAuthenticated]) def menu_button_all_permission(self,request): """ diff --git a/web/src/main.ts b/web/src/main.ts index cb43556..f735d7f 100644 --- a/web/src/main.ts +++ b/web/src/main.ts @@ -14,7 +14,7 @@ import piniaPersist from 'pinia-plugin-persist'; // @ts-ignore import fastCrud from './settings.ts'; import pinia from './stores'; -import permission from '/@/plugin/permission/index'; +import {RegisterPermission} from '/@/plugin/permission/index'; // @ts-ignore import eIconPicker, { iconList, analyzingIconForIconfont } from 'e-icon-picker'; import 'e-icon-picker/icon/default-icon/symbol.js'; //基本彩色图标库 @@ -54,7 +54,6 @@ other.elSvg(app); app.use(VXETable) -app.use(permission); app.use(pinia).use(router).use(ElementPlus, { i18n: i18n.global.t }).use(i18n).use(VueGridLayout).use(fastCrud).mount('#app'); app.config.globalProperties.mittBus = mitt(); diff --git a/web/src/plugin/permission/index.ts b/web/src/plugin/permission/index.ts index b519bd0..a40941e 100644 --- a/web/src/plugin/permission/index.ts +++ b/web/src/plugin/permission/index.ts @@ -1,10 +1,6 @@ import permissionDirective from './directive.permission' import permissionFunc from './func.permission' -const install = function (app:any) { +export const RegisterPermission = function (app:any) { app.directive('permission', permissionDirective) app.provide('$hasPermissions',permissionFunc.hasPermissions) } - -export default { - install -} diff --git a/web/src/stores/btnPermission.ts b/web/src/stores/btnPermission.ts new file mode 100644 index 0000000..2879628 --- /dev/null +++ b/web/src/stores/btnPermission.ts @@ -0,0 +1,26 @@ +import {defineStore} from "pinia"; +import {DictionaryStates} from "/@/stores/interface"; +import {request} from "/@/utils/service"; + +export const BtnPermissionStore = defineStore('BtnPermission', { + state: (): DictionaryStates => ({ + data: [] + }), + actions: { + async getBtnPermissionStore() { + request({ + url: '/api/system/menu_button/menu_button_all_permission/', + method: 'get', + }).then((ret: { + data: [] + }) => { + // 转换数据格式并保存到pinia + let dataList = ret.data + this.data=dataList + }) + }, + }, + persist: { + enabled: true, + }, +}); diff --git a/web/src/utils/authDirective.ts b/web/src/utils/authDirective.ts index 5971e64..44a8871 100644 --- a/web/src/utils/authDirective.ts +++ b/web/src/utils/authDirective.ts @@ -1,7 +1,6 @@ import type { App } from 'vue'; -import { useUserInfo } from '/@/stores/userInfo'; import { judementSameArr } from '/@/utils/arrayOperation'; - +import {BtnPermissionStore} from "/@/stores/btnPermission"; /** * 用户权限指令 * @directive 单个权限验证（v-auth="xxx"） @@ -12,16 +11,16 @@ export function authDirective(app: App) { // 单个权限验证（v-auth="xxx"） app.directive('auth', { mounted(el, binding) { - const stores = useUserInfo(); - if (!stores.userInfos.authBtnList.some((v: string) => v === binding.value)) el.parentNode.removeChild(el); + const stores = BtnPermissionStore(); + if (!stores.data.some((v: string) => v === binding.value)) el.parentNode.removeChild(el); }, }); // 多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"） app.directive('auths', { mounted(el, binding) { let flag = false; - const stores = useUserInfo(); - stores.userInfos.authBtnList.map((val: string) => { + const stores = BtnPermissionStore(); + stores.data.map((val: string) => { binding.value.map((v: string) => { if (val === v) flag = true; }); @@ -32,8 +31,8 @@ export function authDirective(app: App) { // 多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"） app.directive('auth-all', { mounted(el, binding) { - const stores = useUserInfo(); - const flag = judementSameArr(binding.value, stores.userInfos.authBtnList); + const stores = BtnPermissionStore(); + const flag = judementSameArr(binding.value, stores.data); if (!flag) el.parentNode.removeChild(el); }, }); diff --git a/web/src/utils/authFunction.ts b/web/src/utils/authFunction.ts index 84c0ab4..c328520 100644 --- a/web/src/utils/authFunction.ts +++ b/web/src/utils/authFunction.ts @@ -1,14 +1,13 @@ -import { useUserInfo } from '/@/stores/userInfo'; import { judementSameArr } from '/@/utils/arrayOperation'; - +import {BtnPermissionStore} from "/@/stores/btnPermission"; /** * 单个权限验证 * @param value 权限值 * @returns 有权限，返回 `true`，反之则反 */ export function auth(value: string): boolean { - const stores = useUserInfo(); - return stores.userInfos.authBtnList.some((v: string) => v === value); + const stores = BtnPermissionStore(); + return stores.data.some((v: string) => v === value); } /** @@ -18,8 +17,8 @@ export function auth(value: string): boolean { */ export function auths(value: Array): boolean { let flag = false; - const stores = useUserInfo(); - stores.userInfos.authBtnList.map((val: string) => { + const stores = BtnPermissionStore(); + stores.data.map((val: string) => { value.map((v: string) => { if (val === v) flag = true; }); @@ -33,6 +32,6 @@ export function auths(value: Array): boolean { * @returns 有权限，返回 `true`，反之则反 */ export function authAll(value: Array): boolean { - const stores = useUserInfo(); - return judementSameArr(value, stores.userInfos.authBtnList); + const stores = BtnPermissionStore(); + return judementSameArr(value, stores.data); } diff --git a/web/src/views/system/areas/crud.tsx b/web/src/views/system/areas/crud.tsx index edf6935..01d1860 100644 --- a/web/src/views/system/areas/crud.tsx +++ b/web/src/views/system/areas/crud.tsx @@ -1,225 +1,244 @@ import * as api from './api'; -import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud'; -import { dictionary } from '/@/utils/dictionary'; -import { successMessage } from '/@/utils/message'; +import { + dict, + UserPageQuery, + AddReq, + DelReq, + EditReq, + compute, + CreateCrudOptionsProps, + CreateCrudOptionsRet +} from '@fast-crud/fast-crud'; +import {dictionary} from '/@/utils/dictionary'; +import {successMessage} from '/@/utils/message'; +import {auth} from "/@/utils/authFunction"; -export const createCrudOptions = function ({ crudExpose }: 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) => { - return await api.AddObj(form); - }; +export const createCrudOptions = function ({crudExpose}: 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) => { + return await api.AddObj(form); + }; - /** - * 懒加载 - * @param row - * @returns {Promise} - */ - const loadContentMethod = (tree: any, treeNode: any, resolve: Function) => { - pageRequest({ pcode: tree.code }).then((res: APIResponseData) => { - resolve(res.data); - }); - }; + /** + * 懒加载 + * @param row + * @returns {Promise} + */ + const loadContentMethod = (tree: any, treeNode: any, resolve: Function) => { + pageRequest({pcode: tree.code}).then((res: APIResponseData) => { + resolve(res.data); + }); + }; - return { - crudOptions: { - request: { - pageRequest, - addRequest, - editRequest, - delRequest, - }, - rowHandle: { - //固定右侧 - fixed: 'right', - width: 200, - buttons: { - view: { - show: false, - }, - edit: { - iconRight: 'Edit', - type: 'text', - }, - remove: { - iconRight: 'Delete', - type: 'text', - }, - }, - }, - pagination: { - show: false, - }, - table: { - rowKey: 'id', - lazy: true, - load: loadContentMethod, - treeProps: { children: 'children', hasChildren: 'hasChild' }, - }, - columns: { - _index: { - title: '序号', - form: { show: false }, - column: { - type: 'index', - align: 'center', - width: '70px', - columnSetDisabled: true, //禁止在列设置中选择 - }, - }, - // pcode: { - // title: '父级地区', - // show: false, - // search: { - // show: true, - // }, - // type: 'dict-tree', - // form: { - // component: { - // showAllLevels: false, // 仅显示最后一级 - // props: { - // elProps: { - // clearable: true, - // showAllLevels: false, // 仅显示最后一级 - // props: { - // checkStrictly: true, // 可以不需要选到最后一级 - // emitPath: false, - // clearable: true, - // }, - // }, - // }, - // }, - // }, - // }, - name: { - title: '名称', - search: { - show: true, - }, - treeNode: true, - type: 'input', - column:{ - minWidth: 120, - }, - form: { - rules: [ - // 表单校验规则 - { required: true, message: '名称必填项' }, - ], - component: { - placeholder: '请输入名称', - }, - }, - }, - code: { - title: '地区编码', - search: { - show: true, - }, - type: 'input', - column:{ - minWidth: 90, - }, - form: { - rules: [ - // 表单校验规则 - { required: true, message: '地区编码必填项' }, - ], - component: { - placeholder: '请输入地区编码', - }, - }, - }, - pinyin: { - title: '拼音', - search: { - disabled: true, - }, - type: 'input', - column:{ - minWidth: 120, - }, - form: { - rules: [ - // 表单校验规则 - { required: true, message: '拼音必填项' }, - ], - component: { - placeholder: '请输入拼音', - }, - }, - }, - level: { - title: '地区层级', - search: { - disabled: true, - }, - type: 'input', - column:{ - minWidth: 100, - }, - form: { - disabled: false, - rules: [ - // 表单校验规则 - { required: true, message: '拼音必填项' }, - ], - component: { - placeholder: '请输入拼音', - }, - }, - }, - initials: { - title: '首字母', - column:{ - minWidth: 100, - }, - form: { - rules: [ - // 表单校验规则 - { required: true, message: '首字母必填项' }, - ], + return { + crudOptions: { + request: { + pageRequest, + addRequest, + editRequest, + delRequest, + }, + actionbar: { + buttons: { + add: { + show: auth('area:Create'), + } + } + }, + rowHandle: { + //固定右侧 + fixed: 'right', + width: 200, + buttons: { + view: { + show: false, + }, + edit: { + iconRight: 'Edit', + type: 'text', + show: auth('area:Update') + }, + remove: { + iconRight: 'Delete', + type: 'text', + show: auth('area:Delete') + }, + }, + }, + pagination: { + show: false, + }, + table: { + rowKey: 'id', + lazy: true, + load: loadContentMethod, + treeProps: {children: 'children', hasChildren: 'hasChild'}, + }, + columns: { + _index: { + title: '序号', + form: {show: false}, + column: { + type: 'index', + align: 'center', + width: '70px', + columnSetDisabled: true, //禁止在列设置中选择 + }, + }, + // pcode: { + // title: '父级地区', + // show: false, + // search: { + // show: true, + // }, + // type: 'dict-tree', + // form: { + // component: { + // showAllLevels: false, // 仅显示最后一级 + // props: { + // elProps: { + // clearable: true, + // showAllLevels: false, // 仅显示最后一级 + // props: { + // checkStrictly: true, // 可以不需要选到最后一级 + // emitPath: false, + // clearable: true, + // }, + // }, + // }, + // }, + // }, + // }, + name: { + title: '名称', + search: { + show: true, + }, + treeNode: true, + type: 'input', + column: { + minWidth: 120, + }, + form: { + rules: [ + // 表单校验规则 + {required: true, message: '名称必填项'}, + ], + component: { + placeholder: '请输入名称', + }, + }, + }, + code: { + title: '地区编码', + search: { + show: true, + }, + type: 'input', + column: { + minWidth: 90, + }, + form: { + rules: [ + // 表单校验规则 + {required: true, message: '地区编码必填项'}, + ], + component: { + placeholder: '请输入地区编码', + }, + }, + }, + pinyin: { + title: '拼音', + search: { + disabled: true, + }, + type: 'input', + column: { + minWidth: 120, + }, + form: { + rules: [ + // 表单校验规则 + {required: true, message: '拼音必填项'}, + ], + component: { + placeholder: '请输入拼音', + }, + }, + }, + level: { + title: '地区层级', + search: { + disabled: true, + }, + type: 'input', + column: { + minWidth: 100, + }, + form: { + disabled: false, + rules: [ + // 表单校验规则 + {required: true, message: '拼音必填项'}, + ], + component: { + placeholder: '请输入拼音', + }, + }, + }, + initials: { + title: '首字母', + column: { + minWidth: 100, + }, + form: { + rules: [ + // 表单校验规则 + {required: true, message: '首字母必填项'}, + ], - component: { - placeholder: '请输入首字母', - }, - }, - }, - enable: { - title: '是否启用', - search: { - show: true, - }, - type: 'dict-radio', - column: { - minWidth:90, - component: { - name: 'fs-dict-switch', - activeText: '', - inactiveText: '', - style: '--el-switch-on-color: var(--el-color-primary); --el-switch-off-color: #dcdfe6', - onChange: compute((context) => { - return () => { - api.UpdateObj(context.row).then((res: APIResponseData) => { - successMessage(res.msg as string); - }); - }; - }), - }, - }, - dict: dict({ - data: dictionary('button_status_bool'), - }), - }, - }, - }, - }; + component: { + placeholder: '请输入首字母', + }, + }, + }, + enable: { + title: '是否启用', + search: { + show: true, + }, + type: 'dict-radio', + column: { + minWidth: 90, + component: { + name: 'fs-dict-switch', + activeText: '', + inactiveText: '', + style: '--el-switch-on-color: var(--el-color-primary); --el-switch-off-color: #dcdfe6', + onChange: compute((context) => { + return () => { + api.UpdateObj(context.row).then((res: APIResponseData) => { + successMessage(res.msg as string); + }); + }; + }), + }, + }, + dict: dict({ + data: dictionary('button_status_bool'), + }), + }, + }, + }, + }; }; diff --git a/web/src/views/system/dept/components/DeptUserCom/crud.tsx b/web/src/views/system/dept/components/DeptUserCom/crud.tsx index afeaf9a..d3fb883 100644 --- a/web/src/views/system/dept/components/DeptUserCom/crud.tsx +++ b/web/src/views/system/dept/components/DeptUserCom/crud.tsx @@ -4,6 +4,7 @@ import { request } from '/@/utils/service'; import * as api from './api'; import { dictionary } from '/@/utils/dictionary'; import { successMessage } from '/@/utils/message'; +import {auth} from "/@/utils/authFunction"; export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet { const pageRequest = async (query: UserPageQuery) => { @@ -39,9 +40,6 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp return await api.exportData(query); }; - //权限判定 - const hasPermissions: any = inject('$hasPermissions'); - return { crudOptions: { table: { @@ -58,12 +56,12 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp actionbar: { buttons: { add: { - show: hasPermissions('user:Create'), - // show:true + show: auth('user:Create') }, export: { text: '导出', //按钮文字 title: '导出', //鼠标停留显示的信息 + show: auth('user:Export'), click() { return exportRequest(crudExpose!.getSearchFormData()); }, @@ -89,15 +87,15 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp show: false, }, edit: { - show: hasPermissions('user:Update'), + show: auth('user:Update'), }, remove: { - show: hasPermissions('user:Delete'), + show: auth('user:Delete'), }, custom: { text: '重设密码', type: 'primary', - show: hasPermissions('user:ResetPassword'), + show: auth('user:ResetPassword'), tooltip: { placement: 'top', content: '重设密码', diff --git a/web/src/views/system/dept/components/DeptUserCom/index.vue b/web/src/views/system/dept/components/DeptUserCom/index.vue index 6538f20..fb50ff9 100644 --- a/web/src/views/system/dept/components/DeptUserCom/index.vue +++ b/web/src/views/system/dept/components/DeptUserCom/index.vue @@ -40,7 +40,7 @@ diff --git a/web/src/views/system/dictionary/crud.tsx b/web/src/views/system/dictionary/crud.tsx index 40a069a..ff057e0 100644 --- a/web/src/views/system/dictionary/crud.tsx +++ b/web/src/views/system/dictionary/crud.tsx @@ -3,7 +3,7 @@ import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOption import { dictionary } from '/@/utils/dictionary'; import { inject, nextTick, ref } from 'vue'; import { successMessage } from '/@/utils/message'; - +import {auth} from '/@/utils/authFunction'; export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet { const pageRequest = async (query: UserPageQuery) => { return await api.GetList(query); @@ -19,8 +19,6 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp return await api.AddObj(form); }; - //权限判定 - const hasPermissions = inject('$hasPermissions'); return { crudOptions: { @@ -40,17 +38,17 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp edit: { iconRight: 'Edit', type: 'text', - show: hasPermissions('dictionary:Update'), + show: auth('dictionary:Update'), }, remove: { iconRight: 'Delete', type: 'text', - show: hasPermissions('dictionary:Delete'), + show: auth('dictionary:Delete'), }, custom: { text: '字典配置', type: 'text', - show: hasPermissions('dictionary:Update'), + show: auth('dictionary:Update'), tooltip: { placement: 'top', content: '字典配置', diff --git a/web/src/views/system/dictionary/subDict/index.vue b/web/src/views/system/dictionary/subDict/index.vue index 65dd400..ca45597 100644 --- a/web/src/views/system/dictionary/subDict/index.vue +++ b/web/src/views/system/dictionary/subDict/index.vue @@ -1,8 +1,8 @@ diff --git a/web/src/views/system/fileList/crud.tsx b/web/src/views/system/fileList/crud.tsx index 31a7ec2..5c6a0d5 100644 --- a/web/src/views/system/fileList/crud.tsx +++ b/web/src/views/system/fileList/crud.tsx @@ -34,6 +34,7 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp //固定右侧 fixed: 'right', width: 200, + show:false, buttons: { view: { show: false, diff --git a/web/src/views/system/menu/components/MenuButtonCom/crud.tsx b/web/src/views/system/menu/components/MenuButtonCom/crud.tsx index 0270ad5..c1a7a1f 100644 --- a/web/src/views/system/menu/components/MenuButtonCom/crud.tsx +++ b/web/src/views/system/menu/components/MenuButtonCom/crud.tsx @@ -1,202 +1,215 @@ -import { AddReq, DelReq, EditReq, dict, CreateCrudOptionsRet, CreateCrudOptionsProps } from '@fast-crud/fast-crud'; +import {AddReq, DelReq, EditReq, dict, CreateCrudOptionsRet, CreateCrudOptionsProps} from '@fast-crud/fast-crud'; import * as api from './api'; - -import { request } from '/@/utils/service'; +import {auth} from '/@/utils/authFunction' +import {request} from '/@/utils/service'; //此处为crudOptions配置 -export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet { - const pageRequest = async () => { - if (context!.selectOptions.value.id) { - return await api.GetList({ menu: context!.selectOptions.value.id } as any); - } else { - return undefined; - } - }; - const editRequest = async ({ form, row }: EditReq) => { - return await api.UpdateObj({ ...form, menu: row.menu }); - }; - const delRequest = async ({ row }: DelReq) => { - return await api.DelObj(row.id); - }; - const addRequest = async ({ form }: AddReq) => { - return await api.AddObj({ ...form, ...{ menu: context!.selectOptions.value.id } }); - }; - return { - crudOptions: { - search: { - container: { - action: { - //按钮栏配置 - col: { - span: 8, - }, - }, - }, - }, - rowHandle: { - //固定右侧 - fixed: 'right', - width: 200, - buttons: { - view: { - show: false, - }, - edit: { - icon: '', - type: 'primary', - }, - remove: { - icon: '', - type: 'primary', - }, - }, - }, - request: { - pageRequest, - addRequest, - editRequest, - delRequest, - }, - form: { - col: { span: 24 }, - labelWidth: '100px', - wrapper: { - is: 'el-dialog', - width: '600px', - }, - }, - columns: { - _index: { - title: '序号', - form: { show: false }, - column: { - type: 'index', - align: 'center', - width: '70px', - columnSetDisabled: true, //禁止在列设置中选择 - }, - }, - search: { - title: '关键词', - column: { show: false }, - type: 'text', - search: { show: true }, - form: { - show: false, - component: { - placeholder: '输入关键词搜索', - }, - }, - }, - id: { - title: 'ID', - type: 'text', - column: { show: false }, - search: { show: false }, - form: { show: false }, - }, - name: { - title: '权限名称', - type: 'text', - search: { show: true }, - column: { - minWidth: 120, - sortable: true, - }, - form: { - rules: [{ required: true, message: '权限名称必填' }], - component: { - placeholder: '输入权限名称搜索', - props: { - clearable: true, - allowCreate: true, - filterable: true, - }, - }, - helper: { - render() { - return ; - }, - }, - }, - }, - value: { - title: '权限值', - type: 'text', - search: { show: false }, - column: { - width: 200, - sortable: true, - }, - form: { - rules: [{ required: true, message: '权限标识必填' }], - placeholder: '输入权限标识', - helper: { - render() { - return ; - }, - }, - }, - }, - method: { - title: '请求方式', - search: { show: false }, - type: 'dict-select', - column: { - width: 120, - sortable: true, - }, - dict: dict({ - data: [ - { label: 'GET', value: 0 }, - { label: 'POST', value: 1, color: 'success' }, - { label: 'PUT', value: 2, color: 'warning' }, - { label: 'DELETE', value: 3, color: 'danger' }, - ], - }), - form: { - rules: [{ required: true, message: '必填项' }], - }, - }, - api: { - title: '接口地址', - search: { show: false }, - type: 'dict-select', - dict: dict({ - getData() { - return request({ url: '/swagger.json' }).then((res: any) => { - const ret = Object.keys(res.paths); - const data = []; - for (const item of ret) { - const obj: any = {}; - obj.label = item; - obj.value = item; - data.push(obj); - } - return data; - }); - }, - }), - column: { - minWidth: 250, - sortable: true, - }, - form: { - rules: [{ required: true, message: '必填项' }], - component: { - props: { - allowCreate: true, - filterable: true, - clearable: true, - }, - }, - helper: { - render() { - return ; - }, - }, - }, - }, - }, - }, - }; +export const createCrudOptions = function ({crudExpose, context}: CreateCrudOptionsProps): CreateCrudOptionsRet { + const pageRequest = async () => { + if (context!.selectOptions.value.id) { + return await api.GetList({menu: context!.selectOptions.value.id} as any); + } else { + return undefined; + } + }; + const editRequest = async ({form, row}: EditReq) => { + return await api.UpdateObj({...form, menu: row.menu}); + }; + const delRequest = async ({row}: DelReq) => { + return await api.DelObj(row.id); + }; + const addRequest = async ({form}: AddReq) => { + return await api.AddObj({...form, ...{menu: context!.selectOptions.value.id}}); + }; + return { + crudOptions: { + pagination:{ + show:false + }, + search: { + container: { + action: { + //按钮栏配置 + col: { + span: 8, + }, + }, + }, + }, + actionbar: { + buttons: { + add: { + show: auth('btn:Create') + }, + }, + }, + rowHandle: { + //固定右侧 + fixed: 'right', + width: 200, + buttons: { + view: { + show: false, + }, + edit: { + icon: '', + type: 'primary', + show: auth('btn:Update') + }, + remove: { + show: auth('btn:Delete') + }, + }, + }, + request: { + pageRequest, + addRequest, + editRequest, + delRequest, + }, + form: { + col: {span: 24}, + labelWidth: '100px', + wrapper: { + is: 'el-dialog', + width: '600px', + }, + }, + columns: { + _index: { + title: '序号', + form: {show: false}, + column: { + type: 'index', + align: 'center', + width: '70px', + columnSetDisabled: true, //禁止在列设置中选择 + }, + }, + search: { + title: '关键词', + column: {show: false}, + type: 'text', + search: {show: true}, + form: { + show: false, + component: { + placeholder: '输入关键词搜索', + }, + }, + }, + id: { + title: 'ID', + type: 'text', + column: {show: false}, + search: {show: false}, + form: {show: false}, + }, + name: { + title: '权限名称', + type: 'text', + search: {show: true}, + column: { + minWidth: 120, + sortable: true, + }, + form: { + rules: [{required: true, message: '权限名称必填'}], + component: { + placeholder: '输入权限名称搜索', + props: { + clearable: true, + allowCreate: true, + filterable: true, + }, + }, + helper: { + render() { + return ; + }, + }, + }, + }, + value: { + title: '权限值', + type: 'text', + search: {show: false}, + column: { + width: 200, + sortable: true, + }, + form: { + rules: [{required: true, message: '权限标识必填'}], + placeholder: '输入权限标识', + helper: { + render() { + return ; + }, + }, + }, + }, + method: { + title: '请求方式', + search: {show: false}, + type: 'dict-select', + column: { + width: 120, + sortable: true, + }, + dict: dict({ + data: [ + {label: 'GET', value: 0}, + {label: 'POST', value: 1, color: 'success'}, + {label: 'PUT', value: 2, color: 'warning'}, + {label: 'DELETE', value: 3, color: 'danger'}, + ], + }), + form: { + rules: [{required: true, message: '必填项'}], + }, + }, + api: { + title: '接口地址', + search: {show: false}, + type: 'dict-select', + dict: dict({ + getData() { + return request({url: '/swagger.json'}).then((res: any) => { + const ret = Object.keys(res.paths); + const data = []; + for (const item of ret) { + const obj: any = {}; + obj.label = item; + obj.value = item; + data.push(obj); + } + return data; + }); + }, + }), + column: { + minWidth: 250, + sortable: true, + }, + form: { + rules: [{required: true, message: '必填项'}], + component: { + props: { + allowCreate: true, + filterable: true, + clearable: true, + }, + }, + helper: { + render() { + return ; + }, + }, + }, + }, + }, + }, + }; }; diff --git a/web/src/views/system/menu/components/MenuFieldCom/crud.tsx b/web/src/views/system/menu/components/MenuFieldCom/crud.tsx index a99a1a4..17d4a83 100644 --- a/web/src/views/system/menu/components/MenuFieldCom/crud.tsx +++ b/web/src/views/system/menu/components/MenuFieldCom/crud.tsx @@ -2,8 +2,8 @@ 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 { inject } from 'vue'; +import {auth} from "/@/utils/authFunction"; @@ -28,11 +28,6 @@ export const createCrudOptions = function ({ crudExpose, props,modelDialog,selec return await api.AddObj(form); }; - - - //权限判定 - const hasPermissions = inject('$hasPermissions'); - return { crudOptions: { request: { @@ -46,9 +41,13 @@ export const createCrudOptions = function ({ crudExpose, props,modelDialog,selec }, actionbar: { buttons: { + add:{ + show:auth('column:Create') + }, auto: { text: '自动匹配', type: 'success', + show:auth('column:Match'), click: () => { return modelDialog.value=true; }, @@ -58,6 +57,17 @@ export const createCrudOptions = function ({ crudExpose, props,modelDialog,selec rowHandle: { //固定右侧 fixed: 'right', + buttons: { + view: { + show: false, + }, + edit: { + show: auth('column:Update') + }, + remove: { + show: auth('column:Delete') + }, + }, }, form: { col: { span: 24 }, diff --git a/web/src/views/system/menu/components/MenuTreeCom/index.vue b/web/src/views/system/menu/components/MenuTreeCom/index.vue index 82363f5..91a9988 100644 --- a/web/src/views/system/menu/components/MenuTreeCom/index.vue +++ b/web/src/views/system/menu/components/MenuTreeCom/index.vue @@ -41,31 +41,31 @@
- + - + - + - + - + diff --git a/web/src/views/system/messageCenter/crud.tsx b/web/src/views/system/messageCenter/crud.tsx index 427e699..f77626e 100644 --- a/web/src/views/system/messageCenter/crud.tsx +++ b/web/src/views/system/messageCenter/crud.tsx @@ -3,7 +3,7 @@ import { dict, useCompute, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudO import tableSelector from '/@/components/tableSelector/index.vue'; import {shallowRef, computed, ref, inject} from 'vue'; import manyToMany from '/@/components/manyToMany/index.vue'; - +import {auth} from '/@/utils/authFunction' const { compute } = useCompute(); interface CreateCrudOptionsTypes { @@ -36,8 +36,6 @@ export const createCrudOptions = function ({ crudExpose, tabActivted }: { crudEx return tabActivted.value === 'receive'; }); - //权限判定 - const hasPermissions = inject("$hasPermissions") return { crudOptions: { @@ -51,7 +49,7 @@ export const createCrudOptions = function ({ crudExpose, tabActivted }: { crudEx buttons:{ add:{ show:computed(() =>{ - return tabActivted.value !== 'receive' + return tabActivted.value !== 'receive' && auth('messageCenter:Create'); }) }, } @@ -67,7 +65,7 @@ export const createCrudOptions = function ({ crudExpose, tabActivted }: { crudEx text:"查看", type:'text', iconRight:'View', - show:hasPermissions("messageCenter:Search"), + show:auth("messageCenter:Search"), click({ index, row }) { crudExpose.openView({ index, row }); if (tabActivted.value === 'receive') { @@ -79,7 +77,7 @@ export const createCrudOptions = function ({ crudExpose, tabActivted }: { crudEx remove: { iconRight: 'Delete', type: 'text', - show:hasPermissions('messageCenter:Delete') + show:auth('messageCenter:Delete') }, }, }, diff --git a/web/src/views/system/role/crud.tsx b/web/src/views/system/role/crud.tsx index f891650..73ec6d3 100644 --- a/web/src/views/system/role/crud.tsx +++ b/web/src/views/system/role/crud.tsx @@ -3,7 +3,7 @@ import * as api from './api'; import { dictionary } from '/@/utils/dictionary'; import { columnPermission } from '../../../utils/columnPermission'; import { successMessage } from '../../../utils/message'; - +import {auth} from '/@/utils/authFunction' interface CreateCrudOptionsTypes { output: any; crudOptions: CrudOptions; @@ -14,12 +14,10 @@ export const createCrudOptions = function ({ crudExpose, rolePermission, handleDrawerOpen, - hasPermissions, }: { crudExpose: CrudExpose; rolePermission: any; handleDrawerOpen: Function; - hasPermissions: Function; }): CreateCrudOptionsTypes { const pageRequest = async (query: any) => { return await api.GetList(query); @@ -50,7 +48,7 @@ export const createCrudOptions = function ({ actionbar: { buttons: { add: { - show: hasPermissions('role:Create') + show: auth('role:Create') } } }, @@ -63,31 +61,15 @@ export const createCrudOptions = function ({ show: true, }, edit: { - show: hasPermissions('role:Update'), + show: auth('role:Update'), }, remove: { - show: hasPermissions('role:Delete'), + show: auth('role:Delete'), }, - /* custom: { + permission: { type: 'primary', text: '权限配置', - show: hasPermissions('role:Update'), - tooltip: { - placement: 'top', - content: '权限配置', - }, - click: (context: any): void => { - const { row } = context; - // eslint-disable-next-line no-mixed-spaces-and-tabs - rolePermission.value.drawer = true; - rolePermission.value.editedRoleInfo = row; - rolePermission.value.initGet(); - }, - }, */ - customNew: { - type: 'primary', - text: '权限配置', - show: hasPermissions('role:Update'), + show: auth('role:Permission'), tooltip: { placement: 'top', content: '权限配置', @@ -134,9 +116,9 @@ export const createCrudOptions = function ({ sortable: 'custom', show: columnPermission('name', 'is_query'), }, - addForm: { - show: columnPermission('name', 'is_create'), - }, + // addForm: { + // show: columnPermission('name', 'is_create'), + // }, editForm: { show: columnPermission('name', 'is_update'), }, @@ -177,7 +159,6 @@ export const createCrudOptions = function ({ column: { minWidth: 90, sortable: 'custom', - show: columnPermission('sort', 'is_query'), }, addForm: { show: columnPermission('sort', 'is_create'), diff --git a/web/src/views/system/role/index.vue b/web/src/views/system/role/index.vue index f5d4011..658a7b6 100644 --- a/web/src/views/system/role/index.vue +++ b/web/src/views/system/role/index.vue @@ -13,13 +13,14 @@ - - diff --git a/web/src/views/system/user/crud.tsx b/web/src/views/system/user/crud.tsx index 2165cf4..44b97a5 100644 --- a/web/src/views/system/user/crud.tsx +++ b/web/src/views/system/user/crud.tsx @@ -3,7 +3,7 @@ import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOption import { request } from '/@/utils/service'; import { dictionary } from '/@/utils/dictionary'; import { successMessage } from '/@/utils/message'; -import { inject } from 'vue'; +import { auth } from '/@/utils/authFunction'; export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet { const pageRequest = async (query: UserPageQuery) => { @@ -24,8 +24,6 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp return await api.exportData(query) } - //权限判定 - const hasPermissions:any = inject('$hasPermissions'); return { crudOptions: { @@ -43,7 +41,7 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp actionbar: { buttons: { add: { - show: hasPermissions('user:Create') + show: auth('user:Create') }, export:{ text:"导出",//按钮文字 @@ -65,17 +63,17 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp edit: { iconRight: 'Edit', type: 'text', - show: hasPermissions('user:Update'), + show: auth('user:Update'), }, remove: { iconRight: 'Delete', type: 'text', - show: hasPermissions('user:Delete'), + show: auth('user:Delete'), }, custom: { text: '重设密码', type: 'text', - show: hasPermissions('user:ResetPassword'), + show: auth('user:ResetPassword'), tooltip: { placement: 'top', content: '重设密码', diff --git a/web/src/views/system/whiteList/crud.tsx b/web/src/views/system/whiteList/crud.tsx index e6dade9..7104cda 100644 --- a/web/src/views/system/whiteList/crud.tsx +++ b/web/src/views/system/whiteList/crud.tsx @@ -1,237 +1,251 @@ 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"; +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 {auth} from '/@/utils/authFunction' -export const createCrudOptions = function ({ crudExpose }: 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) => { - return await api.AddObj(form); - }; +export const createCrudOptions = function ({crudExpose}: 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) => { + return await api.AddObj(form); + }; - //权限判定 - const hasPermissions = inject("$hasPermissions") - return { - crudOptions: { - request: { - pageRequest, - addRequest, - editRequest, - delRequest, - }, - rowHandle: { - //固定右侧 - fixed: 'right', - width: 150, - buttons: { - view: { - show: false, - }, - edit: { - iconRight: 'Edit', - type: 'text', - show:hasPermissions("api_white_list:Update") - }, - remove: { - iconRight: 'Delete', - type: 'text', - show:hasPermissions("api_white_list:Delete") - }, - }, - }, - 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; - }, - }, - }, - search: { - title: '关键词', - column: { - show: false, - }, - search: { - show: true, - component: { - props: { - clearable: true, - }, - placeholder: '请输入关键词', - }, - }, - form: { - show: false, - component: { - props: { - clearable: true, - }, - }, - }, - }, - method: { - title: '请求方式', - sortable: 'custom', - search: { - disabled: false, - }, - 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:{ - minWidth: 120, - }, - form: { - rules: [ - // 表单校验规则 - { - required: true, - message: '必填项', - }, - ], - component: { - span: 12, - }, - itemProps: { - class: { yxtInput: true }, - }, - }, - }, - url: { - 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: { - elProps: { - allowCreate: true, - filterable: true, - clearable: true, - }, - }, - }, - itemProps: { - class: { yxtInput: true }, - }, - helper: { - position: 'label', - tooltip: { - placement: 'top-start', - }, - text: '请正确填写，以免请求时被拦截。匹配单例使用正则,例如:/api/xx/.*?/', - }, - }, - }, - enable_datasource: { - title: '数据权限认证', - search: { - disabled: false, - }, - type: 'dict-radio', - column: { - minWidth:120, - component: { - name: 'fs-dict-switch', - activeText: '', - inactiveText: '', - style: '--el-switch-on-color: var(--el-color-primary); --el-switch-off-color: #dcdfe6', - onChange: compute((context) => { - return () => { - api.UpdateObj(context.row).then((res: APIResponseData) => { - successMessage(res.msg as string); - }); - }; - }), - }, - }, - dict: dict({ - data: dictionary('button_status_bool'), - }), - }, - }, - }, - }; + return { + crudOptions: { + request: { + pageRequest, + addRequest, + editRequest, + delRequest, + }, + actionbar: { + buttons: { + add: { + show: auth('api_white_list:Create') + } + } + }, + rowHandle: { + //固定右侧 + fixed: 'right', + width: 150, + buttons: { + view: { + show: false, + }, + edit: { + iconRight: 'Edit', + type: 'text', + show: auth("api_white_list:Update") + }, + remove: { + iconRight: 'Delete', + type: 'text', + show: auth("api_white_list:Delete") + }, + }, + }, + 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; + }, + }, + }, + search: { + title: '关键词', + column: { + show: false, + }, + search: { + show: true, + component: { + props: { + clearable: true, + }, + placeholder: '请输入关键词', + }, + }, + form: { + show: false, + component: { + props: { + clearable: true, + }, + }, + }, + }, + method: { + title: '请求方式', + sortable: 'custom', + search: { + disabled: false, + }, + 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: { + minWidth: 120, + }, + form: { + rules: [ + // 表单校验规则 + { + required: true, + message: '必填项', + }, + ], + component: { + span: 12, + }, + itemProps: { + class: {yxtInput: true}, + }, + }, + }, + url: { + 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: { + elProps: { + allowCreate: true, + filterable: true, + clearable: true, + }, + }, + }, + itemProps: { + class: {yxtInput: true}, + }, + helper: { + position: 'label', + tooltip: { + placement: 'top-start', + }, + text: '请正确填写，以免请求时被拦截。匹配单例使用正则,例如:/api/xx/.*?/', + }, + }, + }, + enable_datasource: { + title: '数据权限认证', + search: { + disabled: false, + }, + type: 'dict-radio', + column: { + minWidth: 120, + component: { + name: 'fs-dict-switch', + activeText: '', + inactiveText: '', + style: '--el-switch-on-color: var(--el-color-primary); --el-switch-off-color: #dcdfe6', + onChange: compute((context) => { + return () => { + api.UpdateObj(context.row).then((res: APIResponseData) => { + successMessage(res.msg as string); + }); + }; + }), + }, + }, + dict: dict({ + data: dictionary('button_status_bool'), + }), + }, + }, + }, + }; };