feat(client): improve acl module
This commit is contained in:
		
							parent
							
								
									2c38b63f18
								
							
						
					
					
						commit
						77d9228ea2
					
				@ -1,13 +1,47 @@
 | 
				
			|||||||
import { Table } from 'antd';
 | 
					import { Checkbox, Spin, Table } from 'antd';
 | 
				
			||||||
import React from 'react';
 | 
					import React from 'react';
 | 
				
			||||||
 | 
					import { useRecord } from '../..';
 | 
				
			||||||
 | 
					import { useAPIClient, useRequest } from '../../api-client';
 | 
				
			||||||
import { useRoute } from '../../route-switch';
 | 
					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 route = useRoute();
 | 
				
			||||||
  console.log(route);
 | 
					  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);
 | 
				
			||||||
  return (
 | 
					  return (
 | 
				
			||||||
    <div>
 | 
					 | 
				
			||||||
    <Table
 | 
					    <Table
 | 
				
			||||||
 | 
					      rowKey={'uid'}
 | 
				
			||||||
 | 
					      pagination={false}
 | 
				
			||||||
 | 
					      expandable={{
 | 
				
			||||||
 | 
					        defaultExpandAllRows: true,
 | 
				
			||||||
 | 
					      }}
 | 
				
			||||||
      columns={[
 | 
					      columns={[
 | 
				
			||||||
        {
 | 
					        {
 | 
				
			||||||
          dataIndex: 'title',
 | 
					          dataIndex: 'title',
 | 
				
			||||||
@ -15,11 +49,23 @@ export const MenuConfigure = () => {
 | 
				
			|||||||
        },
 | 
					        },
 | 
				
			||||||
        {
 | 
					        {
 | 
				
			||||||
          dataIndex: 'accessible',
 | 
					          dataIndex: 'accessible',
 | 
				
			||||||
            title: '允许访问',
 | 
					          title: (
 | 
				
			||||||
 | 
					            <>
 | 
				
			||||||
 | 
					              <Checkbox /> 允许访问
 | 
				
			||||||
 | 
					            </>
 | 
				
			||||||
 | 
					          ),
 | 
				
			||||||
 | 
					          render: (_, schema) => (
 | 
				
			||||||
 | 
					            <Checkbox
 | 
				
			||||||
 | 
					              onChange={async (e) => {
 | 
				
			||||||
 | 
					                await api.request({
 | 
				
			||||||
 | 
					                  url: `roles/${record.name}/menuUiSchemas:toggle/${schema.uid}`,
 | 
				
			||||||
 | 
					                });
 | 
				
			||||||
 | 
					              }}
 | 
				
			||||||
 | 
					            />
 | 
				
			||||||
 | 
					          ),
 | 
				
			||||||
        },
 | 
					        },
 | 
				
			||||||
      ]}
 | 
					      ]}
 | 
				
			||||||
        dataSource={[]}
 | 
					      dataSource={items}
 | 
				
			||||||
    />
 | 
					    />
 | 
				
			||||||
    </div>
 | 
					 | 
				
			||||||
  );
 | 
					  );
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
 | 
				
			|||||||
@ -1,14 +1,45 @@
 | 
				
			|||||||
import { FormLayout } from '@formily/antd';
 | 
					import { onFieldChange } from '@formily/core';
 | 
				
			||||||
 | 
					import { message } from 'antd';
 | 
				
			||||||
import React from 'react';
 | 
					import React from 'react';
 | 
				
			||||||
 | 
					import { useAPIClient, useRequest } from '../../api-client';
 | 
				
			||||||
 | 
					import { useRecord } from '../../record-provider';
 | 
				
			||||||
import { SchemaComponent } from '../../schema-component';
 | 
					import { SchemaComponent } from '../../schema-component';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export const RoleConfigure = () => {
 | 
					export const RoleConfigure = () => {
 | 
				
			||||||
 | 
					  const api = useAPIClient();
 | 
				
			||||||
 | 
					  const record = useRecord();
 | 
				
			||||||
  return (
 | 
					  return (
 | 
				
			||||||
    <div>
 | 
					 | 
				
			||||||
      <FormLayout layout={'vertical'}>
 | 
					 | 
				
			||||||
    <SchemaComponent
 | 
					    <SchemaComponent
 | 
				
			||||||
      schema={{
 | 
					      schema={{
 | 
				
			||||||
            type: 'object',
 | 
					        type: 'void',
 | 
				
			||||||
 | 
					        name: 'form',
 | 
				
			||||||
 | 
					        'x-component': 'Form',
 | 
				
			||||||
 | 
					        'x-component-props': {
 | 
				
			||||||
 | 
					          useValues: (options) => {
 | 
				
			||||||
 | 
					            return useRequest(
 | 
				
			||||||
 | 
					              {
 | 
				
			||||||
 | 
					                resource: 'roles',
 | 
				
			||||||
 | 
					                action: 'get',
 | 
				
			||||||
 | 
					                params: {
 | 
				
			||||||
 | 
					                  filterByTk: record.name,
 | 
				
			||||||
 | 
					                },
 | 
				
			||||||
 | 
					              },
 | 
				
			||||||
 | 
					              options,
 | 
				
			||||||
 | 
					            );
 | 
				
			||||||
 | 
					          },
 | 
				
			||||||
 | 
					          effects() {
 | 
				
			||||||
 | 
					            onFieldChange('*', async (field, form) => {
 | 
				
			||||||
 | 
					              if (!form.modified) {
 | 
				
			||||||
 | 
					                return;
 | 
				
			||||||
 | 
					              }
 | 
				
			||||||
 | 
					              await api.resource('roles').update({
 | 
				
			||||||
 | 
					                filterByTk: record.name,
 | 
				
			||||||
 | 
					                values: form.values,
 | 
				
			||||||
 | 
					              });
 | 
				
			||||||
 | 
					              message.success('保存成功!');
 | 
				
			||||||
 | 
					            });
 | 
				
			||||||
 | 
					          },
 | 
				
			||||||
 | 
					        },
 | 
				
			||||||
        properties: {
 | 
					        properties: {
 | 
				
			||||||
          allowConfigure: {
 | 
					          allowConfigure: {
 | 
				
			||||||
            title: '配置权限',
 | 
					            title: '配置权限',
 | 
				
			||||||
@ -31,7 +62,5 @@ export const RoleConfigure = () => {
 | 
				
			|||||||
        },
 | 
					        },
 | 
				
			||||||
      }}
 | 
					      }}
 | 
				
			||||||
    />
 | 
					    />
 | 
				
			||||||
      </FormLayout>
 | 
					 | 
				
			||||||
    </div>
 | 
					 | 
				
			||||||
  );
 | 
					  );
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
 | 
				
			|||||||
@ -1,8 +1,13 @@
 | 
				
			|||||||
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 '../..';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export const RolesResourcesActions = () => {
 | 
					export const RolesResourcesActions = () => {
 | 
				
			||||||
 | 
					  const record = useRecord();
 | 
				
			||||||
 | 
					  console.log('record', record);
 | 
				
			||||||
 | 
					  const { get } = useCollectionManager();
 | 
				
			||||||
 | 
					  const collection = get(record.name);
 | 
				
			||||||
  return (
 | 
					  return (
 | 
				
			||||||
    <div>
 | 
					    <div>
 | 
				
			||||||
      <FormLayout layout={'vertical'}>
 | 
					      <FormLayout layout={'vertical'}>
 | 
				
			||||||
@ -47,7 +52,30 @@ export const RolesResourcesActions = () => {
 | 
				
			|||||||
          />
 | 
					          />
 | 
				
			||||||
        </FormItem>
 | 
					        </FormItem>
 | 
				
			||||||
        <FormItem label={'字段权限'}>
 | 
					        <FormItem label={'字段权限'}>
 | 
				
			||||||
          <Table />
 | 
					          <Table
 | 
				
			||||||
 | 
					            dataSource={collection?.fields}
 | 
				
			||||||
 | 
					            columns={[
 | 
				
			||||||
 | 
					              {
 | 
				
			||||||
 | 
					                dataIndex:  ['uiSchema', 'title'],
 | 
				
			||||||
 | 
					                title: '字段名称',
 | 
				
			||||||
 | 
					              },
 | 
				
			||||||
 | 
					              {
 | 
				
			||||||
 | 
					                dataIndex: 'view',
 | 
				
			||||||
 | 
					                title: '查看',
 | 
				
			||||||
 | 
					                render: () => <Checkbox />
 | 
				
			||||||
 | 
					              },
 | 
				
			||||||
 | 
					              {
 | 
				
			||||||
 | 
					                dataIndex: 'update',
 | 
				
			||||||
 | 
					                title: '编辑',
 | 
				
			||||||
 | 
					                render: () => <Checkbox />
 | 
				
			||||||
 | 
					              },
 | 
				
			||||||
 | 
					              {
 | 
				
			||||||
 | 
					                dataIndex: 'create',
 | 
				
			||||||
 | 
					                title: '添加',
 | 
				
			||||||
 | 
					                render: () => <Checkbox />
 | 
				
			||||||
 | 
					              },
 | 
				
			||||||
 | 
					            ]}
 | 
				
			||||||
 | 
					          />
 | 
				
			||||||
        </FormItem>
 | 
					        </FormItem>
 | 
				
			||||||
      </FormLayout>
 | 
					      </FormLayout>
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
 | 
				
			|||||||
@ -1,4 +1,6 @@
 | 
				
			|||||||
import { ISchema } from '@formily/react';
 | 
					import { ISchema, useForm } from '@formily/react';
 | 
				
			||||||
 | 
					import { useEffect } from 'react';
 | 
				
			||||||
 | 
					import { useActionContext, useAPIClient, useRecord, useRequest } from '../../../';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const collection = {
 | 
					const collection = {
 | 
				
			||||||
  name: 'collections',
 | 
					  name: 'collections',
 | 
				
			||||||
@ -67,9 +69,9 @@ export const roleCollectionsSchema: ISchema = {
 | 
				
			|||||||
      'x-component': 'VoidTable',
 | 
					      'x-component': 'VoidTable',
 | 
				
			||||||
      'x-component-props': {
 | 
					      'x-component-props': {
 | 
				
			||||||
        rowKey: 'name',
 | 
					        rowKey: 'name',
 | 
				
			||||||
        rowSelection: {
 | 
					        // rowSelection: {
 | 
				
			||||||
          type: 'checkbox',
 | 
					        //   type: 'checkbox',
 | 
				
			||||||
        },
 | 
					        // },
 | 
				
			||||||
        useDataSource: '{{ useDataSourceFromRAC }}',
 | 
					        useDataSource: '{{ useDataSourceFromRAC }}',
 | 
				
			||||||
      },
 | 
					      },
 | 
				
			||||||
      properties: {
 | 
					      properties: {
 | 
				
			||||||
@ -122,13 +124,37 @@ 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: '{{ useValues }}',
 | 
					                        useValues(options) {
 | 
				
			||||||
 | 
					                          const record = useRecord();
 | 
				
			||||||
 | 
					                          const { visible } = useActionContext();
 | 
				
			||||||
 | 
					                          const result = useRequest(
 | 
				
			||||||
 | 
					                            {
 | 
				
			||||||
 | 
					                              resource: 'roles.resources',
 | 
				
			||||||
 | 
					                              resourceOf: record.roleName,
 | 
				
			||||||
 | 
					                              action: 'get',
 | 
				
			||||||
 | 
					                              params: {
 | 
				
			||||||
 | 
					                                filterByTk: record.name,
 | 
				
			||||||
                              },
 | 
					                              },
 | 
				
			||||||
                      title: 'Drawer Title',
 | 
					                            },
 | 
				
			||||||
 | 
					                            { ...options, manual: true },
 | 
				
			||||||
 | 
					                          );
 | 
				
			||||||
 | 
					                          useEffect(() => {
 | 
				
			||||||
 | 
					                            if (record.usingConfig === 'strategy') {
 | 
				
			||||||
 | 
					                              return;
 | 
				
			||||||
 | 
					                            }
 | 
				
			||||||
 | 
					                            if (visible) {
 | 
				
			||||||
 | 
					                              result.run();
 | 
				
			||||||
 | 
					                            }
 | 
				
			||||||
 | 
					                          }, [visible, record.usingConfig]);
 | 
				
			||||||
 | 
					                          return;
 | 
				
			||||||
 | 
					                        },
 | 
				
			||||||
 | 
					                      },
 | 
				
			||||||
 | 
					                      title: '配置权限',
 | 
				
			||||||
                      properties: {
 | 
					                      properties: {
 | 
				
			||||||
                        usingActionsConfig: {
 | 
					                        usingActionsConfig: {
 | 
				
			||||||
                          'x-component': 'Radio.Group',
 | 
					                          'x-component': 'Radio.Group',
 | 
				
			||||||
                          'x-decorator': 'FormItem',
 | 
					                          'x-decorator': 'FormItem',
 | 
				
			||||||
 | 
					                          default: false,
 | 
				
			||||||
                          enum: [
 | 
					                          enum: [
 | 
				
			||||||
                            { value: false, label: '使用通用权限:只能查看、添加、修改数据' },
 | 
					                            { value: false, label: '使用通用权限:只能查看、添加、修改数据' },
 | 
				
			||||||
                            { value: true, label: '单独配置权限' },
 | 
					                            { value: true, label: '单独配置权限' },
 | 
				
			||||||
@ -154,7 +180,21 @@ export const roleCollectionsSchema: ISchema = {
 | 
				
			|||||||
                              'x-component': 'Action',
 | 
					                              'x-component': 'Action',
 | 
				
			||||||
                              'x-component-props': {
 | 
					                              'x-component-props': {
 | 
				
			||||||
                                type: 'primary',
 | 
					                                type: 'primary',
 | 
				
			||||||
                                useAction: '{{ useUpdateAction }}',
 | 
					                                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,
 | 
				
			||||||
 | 
					                                        },
 | 
				
			||||||
 | 
					                                      });
 | 
				
			||||||
 | 
					                                    },
 | 
				
			||||||
 | 
					                                  };
 | 
				
			||||||
 | 
					                                },
 | 
				
			||||||
                              },
 | 
					                              },
 | 
				
			||||||
                            },
 | 
					                            },
 | 
				
			||||||
                          },
 | 
					                          },
 | 
				
			||||||
 | 
				
			|||||||
@ -114,7 +114,7 @@ export const roleSchema: ISchema = {
 | 
				
			|||||||
            },
 | 
					            },
 | 
				
			||||||
          },
 | 
					          },
 | 
				
			||||||
        },
 | 
					        },
 | 
				
			||||||
        table1: {
 | 
					        table: {
 | 
				
			||||||
          type: 'void',
 | 
					          type: 'void',
 | 
				
			||||||
          'x-uid': 'input',
 | 
					          'x-uid': 'input',
 | 
				
			||||||
          'x-component': 'VoidTable',
 | 
					          'x-component': 'VoidTable',
 | 
				
			||||||
@ -228,7 +228,7 @@ export const roleSchema: ISchema = {
 | 
				
			|||||||
                          'x-component': 'Action.Drawer',
 | 
					                          'x-component': 'Action.Drawer',
 | 
				
			||||||
                          'x-decorator': 'Form',
 | 
					                          'x-decorator': 'Form',
 | 
				
			||||||
                          'x-decorator-props': {
 | 
					                          'x-decorator-props': {
 | 
				
			||||||
                            useValues: '{{ useValues }}',
 | 
					                            useValues: '{{ useValuesFromRecord }}',
 | 
				
			||||||
                          },
 | 
					                          },
 | 
				
			||||||
                          title: 'Drawer Title',
 | 
					                          title: 'Drawer Title',
 | 
				
			||||||
                          properties: {
 | 
					                          properties: {
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
		Reference in New Issue
	
	Block a user