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 React from 'react';
|
||||||
|
import { useMenuItems } from '.';
|
||||||
import { useRecord } from '../..';
|
import { useRecord } from '../..';
|
||||||
import { useAPIClient, useRequest } from '../../api-client';
|
import { useAPIClient } 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;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const MenuConfigure = () => {
|
export const MenuConfigure = () => {
|
||||||
const route = useRoute();
|
|
||||||
const record = useRecord();
|
const record = useRecord();
|
||||||
console.log(route.uiSchemaUid);
|
|
||||||
const api = useAPIClient();
|
const api = useAPIClient();
|
||||||
const { loading, data } = useRequest({
|
const items = useMenuItems();
|
||||||
url: `uiSchemas:getProperties/${route.uiSchemaUid}`,
|
|
||||||
});
|
|
||||||
if (loading) {
|
|
||||||
return <Spin />;
|
|
||||||
}
|
|
||||||
const items = toItems(data?.data?.properties);
|
|
||||||
console.log(items);
|
|
||||||
return (
|
return (
|
||||||
<Table
|
<Table
|
||||||
rowKey={'uid'}
|
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 { SchemaComponent } from '../../schema-component';
|
||||||
import { roleSchema } from './schemas/roles';
|
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 = () => {
|
export const RoleTable = () => {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<SchemaComponent schema={roleSchema} />
|
<AvailableActionsProver>
|
||||||
|
<MenuItemsProver>
|
||||||
|
<SchemaComponent schema={roleSchema} />
|
||||||
|
</MenuItemsProver>
|
||||||
|
</AvailableActionsProver>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -1,13 +1,15 @@
|
|||||||
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 '../..';
|
import { useAvailableActions } from '.';
|
||||||
|
import { useCollectionManager, useCompile, useRecord } from '../..';
|
||||||
|
|
||||||
export const RolesResourcesActions = () => {
|
export const RolesResourcesActions = () => {
|
||||||
const record = useRecord();
|
const roleCollection = useRecord();
|
||||||
console.log('record', record);
|
const availableActions = useAvailableActions();
|
||||||
const { get } = useCollectionManager();
|
const { getCollection } = useCollectionManager();
|
||||||
const collection = get(record.name);
|
const collection = getCollection(roleCollection.name);
|
||||||
|
const compile = useCompile();
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<FormLayout layout={'vertical'}>
|
<FormLayout layout={'vertical'}>
|
||||||
@ -19,6 +21,7 @@ export const RolesResourcesActions = () => {
|
|||||||
{
|
{
|
||||||
dataIndex: 'displayName',
|
dataIndex: 'displayName',
|
||||||
title: '操作',
|
title: '操作',
|
||||||
|
render: (value) => compile(value),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
dataIndex: 'type',
|
dataIndex: 'type',
|
||||||
@ -35,20 +38,7 @@ export const RolesResourcesActions = () => {
|
|||||||
render: () => <Select size={'small'} />,
|
render: () => <Select size={'small'} />,
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
dataSource={[
|
dataSource={availableActions}
|
||||||
{
|
|
||||||
displayName: '添加',
|
|
||||||
type: 'new-data',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
displayName: '导入',
|
|
||||||
type: 'new-data',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
displayName: '查看',
|
|
||||||
type: 'old-data',
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
/>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem label={'字段权限'}>
|
<FormItem label={'字段权限'}>
|
||||||
@ -56,23 +46,23 @@ export const RolesResourcesActions = () => {
|
|||||||
dataSource={collection?.fields}
|
dataSource={collection?.fields}
|
||||||
columns={[
|
columns={[
|
||||||
{
|
{
|
||||||
dataIndex: ['uiSchema', 'title'],
|
dataIndex: ['uiSchema', 'title'],
|
||||||
title: '字段名称',
|
title: '字段名称',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
dataIndex: 'view',
|
dataIndex: 'view',
|
||||||
title: '查看',
|
title: '查看',
|
||||||
render: () => <Checkbox />
|
render: () => <Checkbox />,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
dataIndex: 'update',
|
dataIndex: 'update',
|
||||||
title: '编辑',
|
title: '编辑',
|
||||||
render: () => <Checkbox />
|
render: () => <Checkbox />,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
dataIndex: 'create',
|
dataIndex: 'create',
|
||||||
title: '添加',
|
title: '添加',
|
||||||
render: () => <Checkbox />
|
render: () => <Checkbox />,
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
|
@ -1,7 +1,11 @@
|
|||||||
import { Checkbox, Select, Table } from 'antd';
|
import { Checkbox, Select, Table } from 'antd';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { useAvailableActions } from '.';
|
||||||
|
import { useCompile } from '../..';
|
||||||
|
|
||||||
export const StrategyActions = () => {
|
export const StrategyActions = () => {
|
||||||
|
const availableActions = useAvailableActions();
|
||||||
|
const compile = useCompile();
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Table
|
<Table
|
||||||
@ -11,6 +15,7 @@ export const StrategyActions = () => {
|
|||||||
{
|
{
|
||||||
dataIndex: 'displayName',
|
dataIndex: 'displayName',
|
||||||
title: '操作',
|
title: '操作',
|
||||||
|
render: (value) => compile(value),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
dataIndex: 'type',
|
dataIndex: 'type',
|
||||||
@ -24,23 +29,10 @@ export const StrategyActions = () => {
|
|||||||
{
|
{
|
||||||
dataIndex: 'scope',
|
dataIndex: 'scope',
|
||||||
title: '可操作的数据范围',
|
title: '可操作的数据范围',
|
||||||
render: () => <Select size={'small'}/>,
|
render: () => <Select size={'small'} />,
|
||||||
},
|
|
||||||
]}
|
|
||||||
dataSource={[
|
|
||||||
{
|
|
||||||
displayName: '添加',
|
|
||||||
type: 'new-data',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
displayName: '导入',
|
|
||||||
type: 'new-data',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
displayName: '查看',
|
|
||||||
type: 'old-data',
|
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
|
dataSource={availableActions}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { ISchema, useForm } from '@formily/react';
|
import { ISchema } from '@formily/react';
|
||||||
import { useEffect } from 'react';
|
import { useRoleResourceValues } from './useRoleResourceValues';
|
||||||
import { useActionContext, useAPIClient, useRecord, useRequest } from '../../../';
|
import { useSaveRoleResourceAction } from './useSaveRoleResourceAction';
|
||||||
|
|
||||||
const collection = {
|
const collection = {
|
||||||
name: 'collections',
|
name: 'collections',
|
||||||
@ -124,30 +124,7 @@ 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(options) {
|
useValues: useRoleResourceValues,
|
||||||
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: '配置权限',
|
title: '配置权限',
|
||||||
properties: {
|
properties: {
|
||||||
@ -156,7 +133,7 @@ export const roleCollectionsSchema: ISchema = {
|
|||||||
'x-decorator': 'FormItem',
|
'x-decorator': 'FormItem',
|
||||||
default: false,
|
default: false,
|
||||||
enum: [
|
enum: [
|
||||||
{ value: false, label: '使用通用权限:只能查看、添加、修改数据' },
|
{ value: false, label: '使用通用权限' },
|
||||||
{ value: true, label: '单独配置权限' },
|
{ value: true, label: '单独配置权限' },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
@ -180,21 +157,7 @@ export const roleCollectionsSchema: ISchema = {
|
|||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
useAction: () => {
|
useAction: 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,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -59,6 +59,11 @@ export const roleSchema: ISchema = {
|
|||||||
actions: {
|
actions: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-component': 'ActionBar',
|
'x-component': 'ActionBar',
|
||||||
|
'x-component-props': {
|
||||||
|
style: {
|
||||||
|
marginBottom: 16,
|
||||||
|
},
|
||||||
|
},
|
||||||
properties: {
|
properties: {
|
||||||
delete: {
|
delete: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
@ -77,7 +82,7 @@ export const roleSchema: ISchema = {
|
|||||||
type: 'void',
|
type: 'void',
|
||||||
'x-component': 'Action.Drawer',
|
'x-component': 'Action.Drawer',
|
||||||
'x-decorator': 'Form',
|
'x-decorator': 'Form',
|
||||||
title: 'Drawer Title',
|
title: '添加角色',
|
||||||
properties: {
|
properties: {
|
||||||
title: {
|
title: {
|
||||||
'x-component': 'CollectionField',
|
'x-component': 'CollectionField',
|
||||||
@ -171,7 +176,7 @@ export const roleSchema: ISchema = {
|
|||||||
drawer: {
|
drawer: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-component': 'Action.Drawer',
|
'x-component': 'Action.Drawer',
|
||||||
title: 'Drawer Title',
|
title: '配置权限',
|
||||||
properties: {
|
properties: {
|
||||||
tabs1: {
|
tabs1: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
@ -230,7 +235,7 @@ export const roleSchema: ISchema = {
|
|||||||
'x-decorator-props': {
|
'x-decorator-props': {
|
||||||
useValues: '{{ useValuesFromRecord }}',
|
useValues: '{{ useValuesFromRecord }}',
|
||||||
},
|
},
|
||||||
title: 'Drawer Title',
|
title: '编辑角色',
|
||||||
properties: {
|
properties: {
|
||||||
title: {
|
title: {
|
||||||
'x-component': 'CollectionField',
|
'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: {
|
params: {
|
||||||
pageSize: 50,
|
pageSize: 50,
|
||||||
filter: {},
|
filter: {},
|
||||||
sort: ['sort'],
|
// sort: ['sort'],
|
||||||
appends: ['uiSchema'],
|
appends: ['uiSchema'],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -12,7 +12,10 @@ export const useCollectionManager = () => {
|
|||||||
get(name: string) {
|
get(name: string) {
|
||||||
return collections?.find((collection) => collection.name === name);
|
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;
|
return interfaces[name] ? clone(interfaces[name]) : null;
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { useContext } from 'react';
|
|
||||||
import { compile } from '@formily/json-schema/lib/compiler';
|
import { compile } from '@formily/json-schema/lib/compiler';
|
||||||
import { SchemaExpressionScopeContext, SchemaOptionsContext } from '@formily/react';
|
import { SchemaExpressionScopeContext, SchemaOptionsContext } from '@formily/react';
|
||||||
|
import { useContext } from 'react';
|
||||||
|
|
||||||
export const useCompile = () => {
|
export const useCompile = () => {
|
||||||
const options = useContext(SchemaOptionsContext);
|
const options = useContext(SchemaOptionsContext);
|
||||||
|
Loading…
Reference in New Issue
Block a user