fix(Data-template): fix field cannot be expanded (#2057)
* fix(Data-template): fix field cannot be expanded * fix: fix build errors
This commit is contained in:
被雨水过滤的空气-Rairn
GitHub
parent
d79951e209
commit
d0632d73fd
@ -1,15 +1,15 @@
|
||||
import { ISchema, useField, useFieldSchema, connect, mapProps } from '@formily/react';
|
||||
import { ISchema, connect, mapProps, useField, useFieldSchema } from '@formily/react';
|
||||
import { isValid, uid } from '@formily/shared';
|
||||
import { Menu, Tree as AntdTree } from 'antd';
|
||||
import { Tree as AntdTree, Menu } from 'antd';
|
||||
import { cloneDeep } from 'lodash';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useDesignable } from '../..';
|
||||
import { useCollection, useCollectionManager, useCollectionFieldsOptions } from '../../../collection-manager';
|
||||
import { useCollection, useCollectionFieldsOptions, useCollectionManager } from '../../../collection-manager';
|
||||
import { OpenModeSchemaItems } from '../../../schema-items';
|
||||
import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
|
||||
import { useLinkageAction } from './hooks';
|
||||
import { useCollectionState } from '../../../schema-settings/DataTemplates/hooks/useCollectionState';
|
||||
import { useLinkageAction } from './hooks';
|
||||
import { requestSettingsSchema } from './utils';
|
||||
|
||||
const Tree = connect(
|
||||
@ -70,7 +70,7 @@ export const ActionDesigner = (props) => {
|
||||
const isDelete = fieldSchema?.parent['x-component'] === 'CollectionField';
|
||||
const isDraggable = fieldSchema?.parent['x-component'] !== 'CollectionField';
|
||||
const isDuplicateAction = fieldSchema['x-action'] === 'duplicate';
|
||||
const { collectionList, getEnableFieldTree, onLoadData, onCheck } = useCollectionState(name);
|
||||
const { collectionList, getEnableFieldTree, getOnLoadData, getOnCheck } = useCollectionState(name);
|
||||
const duplicateValues = cloneDeep(fieldSchema['x-component-props'].duplicateFields || []);
|
||||
const options = useCollectionFieldsOptions(name, 1, ['id']);
|
||||
useEffect(() => {
|
||||
@ -236,11 +236,11 @@ export const ActionDesigner = (props) => {
|
||||
/>
|
||||
)}
|
||||
{isLinkageAction && <SchemaSettings.LinkageRules collectionName={name} />}
|
||||
{isDuplicateAction && [
|
||||
{isDuplicateAction && (
|
||||
<SchemaSettings.ModalItem
|
||||
title={t('Duplicate mode')}
|
||||
components={{ Tree }}
|
||||
scope={{ getEnableFieldTree, collectionName: name }}
|
||||
scope={{ getEnableFieldTree, collectionName: name, getOnLoadData, getOnCheck }}
|
||||
schema={
|
||||
{
|
||||
type: 'object',
|
||||
@ -283,8 +283,8 @@ export const ActionDesigner = (props) => {
|
||||
checkable: true,
|
||||
checkStrictly: true,
|
||||
selectable: false,
|
||||
loadData: onLoadData,
|
||||
onCheck,
|
||||
loadData: '{{ getOnLoadData($self) }}',
|
||||
onCheck: '{{ getOnCheck($self) }}',
|
||||
rootStyle: {
|
||||
padding: '8px 0',
|
||||
border: '1px solid #d9d9d9',
|
||||
@ -328,8 +328,8 @@ export const ActionDesigner = (props) => {
|
||||
});
|
||||
dn.refresh();
|
||||
}}
|
||||
/>,
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
<OpenModeSchemaItems openMode={isPopupAction} openSize={isPopupAction}></OpenModeSchemaItems>
|
||||
{isUpdateModePopupAction && (
|
||||
<SchemaSettings.SelectItem
|
||||
|
||||
@ -24,7 +24,6 @@ const Tree = connect(
|
||||
mapProps({
|
||||
value: 'checkedKeys',
|
||||
dataSource: 'treeData',
|
||||
// onInput: 'onCheck',
|
||||
}),
|
||||
);
|
||||
|
||||
@ -32,7 +31,7 @@ export const FormDataTemplates = observer(
|
||||
(props: any) => {
|
||||
const { useProps, formSchema, designerCtx } = props;
|
||||
const { defaultValues, collectionName } = useProps();
|
||||
const { collectionList, getEnableFieldTree, onLoadData, onCheck } = useCollectionState(collectionName);
|
||||
const { collectionList, getEnableFieldTree, getOnLoadData, getOnCheck } = useCollectionState(collectionName);
|
||||
const { getCollection, getCollectionField } = useCollectionManager();
|
||||
const { t } = useTranslation();
|
||||
|
||||
@ -73,6 +72,8 @@ export const FormDataTemplates = observer(
|
||||
getFieldNames,
|
||||
getFilter,
|
||||
getResource,
|
||||
getOnLoadData,
|
||||
getOnCheck,
|
||||
collectionName,
|
||||
}),
|
||||
[],
|
||||
@ -171,8 +172,8 @@ export const FormDataTemplates = observer(
|
||||
checkable: true,
|
||||
checkStrictly: true,
|
||||
selectable: false,
|
||||
loadData: onLoadData,
|
||||
onCheck,
|
||||
loadData: '{{ getOnLoadData($self) }}',
|
||||
onCheck: '{{ getOnCheck($self) }}',
|
||||
rootStyle: {
|
||||
padding: '8px 0',
|
||||
border: '1px solid #d9d9d9',
|
||||
|
||||
@ -1,19 +1,14 @@
|
||||
import { ArrayField } from '@formily/core';
|
||||
import { error } from '@nocobase/utils/client';
|
||||
import _ from 'lodash';
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import { useCollectionManager } from '../../../collection-manager';
|
||||
import { useCompile } from '../../../schema-component';
|
||||
import { TreeNode } from '../TreeLabel';
|
||||
|
||||
export const useCollectionState = (currentCollectionName: string) => {
|
||||
const { getCollectionFields, getAllCollectionsInheritChain, getCollection, getCollectionFieldsOptions } =
|
||||
useCollectionManager();
|
||||
const { getCollectionFields, getAllCollectionsInheritChain, getCollection } = useCollectionManager();
|
||||
const [collectionList] = useState(getCollectionList);
|
||||
const compile = useCompile();
|
||||
|
||||
let dataFields: ArrayField = {} as any;
|
||||
|
||||
function getCollectionList() {
|
||||
const collections = getAllCollectionsInheritChain(currentCollectionName);
|
||||
return collections.map((name) => ({ label: getCollection(name)?.title, value: name }));
|
||||
@ -120,12 +115,7 @@ export const useCollectionState = (currentCollectionName: string) => {
|
||||
.filter(Boolean);
|
||||
};
|
||||
|
||||
/**
|
||||
* fields: 通过在 x-reactions 字段中传递 $self 得到的，相当于 useField 的返回值，目的是修改其中的状态页面会更新
|
||||
*/
|
||||
const getEnableFieldTree = useCallback((collectionName: string, fields: ArrayField) => {
|
||||
dataFields = fields;
|
||||
|
||||
const getEnableFieldTree = useCallback((collectionName: string) => {
|
||||
if (!collectionName) {
|
||||
return [];
|
||||
}
|
||||
@ -138,49 +128,38 @@ export const useCollectionState = (currentCollectionName: string) => {
|
||||
}
|
||||
}, []);
|
||||
|
||||
const onLoadData = useCallback((node) => {
|
||||
return new Promise((resolve) => {
|
||||
if (node.children.length) {
|
||||
node.children.forEach((child) => {
|
||||
loadChildren({ node: child, traverseAssociations, traverseFields, systemKeys, dataFields });
|
||||
});
|
||||
return resolve(void 0);
|
||||
}
|
||||
const getOnLoadData = useCallback((fields: ArrayField) => {
|
||||
return (node) => {
|
||||
return new Promise((resolve) => {
|
||||
if (node.children.length) {
|
||||
node.children.forEach((child) => {
|
||||
loadChildren({ node: child, traverseAssociations, traverseFields, systemKeys, fields });
|
||||
});
|
||||
return resolve(void 0);
|
||||
}
|
||||
|
||||
loadChildren({ node, traverseAssociations, traverseFields, systemKeys, dataFields });
|
||||
resolve(void 0);
|
||||
});
|
||||
loadChildren({ node, traverseAssociations, traverseFields, systemKeys, fields });
|
||||
resolve(void 0);
|
||||
});
|
||||
};
|
||||
}, []);
|
||||
|
||||
const onCheck = useCallback((checkedKeys, { node, checked }) => {
|
||||
if (checked) {
|
||||
// let parentKey = node.key.split('.').slice(0, -1).join('.');
|
||||
|
||||
try {
|
||||
// 当子节点被选中时，也选中所有祖先节点，提高用户辨识度
|
||||
// while (parentKey) {
|
||||
// if (parentKey) {
|
||||
// checkedKeys.checked = _.uniq([...checkedKeys.checked, parentKey]);
|
||||
// }
|
||||
// parentKey = parentKey.split('.').slice(0, -1).join('.');
|
||||
// }
|
||||
} catch (err) {
|
||||
error(err);
|
||||
}
|
||||
}
|
||||
|
||||
dataFields.value = checkedKeys;
|
||||
const getOnCheck = useCallback((fields: ArrayField) => {
|
||||
return (checkedKeys) => {
|
||||
fields.value = checkedKeys;
|
||||
};
|
||||
}, []);
|
||||
|
||||
return {
|
||||
collectionList,
|
||||
getEnableFieldTree,
|
||||
onLoadData,
|
||||
onCheck,
|
||||
getOnLoadData,
|
||||
getOnCheck,
|
||||
};
|
||||
};
|
||||
|
||||
// 广度优先遍历查找一个 key 相等的节点并返回
|
||||
// 注意：返回的 node 是一个响应式对象，修改它的属性会触发页面更新
|
||||
function findNode(treeData, item) {
|
||||
const queue = [...treeData];
|
||||
while (queue.length) {
|
||||
@ -194,8 +173,8 @@ function findNode(treeData, item) {
|
||||
}
|
||||
}
|
||||
|
||||
function loadChildren({ node, traverseAssociations, traverseFields, systemKeys, dataFields }) {
|
||||
const activeNode = findNode(dataFields.componentProps.treeData, node);
|
||||
function loadChildren({ node, traverseAssociations, traverseFields, systemKeys, fields }) {
|
||||
const activeNode = findNode(fields.componentProps.treeData, node);
|
||||
let children = [];
|
||||
|
||||
// 多对多和多对一只展示关系字段
|
||||
|
||||
Loading…
Reference in New Issue
Block a user