feat: improve code

This commit is contained in:
chenos 2022-03-04 20:45:21 +08:00
parent 534a6e43ee
commit 72d2699769
13 changed files with 246 additions and 7 deletions

View File

@ -18,10 +18,17 @@ const ResourceContext = createContext<any>(null);
const CollectionResourceActionProvider = (props) => {
let { collection, request, uid } = props;
const api = useAPIClient();
const record = useRecord();
const actionName = request?.action;
const others = {};
if (actionName === 'get') {
others['filterByTk'] = record[collection.targetKey || collection.filterTargetKey || 'id'];
}
const service = useRequest(
{
...request,
params: {
...others,
...request?.params,
appends: collection.fields.filter((field) => field.target).map((field) => field.name),
},

View File

@ -1,4 +1,5 @@
import { useForm } from '@formily/react';
import { message } from 'antd';
import { useCollection, useCollectionManager } from '.';
import { useRequest } from '../api-client';
import { useRecord } from '../record-provider';
@ -121,6 +122,22 @@ export const useCreateActionWithoutRefresh = () => {
};
};
export const useUpdateViewAction = () => {
const form = useForm();
const ctx = useActionContext();
// const { refresh } = useResourceActionContext();
const { resource, targetKey } = useResourceContext();
const { [targetKey]: filterByTk } = useRecord();
return {
async run() {
await form.submit();
await resource.update({ filterByTk, values: form.values });
// refresh();
message.success('保存成功');
},
};
}
export const useUpdateAction = () => {
const form = useForm();
const ctx = useActionContext();
@ -172,6 +189,14 @@ export const useValuesFromRecord = (options) => {
});
};
export const useValuesFromRA = (options) => {
const ctx = useResourceActionContext();
return useRequest(() => Promise.resolve(ctx.data), {
...options,
refreshDeps: [ctx.data],
});
};
export const useCreateActionAndRefreshCM = () => {
const { run } = useCreateAction();
const { refreshCM } = useCollectionManager();

View File

@ -16,6 +16,8 @@ import { toArr } from '@formily/shared';
import { Button, Drawer, Select, Space } from 'antd';
import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useCollectionField } from '../../../collection-manager';
import { RecordProvider } from '../../../record-provider';
import { useAttach } from '../../hooks/useAttach';
import { ActionContext, useActionContext } from '../action';
@ -191,12 +193,15 @@ RecordPicker.SelectedItem = () => {
const fieldSchema = useFieldSchema();
const [visible, setVisible] = useState(false);
const fieldNames = ctx.field.componentProps.fieldNames;
const { target } = useCollectionField();
return (
<ActionContext.Provider value={{ visible, setVisible }}>
<a style={{ cursor: 'pointer' }} onClick={() => setVisible(true)}>
{ctx.record[fieldNames?.label || 'id']}
</a>
<RecursionField onlyRenderProperties schema={fieldSchema}></RecursionField>
<RecordProvider record={ctx.record}>
<RecursionField onlyRenderProperties schema={fieldSchema}></RecursionField>
</RecordProvider>
</ActionContext.Provider>
);
};

View File

@ -1,3 +1,4 @@
import { ISchema } from '@formily/react';
import { Switch } from 'antd';
import React from 'react';
import { SchemaInitializer } from '../../SchemaInitializer';
@ -113,6 +114,10 @@ export const LinkToFieldInitializer = (props) => {
'x-component': 'RecordPicker.SelectedItem',
properties: {
drawer1: {
'x-decorator': 'CollectionProvider',
'x-decorator-props': {
name: item.field.target,
},
'x-component': 'Action.Drawer',
'x-component-props': {
className: 'nb-action-popup',
@ -148,7 +153,7 @@ export const LinkToFieldInitializer = (props) => {
},
},
},
});
} as ISchema);
}}
>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>

View File

@ -0,0 +1,68 @@
import { FormOutlined } from '@ant-design/icons';
import { ISchema } from '@formily/react';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { SchemaInitializer } from '../..';
import { useCollection } from '../../../collection-manager';
const createSchema = (collectionName) => {
const schema: ISchema = {
type: 'void',
'x-decorator': 'ResourceActionProvider',
'x-decorator-props': {
collection: collectionName,
request: {
resource: collectionName,
action: 'get',
params: {},
},
},
'x-designer': 'Form.Designer',
'x-component': 'CardItem',
properties: {
form: {
type: 'void',
'x-decorator': 'Form',
'x-decorator-props': {
useValues: '{{ cm.useValuesFromRA }}',
},
properties: {
actions: {
type: 'void',
'x-initializer': 'RecordDetailsActionInitializers',
'x-component': 'ActionBar',
'x-component-props': {
style: {
marginBottom: 24,
},
},
properties: {},
},
grid: {
type: 'void',
'x-component': 'Grid',
'x-read-pretty': true,
'x-initializer': 'GridFormItemInitializers',
properties: {},
},
},
},
},
};
return schema;
};
export const RecordDetailsBlockInitializer = (props) => {
const { insert } = props;
const { name } = useCollection();
const { t } = useTranslation();
return (
<SchemaInitializer.Item
{...props}
icon={<FormOutlined />}
onClick={({ item }) => {
insert(createSchema(name));
}}
/>
);
};

View File

@ -23,7 +23,9 @@ const createSchema = (collectionName) => {
form: {
type: 'void',
'x-decorator': 'Form',
'x-decorator-props': {},
'x-decorator-props': {
useValues: '{{ cm.useValuesFromRA }}',
},
properties: {
grid: {
type: 'void',
@ -33,7 +35,7 @@ const createSchema = (collectionName) => {
},
actions: {
type: 'void',
'x-initializer': 'FormActionInitializers',
'x-initializer': 'RecordFormActionInitializers',
'x-component': 'ActionBar',
'x-component-props': {
layout: 'one-column',
@ -41,7 +43,17 @@ const createSchema = (collectionName) => {
marginTop: 24,
},
},
properties: {},
properties: {
submit: {
title: '{{ t("Submit") }}',
'x-action': 'submit',
'x-component': 'Action',
'x-component-props': {
type: 'primary',
useAction: '{{ cm.useUpdateViewAction }}',
},
},
},
},
},
},

View File

@ -7,6 +7,7 @@ export * from './FormBlockInitializer';
export * from './GeneralInitializer';
export * from './LinkToCollectionFieldInitializer';
export * from './MarkdownBlockInitializer';
export * from './RecordDetailsBlockInitializer';
export * from './RecordFormBlockInitializer';
export * from './RecordRelationBlockInitializer';
export * from './SubTableFieldInitializer';

View File

@ -36,7 +36,7 @@ export const RecordBlockInitializers = (props: any) => {
{
type: 'item',
title: 'Details',
component: 'RecordFormBlockInitializer',
component: 'RecordDetailsBlockInitializer',
},
{
type: 'item',

View File

@ -0,0 +1,81 @@
// 普通表单的操作配置
export const RecordDetailsActionInitializers = {
style: {
marginLeft: 8,
},
title: '{{t("Configure actions")}}',
items: [
{
type: 'itemGroup',
title: '{{t("Enable actions")}}',
children: [
{
type: 'item',
title: '{{t("Edit")}}',
component: 'ActionInitializer',
schema: {
title: '{{t("Edit")}}',
type: 'void',
'x-action': 'update',
'x-designer': 'Action.Designer',
'x-component': 'Action',
'x-component-props': {
type: 'primary',
},
properties: {
drawer: {
type: 'void',
'x-decorator': 'Form',
'x-decorator-props': {
useValues: '{{ cm.useValuesFromRA }}',
},
'x-component': 'Action.Drawer',
title: '{{ t("Edit record") }}',
properties: {
grid: {
type: 'void',
'x-component': 'Grid',
'x-initializer': 'GridFormItemInitializers',
properties: {},
},
footer: {
type: 'void',
'x-component': 'Action.Drawer.Footer',
properties: {
actions: {
type: 'void',
'x-component': 'ActionBar',
'x-component-props': {
layout: 'one-column',
},
properties: {
cancel: {
title: '{{ t("Cancel") }}',
'x-action': 'cancel',
'x-component': 'Action',
'x-component-props': {
useAction: '{{ cm.useCancelAction }}',
},
},
submit: {
title: '{{ t("Submit") }}',
'x-action': 'submit',
'x-component': 'Action',
'x-component-props': {
type: 'primary',
useAction: '{{ cm.useUpdateAction }}',
},
},
},
},
},
},
},
},
},
},
},
],
},
],
};

View File

@ -0,0 +1,27 @@
// 普通表单的操作配置
export const RecordFormActionInitializers = {
title: '{{t("Configure actions")}}',
items: [
{
type: 'itemGroup',
title: '{{t("Enable actions")}}',
children: [
{
type: 'item',
title: '{{t("Submit")}}',
component: 'ActionInitializer',
schema: {
title: '{{t("Submit")}}',
'x-action': 'submit',
'x-align': 'left',
'x-component': 'Action',
'x-component-props': {
type: 'primary',
useAction: '{{ cm.useUpdateViewAction }}',
},
},
},
],
},
],
};

View File

@ -6,6 +6,8 @@ import { GridFormItemInitializers } from './GridFormItemInitializers';
import * as Items from './Items';
import { PopupFormActionInitializers } from './PopupFormActionInitializers';
import { RecordBlockInitializers } from './RecordBlockInitializers';
import { RecordDetailsActionInitializers } from './RecordDetailsActionInitializers';
import { RecordFormActionInitializers } from './RecordFormActionInitializers';
import { TableActionInitializers } from './TableActionInitializers';
import { TableColumnInitializers } from './TableColumnInitializers';
import { TableFieldRecordActionInitializers } from './TableFieldRecordActionInitializers';
@ -39,4 +41,8 @@ export const initializes = {
TableFieldRecordActionInitializers,
// 添加标签页
TabPaneInitializers,
RecordDetailsActionInitializers,
RecordFormActionInitializers,
};

View File

@ -67,7 +67,7 @@ export class Collection<
private sequelizeModelOptions() {
const { name, tableName } = this.options;
return {
..._.omit(this.options, ['name', 'fields', 'model']),
..._.omit(this.options, ['name', 'fields', 'model', 'targetKey']),
modelName: name,
sequelize: this.context.database.sequelize,
tableName: tableName || name,

View File

@ -5,6 +5,8 @@ export default {
title: '{{t("Roles")}}',
autoGenId: false,
model: 'RoleModel',
filterTargetKey: 'name',
// targetKey: 'name',
fields: [
{
type: 'uid',