refactor: qx-base-condition-item

qiang.tian
1 parent f9ac2b90
Showing 10 changed files with 521 additions and 195 deletions
src/qx-base-condition-item/index.less
src/qx-base-condition-item/index.tsx
src/qx-base-condition/index.tsx
src/qx-condition/index.md
src/qx-condition/index.tsx
src/qx-field-setter/components/input-setter.tsx
src/qx-flow-node-selector/index.less
src/qx-flow-node-selector/index.md
src/qx-flow-node-selector/index.tsx
src/utils/index.ts
--- a/src/qx-base-condition-item/index.less
View file @a4eadc5
+++ b/src/qx-base-condition-item/index.less
View file @a4eadc5
@@ -70,6 +70,12 @@
     text-align: right;
   }
+  &__header-text {
+    &.error {
+      color: @E3
+    }
+  }
+
   &:hover {
     .qx-base-condition-item__header-right {
       transform: translateX(0);
--- a/src/qx-base-condition-item/index.tsx
View file @a4eadc5
+++ b/src/qx-base-condition-item/index.tsx
View file @a4eadc5
 import { ControlOutlined } from '@ant-design/icons';
 import { Select, Tooltip } from 'antd';
+import cls from 'classnames';
 import { size } from 'lodash-es';
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { FieldBaseType, type QxBaseConditionField } from '../qx-base-condition';
 import { QxBaseIcon } from '../qx-base-icon';
 import { QxFieldSetter } from '../qx-field-setter';
@@ -9,7 +10,6 @@ import type { INode } from '../qx-flow-node-selector';
 import {
   FieldMapType,
   QxFlowNodeFieldSelector,
-  useNodeFieldDisplay,
 } from '../qx-flow-node-selector';
 import { QxWidgetIcon } from '../qx-widget-icon';
@@ -691,9 +691,13 @@ export const QxBaseConditionItem: React.FC<QxBaseConditionItemProps> = ({
   fieldGroupType,
   showAssignment = true,
   isMixValue,
+  fieldType,
 }) => {
   const valuesObj = value?.valuesObj?.[0] || {};
   const [open, setOpen] = useState(false);
+  const fieldSelectorRef = useRef<any>();
+  const [inputDisplay, setInputDisplay] = useState();
+  const isMount = useRef(false);
   const handleChange = (val: any[]) => {
     onChange?.({
@@ -738,23 +742,31 @@ export const QxBaseConditionItem: React.FC<QxBaseConditionItemProps> = ({
     setOpen(false);
   };
-  const baseType = FieldBaseType[field.extract?.fieldType] || field.extract?.fieldType 
-  const limitTypes = fieldLimitTypes[baseType] ? fieldLimitTypes[baseType] : [baseType]
+  const baseType = FieldBaseType[fieldType] || fieldType;
+  const limitTypes = fieldLimitTypes[baseType]
+    ? fieldLimitTypes[baseType]
+    : [baseType];
-  const { genDisplayDom } = useNodeFieldDisplay({
-    node: node,
-    nodes: nodes,
-    limitTypes,
-    value: valuesObj?.value,
-    subset,
-  });
-
-  const getName = (values: any[]) => {
-    return Array.isArray(values)
-      ? values.map((value) => genDisplayDom(value))
-      : [];
+  const getName = () => {
+    console.log(
+      'getName-1',
+      fieldSelectorRef.current?.getInputDisplay?.(),
+      inputDisplay,
+    );
+    return fieldSelectorRef.current?.getInputDisplay?.() || inputDisplay;
   };
+  useEffect(() => {
+    if (fieldSelectorRef.current && !isMount.current) {
+      setTimeout(() => {
+        console.log('getName-2', fieldSelectorRef.current.getInputDisplay?.());
+        const display = fieldSelectorRef.current.getInputDisplay?.();
+        isMount.current = !!display;
+        setInputDisplay(fieldSelectorRef.current.getInputDisplay?.());
+      }, 10);
+    }
+  });
+
   const RenderContent = (
     <>
       <QxFieldSetter
@@ -766,7 +778,7 @@ export const QxBaseConditionItem: React.FC<QxBaseConditionItemProps> = ({
         isRange={optValTypeCheck.isRangeType(value?.opt)}
         disabled={optValTypeCheck.isEmptyType(value?.opt)}
         getName={getName}
-        widget={field.extract?.widget}
+        widget={field?.extract?.widget}
         isMixValue={isMixValue}
       />
@@ -804,14 +816,18 @@ export const QxBaseConditionItem: React.FC<QxBaseConditionItemProps> = ({
       <div className="qx-base-condition-item__header">
         <div className="qx-base-condition-item__header-left">
           <span className="qx-base-condition-item__header-icon">
-            {field.extract?.widget ? (
+            {field?.extract?.widget ? (
               <QxWidgetIcon widgetName={field.extract.widget} />
             ) : (
-              `[${FieldMapType[field.extract.fieldType]}]`
+              `[${FieldMapType[fieldType]}]`
             )}
           </span>
-          <span className="qx-base-condition-item__header-text">
-            {field.name}
+          <span
+            className={cls('qx-base-condition-item__header-text', {
+              error: !field,
+            })}
+          >
+            {field?.name || '已删除'}
           </span>
         </div>
         <div className="qx-base-condition-item__header-right">
@@ -822,7 +838,7 @@ export const QxBaseConditionItem: React.FC<QxBaseConditionItemProps> = ({
             <Tooltip title="删除">
               <QxBaseIcon
                 type="qx-icon-delete"
-                onClick={() => remove?.(field)}
+                onClick={() => remove?.(value)}
               />
             </Tooltip>
           </span>
@@ -831,6 +847,7 @@ export const QxBaseConditionItem: React.FC<QxBaseConditionItemProps> = ({
       <div className="qx-base-condition-item__content">
         {showAssignment ? (
           <QxFlowNodeFieldSelector
+            ref={fieldSelectorRef}
             mode="variable"
             node={node!}
             nodes={nodes!}
--- a/src/qx-base-condition/index.tsx
View file @a4eadc5
+++ b/src/qx-base-condition/index.tsx
View file @a4eadc5
@@ -86,12 +86,13 @@ export const QxBaseCondition: React.FC<QxBaseConditionProps> = (props) => {
         key={item.code || key}
         mode={props.mode || 'condition'}
         {...item}
-        fieldGroupType={getFieldGroupType(item.field.extract)}
+        fieldGroupType={getFieldGroupType(item.field?.extract || { fieldType: item.type })}
         value={Object.assign(
           {},
-          getDefaultCondition(item.field),
+          getDefaultCondition(item.field || props.value?.[key]),
           props.value?.[key] || {},
         )}
+        fieldType={item?.field?.fieldType || item.type}
         nodes={props.nodes}
         node={props.node}
         subset={props.subset}
--- a/src/qx-condition/index.md
View file @a4eadc5
+++ b/src/qx-condition/index.md
View file @a4eadc5
@@ -17,6 +17,138 @@ group:
 import { QxCondition } from '@qx/common';
 import { Form } from 'antd';
+const node = {
+  id: 'dfc29d5b64fa42489a65b3cfaeb999da',
+  type: 'default_DF_CONDITION',
+  name: '条件',
+  iconColor: '#F77234',
+  data: {},
+  children: [],
+  previousId: 'b0a2c7925a7b45e884fe8f82a0f39e9b',
+};
+
+const nodes = [
+  {
+    id: '4c4fc5213db149808c57d093b15e6295',
+    name: '开始',
+    type: 'default_DF_START',
+    data: {
+      nodeVersion: '3.0.0',
+      data: {
+        enablePropagation: false,
+        propagation: 'REQUIRED',
+        isolation: 'REPEATABLE_READ',
+      },
+      result: [
+        {
+          id: '9911c21704ba4d8da8651185f441f9d3',
+          code: '5sfuiz',
+          type: 'OBJECT',
+          title: '5sfuiz',
+          qxProps: {},
+          pid: '',
+          description: '',
+          valueMapping: { mappingValues: [] },
+          valuesObj: [],
+          child: [
+            {
+              id: '022c007b4c304c58850ed592ef5c1774',
+              type: 'STRING',
+              pid: '9911c21704ba4d8da8651185f441f9d3',
+              code: 'gcc8qd',
+              title: 'gcc8qd',
+            },
+          ],
+        },
+        {
+          id: '6289083b52474567aba6d3f5fe9eda90',
+          code: '3coizb',
+          type: 'FORM',
+          title: '3coizb',
+          qxProps: {
+            appId: 'HQIXKC0dxbuYENalZzP',
+            formId: 'VX1TdanWSgYrKYn3vT8',
+            isTree: false,
+          },
+          pid: '',
+        },
+
+        {
+          id: 'deb0705410b24087bf22ccee74e4e7e4',
+          code: 'tbxkuz',
+          type: 'FORM',
+          title: 'input',
+          qxProps: {
+            appId: 'k6cY4GqjTaxQTW3XLua',
+            formId: 'FhkvYvVgpWmijBVEbk2',
+            isTree: false,
+          },
+          description: '',
+          valueMapping: {
+            mappingValues: [],
+          },
+          required: false,
+          disabled: true,
+        },
+        {
+          id: '3b1e0f82c6a049dca8a01d83a7a09b35',
+          code: 'vjo6ta',
+          type: 'OBJECT',
+          title: 'vjo6ta',
+          qxProps: {},
+          pid: '',
+          description: '',
+          valueMapping: {
+            mappingValues: [],
+          },
+          valuesObj: [],
+          child: [
+            {
+              id: 'be3d37ae184144dc88c0d39a644fe2c1',
+              type: 'STRING',
+              pid: '3b1e0f82c6a049dca8a01d83a7a09b35',
+              code: '87b2ww',
+              title: '87b2ww',
+            },
+          ],
+        },
+      ],
+    },
+    children: [],
+  },
+  {
+    id: 'b0a2c7925a7b45e884fe8f82a0f39e9b',
+    name: '分支',
+    type: 'default_DF_BRANCH',
+    previousId: '4c4fc5213db149808c57d093b15e6295',
+    children: [
+      {
+        id: 'dfc29d5b64fa42489a65b3cfaeb999da',
+        type: 'default_DF_CONDITION',
+        previousId: 'b0a2c7925a7b45e884fe8f82a0f39e9b',
+        name: '条件',
+        data: {},
+        children: [],
+      },
+      {
+        id: '003ca991f70548a3ba8c4f9b8d0daad2',
+        name: '条件',
+        type: 'default_DF_CONDITION',
+        previousId: 'b0a2c7925a7b45e884fe8f82a0f39e9b',
+        children: [],
+      },
+    ],
+  },
+  {
+    id: '576f817ce67846318d1132f231128f05',
+    name: '结束',
+    previousId: 'b0a2c7925a7b45e884fe8f82a0f39e9b',
+    type: 'default_DF_END',
+    data: { nodeVersion: '3.0.0' },
+    children: [],
+  },
+];
+
 export default () => {
   return (
     <div>
@@ -28,32 +160,44 @@ export default () => {
               {
                 type: 'STRING',
                 name: '文本',
-                mappingValues: [],
-                field: {
-                  code: 'text',
-                  name: '文本',
-                  extract: { widget: 'qxInput', fieldType: 'STRING' },
-                },
-              },
-              {
-                type: 'STRING',
-                name: '文本',
-                mappingValues: [],
+                code: '${4c4fc5213db149808c57d093b15e6295|022c007b4c304c58850ed592ef5c1774}',
+                mappingValues: [
+                  '${4c4fc5213db149808c57d093b15e6295|022c007b4c304c58850ed592ef5c1774}',
+                ],
                 field: {
-                  code: 'text',
-                  name: '文本',
-                  extract: { widget: 'qxInput', fieldType: 'STRING' },
+                  id: '022c007b4c304c58850ed592ef5c1774',
+                  type: 'STRING',
+                  pid: '9911c21704ba4d8da8651185f441f9d3',
+                  code: '4c4fc5213db149808c57d093b15e6295|022c007b4c304c58850ed592ef5c1774',
+                  title: 'gcc8qd',
+                  name: '2313123123123',
+                  extract: {
+                    fieldType: 'STRING',
+                    fieldKey: '022c007b4c304c58850ed592ef5c1774',
+                  },
                 },
+                valuesObj: [
+                  {
+                    value:
+                      '${4c4fc5213db149808c57d093b15e6295|022c007b4c304c58850ed592ef5c1774}',
+                    type: 'FIELD',
+                  },
+                ],
               },
             ],
           },
         }}
         onValuesChange={(value, values) => {
-          console.log('values', values)
+          console.log('values', values);
         }}
       >
         <Form.Item name="condition">
-          <QxCondition showAssignment={false} />
+          <QxCondition
+            nodes={nodes}
+            node={node}
+            showHeader
+            formId="FhkvYvVgpWmijBVEbk2"
+          />
         </Form.Item>
       </Form>
     </div>
--- a/src/qx-condition/index.tsx
View file @a4eadc5
+++ b/src/qx-condition/index.tsx
View file @a4eadc5
@@ -7,8 +7,11 @@ import {
 import { QxBaseIcon } from '../qx-base-icon';
 import { QxConditionSql, SqlType } from '../qx-condition-sql';
 import QxFieldPopover from '../qx-field/src/popover';
-import FieldsCheckboxGroup from '../qx-field/src/popover/checkbox';
-import { INode, QxFlowNodeFieldSelector } from '../qx-flow-node-selector';
+import {
+  FiledType,
+  INode,
+  QxFlowNodeFieldSelector,
+} from '../qx-flow-node-selector';
 import { request } from '../utils';
 import './index.less';
@@ -32,12 +35,13 @@ export const QxCondition: React.FC<QxConditionProps> = ({
   headerLeft,
   headerRight,
   formId,
-  multiple,
-  showHeader = false
+  showHeader = false,
 }) => {
-  const [fields, setFields] = useState([]);
+  const [fields, setFields] = useState<FiledType[]>([]);
+
+  const fieldSelectorRef = useRef<any>();
-  const fieldSelectorRef = useRef();
+  const isMount = useRef(false);
   const handleChange = (opt: Partial<QxConditionValueType>) => {
     onChange?.(Object.assign({}, value, opt, { enabled }));
@@ -53,18 +57,32 @@ export const QxCondition: React.FC<QxConditionProps> = ({
   };
   useEffect(() => {
-    if (formId) handleGetFieldsList(formId);
+    if (formId && !showAssignment) handleGetFieldsList(formId);
   }, [formId]);
-  const PopoverComponent = multiple ? FieldsCheckboxGroup : QxFieldPopover;
+  const handleAddField = (val: any) => {
+    handleChange({
+      operators: [
+        ...(value?.operators || []),
+        {
+          field: val,
+          code: val.code,
+          name: val.name,
+          type: val.extract?.fieldType,
+          opt: 'IS',
+          mappingValues: [],
+        },
+      ],
+    });
+  };
-  const handleAddField = (val: any, opt: any) => {
+  const handleAddFlowNodeField = (val: any, opt: any) => {
     handleChange({
       operators: [
         ...(value?.operators || []),
         {
           field: opt,
-          code: opt.code,
+          code: val,
           name: opt.name,
           type: opt.extract?.fieldType,
           opt: 'IS',
@@ -72,20 +90,40 @@ export const QxCondition: React.FC<QxConditionProps> = ({
         },
       ],
     });
-    // setFieldValue(
-    //   'condition',
-    //   Object.assign({}, condition, {
-    //     operators: [
-    //       ...(condition.operators || []),
-    //       { field: opt, code: val },
-    //     ],
-    //   }),
-    // );
   };
-  // const fieldOpt = useMemo(() => {
-  // return  fieldSelectorRef.current?.fieldMap || {};
-  // }, []);
+  console.log('resultFieldMap-0', fieldSelectorRef.current);
+
+  const handleGetResultMap = async () => {
+    if (!fieldSelectorRef.current || isMount.current) return;
+    isMount.current = true;
+
+    console.log('resultFieldMap-1', fieldSelectorRef.current);
+    const resultFieldMap =
+      await fieldSelectorRef.current?.getResultFieldMap?.();
+    console.log('resultFieldMap-2', resultFieldMap);
+
+    const newOperators = Array.isArray(value?.operators)
+      ? value?.operators.map((item) => ({
+          ...item,
+          field: showAssignment
+            ? resultFieldMap?.[item.field?.code]
+            : fields?.find((field) => item.code === field.code),
+        }))
+      : [];
+
+    handleChange({ operators: newOperators });
+  };
+
+  useEffect(() => {
+    handleGetResultMap();
+  }, [fieldSelectorRef.current]);
+
+  // useEffect(() => {
+  //   if (Array.isArray(value?.operators)) {
+  //     setOperators(value?.operators)
+  //   }
+  // }, [value?.operators])
   const RenderHeader = header ? (
     header
@@ -98,13 +136,13 @@ export const QxCondition: React.FC<QxConditionProps> = ({
       )}
       {!headerRight ? (
         <div className="qx-condition-header__right">
-          {node ? (
+          {showAssignment && node ? (
             <QxFlowNodeFieldSelector
               ref={fieldSelectorRef}
               node={node}
               nodes={nodes!}
               mode="variable"
-              onChange={handleAddField}
+              onChange={handleAddFlowNodeField}
             >
               <Button size="small" type="link">
                 <QxBaseIcon style={{ fontSize: 16 }} type="qx-icon-plus" />
@@ -112,17 +150,12 @@ export const QxCondition: React.FC<QxConditionProps> = ({
               </Button>
             </QxFlowNodeFieldSelector>
           ) : (
-            <PopoverComponent
-              ref={fieldSelectorRef}
-              data={fields}
-              onSelect={handleAddField}
-              onChange={handleAddField}
-            >
+            <QxFieldPopover data={fields} onSelect={handleAddField}>
               <Button size="small" type="link">
                 <QxBaseIcon style={{ fontSize: 16 }} type="qx-icon-plus" />
                 添加字段
               </Button>
-            </PopoverComponent>
+            </QxFieldPopover>
           )}
         </div>
       ) : (
@@ -130,8 +163,6 @@ export const QxCondition: React.FC<QxConditionProps> = ({
       )}
     </div>
   );
-  
-  console.log('operators', fieldSelectorRef);
   return (
     <div className={`qx-condition ${className && className}`} style={style}>
--- a/src/qx-field-setter/components/input-setter.tsx
View file @a4eadc5
+++ b/src/qx-field-setter/components/input-setter.tsx
View file @a4eadc5
-import React, { useEffect, useState } from 'react';
+import { CloseOutlined } from '@ant-design/icons';
 import { Tag } from 'antd';
+import React, { useEffect, useState } from 'react';
 import { ParamValueType } from '../../qx-filter-condition/filter';
 import { QxTagsInput } from '../../qx-tags-input';
-import { CloseOutlined } from '@ant-design/icons';
 interface InputSetterProps {
   value?: any[];
--- a/src/qx-flow-node-selector/index.less
View file @a4eadc5
+++ b/src/qx-flow-node-selector/index.less
View file @a4eadc5
@@ -137,6 +137,12 @@
           align-items: center;
           color: @N6;
         }
+
+        &__text {
+          &.error {
+            color: @E3;
+          }
+        }
       }
     }
--- a/src/qx-flow-node-selector/index.md
View file @a4eadc5
+++ b/src/qx-flow-node-selector/index.md
View file @a4eadc5
@@ -15,6 +15,7 @@ group:
 ```tsx
 import { QxFlowNodeFieldSelector } from '@qx/common';
+import { Form } from 'antd';
 const node = {
   id: 'dfc29d5b64fa42489a65b3cfaeb999da',
@@ -71,6 +72,46 @@ const nodes = [
           },
           pid: '',
         },
+
+        {
+          id: 'deb0705410b24087bf22ccee74e4e7e4',
+          code: 'tbxkuz',
+          type: 'FORM',
+          title: 'input',
+          qxProps: {
+            appId: 'k6cY4GqjTaxQTW3XLua',
+            formId: 'FhkvYvVgpWmijBVEbk2',
+            isTree: false,
+          },
+          description: '',
+          valueMapping: {
+            mappingValues: [],
+          },
+          required: false,
+          disabled: true,
+        },
+        {
+          id: '3b1e0f82c6a049dca8a01d83a7a09b35',
+          code: 'vjo6ta',
+          type: 'OBJECT',
+          title: 'vjo6ta',
+          qxProps: {},
+          pid: '',
+          description: '',
+          valueMapping: {
+            mappingValues: [],
+          },
+          valuesObj: [],
+          child: [
+            {
+              id: 'be3d37ae184144dc88c0d39a644fe2c1',
+              type: 'STRING',
+              pid: '3b1e0f82c6a049dca8a01d83a7a09b35',
+              code: '87b2ww',
+              title: '87b2ww',
+            },
+          ],
+        },
       ],
     },
     children: [],
@@ -109,7 +150,18 @@ const nodes = [
 ];
 export default () => {
-  return <QxFlowNodeFieldSelector node={node} nodes={nodes} />;
+  return (
+    <Form
+      initialValues={{
+        field:
+          '${4c4fc5213db149808c57d093b15e6295|be3d37ae184144dc88c0d39a644fe2c1}',
+      }}
+    >
+      <Form.Item name="field">
+        <QxFlowNodeFieldSelector node={node} nodes={nodes} />
+      </Form.Item>
+    </Form>
+  );
 };
 ```
--- a/src/qx-flow-node-selector/index.tsx
View file @a4eadc5
+++ b/src/qx-flow-node-selector/index.tsx
View file @a4eadc5
@@ -2,7 +2,7 @@ import { QxWidgetIcon } from '@qx/common';
 import { Collapse, Dropdown, Empty, Tag } from 'antd';
 import cls from 'classnames';
 import { cloneDeep } from 'lodash-es';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { FieldBaseType } from '../qx-base-condition';
 import { QxBaseIcon } from '../qx-base-icon';
 import { request } from '../utils';
@@ -48,19 +48,19 @@ export const getParentNodes = (
   return parentNode;
 };
-export enum FieldMapType {
-  'STRING' = '文本',
-  'NUMBER' = '数字',
-  'BOOL' = '布尔',
-  'TIME' = '日期',
-  'OBJECT' = '对象',
-  'ARRAY' = '数组',
-  'FORM' = '表单',
-  'USER' = '人员',
-  'ORG' = '部门',
-  'FILE' = '文件',
-  'PIC' = '图片',
-}
+export const FieldMapType = {
+  STRING: '文本',
+  NUMBER: '数字',
+  BOOL: '布尔',
+  TIME: '日期',
+  OBJECT: '对象',
+  ARRAY: '数组',
+  FORM: '表单',
+  USER: '人员',
+  ORG: '部门',
+  FILE: '文件',
+  PIC: '图片',
+};
 interface NodeFieldDisPlay {
   node?: INode;
@@ -95,7 +95,32 @@ export const useNodeFieldDisplay = ({
   );
   const [inputDisplay, setInputDisplay] = useState<React.ReactNode>();
-  const [optionalNodes, setOptionalNodes] = useState<INode[]>([]); // 根据 fieldType 过滤后的 nodes
+  const [optionalNodes, setOptionalNodes] = useState<FiledType[]>([]); // 根据 fieldType 过滤后的 nodes
+
+  const getResultFieldMap = (optionalNodes: FiledType[]) => {
+    const resultMap: Record<string, FiledType | INode> = {};
+
+    function genResultMap(result: FiledType[]) {
+      if (Array.isArray(result)) {
+        result.forEach((i) => {
+          resultMap[i.code] = i;
+          if (i.child) {
+            genResultMap(i.child);
+          }
+        });
+      }
+    }
+
+    genResultMap(optionalNodes);
+    return resultMap;
+  };
+
+  const resultFieldMap = useRef(getResultFieldMap(optionalNodes));
+
+  const displayDom = useRef<React.ReactNode>();
+
+  const resolveDisplayConfig = useRef<() => void>();
+  const resolveFieldResultMap = useRef<(value: any) => void>();
   const getIds = (val?: string) => {
     if (!val) return [];
@@ -122,35 +147,54 @@ export const useNodeFieldDisplay = ({
     ];
   };
-  const getDisplayConfig = (value: string, nodes: INode[] = optionalNodes) => {
-    const itemIds = getIds(value);
-
-    if (!itemIds || !itemIds.length) return [];
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    return itemIds
-      .map((id) => getResultFieldMaps(nodes)[id])
-      .filter((i) => !!i);
+  const handleGetDisplayConfig = (
+    value: string,
+    map: Record<string, any> = resultFieldMap.current,
+  ) => {
+    const itemIds = getIds(value) || [];
+    return itemIds.map((id) => map[id]);
   };
-  const genDisplayDom = (value: string, nodes: INode[] = optionalNodes) => {
-    const displayConfig = getDisplayConfig(value, nodes);
+  const getDisplayConfig = async (val = value): Promise<FiledType[]> => {
+    return new Promise((resolve, reject) => {
+      resolveDisplayConfig.current = () => {
+        try {
+          console.log('handleGetDisplayConfig');
+          resolve(handleGetDisplayConfig(val!));
+        } catch (error) {
+          reject(error);
+        }
+      };
+    });
+  };
+  const genDisplayDom = async (val = value) => {
+    const displayConfig = await getDisplayConfig(val);
+    console.log('displayConfig', displayConfig);
     return (
       <>
-        {displayConfig?.map((item, idx) => (
+        {displayConfig?.map?.((item, idx) => (
           <div key={idx} className="qx-node-select-input__content-item">
-            {item.icon && (
-              <span className="qx-node-select-input__content-item__icon">
-                {icon(item.icon)}
+            {item ? (
+              <>
+                {item.icon && (
+                  <span className="qx-node-select-input__content-item__icon">
+                    {icon(item.icon)}
+                  </span>
+                )}
+                <span className="qx-node-select-input__content-item__text">
+                  {item.type &&
+                    FieldMapType[item.type] &&
+                    !item.icon &&
+                    `[${FieldMapType[item.type]}]`}
+                  {item.title || item.name}
+                </span>
+              </>
+            ) : (
+              <span className="qx-node-select-input__content-item__text error">
+                已删除
               </span>
             )}
-            <span className="qx-node-select-input__content-item__text">
-              {item.type &&
-                FieldMapType[item.type] &&
-                !item.icon &&
-                `[${FieldMapType[item.type]}]`}
-              {item.title || item.name}
-            </span>
             {idx !== displayConfig.length - 1 && (
               <span className="qx-node-select-input__content-item__arrow">
                 <svg
@@ -169,15 +213,15 @@ export const useNodeFieldDisplay = ({
     );
   };
-  const renderInputDisplay = (
-    nodes: INode[] = optionalNodes,
-    val: string = value || '',
-  ) => {
-    setInputDisplay(
-      <Tag bordered={false} className="qx-node-select-input__content">
-        {genDisplayDom(val, nodes)}
-      </Tag>,
-    );
+  const renderInputDisplay = async (val = value) => {
+    displayDom.current = await genDisplayDom(val);
+
+    setInputDisplay(displayDom.current);
+  };
+
+  const handleRenderInputDisplay = (val = value) => {
+    renderInputDisplay(val);
+    resolveDisplayConfig.current?.();
   };
   /***
@@ -246,17 +290,15 @@ export const useNodeFieldDisplay = ({
             form.child = childItem;
           }
         });
-        // console.log(2222222, targetParentNodes, forms);
       } catch (error) {
-        // appsFields = {};
-      } finally {
+        console.error(error);
       }
     }
     return sourceParentNodes;
   };
   /**
-   * 统一字段格式
+   * 将result字段统一为表单字段格式
    */
   const correctionNodeField = (
     fields: FiledType[] | FiledType,
@@ -269,7 +311,6 @@ export const useNodeFieldDisplay = ({
       }
     } else if (fields) {
       Object.assign(fields, {
-        ...fields,
         name: fields.title,
         code:
           parent && ['ORG', 'FORM', 'USER'].includes(parent.type)
@@ -292,18 +333,35 @@ export const useNodeFieldDisplay = ({
   };
   /**
+   * 将node字段统一为表单字段格式
+   */
+  const correctionNode = (node: INode[] | INode): FiledType[] => {
+    if (Array.isArray(node)) {
+      for (let i = 0; i < node.length; i++) {
+        correctionNode(node[i]);
+      }
+    } else if (node) {
+      Object.assign(node, {
+        name: node.name,
+        code: node.id,
+        child: correctionNodeField(node.data?.result, node.id, node),
+        extract: { fieldType: node.type, fieldKey: node.id },
+      });
+
+      if (node.children) {
+        correctionNode(node.children);
+      }
+    }
+
+    return node as unknown as FiledType[];
+  };
+
+  /**
    * 获取可被选择的节点和结果
    */
   const getOptionalNodes = async () => {
     const targetParentNodes = await handleFormTypeAddChild(); // 给 form 类型的字段添加 child
-
-    for (let i = 0; i < targetParentNodes.length; i++) {
-      // TODO: 统一节点和 result 格式
-      correctionNodeField(
-        targetParentNodes[i].data?.result || [],
-        targetParentNodes[i].id,
-      );
-    }
+    let newNodes = correctionNode(targetParentNodes);
     /**
      * 根据 limitType 获取可选择的字段
@@ -341,39 +399,32 @@ export const useNodeFieldDisplay = ({
         }
       }
-      return nodes;
+      return nodes as unknown as FiledType[];
     }
-    let newNodes = targetParentNodes;
-
     // 有类型限制根据 limitType 筛选出可选的节点和 result
     if (limitTypes && Array.isArray(limitTypes) && limitTypes.length) {
       newNodes = getEffectiveNodes(targetParentNodes);
     }
     setOptionalNodes(newNodes);
-    renderInputDisplay(newNodes);
-  };
+    resultFieldMap.current = getResultFieldMap(newNodes);
+    resolveFieldResultMap.current?.(resultFieldMap.current);
+    if (value) {
+      handleRenderInputDisplay();
-  const getResultFieldMaps = (optionalNodes: INode[]) => {
-    const resultMap: Record<string, FiledType | INode> = {};
-    function genResultMap(result: FiledType[]) {
-      if (Array.isArray(result)) {
-        result.forEach((i) => {
-          resultMap[i.code] = i;
-          if (i.child) {
-            genResultMap(i.child);
-          }
-        });
-      }
-    }
-
-    for (let i = 0; i < optionalNodes.length; i++) {
-      resultMap[optionalNodes[i].id] = optionalNodes[i];
-      genResultMap(optionalNodes[i]?.data?.result);
+    } else {
+      setTimeout(() => {
+        resolveDisplayConfig.current?.()
+      }, 1000)
     }
+  };
-    return resultMap;
+  const handleGetResultFieldMap = () => {
+    return new Promise((resolve) => {
+      resolveFieldResultMap.current = (fieldResultMap: Record<string, any>) =>
+        resolve(fieldResultMap);
+    });
   };
   useEffect(() => {
@@ -383,14 +434,16 @@ export const useNodeFieldDisplay = ({
   return {
     genDisplayDom,
     optionalNodes,
-    renderInputDisplay,
+    renderInputDisplay: handleRenderInputDisplay,
     getDisplayConfig,
     inputDisplay,
-    getResultFieldMaps,
+    resultFieldMap,
+    getResultFieldMap: handleGetResultFieldMap,
+    resolveDisplayConfig: resolveDisplayConfig.current,
   };
 };
-const SelectItem = (props: any) => {
+const SelectItem = (props: FiledType) => {
   if (props.type === 'FORM' && props.child?.length) {
     return (
       <div className={cls('qx-node-select-item', 'qx-node-select-item__group')}>
@@ -401,7 +454,6 @@ const SelectItem = (props: any) => {
             {
               label: (
                 <span>
-                  {/* @ts-ignore */}
                   {`[${FieldMapType[props.extract?.fieldType]}]`}
                   {props.name}
                 </span>
@@ -429,7 +481,6 @@ const SelectItem = (props: any) => {
         className={cls('qx-node-select-item')}
         onClick={() => props.onClick(props)}
       >
-        {/* @ts-ignore */}
         {props.icon
           ? props.icon
           : `[${FieldMapType[props.extract?.fieldType]}]`}
@@ -479,52 +530,50 @@ export const QxFlowNodeFieldSelector = React.forwardRef<
     optionalNodes,
     renderInputDisplay,
     inputDisplay,
+    getDisplayConfig,
+    getResultFieldMap,
+    resultFieldMap,
   } = useNodeFieldDisplay(props);
-  // console.log('111111', props, optionalNodes);
-  const getOptions = () => {
-    return optionalNodes.map((node) => ({
+  const handleItemClick = (item: any) => {
+    const newValue = '${' + item.code + '}';
+    props.onChange?.(newValue, item);
+    renderInputDisplay(newValue);
+    setVisible(false);
+  };
+
+  const getOptions = (fields: FiledType[]) => {
+    return fields.map((field) => ({
       label: (
         <div className={cls('qx-node-select-dropdown-header')}>
           <span className={cls('qx-node-select-dropdown-header__icon')}>
-            {icon(node.icon)}
+            {icon(field.icon)}
           </span>
-          {node.name}
+          {field.name}
         </div>
       ),
-      key: node.id,
-      children: Array.isArray(node.data?.result)
-        ? (node.data.result as FiledType[])?.map((item) => {
-            return (
-              <SelectItem
-                key={item.id}
-                {...item}
-                onClick={(value: FiledType) => {
-                  // eslint-disable-next-line @typescript-eslint/no-use-before-define
-                  handleItemClick(node.id, value || item);
-                }}
-              />
-            );
-          })
-        : [],
+      key: field.id,
+      children: Array.isArray(field.child)
+        ? field.child.map((i) => (
+            <SelectItem
+              key={i.id}
+              {...i}
+              onClick={(value: FiledType) => {
+                handleItemClick(value || i);
+              }}
+            />
+          ))
+        : undefined,
     }));
   };
-  const handleItemClick = (nodeKey: string, item: any) => {
-    const newValue = '${' + item.code + '}';
-    props.onChange?.(newValue, item);
-    if (!props.children) {
-      renderInputDisplay(optionalNodes, newValue);
-    }
-    setVisible(false);
-  };
-
   useEffect(() => {
     setVisible(props.open ?? false);
   }, [props.open]);
+  const items = getOptions(optionalNodes!);
+
   const dropdownRender = () => {
-    const items = getOptions();
     if (Array.isArray(items) && items.length) {
       return <Collapse ghost expandIconPosition="end" items={items} />;
     } else {
@@ -542,6 +591,16 @@ export const QxFlowNodeFieldSelector = React.forwardRef<
     };
   }, []);
+  useImperativeHandle(ref, () => ({
+    getResultFieldMap,
+    getDisplayConfig,
+    resultFieldMap,
+    renderInputDisplay,
+    getInputDisplay: () => inputDisplay,
+  }));
+
+  console.log('resultFieldMap', resultFieldMap, inputDisplay);
+
   return (
     <div
       className={cls('qx-node-select')}
@@ -550,7 +609,6 @@ export const QxFlowNodeFieldSelector = React.forwardRef<
       }}
     >
       <Dropdown
-        destroyPopupOnHide
         trigger={['click']}
         overlayStyle={{ width: `${props?.width}px` }}
         overlayClassName={cls('qx-node-select-dropdown')}
@@ -569,7 +627,12 @@ export const QxFlowNodeFieldSelector = React.forwardRef<
             className={cls('qx-node-select-input')}
             onClick={() => setVisible(!visible)}
           >
-            {inputDisplay}
+            {/* {inputDisplay} */}
+            {inputDisplay && (
+              <Tag bordered={false} className="qx-node-select-input__content">
+                {inputDisplay}
+              </Tag>
+            )}
           </div>
         )}
       </Dropdown>
@@ -591,7 +654,7 @@ export interface NodeFieldSelectProps {
 }
 export interface FiledType {
-  type: string;
+  type: keyof typeof FieldMapType;
   id: string;
   title: string;
   code: string;
--- a/src/utils/index.ts
View file @a4eadc5
+++ b/src/utils/index.ts
View file @a4eadc5
 import { createRequest } from '@qx/utils';
 import UploadFile from './uploadFile'
-const request = createRequest();
+const request = createRequest({
+  headers: {
+    // 你自己的 token
+    Authorization: 'dev_session:hqfnRxelSbjVSq2zLTM',
+    businessCode: 'design',
+  },
+});
 export {UploadFile, request}