refactor: qx-base-condition & qx-flow-node-selector

qiang.tian
1 parent bcaa9a07
Showing 3 changed files with 125 additions and 89 deletions
src/qx-base-condition-item/index.tsx
src/qx-base-condition/index.tsx
src/qx-flow-node-selector/index.tsx
--- a/src/qx-base-condition-item/index.tsx
View file @c4e52be
+++ b/src/qx-base-condition-item/index.tsx
View file @c4e52be
@@ -7,6 +7,7 @@ import { QxBaseIcon } from '../qx-base-icon';
 import { QxFieldSetter } from '../qx-field-setter';
 import type { INode } from '../qx-flow-node-selector';
 import {
+  FieldMapType,
   QxFlowNodeFieldSelector,
   useNodeFieldDisplay,
 } from '../qx-flow-node-selector';
@@ -681,7 +682,9 @@ export const QxBaseConditionItem: React.FC<QxBaseConditionItemProps> = ({
   node,
   nodes,
   subset,
-  params
+  params,
+  fieldGroupType,
+  isMixValue,
 }) => {
   const valuesObj = value?.valuesObj?.[0] || {};
   const [open, setOpen] = useState(false);
@@ -732,36 +735,37 @@ export const QxBaseConditionItem: React.FC<QxBaseConditionItemProps> = ({
   const { genDisplayDom } = useNodeFieldDisplay({
     node: node,
     nodes: nodes,
-    limitTypes: [field.fieldType],
+    limitTypes: [field.extract?.fieldType],
     value: valuesObj?.value,
-    subset
+    subset,
   });
   const getName = (values: any[]) => {
-    return values.map((value) => genDisplayDom(value))
-  }
+    return Array.isArray(values)
+      ? values.map((value) => genDisplayDom(value))
+      : [];
+  };
   const RenderContent = (
     <>
       <QxFieldSetter
         params={params || field?.params}
         value={value?.valuesObj}
-        fieldGroupType={value?.fieldGroupType}
+        fieldGroupType={fieldGroupType}
         onChange={handleChange}
-        isMultiple={multipleType.includes(value?.fieldGroupType)}
+        isMultiple={multipleType.includes(fieldGroupType)}
         isRange={optValTypeCheck.isRangeType(value?.opt)}
         disabled={optValTypeCheck.isEmptyType(value?.opt)}
         getName={getName}
         widget={field.extract?.widget}
+        isMixValue={isMixValue}
+      />
+      <ControlOutlined
+        onClick={() => {
+          setOpen(!open);
+        }}
+        className="qx-base-condition-item__content-suffix"
       />
-      {mode === 'variable' && (
-        <ControlOutlined
-          onClick={() => {
-            setOpen(!open);
-          }}
-          className="qx-base-condition-item__content-suffix"
-        />
-      )}
     </>
   );
@@ -774,7 +778,7 @@ export const QxBaseConditionItem: React.FC<QxBaseConditionItemProps> = ({
             className="qx-base-condition-item__header-filter__select"
             bordered={false}
             fieldNames={{ label: 'text', value: 'key' }}
-            options={ConditionCol[value.fieldGroupType]?.operations || []}
+            options={ConditionCol[fieldGroupType]?.operations || []}
             onChange={handleFilerChange}
           />
         );
@@ -788,10 +792,14 @@ 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">
-            <QxWidgetIcon widgetName={field?.extract?.widget} />
+            {field.extract?.widget ? (
+              <QxWidgetIcon widgetName={field.extract.widget} />
+            ) : (
+              `[${FieldMapType[field.extract.fieldType]}]`
+            )}
           </span>
           <span className="qx-base-condition-item__header-text">
-            {field.fieldName}
+            {field.name}
           </span>
         </div>
         <div className="qx-base-condition-item__header-right">
@@ -809,22 +817,18 @@ export const QxBaseConditionItem: React.FC<QxBaseConditionItemProps> = ({
         </div>
       </div>
       <div className="qx-base-condition-item__content">
-        {mode === 'variable' ? (
-          <QxFlowNodeFieldSelector
-            mode={mode}
-            node={node!}
-            nodes={nodes!}
-            open={open}
-            value={valuesObj?.value}
-            onChange={handleAssignment}
-            limitTypes={[field.fieldType]}
-            subset={subset}
-          >
-            {RenderContent}
-          </QxFlowNodeFieldSelector>
-        ) : (
-          RenderContent
-        )}
+        <QxFlowNodeFieldSelector
+          mode="variable"
+          node={node!}
+          nodes={nodes!}
+          open={open}
+          value={valuesObj?.value}
+          onChange={handleAssignment}
+          limitTypes={[field.extract?.fieldType]}
+          subset={subset}
+        >
+          {RenderContent}
+        </QxFlowNodeFieldSelector>
       </div>
     </div>
   );
@@ -848,6 +852,6 @@ export interface QxBaseConditionItemProps {
   mode?: string;
   node?: INode;
   nodes?: INode[];
-  [key: string]: any
+  [key: string]: any;
   // customDisplay?: (val: string) => React.ReactNode;
 }
--- a/src/qx-base-condition/index.tsx
View file @c4e52be
+++ b/src/qx-base-condition/index.tsx
View file @c4e52be
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { QxBaseConditionItem } from '../qx-base-condition-item';
 import { INode } from '../qx-flow-node-selector';
 import './index.less';
@@ -11,42 +11,46 @@ const FieldBaseType = {
 };
 export const QxBaseCondition: React.FC<QxBaseConditionProps> = (props) => {
-  const [localOptions, setLocalOptions] = useState(props.options || []);
+  // const [localOptions, setLocalOptions] = useState(props.value || props.options || []);
-  const getDefaultConditionOptions = (item: QxBaseConditionField) => ({
-    ...item,
-    fieldGroupType:
-      FieldBaseType[item.fieldType] ||
-      item.fieldGroupType ||
-      item.fieldType ||
-      'TEXT',
-    mappingValues: [],
-    opt: 'IS',
-    valuesObj: [],
-  });
+  const getDefaultCondition = (item: QxBaseConditionField) => {
+    return {
+      type: item.extract?.fieldType,
+      code: item.code,
+      title: item.name,
+      opt: 'IS',
+    };
+  };
   const handleItemChange = (val: any, key: number) => {
     props.onChange?.(
-      localOptions?.map((item, idx) => {
+      props.value?.map((item, idx) => {
         if (idx === key) return val;
         return props.value?.[idx]
           ? props.value?.[idx]
-          : getDefaultConditionOptions(item);
+          : getDefaultCondition(item);
       }),
     );
   };
   const handleDelete = (key: number) => {
-    localOptions.splice(key, 1);
-    setLocalOptions([...localOptions]);
-    props.onChange?.([...localOptions]);
+    if (props.value && Array.isArray(props.value)) {
+      props.value.splice(key, 1);
+      props.onChange?.([...props.value]);
+    }
   };
-  useEffect(() => {
-    setLocalOptions(props.options);
-  }, [props.options]);
+  const getFieldGroupType = (fieldExtract: QxBaseConditionField['extract']) => {
+    return (
+      fieldExtract?.fieldGroupType ||
+      FieldBaseType[fieldExtract.fieldType] ||
+      fieldExtract?.fieldType ||
+      'TEXT'
+    );
+  };
-  const RenderCondition = localOptions?.map((item, key) => (
+
+  const RenderCondition = props.value?.map((item, key) => (
     <div className="qx-base-condition-list-item" key={item.code || key}>
       {(props?.showIdx ?? true) && (
         <span className="qx-base-condition-list-item__idx">{key + 1}.</span>
@@ -55,14 +59,14 @@ export const QxBaseCondition: React.FC<QxBaseConditionProps> = (props) => {
         key={item.code || key}
         mode={props.mode || 'condition'}
         {...item}
+        fieldGroupType={getFieldGroupType(item.field.extract)}
         value={Object.assign(
           {},
-          getDefaultConditionOptions(item),
+          getDefaultCondition(item.field),
           props.value?.[key] || {},
         )}
         nodes={props.nodes}
         node={props.node}
-        field={item}
         subset={props.subset}
         onChange={(val) => handleItemChange(val, key)}
         remove={() => handleDelete(key)}
@@ -77,14 +81,21 @@ export const QxBaseCondition: React.FC<QxBaseConditionProps> = (props) => {
   );
 };
-export interface QxBaseConditionField {
-  field: string;
+export interface QxBaseConditionFieldExtract {
+  widget: string;
+  $base?: boolean;
+  allowSelect?: boolean;
+  fieldKey: string;
   fieldType: keyof typeof FieldBaseType;
-  fieldName: string;
-  fieldGroupType: string;
-  qxProps?: string;
-  extract: any;
-  params?: any
+  fieldGroupType?: string;
+  relId?: string;
+  [key: string]: any;
+}
+
+export interface QxBaseConditionField {
+  name?: string;
+  code: string;
+  extract: QxBaseConditionFieldExtract;
 }
 export interface QxBaseConditionOptionsProps extends QxBaseConditionField {
--- a/src/qx-flow-node-selector/index.tsx
View file @c4e52be
+++ b/src/qx-flow-node-selector/index.tsx
View file @c4e52be
-import { ControlOutlined } from '@ant-design/icons';
 import { QxWidgetIcon } from '@qx/common';
 import { Collapse, Dropdown, Empty, Tag } from 'antd';
 import cls from 'classnames';
@@ -50,7 +49,7 @@ export const getParentNodes = (
   return parentNode;
 };
-export enum FileTypeMap {
+export enum FieldMapType {
   'STRING' = '文本',
   'NUMBER' = '数字',
   'BOOL' = '布尔',
@@ -164,9 +163,9 @@ export const useNodeFieldDisplay = ({
             )}
             <span className="qx-node-select-input__content-item__text">
               {item.type &&
-                FileTypeMap[item.type] &&
+                FieldMapType[item.type] &&
                 !item.icon &&
-                `[${FileTypeMap[item.type]}]`}
+                `[${FieldMapType[item.type]}]`}
               {item.title}
             </span>
             {idx !== displayConfig.length - 1 && (
@@ -268,14 +267,42 @@ export const useNodeFieldDisplay = ({
     return sourceParentNodes;
   };
+  const correctionNodeField = (fields: FiledType[] | FiledType) => {
+    if (Array.isArray(fields)) {
+      for (let i = 0; i <= fields.length; i++) {
+        correctionNodeField(fields[i]);
+      }
+    } else if (fields) {
+      Object.assign(fields, {
+        ...fields,
+        name: fields.title,
+        extract: {
+          ...(fields.extract || {}),
+          fieldType: fields.type,
+          fieldKey: fields.code,
+        },
+        child: correctionNodeField(fields.child!),
+      });
+    }
+
+    return fields;
+  };
+
   const getOptionalNodes = async () => {
     const targetParentNodes = await handleGetAppsFields();
+
+    for (let i = 0; i< targetParentNodes.length;i++) {
+      correctionNodeField(targetParentNodes[i].data?.result || [])
+    }
+   
     if (!limitTypes) return setOptionalNodes(targetParentNodes);
     function getEffectiveResult(result: FiledType[]) {
       const newResult = [];
       for (let i = 0; i < result.length; i++) {
-        const resultItem = result[i] || {};
+        const resultItem = result[i] || {};       
+        correctionNodeField(resultItem)
+       
         if (resultItem.child) {
           resultItem.child = getEffectiveResult(resultItem.child);
           if (
@@ -333,8 +360,8 @@ const SelectItem = (props: any) => {
               label: (
                 <span>
                   {/* @ts-ignore */}
-                  {`[${FileTypeMap[props.type]}]`}
-                  {props.title}
+                  {`[${FieldMapType[props.extract?.fieldType]}]`}
+                  {props.name}
                 </span>
               ),
               key: props.id,
@@ -361,8 +388,8 @@ const SelectItem = (props: any) => {
         onClick={() => props.onClick(props)}
       >
         {/* @ts-ignore */}
-        {props.icon ? props.icon : `[${FileTypeMap[props.type]}]`}
-        {props.title}
+        {props.icon ? props.icon : `[${FieldMapType[props.extract?.fieldType]}]`}
+        {props.name}
       </div>
     );
   }
@@ -377,8 +404,8 @@ const SelectItem = (props: any) => {
             label: (
               <span>
                 {/* @ts-ignore */}
-                {`[${FileTypeMap[props.type]}]`}
-                {props.title}
+                {`[${FieldMapType[props.extract?.fieldType]}]`}
+                {props.name}
               </span>
             ),
             key: props.id,
@@ -401,14 +428,13 @@ const SelectItem = (props: any) => {
 export const QxFlowNodeFieldSelector: React.FC<NodeFieldSelectProps> = (
   props,
 ) => {
-  const { mode = 'select' } = props;
-
   const [visible, setVisible] = useState(false);
   const { optionalNodes, renderInputDisplay, inputDisplay } =
     useNodeFieldDisplay(props);
   const getOptions = () => {
+    console.log('optionalNodes', optionalNodes);
     return optionalNodes.map((node) => ({
       label: (
         <div className={cls('qx-node-select-dropdown-header')}>
@@ -468,7 +494,7 @@ export const QxFlowNodeFieldSelector: React.FC<NodeFieldSelectProps> = (
         open={visible}
         dropdownRender={dropdownRender}
         onOpenChange={(open) => {
-          if (mode === 'select') {
+          if (props.children) {
             setVisible(open);
           }
         }}
@@ -476,16 +502,11 @@ export const QxFlowNodeFieldSelector: React.FC<NodeFieldSelectProps> = (
         {props.children ? (
           props.children
         ) : (
-          <div className={cls('qx-node-select-input')}>
+          <div
+            className={cls('qx-node-select-input')}
+            onClick={() => setVisible(!visible)}
+          >
             {inputDisplay}
-            {mode === 'variable' && (
-              <span
-                className="qx-node-select-input__suffix"
-                onClick={() => setVisible(!visible)}
-              >
-                <ControlOutlined />
-              </span>
-            )}
           </div>
         )}
       </Dropdown>