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, isValid } from '@formily/shared'; import { Resource } from '../../../resource'; import { TableRowContext, useTable } from '../../../schemas/table'; import { useRequest } from 'ahooks'; import { VisibleContext } from '../../../context'; import { connect, observer, useForm } from '@formily/react'; import { DescriptionsContext } from '../../../schemas/form'; import { createContext } from 'react'; import { ActionPermissionField } from './ActionPermissionField'; import { MenuPermissionTable } from './MenuPermissionTable'; import { ISchema } from '../../../'; export const RoleContext = createContext(null); function RoleProvider(props) { const ctx = useContext(TableRowContext); return ( {props.children} ); } 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 = () => { const form = useForm(); const role = useContext(RoleContext); const resource = Resource.make({ resourceName: 'roles', resourceKey: role.name, }); return { async run() { await resource.save(form.values); console.log('useActionPermissionSubmit', form.values?.actionPermissions); }, }; }; 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: ['fields'], }); }, { formatResult: (result) => result?.data, onSuccess(data) { console.log('actionPermissions', data); onSuccess({ actionPermissions: data.map((permission) => { const item: any = {} Object.keys(permission).forEach(key => { if (isValid(permission[key])) { item[key] = permission[key]; } }); item.fields = permission?.fields.map((field) => field.key) || []; return item; }), }); }, 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: { actionPermissions: { 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-component': 'MenuPermissionTable', }; 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-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', }, 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 ( ); }; export default Permissions;