feat(client): improve acl module

This commit is contained in:
chenos 2022-02-18 20:30:03 +08:00
parent 2c38b63f18
commit 77d9228ea2
5 changed files with 199 additions and 56 deletions

View File

@ -1,25 +1,71 @@
import { Table } from 'antd'; import { Checkbox, Spin, Table } from 'antd';
import React from 'react'; import React from 'react';
import { useRecord } from '../..';
import { useAPIClient, useRequest } from '../../api-client';
import { useRoute } from '../../route-switch'; import { useRoute } from '../../route-switch';
const toItems = (properties = {}) => {
const items = [];
for (const key in properties) {
if (Object.prototype.hasOwnProperty.call(properties, key)) {
const element = properties[key];
const item = {
title: element.title,
uid: element['x-uid'],
};
if (element.properties) {
item['children'] = toItems(element.properties);
}
items.push(item);
}
}
return items;
};
export const MenuConfigure = () => { export const MenuConfigure = () => {
const route = useRoute(); const route = useRoute();
console.log(route); const record = useRecord();
console.log(route.uiSchemaUid);
const api = useAPIClient();
const { loading, data } = useRequest({
url: `uiSchemas:getProperties/${route.uiSchemaUid}`,
});
if (loading) {
return <Spin />;
}
const items = toItems(data?.data?.properties);
console.log(items);
return ( return (
<div> <Table
<Table rowKey={'uid'}
columns={[ pagination={false}
{ expandable={{
dataIndex: 'title', defaultExpandAllRows: true,
title: '菜单项', }}
}, columns={[
{ {
dataIndex: 'accessible', dataIndex: 'title',
title: '允许访问', title: '菜单项',
}, },
]} {
dataSource={[]} dataIndex: 'accessible',
/> title: (
</div> <>
<Checkbox /> 访
</>
),
render: (_, schema) => (
<Checkbox
onChange={async (e) => {
await api.request({
url: `roles/${record.name}/menuUiSchemas:toggle/${schema.uid}`,
});
}}
/>
),
},
]}
dataSource={items}
/>
); );
}; };

View File

@ -1,37 +1,66 @@
import { FormLayout } from '@formily/antd'; import { onFieldChange } from '@formily/core';
import { message } from 'antd';
import React from 'react'; import React from 'react';
import { useAPIClient, useRequest } from '../../api-client';
import { useRecord } from '../../record-provider';
import { SchemaComponent } from '../../schema-component'; import { SchemaComponent } from '../../schema-component';
export const RoleConfigure = () => { export const RoleConfigure = () => {
const api = useAPIClient();
const record = useRecord();
return ( return (
<div> <SchemaComponent
<FormLayout layout={'vertical'}> schema={{
<SchemaComponent type: 'void',
schema={{ name: 'form',
type: 'object', 'x-component': 'Form',
properties: { 'x-component-props': {
allowConfigure: { useValues: (options) => {
title: '配置权限', return useRequest(
'x-decorator': 'FormItem', {
'x-component': 'Checkbox', resource: 'roles',
'x-content': '允许配置系统,包括界面配置、数据表配置、权限配置、系统配置等全部配置项', action: 'get',
params: {
filterByTk: record.name,
},
}, },
strategy: { options,
title: '通用数据操作权限', );
description: '所有数据表都默认使用通用数据操作权限;同时,可以针对每个数据表单独配置权限。', },
'x-component': 'StrategyActions', effects() {
'x-decorator': 'FormItem', onFieldChange('*', async (field, form) => {
}, if (!form.modified) {
allowNewMenu: { return;
title: '新增菜单项默认访问权限', }
'x-decorator': 'FormItem', await api.resource('roles').update({
'x-component': 'Checkbox', filterByTk: record.name,
'x-content': '新增菜单项默认允许访问', values: form.values,
}, });
}, message.success('保存成功!');
}} });
/> },
</FormLayout> },
</div> properties: {
allowConfigure: {
title: '配置权限',
'x-decorator': 'FormItem',
'x-component': 'Checkbox',
'x-content': '允许配置系统,包括界面配置、数据表配置、权限配置、系统配置等全部配置项',
},
strategy: {
title: '通用数据操作权限',
description: '所有数据表都默认使用通用数据操作权限;同时,可以针对每个数据表单独配置权限。',
'x-component': 'StrategyActions',
'x-decorator': 'FormItem',
},
allowNewMenu: {
title: '新增菜单项默认访问权限',
'x-decorator': 'FormItem',
'x-component': 'Checkbox',
'x-content': '新增菜单项默认允许访问',
},
},
}}
/>
); );
}; };

View File

@ -1,8 +1,13 @@
import { FormItem, FormLayout } from '@formily/antd'; import { FormItem, FormLayout } from '@formily/antd';
import { Checkbox, Select, Table } from 'antd'; import { Checkbox, Select, Table } from 'antd';
import React from 'react'; import React from 'react';
import { useCollectionManager, useRecord } from '../..';
export const RolesResourcesActions = () => { export const RolesResourcesActions = () => {
const record = useRecord();
console.log('record', record);
const { get } = useCollectionManager();
const collection = get(record.name);
return ( return (
<div> <div>
<FormLayout layout={'vertical'}> <FormLayout layout={'vertical'}>
@ -47,7 +52,30 @@ export const RolesResourcesActions = () => {
/> />
</FormItem> </FormItem>
<FormItem label={'字段权限'}> <FormItem label={'字段权限'}>
<Table /> <Table
dataSource={collection?.fields}
columns={[
{
dataIndex: ['uiSchema', 'title'],
title: '字段名称',
},
{
dataIndex: 'view',
title: '查看',
render: () => <Checkbox />
},
{
dataIndex: 'update',
title: '编辑',
render: () => <Checkbox />
},
{
dataIndex: 'create',
title: '添加',
render: () => <Checkbox />
},
]}
/>
</FormItem> </FormItem>
</FormLayout> </FormLayout>
</div> </div>

View File

@ -1,4 +1,6 @@
import { ISchema } from '@formily/react'; import { ISchema, useForm } from '@formily/react';
import { useEffect } from 'react';
import { useActionContext, useAPIClient, useRecord, useRequest } from '../../../';
const collection = { const collection = {
name: 'collections', name: 'collections',
@ -67,9 +69,9 @@ export const roleCollectionsSchema: ISchema = {
'x-component': 'VoidTable', 'x-component': 'VoidTable',
'x-component-props': { 'x-component-props': {
rowKey: 'name', rowKey: 'name',
rowSelection: { // rowSelection: {
type: 'checkbox', // type: 'checkbox',
}, // },
useDataSource: '{{ useDataSourceFromRAC }}', useDataSource: '{{ useDataSourceFromRAC }}',
}, },
properties: { properties: {
@ -122,13 +124,37 @@ export const roleCollectionsSchema: ISchema = {
'x-component': 'Action.Drawer', 'x-component': 'Action.Drawer',
'x-decorator': 'Form', 'x-decorator': 'Form',
'x-decorator-props': { 'x-decorator-props': {
useValues: '{{ useValues }}', useValues(options) {
const record = useRecord();
const { visible } = useActionContext();
const result = useRequest(
{
resource: 'roles.resources',
resourceOf: record.roleName,
action: 'get',
params: {
filterByTk: record.name,
},
},
{ ...options, manual: true },
);
useEffect(() => {
if (record.usingConfig === 'strategy') {
return;
}
if (visible) {
result.run();
}
}, [visible, record.usingConfig]);
return;
},
}, },
title: 'Drawer Title', title: '配置权限',
properties: { properties: {
usingActionsConfig: { usingActionsConfig: {
'x-component': 'Radio.Group', 'x-component': 'Radio.Group',
'x-decorator': 'FormItem', 'x-decorator': 'FormItem',
default: false,
enum: [ enum: [
{ value: false, label: '使用通用权限:只能查看、添加、修改数据' }, { value: false, label: '使用通用权限:只能查看、添加、修改数据' },
{ value: true, label: '单独配置权限' }, { value: true, label: '单独配置权限' },
@ -154,7 +180,21 @@ export const roleCollectionsSchema: ISchema = {
'x-component': 'Action', 'x-component': 'Action',
'x-component-props': { 'x-component-props': {
type: 'primary', type: 'primary',
useAction: '{{ useUpdateAction }}', useAction: () => {
const form = useForm();
const api = useAPIClient();
const record = useRecord();
return {
async run() {
await api.resource('roles.resources', record.roleName).create({
values: {
...form.values,
name: record.name,
},
});
},
};
},
}, },
}, },
}, },

View File

@ -114,7 +114,7 @@ export const roleSchema: ISchema = {
}, },
}, },
}, },
table1: { table: {
type: 'void', type: 'void',
'x-uid': 'input', 'x-uid': 'input',
'x-component': 'VoidTable', 'x-component': 'VoidTable',
@ -228,7 +228,7 @@ export const roleSchema: ISchema = {
'x-component': 'Action.Drawer', 'x-component': 'Action.Drawer',
'x-decorator': 'Form', 'x-decorator': 'Form',
'x-decorator-props': { 'x-decorator-props': {
useValues: '{{ useValues }}', useValues: '{{ useValuesFromRecord }}',
}, },
title: 'Drawer Title', title: 'Drawer Title',
properties: { properties: {