refactor: association field (#1838)
* feat: association field * fix: bug * refactor: association field * style: style improve * style: style improve * refactor: support subtable * refactor: support file collection * refactor: locale improve * refactor: subtable improve * refactor: association select improve * refactor: association select improve * refactor: association select improve * refactor: useAssociationNames * refactor: enable link * refactor: selector * refactor: selector * refactor: locale improve * refactor: on demand loading of relational data * refactor: locale improve * refactor: select button * refactor: association field * refactor: formformBlock provider * refactor: formformBlock provider * refactor: internalSelect recordPicker * refactor: formBlocklockProvider * fix: addNewer schema * fix: useServiceOptions * fix: useCreateActionProps * fix: useCreateActionProps * refactor: nester delete * refactor: nester delete in detail * refactor: subTable suport select * refactor: subTable suport select * style: style improve * style: style improve * chore: fileManger * fix: association readPrety * fix: filemanger * refactor: field mode * refactor: enable link * chore: error message * refactor: association schemaInitialize * refactor: association schemaInitialize * refactor: currentMode * refactor: field mode default value * fix: file manage readPretty * fix: appends * chore: file manage readPretty * fix: updateAssociationValues * fix: updateAssociationValues * fix: updateAssociationValues * fix: nester appends * fix: nester appends * fix: tree collection association fields * fix: tree collection association fields * fix: nester appends * fix: subtable to select field value missing * fix: subtable to select field value missing * fix: compatible with historical blocks * fix: compatible with historical blocks * fix: compatible with historical blocks * feat: add migration * fix: filter block allow add new * fix: compatible with historical blocks * fix: skip if not RecordPicker * fix: compatible with historical blocks * fix: detail block not support nester * fix: association select support data scope and sort setting * fix: appends on demand loading * fix: asociationSelect support multiple * fix: recordPicker -> AssociationField * fix: add migration * fix: audit logs not show assication data * fix: flattenNestedList * refactor: file manager field mode * refactor: field mode refactor * fix: subtable action * fix: subtable appends * refactor: code improve * fix: nester add new * feat: sub table * fix: data scope not effect immediately * fix: association add new * fix: association field failed to add new and mutual influence * style: style improve * style: style improve * refactor: updateAssociationValues * refactor: form init values * refactor: select options * fix: form initialValues * fix: record picker values * fix: field value change when field mode change * fix: select data scope * feat: add migration * fix: table column enable link * fix: table column enable link * refactor: locale improve * fix: migration * fix: mutiple config * fix: readPretty enable link * fix: appends on demand * fix: enable link style * refactor: locale improve * refactor: locale improve * feat: sub-form migration * fix: skip migration * fix: translation * fix: skip migration * fix: getLabelFormatValue * fix: error TS2339: Property 'find' does not exist on type 'string | SchemaEnum<any>' * refactor: remove the logic code for converting old record picker * refactor: locale * refactor: locale * fix: sub-table should not support add new * refactor: code improve * refactor: locale * fix: compatibility history Subtable * fix: improve --------- Co-authored-by: chenos <chenlinxh@gmail.com> Co-authored-by: Chareice <chareice@live.com>
This commit is contained in:
katherinehhh
GitHub
parent
ecd7540f7a
commit
55efa40cdd
@ -62,6 +62,7 @@ const useResource = (props: UseResourceProps) => {
|
||||
};
|
||||
return new TableFieldResource(options);
|
||||
}
|
||||
|
||||
const withoutTableFieldResource = useContext(WithoutTableFieldResource);
|
||||
const __parent = useContext(BlockRequestContext);
|
||||
if (
|
||||
|
||||
@ -4,6 +4,7 @@ import { Spin } from 'antd';
|
||||
import React, { createContext, useContext, useEffect, useMemo } from 'react';
|
||||
import { RecordProvider } from '../record-provider';
|
||||
import { BlockProvider, useBlockRequestContext } from './BlockProvider';
|
||||
import { useAssociationNames } from './hooks';
|
||||
|
||||
export const DetailsBlockContext = createContext<any>({});
|
||||
|
||||
@ -38,9 +39,15 @@ const InternalDetailsBlockProvider = (props) => {
|
||||
};
|
||||
|
||||
export const DetailsBlockProvider = (props) => {
|
||||
const params = { ...props.params };
|
||||
const { collection } = props;
|
||||
const { appends } = useAssociationNames(collection);
|
||||
if (!Object.keys(params).includes('appends')) {
|
||||
params['appends'] = appends;
|
||||
}
|
||||
return (
|
||||
<BlockProvider {...props}>
|
||||
<InternalDetailsBlockProvider {...props} />
|
||||
<BlockProvider {...props} params={params}>
|
||||
<InternalDetailsBlockProvider {...props} params={params} />
|
||||
</BlockProvider>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
import { createForm } from '@formily/core';
|
||||
import { RecursionField, Schema, useField, useFieldSchema } from '@formily/react';
|
||||
import { Spin } from 'antd';
|
||||
import isEmpty from 'lodash/isEmpty';
|
||||
import { isEmpty } from 'lodash';
|
||||
import React, { createContext, useContext, useEffect, useMemo, useRef } from 'react';
|
||||
import { useCollection } from '../collection-manager';
|
||||
import { RecordProvider, useRecord } from '../record-provider';
|
||||
import { useActionContext, useDesignable } from '../schema-component';
|
||||
import { Templates as DataTemplateSelect } from '../schema-component/antd/form-v2/Templates';
|
||||
import { BlockProvider, useBlockRequestContext } from './BlockProvider';
|
||||
import { useAssociationNames } from './hooks';
|
||||
|
||||
export const FormBlockContext = createContext<any>({});
|
||||
|
||||
const InternalFormBlockProvider = (props) => {
|
||||
const { action, readPretty } = props;
|
||||
const { action, readPretty, params, updateAssociationValues } = props;
|
||||
const field = useField();
|
||||
const form = useMemo(
|
||||
() =>
|
||||
@ -24,18 +24,19 @@ const InternalFormBlockProvider = (props) => {
|
||||
const { resource, service } = useBlockRequestContext();
|
||||
const formBlockRef = useRef();
|
||||
const record = useRecord();
|
||||
if (service.loading) {
|
||||
return <Spin />;
|
||||
}
|
||||
// if (service.loading) {
|
||||
// return <Spin />;
|
||||
// }
|
||||
return (
|
||||
<FormBlockContext.Provider
|
||||
value={{
|
||||
params,
|
||||
action,
|
||||
form,
|
||||
field,
|
||||
service,
|
||||
resource,
|
||||
updateAssociationValues: [],
|
||||
updateAssociationValues,
|
||||
formBlockRef,
|
||||
}}
|
||||
>
|
||||
@ -67,9 +68,14 @@ export const FormBlockProvider = (props) => {
|
||||
const record = useRecord();
|
||||
const { collection } = props;
|
||||
const { __collection } = record;
|
||||
const params = { ...props.params };
|
||||
const currentCollection = useCollection();
|
||||
const { designable } = useDesignable();
|
||||
const isEmptyRecord = useIsEmptyRecord();
|
||||
const { appends, updateAssociationValues } = useAssociationNames(collection);
|
||||
if (!Object.keys(params).includes('appends')) {
|
||||
params['appends'] = appends;
|
||||
}
|
||||
let detailFlag = false;
|
||||
if (isEmptyRecord) {
|
||||
detailFlag = true;
|
||||
@ -81,8 +87,8 @@ export const FormBlockProvider = (props) => {
|
||||
(currentCollection.name === (collection?.name || collection) && !isEmptyRecord) || !currentCollection.name;
|
||||
return (
|
||||
(detailFlag || createFlag) && (
|
||||
<BlockProvider {...props} block={'form'}>
|
||||
<InternalFormBlockProvider {...props} />
|
||||
<BlockProvider {...props} block={'form'} params={params}>
|
||||
<InternalFormBlockProvider {...props} params={params} updateAssociationValues={updateAssociationValues} />
|
||||
</BlockProvider>
|
||||
)
|
||||
);
|
||||
@ -107,8 +113,10 @@ export const useFormBlockProps = () => {
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
ctx.form?.setInitialValues(ctx.service?.data?.data);
|
||||
}, []);
|
||||
if (!ctx?.service?.loading) {
|
||||
ctx.form?.setInitialValues(ctx.service?.data?.data);
|
||||
}
|
||||
}, [ctx?.service?.loading]);
|
||||
return {
|
||||
form: ctx.form,
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { SchemaExpressionScopeContext, useField, useFieldSchema, useForm } from '@formily/react';
|
||||
import { Modal, message } from 'antd';
|
||||
import { Schema, SchemaExpressionScopeContext, useField, useFieldSchema, useForm } from '@formily/react';
|
||||
import { parse } from '@nocobase/utils/client';
|
||||
import { Modal, message } from 'antd';
|
||||
import { cloneDeep } from 'lodash';
|
||||
import get from 'lodash/get';
|
||||
import omit from 'lodash/omit';
|
||||
@ -166,7 +166,7 @@ export const useCreateActionProps = () => {
|
||||
actionField.data = field.data || {};
|
||||
actionField.data.loading = true;
|
||||
try {
|
||||
await resource.create({
|
||||
const data = await resource.create({
|
||||
values: {
|
||||
...values,
|
||||
...overwriteValues,
|
||||
@ -174,6 +174,7 @@ export const useCreateActionProps = () => {
|
||||
},
|
||||
});
|
||||
actionField.data.loading = false;
|
||||
actionField.data.data = data;
|
||||
__parent?.service?.refresh?.();
|
||||
setVisible?.(false);
|
||||
if (!onSuccess?.successMessage) {
|
||||
@ -203,6 +204,62 @@ export const useCreateActionProps = () => {
|
||||
};
|
||||
};
|
||||
|
||||
export const useAssociationCreateActionProps = () => {
|
||||
const form = useForm();
|
||||
const { field, resource } = useBlockRequestContext();
|
||||
const { setVisible, fieldSchema } = useActionContext();
|
||||
const actionSchema = useFieldSchema();
|
||||
const actionField = useField();
|
||||
const { fields, getField, getTreeParentField } = useCollection();
|
||||
const compile = useCompile();
|
||||
const filterByTk = useFilterByTk();
|
||||
const currentRecord = useRecord();
|
||||
const currentUserContext = useCurrentUserContext();
|
||||
const currentUser = currentUserContext?.data?.data;
|
||||
return {
|
||||
async onClick() {
|
||||
const fieldNames = fields.map((field) => field.name);
|
||||
const {
|
||||
assignedValues: originalAssignedValues = {},
|
||||
onSuccess,
|
||||
overwriteValues,
|
||||
skipValidator,
|
||||
} = actionSchema?.['x-action-settings'] ?? {};
|
||||
const addChild = fieldSchema?.['x-component-props']?.addChild;
|
||||
const assignedValues = parse(originalAssignedValues)({ currentTime: new Date(), currentRecord, currentUser });
|
||||
if (!skipValidator) {
|
||||
await form.submit();
|
||||
}
|
||||
const values = getFormValues(filterByTk, field, form, fieldNames, getField, resource);
|
||||
if (addChild) {
|
||||
const treeParentField = getTreeParentField();
|
||||
values[treeParentField?.name ?? 'parent'] = currentRecord;
|
||||
values[treeParentField?.foreignKey ?? 'parentId'] = currentRecord.id;
|
||||
}
|
||||
actionField.data = field.data || {};
|
||||
actionField.data.loading = true;
|
||||
try {
|
||||
const data = await resource.create({
|
||||
values: {
|
||||
...values,
|
||||
...overwriteValues,
|
||||
...assignedValues,
|
||||
},
|
||||
});
|
||||
actionField.data.loading = false;
|
||||
actionField.data.data = data;
|
||||
setVisible?.(false);
|
||||
if (!onSuccess?.successMessage) {
|
||||
return;
|
||||
}
|
||||
message.success(compile(onSuccess?.successMessage));
|
||||
} catch (error) {
|
||||
actionField.data.loading = false;
|
||||
}
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export interface FilterTarget {
|
||||
targets?: {
|
||||
/** field uid */
|
||||
@ -740,6 +797,19 @@ export const useDestroyActionProps = () => {
|
||||
};
|
||||
};
|
||||
|
||||
export const useRemoveActionProps = (associationName) => {
|
||||
const filterByTk = useFilterByTk();
|
||||
const api = useAPIClient();
|
||||
const resource = api.resource(associationName, filterByTk);
|
||||
return {
|
||||
async onClick(value) {
|
||||
await resource.remove({
|
||||
values: [value.id],
|
||||
});
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export const useDetailPrintActionProps = () => {
|
||||
const { formBlockRef } = useFormBlockContext();
|
||||
|
||||
@ -969,7 +1039,6 @@ export const useAssociationFilterBlockProps = () => {
|
||||
const param = block.service.params?.[0] || {};
|
||||
// 保留原有的 filter
|
||||
const storedFilter = block.service.params?.[1]?.filters || {};
|
||||
|
||||
if (value.length) {
|
||||
storedFilter[key] = {
|
||||
[filterKey]: value,
|
||||
@ -1002,3 +1071,83 @@ export const useAssociationFilterBlockProps = () => {
|
||||
labelKey,
|
||||
};
|
||||
};
|
||||
|
||||
export const useAssociationNames = (collection) => {
|
||||
const { getCollectionFields, getCollectionJoinField } = useCollectionManager();
|
||||
const collectionFields = getCollectionFields(collection);
|
||||
const associationFields = new Set();
|
||||
for (const collectionField of collectionFields) {
|
||||
if (collectionField.target) {
|
||||
associationFields.add(collectionField.name);
|
||||
const fields = getCollectionFields(collectionField.target);
|
||||
for (const field of fields) {
|
||||
if (field.target) {
|
||||
associationFields.add(`${collectionField.name}.${field.name}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
const fieldSchema = useFieldSchema();
|
||||
const associationValues = [];
|
||||
const formSchema = fieldSchema.reduceProperties((buf, schema) => {
|
||||
if (['FormV2', 'Details'].includes(schema['x-component'])) {
|
||||
return schema;
|
||||
}
|
||||
return buf;
|
||||
}, new Schema({}));
|
||||
|
||||
const getAssociationAppends = (schema, arr = []) => {
|
||||
return schema.reduceProperties((buf, s) => {
|
||||
const collectionfield = s['x-collection-field'] && getCollectionJoinField(s['x-collection-field']);
|
||||
if (
|
||||
collectionfield &&
|
||||
['createdBy', 'updatedBy', 'o2m', 'obo', 'oho', 'm2o', 'm2m'].includes(collectionfield.interface)
|
||||
) {
|
||||
if (['Nester', 'SubTable'].includes(s['x-component-props']?.mode)) {
|
||||
associationValues.push(s.name);
|
||||
}
|
||||
|
||||
buf.push(s.name);
|
||||
if (s['x-component-props'].mode === 'Nester' || s['x-component'] === 'TableField') {
|
||||
return getAssociationAppends(s, buf);
|
||||
}
|
||||
return buf;
|
||||
} else {
|
||||
if (s['x-component'] === 'Grid' || s['x-component'] === 'TableV2') {
|
||||
const kk = buf?.concat?.();
|
||||
return getNesterAppends(s, kk || []);
|
||||
} else {
|
||||
return !s['x-component']?.includes('Action.') && getAssociationAppends(s, buf);
|
||||
}
|
||||
}
|
||||
}, arr);
|
||||
};
|
||||
function flattenNestedList(nestedList) {
|
||||
const flattenedList = [];
|
||||
function flattenHelper(list, prefix) {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
if (Array.isArray(list[i])) {
|
||||
`${prefix}` !== `${list[i][0]}` && flattenHelper(list[i], `${prefix}.${list[i][0]}`);
|
||||
} else {
|
||||
const str = prefix.replaceAll(`${list[i]}`, '').replace('..', '.').trim();
|
||||
!list.includes(str) && flattenedList.push(`${str}${list[i]}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < nestedList.length; i++) {
|
||||
flattenHelper(nestedList[i], nestedList[i][0]);
|
||||
}
|
||||
return flattenedList.filter((obj) => !obj.startsWith('.'));
|
||||
}
|
||||
const getNesterAppends = (gridSchema, data) => {
|
||||
gridSchema.reduceProperties((buf, s) => {
|
||||
buf.push(getAssociationAppends(s));
|
||||
return buf;
|
||||
}, data);
|
||||
return data.filter((g) => g.length);
|
||||
};
|
||||
const data = getAssociationAppends(formSchema);
|
||||
const associations = data.filter((g) => g.length);
|
||||
const appends = flattenNestedList(associations);
|
||||
return { appends, updateAssociationValues: appends.filter((v) => associationValues.includes(v)) };
|
||||
};
|
||||
|
||||
@ -18,7 +18,7 @@ export const createdBy: IField = {
|
||||
uiSchema: {
|
||||
type: 'object',
|
||||
title: '{{t("Created by")}}',
|
||||
'x-component': 'RecordPicker',
|
||||
'x-component': 'AssociationField',
|
||||
'x-component-props': {
|
||||
fieldNames: {
|
||||
value: 'id',
|
||||
|
||||
@ -17,7 +17,7 @@ export const linkTo: IField = {
|
||||
// name,
|
||||
uiSchema: {
|
||||
// title,
|
||||
'x-component': 'RecordPicker',
|
||||
'x-component': 'AssociationField',
|
||||
'x-component-props': {
|
||||
// mode: 'tags',
|
||||
multiple: true,
|
||||
@ -33,7 +33,7 @@ export const linkTo: IField = {
|
||||
// name,
|
||||
uiSchema: {
|
||||
// title,
|
||||
'x-component': 'RecordPicker',
|
||||
'x-component': 'AssociationField',
|
||||
'x-component-props': {
|
||||
// mode: 'tags',
|
||||
multiple: true,
|
||||
@ -51,45 +51,9 @@ export const linkTo: IField = {
|
||||
schema['x-component-props'].fieldNames = schema['x-component-props'].fieldNames || { value: 'id' };
|
||||
schema['x-component-props'].fieldNames.label = targetCollection.titleField;
|
||||
}
|
||||
|
||||
if (targetCollection?.template === 'file') {
|
||||
const fieldNames = schema['x-component-props']['fieldNames'] || { label: 'preview', value: 'id' };
|
||||
fieldNames.label = 'preview';
|
||||
schema['x-component-props']['fieldNames'] = fieldNames;
|
||||
schema['x-component-props'].quickUpload = true;
|
||||
schema['x-component-props'].selectFile = true;
|
||||
}
|
||||
|
||||
if (block === 'Form') {
|
||||
if (schema['x-component'] === 'AssociationSelect') {
|
||||
Object.assign(schema, {
|
||||
type: 'string',
|
||||
'x-designer': 'AssociationSelect.Designer',
|
||||
});
|
||||
} else {
|
||||
schema.type = 'string';
|
||||
schema['properties'] = {
|
||||
viewer: cloneDeep(recordPickerViewer),
|
||||
selector: cloneDeep(recordPickerSelector),
|
||||
};
|
||||
}
|
||||
return schema;
|
||||
} else {
|
||||
if (readPretty) {
|
||||
schema['properties'] = {
|
||||
viewer: cloneDeep(recordPickerViewer),
|
||||
};
|
||||
} else {
|
||||
schema['properties'] = {
|
||||
selector: cloneDeep(recordPickerSelector),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if (['Table', 'Kanban'].includes(block)) {
|
||||
schema['x-component-props'] = schema['x-component-props'] || {};
|
||||
schema['x-component-props']['ellipsis'] = true;
|
||||
|
||||
// 预览文件时需要的参数
|
||||
schema['x-component-props']['size'] = 'small';
|
||||
}
|
||||
|
||||
@ -23,7 +23,7 @@ export const m2m: IField = {
|
||||
// name,
|
||||
uiSchema: {
|
||||
// title,
|
||||
'x-component': 'RecordPicker',
|
||||
'x-component': 'AssociationField',
|
||||
'x-component-props': {
|
||||
// mode: 'tags',
|
||||
multiple: true,
|
||||
@ -39,7 +39,7 @@ export const m2m: IField = {
|
||||
// name,
|
||||
uiSchema: {
|
||||
// title,
|
||||
'x-component': 'RecordPicker',
|
||||
'x-component': 'AssociationField',
|
||||
'x-component-props': {
|
||||
// mode: 'tags',
|
||||
multiple: true,
|
||||
@ -53,47 +53,14 @@ export const m2m: IField = {
|
||||
},
|
||||
availableTypes: ['belongsToMany'],
|
||||
schemaInitialize(schema: ISchema, { readPretty, block, targetCollection }) {
|
||||
schema['type'] = 'array';
|
||||
if (targetCollection?.titleField && schema['x-component-props']) {
|
||||
schema['x-component-props'].fieldNames = schema['x-component-props'].fieldNames || { value: 'id' };
|
||||
schema['x-component-props'].fieldNames.label = targetCollection.titleField;
|
||||
}
|
||||
|
||||
if (targetCollection?.template === 'file') {
|
||||
const fieldNames = schema['x-component-props']['fieldNames'] || { label: 'preview', value: 'id' };
|
||||
fieldNames.label = 'preview';
|
||||
schema['x-component-props']['fieldNames'] = fieldNames;
|
||||
schema['x-component-props'].quickUpload = true;
|
||||
schema['x-component-props'].selectFile = true;
|
||||
}
|
||||
|
||||
if (block === 'Form') {
|
||||
if (schema['x-component'] === 'AssociationSelect') {
|
||||
Object.assign(schema, {
|
||||
type: 'string',
|
||||
'x-designer': 'AssociationSelect.Designer',
|
||||
});
|
||||
} else {
|
||||
schema.type = 'string';
|
||||
schema['properties'] = {
|
||||
viewer: cloneDeep(recordPickerViewer),
|
||||
selector: cloneDeep(recordPickerSelector),
|
||||
};
|
||||
}
|
||||
return schema;
|
||||
}
|
||||
if (readPretty) {
|
||||
schema['properties'] = {
|
||||
viewer: cloneDeep(recordPickerViewer),
|
||||
};
|
||||
} else {
|
||||
schema['properties'] = {
|
||||
selector: cloneDeep(recordPickerSelector),
|
||||
};
|
||||
}
|
||||
if (['Table', 'Kanban'].includes(block)) {
|
||||
schema['x-component-props'] = schema['x-component-props'] || {};
|
||||
schema['x-component-props']['ellipsis'] = true;
|
||||
|
||||
// 预览文件时需要的参数
|
||||
schema['x-component-props']['size'] = 'small';
|
||||
}
|
||||
|
||||
@ -22,7 +22,7 @@ export const m2o: IField = {
|
||||
// name,
|
||||
uiSchema: {
|
||||
// title,
|
||||
'x-component': 'RecordPicker',
|
||||
'x-component': 'AssociationField',
|
||||
'x-component-props': {
|
||||
// mode: 'tags',
|
||||
multiple: false,
|
||||
@ -38,7 +38,7 @@ export const m2o: IField = {
|
||||
// name,
|
||||
uiSchema: {
|
||||
// title,
|
||||
'x-component': 'RecordPicker',
|
||||
'x-component': 'AssociationField',
|
||||
'x-component-props': {
|
||||
// mode: 'tags',
|
||||
multiple: true,
|
||||
@ -52,47 +52,14 @@ export const m2o: IField = {
|
||||
},
|
||||
availableTypes: ['belongsTo'],
|
||||
schemaInitialize(schema: ISchema, { block, readPretty, targetCollection }) {
|
||||
schema['type'] = 'object';
|
||||
if (targetCollection?.titleField && schema['x-component-props']) {
|
||||
schema['x-component-props'].fieldNames = schema['x-component-props'].fieldNames || { value: 'id' };
|
||||
schema['x-component-props'].fieldNames.label = targetCollection.titleField;
|
||||
}
|
||||
|
||||
if (targetCollection?.template === 'file') {
|
||||
const fieldNames = schema['x-component-props']['fieldNames'] || { label: 'preview', value: 'id' };
|
||||
fieldNames.label = 'preview';
|
||||
schema['x-component-props']['fieldNames'] = fieldNames;
|
||||
schema['x-component-props'].quickUpload = true;
|
||||
schema['x-component-props'].selectFile = true;
|
||||
}
|
||||
|
||||
if (block === 'Form') {
|
||||
if (schema['x-component'] === 'AssociationSelect') {
|
||||
Object.assign(schema, {
|
||||
type: 'string',
|
||||
'x-designer': 'AssociationSelect.Designer',
|
||||
});
|
||||
} else {
|
||||
schema.type = 'string';
|
||||
schema['properties'] = {
|
||||
viewer: cloneDeep(recordPickerViewer),
|
||||
selector: cloneDeep(recordPickerSelector),
|
||||
};
|
||||
}
|
||||
return schema;
|
||||
}
|
||||
if (readPretty) {
|
||||
schema['properties'] = {
|
||||
viewer: cloneDeep(recordPickerViewer),
|
||||
};
|
||||
} else {
|
||||
schema['properties'] = {
|
||||
selector: cloneDeep(recordPickerSelector),
|
||||
};
|
||||
}
|
||||
if (['Table', 'Kanban'].includes(block)) {
|
||||
schema['x-component-props'] = schema['x-component-props'] || {};
|
||||
schema['x-component-props']['ellipsis'] = true;
|
||||
|
||||
// 预览文件时需要的参数
|
||||
schema['x-component-props']['size'] = 'small';
|
||||
}
|
||||
|
||||
@ -22,7 +22,7 @@ export const o2m: IField = {
|
||||
// name,
|
||||
uiSchema: {
|
||||
// title,
|
||||
'x-component': 'RecordPicker',
|
||||
'x-component': 'AssociationField',
|
||||
'x-component-props': {
|
||||
// mode: 'tags',
|
||||
multiple: true,
|
||||
@ -38,7 +38,7 @@ export const o2m: IField = {
|
||||
// name,
|
||||
uiSchema: {
|
||||
// title,
|
||||
'x-component': 'RecordPicker',
|
||||
'x-component': 'AssociationField',
|
||||
'x-component-props': {
|
||||
// mode: 'tags',
|
||||
multiple: false,
|
||||
@ -52,82 +52,14 @@ export const o2m: IField = {
|
||||
},
|
||||
availableTypes: ['hasMany'],
|
||||
schemaInitialize(schema: ISchema, { field, block, readPretty, targetCollection }) {
|
||||
schema['type'] = 'array';
|
||||
if (targetCollection?.titleField && schema['x-component-props']) {
|
||||
schema['x-component-props'].fieldNames = schema['x-component-props'].fieldNames || { value: 'id' };
|
||||
schema['x-component-props'].fieldNames.label = targetCollection.titleField;
|
||||
}
|
||||
|
||||
if (block === 'Form') {
|
||||
if (schema['x-component'] === 'TableField') {
|
||||
const association = `${field.collectionName}.${field.name}`;
|
||||
schema['type'] = 'void';
|
||||
schema['properties'] = {
|
||||
block: {
|
||||
type: 'void',
|
||||
'x-decorator': 'TableFieldProvider',
|
||||
'x-acl-action': `${association}:list`,
|
||||
'x-decorator-props': {
|
||||
collection: field.target,
|
||||
association: association,
|
||||
resource: association,
|
||||
action: 'list',
|
||||
params: {
|
||||
paginate: false,
|
||||
},
|
||||
showIndex: true,
|
||||
dragSort: false,
|
||||
fieldName: field.name,
|
||||
},
|
||||
properties: {
|
||||
actions: {
|
||||
type: 'void',
|
||||
'x-initializer': 'SubTableActionInitializers',
|
||||
'x-component': 'TableField.ActionBar',
|
||||
'x-component-props': {},
|
||||
},
|
||||
[field.name]: {
|
||||
type: 'array',
|
||||
'x-initializer': 'TableColumnInitializers',
|
||||
'x-component': 'TableV2',
|
||||
'x-component-props': {
|
||||
rowSelection: {
|
||||
type: 'checkbox',
|
||||
},
|
||||
useProps: '{{ useTableFieldProps }}',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
} else if (schema['x-component'] === 'AssociationSelect') {
|
||||
Object.assign(schema, {
|
||||
type: 'string',
|
||||
'x-designer': 'AssociationSelect.Designer',
|
||||
});
|
||||
} else {
|
||||
schema.type = 'string';
|
||||
schema['properties'] = {
|
||||
viewer: cloneDeep(recordPickerViewer),
|
||||
selector: cloneDeep(recordPickerSelector),
|
||||
};
|
||||
}
|
||||
return schema;
|
||||
}
|
||||
|
||||
if (readPretty) {
|
||||
schema['properties'] = {
|
||||
viewer: cloneDeep(recordPickerViewer),
|
||||
};
|
||||
} else {
|
||||
schema['properties'] = {
|
||||
selector: cloneDeep(recordPickerSelector),
|
||||
};
|
||||
}
|
||||
|
||||
if (['Table', 'Kanban'].includes(block)) {
|
||||
schema['x-component-props'] = schema['x-component-props'] || {};
|
||||
schema['x-component-props']['ellipsis'] = true;
|
||||
|
||||
// 预览文件时需要的参数
|
||||
schema['x-component-props']['size'] = 'small';
|
||||
}
|
||||
|
||||
@ -9,72 +9,6 @@ import {
|
||||
} from './properties';
|
||||
import { IField } from './types';
|
||||
|
||||
const internalSchameInitialize = (schema: ISchema, { field, block, readPretty, action }) => {
|
||||
if (block === 'Form') {
|
||||
if (schema['x-component'] === 'FormField') {
|
||||
const association = `${field.collectionName}.${field.name}`;
|
||||
schema.type = 'void';
|
||||
schema.properties = {
|
||||
block: {
|
||||
type: 'void',
|
||||
'x-decorator': 'FormFieldProvider',
|
||||
'x-decorator-props': {
|
||||
collection: field.target,
|
||||
association: association,
|
||||
resource: association,
|
||||
action: action,
|
||||
fieldName: field.name,
|
||||
readPretty,
|
||||
},
|
||||
'x-component': 'CardItem',
|
||||
'x-component-props': {
|
||||
bordered: true,
|
||||
},
|
||||
properties: {
|
||||
[field.name]: {
|
||||
type: 'object',
|
||||
'x-component': 'FormV2',
|
||||
'x-component-props': {
|
||||
useProps: '{{ useFormFieldProps }}',
|
||||
},
|
||||
properties: {
|
||||
__form_grid: {
|
||||
type: 'void',
|
||||
'x-component': 'Grid',
|
||||
'x-initializer': 'FormItemInitializers',
|
||||
properties: {},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
} else if (schema['x-component'] === 'AssociationSelect') {
|
||||
Object.assign(schema, {
|
||||
type: 'string',
|
||||
'x-designer': 'AssociationSelect.Designer',
|
||||
});
|
||||
} else {
|
||||
schema.type = 'string';
|
||||
schema['properties'] = {
|
||||
viewer: cloneDeep(recordPickerViewer),
|
||||
selector: cloneDeep(recordPickerSelector),
|
||||
};
|
||||
}
|
||||
return schema;
|
||||
}
|
||||
schema.type = 'string';
|
||||
if (readPretty) {
|
||||
schema['properties'] = {
|
||||
viewer: cloneDeep(recordPickerViewer),
|
||||
};
|
||||
} else {
|
||||
schema['properties'] = {
|
||||
selector: cloneDeep(recordPickerSelector),
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
export const o2o: IField = {
|
||||
name: 'o2o',
|
||||
type: 'object',
|
||||
@ -88,7 +22,7 @@ export const o2o: IField = {
|
||||
// name,
|
||||
uiSchema: {
|
||||
// title,
|
||||
'x-component': 'RecordPicker',
|
||||
'x-component': 'AssociationField',
|
||||
'x-component-props': {
|
||||
// mode: 'tags',
|
||||
multiple: false,
|
||||
@ -105,7 +39,7 @@ export const o2o: IField = {
|
||||
// name,
|
||||
uiSchema: {
|
||||
// title,
|
||||
'x-component': 'RecordPicker',
|
||||
'x-component': 'AssociationField',
|
||||
'x-component-props': {
|
||||
// mode: 'tags',
|
||||
multiple: false,
|
||||
@ -119,7 +53,6 @@ export const o2o: IField = {
|
||||
},
|
||||
availableTypes: ['hasOne'],
|
||||
schemaInitialize(schema: ISchema, { field, block, readPretty, action }) {
|
||||
internalSchameInitialize(schema, { field, block, readPretty, action });
|
||||
if (['Table', 'Kanban'].includes(block)) {
|
||||
schema['x-component-props'] = schema['x-component-props'] || {};
|
||||
schema['x-component-props']['ellipsis'] = true;
|
||||
@ -268,7 +201,7 @@ export const oho: IField = {
|
||||
// name,
|
||||
uiSchema: {
|
||||
// title,
|
||||
'x-component': 'RecordPicker',
|
||||
'x-component': 'AssociationField',
|
||||
'x-component-props': {
|
||||
// mode: 'tags',
|
||||
multiple: false,
|
||||
@ -285,7 +218,7 @@ export const oho: IField = {
|
||||
// name,
|
||||
uiSchema: {
|
||||
// title,
|
||||
'x-component': 'RecordPicker',
|
||||
'x-component': 'AssociationField',
|
||||
'x-component-props': {
|
||||
// mode: 'tags',
|
||||
multiple: false,
|
||||
@ -298,7 +231,7 @@ export const oho: IField = {
|
||||
},
|
||||
},
|
||||
schemaInitialize(schema: ISchema, { field, block, readPretty, action }) {
|
||||
internalSchameInitialize(schema, { field, block, readPretty, action });
|
||||
schema['type'] = 'object';
|
||||
if (['Table', 'Kanban'].includes(block)) {
|
||||
schema['x-component-props'] = schema['x-component-props'] || {};
|
||||
schema['x-component-props']['ellipsis'] = true;
|
||||
@ -439,7 +372,7 @@ export const obo: IField = {
|
||||
// name,
|
||||
uiSchema: {
|
||||
// title,
|
||||
'x-component': 'RecordPicker',
|
||||
'x-component': 'AssociationField',
|
||||
'x-component-props': {
|
||||
// mode: 'tags',
|
||||
multiple: false,
|
||||
@ -455,7 +388,7 @@ export const obo: IField = {
|
||||
// name,
|
||||
uiSchema: {
|
||||
// title,
|
||||
'x-component': 'RecordPicker',
|
||||
'x-component': 'AssociationField',
|
||||
'x-component-props': {
|
||||
// mode: 'tags',
|
||||
multiple: false,
|
||||
@ -468,11 +401,10 @@ export const obo: IField = {
|
||||
},
|
||||
},
|
||||
schemaInitialize(schema: ISchema, { field, block, readPretty, action, targetCollection }) {
|
||||
internalSchameInitialize(schema, { field, block, readPretty, action });
|
||||
schema['type'] = 'object';
|
||||
if (['Table', 'Kanban'].includes(block)) {
|
||||
schema['x-component-props'] = schema['x-component-props'] || {};
|
||||
schema['x-component-props']['ellipsis'] = true;
|
||||
|
||||
// 预览文件时需要的参数
|
||||
schema['x-component-props']['size'] = 'small';
|
||||
}
|
||||
@ -481,14 +413,6 @@ export const obo: IField = {
|
||||
schema['x-component-props'].fieldNames = schema['x-component-props'].fieldNames || { value: 'id' };
|
||||
schema['x-component-props'].fieldNames.label = targetCollection.titleField;
|
||||
}
|
||||
|
||||
if (targetCollection?.template === 'file') {
|
||||
const fieldNames = schema['x-component-props']['fieldNames'] || { label: 'preview', value: 'id' };
|
||||
fieldNames.label = 'preview';
|
||||
schema['x-component-props']['fieldNames'] = fieldNames;
|
||||
schema['x-component-props'].quickUpload = true;
|
||||
schema['x-component-props'].selectFile = true;
|
||||
}
|
||||
},
|
||||
properties: {
|
||||
'uiSchema.title': {
|
||||
|
||||
@ -17,7 +17,7 @@ export const updatedBy: IField = {
|
||||
uiSchema: {
|
||||
type: 'object',
|
||||
title: '{{t("Last updated by")}}',
|
||||
'x-component': 'RecordPicker',
|
||||
'x-component': 'AssociationField',
|
||||
'x-component-props': {
|
||||
fieldNames: {
|
||||
value: 'id',
|
||||
|
||||
@ -30,7 +30,7 @@ export const tree: ICollectionTemplate = {
|
||||
onDelete: 'CASCADE',
|
||||
uiSchema: {
|
||||
title: '{{t("Parent")}}',
|
||||
'x-component': 'RecordPicker',
|
||||
'x-component': 'AssociationField',
|
||||
'x-component-props': {
|
||||
// mode: 'tags',
|
||||
multiple: false,
|
||||
@ -50,7 +50,7 @@ export const tree: ICollectionTemplate = {
|
||||
onDelete: 'CASCADE',
|
||||
uiSchema: {
|
||||
title: '{{t("Children")}}',
|
||||
'x-component': 'RecordPicker',
|
||||
'x-component': 'AssociationField',
|
||||
'x-component-props': {
|
||||
// mode: 'tags',
|
||||
multiple: true,
|
||||
|
||||
@ -241,6 +241,7 @@ export default {
|
||||
"Link to": "Link to",
|
||||
"Link to description": "Used to create collection relationships quickly and compatible with most common scenarios. Suitable for non-developer use. When present as a field, it is a drop-down selection used to select records from the target collection. Once created, it will simultaneously generate the associated fields of the current collection in the target collection.",
|
||||
"Sub-table": "Sub-table",
|
||||
"Sub-details":"Sub-details",
|
||||
"System info": "System info",
|
||||
"Created at": "Created at",
|
||||
"Last updated at": "Last updated at",
|
||||
@ -281,12 +282,14 @@ export default {
|
||||
"Display field title": "Display field title",
|
||||
"Field component": "Field component",
|
||||
"Subtable": "Subtable",
|
||||
"Subform": "Subform",
|
||||
"Subform": "Sub-form",
|
||||
"Field mode":"Field mode",
|
||||
"Allow add new data":"Allow add new data",
|
||||
"Record picker": "Record picker",
|
||||
"Toggles the subfield mode": "Toggles the subfield mode",
|
||||
"Selector mode": "Selector mode",
|
||||
"Subtable mode": "Subtable mode",
|
||||
"Subform mode": "Subform mode",
|
||||
"Subform mode": "Sub-form mode",
|
||||
"Edit block title": "Edit block title",
|
||||
"Block title": "Block title",
|
||||
"Pattern": "Pattern",
|
||||
|
||||
@ -556,6 +556,9 @@ export default {
|
||||
"Field component": "フィールドコンポーネント",
|
||||
"Subtable": "サブテーブル",
|
||||
"Subform": "サブフォーム",
|
||||
"Sub-details":"サブリスト",
|
||||
"Field mode":"フィールドコンポーネント",
|
||||
"Allow add new data":"データの追加を許可",
|
||||
"Regular expression": "正規表現",
|
||||
"Enabled languages": "利用可能な言語",
|
||||
"View all plugins": "すべてのプラグラインを見る",
|
||||
|
||||
@ -304,11 +304,14 @@ export default {
|
||||
"Field component": "字段组件",
|
||||
"Subtable": "子表格",
|
||||
"Subform": "子表单",
|
||||
"Sub-details":"子详情",
|
||||
"Record picker": "数据选择器",
|
||||
"Toggles the subfield mode": "切换子字段模式",
|
||||
"Selector mode": "选择器模式",
|
||||
"Subtable mode": "子表格模式",
|
||||
"Subform mode": "子表单模式",
|
||||
"Field mode":"字段组件",
|
||||
"Allow add new data":"允许添加数据",
|
||||
"Edit block title": "编辑区块标题",
|
||||
"Block title": "区块标题",
|
||||
"Pattern": "模式",
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
import { useField, useFieldSchema } from '@formily/react';
|
||||
import React, { useMemo } from 'react';
|
||||
import { useCollectionManager } from '../../../collection-manager';
|
||||
import { AssociationFieldContext } from './context';
|
||||
|
||||
export function AssociationFieldProvider(props) {
|
||||
const field = useField();
|
||||
const { getCollectionField } = useCollectionManager();
|
||||
const fieldSchema = useFieldSchema();
|
||||
const collectionField = useMemo(
|
||||
() => getCollectionField(fieldSchema['x-collection-field']),
|
||||
[fieldSchema['x-collection-field']],
|
||||
);
|
||||
return (
|
||||
<AssociationFieldContext.Provider value={{ options: collectionField, field }}>
|
||||
{props.children}
|
||||
</AssociationFieldContext.Provider>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,122 @@
|
||||
import { LoadingOutlined } from '@ant-design/icons';
|
||||
import { RecursionField, connect, mapProps, observer, useField, useFieldSchema } from '@formily/react';
|
||||
import { Button, Input } from 'antd';
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { CollectionProvider, useCollection } from '../../../collection-manager';
|
||||
import { useFieldTitle } from '../../hooks';
|
||||
import { ActionContext } from '../action';
|
||||
import { RemoteSelect, RemoteSelectProps } from '../remote-select';
|
||||
import useServiceOptions, { useInsertSchema } from './hooks';
|
||||
import schema from './schema';
|
||||
|
||||
export type AssociationSelectProps<P = any> = RemoteSelectProps<P> & {
|
||||
action?: string;
|
||||
multiple?: boolean;
|
||||
};
|
||||
|
||||
const InternalAssociationSelect = observer((props: AssociationSelectProps) => {
|
||||
const { fieldNames, objectValue = true } = props;
|
||||
const field: any = useField();
|
||||
const [visibleAddNewer, setVisibleAddNewer] = useState(false);
|
||||
const { getField } = useCollection();
|
||||
const collectionField = getField(field.props.name);
|
||||
const service = useServiceOptions(props);
|
||||
const fieldSchema = useFieldSchema();
|
||||
const isFilterForm = fieldSchema['x-designer'] === 'FormItem.FilterFormDesigner';
|
||||
const isAllowAddNew = fieldSchema['x-add-new'];
|
||||
const insertAddNewer = useInsertSchema('AddNewer');
|
||||
const { t } = useTranslation();
|
||||
const normalizeValues = useCallback(
|
||||
(obj) => {
|
||||
if (!objectValue && typeof obj === 'object') {
|
||||
return obj[fieldNames?.value];
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
[objectValue, fieldNames?.value],
|
||||
);
|
||||
|
||||
const value = useMemo(() => {
|
||||
if (props.value === undefined || props.value === null || !Object.keys(props.value).length) {
|
||||
return;
|
||||
}
|
||||
if (Array.isArray(props.value)) {
|
||||
return props.value;
|
||||
} else {
|
||||
return props.value;
|
||||
}
|
||||
}, [props.value, normalizeValues]);
|
||||
useEffect(() => {
|
||||
field.value = value;
|
||||
}, []);
|
||||
return (
|
||||
<div key={fieldSchema.name}>
|
||||
<Input.Group compact style={{ display: 'flex' }}>
|
||||
<RemoteSelect
|
||||
style={{ width: '100%' }}
|
||||
{...props}
|
||||
objectValue={objectValue}
|
||||
value={value}
|
||||
service={service}
|
||||
></RemoteSelect>
|
||||
{isAllowAddNew && !field.readPretty && !isFilterForm && (
|
||||
<Button
|
||||
type={'default'}
|
||||
onClick={() => {
|
||||
insertAddNewer(schema.AddNewer);
|
||||
setVisibleAddNewer(true);
|
||||
}}
|
||||
>
|
||||
{t('Add new')}
|
||||
</Button>
|
||||
)}
|
||||
</Input.Group>
|
||||
|
||||
<ActionContext.Provider value={{ openMode: 'drawer', visible: visibleAddNewer, setVisible: setVisibleAddNewer }}>
|
||||
<CollectionProvider name={collectionField.target}>
|
||||
<RecursionField
|
||||
onlyRenderProperties
|
||||
basePath={field.address}
|
||||
schema={fieldSchema}
|
||||
filterProperties={(s) => {
|
||||
return s['x-component'] === 'AssociationField.AddNewer';
|
||||
}}
|
||||
/>
|
||||
</CollectionProvider>
|
||||
</ActionContext.Provider>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
interface AssociationSelectInterface {
|
||||
(props: any): React.ReactElement;
|
||||
Designer: React.FC;
|
||||
FilterDesigner: React.FC;
|
||||
}
|
||||
|
||||
export const AssociationSelect = InternalAssociationSelect as unknown as AssociationSelectInterface;
|
||||
|
||||
export const AssociationSelectReadPretty = connect(
|
||||
(props: any) => {
|
||||
if (props.fieldNames) {
|
||||
const service = useServiceOptions(props);
|
||||
useFieldTitle();
|
||||
return <RemoteSelect.ReadPretty {...props} service={service}></RemoteSelect.ReadPretty>;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
mapProps(
|
||||
{
|
||||
dataSource: 'options',
|
||||
loading: true,
|
||||
},
|
||||
(props, field) => {
|
||||
return {
|
||||
...props,
|
||||
fieldNames: props.fieldNames && { ...props.fieldNames, ...field.componentProps.fieldNames },
|
||||
suffixIcon: field?.['loading'] || field?.['validating'] ? <LoadingOutlined /> : props.suffixIcon,
|
||||
};
|
||||
},
|
||||
),
|
||||
);
|
||||
@ -0,0 +1,63 @@
|
||||
import { observer, useField, useFieldSchema, useForm } from '@formily/react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { AssociationFieldProvider } from './AssociationFieldProvider';
|
||||
import { InternalNester } from './InternalNester';
|
||||
import { InternalPicker } from './InternalPicker';
|
||||
import { AssociationSelect } from './AssociationSelect';
|
||||
import { useAssociationCreateActionProps as useCAP } from '../../../block-provider/hooks';
|
||||
import { useCollection, useCollectionManager } from '../../../collection-manager';
|
||||
import { SchemaComponentOptions } from '../../';
|
||||
import { InternalSubTable } from './InternalSubTable';
|
||||
import { InternalFileManager } from './FileManager';
|
||||
|
||||
export const Editable = observer((props: any) => {
|
||||
useEffect(() => {
|
||||
props.mode && setCurrentMode(props.mode);
|
||||
}, [props.mode]);
|
||||
const { multiple } = props;
|
||||
const field: any = useField();
|
||||
const form = useForm();
|
||||
const fieldSchema = useFieldSchema();
|
||||
const { getField } = useCollection();
|
||||
const { getCollection } = useCollectionManager();
|
||||
const collectionField = getField(field.props.name);
|
||||
const isFileCollection = getCollection(collectionField?.target)?.template === 'file';
|
||||
const [currentMode, setCurrentMode] = useState(props.mode || (isFileCollection ? 'FileManager' : 'Select'));
|
||||
const useCreateActionProps = () => {
|
||||
const { onClick } = useCAP();
|
||||
const actionField: any = useField();
|
||||
return {
|
||||
async onClick() {
|
||||
await onClick();
|
||||
const { data } = actionField.data?.data?.data || {};
|
||||
if (['m2m', 'o2m'].includes(collectionField.interface) && multiple !== false) {
|
||||
const values = JSON.parse(JSON.stringify(form.values[fieldSchema.name] || []));
|
||||
values.push({
|
||||
...data,
|
||||
});
|
||||
setTimeout(() => {
|
||||
form.setValuesIn(field.props.name, values);
|
||||
}, 100);
|
||||
} else {
|
||||
const value = {
|
||||
...data,
|
||||
};
|
||||
setTimeout(() => {
|
||||
form.setValuesIn(field.props.name, value);
|
||||
}, 100);
|
||||
}
|
||||
},
|
||||
};
|
||||
};
|
||||
return (
|
||||
<AssociationFieldProvider>
|
||||
<SchemaComponentOptions scope={{ useCreateActionProps }}>
|
||||
{currentMode === 'Picker' && <InternalPicker {...props} />}
|
||||
{currentMode === 'Nester' && <InternalNester {...props} />}
|
||||
{currentMode === 'Select' && <AssociationSelect {...props} />}
|
||||
{currentMode === 'SubTable' && <InternalSubTable {...props} />}
|
||||
{currentMode === 'FileManager' && <InternalFileManager {...props} />}
|
||||
</SchemaComponentOptions>
|
||||
</AssociationFieldProvider>
|
||||
);
|
||||
});
|
||||
@ -0,0 +1,194 @@
|
||||
import { RecursionField, connect, useField, useFieldSchema } from '@formily/react';
|
||||
import { differenceBy, unionBy } from 'lodash';
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import {
|
||||
FormProvider,
|
||||
RecordPickerContext,
|
||||
RecordPickerProvider,
|
||||
SchemaComponentOptions,
|
||||
useActionContext,
|
||||
} from '../..';
|
||||
import {
|
||||
TableSelectorParamsProvider,
|
||||
useTableSelectorProps as useTsp,
|
||||
} from '../../../block-provider/TableSelectorProvider';
|
||||
import { CollectionProvider, useCollection } from '../../../collection-manager';
|
||||
import { useCompile } from '../../hooks';
|
||||
import { ActionContext } from '../action';
|
||||
import { FileSelector, Preview } from '../preview';
|
||||
import { ReadPrettyInternalViewer } from './InternalViewer';
|
||||
import { useFieldNames, useInsertSchema } from './hooks';
|
||||
import schema from './schema';
|
||||
import { flatData, getLabelFormatValue, isShowFilePicker, useLabelUiSchema } from './util';
|
||||
|
||||
const useTableSelectorProps = () => {
|
||||
const field: any = useField();
|
||||
const {
|
||||
multiple,
|
||||
options = [],
|
||||
setSelectedRows,
|
||||
selectedRows: rcSelectRows = [],
|
||||
onChange,
|
||||
} = useContext(RecordPickerContext);
|
||||
const { onRowSelectionChange, rowKey = 'id', ...others } = useTsp();
|
||||
const { setVisible } = useActionContext();
|
||||
return {
|
||||
...others,
|
||||
rowKey,
|
||||
rowSelection: {
|
||||
type: multiple ? 'checkbox' : 'radio',
|
||||
selectedRowKeys: rcSelectRows
|
||||
?.filter((item) => options.every((row) => row[rowKey] !== item[rowKey]))
|
||||
.map((item) => item[rowKey]),
|
||||
},
|
||||
onRowSelectionChange(selectedRowKeys, selectedRows) {
|
||||
if (multiple) {
|
||||
const scopeRows = flatData(field.value) || [];
|
||||
const allSelectedRows = rcSelectRows || [];
|
||||
const otherRows = differenceBy(allSelectedRows, scopeRows, rowKey);
|
||||
const unionSelectedRows = unionBy(otherRows, selectedRows, rowKey);
|
||||
const unionSelectedRowKeys = unionSelectedRows.map((item) => item[rowKey]);
|
||||
setSelectedRows?.(unionSelectedRows);
|
||||
onRowSelectionChange?.(unionSelectedRowKeys, unionSelectedRows);
|
||||
} else {
|
||||
setSelectedRows?.(selectedRows);
|
||||
onRowSelectionChange?.(selectedRowKeys, selectedRows);
|
||||
onChange(selectedRows?.[0] || null);
|
||||
setVisible(false);
|
||||
}
|
||||
},
|
||||
};
|
||||
};
|
||||
const InternalFileManager = (props) => {
|
||||
const { value, multiple, onChange, quickUpload, selectFile, ...others } = props;
|
||||
const fieldSchema = useFieldSchema();
|
||||
const [visibleSelector, setVisibleSelector] = useState(false);
|
||||
const [selectedRows, setSelectedRows] = useState([]);
|
||||
const insertSelector = useInsertSchema('Selector');
|
||||
const fieldNames = useFieldNames(props);
|
||||
const field: any = useField();
|
||||
const [options, setOptions] = useState([]);
|
||||
const { getField } = useCollection();
|
||||
const collectionField = getField(field.props.name);
|
||||
const labelUiSchema = useLabelUiSchema(collectionField, fieldNames?.label || 'label');
|
||||
const compile = useCompile();
|
||||
const getFilter = () => {
|
||||
const targetKey = collectionField?.targetKey || 'id';
|
||||
const list = options.map((option) => option[targetKey]).filter(Boolean);
|
||||
const filter = list.length ? { $and: [{ [`${targetKey}.$ne`]: list }] } : {};
|
||||
return filter;
|
||||
};
|
||||
const handleSelect = () => {
|
||||
insertSelector(schema.Selector);
|
||||
setVisibleSelector(true);
|
||||
setSelectedRows([]);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (value && Object.keys(value).length > 0) {
|
||||
const opts = (Array.isArray(value) ? value : value ? [value] : []).map((option) => {
|
||||
const label = option[fieldNames.label];
|
||||
return {
|
||||
...option,
|
||||
[fieldNames.label]: getLabelFormatValue(compile(labelUiSchema), compile(label)),
|
||||
};
|
||||
});
|
||||
setOptions(opts);
|
||||
}
|
||||
}, [value, fieldNames?.label]);
|
||||
|
||||
const handleRemove = (file) => {
|
||||
const newOptions = options.filter((option) => option.id !== file.id);
|
||||
setOptions(newOptions);
|
||||
if (newOptions.length === 0) {
|
||||
return onChange(null);
|
||||
}
|
||||
onChange(newOptions);
|
||||
};
|
||||
const pickerProps = {
|
||||
size: 'small',
|
||||
fieldNames,
|
||||
multiple: ['o2m', 'm2m'].includes(collectionField?.interface),
|
||||
association: {
|
||||
target: collectionField?.target,
|
||||
},
|
||||
onChange: props?.onChange,
|
||||
selectedRows,
|
||||
setSelectedRows,
|
||||
collectionField,
|
||||
};
|
||||
const usePickActionProps = () => {
|
||||
const { setVisible } = useActionContext();
|
||||
const { multiple, selectedRows, onChange, options, collectionField } = useContext(RecordPickerContext);
|
||||
return {
|
||||
onClick() {
|
||||
if (multiple) {
|
||||
onChange(unionBy(selectedRows, options, collectionField?.targetKey || 'id'));
|
||||
} else {
|
||||
onChange(selectedRows?.[0] || null);
|
||||
}
|
||||
setVisible(false);
|
||||
},
|
||||
};
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<FileSelector
|
||||
value={options}
|
||||
multiple={multiple}
|
||||
quickUpload={quickUpload !== false}
|
||||
selectFile={selectFile !== false}
|
||||
action={`${collectionField?.target}:create`}
|
||||
onSelect={handleSelect}
|
||||
onRemove={handleRemove}
|
||||
onChange={(changed) => {
|
||||
if (changed.every((file) => file.status !== 'uploading')) {
|
||||
changed = changed.filter((file) => file.status === 'done').map((file) => file.response.data);
|
||||
if (multiple) {
|
||||
onChange([...options, ...changed]);
|
||||
} else {
|
||||
onChange(changed[0]);
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<ActionContext.Provider value={{ openMode: 'drawer', visible: visibleSelector, setVisible: setVisibleSelector }}>
|
||||
<RecordPickerProvider {...pickerProps}>
|
||||
<CollectionProvider name={collectionField.target}>
|
||||
<FormProvider>
|
||||
<TableSelectorParamsProvider params={{ filter: getFilter() }}>
|
||||
<SchemaComponentOptions scope={{ usePickActionProps, useTableSelectorProps }}>
|
||||
<RecursionField
|
||||
onlyRenderProperties
|
||||
basePath={field.address}
|
||||
schema={fieldSchema}
|
||||
filterProperties={(s) => {
|
||||
return s['x-component'] === 'AssociationField.Selector';
|
||||
}}
|
||||
/>
|
||||
</SchemaComponentOptions>
|
||||
</TableSelectorParamsProvider>
|
||||
</FormProvider>
|
||||
</CollectionProvider>
|
||||
</RecordPickerProvider>
|
||||
</ActionContext.Provider>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const FileManageReadPretty = connect((props) => {
|
||||
const field: any = useField();
|
||||
const fieldNames = useFieldNames(props);
|
||||
const { getField } = useCollection();
|
||||
const collectionField = getField(field.props.name);
|
||||
const labelUiSchema = useLabelUiSchema(collectionField, fieldNames?.label || 'label');
|
||||
const showFilePicker = isShowFilePicker(labelUiSchema);
|
||||
|
||||
if (showFilePicker) {
|
||||
return collectionField ? <Preview {...props} fieldNames={fieldNames} /> : null;
|
||||
} else {
|
||||
return <ReadPrettyInternalViewer {...props} />;
|
||||
}
|
||||
});
|
||||
|
||||
export { InternalFileManager, FileManageReadPretty };
|
||||
@ -0,0 +1,30 @@
|
||||
import { FormLayout } from '@formily/antd';
|
||||
import { RecursionField, useField, useFieldSchema } from '@formily/react';
|
||||
import React, { useEffect } from 'react';
|
||||
import { CollectionProvider } from '../../../collection-manager';
|
||||
import { useAssociationFieldContext, useInsertSchema } from './hooks';
|
||||
import schema from './schema';
|
||||
|
||||
export const InternalNester = () => {
|
||||
const field = useField();
|
||||
const fieldSchema = useFieldSchema();
|
||||
const insertNester = useInsertSchema('Nester');
|
||||
const { options } = useAssociationFieldContext();
|
||||
useEffect(() => {
|
||||
insertNester(schema.Nester);
|
||||
}, []);
|
||||
return (
|
||||
<CollectionProvider name={options.target}>
|
||||
<FormLayout layout={'vertical'}>
|
||||
<RecursionField
|
||||
onlyRenderProperties
|
||||
basePath={field.address}
|
||||
schema={fieldSchema}
|
||||
filterProperties={(s) => {
|
||||
return s['x-component'] === 'AssociationField.Nester';
|
||||
}}
|
||||
/>
|
||||
</FormLayout>
|
||||
</CollectionProvider>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,216 @@
|
||||
import { RecursionField, observer, useField, useFieldSchema } from '@formily/react';
|
||||
import { Button, Input, Select } from 'antd';
|
||||
import { differenceBy, unionBy } from 'lodash';
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
FormProvider,
|
||||
RecordPickerContext,
|
||||
RecordPickerProvider,
|
||||
SchemaComponentOptions,
|
||||
useActionContext,
|
||||
} from '../..';
|
||||
import {
|
||||
TableSelectorParamsProvider,
|
||||
useTableSelectorProps as useTsp,
|
||||
} from '../../../block-provider/TableSelectorProvider';
|
||||
import { CollectionProvider, useCollection } from '../../../collection-manager';
|
||||
import { useCompile } from '../../hooks';
|
||||
import { ActionContext } from '../action';
|
||||
import { useFieldNames, useInsertSchema } from './hooks';
|
||||
import schema from './schema';
|
||||
import { flatData, getLabelFormatValue, useLabelUiSchema } from './util';
|
||||
|
||||
const useTableSelectorProps = () => {
|
||||
const field: any = useField();
|
||||
const {
|
||||
multiple,
|
||||
options = [],
|
||||
setSelectedRows,
|
||||
selectedRows: rcSelectRows = [],
|
||||
onChange,
|
||||
} = useContext(RecordPickerContext);
|
||||
const { onRowSelectionChange, rowKey = 'id', ...others } = useTsp();
|
||||
const { setVisible } = useActionContext();
|
||||
return {
|
||||
...others,
|
||||
rowKey,
|
||||
rowSelection: {
|
||||
type: multiple ? 'checkbox' : 'radio',
|
||||
selectedRowKeys: rcSelectRows
|
||||
?.filter((item) => options.every((row) => row[rowKey] !== item[rowKey]))
|
||||
.map((item) => item[rowKey]),
|
||||
},
|
||||
onRowSelectionChange(selectedRowKeys, selectedRows) {
|
||||
if (multiple) {
|
||||
const scopeRows = flatData(field.value) || [];
|
||||
const allSelectedRows = rcSelectRows || [];
|
||||
const otherRows = differenceBy(allSelectedRows, scopeRows, rowKey);
|
||||
const unionSelectedRows = unionBy(otherRows, selectedRows, rowKey);
|
||||
const unionSelectedRowKeys = unionSelectedRows.map((item) => item[rowKey]);
|
||||
setSelectedRows?.(unionSelectedRows);
|
||||
onRowSelectionChange?.(unionSelectedRowKeys, unionSelectedRows);
|
||||
} else {
|
||||
setSelectedRows?.(selectedRows);
|
||||
onRowSelectionChange?.(selectedRowKeys, selectedRows);
|
||||
onChange(selectedRows?.[0] || null);
|
||||
setVisible(false);
|
||||
}
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export const InternalPicker = observer((props: any) => {
|
||||
const { value, multiple, onChange, quickUpload, selectFile, ...others } = props;
|
||||
const field: any = useField();
|
||||
const fieldNames = useFieldNames(props);
|
||||
const [visibleAddNewer, setVisibleAddNewer] = useState(false);
|
||||
const [visibleSelector, setVisibleSelector] = useState(false);
|
||||
const fieldSchema = useFieldSchema();
|
||||
const insertAddNewer = useInsertSchema('AddNewer');
|
||||
const insertSelector = useInsertSchema('Selector');
|
||||
const { getField } = useCollection();
|
||||
const { t } = useTranslation();
|
||||
const collectionField = getField(field.props.name);
|
||||
const addbuttonClick = () => {
|
||||
insertAddNewer(schema.AddNewer);
|
||||
setVisibleAddNewer(true);
|
||||
};
|
||||
const compile = useCompile();
|
||||
const labelUiSchema = useLabelUiSchema(collectionField, fieldNames?.label || 'label');
|
||||
const isAllowAddNew = fieldSchema['x-add-new'];
|
||||
const [selectedRows, setSelectedRows] = useState([]);
|
||||
const [options, setOptions] = useState([]);
|
||||
const pickerProps = {
|
||||
size: 'small',
|
||||
fieldNames,
|
||||
multiple: multiple !== false && ['o2m', 'm2m'].includes(collectionField?.interface),
|
||||
association: {
|
||||
target: collectionField?.target,
|
||||
},
|
||||
options,
|
||||
onChange: props?.onChange,
|
||||
selectedRows,
|
||||
setSelectedRows,
|
||||
collectionField,
|
||||
};
|
||||
useEffect(() => {
|
||||
if (value && Object.keys(value).length > 0) {
|
||||
const opts = (Array.isArray(value) ? value : value ? [value] : []).map((option) => {
|
||||
const label = option[fieldNames.label];
|
||||
return {
|
||||
...option,
|
||||
[fieldNames.label]: getLabelFormatValue(compile(labelUiSchema), compile(label)),
|
||||
};
|
||||
});
|
||||
setOptions(opts);
|
||||
}
|
||||
}, [value, fieldNames?.label]);
|
||||
|
||||
const getValue = () => {
|
||||
if (multiple == null) return null;
|
||||
return Array.isArray(value) ? value?.map((v) => v[fieldNames.value]) : value?.[fieldNames.value];
|
||||
};
|
||||
|
||||
const getFilter = () => {
|
||||
const targetKey = collectionField?.targetKey || 'id';
|
||||
const list = options.map((option) => option[targetKey]).filter(Boolean);
|
||||
const filter = list.length ? { $and: [{ [`${targetKey}.$ne`]: list }] } : {};
|
||||
return filter;
|
||||
};
|
||||
const usePickActionProps = () => {
|
||||
const { setVisible } = useActionContext();
|
||||
const { multiple, selectedRows, onChange, options, collectionField } = useContext(RecordPickerContext);
|
||||
return {
|
||||
onClick() {
|
||||
if (multiple) {
|
||||
onChange(unionBy(selectedRows, options, collectionField?.targetKey || 'id'));
|
||||
} else {
|
||||
onChange(selectedRows?.[0] || null);
|
||||
}
|
||||
setVisible(false);
|
||||
},
|
||||
};
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Input.Group compact style={{ display: 'flex' }}>
|
||||
<div style={{ width: '100%' }}>
|
||||
<Select
|
||||
style={{ width: '100%' }}
|
||||
{...others}
|
||||
mode={multiple ? 'multiple' : props.mode}
|
||||
fieldNames={fieldNames}
|
||||
onDropdownVisibleChange={(open) => {
|
||||
insertSelector(schema.Selector);
|
||||
setVisibleSelector(true);
|
||||
}}
|
||||
allowClear
|
||||
onChange={(changed: any) => {
|
||||
if (!changed) {
|
||||
const value = multiple ? [] : null;
|
||||
onChange(value);
|
||||
setSelectedRows(value);
|
||||
} else if (Array.isArray(changed)) {
|
||||
if (!changed.length) {
|
||||
onChange([]);
|
||||
setSelectedRows([]);
|
||||
return;
|
||||
}
|
||||
const values = options?.filter((option) => changed.includes(option[fieldNames.value]));
|
||||
onChange(values);
|
||||
setSelectedRows(values);
|
||||
}
|
||||
}}
|
||||
options={options}
|
||||
value={getValue()}
|
||||
open={false}
|
||||
/>
|
||||
</div>
|
||||
{isAllowAddNew && (
|
||||
<Button
|
||||
style={{ width: 'auto' }}
|
||||
type={'default'}
|
||||
onClick={() => {
|
||||
addbuttonClick();
|
||||
}}
|
||||
>
|
||||
{t('Add new')}
|
||||
</Button>
|
||||
)}
|
||||
</Input.Group>
|
||||
<ActionContext.Provider value={{ openMode: 'drawer', visible: visibleAddNewer, setVisible: setVisibleAddNewer }}>
|
||||
<CollectionProvider name={collectionField.target}>
|
||||
<RecursionField
|
||||
onlyRenderProperties
|
||||
basePath={field.address}
|
||||
schema={fieldSchema}
|
||||
filterProperties={(s) => {
|
||||
return s['x-component'] === 'AssociationField.AddNewer';
|
||||
}}
|
||||
/>
|
||||
</CollectionProvider>
|
||||
</ActionContext.Provider>
|
||||
<ActionContext.Provider value={{ openMode: 'drawer', visible: visibleSelector, setVisible: setVisibleSelector }}>
|
||||
<RecordPickerProvider {...pickerProps}>
|
||||
<CollectionProvider name={collectionField.target}>
|
||||
<FormProvider>
|
||||
<TableSelectorParamsProvider params={{ filter: getFilter() }}>
|
||||
<SchemaComponentOptions scope={{ usePickActionProps, useTableSelectorProps }}>
|
||||
<RecursionField
|
||||
onlyRenderProperties
|
||||
basePath={field.address}
|
||||
schema={fieldSchema}
|
||||
filterProperties={(s) => {
|
||||
return s['x-component'] === 'AssociationField.Selector';
|
||||
}}
|
||||
/>
|
||||
</SchemaComponentOptions>
|
||||
</TableSelectorParamsProvider>
|
||||
</FormProvider>
|
||||
</CollectionProvider>
|
||||
</RecordPickerProvider>
|
||||
</ActionContext.Provider>
|
||||
</>
|
||||
);
|
||||
});
|
||||
@ -0,0 +1,30 @@
|
||||
import { FormLayout } from '@formily/antd';
|
||||
import { RecursionField, useField, useFieldSchema } from '@formily/react';
|
||||
import React, { useEffect } from 'react';
|
||||
import { CollectionProvider } from '../../../collection-manager';
|
||||
import { useAssociationFieldContext, useInsertSchema } from './hooks';
|
||||
import schema from './schema';
|
||||
|
||||
export const InternalSubTable = () => {
|
||||
const field = useField();
|
||||
const fieldSchema = useFieldSchema();
|
||||
const insert = useInsertSchema('SubTable');
|
||||
const { options } = useAssociationFieldContext();
|
||||
useEffect(() => {
|
||||
insert(schema.SubTable);
|
||||
}, []);
|
||||
return (
|
||||
<CollectionProvider name={options.target}>
|
||||
<FormLayout layout={'vertical'}>
|
||||
<RecursionField
|
||||
onlyRenderProperties
|
||||
basePath={field.address}
|
||||
schema={fieldSchema}
|
||||
filterProperties={(s) => {
|
||||
return s['x-component'] === 'AssociationField.SubTable';
|
||||
}}
|
||||
/>
|
||||
</FormLayout>
|
||||
</CollectionProvider>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,117 @@
|
||||
import { RecursionField, observer, useField, useFieldSchema } from '@formily/react';
|
||||
import { toArr } from '@formily/shared';
|
||||
import React, { Fragment, useRef, useState } from 'react';
|
||||
import { BlockAssociationContext, WithoutTableFieldResource } from '../../../block-provider';
|
||||
import { CollectionProvider, useCollection, useCollectionManager } from '../../../collection-manager';
|
||||
import { RecordProvider, useRecord } from '../../../record-provider';
|
||||
import { FormProvider } from '../../core';
|
||||
import { useCompile } from '../../hooks';
|
||||
import { ActionContext, useActionContext } from '../action';
|
||||
import { EllipsisWithTooltip } from '../input/EllipsisWithTooltip';
|
||||
import { useFieldNames, useInsertSchema } from './hooks';
|
||||
import schema from './schema';
|
||||
import { getLabelFormatValue, useLabelUiSchema } from './util';
|
||||
|
||||
interface IEllipsisWithTooltipRef {
|
||||
setPopoverVisible: (boolean) => void;
|
||||
}
|
||||
|
||||
const toValue = (value, placeholder) => {
|
||||
if (value === null || value === undefined) {
|
||||
return placeholder;
|
||||
}
|
||||
return value;
|
||||
};
|
||||
export const ReadPrettyInternalViewer: React.FC = observer((props: any) => {
|
||||
const fieldSchema = useFieldSchema();
|
||||
const recordCtx = useRecord();
|
||||
const { enableLink } = fieldSchema['x-component-props'];
|
||||
const { getCollectionJoinField } = useCollectionManager();
|
||||
// value 做了转换，但 props.value 和原来 useField().value 的值不一致
|
||||
const field = useField();
|
||||
const fieldNames = useFieldNames(props);
|
||||
const [visible, setVisible] = useState(false);
|
||||
const insertViewer = useInsertSchema('Viewer');
|
||||
const { getField } = useCollection();
|
||||
const collectionField = getField(fieldSchema.name) || getCollectionJoinField(fieldSchema?.['x-collection-field']);
|
||||
const [record, setRecord] = useState({});
|
||||
const compile = useCompile();
|
||||
const labelUiSchema = useLabelUiSchema(collectionField, fieldNames?.label || 'label');
|
||||
const { snapshot } = useActionContext();
|
||||
const ellipsisWithTooltipRef = useRef<IEllipsisWithTooltipRef>();
|
||||
|
||||
const renderRecords = () =>
|
||||
toArr(props.value).map((record, index, arr) => {
|
||||
const val = toValue(compile(record?.[fieldNames?.label || 'label']), 'N/A');
|
||||
const text = getLabelFormatValue(compile(labelUiSchema), val, true);
|
||||
return (
|
||||
<Fragment key={`${record.id}_${index}`}>
|
||||
<span>
|
||||
{snapshot ? (
|
||||
text
|
||||
) : enableLink !== false ? (
|
||||
<a
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
insertViewer(schema.Viewer);
|
||||
setVisible(true);
|
||||
setRecord(record);
|
||||
ellipsisWithTooltipRef?.current?.setPopoverVisible(false);
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</a>
|
||||
) : (
|
||||
text
|
||||
)}
|
||||
</span>
|
||||
{index < arr.length - 1 ? <span style={{ marginRight: 4, color: '#aaa' }}>,</span> : null}
|
||||
</Fragment>
|
||||
);
|
||||
});
|
||||
|
||||
const renderWithoutTableFieldResourceProvider = () => (
|
||||
<WithoutTableFieldResource.Provider value={true}>
|
||||
<FormProvider>
|
||||
<RecursionField
|
||||
schema={fieldSchema}
|
||||
onlyRenderProperties
|
||||
basePath={field.address}
|
||||
filterProperties={(s) => {
|
||||
return s['x-component'] === 'AssociationField.Viewer';
|
||||
}}
|
||||
/>
|
||||
</FormProvider>
|
||||
</WithoutTableFieldResource.Provider>
|
||||
);
|
||||
|
||||
const renderRecordProvider = () => {
|
||||
const collectionFieldNames = fieldSchema?.['x-collection-field']?.split('.');
|
||||
|
||||
return collectionFieldNames && collectionFieldNames.length > 2 ? (
|
||||
<RecordProvider record={recordCtx[collectionFieldNames[1]]}>
|
||||
<RecordProvider record={record}>{renderWithoutTableFieldResourceProvider()}</RecordProvider>
|
||||
</RecordProvider>
|
||||
) : (
|
||||
<RecordProvider record={record}>{renderWithoutTableFieldResourceProvider()}</RecordProvider>
|
||||
);
|
||||
};
|
||||
|
||||
return collectionField ? (
|
||||
<div>
|
||||
<BlockAssociationContext.Provider value={`${collectionField.collectionName}.${collectionField.name}`}>
|
||||
<CollectionProvider name={collectionField.target ?? collectionField.targetCollection}>
|
||||
<EllipsisWithTooltip ellipsis={true} ref={ellipsisWithTooltipRef}>
|
||||
{renderRecords()}
|
||||
</EllipsisWithTooltip>
|
||||
<ActionContext.Provider
|
||||
value={{ visible, setVisible, openMode: 'drawer', snapshot: collectionField.interface === 'snapshot' }}
|
||||
>
|
||||
{renderRecordProvider()}
|
||||
</ActionContext.Provider>
|
||||
</CollectionProvider>
|
||||
</BlockAssociationContext.Provider>
|
||||
</div>
|
||||
) : null;
|
||||
});
|
||||
@ -0,0 +1,76 @@
|
||||
import { ArrayField } from '@formily/core';
|
||||
import { RecursionField, observer, useFieldSchema } from '@formily/react';
|
||||
import { Button, Card, Divider } from 'antd';
|
||||
import { CloseCircleOutlined } from '@ant-design/icons';
|
||||
import React, { useContext } from 'react';
|
||||
import { AssociationFieldContext } from './context';
|
||||
import { useAssociationFieldContext } from './hooks';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
// import { useRemoveActionProps } from '../../../block-provider/hooks';
|
||||
|
||||
export const Nester = (props) => {
|
||||
const { options } = useContext(AssociationFieldContext);
|
||||
if (['hasOne', 'belongsTo'].includes(options.type)) {
|
||||
return <ToOneNester {...props} />;
|
||||
}
|
||||
if (['hasMany', 'belongsToMany'].includes(options.type)) {
|
||||
return <ToManyNester {...props} />;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const ToOneNester = (props) => {
|
||||
return <Card bordered={true}>{props.children}</Card>;
|
||||
};
|
||||
|
||||
const toArr = (value) => {
|
||||
if (!value) {
|
||||
return [];
|
||||
}
|
||||
if (Array.isArray(value)) {
|
||||
return value;
|
||||
}
|
||||
return [value];
|
||||
};
|
||||
|
||||
const ToManyNester = observer((props) => {
|
||||
const fieldSchema = useFieldSchema();
|
||||
const { field } = useAssociationFieldContext<ArrayField>();
|
||||
const values = toArr(field.value);
|
||||
const { t } = useTranslation();
|
||||
// const { onClick } = useRemoveActionProps(`${collectionField.collectionName}.${collectionField.target}`);
|
||||
return (
|
||||
<Card bordered={true} style={{ position: 'relative' }}>
|
||||
{values.map((value, index) => {
|
||||
return (
|
||||
<>
|
||||
{!field.readPretty && (
|
||||
<div style={{ textAlign: 'right' }}>
|
||||
<CloseCircleOutlined
|
||||
style={{ zIndex: 1000, position: 'absolute', color: '#a8a3a3' }}
|
||||
onClick={() => {
|
||||
field.value.splice(index, 1);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<RecursionField onlyRenderProperties basePath={field.address.concat(index)} schema={fieldSchema} />
|
||||
<Divider />
|
||||
</>
|
||||
);
|
||||
})}
|
||||
{field.editable && (
|
||||
<Button
|
||||
type={'dashed'}
|
||||
block
|
||||
onClick={() => {
|
||||
field.value = field.value || [];
|
||||
field.value.push({});
|
||||
}}
|
||||
>
|
||||
{t('Add new')}
|
||||
</Button>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
});
|
||||
@ -0,0 +1,28 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useField, observer } from '@formily/react';
|
||||
import { AssociationFieldProvider } from './AssociationFieldProvider';
|
||||
import { InternalNester } from './InternalNester';
|
||||
import { ReadPrettyInternalViewer } from './InternalViewer';
|
||||
import { useCollection, useCollectionManager } from '../../../collection-manager';
|
||||
import { InternalSubTable } from './InternalSubTable';
|
||||
import { FileManageReadPretty } from './FileManager';
|
||||
|
||||
export const ReadPretty = observer((props: any) => {
|
||||
const field: any = useField();
|
||||
const { getField } = useCollection();
|
||||
const { getCollection } = useCollectionManager();
|
||||
const collectionField = getField(field.props.name);
|
||||
const isFileCollection = getCollection(collectionField?.target)?.template === 'file';
|
||||
const [currentMode, setCurrentMode] = useState(props.mode || (isFileCollection ? 'FileManager' : 'Select'));
|
||||
useEffect(() => {
|
||||
props.mode && setCurrentMode(props.mode);
|
||||
}, [props.mode]);
|
||||
return (
|
||||
<AssociationFieldProvider>
|
||||
{['Select', 'Picker'].includes(currentMode) && <ReadPrettyInternalViewer {...props} />}
|
||||
{currentMode === 'Nester' && <InternalNester {...props} />}
|
||||
{currentMode === 'SubTable' && <InternalSubTable {...props} />}
|
||||
{currentMode === 'FileManager' && <FileManageReadPretty {...props} />}
|
||||
</AssociationFieldProvider>
|
||||
);
|
||||
});
|
||||
@ -0,0 +1,28 @@
|
||||
import { ArrayField } from '@formily/core';
|
||||
import { observer } from '@formily/react';
|
||||
import { Button } from 'antd';
|
||||
import React from 'react';
|
||||
import { Table } from '../table-v2/Table';
|
||||
import { useAssociationFieldContext } from './hooks';
|
||||
|
||||
export const SubTable: any = observer((props) => {
|
||||
const { field } = useAssociationFieldContext<ArrayField>();
|
||||
return (
|
||||
<div>
|
||||
<Table size={'small'} showIndex field={field} pagination={false} />
|
||||
{field.editable && (
|
||||
<Button
|
||||
type={'dashed'}
|
||||
block
|
||||
style={{ marginTop: 12 }}
|
||||
onClick={() => {
|
||||
field.value = field.value || [];
|
||||
field.value.push({});
|
||||
}}
|
||||
>
|
||||
Add new
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@ -0,0 +1,9 @@
|
||||
import { GeneralField } from '@formily/core';
|
||||
import { createContext } from 'react';
|
||||
|
||||
export interface AssociationFieldContextProps {
|
||||
options: any;
|
||||
field: GeneralField;
|
||||
}
|
||||
|
||||
export const AssociationFieldContext = createContext<AssociationFieldContextProps>(null);
|
||||
@ -0,0 +1,119 @@
|
||||
import { GeneralField } from '@formily/core';
|
||||
import { useFieldSchema } from '@formily/react';
|
||||
import cloneDeep from 'lodash/cloneDeep';
|
||||
import { useCallback, useContext, useMemo } from 'react';
|
||||
import { useDesignable } from '../../hooks';
|
||||
import { mergeFilter } from '../../../block-provider/SharedFilterProvider';
|
||||
import { AssociationFieldContext } from './context';
|
||||
import { useRecord } from '../../../record-provider';
|
||||
import { isInFilterFormBlock } from '../../../filter-provider';
|
||||
import { useCollection, useCollectionManager } from '../../../collection-manager';
|
||||
|
||||
export const useInsertSchema = (component) => {
|
||||
const fieldSchema = useFieldSchema();
|
||||
const { insertAfterBegin } = useDesignable();
|
||||
const insert = useCallback(
|
||||
(ss) => {
|
||||
const schema = fieldSchema.reduceProperties((buf, s) => {
|
||||
if (s['x-component'] === 'AssociationField.' + component) {
|
||||
return s;
|
||||
}
|
||||
return buf;
|
||||
}, null);
|
||||
if (!schema) {
|
||||
insertAfterBegin(cloneDeep(ss));
|
||||
}
|
||||
},
|
||||
[component],
|
||||
);
|
||||
return insert;
|
||||
};
|
||||
|
||||
export function useAssociationFieldContext<F extends GeneralField>() {
|
||||
return useContext(AssociationFieldContext) as { options: any; field: F };
|
||||
}
|
||||
|
||||
export default function useServiceOptions(props) {
|
||||
const { action = 'list', service, fieldNames } = props;
|
||||
const params = service?.params || {};
|
||||
const fieldSchema = useFieldSchema();
|
||||
const { getField, fields } = useCollection();
|
||||
const { getCollectionFields } = useCollectionManager();
|
||||
const record = useRecord();
|
||||
|
||||
const normalizeValues = useCallback(
|
||||
(obj) => {
|
||||
if (obj && typeof obj === 'object') {
|
||||
return obj[fieldNames?.value];
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
[fieldNames?.value],
|
||||
);
|
||||
|
||||
const value = useMemo(() => {
|
||||
if (props.value === undefined || props.value === null) {
|
||||
return;
|
||||
}
|
||||
if (Array.isArray(props.value)) {
|
||||
return props.value.map(normalizeValues);
|
||||
} else {
|
||||
return [normalizeValues(props.value)];
|
||||
}
|
||||
}, [props.value, normalizeValues]);
|
||||
|
||||
const collectionField = useMemo(() => {
|
||||
return getField(fieldSchema.name);
|
||||
}, [fieldSchema.name]);
|
||||
const sourceValue = record?.[collectionField?.sourceKey];
|
||||
const filter = useMemo(() => {
|
||||
const isOToAny = ['oho', 'o2m'].includes(collectionField?.interface);
|
||||
return mergeFilter(
|
||||
[
|
||||
mergeFilter([
|
||||
isOToAny && !isInFilterFormBlock(fieldSchema)
|
||||
? {
|
||||
[collectionField.foreignKey]: {
|
||||
$is: null,
|
||||
},
|
||||
}
|
||||
: null,
|
||||
params?.filter,
|
||||
]),
|
||||
isOToAny && sourceValue !== undefined && sourceValue !== null && !isInFilterFormBlock(fieldSchema)
|
||||
? {
|
||||
[collectionField.foreignKey]: {
|
||||
$eq: sourceValue,
|
||||
},
|
||||
}
|
||||
: null,
|
||||
params?.filter && value
|
||||
? {
|
||||
[fieldNames?.value]: {
|
||||
['$in']: value,
|
||||
},
|
||||
}
|
||||
: null,
|
||||
],
|
||||
'$or',
|
||||
);
|
||||
}, [params?.filter, getCollectionFields, collectionField, sourceValue, value, fieldNames?.value]);
|
||||
|
||||
return useMemo(() => {
|
||||
return {
|
||||
resource: collectionField?.target,
|
||||
action,
|
||||
...service,
|
||||
params: { ...service?.params, filter },
|
||||
};
|
||||
}, [collectionField?.target, action, filter, service]);
|
||||
}
|
||||
|
||||
export const useFieldNames = (props) => {
|
||||
const fieldSchema = useFieldSchema();
|
||||
const fieldNames =
|
||||
fieldSchema['x-component-props']?.['field']?.['uiSchema']?.['x-component-props']?.['fieldNames'] ||
|
||||
fieldSchema?.['x-component-props']?.['fieldNames'] ||
|
||||
props.fieldNames;
|
||||
return { label: 'label', value: 'value', ...fieldNames };
|
||||
};
|
||||
@ -0,0 +1,16 @@
|
||||
import { connect, mapReadPretty } from '@formily/react';
|
||||
import { Action } from '../action';
|
||||
import { Editable } from './Editable';
|
||||
import { InternalPicker } from './InternalPicker';
|
||||
import { Nester } from './Nester';
|
||||
import { ReadPretty } from './ReadPretty';
|
||||
import { SubTable } from './SubTable';
|
||||
|
||||
export const AssociationField: any = connect(Editable, mapReadPretty(ReadPretty));
|
||||
|
||||
AssociationField.SubTable = SubTable;
|
||||
AssociationField.Nester = Nester;
|
||||
AssociationField.AddNewer = Action.Container;
|
||||
AssociationField.Selector = Action.Container;
|
||||
AssociationField.Viewer = Action.Container;
|
||||
AssociationField.InternalSelect = InternalPicker;
|
||||
@ -0,0 +1,141 @@
|
||||
export default {
|
||||
Nester: {
|
||||
type: 'void',
|
||||
'x-component': 'AssociationField.Nester',
|
||||
properties: {
|
||||
grid: {
|
||||
type: 'void',
|
||||
'x-component': 'Grid',
|
||||
'x-initializer': 'FormItemInitializers',
|
||||
},
|
||||
},
|
||||
},
|
||||
AddNewer: {
|
||||
type: 'void',
|
||||
'x-component': 'AssociationField.AddNewer',
|
||||
'x-action': 'create',
|
||||
title: '{{ t("Add record") }}',
|
||||
'x-component-props': {
|
||||
className: 'nb-action-popup',
|
||||
},
|
||||
properties: {
|
||||
tabs: {
|
||||
type: 'void',
|
||||
'x-component': 'Tabs',
|
||||
'x-component-props': {},
|
||||
'x-initializer': 'TabPaneInitializersForCreateFormBlock',
|
||||
properties: {
|
||||
tab1: {
|
||||
type: 'void',
|
||||
title: '{{t("Add new")}}',
|
||||
'x-component': 'Tabs.TabPane',
|
||||
'x-designer': 'Tabs.Designer',
|
||||
'x-component-props': {},
|
||||
properties: {
|
||||
grid: {
|
||||
type: 'void',
|
||||
'x-component': 'Grid',
|
||||
'x-initializer': 'CreateFormBlockInitializers',
|
||||
properties: {},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
Selector: {
|
||||
type: 'void',
|
||||
'x-component': 'AssociationField.Selector',
|
||||
title: '{{ t("Select record") }}',
|
||||
'x-component-props': {
|
||||
className: 'nb-record-picker-selector',
|
||||
},
|
||||
properties: {
|
||||
grid: {
|
||||
type: 'void',
|
||||
'x-component': 'Grid',
|
||||
'x-initializer': 'TableSelectorInitializers',
|
||||
properties: {},
|
||||
},
|
||||
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 }}',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
Viewer: {
|
||||
type: 'void',
|
||||
title: '{{ t("View record") }}',
|
||||
'x-component': 'AssociationField.Viewer',
|
||||
'x-component-props': {
|
||||
className: 'nb-action-popup',
|
||||
},
|
||||
properties: {
|
||||
tabs: {
|
||||
type: 'void',
|
||||
'x-component': 'Tabs',
|
||||
'x-component-props': {},
|
||||
'x-initializer': 'TabPaneInitializers',
|
||||
properties: {
|
||||
tab1: {
|
||||
type: 'void',
|
||||
title: '{{t("Details")}}',
|
||||
'x-component': 'Tabs.TabPane',
|
||||
'x-designer': 'Tabs.Designer',
|
||||
'x-component-props': {},
|
||||
properties: {
|
||||
grid: {
|
||||
type: 'void',
|
||||
'x-component': 'Grid',
|
||||
'x-initializer': 'RecordBlockInitializers',
|
||||
properties: {},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
SubTable: {
|
||||
type: 'void',
|
||||
'x-component': 'AssociationField.SubTable',
|
||||
'x-initializer': 'TableColumnInitializers',
|
||||
properties: {
|
||||
indexCol: {
|
||||
type: 'void',
|
||||
'x-component': 'TableV2.Column',
|
||||
'x-component-props': {
|
||||
width: 80,
|
||||
},
|
||||
properties: {
|
||||
__index__: {
|
||||
type: 'void',
|
||||
'x-component': 'TableV2.Index',
|
||||
'x-read-pretty': true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,73 @@
|
||||
import { ISchema } from '@formily/react';
|
||||
import { isArr } from '@formily/shared';
|
||||
import { getDefaultFormat, str2moment } from '@nocobase/utils/client';
|
||||
import { Tag } from 'antd';
|
||||
import moment from 'moment';
|
||||
import React from 'react';
|
||||
import { CollectionFieldOptions, useCollectionManager } from '../../../collection-manager';
|
||||
|
||||
export const useLabelUiSchema = (collectionField: CollectionFieldOptions, label: string): ISchema => {
|
||||
const { getCollectionJoinField } = useCollectionManager();
|
||||
if (!collectionField) {
|
||||
return;
|
||||
}
|
||||
const labelField = getCollectionJoinField(`${collectionField.target}.${label}`) as CollectionFieldOptions;
|
||||
return labelField?.uiSchema;
|
||||
};
|
||||
|
||||
export const getDatePickerLabels = (props): string => {
|
||||
const format = getDefaultFormat(props) as string;
|
||||
const m = str2moment(props.value, props) as moment.Moment;
|
||||
const labels = m && m.isValid() ? m.format(format) : props.value;
|
||||
return isArr(labels) ? labels.join('~') : labels;
|
||||
};
|
||||
|
||||
const toArr = (v) => {
|
||||
if (!v) {
|
||||
return [];
|
||||
}
|
||||
return Array.isArray(v) ? v : [v];
|
||||
};
|
||||
|
||||
export const getLabelFormatValue = (labelUiSchema: ISchema, value: any, isTag = false): any => {
|
||||
const options = labelUiSchema?.enum;
|
||||
if (Array.isArray(options) && value) {
|
||||
const values = toArr(value).map((val) => {
|
||||
const opt: any = options.find((option: any) => option.value === val);
|
||||
if (isTag) {
|
||||
return React.createElement(Tag, { color: opt?.color }, opt?.label);
|
||||
}
|
||||
return opt?.label;
|
||||
});
|
||||
return isTag ? values : values.join(', ');
|
||||
}
|
||||
switch (labelUiSchema?.['x-component']) {
|
||||
case 'DatePicker':
|
||||
return getDatePickerLabels({ ...labelUiSchema?.['x-component-props'], value });
|
||||
default:
|
||||
return value;
|
||||
}
|
||||
};
|
||||
|
||||
export function flatData(data) {
|
||||
const newArr = [];
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const children = data[i]['children'];
|
||||
if (Array.isArray(children)) {
|
||||
newArr.push(...flatData(children));
|
||||
}
|
||||
newArr.push({ ...data[i] });
|
||||
}
|
||||
return newArr;
|
||||
}
|
||||
|
||||
export function isShowFilePicker(labelUiSchema) {
|
||||
return labelUiSchema?.['x-component'] === 'Preview';
|
||||
}
|
||||
|
||||
export const toValue = (value, placeholder) => {
|
||||
if (value === null || value === undefined) {
|
||||
return placeholder;
|
||||
}
|
||||
return value;
|
||||
};
|
||||
@ -1,5 +1,5 @@
|
||||
import { css } from '@emotion/css';
|
||||
import { ArrayCollapse, FormLayout, FormItem as Item } from '@formily/antd';
|
||||
import { ArrayCollapse, FormLayout, FormItem as Item, ArrayItems } from '@formily/antd';
|
||||
import { Field } from '@formily/core';
|
||||
import { ISchema, Schema, observer, useField, useFieldSchema } from '@formily/react';
|
||||
import { uid } from '@formily/shared';
|
||||
@ -9,13 +9,22 @@ import React, { useContext, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { ACLCollectionFieldProvider } from '../../../acl/ACLProvider';
|
||||
import { BlockRequestContext, useFilterByTk, useFormBlockContext } from '../../../block-provider';
|
||||
import { Collection, CollectionFieldOptions, useCollection, useCollectionManager } from '../../../collection-manager';
|
||||
import {
|
||||
Collection,
|
||||
CollectionFieldOptions,
|
||||
useCollection,
|
||||
useCollectionManager,
|
||||
useSortFields,
|
||||
useCollectionFilterOptions,
|
||||
} from '../../../collection-manager';
|
||||
import { isTitleField } from '../../../collection-manager/Configuration/CollectionFields';
|
||||
import { GeneralSchemaDesigner, SchemaSettings, isPatternDisabled, isShowDefaultValue } from '../../../schema-settings';
|
||||
import { VariableInput } from '../../../schema-settings/VariableInput/VariableInput';
|
||||
import { FilterDynamicComponent } from '../table-v2/FilterDynamicComponent';
|
||||
import { isVariable, parseVariables, useVariablesCtx } from '../../common/utils/uitls';
|
||||
import { SchemaComponent } from '../../core';
|
||||
import { useCompile, useDesignable, useFieldComponentOptions } from '../../hooks';
|
||||
import { removeNullCondition } from '../filter';
|
||||
import { useCompile, useDesignable, useFieldModeOptions } from '../../hooks';
|
||||
import { BlockItem } from '../block-item';
|
||||
import { HTMLEncode } from '../input/shared';
|
||||
import { isInvariable } from '../variable';
|
||||
@ -98,7 +107,6 @@ FormItem.Designer = function Designer() {
|
||||
const { dn, refresh, insertAdjacent } = useDesignable();
|
||||
const compile = useCompile();
|
||||
const variablesCtx = useVariablesCtx();
|
||||
|
||||
const collectionField = getField(fieldSchema['name']) || getCollectionJoinField(fieldSchema['x-collection-field']);
|
||||
const targetCollection = getCollection(collectionField?.target);
|
||||
const interfaceConfig = getInterface(collectionField?.interface);
|
||||
@ -107,8 +115,10 @@ FormItem.Designer = function Designer() {
|
||||
const targetFields = collectionField?.target
|
||||
? getCollectionFields(collectionField?.target)
|
||||
: getCollectionFields(collectionField?.targetCollection) ?? [];
|
||||
const fieldComponentOptions = useFieldComponentOptions();
|
||||
const isSubFormAssociationField = field.address.segments.includes('__form_grid');
|
||||
const fieldModeOptions = useFieldModeOptions();
|
||||
const isAssociationField = ['belongsTo', 'hasOne', 'hasMany', 'belongsToMany'].includes(collectionField?.type);
|
||||
const isTableField = fieldSchema['x-component'] === 'TableField';
|
||||
const isFileField = isFileCollection(targetCollection);
|
||||
const initialValue = {
|
||||
title: field.title === originalTitle ? undefined : field.title,
|
||||
};
|
||||
@ -131,6 +141,23 @@ FormItem.Designer = function Designer() {
|
||||
if (fieldSchema['x-read-pretty'] === true) {
|
||||
readOnlyMode = 'read-pretty';
|
||||
}
|
||||
const dataSource = useCollectionFilterOptions(collectionField?.target);
|
||||
const defaultFilter = field.componentProps?.service?.params?.filter || {};
|
||||
const sortFields = useSortFields(collectionField?.target);
|
||||
const defaultSort = field.componentProps?.service?.params?.sort || [];
|
||||
const fieldMode = field?.componentProps?.['mode'] || (isFileField ? 'FileManager' : 'Select');
|
||||
const isSelectFieldMode = fieldMode === 'Select';
|
||||
const sort = defaultSort?.map((item: string) => {
|
||||
return item.startsWith('-')
|
||||
? {
|
||||
field: item.substring(1),
|
||||
direction: 'desc',
|
||||
}
|
||||
: {
|
||||
field: item,
|
||||
direction: 'asc',
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<GeneralSchemaDesigner>
|
||||
@ -252,11 +279,11 @@ FormItem.Designer = function Designer() {
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{!form?.readPretty && isFileCollection(targetCollection) ? (
|
||||
{!form?.readPretty && isFileField ? (
|
||||
<SchemaSettings.SwitchItem
|
||||
key="quick-upload"
|
||||
title={t('Quick upload')}
|
||||
checked={fieldSchema['x-component-props']?.quickUpload as boolean}
|
||||
checked={fieldSchema['x-component-props']?.quickUpload !== (false as boolean)}
|
||||
onChange={(value) => {
|
||||
const schema = {
|
||||
['x-uid']: fieldSchema['x-uid'],
|
||||
@ -272,11 +299,11 @@ FormItem.Designer = function Designer() {
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
{!form?.readPretty && isFileCollection(targetCollection) ? (
|
||||
{!form?.readPretty && isFileField ? (
|
||||
<SchemaSettings.SwitchItem
|
||||
key="select-file"
|
||||
title={t('Select file')}
|
||||
checked={fieldSchema['x-component-props']?.selectFile as boolean}
|
||||
checked={fieldSchema['x-component-props']?.selectFile !== (false as boolean)}
|
||||
onChange={(value) => {
|
||||
const schema = {
|
||||
['x-uid']: fieldSchema['x-uid'],
|
||||
@ -508,51 +535,177 @@ FormItem.Designer = function Designer() {
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{form && !isSubFormAssociationField && fieldComponentOptions && (
|
||||
<SchemaSettings.SelectItem
|
||||
title={t('Field component')}
|
||||
options={fieldComponentOptions}
|
||||
value={fieldSchema['x-component']}
|
||||
onChange={(type) => {
|
||||
const schema: ISchema = {
|
||||
name: collectionField?.name,
|
||||
type: 'void',
|
||||
required: fieldSchema['required'],
|
||||
description: fieldSchema['description'],
|
||||
default: fieldSchema['default'],
|
||||
'x-decorator': 'FormItem',
|
||||
'x-designer': 'FormItem.Designer',
|
||||
'x-component': type,
|
||||
'x-validator': fieldSchema['x-validator'],
|
||||
'x-collection-field': fieldSchema['x-collection-field'],
|
||||
'x-decorator-props': fieldSchema['x-decorator-props'],
|
||||
'x-component-props': {
|
||||
...collectionField?.uiSchema?.['x-component-props'],
|
||||
...fieldSchema['x-component-props'],
|
||||
},
|
||||
};
|
||||
|
||||
interfaceConfig?.schemaInitialize?.(schema, {
|
||||
field: collectionField,
|
||||
block: 'Form',
|
||||
readPretty: field.readPretty,
|
||||
action: tk ? 'get' : null,
|
||||
targetCollection,
|
||||
});
|
||||
|
||||
insertAdjacent('beforeBegin', divWrap(schema), {
|
||||
onSuccess: () => {
|
||||
dn.remove(null, {
|
||||
removeParentsIfNoChildren: true,
|
||||
breakRemoveOn: {
|
||||
'x-component': 'Grid',
|
||||
{isSelectFieldMode && !field.readPretty && (
|
||||
<SchemaSettings.ModalItem
|
||||
title={t('Set the data scope')}
|
||||
schema={
|
||||
{
|
||||
type: 'object',
|
||||
title: t('Set the data scope'),
|
||||
properties: {
|
||||
filter: {
|
||||
default: defaultFilter,
|
||||
// title: '数据范围',
|
||||
enum: dataSource,
|
||||
'x-component': 'Filter',
|
||||
'x-component-props': {
|
||||
dynamicComponent: (props) => FilterDynamicComponent({ ...props }),
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
} as ISchema
|
||||
}
|
||||
onSubmit={({ filter }) => {
|
||||
filter = removeNullCondition(filter);
|
||||
_.set(field.componentProps, 'service.params.filter', filter);
|
||||
fieldSchema['x-component-props'] = field.componentProps;
|
||||
field.componentProps = field.componentProps;
|
||||
dn.emit('patch', {
|
||||
schema: {
|
||||
['x-uid']: fieldSchema['x-uid'],
|
||||
'x-component-props': field.componentProps,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{isSelectFieldMode && !field.readPretty && (
|
||||
<SchemaSettings.ModalItem
|
||||
title={t('Set default sorting rules')}
|
||||
components={{ ArrayItems }}
|
||||
schema={
|
||||
{
|
||||
type: 'object',
|
||||
title: t('Set default sorting rules'),
|
||||
properties: {
|
||||
sort: {
|
||||
type: 'array',
|
||||
default: sort,
|
||||
'x-component': 'ArrayItems',
|
||||
'x-decorator': 'FormItem',
|
||||
items: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
space: {
|
||||
type: 'void',
|
||||
'x-component': 'Space',
|
||||
properties: {
|
||||
sort: {
|
||||
type: 'void',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'ArrayItems.SortHandle',
|
||||
},
|
||||
field: {
|
||||
type: 'string',
|
||||
enum: sortFields,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Select',
|
||||
'x-component-props': {
|
||||
style: {
|
||||
width: 260,
|
||||
},
|
||||
},
|
||||
},
|
||||
direction: {
|
||||
type: 'string',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Radio.Group',
|
||||
'x-component-props': {
|
||||
optionType: 'button',
|
||||
},
|
||||
enum: [
|
||||
{
|
||||
label: t('ASC'),
|
||||
value: 'asc',
|
||||
},
|
||||
{
|
||||
label: t('DESC'),
|
||||
value: 'desc',
|
||||
},
|
||||
],
|
||||
},
|
||||
remove: {
|
||||
type: 'void',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'ArrayItems.Remove',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
add: {
|
||||
type: 'void',
|
||||
title: t('Add sort field'),
|
||||
'x-component': 'ArrayItems.Addition',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
} as ISchema
|
||||
}
|
||||
onSubmit={({ sort }) => {
|
||||
const sortArr = sort.map((item) => {
|
||||
return item.direction === 'desc' ? `-${item.field}` : item.field;
|
||||
});
|
||||
|
||||
_.set(field.componentProps, 'service.params.sort', sortArr);
|
||||
fieldSchema['x-component-props'] = field.componentProps;
|
||||
dn.emit('patch', {
|
||||
schema: {
|
||||
['x-uid']: fieldSchema['x-uid'],
|
||||
'x-component-props': field.componentProps,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{isAssociationField && fieldModeOptions && !isTableField && (
|
||||
<SchemaSettings.SelectItem
|
||||
key="field-mode"
|
||||
title={t('Field mode')}
|
||||
options={fieldModeOptions}
|
||||
value={fieldMode}
|
||||
onChange={(mode) => {
|
||||
const schema = {
|
||||
['x-uid']: fieldSchema['x-uid'],
|
||||
};
|
||||
fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
|
||||
fieldSchema['x-component-props']['mode'] = mode;
|
||||
schema['x-component-props'] = fieldSchema['x-component-props'];
|
||||
field.componentProps = field.componentProps || {};
|
||||
field.componentProps.mode = mode;
|
||||
if (mode === 'Nester') {
|
||||
const initValue = ['o2m', 'm2m'].includes(collectionField.interface) ? [] : {};
|
||||
field.value = field.value || initValue;
|
||||
}
|
||||
dn.emit('patch', {
|
||||
schema,
|
||||
});
|
||||
dn.refresh();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{!field.readPretty && isAssociationField && ['Select', 'Picker'].includes(fieldMode) && (
|
||||
<SchemaSettings.SwitchItem
|
||||
key="allowAddNew"
|
||||
title={t('Allow add new data')}
|
||||
checked={fieldSchema['x-add-new'] as boolean}
|
||||
onChange={(allowAddNew) => {
|
||||
const schema = {
|
||||
['x-uid']: fieldSchema['x-uid'],
|
||||
};
|
||||
field['x-add-new'] = allowAddNew;
|
||||
fieldSchema['x-add-new'] = allowAddNew;
|
||||
schema['x-add-new'] = allowAddNew;
|
||||
dn.emit('patch', {
|
||||
schema,
|
||||
});
|
||||
refresh();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{form &&
|
||||
!form?.readPretty &&
|
||||
['o2m', 'm2m'].includes(collectionField?.interface) &&
|
||||
@ -583,15 +736,16 @@ FormItem.Designer = function Designer() {
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{field.readPretty && options.length > 0 && fieldSchema['x-component'] === 'CollectionField' && (
|
||||
{field.readPretty && options.length > 0 && fieldSchema['x-component'] === 'CollectionField' && !isFileField && (
|
||||
<SchemaSettings.SwitchItem
|
||||
title={t('Enable link')}
|
||||
checked={(fieldSchema['x-component-props']?.mode ?? 'links') === 'links'}
|
||||
checked={fieldSchema['x-component-props']?.enableLink !== false}
|
||||
onChange={(flag) => {
|
||||
fieldSchema['x-component-props'] = {
|
||||
...fieldSchema?.['x-component-props'],
|
||||
mode: flag ? 'links' : 'tags',
|
||||
enableLink: flag,
|
||||
};
|
||||
field.componentProps['enableLink'] = flag;
|
||||
dn.emit('patch', {
|
||||
schema: {
|
||||
'x-uid': fieldSchema['x-uid'],
|
||||
@ -674,6 +828,7 @@ FormItem.Designer = function Designer() {
|
||||
fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
|
||||
fieldSchema['x-component-props']['fieldNames'] = fieldNames;
|
||||
schema['x-component-props'] = fieldSchema['x-component-props'];
|
||||
field.componentProps.fieldNames = fieldSchema['x-component-props'].fieldNames;
|
||||
dn.emit('patch', {
|
||||
schema,
|
||||
});
|
||||
@ -696,7 +851,7 @@ FormItem.Designer = function Designer() {
|
||||
);
|
||||
};
|
||||
|
||||
function isFileCollection(collection: Collection) {
|
||||
export function isFileCollection(collection: Collection) {
|
||||
return collection?.template === 'file';
|
||||
}
|
||||
|
||||
|
||||
@ -8,8 +8,9 @@ import { useTranslation } from 'react-i18next';
|
||||
import { useFilterByTk, useFormBlockContext } from '../../../block-provider';
|
||||
import { useCollection, useCollectionManager } from '../../../collection-manager';
|
||||
import { SchemaSettings, isPatternDisabled } from '../../../schema-settings';
|
||||
import { useCompile, useDesignable, useFieldComponentOptions } from '../../hooks';
|
||||
import { useCompile, useDesignable, useFieldModeOptions } from '../../hooks';
|
||||
import { useOperatorList } from '../filter/useOperators';
|
||||
import { isFileCollection } from './FormItem';
|
||||
|
||||
export const findFilterOperators = (schema: Schema) => {
|
||||
while (schema) {
|
||||
@ -371,61 +372,37 @@ export const EditDefaultValue = () => {
|
||||
};
|
||||
|
||||
export const EditComponent = () => {
|
||||
const { getInterface, getCollectionJoinField, getCollection } = useCollectionManager();
|
||||
const { getField, template } = useCollection();
|
||||
const tk = useFilterByTk();
|
||||
const { form } = useFormBlockContext();
|
||||
const { getCollectionJoinField, getCollection } = useCollectionManager();
|
||||
const { getField } = useCollection();
|
||||
const field = useField<Field>();
|
||||
const fieldSchema = useFieldSchema();
|
||||
const { t } = useTranslation();
|
||||
const { dn, insertAdjacent } = useDesignable();
|
||||
const { dn } = useDesignable();
|
||||
const collectionField = getField(fieldSchema['name']) || getCollectionJoinField(fieldSchema['x-collection-field']);
|
||||
const interfaceConfig = getInterface(collectionField?.interface);
|
||||
const fieldComponentOptions = useFieldComponentOptions();
|
||||
const isSubFormAssociationField = field.address.segments.includes('__form_grid');
|
||||
const fieldModeOptions = useFieldModeOptions();
|
||||
const isAssociationField = ['belongsTo', 'hasOne', 'hasMany', 'belongsToMany'].includes(collectionField?.type);
|
||||
const targetCollection = getCollection(collectionField?.target);
|
||||
const isFileField = isFileCollection(targetCollection);
|
||||
|
||||
return form && !isSubFormAssociationField && fieldComponentOptions ? (
|
||||
return isAssociationField && fieldModeOptions ? (
|
||||
<SchemaSettings.SelectItem
|
||||
title={t('Field component')}
|
||||
options={fieldComponentOptions}
|
||||
value={fieldSchema['x-component']}
|
||||
onChange={(type) => {
|
||||
const schema: ISchema = {
|
||||
name: collectionField.name,
|
||||
type: 'void',
|
||||
required: fieldSchema['required'],
|
||||
description: fieldSchema['description'],
|
||||
default: fieldSchema['default'],
|
||||
'x-decorator': 'FormItem',
|
||||
'x-designer': 'FormItem.Designer',
|
||||
'x-component': type,
|
||||
'x-validator': fieldSchema['x-validator'],
|
||||
'x-collection-field': fieldSchema['x-collection-field'],
|
||||
'x-decorator-props': fieldSchema['x-decorator-props'],
|
||||
'x-component-props': {
|
||||
...collectionField?.uiSchema?.['x-component-props'],
|
||||
...fieldSchema['x-component-props'],
|
||||
},
|
||||
key="field-mode"
|
||||
title={t('Field mode')}
|
||||
options={fieldModeOptions}
|
||||
value={field?.componentProps?.['mode'] || (isFileField ? 'FileManager' : 'Select')}
|
||||
onChange={(mode) => {
|
||||
const schema = {
|
||||
['x-uid']: fieldSchema['x-uid'],
|
||||
};
|
||||
|
||||
interfaceConfig?.schemaInitialize?.(schema, {
|
||||
field: collectionField,
|
||||
block: 'Form',
|
||||
readPretty: field.readPretty,
|
||||
action: tk ? 'get' : null,
|
||||
targetCollection: getCollection(collectionField.target),
|
||||
});
|
||||
|
||||
insertAdjacent('beforeBegin', divWrap(schema), {
|
||||
onSuccess: () => {
|
||||
dn.remove(null, {
|
||||
removeParentsIfNoChildren: true,
|
||||
breakRemoveOn: {
|
||||
'x-component': 'Grid',
|
||||
},
|
||||
});
|
||||
},
|
||||
fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
|
||||
fieldSchema['x-component-props']['mode'] = mode;
|
||||
schema['x-component-props'] = fieldSchema['x-component-props'];
|
||||
field.componentProps = field.componentProps || {};
|
||||
field.componentProps.mode = mode;
|
||||
dn.emit('patch', {
|
||||
schema,
|
||||
});
|
||||
dn.refresh();
|
||||
}}
|
||||
/>
|
||||
) : null;
|
||||
@ -586,6 +563,7 @@ export const EditTitleField = () => {
|
||||
fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
|
||||
fieldSchema['x-component-props']['fieldNames'] = fieldNames;
|
||||
schema['x-component-props'] = fieldSchema['x-component-props'];
|
||||
field.componentProps.fieldNames = fieldSchema['x-component-props'].fieldNames;
|
||||
dn.emit('patch', {
|
||||
schema,
|
||||
});
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
export * from './action';
|
||||
export * from './association-field';
|
||||
export * from './association-select';
|
||||
export * from './block-item';
|
||||
export * from './calendar';
|
||||
@ -16,6 +17,7 @@ export * from './form';
|
||||
export * from './form-item';
|
||||
export * from './form-v2';
|
||||
export * from './g2plot';
|
||||
export * from './gantt';
|
||||
export * from './grid';
|
||||
export * from './icon-picker';
|
||||
export * from './input';
|
||||
@ -41,5 +43,4 @@ export * from './time-picker';
|
||||
export * from './tree-select';
|
||||
export * from './upload';
|
||||
export * from './variable';
|
||||
export * from './gantt';
|
||||
import './index.less';
|
||||
|
||||
@ -220,6 +220,17 @@ export const InputRecordPicker: React.FC<any> = (props: IRecordPickerProps) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const RecordPickerProvider = (props) => {
|
||||
const { multiple, onChange, selectedRows, setSelectedRows, options, collectionField, ...other } = props;
|
||||
return (
|
||||
<RecordPickerContext.Provider
|
||||
value={{ multiple, onChange, selectedRows, setSelectedRows, options, collectionField, ...other }}
|
||||
>
|
||||
{props.children}
|
||||
</RecordPickerContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
const Drawer: React.FunctionComponent<{
|
||||
multiple: any;
|
||||
onChange: any;
|
||||
@ -247,11 +258,16 @@ const Drawer: React.FunctionComponent<{
|
||||
const filter = list.length ? { $and: [{ [`${targetKey}.$ne`]: list }] } : {};
|
||||
return filter;
|
||||
};
|
||||
|
||||
const recordPickerProps = {
|
||||
multiple,
|
||||
onChange,
|
||||
selectedRows,
|
||||
setSelectedRows,
|
||||
options,
|
||||
collectionField,
|
||||
};
|
||||
return (
|
||||
<RecordPickerContext.Provider
|
||||
value={{ multiple, onChange, selectedRows, setSelectedRows, options, collectionField }}
|
||||
>
|
||||
<RecordPickerProvider {...recordPickerProps}>
|
||||
<CollectionProvider allowNull name={collectionField?.target}>
|
||||
<ActionContext.Provider value={{ openMode: 'drawer', visible, setVisible }}>
|
||||
<FormProvider>
|
||||
@ -269,7 +285,7 @@ const Drawer: React.FunctionComponent<{
|
||||
</FormProvider>
|
||||
</ActionContext.Provider>
|
||||
</CollectionProvider>
|
||||
</RecordPickerContext.Provider>
|
||||
</RecordPickerProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { LoadingOutlined } from '@ant-design/icons';
|
||||
import { connect, mapProps, mapReadPretty, useFieldSchema } from '@formily/react';
|
||||
import { connect, mapProps, mapReadPretty, useFieldSchema, useField } from '@formily/react';
|
||||
import { SelectProps, Tag } from 'antd';
|
||||
import moment from 'moment';
|
||||
import { uniqBy } from 'lodash';
|
||||
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
|
||||
import { ResourceActionOptions, useRequest } from '../../../api-client';
|
||||
import { mergeFilter } from '../../../block-provider/SharedFilterProvider';
|
||||
@ -37,6 +38,7 @@ const InternalRemoteSelect = connect(
|
||||
const compile = useCompile();
|
||||
const firstRun = useRef(false);
|
||||
const fieldSchema = useFieldSchema();
|
||||
const field = useField();
|
||||
const { getField } = useCollection();
|
||||
const { getCollectionJoinField, getInterface } = useCollectionManager();
|
||||
const collectionField = getField(fieldSchema.name);
|
||||
@ -94,6 +96,7 @@ const InternalRemoteSelect = connect(
|
||||
});
|
||||
}
|
||||
return {
|
||||
...option,
|
||||
[fieldNames.label]: label || option[fieldNames.value],
|
||||
[fieldNames.value]: option[fieldNames.value],
|
||||
};
|
||||
@ -115,7 +118,7 @@ const InternalRemoteSelect = connect(
|
||||
...service?.params,
|
||||
// fields: [fieldNames.label, fieldNames.value, ...(service?.params?.fields || [])],
|
||||
// search needs
|
||||
filter: mergeFilter([service?.params?.filter]),
|
||||
filter: mergeFilter([field.componentProps?.service?.params?.filter || service?.params?.filter]),
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -148,7 +151,7 @@ const InternalRemoteSelect = connect(
|
||||
[operator]: search,
|
||||
},
|
||||
},
|
||||
service?.params?.filter,
|
||||
field.componentProps?.service?.params?.filter || service?.params?.filter,
|
||||
]),
|
||||
});
|
||||
};
|
||||
@ -156,12 +159,6 @@ const InternalRemoteSelect = connect(
|
||||
const getOptionsByFieldNames = useCallback(
|
||||
(item) => {
|
||||
return Object.keys(fieldNames).reduce((obj, key) => {
|
||||
const value = item[fieldNames[key]];
|
||||
if (value) {
|
||||
// support hidden, disabled, etc.
|
||||
obj[['label', 'value', 'options'].includes(key) ? fieldNames[key] : key] =
|
||||
key === 'label' ? compile(value) : value;
|
||||
}
|
||||
return obj;
|
||||
}, {} as any);
|
||||
},
|
||||
@ -179,15 +176,11 @@ const InternalRemoteSelect = connect(
|
||||
|
||||
const options = useMemo(() => {
|
||||
if (!data?.data?.length) {
|
||||
return value !== undefined && value !== null
|
||||
? Array.isArray(value)
|
||||
? value.map(normalizeOptions)
|
||||
: [normalizeOptions(value)]
|
||||
: [];
|
||||
return value !== undefined && value !== null ? (Array.isArray(value) ? value : [value]) : [];
|
||||
}
|
||||
return data?.data?.map(getOptionsByFieldNames) || [];
|
||||
const valueOptions = (value !== undefined && value !== null && (Array.isArray(value) ? value : [value])) || [];
|
||||
return uniqBy(data?.data?.concat(valueOptions) || [], fieldNames.value);
|
||||
}, [data?.data, getOptionsByFieldNames, normalizeOptions, value]);
|
||||
|
||||
const onDropdownVisibleChange = () => {
|
||||
if (firstRun.current) {
|
||||
return;
|
||||
|
||||
@ -25,7 +25,7 @@ const useLabelFields = (collectionName?: any) => {
|
||||
|
||||
export const TableColumnDesigner = (props) => {
|
||||
const { uiSchema, fieldSchema, collectionField } = props;
|
||||
const { getInterface } = useCollectionManager();
|
||||
const { getInterface, getCollection } = useCollectionManager();
|
||||
const field = useField();
|
||||
const { t } = useTranslation();
|
||||
const columnSchema = useFieldSchema();
|
||||
@ -34,7 +34,8 @@ export const TableColumnDesigner = (props) => {
|
||||
fieldSchema?.['x-component-props']?.['fieldNames'] || uiSchema?.['x-component-props']?.['fieldNames'];
|
||||
const options = useLabelFields(collectionField?.target ?? collectionField?.targetCollection);
|
||||
const intefaceCfg = getInterface(collectionField?.interface);
|
||||
|
||||
const targetCollection = getCollection(collectionField?.target);
|
||||
const isFileField = isFileCollection(targetCollection);
|
||||
return (
|
||||
<GeneralSchemaDesigner disableInitializer>
|
||||
<SchemaSettings.ModalItem
|
||||
@ -123,27 +124,32 @@ export const TableColumnDesigner = (props) => {
|
||||
)}
|
||||
{['linkTo', 'm2m', 'm2o', 'o2m', 'obo', 'oho', 'snapshot', 'createdBy', 'updatedBy'].includes(
|
||||
collectionField?.interface,
|
||||
) && (
|
||||
<SchemaSettings.SwitchItem
|
||||
title={t('Enable link')}
|
||||
checked={(fieldSchema['x-component-props']?.mode ?? 'links') === 'links'}
|
||||
onChange={(flag) => {
|
||||
fieldSchema['x-component-props'] = {
|
||||
...fieldSchema?.['x-component-props'],
|
||||
mode: flag ? 'links' : 'tags',
|
||||
};
|
||||
dn.emit('patch', {
|
||||
schema: {
|
||||
'x-uid': fieldSchema['x-uid'],
|
||||
'x-component-props': {
|
||||
...fieldSchema['x-component-props'],
|
||||
) &&
|
||||
!isFileField && (
|
||||
<SchemaSettings.SwitchItem
|
||||
title={t('Enable link')}
|
||||
checked={fieldSchema['x-component-props']?.enableLink !== false}
|
||||
onChange={(flag) => {
|
||||
fieldSchema['x-component-props'] = {
|
||||
...fieldSchema?.['x-component-props'],
|
||||
enableLink: flag,
|
||||
};
|
||||
field.componentProps = {
|
||||
...fieldSchema?.['x-component-props'],
|
||||
enableLink: flag,
|
||||
};
|
||||
dn.emit('patch', {
|
||||
schema: {
|
||||
'x-uid': fieldSchema['x-uid'],
|
||||
'x-component-props': {
|
||||
...fieldSchema?.['x-component-props'],
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
dn.refresh();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
});
|
||||
dn.refresh();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{['linkTo', 'm2m', 'm2o', 'o2m', 'obo', 'oho', 'snapshot'].includes(collectionField?.interface) && (
|
||||
<SchemaSettings.SelectItem
|
||||
title={t('Title field')}
|
||||
@ -184,3 +190,7 @@ export const TableColumnDesigner = (props) => {
|
||||
</GeneralSchemaDesigner>
|
||||
);
|
||||
};
|
||||
|
||||
function isFileCollection(collection) {
|
||||
return collection?.template === 'file';
|
||||
}
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
import React from 'react';
|
||||
import { useRecordIndex } from '../../../record-provider';
|
||||
|
||||
export const TableIndex = (props) => {
|
||||
const recordIndex = useRecordIndex();
|
||||
return <div>{recordIndex + 1}</div>;
|
||||
};
|
||||
@ -20,8 +20,13 @@ import {
|
||||
import { useACLFieldWhitelist } from '../../../acl/ACLProvider';
|
||||
import { extractIndex, getIdsWithChildren, isCollectionFieldComponent, isColumnComponent } from './utils';
|
||||
|
||||
const useTableColumns = () => {
|
||||
const useArrayField = (props) => {
|
||||
const field = useField<ArrayField>();
|
||||
return (props.field || field) as ArrayField;
|
||||
};
|
||||
|
||||
const useTableColumns = (props) => {
|
||||
const field = useArrayField(props);
|
||||
const schema = useFieldSchema();
|
||||
const { schemaInWhitelist } = useACLFieldWhitelist();
|
||||
const { designable } = useDesignable();
|
||||
@ -52,7 +57,11 @@ const useTableColumns = () => {
|
||||
return (
|
||||
<RecordIndexProvider index={record.__index || index}>
|
||||
<RecordProvider record={record}>
|
||||
<RecursionField schema={s} name={record.__index || index} onlyRenderProperties />
|
||||
<RecursionField
|
||||
basePath={field.address.concat(record.__index || index)}
|
||||
schema={s}
|
||||
onlyRenderProperties
|
||||
/>
|
||||
</RecordProvider>
|
||||
</RecordIndexProvider>
|
||||
);
|
||||
@ -155,8 +164,6 @@ const useValidator = (validator: (value: any) => string) => {
|
||||
};
|
||||
|
||||
export const Table: any = observer((props: any) => {
|
||||
const field = useField<ArrayField>();
|
||||
const columns = useTableColumns();
|
||||
const { pagination: pagination1, useProps, onChange, ...others1 } = props;
|
||||
const { pagination: pagination2, onClickRow, ...others2 } = useProps?.() || {};
|
||||
const {
|
||||
@ -170,6 +177,8 @@ export const Table: any = observer((props: any) => {
|
||||
onExpand,
|
||||
...others
|
||||
} = { ...others1, ...others2 } as any;
|
||||
const field = useArrayField(others);
|
||||
const columns = useTableColumns(others);
|
||||
const schema = useFieldSchema();
|
||||
const isTableSelector = schema?.parent?.['x-decorator'] === 'TableSelectorProvider';
|
||||
const ctx = isTableSelector ? useTableSelectorContext() : useTableBlockContext();
|
||||
|
||||
@ -4,6 +4,7 @@ import { TableColumn } from './Table.Column';
|
||||
import { TableColumnActionBar } from './Table.Column.ActionBar';
|
||||
import { TableColumnDecorator } from './Table.Column.Decorator';
|
||||
import { TableColumnDesigner } from './Table.Column.Designer';
|
||||
import { TableIndex } from './Table.Index';
|
||||
import { TableSelector } from './TableSelector';
|
||||
|
||||
export * from './TableBlockDesigner';
|
||||
@ -18,3 +19,4 @@ TableV2.Column.Decorator = TableColumnDecorator;
|
||||
TableV2.Column.Designer = TableColumnDesigner;
|
||||
TableV2.ActionColumnDesigner = TableActionColumnDesigner;
|
||||
TableV2.Selector = TableSelector;
|
||||
TableV2.Index = TableIndex;
|
||||
|
||||
@ -24,7 +24,7 @@ export function getIdsWithChildren(nodes) {
|
||||
for (const node of nodes) {
|
||||
if (node.children && node.children.length > 0) {
|
||||
ids.push(node.id);
|
||||
ids.push(...getIdsWithChildren(node.children));
|
||||
ids.push(...getIdsWithChildren(node?.children));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,3 +9,4 @@ export * from './useFieldComponentOptions';
|
||||
export * from './useFieldTitle';
|
||||
export * from './useProps';
|
||||
export * from './useTableSize';
|
||||
export * from './useFieldModeOptions';
|
||||
|
||||
@ -0,0 +1,76 @@
|
||||
import { useFieldSchema, useField } from '@formily/react';
|
||||
import { useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useCollection, useCollectionManager } from '../../collection-manager';
|
||||
|
||||
export const useFieldModeOptions = () => {
|
||||
const { getCollectionJoinField, getCollection } = useCollectionManager();
|
||||
const fieldSchema = useFieldSchema();
|
||||
const field = useField();
|
||||
const isReadPretty = field.readPretty;
|
||||
const { getField } = useCollection();
|
||||
const collectionField = getField(fieldSchema['name']) || getCollectionJoinField(fieldSchema['x-collection-field']);
|
||||
const { t } = useTranslation();
|
||||
const { label } = fieldSchema['x-component-props']?.fieldNames || {};
|
||||
const fieldModeOptions = useMemo(() => {
|
||||
if (!collectionField || !collectionField?.interface) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!['o2o', 'oho', 'obo', 'o2m', 'linkTo', 'm2o', 'm2m'].includes(collectionField.interface)) return;
|
||||
const collection = getCollection(collectionField.target);
|
||||
if (collection?.template === 'file') {
|
||||
return isReadPretty?[
|
||||
{ label: t('Title'), value: 'Select' },
|
||||
{ label: t('File manager'), value: 'FileManager' },
|
||||
]:[
|
||||
{ label: t('File manager'), value: 'FileManager' },
|
||||
{ label: t('Record picker'), value: 'Picker' },
|
||||
{ label: t('Select'), value: 'Select' },
|
||||
];
|
||||
}
|
||||
|
||||
switch (collectionField.interface) {
|
||||
case 'o2m':
|
||||
return isReadPretty
|
||||
? [
|
||||
{ label: t('Title'), value: 'Select' },
|
||||
// { label: t('Subtable'), value: 'SubTable' },
|
||||
{ label: t('Sub-details'), value: 'Nester' },
|
||||
]
|
||||
: [
|
||||
{ label: t('Record picker'), value: 'Picker' },
|
||||
// { label: t('Subtable'), value: 'SubTable' },
|
||||
{ label: t('Select'), value: 'Select' },
|
||||
{ label: t('Subform'), value: 'Nester' },
|
||||
];
|
||||
|
||||
case 'm2o':
|
||||
case 'm2m':
|
||||
case 'linkTo':
|
||||
return isReadPretty
|
||||
? [
|
||||
{ label: t('Title'), value: 'Select' },
|
||||
{ label: t('Sub-details'), value: 'Nester' },
|
||||
]
|
||||
: [
|
||||
{ label: t('Record picker'), value: 'Picker' },
|
||||
{ label: t('Select'), value: 'Select' },
|
||||
{ label: t('Subform'), value: 'Nester' },
|
||||
];
|
||||
|
||||
default:
|
||||
return isReadPretty
|
||||
? [
|
||||
{ label: t('Title'), value: 'Select' },
|
||||
{ label: t('Sub-details'), value: 'Nester' },
|
||||
]
|
||||
: [
|
||||
{ label: t('Record picker'), value: 'Picker' },
|
||||
{ label: t('Select'), value: 'Select' },
|
||||
{ label: t('Subform'), value: 'Nester' },
|
||||
];
|
||||
}
|
||||
}, [t, collectionField?.interface, label]);
|
||||
return fieldModeOptions;
|
||||
};
|
||||
@ -0,0 +1,58 @@
|
||||
import React from 'react';
|
||||
import { ActionInitializer } from './ActionInitializer';
|
||||
|
||||
export const SelectActionInitializer = (props) => {
|
||||
const schema = {
|
||||
type: 'void',
|
||||
title: '{{ t("Select") }}',
|
||||
'x-action': 'update',
|
||||
'x-designer': 'Action.Designer',
|
||||
'x-component': 'Action',
|
||||
'x-component-props': {
|
||||
openMode: 'drawer',
|
||||
},
|
||||
properties: {
|
||||
drawer: {
|
||||
type: 'void',
|
||||
'x-component': 'AssociationField.Selector',
|
||||
title: '{{ t("Select record") }}',
|
||||
'x-component-props': {
|
||||
className: 'nb-record-picker-selector',
|
||||
},
|
||||
properties: {
|
||||
grid: {
|
||||
type: 'void',
|
||||
'x-component': 'Grid',
|
||||
'x-initializer': 'TableSelectorInitializers',
|
||||
properties: {},
|
||||
},
|
||||
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 }}',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
return <ActionInitializer {...props} schema={schema} />;
|
||||
};
|
||||
@ -49,3 +49,4 @@ export * from './TableSelectorInitializer';
|
||||
export * from './UpdateActionInitializer';
|
||||
export * from './UpdateSubmitActionInitializer';
|
||||
export * from './ViewActionInitializer';
|
||||
export * from './SelectActionInitializer';
|
||||
|
||||
@ -221,15 +221,15 @@ export const useFormItemInitializerFields = (options?: any) => {
|
||||
?.map((field) => {
|
||||
const interfaceConfig = getInterface(field.interface);
|
||||
const targetCollection = getCollection(field.target);
|
||||
const component =
|
||||
field.interface === 'o2m' && targetCollection?.template !== 'file' && !snapshot
|
||||
? 'TableField'
|
||||
: 'CollectionField';
|
||||
// const component =
|
||||
// field.interface === 'o2m' && targetCollection?.template !== 'file' && !snapshot
|
||||
// ? 'TableField'
|
||||
// : 'CollectionField';
|
||||
const schema = {
|
||||
type: 'string',
|
||||
name: field.name,
|
||||
'x-designer': 'FormItem.Designer',
|
||||
'x-component': component,
|
||||
'x-component': 'CollectionField',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-collection-field': `${name}.${field.name}`,
|
||||
'x-component-props': {},
|
||||
@ -277,16 +277,16 @@ export const useFilterFormItemInitializerFields = (options?: any) => {
|
||||
?.map((field) => {
|
||||
const interfaceConfig = getInterface(field.interface);
|
||||
const targetCollection = getCollection(field.target);
|
||||
const component =
|
||||
field.interface === 'o2m' && targetCollection?.template !== 'file' && !snapshot
|
||||
? 'TableField'
|
||||
: 'CollectionField';
|
||||
// const component =
|
||||
// field.interface === 'o2m' && targetCollection?.template !== 'file' && !snapshot
|
||||
// ? 'TableField'
|
||||
// : 'CollectionField';
|
||||
let schema = {
|
||||
type: 'string',
|
||||
name: field.name,
|
||||
required: false,
|
||||
'x-designer': 'FormItem.FilterFormDesigner',
|
||||
'x-component': component,
|
||||
'x-component': 'CollectionField',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-collection-field': `${name}.${field.name}`,
|
||||
'x-component-props': {},
|
||||
@ -464,16 +464,16 @@ export const useInheritsFormItemInitializerFields = (options?) => {
|
||||
?.map((field) => {
|
||||
const interfaceConfig = getInterface(field.interface);
|
||||
const targetCollection = getCollection(field.target);
|
||||
const component =
|
||||
field.interface === 'o2m' && targetCollection?.template !== 'file' && !snapshot
|
||||
? 'TableField'
|
||||
: 'CollectionField';
|
||||
// const component =
|
||||
// field.interface === 'o2m' && targetCollection?.template !== 'file' && !snapshot
|
||||
// ? 'TableField'
|
||||
// : 'CollectionField';
|
||||
const schema = {
|
||||
type: 'string',
|
||||
name: field.name,
|
||||
title: field?.uiSchema?.title || field.name,
|
||||
'x-designer': 'FormItem.Designer',
|
||||
'x-component': component,
|
||||
'x-component': 'CollectionField',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-collection-field': `${name}.${field.name}`,
|
||||
'x-component-props': {},
|
||||
@ -517,17 +517,17 @@ export const useFilterInheritsFormItemInitializerFields = (options?) => {
|
||||
?.map((field) => {
|
||||
const interfaceConfig = getInterface(field.interface);
|
||||
const targetCollection = getCollection(field.target);
|
||||
const component =
|
||||
field.interface === 'o2m' && targetCollection?.template !== 'file' && !snapshot
|
||||
? 'TableField'
|
||||
: 'CollectionField';
|
||||
// const component =
|
||||
// field.interface === 'o2m' && targetCollection?.template !== 'file' && !snapshot
|
||||
// ? 'TableField'
|
||||
// : 'CollectionField';
|
||||
const schema = {
|
||||
type: 'string',
|
||||
name: field.name,
|
||||
title: field?.uiSchema?.title || field.name,
|
||||
required: false,
|
||||
'x-designer': 'FormItem.FilterFormDesigner',
|
||||
'x-component': component,
|
||||
'x-component': 'CollectionField',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-collection-field': `${name}.${field.name}`,
|
||||
'x-component-props': {},
|
||||
|
||||
@ -249,6 +249,11 @@ export class OptionsParser {
|
||||
}
|
||||
|
||||
if (appendFields.length == 2) {
|
||||
const association = associations[appendFields[0]];
|
||||
if (!association) {
|
||||
throw new Error(`association ${appendFields[0]} in ${model.name} not found`);
|
||||
}
|
||||
|
||||
const associationModel = associations[appendFields[0]].target;
|
||||
if (associationModel.rawAttributes[appendFields[1]]) {
|
||||
lastLevel = true;
|
||||
|
||||
@ -62,7 +62,7 @@ const traverseJSON = (data, options: TraverseOptions) => {
|
||||
const { collection, exclude = [], include = [] } = options;
|
||||
const map = parseInclude(include);
|
||||
const result = {};
|
||||
for (const key of Object.keys(data)) {
|
||||
for (const key of Object.keys(data || {})) {
|
||||
const subInclude = map[key];
|
||||
if (include.length > 0 && !subInclude) {
|
||||
continue;
|
||||
|
||||
@ -395,7 +395,7 @@ describe('list association action with acl', () => {
|
||||
foreignKey: 'parentId',
|
||||
uiSchema: {
|
||||
title: '{{t("Parent")}}',
|
||||
'x-component': 'RecordPicker',
|
||||
'x-component': 'AssociationField',
|
||||
'x-component-props': { multiple: false, fieldNames: { label: 'id', value: 'id' } },
|
||||
},
|
||||
target: 'table_a',
|
||||
|
||||
@ -17,7 +17,7 @@ export default extend({
|
||||
uiSchema: {
|
||||
type: 'array',
|
||||
title: '{{t("Roles")}}',
|
||||
'x-component': 'RecordPicker',
|
||||
'x-component': 'AssociationField',
|
||||
'x-component-props': {
|
||||
multiple: true,
|
||||
fieldNames: {
|
||||
|
||||
@ -60,7 +60,7 @@ export const useAuditLogsCollection = () => {
|
||||
uiSchema: {
|
||||
type: 'object',
|
||||
title: '{{t("Collection")}}',
|
||||
'x-component': 'RecordPicker',
|
||||
'x-component': 'AssociationField',
|
||||
'x-component-props': { fieldNames: { value: 'name', label: 'title' }, ellipsis: true },
|
||||
'x-read-pretty': true,
|
||||
},
|
||||
@ -76,7 +76,7 @@ export const useAuditLogsCollection = () => {
|
||||
uiSchema: {
|
||||
type: 'object',
|
||||
title: '{{t("User")}}',
|
||||
'x-component': 'RecordPicker',
|
||||
'x-component': 'AssociationField',
|
||||
'x-component-props': { fieldNames: { value: 'id', label: 'nickname' }, ellipsis: true },
|
||||
'x-read-pretty': true,
|
||||
},
|
||||
|
||||
@ -53,6 +53,9 @@ export const AuditLogsViewActionInitializer = (props) => {
|
||||
collection: 'auditLogs',
|
||||
readPretty: true,
|
||||
action: 'get',
|
||||
params: {
|
||||
appends: ['collection', 'user', 'changes'],
|
||||
},
|
||||
useParams: '{{ useParamsFromRecord }}',
|
||||
useSourceId: '{{ useSourceIdFromParentRecord }}',
|
||||
},
|
||||
|
||||
@ -231,12 +231,12 @@
|
||||
"Display association fields": "Display association fields",
|
||||
"Field component": "Field component",
|
||||
"Subtable": "Subtable",
|
||||
"Subform": "Subform",
|
||||
"Subform": "Sub-form",
|
||||
"Record picker": "Record picker",
|
||||
"Toggles the subfield mode": "Toggles the subfield mode",
|
||||
"Selector mode": "Selector mode",
|
||||
"Subtable mode": "Subtable mode",
|
||||
"Subform mode": "Subform mode",
|
||||
"Subform mode": "Sub-form mode",
|
||||
"Edit block title": "Edit block title",
|
||||
"Block title": "Block title",
|
||||
"Pattern": "Pattern",
|
||||
|
||||
@ -71,7 +71,7 @@ describe.skip('skip if already migrated', function () {
|
||||
});
|
||||
});
|
||||
|
||||
describe('drop ui schema', () => {
|
||||
describe.skip('drop ui schema', () => {
|
||||
let app: MockServer;
|
||||
let db: Database;
|
||||
|
||||
|
||||
@ -4,6 +4,12 @@ import { FieldModel } from '../models';
|
||||
|
||||
export default class extends Migration {
|
||||
async up() {
|
||||
const result = await this.app.version.satisfies('<0.9.2-alpha.2');
|
||||
|
||||
if (!result) {
|
||||
return;
|
||||
}
|
||||
|
||||
const transaction = await this.db.sequelize.transaction();
|
||||
|
||||
const migrateFieldsSchema = async (collection: Collection) => {
|
||||
|
||||
@ -0,0 +1,72 @@
|
||||
import { Collection } from '@nocobase/database';
|
||||
import { Migration } from '@nocobase/server';
|
||||
import { FieldModel } from '../models';
|
||||
|
||||
export default class extends Migration {
|
||||
async up() {
|
||||
const result = await this.app.version.satisfies('<=0.9.2-alpha.5');
|
||||
|
||||
if (!result) {
|
||||
return;
|
||||
}
|
||||
|
||||
const transaction = await this.db.sequelize.transaction();
|
||||
|
||||
const migrateFieldsSchema = async (collection: Collection) => {
|
||||
this.app.log.info(`Start to migrate ${collection.name} collection's ui schema`);
|
||||
|
||||
const fieldRecords: Array<FieldModel> = await collection.repository.find({
|
||||
transaction,
|
||||
filter: {
|
||||
type: ['hasOne', 'hasMany', 'belongsTo', 'belongsToMany'],
|
||||
},
|
||||
});
|
||||
|
||||
const fieldsCount = await collection.repository.count({
|
||||
transaction,
|
||||
filter: {
|
||||
type: ['hasOne', 'hasMany', 'belongsTo', 'belongsToMany'],
|
||||
},
|
||||
});
|
||||
|
||||
this.app.log.info(`Total ${fieldsCount} fields need to be migrated`);
|
||||
|
||||
let i = 0;
|
||||
|
||||
for (const fieldRecord of fieldRecords) {
|
||||
i++;
|
||||
|
||||
this.app.log.info(
|
||||
`Migrate field ${fieldRecord.get('collectionName')}.${fieldRecord.get('name')}, ${i}/${fieldsCount}`,
|
||||
);
|
||||
|
||||
const uiSchema = fieldRecord.get('uiSchema');
|
||||
|
||||
if (uiSchema?.['x-component'] !== 'RecordPicker') {
|
||||
continue;
|
||||
}
|
||||
|
||||
console.log(`${fieldRecord.get('collectionName')}.${fieldRecord.get('name')}: ${uiSchema['x-component']}`);
|
||||
|
||||
uiSchema['x-component'] = 'AssociationField';
|
||||
fieldRecord.set('uiSchema', uiSchema);
|
||||
|
||||
await fieldRecord.save({
|
||||
transaction,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
await migrateFieldsSchema(this.db.getCollection('fields'));
|
||||
if (this.db.getCollection('fieldsHistory')) {
|
||||
await migrateFieldsSchema(this.db.getCollection('fieldsHistory'));
|
||||
}
|
||||
await transaction.commit();
|
||||
} catch (error) {
|
||||
await transaction.rollback();
|
||||
this.app.log.error(error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -4,7 +4,7 @@ import { Database } from '@nocobase/database';
|
||||
import { mockServer, MockServer } from '@nocobase/test';
|
||||
import PluginUiSchema, { UiSchemaRepository } from '../..';
|
||||
|
||||
describe('migration-20230330214649-filter-form-block', () => {
|
||||
describe.skip('migration-20230330214649-filter-form-block', () => {
|
||||
let app: MockServer;
|
||||
let db: Database;
|
||||
|
||||
|
||||
@ -0,0 +1,39 @@
|
||||
import { Migration } from '@nocobase/server';
|
||||
|
||||
export default class extends Migration {
|
||||
async up() {
|
||||
const result = await this.app.version.satisfies('<0.9.2-alpha.5');
|
||||
if (!result) {
|
||||
return;
|
||||
}
|
||||
const r = this.db.getRepository('uiSchemas');
|
||||
const items = await r.find({
|
||||
filter: {
|
||||
'schema.x-designer': 'AssociationSelect.Designer',
|
||||
},
|
||||
});
|
||||
await this.db.sequelize.transaction(async (transaction) => {
|
||||
for (const item of items) {
|
||||
const schema = item.schema;
|
||||
if (!schema['x-collection-field']) {
|
||||
continue;
|
||||
}
|
||||
const field = this.db.getFieldByPath(schema['x-collection-field']);
|
||||
if (!field) {
|
||||
continue;
|
||||
}
|
||||
if (['hasOne', 'belongsTo'].includes(field.type)) {
|
||||
schema['type'] = 'object';
|
||||
} else if (['hasMany', 'belongsToMany'].includes(field.type)) {
|
||||
schema['type'] = 'array';
|
||||
} else {
|
||||
continue;
|
||||
}
|
||||
schema['x-designer'] = 'FormItem.Designer';
|
||||
schema['x-component'] = 'CollectionField';
|
||||
item.set('schema', schema);
|
||||
await item.save({ transaction });
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,92 @@
|
||||
import { Migration } from '@nocobase/server';
|
||||
|
||||
export default class extends Migration {
|
||||
async up() {
|
||||
const result = await this.app.version.satisfies('<0.9.2-alpha.5');
|
||||
if (!result) {
|
||||
return;
|
||||
}
|
||||
await this.migrateFields();
|
||||
await this.migrateSelector();
|
||||
await this.migrateViewer();
|
||||
}
|
||||
|
||||
async migrateFields() {
|
||||
const r = this.db.getRepository('uiSchemas');
|
||||
const items = await r.find({
|
||||
filter: {
|
||||
'schema.x-component': 'CollectionField',
|
||||
},
|
||||
});
|
||||
console.log(items?.length);
|
||||
await this.db.sequelize.transaction(async (transaction) => {
|
||||
for (const item of items) {
|
||||
const schema = item.schema;
|
||||
if (!schema['x-collection-field']) {
|
||||
continue;
|
||||
}
|
||||
const field = this.db.getFieldByPath(schema['x-collection-field']);
|
||||
if (!field) {
|
||||
continue;
|
||||
}
|
||||
const component = field.get('uiSchema')?.['x-component'];
|
||||
if (!['AssociationField', 'RecordPicker'].includes(component)) {
|
||||
continue;
|
||||
}
|
||||
console.log(field.options.interface, component, schema['x-collection-field']);
|
||||
if (['createdBy', 'updatedBy'].includes(field?.options?.interface)) {
|
||||
// TODO
|
||||
} else if (['hasOne', 'belongsTo'].includes(field.type)) {
|
||||
schema['type'] = 'object';
|
||||
} else if (['hasMany', 'belongsToMany'].includes(field.type)) {
|
||||
schema['type'] = 'array';
|
||||
} else {
|
||||
continue;
|
||||
}
|
||||
if (schema['x-component-props']?.mode === 'tags') {
|
||||
schema['x-component-props']['enableLink'] = true;
|
||||
schema['x-component-props']['mode'] = 'Select';
|
||||
} else if (schema['x-component-props']?.mode === 'links') {
|
||||
schema['x-component-props']['enableLink'] = true;
|
||||
schema['x-component-props']['mode'] = 'Select';
|
||||
}
|
||||
item.set('schema', schema);
|
||||
await item.save({ transaction });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async migrateViewer() {
|
||||
const r = this.db.getRepository('uiSchemas');
|
||||
const items = await r.find({
|
||||
filter: {
|
||||
'schema.x-component': 'RecordPicker.Viewer',
|
||||
},
|
||||
});
|
||||
await this.db.sequelize.transaction(async (transaction) => {
|
||||
for (const item of items) {
|
||||
const schema = item.schema;
|
||||
schema['x-component'] = 'AssociationField.Viewer';
|
||||
item.set('schema', schema);
|
||||
await item.save({ transaction });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async migrateSelector() {
|
||||
const r = this.db.getRepository('uiSchemas');
|
||||
const items = await r.find({
|
||||
filter: {
|
||||
'schema.x-component': 'RecordPicker.Selector',
|
||||
},
|
||||
});
|
||||
await this.db.sequelize.transaction(async (transaction) => {
|
||||
for (const item of items) {
|
||||
const schema = item.schema;
|
||||
schema['x-component'] = 'AssociationField.Selector';
|
||||
item.set('schema', schema);
|
||||
await item.save({ transaction });
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,58 @@
|
||||
import { Schema } from '@formily/json-schema';
|
||||
import { Migration } from '@nocobase/server';
|
||||
import { uid } from '@nocobase/utils';
|
||||
import UiSchemaRepository from '../repository';
|
||||
|
||||
export default class extends Migration {
|
||||
async up() {
|
||||
const result = await this.app.version.satisfies('<0.9.2-alpha.5');
|
||||
if (!result) {
|
||||
return;
|
||||
}
|
||||
|
||||
const r = this.db.getRepository<UiSchemaRepository>('uiSchemas');
|
||||
const items = await r.find({
|
||||
filter: {
|
||||
'schema.x-component': 'FormField',
|
||||
},
|
||||
});
|
||||
console.log(items?.length);
|
||||
await this.db.sequelize.transaction(async (transaction) => {
|
||||
for (const item of items) {
|
||||
const schema = item.schema;
|
||||
schema['type'] = 'object';
|
||||
schema['x-component'] = 'CollectionField';
|
||||
schema['x-component-props']['mode'] = 'Nester';
|
||||
item.set('schema', schema);
|
||||
await item.save({ transaction });
|
||||
const s = await r.getProperties(item['x-uid'], { transaction });
|
||||
const instance = new Schema(s);
|
||||
const find = (instance, component) => {
|
||||
return instance.reduceProperties((buf, ss) => {
|
||||
if (ss['x-component'] === component) {
|
||||
return ss;
|
||||
}
|
||||
const result = find(ss, component);
|
||||
if (result) {
|
||||
return result;
|
||||
}
|
||||
return buf;
|
||||
}, null);
|
||||
};
|
||||
const gridSchema = find(instance, 'Grid').toJSON();
|
||||
await r.insertAdjacent('afterBegin', item['x-uid'], gridSchema, {
|
||||
wrap: {
|
||||
type: 'void',
|
||||
'x-uid': uid(),
|
||||
'x-component': 'AssociationField.Nester',
|
||||
},
|
||||
transaction,
|
||||
});
|
||||
const removed = Object.values(instance.properties)?.[0]?.['x-uid'];
|
||||
if (removed) {
|
||||
await r.remove(removed, { transaction });
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -90,7 +90,7 @@ export class UiSchemaStoragePlugin extends Plugin {
|
||||
|
||||
async load() {
|
||||
this.db.addMigrations({
|
||||
namespace: 'collection-manager',
|
||||
namespace: 'ui-schema-storage',
|
||||
directory: path.resolve(__dirname, './migrations'),
|
||||
context: {
|
||||
plugin: this,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user