chore: kankan groupfield supports relations fields

This commit is contained in:
katherinehhh 2023-04-14 18:11:08 +08:00
parent 4e5ac6f41b
commit 60240146a2
4 changed files with 37 additions and 11 deletions

View File

@ -14,8 +14,8 @@ export const KanbanBlockContext = createContext<any>({});
const useGroupField = (props) => { const useGroupField = (props) => {
const { getCollectionField } = useCollectionManager(); const { getCollectionField } = useCollectionManager();
const { groupField, collection } = props; const { groupField, collection } = props;
if (typeof groupField === 'string') { if (typeof groupField === 'object') {
return getCollectionField(`${collection}.${groupField}`); return getCollectionField(`${collection}.${groupField[0]}`);
} }
if (groupField?.name) { if (groupField?.name) {
return getCollectionField(groupField?.name); return getCollectionField(groupField?.name);
@ -120,7 +120,13 @@ export const KanbanBlockProvider = (props) => {
} }
return ( return (
<BlockProvider {...props} params={params}> <BlockProvider {...props} params={params}>
<InternalKanbanBlockProvider {...props} params={params} groupField={groupField} columns={columns} /> <InternalKanbanBlockProvider
{...props}
params={params}
groupField={groupField}
associateCollectionField={props.groupField}
columns={columns}
/>
</BlockProvider> </BlockProvider>
); );
}; };

View File

@ -39,7 +39,7 @@ function Column({
allowAddCard, allowAddCard,
cardAdderPosition = 'top', cardAdderPosition = 'top',
}) { }) {
const { fixedBlock, groupField, field } = useKanbanBlockContext(); const { fixedBlock, groupField, associateCollectionField } = useKanbanBlockContext();
const { name } = useCollection(); const { name } = useCollection();
const [headerHeight, setHeaderHeight] = useState(0); const [headerHeight, setHeaderHeight] = useState(0);
const [cardData, setCardData] = useState(children.cards); const [cardData, setCardData] = useState(children.cards);
@ -55,7 +55,7 @@ function Column({
if (children.value !== '__unknown__') { if (children.value !== '__unknown__') {
const filter = isAssociationField const filter = isAssociationField
? { ? {
$and: [{ [groupField.name]: { id: { $eq: children.value } } }], $and: [{ [groupField.name]: { [associateCollectionField[1]]: { $eq: children.value } } }],
} }
: { : {
$and: [{ [groupField.name]: { $eq: children.value } }], $and: [{ [groupField.name]: { $eq: children.value } }],

View File

@ -3,17 +3,20 @@ import { observer } from '@formily/react';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { SchemaComponent } from '../../'; import { SchemaComponent } from '../../';
import { useAPIClient } from '../../api-client';
export const KanbanOptions = observer((props) => { export const KanbanOptions = observer((props) => {
const { groupField, collectionFields } = props; const { groupField, collectionFields, getAssociateResource } = props;
const [dataSource, setDataSource] = useState([]); const [dataSource, setDataSource] = useState([]);
const { t } = useTranslation(); const { t } = useTranslation();
console.log(getAssociateResource);
useEffect(() => { useEffect(() => {
if (groupField) { if (groupField) {
const field = collectionFields.find((v) => { const field = collectionFields.find((v) => {
return v.name === groupField[0]; return v.name === groupField[0];
}); });
console.log(field);
if (['select', 'radioGroup'].includes(field.interface)) { if (['select', 'radioGroup'].includes(field.interface)) {
const data = field.uiSchema.enum.map((v) => { const data = field.uiSchema.enum.map((v) => {
return { return {
@ -21,6 +24,20 @@ export const KanbanOptions = observer((props) => {
}; };
}); });
setDataSource(data); setDataSource(data);
} else {
const resource = getAssociateResource(field.target);
resource.list({ paginate: false }).then(({ data }) => {
const optionsData = data?.data.map((v) => {
return {
...v,
value: v[groupField[1]],
label: v[groupField[1]],
};
});
setDataSource(optionsData);
});
console.log(collectionFields);
console.log(groupField);
} }
} }
}, [groupField]); }, [groupField]);

View File

@ -16,6 +16,9 @@ export const KanbanBlockInitializer = (props) => {
const { getCollectionFields, getCollectionFieldsOptions } = useCollectionManager(); const { getCollectionFields, getCollectionFieldsOptions } = useCollectionManager();
const options: any = useContext(SchemaOptionsContext); const options: any = useContext(SchemaOptionsContext);
const api = useAPIClient(); const api = useAPIClient();
const getAssociateResource = (collectionName) => {
return api.resource(collectionName);
};
return ( return (
<DataBlockInitializer <DataBlockInitializer
{...props} {...props}
@ -29,7 +32,7 @@ export const KanbanBlockInitializer = (props) => {
const values = await FormDialog(t('Create kanban block'), () => { const values = await FormDialog(t('Create kanban block'), () => {
return ( return (
<SchemaComponentOptions <SchemaComponentOptions
scope={{ ...options.scope, collectionFields }} scope={{ ...options.scope, collectionFields, getAssociateResource }}
components={{ ...options.components, KanbanOptions }} components={{ ...options.components, KanbanOptions }}
> >
<FormLayout layout={'vertical'}> <FormLayout layout={'vertical'}>
@ -59,7 +62,7 @@ export const KanbanBlockInitializer = (props) => {
dependencies: ['groupField'], dependencies: ['groupField'],
fulfill: { fulfill: {
schema: { schema: {
'x-component-props': '{{{collectionFields,...$form.values}}}', //任意层次属性都支持表达式 'x-component-props': '{{{getAssociateResource,collectionFields,...$form.values}}}',
}, },
}, },
}, },
@ -73,7 +76,7 @@ export const KanbanBlockInitializer = (props) => {
}).open({ }).open({
initialValues: {}, initialValues: {},
}); });
const groupField=values.groupField?.[0]; const groupField = values.groupField?.[0];
const sortName = `${groupField}_sort`; const sortName = `${groupField}_sort`;
const exists = collectionFields?.find((field) => field.name === sortName); const exists = collectionFields?.find((field) => field.name === sortName);
if (!exists) { if (!exists) {
@ -88,9 +91,9 @@ export const KanbanBlockInitializer = (props) => {
} }
insert( insert(
createKanbanBlockSchema({ createKanbanBlockSchema({
groupField: groupField, groupField: values.groupField,
collection: item.name, collection: item.name,
columns:values.options, columns: values.options,
params: { params: {
sort: [sortName], sort: [sortName],
paginate: false, paginate: false,