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 { 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) => { | ||||
|   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, dataFields }); | ||||
|             loadChildren({ node: child, traverseAssociations, traverseFields, systemKeys, fields }); | ||||
|           }); | ||||
|           return resolve(void 0); | ||||
|         } | ||||
| 
 | ||||
|       loadChildren({ node, traverseAssociations, traverseFields, systemKeys, dataFields }); | ||||
|         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