@hzab/flowlong-designer 0.1.4 → 0.1.5

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+# @hzab/flowlong-designer@0.1.5
+
+fix:条件节点-部门或用户回显
+
 # @hzab/flowlong-designer@0.1.4
 
 fix:条件节点多个条件时删除正常渲染并正常排序

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/flowlong-designer",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "自定义审批流配置组件",
   "main": "src",
   "scripts": {

package/src/components/NodeWrap/Nodes/Branch/components/Field/index.tsx

@@ -8,7 +8,6 @@ interface FormMapProps {
 }
 const Field = (props: FormMapProps) => {
   const { type, onChange, value } = props;
-
   return (
     <>
       {["day", "hour"].includes(type) && (

package/src/components/NodeWrap/Nodes/Branch/components/GroupUserSelectorModal/index.tsx

@@ -1,7 +1,7 @@
 import DataModel from "@hzab/data-model";
 import GroupUserSelector from "@hzab/group-user-selector";
 import { Input, Modal } from "antd";
-import { useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import "./index.less";
 const fieldMap = {
   dept: "deptList",
@@ -40,28 +40,61 @@ const GroupUserSelectorModal = (props) => {
       return userModel;
     }
   }, [type]);
+
   const onOk = () => {
-    onChange(groupUserSelectorRef.current?.selectedList);
+    let onOkValue = {
+      value: null,
+      deptUserLabel: null,
+    };
+    if (type === "dept") {
+      onOkValue = {
+        value: groupUserSelectorRef.current?.selectedList?.map((item) => item?.value)?.join(","),
+        deptUserLabel: groupUserSelectorRef.current?.selectedList?.map((item) => item?.label)?.join(","),
+      };
+    }
+    if (type === "useId") {
+      onOkValue = {
+        value: groupUserSelectorRef.current?.selectedList?.map((item) => item?.userId)?.join(","),
+        deptUserLabel: groupUserSelectorRef.current?.selectedList?.map((item) => item?.name)?.join(","),
+      };
+    }
+    onChange(onOkValue);
     setOpen(false);
   };
 
-  const inputValue = useMemo(() => {
-    if (type === "dept" && value) {
-      return value?.map((item) => item?.label)?.join(",");
-    }
-    if (type === "useId" && value) {
-      return value?.map((item) => item?.name)?.join(",");
-    }
-  }, [value, type]);
   const userListConfig = {
     searchQueryKey: "userName",
     labelKey: "name",
     valueKey: "id",
   };
+  /**选择组件回显 */
+  const groupUserSelectorValue = useMemo(() => {
+    const deptUserLabelArr = value?.deptUserLabel?.split(",") || [];
+    let valueArr = value?.value?.split(",");
+    if (type === "useId") {
+      valueArr = value?.value?.split(",")?.map((el) => Number(el)) || [];
+    }
+
+    if (!value) {
+      return [];
+    }
+    if (type === "useId") {
+      return deptUserLabelArr?.map((item, index) => ({
+        name: item,
+        id: valueArr?.length && valueArr[index],
+        isUser: true,
+      }));
+    }
+    return deptUserLabelArr?.map((item, index) => ({
+      label: item,
+      value: valueArr?.length && valueArr[index],
+    }));
+  }, [value, type]);
+
   return (
     <div>
       <Input
-        value={inputValue}
+        value={value?.deptUserLabel || null}
         readOnly
         onClick={() => {
           setOpen(true);
@@ -84,7 +117,7 @@ const GroupUserSelectorModal = (props) => {
       >
         <div className="groupUserSelectorModal">
           <GroupUserSelector
-            value={value || []}
+            value={groupUserSelectorValue || []}
             ref={groupUserSelectorRef}
             model={model}
             {...(type === "useId" ? userListConfig : {})}

package/src/components/NodeWrap/Nodes/Branch/index.tsx

@@ -27,7 +27,10 @@ const conditionOption = [
   { label: "部门", value: "dept" },
   { label: "用户id", value: "useId" },
 ];
-
+/** 时间类型 */
+const timeType = ["day", "hour"];
+/** 部门或用户 */
+const deptUserType = ["dept", "useId"];
 export const Branch = (props) => {
   const { modelValue: nodeConfig, onChange, ItemSlot } = props;
   const [form, setForm] = useState({
@@ -113,11 +116,8 @@ export const Branch = (props) => {
       const text = conditionList
         .map((conditionGroup) =>
           conditionGroup.map((item) => {
-            if (item?.field === "dept") {
-              return `${item.label}${item.operator}${item.values?.map((el) => el?.label)}`;
-            }
-            if (item?.field === "useId") {
-              return `${item.label}${item.operator}${item.values?.map((el) => el?.userName)}`;
+            if (["dept", "useId"].includes(item?.field)) {
+              return `${item.label}${item.operator}${item?.deptUserLabel}`;
             }
             return `${item.label}${item.operator}${item.value}`;
           }),
@@ -350,6 +350,17 @@ export const Branch = (props) => {
                     <div>值</div>
                   </div>
                   {conditionGroup?.map((condition, idx) => {
+                    /**值 */
+                    let fieldValue = null;
+                    if (timeType.includes(condition?.field)) {
+                      fieldValue = condition?.value;
+                    }
+                    if (deptUserType.includes(condition?.field)) {
+                      fieldValue = {
+                        value: condition?.value,
+                        deptUserLabel: condition?.deptUserLabel,
+                      };
+                    }
                     return (
                       <div className="condition-content" key={idx}>
                         <div className="condition-relation">
@@ -376,6 +387,9 @@ export const Branch = (props) => {
                               onChange={(e) => {
                                 condition.field = e;
                                 condition.value = null;
+                                if (deptUserType.includes(condition?.field)) {
+                                  condition.deptUserLabel = null;
+                                }
                                 // 更新数据
                                 setForm((f) => ({ ...f }));
                               }}
@@ -394,11 +408,16 @@ export const Branch = (props) => {
                               className="condition-content-box-item"
                             ></Select>
                             <Field
-                              value={condition?.values || []}
+                              value={fieldValue}
                               type={condition.field}
                               onChange={(e) => {
-                                condition.value = e?.map((item) => item?.value)?.join(",");
-                                condition.values = e;
+                                if (timeType.includes(condition?.field)) {
+                                  condition.value = e;
+                                }
+                                if (deptUserType?.includes(condition?.field)) {
+                                  condition.value = e?.value;
+                                  condition.deptUserLabel = e?.deptUserLabel;
+                                }
                                 // 更新数据
                                 setForm((f) => ({ ...f }));
                               }}