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