refactor: 优化 flow-node-selector

qiang.tian
1 parent dc1b1717
Showing 6 changed files with 306 additions and 56 deletions
package.json
src/qx-base-condition/index.md
src/qx-condition/index.less
src/qx-condition/index.tsx
src/qx-flow-node-selector/index.md
src/qx-flow-node-selector/index.tsx
--- a/package.json
View file @816e819
+++ b/package.json
View file @816e819
@@ -44,6 +44,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.2.5",
+    "@qx/flow": "^1.0.0-alpha.23",
     "@qx/ui": "0.0.3-beta.1",
     "@qx/utils": "0.0.58",
     "ahooks": "^3.7.5",
--- a/src/qx-base-condition/index.md
View file @816e819
+++ b/src/qx-base-condition/index.md
View file @816e819
@@ -5,13 +5,13 @@ nav:
   order: 1
 group:
   path: /common
-  title: 基础条件配置
+  title: 条件配置
   order: 0
 ---
-## QxBaseCondition 条件配置
+## QxBaseCondition 基础条件配置
-### 条件配置
+### 基础条件配置
 ```tsx
 import { QxBaseCondition } from '@qx/common';
--- a/src/qx-condition/index.less
View file @816e819
+++ b/src/qx-condition/index.less
View file @816e819
@@ -2,17 +2,11 @@
 .qx-condition {
   width: 100%;
-  
-  &-item {
+
+  &-header {
     display: flex;
     align-items: center;
-
-
-    &__idx {
-      color: @N9;
-      margin-right: 4px;
-      width: 24px;
-      display: inline-block;
-    }
+    justify-content: space-between;
+    margin-bottom: 16px;
   }
 }
--- a/src/qx-condition/index.tsx
View file @816e819
+++ b/src/qx-condition/index.tsx
View file @816e819
-import React, { useEffect } from 'react';
+import { Button } from 'antd';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   QxBaseCondition,
   QxBaseConditionValueType,
 } from '../qx-base-condition';
+import { QxBaseIcon } from '../qx-base-icon';
 import { QxConditionSql, SqlType } from '../qx-condition-sql';
-import { INode } from '../qx-flow-node-selector';
+import QxFieldPopover from '../qx-field/src/popover';
+import FieldsCheckboxGroup from '../qx-field/src/popover/checkbox';
+import { INode, QxFlowNodeFieldSelector } from '../qx-flow-node-selector';
+import { request } from '../utils';
+
+import './index.less';
+
+const excludeCodes = ['id'];
+
+export function getFieldsByFunId(funId: string, params?: { useKey: boolean }) {
+  return request.get(`/qx-apaas-lowcode/app/form/${funId}/field`, { params });
+}
 export const QxCondition: React.FC<QxConditionProps> = ({
   value,
@@ -14,14 +27,115 @@ export const QxCondition: React.FC<QxConditionProps> = ({
   showAssignment = true,
   onChange,
   node,
-  nodes
+  nodes,
+  header,
+  headerLeft,
+  headerRight,
+  formId,
+  multiple,
+  showHeader = false
 }) => {
+  const [fields, setFields] = useState([]);
+
+  const fieldSelectorRef = useRef();
+
   const handleChange = (opt: Partial<QxConditionValueType>) => {
     onChange?.(Object.assign({}, value, opt, { enabled }));
   };
+  const handleGetFieldsList = async (formId: string) => {
+    try {
+      const data = await getFieldsByFunId(formId);
+      setFields(data.filter((i) => !excludeCodes.includes(i.code)));
+    } catch (error) {
+      setFields([]);
+    }
+  };
+
+  useEffect(() => {
+    if (formId) handleGetFieldsList(formId);
+  }, [formId]);
+
+  const PopoverComponent = multiple ? FieldsCheckboxGroup : QxFieldPopover;
+
+  const handleAddField = (val: any, opt: any) => {
+    handleChange({
+      operators: [
+        ...(value?.operators || []),
+        {
+          field: opt,
+          code: opt.code,
+          name: opt.name,
+          type: opt.extract?.fieldType,
+          opt: 'IS',
+          mappingValues: [],
+        },
+      ],
+    });
+    // setFieldValue(
+    //   'condition',
+    //   Object.assign({}, condition, {
+    //     operators: [
+    //       ...(condition.operators || []),
+    //       { field: opt, code: val },
+    //     ],
+    //   }),
+    // );
+  };
+
+  // const fieldOpt = useMemo(() => {
+  // return  fieldSelectorRef.current?.fieldMap || {};
+  // }, []);
+
+  const RenderHeader = header ? (
+    header
+  ) : (
+    <div className="qx-condition-header">
+      {!headerLeft ? (
+        <div className="qx-condition-header__title">条件配置</div>
+      ) : (
+        headerLeft
+      )}
+      {!headerRight ? (
+        <div className="qx-condition-header__right">
+          {node ? (
+            <QxFlowNodeFieldSelector
+              ref={fieldSelectorRef}
+              node={node}
+              nodes={nodes!}
+              mode="variable"
+              onChange={handleAddField}
+            >
+              <Button size="small" type="link">
+                <QxBaseIcon style={{ fontSize: 16 }} type="qx-icon-plus" />
+                添加字段
+              </Button>
+            </QxFlowNodeFieldSelector>
+          ) : (
+            <PopoverComponent
+              ref={fieldSelectorRef}
+              data={fields}
+              onSelect={handleAddField}
+              onChange={handleAddField}
+            >
+              <Button size="small" type="link">
+                <QxBaseIcon style={{ fontSize: 16 }} type="qx-icon-plus" />
+                添加字段
+              </Button>
+            </PopoverComponent>
+          )}
+        </div>
+      ) : (
+        headerRight
+      )}
+    </div>
+  );
+  
+  console.log('operators', fieldSelectorRef);
+
   return (
-    <div className={`qx-condition ${className}`} style={style}>
+    <div className={`qx-condition ${className && className}`} style={style}>
+      {showHeader && RenderHeader}
       <QxBaseCondition
         mode="condition"
         nodes={nodes}
@@ -69,7 +183,13 @@ export interface QxConditionProps {
   onChange?: (value: QxConditionValueType) => void;
   className?: string;
   style?: React.CSSProperties;
-  node?: INode
-  nodes?: INode[]
-  showAssignment?: boolean
+  node?: INode;
+  nodes?: INode[];
+  showAssignment?: boolean;
+  header?: React.ReactNode;
+  headerRight?: React.ReactNode;
+  headerLeft?: React.ReactNode;
+  multiple?: boolean;
+  formId?: string;
+  showHeader?: boolean;
 }
--- a/src/qx-flow-node-selector/index.md 0 → 100644
View file @816e819
+++ b/src/qx-flow-node-selector/index.md 0 → 100644
View file @816e819
+---
+nav:
+  path: /component
+  title: 组件
+  order: 1
+group:
+  path: /flow
+  title: 流程
+  order: 0
+---
+
+## QxFlowNodeFieldSelector 流程结果集选择器
+
+### 普通
+
+```tsx
+import { QxFlowNodeFieldSelector } from '@qx/common';
+
+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: '',
+        },
+      ],
+    },
+    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 <QxFlowNodeFieldSelector node={node} nodes={nodes} />;
+};
+```
+
+<API id="NodeFieldSelectProps"></API>
--- a/src/qx-flow-node-selector/index.tsx
View file @816e819
+++ b/src/qx-flow-node-selector/index.tsx
View file @816e819
@@ -7,8 +7,6 @@ import { FieldBaseType } from '../qx-base-condition';
 import { QxBaseIcon } from '../qx-base-icon';
 import { request } from '../utils';
 import './index.less';
-// import type { FiledType } from '@/interface';
-// import type { INode } from '@qx/flow';
 const getAppsFields = (params: string[], appId = 'default') => {
   return request.post(`/qx-apaas-lowcode/app/${appId}/fields`, {
@@ -217,13 +215,16 @@ export const useNodeFieldDisplay = ({
   /**
    * 查询所有 formId 的字段，并给 result 添加 child
    */
-  const handleGetAppsFields = async () => {
+  const handleFormTypeAddChild = async () => {
     const forms = findResultByFormId(sourceParentNodes);
+    if (!forms.length) return sourceParentNodes;
+
     const ids = forms.map((item) => item.qxProps?.formId);
     if (Array.isArray(ids) && ids.length && subset) {
       try {
         const data = await getAppsFields(ids as any[]);
         Object.keys(data).forEach((id) => {
+          // 此处是引用类型，会间接修改 sourceParentNodes
           const form = forms.find((item) => item.qxProps?.formId === id);
           if (!form) return;
@@ -272,12 +273,12 @@ export const useNodeFieldDisplay = ({
         name: fields.title,
         code:
           parent && ['ORG', 'FORM', 'USER'].includes(parent.type)
-            ? `${parent.code}.${fields.code}`
-            : `${nodeId}|${fields.code}`,
+            ? `${parent.code}.${fields.id}`
+            : `${nodeId}|${fields.id}`,
         extract: {
           ...(fields.extract || {}),
           fieldType: fields.type,
-          fieldKey: fields.code,
+          fieldKey: fields.id,
         },
       });
       fields.child = correctionNodeField(
@@ -290,43 +291,31 @@ export const useNodeFieldDisplay = ({
     return fields;
   };
+  /**
+   * 获取可被选择的节点和结果
+   */
   const getOptionalNodes = async () => {
-    const targetParentNodes = await handleGetAppsFields();
+    const targetParentNodes = await handleFormTypeAddChild(); // 给 form 类型的字段添加 child
     for (let i = 0; i < targetParentNodes.length; i++) {
+      // TODO: 统一节点和 result 格式
       correctionNodeField(
         targetParentNodes[i].data?.result || [],
         targetParentNodes[i].id,
       );
     }
-    if (!limitTypes || !limitTypes.length) {
-      setOptionalNodes(targetParentNodes);
-      renderInputDisplay(targetParentNodes);
-      return;
-    }
-
     /**
      * 根据 limitType 获取可选择的字段
      */
     function getEffectiveResult(result: FiledType[]) {
       const newResult = [];
+
       for (let i = 0; i < result.length; i++) {
         const resultItem = result[i] || {};
-        // correctionNodeField(resultItem,  nodeId, parent);
-        if (resultItem.child) {
-          resultItem.child = getEffectiveResult(resultItem.child);
-          if (
-            (Array.isArray(resultItem.child) && resultItem.child.length) ||
-            limitTypes?.includes(
-              FieldBaseType[resultItem.type as keyof typeof FieldBaseType] ||
-                resultItem.type,
-            )
-          ) {
-            newResult.push(resultItem);
-          }
-        } else if (
+        if (
+          // 先将表单字段类型或流程参数类型转换为基础类型再做过滤
           limitTypes?.includes(
             FieldBaseType[resultItem.type as keyof typeof FieldBaseType] ||
               resultItem.type,
@@ -334,6 +323,10 @@ export const useNodeFieldDisplay = ({
         ) {
           newResult.push(resultItem);
         }
+
+        if (Array.isArray(resultItem.child) && resultItem.child.length) {
+          resultItem.child = getEffectiveResult(resultItem.child);
+        }
       }
       return newResult;
@@ -351,9 +344,15 @@ export const useNodeFieldDisplay = ({
       return nodes;
     }
-    const newNodes = getEffectiveNodes(targetParentNodes);
-    setOptionalNodes([...newNodes]);
-    renderInputDisplay([...newNodes]);
+    let newNodes = targetParentNodes;
+
+    // 有类型限制根据 limitType 筛选出可选的节点和 result
+    if (limitTypes && Array.isArray(limitTypes) && limitTypes.length) {
+      newNodes = getEffectiveNodes(targetParentNodes);
+    }
+
+    setOptionalNodes(newNodes);
+    renderInputDisplay(newNodes);
   };
   const getResultFieldMaps = (optionalNodes: INode[]) => {
@@ -470,13 +469,18 @@ const SelectItem = (props: any) => {
   );
 };
-export const QxFlowNodeFieldSelector: React.FC<NodeFieldSelectProps> = (
-  props,
-) => {
+export const QxFlowNodeFieldSelector = React.forwardRef<
+  any,
+  NodeFieldSelectProps
+>((props, ref) => {
   const [visible, setVisible] = useState(false);
-  const { optionalNodes, renderInputDisplay, inputDisplay } =
-    useNodeFieldDisplay(props);
+  const {
+    optionalNodes,
+    renderInputDisplay,
+    inputDisplay,
+  } = useNodeFieldDisplay(props);
+  // console.log('111111', props, optionalNodes);
   const getOptions = () => {
     return optionalNodes.map((node) => ({
@@ -528,8 +532,23 @@ export const QxFlowNodeFieldSelector: React.FC<NodeFieldSelectProps> = (
     }
   };
+  useEffect(() => {
+    const closeDropdown = () => {
+      setVisible(false);
+    };
+    document.body.addEventListener('click', closeDropdown);
+    return () => {
+      document.body.removeEventListener('click', closeDropdown);
+    };
+  }, []);
+
   return (
-    <div className={cls('qx-node-select')}>
+    <div
+      className={cls('qx-node-select')}
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+    >
       <Dropdown
         destroyPopupOnHide
         trigger={['click']}
@@ -556,7 +575,7 @@ export const QxFlowNodeFieldSelector: React.FC<NodeFieldSelectProps> = (
       </Dropdown>
     </div>
   );
-};
+});
 export interface NodeFieldSelectProps {
   node: INode;