feat(client): improve acl module
This commit is contained in:
parent
f7a30e4103
commit
014bb7ab3f
@ -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'}
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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 />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
@ -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',
|
||||
|
@ -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;
|
||||
};
|
@ -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,
|
||||
},
|
||||
});
|
||||
},
|
||||
};
|
||||
};
|
@ -71,7 +71,7 @@ export const collectionFieldSchema: ISchema = {
|
||||
params: {
|
||||
pageSize: 50,
|
||||
filter: {},
|
||||
sort: ['sort'],
|
||||
// sort: ['sort'],
|
||||
appends: ['uiSchema'],
|
||||
},
|
||||
},
|
||||
|
@ -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;
|
||||
},
|
||||
};
|
||||
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user