572 lines
17 KiB
TypeScript
572 lines
17 KiB
TypeScript
import { SchemaRenderer } from '../../../';
|
|
import React, { useContext, useEffect } from 'react';
|
|
import { FormItem } from '@formily/antd';
|
|
import { action } from '@formily/reactive';
|
|
import { useCollectionsContext } from '../../../constate/Collections';
|
|
import { Button } from 'antd';
|
|
import { LockOutlined } from '@ant-design/icons';
|
|
import cls from 'classnames';
|
|
import { uid } from '@formily/shared';
|
|
import { Resource } from '../../../resource';
|
|
import { TableRowContext, useTable } from '../../../schemas/table';
|
|
import { useRequest } from 'ahooks';
|
|
import { VisibleContext } from '../../../context';
|
|
import { connect, ISchema, observer } from '@formily/react';
|
|
import { DescriptionsContext } from '../../../schemas/form';
|
|
import { createContext } from 'react';
|
|
import { ActionPermissionField } from './ActionPermissionField';
|
|
|
|
export const RoleContext = createContext(null);
|
|
|
|
function RoleProvider(props) {
|
|
const ctx = useContext(TableRowContext);
|
|
return (
|
|
<RoleContext.Provider value={ctx.record}>
|
|
{props.children}
|
|
</RoleContext.Provider>
|
|
);
|
|
}
|
|
|
|
const useResource = () => {
|
|
const resource = Resource.make('roles');
|
|
return {
|
|
resource,
|
|
};
|
|
};
|
|
|
|
const useCollectionsResource = () => {
|
|
const descriptionsContext = useContext(DescriptionsContext);
|
|
console.log('descriptionsContext.service', descriptionsContext.service);
|
|
const resource = Resource.make('collections');
|
|
return {
|
|
resource,
|
|
};
|
|
};
|
|
|
|
class ActionPermissionResource extends Resource {
|
|
save(options?: any) {
|
|
console.log('ActionPermissionResource.save');
|
|
return Promise.resolve({});
|
|
}
|
|
}
|
|
|
|
const useActionPermissionSubmit = () => {
|
|
return {
|
|
async run() {
|
|
console.log('useActionPermissionSubmit');
|
|
},
|
|
};
|
|
};
|
|
|
|
const useActionPermissionResource = ({ onSuccess }) => {
|
|
const role = useContext(RoleContext);
|
|
console.log('RoleContext', role);
|
|
// const { props } = useTable();
|
|
const ctx = useContext(TableRowContext);
|
|
const resource = ActionPermissionResource.make({
|
|
resourceName: 'action_permissions',
|
|
});
|
|
const service = useRequest(
|
|
(params?: any) => {
|
|
return resource.list({
|
|
...params,
|
|
filter: {
|
|
role_name: role.name,
|
|
collection_name: ctx.record.name,
|
|
},
|
|
appends: ['fieldPermissions'],
|
|
});
|
|
},
|
|
{
|
|
formatResult: (result) => result?.data,
|
|
onSuccess(data) {
|
|
onSuccess({
|
|
permissions: data,
|
|
});
|
|
},
|
|
manual: true,
|
|
},
|
|
);
|
|
const [visible] = useContext(VisibleContext);
|
|
|
|
useEffect(() => {
|
|
if (visible) {
|
|
service.run({});
|
|
}
|
|
}, [visible]);
|
|
|
|
return { resource, service, initialValues: service.data, ...service };
|
|
};
|
|
|
|
const useDetailsResource = ({ onSuccess }) => {
|
|
const { props } = useTable();
|
|
const ctx = useContext(TableRowContext);
|
|
const resource = Resource.make({
|
|
resourceName: 'roles',
|
|
resourceKey: ctx.record[props.rowKey],
|
|
});
|
|
const service = useRequest(
|
|
(params?: any) => {
|
|
return resource.get({ ...params });
|
|
},
|
|
{
|
|
formatResult: (result) => result?.data,
|
|
onSuccess,
|
|
manual: true,
|
|
},
|
|
);
|
|
const [visible] = useContext(VisibleContext);
|
|
|
|
useEffect(() => {
|
|
if (visible) {
|
|
service.run({});
|
|
}
|
|
}, [visible]);
|
|
|
|
return { resource, service, initialValues: service.data, ...service };
|
|
};
|
|
|
|
const collectionSchema: ISchema = {
|
|
type: 'array',
|
|
// 'x-decorator': 'CardItem',
|
|
'x-component': 'Table',
|
|
default: [],
|
|
'x-component-props': {
|
|
rowKey: 'name',
|
|
showIndex: true,
|
|
refreshRequestOnChange: true,
|
|
pagination: {
|
|
pageSize: 10,
|
|
},
|
|
useResource: useCollectionsResource,
|
|
collectionName: 'collections',
|
|
},
|
|
properties: {
|
|
[uid()]: {
|
|
type: 'void',
|
|
title: '操作',
|
|
'x-component': 'Table.Operation',
|
|
'x-component-props': {
|
|
className: 'nb-table-operation',
|
|
},
|
|
properties: {
|
|
[uid()]: {
|
|
type: 'void',
|
|
'x-component': 'Action',
|
|
'x-component-props': {
|
|
icon: 'EllipsisOutlined',
|
|
},
|
|
properties: {
|
|
[uid()]: {
|
|
type: 'void',
|
|
'x-component': 'Action.Dropdown',
|
|
'x-component-props': {},
|
|
properties: {
|
|
[uid()]: {
|
|
type: 'void',
|
|
title: '配置',
|
|
'x-component': 'Menu.Action',
|
|
'x-component-props': {
|
|
style: {
|
|
minWidth: 150,
|
|
},
|
|
},
|
|
'x-action-type': 'view',
|
|
properties: {
|
|
[uid()]: {
|
|
type: 'void',
|
|
title: '数据表操作权限',
|
|
'x-component': 'Action.Drawer',
|
|
'x-decorator': 'Form',
|
|
'x-decorator-props': {
|
|
useResource: useActionPermissionResource,
|
|
},
|
|
'x-component-props': {
|
|
useOkAction: useActionPermissionSubmit,
|
|
},
|
|
properties: {
|
|
permissions: {
|
|
type: 'array',
|
|
'x-component': 'ActionPermissionField',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
column1: {
|
|
type: 'void',
|
|
title: '数据表名称',
|
|
'x-component': 'Table.Column',
|
|
properties: {
|
|
title: {
|
|
type: 'string',
|
|
'x-component': 'Input',
|
|
'x-read-pretty': true,
|
|
},
|
|
},
|
|
},
|
|
column2: {
|
|
type: 'void',
|
|
title: '数据表标识',
|
|
'x-component': 'Table.Column',
|
|
properties: {
|
|
name: {
|
|
type: 'string',
|
|
'x-component': 'Input',
|
|
'x-read-pretty': true,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
const menuSchema: ISchema = {
|
|
type: 'array',
|
|
// 'x-decorator': 'CardItem',
|
|
'x-component': 'Table',
|
|
default: [],
|
|
'x-component-props': {
|
|
rowKey: 'name',
|
|
showIndex: true,
|
|
refreshRequestOnChange: true,
|
|
pagination: {
|
|
pageSize: 10,
|
|
},
|
|
useResource: useCollectionsResource,
|
|
collectionName: 'collections',
|
|
},
|
|
properties: {
|
|
[uid()]: {
|
|
type: 'void',
|
|
title: '操作',
|
|
'x-component': 'Table.Operation',
|
|
'x-component-props': {
|
|
className: 'nb-table-operation',
|
|
},
|
|
properties: {
|
|
[uid()]: {
|
|
type: 'void',
|
|
'x-component': 'Action',
|
|
'x-component-props': {
|
|
icon: 'EllipsisOutlined',
|
|
},
|
|
properties: {
|
|
[uid()]: {
|
|
type: 'void',
|
|
'x-component': 'Action.Dropdown',
|
|
'x-component-props': {},
|
|
properties: {
|
|
[uid()]: {
|
|
type: 'void',
|
|
title: '配置',
|
|
'x-component': 'Menu.Action',
|
|
'x-component-props': {
|
|
style: {
|
|
minWidth: 150,
|
|
},
|
|
},
|
|
'x-action-type': 'view',
|
|
properties: {
|
|
[uid()]: {
|
|
type: 'void',
|
|
title: '权限配置',
|
|
'x-component': 'Action.Drawer',
|
|
'x-component-props': {
|
|
bodyStyle: {
|
|
background: '#f0f2f5',
|
|
paddingTop: 0,
|
|
},
|
|
},
|
|
properties: {},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
column1: {
|
|
type: 'void',
|
|
title: '权限名称',
|
|
'x-component': 'Table.Column',
|
|
properties: {
|
|
title: {
|
|
type: 'string',
|
|
'x-component': 'Input',
|
|
'x-read-pretty': true,
|
|
},
|
|
},
|
|
},
|
|
column2: {
|
|
type: 'void',
|
|
title: '权限标识',
|
|
'x-component': 'Table.Column',
|
|
properties: {
|
|
name: {
|
|
type: 'string',
|
|
'x-component': 'Input',
|
|
'x-read-pretty': true,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
const schema: ISchema = {
|
|
type: 'void',
|
|
name: 'action',
|
|
'x-component': 'Action',
|
|
'x-component-props': {
|
|
className: 'nb-database-config',
|
|
icon: 'LockOutlined',
|
|
type: 'primary',
|
|
},
|
|
properties: {
|
|
modal1: {
|
|
type: 'void',
|
|
title: '权限组',
|
|
'x-component': 'Action.Drawer',
|
|
properties: {
|
|
table: {
|
|
type: 'array',
|
|
// 'x-decorator': 'CardItem',
|
|
'x-component': 'Table',
|
|
default: [],
|
|
'x-component-props': {
|
|
rowKey: 'name',
|
|
dragSort: true,
|
|
showIndex: true,
|
|
refreshRequestOnChange: true,
|
|
pagination: {
|
|
pageSize: 10,
|
|
},
|
|
useResource,
|
|
collectionName: 'roles',
|
|
},
|
|
properties: {
|
|
[uid()]: {
|
|
type: 'void',
|
|
'x-component': 'Table.ActionBar',
|
|
properties: {
|
|
[uid()]: {
|
|
type: 'void',
|
|
name: 'action1',
|
|
title: '删除',
|
|
'x-align': 'right',
|
|
'x-decorator': 'AddNew.Displayed',
|
|
'x-decorator-props': {
|
|
displayName: 'destroy',
|
|
},
|
|
'x-component': 'Action',
|
|
'x-designable-bar': 'Table.Action.DesignableBar',
|
|
'x-component-props': {
|
|
useAction: '{{ Table.useTableDestroyAction }}',
|
|
},
|
|
},
|
|
[uid()]: {
|
|
type: 'void',
|
|
name: 'action1',
|
|
title: '新增',
|
|
'x-align': 'right',
|
|
'x-decorator': 'AddNew.Displayed',
|
|
'x-decorator-props': {
|
|
displayName: 'create',
|
|
},
|
|
'x-component': 'Action',
|
|
'x-component-props': {
|
|
type: 'primary',
|
|
},
|
|
properties: {
|
|
modal: {
|
|
type: 'void',
|
|
title: '新增数据',
|
|
'x-decorator': 'Form',
|
|
'x-component': 'Action.Drawer',
|
|
'x-component-props': {
|
|
useOkAction: '{{ Table.useTableCreateAction }}',
|
|
},
|
|
properties: {
|
|
title: {
|
|
type: 'string',
|
|
title: '权限名称',
|
|
'x-component': 'Input',
|
|
'x-decorator': 'FormilyFormItem',
|
|
},
|
|
name: {
|
|
type: 'string',
|
|
title: '权限标识',
|
|
'x-component': 'Input',
|
|
'x-decorator': 'FormilyFormItem',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
[uid()]: {
|
|
type: 'void',
|
|
title: '操作',
|
|
'x-component': 'Table.Operation',
|
|
'x-component-props': {
|
|
className: 'nb-table-operation',
|
|
},
|
|
'x-designable-bar': 'Table.Operation.DesignableBar',
|
|
properties: {
|
|
[uid()]: {
|
|
type: 'void',
|
|
'x-component': 'Action',
|
|
'x-component-props': {
|
|
icon: 'EllipsisOutlined',
|
|
},
|
|
properties: {
|
|
[uid()]: {
|
|
type: 'void',
|
|
'x-component': 'Action.Dropdown',
|
|
'x-component-props': {},
|
|
properties: {
|
|
[uid()]: {
|
|
type: 'void',
|
|
title: '配置',
|
|
'x-component': 'Menu.Action',
|
|
'x-component-props': {
|
|
style: {
|
|
minWidth: 150,
|
|
},
|
|
},
|
|
'x-action-type': 'view',
|
|
properties: {
|
|
[uid()]: {
|
|
type: 'void',
|
|
title: '权限配置',
|
|
'x-decorator': 'RoleProvider',
|
|
'x-component': 'Action.Drawer',
|
|
'x-component-props': {
|
|
bodyStyle: {
|
|
background: '#f0f2f5',
|
|
paddingTop: 0,
|
|
},
|
|
},
|
|
properties: {
|
|
[uid()]: {
|
|
type: 'void',
|
|
'x-component': 'Tabs',
|
|
properties: {
|
|
[uid()]: {
|
|
type: 'void',
|
|
title: '数据表操作权限',
|
|
'x-component': 'Tabs.TabPane',
|
|
'x-component-props': {},
|
|
properties: {
|
|
collectionSchema,
|
|
},
|
|
},
|
|
[uid()]: {
|
|
type: 'void',
|
|
title: '菜单权限',
|
|
'x-component': 'Tabs.TabPane',
|
|
'x-component-props': {},
|
|
properties: {
|
|
menuSchema,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
[uid()]: {
|
|
type: 'void',
|
|
title: '编辑',
|
|
'x-component': 'Menu.Action',
|
|
'x-action-type': 'update',
|
|
properties: {
|
|
[uid()]: {
|
|
type: 'void',
|
|
title: '编辑数据',
|
|
'x-decorator': 'Form',
|
|
'x-decorator-props': {
|
|
useResource: useDetailsResource,
|
|
},
|
|
'x-component': 'Action.Drawer',
|
|
'x-component-props': {
|
|
useOkAction: '{{ Table.useTableUpdateAction }}',
|
|
},
|
|
properties: {
|
|
title: {
|
|
type: 'string',
|
|
title: '权限名称',
|
|
'x-component': 'Input',
|
|
'x-decorator': 'FormilyFormItem',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
[uid()]: {
|
|
type: 'void',
|
|
title: '删除',
|
|
'x-component': 'Menu.Action',
|
|
'x-designable-bar': 'Table.Action.DesignableBar',
|
|
'x-action-type': 'destroy',
|
|
'x-component-props': {
|
|
useAction: '{{ Table.useTableDestroyAction }}',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
column1: {
|
|
type: 'void',
|
|
title: '权限名称',
|
|
'x-component': 'Table.Column',
|
|
properties: {
|
|
title: {
|
|
type: 'string',
|
|
'x-component': 'Input',
|
|
'x-read-pretty': true,
|
|
},
|
|
},
|
|
},
|
|
column2: {
|
|
type: 'void',
|
|
title: '权限标识',
|
|
'x-component': 'Table.Column',
|
|
properties: {
|
|
name: {
|
|
type: 'string',
|
|
'x-component': 'Input',
|
|
'x-read-pretty': true,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
export const Permissions = () => {
|
|
return (
|
|
<SchemaRenderer
|
|
components={{ RoleProvider, ActionPermissionField }}
|
|
schema={schema}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default Permissions;
|