chore: associate field

This commit is contained in:
katherinehhh 2023-04-28 17:26:22 +08:00
parent 824629b7fe
commit 1f341ed5a0
4 changed files with 53 additions and 16 deletions

View File

@ -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) => {
if (['oho', 'obo'].includes(collectionField.interface)) {
parentForm.setValuesIn(fieldName, form.values); parentForm.setValuesIn(fieldName, form.values);
formBlockCtx?.form?.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,

View File

@ -107,12 +107,15 @@ export const o2m: IField = {
array: { array: {
type: 'array', type: 'array',
'x-component': 'ArrayCards', 'x-component': 'ArrayCards',
'x-component-props': {
headStyle: { display: 'none' },
},
default: [{}], 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: {},

View File

@ -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(
{ {

View File

@ -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;
if (['oho', 'obo'].includes(collectionField.interface)) {
form.setValuesIn(field.props.name, { form.setValuesIn(field.props.name, {
[fieldNames.label]: data[fieldNames.label], [fieldNames.label]: data[fieldNames.label],
id: data.id, id: data.id,
value: 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