feat(client): improve acl module

This commit is contained in:
chenos 2022-02-19 17:19:32 +08:00
parent f7a30e4103
commit 014bb7ab3f
11 changed files with 150 additions and 120 deletions

View File

@ -1,40 +1,13 @@
import { Checkbox, Spin, Table } from 'antd';
import { Checkbox, Table } from 'antd';
import React from 'react';
import { useMenuItems } from '.';
import { useRecord } from '../..';
import { useAPIClient, useRequest } from '../../api-client';
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;
};
import { useAPIClient } from '../../api-client';
export const MenuConfigure = () => {
const route = useRoute();
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);
const items = useMenuItems();
return (
<Table
rowKey={'uid'}

View File

@ -1,11 +1,70 @@
import React from 'react';
import { Spin } from 'antd';
import React, { createContext, useContext } from 'react';
import { useRequest } from '../../api-client';
import { useRoute } from '../../route-switch';
import { SchemaComponent } from '../../schema-component';
import { roleSchema } from './schemas/roles';
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;
};
const AvailableActionsContext = createContext(null);
const MenuItemsContext = createContext(null);
const AvailableActionsProver: React.FC = (props) => {
const { data, loading } = useRequest({
resource: 'availableActions',
action: 'list',
});
if (loading) {
return <Spin />;
}
return <AvailableActionsContext.Provider value={data?.data}>{props.children}</AvailableActionsContext.Provider>;
};
const MenuItemsProver: React.FC = (props) => {
const route = useRoute();
const { loading, data } = useRequest({
url: `uiSchemas:getProperties/${route.uiSchemaUid}`,
});
if (loading) {
return <Spin />;
}
const items = toItems(data?.data?.properties);
return <MenuItemsContext.Provider value={items}>{props.children}</MenuItemsContext.Provider>;
};
export const useAvailableActions = () => {
return useContext(AvailableActionsContext);
};
export const useMenuItems = () => {
return useContext(MenuItemsContext);
};
export const RoleTable = () => {
return (
<div>
<SchemaComponent schema={roleSchema} />
<AvailableActionsProver>
<MenuItemsProver>
<SchemaComponent schema={roleSchema} />
</MenuItemsProver>
</AvailableActionsProver>
</div>
);
};

View File

@ -1,13 +1,15 @@
import { FormItem, FormLayout } from '@formily/antd';
import { Checkbox, Select, Table } from 'antd';
import React from 'react';
import { useCollectionManager, useRecord } from '../..';
import { useAvailableActions } from '.';
import { useCollectionManager, useCompile, useRecord } from '../..';
export const RolesResourcesActions = () => {
const record = useRecord();
console.log('record', record);
const { get } = useCollectionManager();
const collection = get(record.name);
const roleCollection = useRecord();
const availableActions = useAvailableActions();
const { getCollection } = useCollectionManager();
const collection = getCollection(roleCollection.name);
const compile = useCompile();
return (
<div>
<FormLayout layout={'vertical'}>
@ -19,6 +21,7 @@ export const RolesResourcesActions = () => {
{
dataIndex: 'displayName',
title: '操作',
render: (value) => compile(value),
},
{
dataIndex: 'type',
@ -35,20 +38,7 @@ export const RolesResourcesActions = () => {
render: () => <Select size={'small'} />,
},
]}
dataSource={[
{
displayName: '添加',
type: 'new-data',
},
{
displayName: '导入',
type: 'new-data',
},
{
displayName: '查看',
type: 'old-data',
},
]}
dataSource={availableActions}
/>
</FormItem>
<FormItem label={'字段权限'}>
@ -56,23 +46,23 @@ export const RolesResourcesActions = () => {
dataSource={collection?.fields}
columns={[
{
dataIndex: ['uiSchema', 'title'],
dataIndex: ['uiSchema', 'title'],
title: '字段名称',
},
{
dataIndex: 'view',
title: '查看',
render: () => <Checkbox />
render: () => <Checkbox />,
},
{
dataIndex: 'update',
title: '编辑',
render: () => <Checkbox />
render: () => <Checkbox />,
},
{
dataIndex: 'create',
title: '添加',
render: () => <Checkbox />
render: () => <Checkbox />,
},
]}
/>

View File

@ -1,7 +1,11 @@
import { Checkbox, Select, Table } from 'antd';
import React from 'react';
import { useAvailableActions } from '.';
import { useCompile } from '../..';
export const StrategyActions = () => {
const availableActions = useAvailableActions();
const compile = useCompile();
return (
<div>
<Table
@ -11,6 +15,7 @@ export const StrategyActions = () => {
{
dataIndex: 'displayName',
title: '操作',
render: (value) => compile(value),
},
{
dataIndex: 'type',
@ -24,23 +29,10 @@ export const StrategyActions = () => {
{
dataIndex: 'scope',
title: '可操作的数据范围',
render: () => <Select size={'small'}/>,
},
]}
dataSource={[
{
displayName: '添加',
type: 'new-data',
},
{
displayName: '导入',
type: 'new-data',
},
{
displayName: '查看',
type: 'old-data',
render: () => <Select size={'small'} />,
},
]}
dataSource={availableActions}
/>
</div>
);

View File

@ -1,6 +1,6 @@
import { ISchema, useForm } from '@formily/react';
import { useEffect } from 'react';
import { useActionContext, useAPIClient, useRecord, useRequest } from '../../../';
import { ISchema } from '@formily/react';
import { useRoleResourceValues } from './useRoleResourceValues';
import { useSaveRoleResourceAction } from './useSaveRoleResourceAction';
const collection = {
name: 'collections',
@ -124,30 +124,7 @@ export const roleCollectionsSchema: ISchema = {
'x-component': 'Action.Drawer',
'x-decorator': 'Form',
'x-decorator-props': {
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;
},
useValues: useRoleResourceValues,
},
title: '配置权限',
properties: {
@ -156,7 +133,7 @@ export const roleCollectionsSchema: ISchema = {
'x-decorator': 'FormItem',
default: false,
enum: [
{ value: false, label: '使用通用权限:只能查看、添加、修改数据' },
{ value: false, label: '使用通用权限' },
{ value: true, label: '单独配置权限' },
],
},
@ -180,21 +157,7 @@ export const roleCollectionsSchema: ISchema = {
'x-component': 'Action',
'x-component-props': {
type: 'primary',
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,
},
});
},
};
},
useAction: useSaveRoleResourceAction,
},
},
},

View File

@ -59,6 +59,11 @@ export const roleSchema: ISchema = {
actions: {
type: 'void',
'x-component': 'ActionBar',
'x-component-props': {
style: {
marginBottom: 16,
},
},
properties: {
delete: {
type: 'void',
@ -77,7 +82,7 @@ export const roleSchema: ISchema = {
type: 'void',
'x-component': 'Action.Drawer',
'x-decorator': 'Form',
title: 'Drawer Title',
title: '添加角色',
properties: {
title: {
'x-component': 'CollectionField',
@ -171,7 +176,7 @@ export const roleSchema: ISchema = {
drawer: {
type: 'void',
'x-component': 'Action.Drawer',
title: 'Drawer Title',
title: '配置权限',
properties: {
tabs1: {
type: 'void',
@ -230,7 +235,7 @@ export const roleSchema: ISchema = {
'x-decorator-props': {
useValues: '{{ useValuesFromRecord }}',
},
title: 'Drawer Title',
title: '编辑角色',
properties: {
title: {
'x-component': 'CollectionField',

View File

@ -0,0 +1,27 @@
import { useEffect } from 'react';
import { useActionContext, useRecord, useRequest } from '../../../';
export const useRoleResourceValues = (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;
};

View File

@ -0,0 +1,18 @@
import { useForm } from '@formily/react';
import { useAPIClient, useRecord } from '../../../';
export const useSaveRoleResourceAction = () => {
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

@ -71,7 +71,7 @@ export const collectionFieldSchema: ISchema = {
params: {
pageSize: 50,
filter: {},
sort: ['sort'],
// sort: ['sort'],
appends: ['uiSchema'],
},
},

View File

@ -12,7 +12,10 @@ export const useCollectionManager = () => {
get(name: string) {
return collections?.find((collection) => collection.name === name);
},
getInterface(name) {
getCollection(name: string) {
return collections?.find((collection) => collection.name === name);
},
getInterface(name: string) {
return interfaces[name] ? clone(interfaces[name]) : null;
},
};

View File

@ -1,6 +1,6 @@
import { useContext } from 'react';
import { compile } from '@formily/json-schema/lib/compiler';
import { SchemaExpressionScopeContext, SchemaOptionsContext } from '@formily/react';
import { useContext } from 'react';
export const useCompile = () => {
const options = useContext(SchemaOptionsContext);