mirror of
https://github.com/nocobase/nocobase
synced 2024-11-15 05:25:52 +00:00
chore: associate field
This commit is contained in:
parent
824629b7fe
commit
1f341ed5a0
@ -1,10 +1,12 @@
|
|||||||
import { createForm, onFormValuesChange } from '@formily/core';
|
import { createForm, onFormValuesChange } from '@formily/core';
|
||||||
import { useField, useForm } from '@formily/react';
|
import { useField, useForm, useFieldSchema } from '@formily/react';
|
||||||
import { Spin } from 'antd';
|
import { Spin } from 'antd';
|
||||||
import React, { createContext, useContext, useEffect, useMemo } from 'react';
|
import React, { createContext, useContext, useEffect, useMemo } from 'react';
|
||||||
import { RecordProvider } from '../record-provider';
|
import { RecordProvider } from '../record-provider';
|
||||||
import { BlockProvider, useBlockRequestContext } from './BlockProvider';
|
import { BlockProvider, useBlockRequestContext } from './BlockProvider';
|
||||||
import { useFormBlockContext } from './FormBlockProvider';
|
import { useFormBlockContext } from './FormBlockProvider';
|
||||||
|
import { useCollectionManager, useCollection } from '../collection-manager';
|
||||||
|
import { isArray } from 'lodash';
|
||||||
|
|
||||||
export const SubFormContext = createContext<any>({});
|
export const SubFormContext = createContext<any>({});
|
||||||
|
|
||||||
@ -15,16 +17,27 @@ const InternalSubFormProvider = (props) => {
|
|||||||
if (!formBlockCtx?.updateAssociationValues?.includes(fieldName)) {
|
if (!formBlockCtx?.updateAssociationValues?.includes(fieldName)) {
|
||||||
formBlockCtx?.updateAssociationValues?.push(fieldName);
|
formBlockCtx?.updateAssociationValues?.push(fieldName);
|
||||||
}
|
}
|
||||||
|
|
||||||
const field = useField();
|
const field = useField();
|
||||||
const parentForm = useForm();
|
const parentForm = useForm();
|
||||||
|
const { getCollectionField } = useCollectionManager();
|
||||||
|
const collectionField = getCollectionField(props.association);
|
||||||
const form = useMemo(
|
const form = useMemo(
|
||||||
() =>
|
() =>
|
||||||
createForm({
|
createForm({
|
||||||
effects() {
|
effects() {
|
||||||
onFormValuesChange((form) => {
|
onFormValuesChange((form) => {
|
||||||
parentForm.setValuesIn(fieldName, form.values);
|
if (['oho', 'obo'].includes(collectionField.interface)) {
|
||||||
formBlockCtx?.form?.setValuesIn(fieldName, form.values);
|
parentForm.setValuesIn(fieldName, form.values);
|
||||||
|
formBlockCtx?.form?.setValuesIn(fieldName, form.values);
|
||||||
|
} else {
|
||||||
|
console.log(parentForm.values)
|
||||||
|
console.log(form.values)
|
||||||
|
// const fieldValue = parentForm.values[fieldName];
|
||||||
|
// const values = isArray(fieldValue) ? fieldValue : [fieldValue];
|
||||||
|
// values.push(form.values);
|
||||||
|
// console.log(values);
|
||||||
|
// parentForm.setValuesIn(fieldName, values);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
readPretty,
|
readPretty,
|
||||||
|
@ -107,12 +107,15 @@ export const o2m: IField = {
|
|||||||
array: {
|
array: {
|
||||||
type: 'array',
|
type: 'array',
|
||||||
'x-component': 'ArrayCards',
|
'x-component': 'ArrayCards',
|
||||||
default:[{}],
|
'x-component-props': {
|
||||||
|
headStyle: { display: 'none' },
|
||||||
|
},
|
||||||
|
default: [{}],
|
||||||
items: {
|
items: {
|
||||||
type: 'object',
|
type: 'object',
|
||||||
properties: {
|
properties: {
|
||||||
block: {
|
block: {
|
||||||
type: 'object',
|
type: 'void',
|
||||||
'x-decorator': 'SubFormProvider',
|
'x-decorator': 'SubFormProvider',
|
||||||
'x-decorator-props': {
|
'x-decorator-props': {
|
||||||
collection: field.target,
|
collection: field.target,
|
||||||
@ -122,7 +125,7 @@ export const o2m: IField = {
|
|||||||
fieldName: field.name,
|
fieldName: field.name,
|
||||||
readPretty,
|
readPretty,
|
||||||
},
|
},
|
||||||
'x-component': 'CardItem',
|
'x-component': 'div',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
bordered: true,
|
bordered: true,
|
||||||
},
|
},
|
||||||
@ -135,7 +138,7 @@ export const o2m: IField = {
|
|||||||
},
|
},
|
||||||
properties: {
|
properties: {
|
||||||
__form_grid: {
|
__form_grid: {
|
||||||
type: 'void',
|
type: 'object',
|
||||||
'x-component': 'Grid',
|
'x-component': 'Grid',
|
||||||
'x-initializer': 'FormItemInitializers',
|
'x-initializer': 'FormItemInitializers',
|
||||||
properties: {},
|
properties: {},
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { LoadingOutlined } from '@ant-design/icons';
|
import { LoadingOutlined } from '@ant-design/icons';
|
||||||
import { connect, mapProps, mapReadPretty } from '@formily/react';
|
import { connect, mapProps, mapReadPretty, useFieldSchema } from '@formily/react';
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
import React, { useCallback, useMemo } from 'react';
|
import React, { useCallback, useMemo } from 'react';
|
||||||
import { useFieldTitle } from '../../hooks';
|
import { useFieldTitle } from '../../hooks';
|
||||||
@ -9,7 +9,7 @@ import useServiceOptions from './useServiceOptions';
|
|||||||
|
|
||||||
export const defaultFieldNames = {
|
export const defaultFieldNames = {
|
||||||
label: 'id',
|
label: 'id',
|
||||||
value: 'value',
|
value: 'id',
|
||||||
color: 'color',
|
color: 'color',
|
||||||
options: 'children',
|
options: 'children',
|
||||||
};
|
};
|
||||||
@ -21,6 +21,7 @@ export type AssociationSelectProps<P = any> = RemoteSelectProps<P> & {
|
|||||||
const InternalAssociationSelect = connect(
|
const InternalAssociationSelect = connect(
|
||||||
(props: AssociationSelectProps) => {
|
(props: AssociationSelectProps) => {
|
||||||
const { fieldNames, objectValue = true } = props;
|
const { fieldNames, objectValue = true } = props;
|
||||||
|
const fieldSchema = useFieldSchema();
|
||||||
const service = useServiceOptions(props);
|
const service = useServiceOptions(props);
|
||||||
useFieldTitle();
|
useFieldTitle();
|
||||||
|
|
||||||
@ -46,7 +47,15 @@ const InternalAssociationSelect = connect(
|
|||||||
}
|
}
|
||||||
}, [props.value, normalizeValues]);
|
}, [props.value, normalizeValues]);
|
||||||
|
|
||||||
return <RemoteSelect {...props} objectValue={objectValue} value={value} service={service}></RemoteSelect>;
|
return (
|
||||||
|
<RemoteSelect
|
||||||
|
{...props}
|
||||||
|
multiple={fieldSchema['x-component-props']?.multiple !== false}
|
||||||
|
objectValue={objectValue}
|
||||||
|
value={value}
|
||||||
|
service={service}
|
||||||
|
></RemoteSelect>
|
||||||
|
);
|
||||||
},
|
},
|
||||||
mapProps(
|
mapProps(
|
||||||
{
|
{
|
||||||
|
@ -20,6 +20,7 @@ export type RemoteSelectProps<P = any> = SelectProps<P, any> & {
|
|||||||
target: string;
|
target: string;
|
||||||
wait?: number;
|
wait?: number;
|
||||||
manual?: boolean;
|
manual?: boolean;
|
||||||
|
multiple?:boolean;
|
||||||
mapOptions?: (data: any) => RemoteSelectProps['fieldNames'];
|
mapOptions?: (data: any) => RemoteSelectProps['fieldNames'];
|
||||||
targetField?: any;
|
targetField?: any;
|
||||||
service: ResourceActionOptions<P>;
|
service: ResourceActionOptions<P>;
|
||||||
@ -211,14 +212,25 @@ const InternalRemoteSelect = connect(
|
|||||||
async onClick() {
|
async onClick() {
|
||||||
await onClick();
|
await onClick();
|
||||||
const { data } = actionField.data.data?.data;
|
const { data } = actionField.data.data?.data;
|
||||||
form.setValuesIn(field.props.name, {
|
if (['oho', 'obo'].includes(collectionField.interface)) {
|
||||||
[fieldNames.label]: data[fieldNames.label],
|
form.setValuesIn(field.props.name, {
|
||||||
id: data.id,
|
[fieldNames.label]: data[fieldNames.label],
|
||||||
value: data.id,
|
id: data.id,
|
||||||
});
|
value: data.id,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
const values = form.values[fieldSchema.name] || [];
|
||||||
|
values.push({
|
||||||
|
[fieldNames.label]: data[fieldNames.label],
|
||||||
|
id: data.id,
|
||||||
|
value: data.id,
|
||||||
|
});
|
||||||
|
form.setValuesIn(field.props.name, values);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
console.log(others);
|
||||||
return (
|
return (
|
||||||
<div style={{ display: 'flex' }}>
|
<div style={{ display: 'flex' }}>
|
||||||
<Select
|
<Select
|
||||||
|
Loading…
Reference in New Issue
Block a user