@hzab/flowlong-designer 0.0.2 → 0.0.4

package/CHANGELOG.md

@@ -1,5 +1,15 @@
+# @hzab/flowlong-designer@0.0.4
+
+条件选择数据兼容
+
+# @hzab/flowlong-designer@0.0.3
+
+完善类型选择、抛出值
+
 # @hzab/flowlong-designer@0.0.2
+
 重构人员选择
 
 # @hzab/flowlong-designer@0.0.1
+
 组件初始化

package/package.json

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

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

@@ -51,7 +51,7 @@ export const Approver = (props) => {
         return false;
       }
     } else if (nodeConf.setType == 2) {
-      return nodeConf.examineLevel == 1 ? "直接主管" : `发起人的第${nodeConf.examineLevel}级主管`;
+      return nodeConf.examineLevel == 1 ? "直接部门经理" : `发起人的第${nodeConf.examineLevel}级部门经理`;
     } else if (nodeConf.setType == 3) {
       if (nodeConf.nodeAssigneeList && nodeConf.nodeAssigneeList.length > 0) {
         const roles = nodeConf.nodeAssigneeList.map((item) => item.name).join("、");
@@ -65,6 +65,8 @@ export const Approver = (props) => {
       return "发起人自己";
     } else if (nodeConf.setType == 7) {
       return "连续多级主管";
+    } else if (nodeConf.setType == 9) {
+      return "驻点队长";
     }
   }
 
@@ -193,13 +195,18 @@ export const Approver = (props) => {
                   type="primary"
                   icon={<PlusOutlined />}
                   onClick={() =>
-                    selectorCtx.setSelectHandler(1, form.nodeAssigneeList, (selected) => {
-                      setForm((f) => {
-                        // 设置 人员、角色 列表数组
-                        f.nodeAssigneeList = selected;
-                        return { ...f };
-                      });
-                    },2)
+                    selectorCtx.setSelectHandler(
+                      1,
+                      form.nodeAssigneeList,
+                      (selected) => {
+                        setForm((f) => {
+                          // 设置 人员、角色 列表数组
+                          f.nodeAssigneeList = selected;
+                          return { ...f };
+                        });
+                      },
+                      2,
+                    )
                   }
                 >
                   选择人员
@@ -223,7 +230,7 @@ export const Approver = (props) => {
               </Form.Item>
             ) : null}
 
-            {form.setType === 2 ? (
+            {/* {form.setType === 2 ? (
               <Form.Item label="指定主管" name="aaa">
                 发起人的第
                 <InputNumber
@@ -238,7 +245,7 @@ export const Approver = (props) => {
                 />
                 级主管
               </Form.Item>
-            ) : null}
+            ) : null} */}
 
             {form.setType === 3 ? (
               <Form.Item label="选择角色" name="nodeAssigneeList">
@@ -246,13 +253,18 @@ export const Approver = (props) => {
                   type="primary"
                   icon={<PlusOutlined />}
                   onClick={() =>
-                    selectorCtx.setSelectHandler(2, form.nodeAssigneeList, (selected) => {
-                      setForm((f) => {
-                        // 设置 人员、角色 列表数组
-                        f.nodeAssigneeList = selected;
-                        return { ...f };
-                      });
-                    },2)
+                    selectorCtx.setSelectHandler(
+                      2,
+                      form.nodeAssigneeList,
+                      (selected) => {
+                        setForm((f) => {
+                          // 设置 人员、角色 列表数组
+                          f.nodeAssigneeList = selected;
+                          return { ...f };
+                        });
+                      },
+                      2,
+                    )
                   }
                 >
                   选择角色
@@ -276,7 +288,7 @@ export const Approver = (props) => {
               </Form.Item>
             ) : null}
 
-            {form.setType === 4 ? (
+            {/* {form.setType === 4 ? (
               <Form.Item label="指定主管" name="selectMode">
                 <Radio.Group
                   options={selectModeOptions}
@@ -318,7 +330,7 @@ export const Approver = (props) => {
                     });
                   }}
                 />{" "}
-                级主管
+                级主管级主管
               </Form.Item>
             ) : null}
 
@@ -374,7 +386,7 @@ export const Approver = (props) => {
                   });
                 }}
               />
-            </Form.Item>
+            </Form.Item> */}
           </Form>
         </Drawer>
       </div>

package/src/components/NodeWrap/Nodes/Approver/options.ts

@@ -3,11 +3,12 @@
  */
 export const setTypeOptions = [
   { label: "指定成员", value: 1 },
-  { label: "主管", value: 2 },
+  { label: "部门经理", value: 2 },
   { label: "角色", value: 3 },
-  { label: "发起人自选", value: 4 },
-  { label: "发起人自己", value: 5 },
-  { label: "连续多级主管", value: 7 },
+  // { label: "发起人自选", value: 4 },
+  // { label: "发起人自己", value: 5 },
+  // { label: "连续多级主管", value: 7 },
+  { label: "驻点队长", value: 9 },
 ];
 
 /**

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

@@ -100,10 +100,10 @@ export const Branch = (props) => {
         .map((conditionGroup) =>
           conditionGroup.map((item) => {
             if (item?.field === "dept") {
-              return `${item.label}${item.operator}${item.value?.map((el) => el?.label)}`;
+              return `${item.label}${item.operator}${item.values?.map((el) => el?.label)}`;
             }
             if (item?.field === "useId") {
-              return `${item.label}${item.operator}${item.value?.map((el) => el?.userName)}`;
+              return `${item.label}${item.operator}${item.values?.map((el) => el?.userName)}`;
             }
             return `${item.label}${item.operator}${item.value}`;
           }),
@@ -380,10 +380,11 @@ export const Branch = (props) => {
                               className="condition-content-box-item"
                             ></Select>
                             <Field
-                              value={condition.value}
+                              value={condition?.values || []}
                               type={condition.field}
                               onChange={(e) => {
-                                condition.value = e;
+                                condition.value = e?.map((item) => item?.value)?.join(",");
+                                condition.values = e;
                                 // 更新数据
                                 setForm((f) => ({ ...f }));
                               }}

package/src/components/NodeWrap/Nodes/Send/index.less

@@ -5,3 +5,6 @@
     }
   }
 }
+.send-title {
+  background-color: #3296fa;
+}

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

@@ -1,20 +1,16 @@
 import { useRef, useState, useContext } from "react";
-import { Drawer, Button, Input, Form, Tag, Switch, Select, Radio, InputNumber } from "antd";
-import { EditOutlined, SendOutlined, DeleteOutlined, PlusOutlined } from "@ant-design/icons";
+import { Drawer, Input, Button, Form, Select, Tag, InputNumber, Radio, Checkbox, Switch } from "antd";
+import { UserOutlined, DeleteOutlined, EditOutlined, PlusOutlined } from "@ant-design/icons";
 
 import AddNode from "../AddNode";
-import { SelectContext } from "../../../Selector/SelectContext";
 import { setTypeOptions, selectModeOptions, directorModeOptions, termModeOptions, examineModeOptions } from "./options";
 
-import "./index.less";
-
-export const Send = (props) => {
-  const selectorCtx = useContext(SelectContext);
-  const { modelValue: nodeConfig = {}, onChange } = props;
+import { SelectContext } from "../../../Selector/SelectContext";
 
-  const [drawer, setDrawer] = useState(false);
-  const [isEditTitle, setIsEditTitle] = useState(false);
+import "./index.less";
 
+export const Approver = (props) => {
+  const { modelValue = {}, onChange } = props;
   const [form, setForm] = useState({
     nodeName: "",
     setType: undefined,
@@ -27,29 +23,55 @@ export const Send = (props) => {
     term: undefined,
     termMode: undefined,
     examineMode: undefined,
-    conditionList: [],
-    userSelectFlag: undefined,
   });
+  const [drawer, setDrawer] = useState(false);
+  const [isEditTitle, setIsEditTitle] = useState(false);
+
+  const selectorCtx = useContext(SelectContext);
 
+  const formRef = useRef();
   const nodeTitleRef = useRef();
 
   function onShow() {
-    setForm(JSON.parse(JSON.stringify(nodeConfig)));
-    setIsEditTitle(false);
     setDrawer(true);
+    setForm(JSON.parse(JSON.stringify(modelValue)));
   }
 
-  function onDrawerClose() {
-    setDrawer(false);
+  function onNodeDel(e) {
+    e.stopPropagation();
+    onChange && onChange(modelValue.childNode);
   }
 
-  function onEditTitle() {
-    setIsEditTitle(true);
-    if (nodeTitleRef.current) {
-      // @ts-ignore
-      nodeTitleRef.current?.focus();
+  function toText(nodeConf) {
+    if (nodeConf.setType == 1) {
+      if (nodeConf.nodeAssigneeList && nodeConf.nodeAssigneeList.length > 0) {
+        const users = nodeConf.nodeAssigneeList.map((item) => item.name).join("、");
+        return users;
+      } else {
+        return false;
+      }
+    } else if (nodeConf.setType == 2) {
+      return nodeConf.examineLevel == 1 || !nodeConf.examineLevel
+        ? "直接部门经理"
+        : `发起人的第${nodeConf.examineLevel}级部门经理`;
+    } else if (nodeConf.setType == 3) {
+      if (nodeConf.nodeAssigneeList && nodeConf.nodeAssigneeList.length > 0) {
+        const roles = nodeConf.nodeAssigneeList.map((item) => item.name).join("、");
+        return "角色-" + roles;
+      } else {
+        return false;
+      }
+    } else if (nodeConf.setType == 4) {
+      return "发起人自选";
+    } else if (nodeConf.setType == 5) {
+      return "发起人自己";
+    } else if (nodeConf.setType == 7) {
+      return "连续多级主管";
+    } else if (nodeConf.setType == 9) {
+      return "驻点队长";
     }
   }
+
   function onSaveTitle(e) {
     setForm((f) => {
       // @ts-ignore
@@ -58,33 +80,22 @@ export const Send = (props) => {
     });
     setIsEditTitle(false);
   }
+  function onEditTitle() {
+    setIsEditTitle(true);
+    if (nodeTitleRef.current) {
+      // @ts-ignore
+      nodeTitleRef.current?.focus();
+    }
+  }
 
   function onDrawerSave() {
-    // nodeConfig.conditionNodes[curIdxRef.current] = form;
-    onChange && onChange({ ...form });
+    // 强制更新数据
+    onChange && onChange(form);
     onDrawerClose();
   }
 
-  function delNode() {
-    onChange && onChange({ ...nodeConfig.childNode });
-  }
-
-  function toText(nodeConfig) {
-    if (nodeConfig.nodeAssigneeList && nodeConfig.nodeAssigneeList.length > 0) {
-      const users = nodeConfig.nodeAssigneeList.map((item) => item.name).join("、");
-      return users;
-    } else {
-      if (nodeConfig.userSelectFlag) {
-        return "发起人自选";
-      } else {
-        return false;
-      }
-    }
-  }
-
-  function delUser(index) {
-    form.nodeAssigneeList.splice(index, 1);
-    setForm((f) => ({ ...f }));
+  function onDrawerClose() {
+    setDrawer(false);
   }
 
   function onUserDel(idx) {
@@ -101,40 +112,30 @@ export const Send = (props) => {
     });
   }
 
-
   return (
-    <div className="send">
+    <div className="approver-wrap">
       <div className="node-wrap">
         <div className="node-wrap-box" onClick={onShow}>
-          <div className="title">
-            <SendOutlined className="icon" />
-            <span>{nodeConfig.nodeName || "抄送人"}</span>
-            <DeleteOutlined
-              className="close"
-              onClick={(e) => {
-                e.stopPropagation();
-                delNode();
-              }}
-            />
+          <div className="title send-title">
+            <UserOutlined />
+            <span>{modelValue?.nodeName}</span>
+            <DeleteOutlined className="node-close-btn" onClick={onNodeDel} />
           </div>
           <div className="content">
-            {toText(nodeConfig) ? <span>{toText(nodeConfig)}</span> : <span className="placeholder">请选择人员</span>}
+            {toText(modelValue) ? <span>{toText(modelValue)}</span> : <span className="placeholder">请选择</span>}
           </div>
         </div>
+
         <AddNode
-          modelValue={nodeConfig.childNode}
+          modelValue={modelValue?.childNode}
           onChange={(val) => {
-            nodeConfig.childNode = val;
-            onChange && onChange({ ...nodeConfig });
+            modelValue.childNode = val;
+            // 强制更新数据
+            onChange && onChange({ ...modelValue });
           }}
         ></AddNode>
 
         <Drawer
-          v-model="drawer"
-          open={drawer}
-          onClose={onDrawerClose}
-          destroyOnClose
-          getContainer="body"
           width={600}
           title={
             <div className="node-wrap-drawer-title">
@@ -148,23 +149,34 @@ export const Send = (props) => {
                 />
               ) : (
                 <div className="drawer-title">
-                  {form.nodeName || "抄送人设置"}
+                  {form.nodeName || "审批人设置"}
                   <EditOutlined className="node-wrap-drawer__title-edit" onClick={onEditTitle} />
                 </div>
               )}
             </div>
           }
+          open={drawer}
+          onClose={onDrawerClose}
+          destroyOnClose
+          getContainer="body"
           footer={
-            <>
+            <div className="approver-drawer-footer">
               <Button type="primary" onClick={onDrawerSave}>
                 保存
               </Button>
               <Button onClick={onDrawerClose}>取消</Button>
-            </>
+            </div>
           }
         >
-          <Form label-position="top" initialValues={form}>
-            <Form.Item label="抄送人类型" name="setType">
+          <Form
+            ref={formRef}
+            name="approverForm"
+            labelCol={{ span: 8 }}
+            wrapperCol={{ span: 16 }}
+            initialValues={form}
+            autoComplete="off"
+          >
+            <Form.Item label="审批人员类型" name="setType">
               <Select
                 options={setTypeOptions}
                 value={form.setType}
@@ -189,14 +201,14 @@ export const Send = (props) => {
                       1,
                       form.nodeAssigneeList,
                       (selected) => {
-                      setForm((f) => {
-                        // 设置 人员、角色 列表数组
-                        f.nodeAssigneeList = selected;
-                        return { ...f };
-                      });
-                    },
-                    2
-                  )
+                        setForm((f) => {
+                          // 设置 人员、角色 列表数组
+                          f.nodeAssigneeList = selected;
+                          return { ...f };
+                        });
+                      },
+                      2,
+                    )
                   }
                 >
                   选择人员
@@ -220,7 +232,7 @@ export const Send = (props) => {
               </Form.Item>
             ) : null}
 
-            {form.setType === 2 ? (
+            {/* {form.setType === 2 ? (
               <Form.Item label="指定主管" name="aaa">
                 发起人的第
                 <InputNumber
@@ -235,7 +247,7 @@ export const Send = (props) => {
                 />
                 级主管
               </Form.Item>
-            ) : null}
+            ) : null} */}
 
             {form.setType === 3 ? (
               <Form.Item label="选择角色" name="nodeAssigneeList">
@@ -243,13 +255,18 @@ export const Send = (props) => {
                   type="primary"
                   icon={<PlusOutlined />}
                   onClick={() =>
-                    selectorCtx.setSelectHandler(2, form.nodeAssigneeList, (selected) => {
-                      setForm((f) => {
-                        // 设置 人员、角色 列表数组
-                        f.nodeAssigneeList = selected;
-                        return { ...f };
-                      });
-                    },2)
+                    selectorCtx.setSelectHandler(
+                      2,
+                      form.nodeAssigneeList,
+                      (selected) => {
+                        setForm((f) => {
+                          // 设置 人员、角色 列表数组
+                          f.nodeAssigneeList = selected;
+                          return { ...f };
+                        });
+                      },
+                      2,
+                    )
                   }
                 >
                   选择角色
@@ -273,7 +290,7 @@ export const Send = (props) => {
               </Form.Item>
             ) : null}
 
-            {form.setType === 4 ? (
+            {/* {form.setType === 4 ? (
               <Form.Item label="指定主管" name="selectMode">
                 <Radio.Group
                   options={selectModeOptions}
@@ -315,51 +332,62 @@ export const Send = (props) => {
                     });
                   }}
                 />{" "}
-                级主管
+                级主管级主管
               </Form.Item>
             ) : null}
-            {/* <Form.Item label="选择要抄送的人员">
-              <Button
-                type="primary"
-                onClick={() => {
-                  selectorCtx.setSelectHandler(1, form.nodeAssigneeList, (selected) => {
-                    setForm((f) => {
-                      // 设置 人员、角色 列表数组
-                      f.nodeAssigneeList = selected;
-                      return { ...f };
-                    });
-                  });
-                }}
-              >
-                选择人员
-              </Button>
-              <div className="tags-list">
-                {form.nodeAssigneeList?.map((it, idx) => {
-                  return (
-                    <Tag
-                      key={it.id ?? idx}
-                      className="node-assignee-item"
-                      closable
-                      onClose={() => {
-                        delUser(idx);
-                      }}
-                    >
-                      {it.name}
-                    </Tag>
-                  );
-                })}
-              </div>
-            </Form.Item>
-            <Form.Item label="允许发起人自选抄送人">
+
+            <Form.Item label="超时自动审批" name="termAuto">
               <Switch
-                checked={form.userSelectFlag}
+                checked={form.termAuto}
                 onChange={(val) => {
                   setForm((f) => {
-                    form.userSelectFlag = val;
+                    form.termAuto = val;
                     return { ...f };
                   });
                 }}
               ></Switch>
+            </Form.Item>
+
+            {form.termAuto ? (
+              <>
+                <Form.Item label="审批期限（为 0 则不生效）" name="term">
+                  <InputNumber
+                    min={0}
+                    value={form.term}
+                    onChange={(val) => {
+                      setForm((f) => {
+                        form.term = val;
+                        return { ...f };
+                      });
+                    }}
+                  />
+                </Form.Item>
+                <Form.Item label="审批期限超时后执行" name="termMode">
+                  <Radio.Group
+                    options={termModeOptions}
+                    value={form.termMode}
+                    onChange={(e) => {
+                      setForm((f) => {
+                        form.termMode = e.target.value;
+                        return { ...f };
+                      });
+                    }}
+                  />
+                </Form.Item>
+              </>
+            ) : null}
+
+            <Form.Item label="多人审批时审批方式" name="examineMode">
+              <Radio.Group
+                options={examineModeOptions}
+                value={form.examineMode}
+                onChange={(e) => {
+                  setForm((f) => {
+                    form.examineMode = e.target.value;
+                    return { ...f };
+                  });
+                }}
+              />
             </Form.Item> */}
           </Form>
         </Drawer>
@@ -368,4 +396,4 @@ export const Send = (props) => {
   );
 };
 
-export default Send;
+export default Approver;

package/src/components/NodeWrap/Nodes/Send/options.ts

@@ -3,11 +3,12 @@
  */
 export const setTypeOptions = [
   { label: "指定成员", value: 1 },
-  { label: "主管", value: 2 },
+  { label: "部门经理", value: 2 },
   { label: "角色", value: 3 },
-  { label: "发起人自选", value: 4 },
-  { label: "发起人自己", value: 5 },
-  { label: "连续多级主管", value: 7 },
+  // { label: "发起人自选", value: 4 },
+  // { label: "发起人自己", value: 5 },
+  // { label: "连续多级主管", value: 7 },
+  { label: "驻点队长", value: 9 },
 ];
 
 /**

package/src/components/Selector/index.tsx

@@ -1,7 +1,7 @@
 import { useRef, useState, useContext, useEffect } from "react";
 import { Modal, Input, Button, Tree, Checkbox, Pagination, Avatar } from "antd";
 import { RightOutlined, DeleteOutlined } from "@ant-design/icons";
-import GroupUserSelector from '@hzab/group-user-selector'
+import GroupUserSelector from "@hzab/group-user-selector";
 import { SelectContext } from "./SelectContext";
 
 import "./index.less";
@@ -11,166 +11,27 @@ const titleMap = ["人员选择", "角色选择"];
 
 export const Selector = (props) => {
   const selectorCtx = useContext(SelectContext);
-  const { open, type, value, onSave, roleListConfig, listConfig, initiatorListConfig, drawerType } = selectorCtx.selectHandler;
-  // const [groupOptions, setGroupOptions] = useState([
-  //   {
-  //     title: "Group-111",
-  //     key: "g-111",
-  //   },
-  //   {
-  //     title: "Group-222",
-  //     key: "g-222",
-  //   },
-  //   {
-  //     title: "Group-333",
-  //     key: "g-333",
-  //   },
-  // ]);
-  // const [options, setOptions] = useState([
+  const { open, type, value, onSave, roleListConfig, listConfig, initiatorListConfig, drawerType } =
+    selectorCtx.selectHandler;
 
-  // ]);
-
-  // const [roleOptions, setRoleOptions] = useState([
-  //   {
-  //     title: "Role-111",
-  //     key: "r-111",
-  //   },
-  //   {
-  //     title: "Role-222",
-  //     key: "r-222",
-  //   },
-  //   {
-  //     title: "Role-333",
-  //     key: "r-333",
-  //   },
-  // ]);
-  // const [selected, setSelected] = useState(Array.isArray(value) ? value?.map((it) => it.id || it.key) : []);
-  // const selectedRef = useRef(
-  //   Array.isArray(value)
-  //     ? value?.map((it) => ({
-  //       ...it,
-  //       title: it.name,
-  //       key: it.id,
-  //     }))
-  //     : [],
-  // );
-
-
-  // const handleGetTree =  () => {
-  //   // treeModel?.get()
-  //   // .then((res) => {
-  //   //   setGroupOptions(res);
-  //   // })
-  //   };
-
-  // const handleGetList =  (data?: any) => {
-  //   // (type == 2 ? roleListModel :listModel)?.get(data || {})
-  //   // .then((res) => {
-  //   //   setOptions(roleOptions);
-  //   // })
-  //   };
-
-  // useEffect(() => {
-  //   if (type == 2) {
-  //     handleGetList();
-  //   } else if (type == 1) {
-  //     handleGetTree();
-  //   }
-  // }, [type]);
-
-  // useEffect(() => {
-
-  //   setSelected(Array.isArray(value) ? value?.map((it) => it.id || it.key) : []);
-  //   selectedRef.current = Array.isArray(value)
-  //     ? value?.map((it) => ({
-  //       ...it,
-  //       title: it.name,
-  //       key: it.id,
-  //     }))
-  //     : [];
-  // }, [value]);
-
-  // const pageRef = useRef(1);
-  // const keywordRef = useRef("");
-  const keyIdRef = useRef(undefined);
-  const groupTreeRef = useRef();
   const selectorRef = useRef(undefined);
 
   function onModalSave() {
-    console.log(selectorRef.current?.selectedList);
-
     onSave && onSave(selectorRef.current?.selectedList || []);
     onModalClose();
   }
 
   function onModalClose() {
-    // setSelected([]);
-    // selectedRef.current = [];
     selectorCtx.onClose();
   }
 
-  // function onSearch(value, event) {
-  //   // keywordRef.current = value;
-  //   handleGetList({orgId:keyIdRef.current, name:value});
-
-  // }
-
-  // function groupClick(value, node) {
-  //   handleGetList({orgId:value});
-  //   keyIdRef.current = value;
-
-  //   // keywordRef.current = "";
-  //   // pageRef.current = 1;
-  //   // getUserOptions(value);
-  // }
-
-  // function getUserOptions(id) {
-  //   // TODO: 请求并设置用户列表
-  //   setTimeout(() => {
-  //     const list = [];
-  //     for (let i = 0; i < 10; i++) {
-  //       list.push({
-  //         title: "User-" + id + "-" + list.length,
-  //         key: "u-" + id + "-" + list.length,
-  //       });
-  //     }
-  //     console.log(list);
-
-  //     // pageRef.current
-  //     setOptions(list);
-  //   }, 100);
-  // }
-
-  // function onUserCheck(key) {
-
-  //   const is = selected.includes(key);
-  //   if (!is) {
-  //     setSelected([...selected, key])
-  //     const item = options.find((it) => it.key === key);
-  //     selectedRef.current = [...selectedRef.current, {
-  //       ...item,
-  //       id: item.key,
-  //       name: item.title,
-  //     }]
-  //   } else {
-  //     setSelected(selected.filter((it) => it !== key));
-  //     selectedRef.current = selectedRef.current.filter((it) => it.key !== key);
-  //   }
-  // }
-
-  // function deleteSelected(key) {
-  //   setSelected(selected.filter((it) => it !== key));
-  //   selectedRef.current = selectedRef.current.filter((it) => it.key !== key);
-  // }
-
-
   return (
     <div className="selector">
       <Modal
         wrapClassName="selector-modal"
         open={open}
         title={titleMap[type - 1]}
-        width={800}
+        width={850}
         destroyOnClose
         getContainer="body"
         onCancel={onModalClose}
@@ -183,59 +44,11 @@ export const Selector = (props) => {
           </div>
         }
       >
-        <GroupUserSelector ref={selectorRef} {...(drawerType == 1 ?  initiatorListConfig : type == 2 ? roleListConfig : listConfig)} value={value}/>
-        {/* <div className="sc-user-select">
-          <div className="sc-user-select__left">
-            <div className="sc-user-select__search">
-              <Input.Search onSearch={onSearch} enterButton placeholder="搜索成员" />
-            </div>
-            <div className="sc-user-select__select">
-              {type == 1 ? <div className="sc-user-select__tree" v-loading="showGrouploading">
-                <Tree className="menu" ref={groupTreeRef} treeData={groupOptions} onSelect={groupClick} />
-              </div> : null}
-              <div className="sc-user-select__user" v-loading="showUserloading">
-                <div className="sc-user-select__user__list">
-                  {options?.map((item) => {
-                    return (
-                      <div className="sc-user-select__user__item" key={item.key}>
-                        <Checkbox
-                          checked={selected.includes(item.key)}
-                          onChange={(e) => onUserCheck(item.key)}
-                        >
-                          {item.title}
-                        </Checkbox>
-                      </div>
-                    )
-                  })}
-                </div>
-                <footer>
-                  <Pagination simple size="small" total={50} showSizeChanger showQuickJumper></Pagination>
-                </footer>
-              </div>
-            </div>
-          </div>
-          <div className="sc-user-select__toicon">
-            <RightOutlined />
-          </div>
-          <div className="sc-user-select__selected">
-            <header>已选 ({selected?.length ?? 0})</header>
-            <ul className="sc-user-select__selected-list">
-              {selectedRef.current?.map((item, idx) => {
-                return (
-                  <li key={item.id ?? item.key}>
-                    <span className="name">
-                      <Avatar size="small">{item.title?.substring(0, 1)}</Avatar>
-                      <label>{item.title}</label>
-                    </span>
-                    <span className="delete">
-                      <DeleteOutlined onClick={() => deleteSelected(item.id ?? item.key)}></DeleteOutlined>
-                    </span>
-                  </li>
-                );
-              })}
-            </ul>
-          </div>
-        </div> */}
+        <GroupUserSelector
+          ref={selectorRef}
+          {...(drawerType == 1 ? initiatorListConfig : type == 2 ? roleListConfig : listConfig)}
+          value={value}
+        />
       </Modal>
     </div>
   );

package/src/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useImperativeHandle, forwardRef, useState } from "react";
 import { Button, Drawer } from "antd";
 
 import ScWorkflow from "./components/ScWorkflow";
@@ -43,14 +43,8 @@ function copy(str) {
   });
 }
 
-function FlowlongDesigner(props) {
-  const {
-    value,
-    flowName,
-    roleListConfig,
-    listConfig,
-    initiatorListConfig
-  } = props;
+function FlowlongDesigner(props, ref) {
+  const { value, flowName, roleListConfig, listConfig, initiatorListConfig } = props;
   const [drawer, setDrawer] = useState(false);
   const [zoom, setZoom] = useState(1);
   const [data, setData] = useState(Object.keys(value || {}).length > 0 ? value : getInitNodeData({ name: flowName }));
@@ -59,17 +53,22 @@ function FlowlongDesigner(props) {
     type: -1,
     drawerType: -1,
     value: [],
-    onSave: (s) => { },
+    onSave: (s) => {},
     roleListConfig: {},
     listConfig: {},
     initiatorListConfig: {},
   });
 
+  // 通过useImperativeHandle定义要抛出的值或方法
+  useImperativeHandle(ref, () => ({
+    data,
+  }));
+
   useEffect(() => {
     value && setData(value);
   }, [value]);
 
-  function saveAsPng() { }
+  function saveAsPng() {}
   function copyParseJson() {
     copy(JSON.stringify(data, null, 2));
   }
@@ -95,7 +94,7 @@ function FlowlongDesigner(props) {
               onSave,
               roleListConfig,
               listConfig,
-              initiatorListConfig
+              initiatorListConfig,
             });
           },
           onClose() {
@@ -104,10 +103,10 @@ function FlowlongDesigner(props) {
               type: -1,
               drawerType: -1,
               value: [],
-              onSave: (s) => { },
+              onSave: (s) => {},
               roleListConfig,
               listConfig,
-              initiatorListConfig
+              initiatorListConfig,
             });
           },
         }}
@@ -156,4 +155,4 @@ function FlowlongDesigner(props) {
   );
 }
 
-export default FlowlongDesigner;
+export default forwardRef(FlowlongDesigner);