tachybase_todo/packages/client/src/components/admin-layout/Permissions/index.tsx
2021-08-11 00:09:54 +08:00

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;