feat: scope select for acl resource actions
This commit is contained in:
chenos
parent
1859879978
commit
adea10a4d8
@ -2,7 +2,7 @@ import { FormItem, FormLayout } from '@formily/antd';
|
||||
import { ArrayField } from '@formily/core';
|
||||
import { connect, useField, useForm } from '@formily/react';
|
||||
import { Checkbox, Table, Tag } from 'antd';
|
||||
import React from 'react';
|
||||
import React, { createContext } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useAvailableActions } from '.';
|
||||
import { useCollectionManager, useCompile, useRecord } from '../..';
|
||||
@ -18,6 +18,8 @@ const toActionMap = (arr: any[]) => {
|
||||
return obj;
|
||||
};
|
||||
|
||||
export const RoleResourceCollectionContext = createContext<any>({});
|
||||
|
||||
export const RolesResourcesActions = connect((props) => {
|
||||
const { onChange } = props;
|
||||
const form = useForm();
|
||||
@ -67,6 +69,7 @@ export const RolesResourcesActions = connect((props) => {
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<RoleResourceCollectionContext.Provider value={collection}>
|
||||
<FormLayout layout={'vertical'}>
|
||||
<FormItem label={'操作权限'}>
|
||||
<Table
|
||||
@ -189,6 +192,7 @@ export const RolesResourcesActions = connect((props) => {
|
||||
/>
|
||||
</FormItem>
|
||||
</FormLayout>
|
||||
</RoleResourceCollectionContext.Provider>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
import { ISchema, useForm } from '@formily/react';
|
||||
import { useActionContext } from '../../../';
|
||||
import { useAPIClient, useRequest } from '../../../api-client';
|
||||
import { useRecord } from '../../../record-provider';
|
||||
import { ISchema } from '@formily/react';
|
||||
import { useContext, useEffect } from 'react';
|
||||
import { useFormBlockContext } from '../../../block-provider';
|
||||
import { useFilterOptions } from '../../../schema-component';
|
||||
import { RoleResourceCollectionContext } from '../RolesResourcesActions';
|
||||
|
||||
const collection = {
|
||||
export const rolesResourcesScopesCollection = {
|
||||
name: 'rolesResourcesScopes',
|
||||
fields: [
|
||||
{
|
||||
type: 'string',
|
||||
name: 'title',
|
||||
name: 'name',
|
||||
interface: 'input',
|
||||
uiSchema: {
|
||||
title: '名称',
|
||||
@ -20,6 +21,19 @@ const collection = {
|
||||
],
|
||||
};
|
||||
|
||||
const useFormBlockProps = () => {
|
||||
const { name } = useContext(RoleResourceCollectionContext);
|
||||
const ctx = useFormBlockContext();
|
||||
useEffect(() => {
|
||||
ctx.form.setInitialValues({
|
||||
resourceName: name,
|
||||
});
|
||||
}, [name]);
|
||||
return {
|
||||
form: ctx.form,
|
||||
};
|
||||
};
|
||||
|
||||
export const scopesSchema: ISchema = {
|
||||
type: 'object',
|
||||
properties: {
|
||||
@ -31,14 +45,41 @@ export const scopesSchema: ISchema = {
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
},
|
||||
association: {
|
||||
target: 'rolesResourcesScopes',
|
||||
},
|
||||
onChange: '{{ onChange }}',
|
||||
},
|
||||
properties: {
|
||||
options: {
|
||||
'x-decorator': 'RolesResourcesScopesSelectedRowKeysProvider',
|
||||
'x-component': 'RecordPicker.Options',
|
||||
selector: {
|
||||
type: 'void',
|
||||
title: '可操作的数据范围',
|
||||
title: '{{ t("Select record") }}',
|
||||
'x-component': 'RecordPicker.Selector',
|
||||
'x-component-props': {
|
||||
className: 'nb-record-picker-selector',
|
||||
},
|
||||
properties: {
|
||||
tableBlock: {
|
||||
type: 'void',
|
||||
'x-decorator': 'TableSelectorProvider',
|
||||
'x-decorator-props': {
|
||||
collection: rolesResourcesScopesCollection,
|
||||
resource: 'rolesResourcesScopes',
|
||||
action: 'list',
|
||||
params: {
|
||||
pageSize: 20,
|
||||
},
|
||||
useParams() {
|
||||
const ctx = useContext(RoleResourceCollectionContext);
|
||||
return {
|
||||
filter: {
|
||||
$or: [{ resourceName: ctx.name }, { resourceName: null }],
|
||||
},
|
||||
};
|
||||
},
|
||||
rowKey: 'id',
|
||||
},
|
||||
'x-component': 'BlockItem',
|
||||
properties: {
|
||||
actions: {
|
||||
type: 'void',
|
||||
@ -49,70 +90,82 @@ export const scopesSchema: ISchema = {
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
// delete: {
|
||||
// type: 'void',
|
||||
// title: '删除',
|
||||
// 'x-component': 'Action',
|
||||
// },
|
||||
create: {
|
||||
type: 'void',
|
||||
title: '添加数据范围',
|
||||
title: '{{ t("Add new") }}',
|
||||
'x-action': 'create',
|
||||
'x-component': 'Action',
|
||||
'x-component-props': {
|
||||
icon: 'PlusOutlined',
|
||||
openMode: 'drawer',
|
||||
type: 'primary',
|
||||
},
|
||||
properties: {
|
||||
drawer: {
|
||||
type: 'void',
|
||||
'x-component': 'Action.Drawer',
|
||||
'x-decorator': 'Form',
|
||||
title: '添加数据范围',
|
||||
title: '{{ t("Add record") }}',
|
||||
'x-component': 'Action.Container',
|
||||
'x-component-props': {
|
||||
className: 'nb-action-popup',
|
||||
},
|
||||
properties: {
|
||||
formBlock: {
|
||||
type: 'void',
|
||||
'x-decorator': 'FormBlockProvider',
|
||||
'x-decorator-props': {
|
||||
resource: 'rolesResourcesScopes',
|
||||
collection: rolesResourcesScopesCollection,
|
||||
// useParams: '{{ useParamsFromRecord }}',
|
||||
},
|
||||
'x-component': 'CardItem',
|
||||
properties: {
|
||||
form: {
|
||||
type: 'void',
|
||||
'x-component': 'FormV2',
|
||||
'x-component-props': {
|
||||
useProps: useFormBlockProps,
|
||||
},
|
||||
properties: {
|
||||
name: {
|
||||
title: '数据范围名称',
|
||||
'x-component': 'Input',
|
||||
type: 'string',
|
||||
'x-component': 'CollectionField',
|
||||
'x-decorator': 'FormItem',
|
||||
},
|
||||
// scope: {
|
||||
// 'x-component': 'Input',
|
||||
// 'x-decorator': 'FormItem',
|
||||
// },
|
||||
footer: {
|
||||
type: 'void',
|
||||
'x-component': 'Action.Drawer.Footer',
|
||||
properties: {
|
||||
action1: {
|
||||
title: 'Cancel',
|
||||
'x-component': 'Action',
|
||||
scope: {
|
||||
type: 'object',
|
||||
title: 'Data scope',
|
||||
name: 'filter',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Filter',
|
||||
'x-component-props': {
|
||||
useAction: '{{ cm.useCancelAction }}',
|
||||
},
|
||||
},
|
||||
action2: {
|
||||
title: 'Submit',
|
||||
'x-component': 'Action',
|
||||
'x-component-props': {
|
||||
type: 'primary',
|
||||
useAction() {
|
||||
const api = useAPIClient();
|
||||
const ctx = useActionContext();
|
||||
const form = useForm();
|
||||
const record = useRecord();
|
||||
useProps() {
|
||||
const ctx = useContext(RoleResourceCollectionContext);
|
||||
const options = useFilterOptions(ctx.name);
|
||||
console.log('ctx.name', ctx.name, options);
|
||||
return {
|
||||
async run() {
|
||||
await api.resource('rolesResourcesScopes').create({
|
||||
values: {
|
||||
...form.values,
|
||||
resourceName: record.name,
|
||||
},
|
||||
});
|
||||
ctx.setVisible(false);
|
||||
api.service('rolesResourcesScopesList')?.refresh?.();
|
||||
},
|
||||
options,
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
type: 'void',
|
||||
'x-component': 'ActionBar',
|
||||
'x-component-props': {
|
||||
layout: 'one-column',
|
||||
style: {
|
||||
marginTop: 24,
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
create: {
|
||||
title: '{{ t("Submit") }}',
|
||||
'x-action': 'submit',
|
||||
'x-component': 'Action',
|
||||
'x-component-props': {
|
||||
type: 'primary',
|
||||
htmlType: 'submit',
|
||||
useProps: '{{ useCreateActionProps }}',
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -121,75 +174,179 @@ export const scopesSchema: ISchema = {
|
||||
},
|
||||
},
|
||||
},
|
||||
input: {
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
value: {
|
||||
type: 'array',
|
||||
'x-component': 'Table.RowSelection',
|
||||
'x-component': 'TableV2.Selector',
|
||||
'x-component-props': {
|
||||
rowKey: 'id',
|
||||
objectValue: true,
|
||||
rowSelection: {
|
||||
type: 'radio',
|
||||
type: 'checkbox',
|
||||
},
|
||||
// useSelectedRowKeys() {
|
||||
// const [selectedRowKeys, setSelectedRowKeys] = useRolesResourcesScopesSelectedRowKeys();
|
||||
// return [selectedRowKeys, setSelectedRowKeys];
|
||||
// },
|
||||
useDataSource(options) {
|
||||
const record = useRecord();
|
||||
return useRequest(
|
||||
{
|
||||
resource: 'rolesResourcesScopes',
|
||||
action: 'list',
|
||||
params: {
|
||||
sort: 'id',
|
||||
filter: JSON.stringify({
|
||||
$or: [
|
||||
{
|
||||
'resourceName.$eq': record.name,
|
||||
},
|
||||
{
|
||||
'resourceName.$eq': '*',
|
||||
},
|
||||
],
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
...options,
|
||||
uid: 'rolesResourcesScopesList',
|
||||
},
|
||||
);
|
||||
},
|
||||
// dataSource: [
|
||||
// { id: 1, name: 'Name1' },
|
||||
// { id: 2, name: 'Name2' },
|
||||
// { id: 3, name: 'Name3' },
|
||||
// ],
|
||||
useProps: '{{ useTableSelectorProps }}',
|
||||
},
|
||||
properties: {
|
||||
column1: {
|
||||
type: 'void',
|
||||
title: 'Name',
|
||||
'x-component': 'Table.Column',
|
||||
'x-decorator': 'TableV2.Column.Decorator',
|
||||
'x-component': 'TableV2.Column',
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
'x-component': 'Input',
|
||||
'x-component': 'CollectionField',
|
||||
'x-read-pretty': true,
|
||||
},
|
||||
},
|
||||
},
|
||||
column2: {
|
||||
actions: {
|
||||
type: 'void',
|
||||
title: 'Actions',
|
||||
'x-component': 'Table.Column',
|
||||
// properties: {
|
||||
// delete: {
|
||||
// type: 'void',
|
||||
// title: '删除',
|
||||
// 'x-component': 'Action.Link',
|
||||
// },
|
||||
// },
|
||||
title: '{{ t("Actions") }}',
|
||||
'x-action-column': 'actions',
|
||||
'x-component': 'TableV2.Column',
|
||||
properties: {
|
||||
actions: {
|
||||
type: 'void',
|
||||
'x-decorator': 'DndContext',
|
||||
'x-component': 'Space',
|
||||
'x-component-props': {
|
||||
split: '|',
|
||||
},
|
||||
properties: {
|
||||
edit: {
|
||||
type: 'void',
|
||||
title: '{{ t("Edit") }}',
|
||||
'x-action': 'update',
|
||||
'x-component': 'Action.Link',
|
||||
'x-component-props': {
|
||||
openMode: 'drawer',
|
||||
icon: 'EditOutlined',
|
||||
},
|
||||
properties: {
|
||||
drawer: {
|
||||
type: 'void',
|
||||
title: '{{ t("Edit record") }}',
|
||||
'x-component': 'Action.Container',
|
||||
'x-component-props': {
|
||||
className: 'nb-action-popup',
|
||||
},
|
||||
properties: {
|
||||
formBlock: {
|
||||
type: 'void',
|
||||
'x-decorator': 'FormBlockProvider',
|
||||
'x-decorator-props': {
|
||||
resource: 'rolesResourcesScopes',
|
||||
collection: rolesResourcesScopesCollection,
|
||||
action: 'get',
|
||||
useParams: '{{ useParamsFromRecord }}',
|
||||
},
|
||||
'x-component': 'CardItem',
|
||||
properties: {
|
||||
form: {
|
||||
type: 'void',
|
||||
'x-component': 'FormV2',
|
||||
'x-component-props': {
|
||||
useProps: '{{ useFormBlockProps }}',
|
||||
},
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
'x-component': 'CollectionField',
|
||||
'x-decorator': 'FormItem',
|
||||
},
|
||||
scope: {
|
||||
type: 'object',
|
||||
title: 'Data scope',
|
||||
name: 'filter',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Filter',
|
||||
'x-component-props': {
|
||||
useProps() {
|
||||
const ctx = useContext(RoleResourceCollectionContext);
|
||||
const options = useFilterOptions(ctx.name);
|
||||
return {
|
||||
options,
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
type: 'void',
|
||||
'x-component': 'ActionBar',
|
||||
'x-component-props': {
|
||||
layout: 'one-column',
|
||||
style: {
|
||||
marginTop: 24,
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
update: {
|
||||
title: '{{ t("Submit") }}',
|
||||
'x-action': 'submit',
|
||||
'x-component': 'Action',
|
||||
'x-component-props': {
|
||||
type: 'primary',
|
||||
htmlType: 'submit',
|
||||
useProps: '{{ useUpdateActionProps }}',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
destroy: {
|
||||
title: '{{ t("Delete") }}',
|
||||
'x-action': 'destroy',
|
||||
'x-component': 'Action.Link',
|
||||
'x-designer': 'Action.Designer',
|
||||
'x-component-props': {
|
||||
icon: 'DeleteOutlined',
|
||||
confirm: {
|
||||
title: "{{t('Delete record')}}",
|
||||
content: "{{t('Are you sure you want to delete it?')}}",
|
||||
},
|
||||
useProps: '{{ useDestroyActionProps }}',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
footer: {
|
||||
'x-component': 'Action.Container.Footer',
|
||||
'x-component-props': {},
|
||||
properties: {
|
||||
actions: {
|
||||
type: 'void',
|
||||
'x-component': 'ActionBar',
|
||||
'x-component-props': {},
|
||||
properties: {
|
||||
submit: {
|
||||
title: '{{ t("Submit") }}',
|
||||
'x-action': 'submit',
|
||||
'x-component': 'Action',
|
||||
'x-designer': 'Action.Designer',
|
||||
'x-component-props': {
|
||||
type: 'primary',
|
||||
htmlType: 'submit',
|
||||
useProps: '{{ usePickActionProps }}',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -49,6 +49,7 @@ export const FilterGroup = connect((props) => {
|
||||
<Trans>
|
||||
{'Meet '}
|
||||
<Select
|
||||
style={{ width: 'auto' }}
|
||||
value={logic}
|
||||
onChange={(value) => {
|
||||
setLogic(value);
|
||||
|
||||
@ -41,13 +41,22 @@ const usePickActionProps = () => {
|
||||
};
|
||||
};
|
||||
|
||||
const useAssociation = (props) => {
|
||||
const fieldSchema = useFieldSchema();
|
||||
const { association } = props;
|
||||
const { getField } = useCollection();
|
||||
if (association) {
|
||||
return association;
|
||||
}
|
||||
return getField(fieldSchema.name);
|
||||
}
|
||||
|
||||
export const InputRecordPicker: React.FC<any> = (props) => {
|
||||
const { value, multiple, onChange } = props;
|
||||
const fieldNames = useFieldNames(props);
|
||||
const [visible, setVisible] = useState(false);
|
||||
const fieldSchema = useFieldSchema();
|
||||
const { getField } = useCollection();
|
||||
const collectionField = getField(fieldSchema.name);
|
||||
const collectionField = useAssociation(props);
|
||||
const options = Array.isArray(value) ? value : value ? [value] : [];
|
||||
const [selectedRows, setSelectedRows] = useState(options);
|
||||
const values = options?.map((option) => option[fieldNames.value]);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user