@hzab/flowlong-designer 0.0.1 → 0.0.2

package/CHANGELOG.md

@@ -1,2 +1,5 @@
+# @hzab/flowlong-designer@0.0.2
+重构人员选择
+
 # @hzab/flowlong-designer@0.0.1
-组件初始化
+组件初始化

package/README.md

@@ -20,9 +20,32 @@ import Demo from "@hzab/flowlong-designer";
 
 ### InfoPanel Attributes
 
+| 参数                 | 类型   | 必填 | 默认值 | 说明              |
+| ------              | ------ | ---- | ------ | ----------------- |
+| value               | Object | 否   | -      | 数据信息的 schema |
+| listConfig          | Object | 否   | -      | 人员选择的 config |
+| roleListConfig      | Object | 否   | -      | 角色选择的 config |
+| initiatorListConfig | Object | 否   | -      | 发起人选择的 config |
+
+
+
+### InfoPanel listConfig｜roleListConfig ｜ initiatorListConfig
+
 | 参数   | 类型   | 必填 | 默认值 | 说明              |
 | ------ | ------ | ---- | ------ | ----------------- |
-| schema | Object | 是   | -      | 数据信息的 schema |
+| value          | Object | 否   | []     | 选中的人员数据 |
+| model          | Object | 否   | -      | 列表的请求 model （getListApi） |
+| searchModel    | Object | 否   | -      | 搜索列表的请求 model （getListApi） |
+| queryKey       | string | 否   | parentId | 列表的请求 model 的入参 key  |
+| searchQueryKey | string | 否   | search | 搜索列表的请求 model 的入参 key |
+| labelKey       | string | 否   | label  | labelKey |
+| valueKey       | string | 否   | value  | valueKey |
+| imgKey         | string | 否   | img    | imgKey  头像 |
+| isUserKey      | string | 否   | isUser | 区分部门和人员 |
+| hasPagination  | boolean | 否   | true  | 列表是否分页 |
+| hasSearch      | boolean | 否   | true  | 是否有搜索 |
+| hasSearchPagination | boolean | 否   | true | 搜索列表是否分页 |
+
 
 # 组件开发流程
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/flowlong-designer",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "自定义审批流配置组件",
   "main": "src",
   "scripts": {
@@ -46,6 +46,9 @@
     ]
   },
   "dependencies": {
+    "@hzab/data-model": "^1.7.0",
+    "@hzab/deep-list": "^0.0.2",
+    "@hzab/group-user-selector": "^0.0.4",
     "nanoid": "^3.3.7"
   }
 }

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

@@ -199,7 +199,7 @@ export const Approver = (props) => {
                         f.nodeAssigneeList = selected;
                         return { ...f };
                       });
-                    })
+                    },2)
                   }
                 >
                   选择人员
@@ -252,7 +252,7 @@ export const Approver = (props) => {
                         f.nodeAssigneeList = selected;
                         return { ...f };
                       });
-                    })
+                    },2)
                   }
                 >
                   选择角色

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

@@ -0,0 +1,30 @@
+import { Input, InputNumber } from "antd";
+import GroupUserSelectorModal from "../GroupUserSelectorModal";
+
+interface FormMapProps {
+  type: string;
+  onChange?: (v: any) => void;
+  value?: any;
+}
+const Field = (props: FormMapProps) => {
+  const { type, onChange, value } = props;
+
+  return (
+    <>
+      {["day", "hour"].includes(type) && (
+        <Input
+          value={value}
+          placeholder="值"
+          type="number"
+          onChange={(e) => {
+            onChange(e.target.value);
+          }}
+        ></Input>
+      )}
+      {["dept", "useId"].includes(type) && (
+        <GroupUserSelectorModal type={type} onChange={onChange} value={value}></GroupUserSelectorModal>
+      )}
+    </>
+  );
+};
+export default Field;

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

@@ -0,0 +1,4 @@
+.groupUserSelectorModal {
+  max-height: 500px;
+  overflow-y: auto;
+}

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

@@ -0,0 +1,97 @@
+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 "./index.less";
+const fieldMap = {
+  dept: "deptList",
+  useId: "userNameVos",
+};
+const titleMap = {
+  dept: "部门",
+  useId: "用户",
+};
+const GroupUserSelectorModal = (props) => {
+  const { type, onChange, value = [] } = props;
+  const [open, setOpen] = useState(false);
+  const groupUserSelectorRef = useRef(null);
+  const deptModel = new DataModel({
+    getListApi: "/api/v1/sysOrg/getDeptList",
+  });
+  const userModel = new DataModel({
+    getListApi: "/api/v1/userinfo/userDetailListV2",
+    query: {
+      conditionStatus: 0,
+    },
+    getListMap(data) {
+      return {
+        ...data,
+        name: data.userName,
+        id: data.userId,
+        isUser: true,
+      };
+    },
+  });
+  const model = useMemo(() => {
+    if (type === "dept") {
+      return deptModel;
+    }
+    if (type === "useId") {
+      return userModel;
+    }
+  }, [type]);
+  const onOk = () => {
+    onChange(groupUserSelectorRef.current?.selectedList);
+    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",
+  };
+  return (
+    <div>
+      <Input
+        value={inputValue}
+        readOnly
+        onClick={() => {
+          setOpen(true);
+        }}
+        placeholder="请点击编辑"
+        style={{ cursor: "pointer" }}
+      ></Input>
+      <Modal
+        title={titleMap[type]}
+        open={open}
+        onCancel={() => {
+          setOpen(false);
+        }}
+        width={800}
+        okText={"确认"}
+        cancelText={"取消"}
+        onOk={onOk}
+        centered
+        destroyOnClose
+      >
+        <div className="groupUserSelectorModal">
+          <GroupUserSelector
+            value={value || []}
+            ref={groupUserSelectorRef}
+            model={model}
+            {...(type === "useId" ? userListConfig : {})}
+          ></GroupUserSelector>
+        </div>
+      </Modal>
+    </div>
+  );
+};
+export default GroupUserSelectorModal;

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

@@ -2,10 +2,12 @@
   .branch-box .add-branch {
     background: var(--el-bg-color);
   }
+
   .branch-wrap {
     display: inline-flex;
     width: 100%;
   }
+
   .branch-box-wrap {
     display: flex;
     flex-flow: column wrap;
@@ -14,12 +16,14 @@
     width: 100%;
     flex-shrink: 0;
   }
+
   .col-box {
     display: inline-flex;
     flex-direction: column;
     align-items: center;
     position: relative;
   }
+
   .branch-box {
     display: flex;
     overflow: visible;
@@ -30,6 +34,7 @@
     position: relative;
     margin-top: 15px;
   }
+
   .branch-box .col-box::before {
     content: "";
     position: absolute;
@@ -43,11 +48,13 @@
     height: 100%;
     background-color: rgb(202, 202, 202);
   }
+
   .condition-node {
     display: inline-flex;
     flex-direction: column;
     min-height: 220px;
   }
+
   .condition-node-box {
     padding-top: 30px;
     padding-right: 50px;
@@ -59,6 +66,7 @@
     display: inline-flex;
     flex-direction: column;
   }
+
   .condition-node-box::before {
     content: "";
     position: absolute;
@@ -71,6 +79,7 @@
     height: 100%;
     background-color: rgb(202, 202, 202);
   }
+
   .auto-judge {
     position: relative;
     width: 220px;
@@ -81,6 +90,7 @@
     cursor: pointer;
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
   }
+
   .auto-judge::before {
     content: "";
     position: absolute;
@@ -93,12 +103,15 @@
     border-color: rgb(202, 202, 202) transparent transparent;
     background: rgb(239, 239, 239);
   }
+
   .auto-judge .title {
     line-height: 16px;
   }
+
   .auto-judge .title .node-title {
     color: #15bc83;
   }
+
   .auto-judge .title .delete-btn {
     font-size: 15px;
     position: absolute;
@@ -107,35 +120,43 @@
     color: #999;
     display: none;
   }
+
   .auto-judge .title .priority-title {
     position: absolute;
     top: 15px;
     right: 15px;
     color: #999;
   }
+
   .auto-judge .content {
     position: relative;
     padding-top: 15px;
   }
+
   .auto-judge .content .placeholder {
     color: #999;
   }
+
   .auto-judge:hover {
     .delete-btn {
       display: block;
     }
+
     .priority-title {
       display: none;
     }
   }
+
   .auto-judge:hover {
     .sort-left {
       display: flex;
     }
+
     .sort-right {
       display: flex;
     }
   }
+
   .auto-judge .sort-left {
     position: absolute;
     top: 0;
@@ -147,6 +168,7 @@
     align-items: center;
     flex-direction: column;
   }
+
   .auto-judge .sort-right {
     position: absolute;
     top: 0;
@@ -158,10 +180,12 @@
     align-items: center;
     flex-direction: column;
   }
+
   .auto-judge .sort-left:hover,
   .auto-judge .sort-right:hover {
     background: #eee;
   }
+
   .auto-judge:after {
     pointer-events: none;
     content: "";
@@ -174,10 +198,12 @@
     border-radius: 4px;
     transition: all 0.1s;
   }
+
   .auto-judge:hover:after {
     border: 1px solid #3296fa;
     box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
   }
+
   .top-left-cover-line,
   .top-right-cover-line {
     position: absolute;
@@ -186,6 +212,7 @@
     background-color: #fff;
     top: -2px;
   }
+
   .bottom-left-cover-line,
   .bottom-right-cover-line {
     position: absolute;
@@ -194,15 +221,19 @@
     background-color: #fff;
     bottom: -2px;
   }
+
   .top-left-cover-line {
     left: -1px;
   }
+
   .top-right-cover-line {
     right: -1px;
   }
+
   .bottom-left-cover-line {
     left: -1px;
   }
+
   .bottom-right-cover-line {
     right: -1px;
   }
@@ -271,7 +302,12 @@
         }
 
         div:not(:first-child) {
-          margin-left: 16px;
+          // margin-left: 16px;
+        }
+
+        .condition-content-box-item {
+          margin-right: 16px;
+
         }
       }
 
@@ -311,9 +347,10 @@
       padding: 12px;
     }
   }
+
   .ant-drawer-footer {
-    .ant-btn + .ant-btn {
+    .ant-btn+.ant-btn {
       margin-left: 12px;
     }
   }
-}
+}

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

@@ -5,6 +5,7 @@ import { LeftOutlined, DeleteOutlined, RightOutlined, EditOutlined } from "@ant-
 import AddNode from "../AddNode";
 
 import "./index.less";
+import Field from "./components/Field";
 
 /**
  * 操作符选项列表
@@ -19,6 +20,13 @@ export const operatorOptions = [
   { label: "包含", value: "include" },
   { label: "不包含", value: "notinclude" },
 ];
+/**条件字段下拉数据 */
+const conditionOption = [
+  { label: "天", value: "day" },
+  { label: "小时", value: "hour" },
+  { label: "部门", value: "dept" },
+  { label: "用户id", value: "useId" },
+];
 
 export const Branch = (props) => {
   const { modelValue: nodeConfig, onChange, ItemSlot } = props;
@@ -89,7 +97,17 @@ export const Branch = (props) => {
     var { conditionList } = nodeConfig.conditionNodes[idx];
     if (conditionList && conditionList.length == 1) {
       const text = conditionList
-        .map((conditionGroup) => conditionGroup.map((item) => `${item.label}${item.operator}${item.value}`))
+        .map((conditionGroup) =>
+          conditionGroup.map((item) => {
+            if (item?.field === "dept") {
+              return `${item.label}${item.operator}${item.value?.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.value}`;
+          }),
+        )
         .join(" 和 ");
       return text;
     } else if (conditionList && conditionList.length > 1) {
@@ -142,7 +160,7 @@ export const Branch = (props) => {
   function onConditionAdd(conditionList) {
     conditionList.push({
       label: "",
-      field: "",
+      field: "day",
       operator: "=",
       value: "",
     });
@@ -264,7 +282,7 @@ export const Branch = (props) => {
         onClose={onDrawerClose}
         destroyOnClose
         getContainer="body"
-        width={600}
+        width={800}
         title={
           <div className="node-wrap-drawer-title">
             {isEditTitle ? (
@@ -336,33 +354,40 @@ export const Branch = (props) => {
                                 setForm((f) => ({ ...f }));
                               }}
                               placeholder="描述"
+                              className="condition-content-box-item"
                             />
-                            <Input
+                            <Select
+                              options={conditionOption}
                               value={condition.field}
                               onChange={(e) => {
-                                condition.field = e.target.value;
+                                condition.field = e;
+                                condition.value = null;
                                 // 更新数据
                                 setForm((f) => ({ ...f }));
                               }}
+                              className="condition-content-box-item"
                               placeholder="条件字段"
                             />
                             <Select
                               value={condition.operator}
                               onChange={(val) => {
                                 condition.operator = val;
+                                // 更新数据
+                                setForm((f) => ({ ...f }));
                               }}
                               placeholder="请选择"
                               options={operatorOptions}
+                              className="condition-content-box-item"
                             ></Select>
-                            <Input
+                            <Field
                               value={condition.value}
+                              type={condition.field}
                               onChange={(e) => {
-                                condition.value = e.target.value;
+                                condition.value = e;
                                 // 更新数据
                                 setForm((f) => ({ ...f }));
                               }}
-                              placeholder="值"
-                            />
+                            ></Field>
                           </div>
                         </div>
                       </div>

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

@@ -143,10 +143,10 @@ export const Promoter = (props) => {
                       f.nodeAssigneeList = selected;
                       return { ...f };
                     });
-                  })
+                  }, 1)
                 }
               >
-                选择角色
+                选择人员
               </Button>
               <div className="tags-list">
                 {form.nodeAssigneeList?.map((it, idx) => {

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

@@ -1,9 +1,10 @@
 import { useRef, useState, useContext } from "react";
-import { Drawer, Button, Input, Form, Tag, Switch } from "antd";
-import { EditOutlined, SendOutlined, DeleteOutlined } from "@ant-design/icons";
+import { Drawer, Button, Input, Form, Tag, Switch, Select, Radio, InputNumber } from "antd";
+import { EditOutlined, SendOutlined, DeleteOutlined, 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";
 
@@ -86,6 +87,21 @@ export const Send = (props) => {
     setForm((f) => ({ ...f }));
   }
 
+  function onUserDel(idx) {
+    setForm((f) => {
+      f.nodeAssigneeList.splice(idx, 1);
+      return { ...f };
+    });
+  }
+
+  function onRoleDel(idx) {
+    setForm((f) => {
+      f.nodeAssigneeList.splice(idx, 1);
+      return { ...f };
+    });
+  }
+
+
   return (
     <div className="send">
       <div className="node-wrap">
@@ -148,7 +164,161 @@ export const Send = (props) => {
           }
         >
           <Form label-position="top" initialValues={form}>
-            <Form.Item label="选择要抄送的人员">
+            <Form.Item label="抄送人类型" name="setType">
+              <Select
+                options={setTypeOptions}
+                value={form.setType}
+                onSelect={(val) => {
+                  setForm((f) => {
+                    // 清空 人员、角色 列表数组
+                    f.nodeAssigneeList = [];
+                    f.setType = val;
+                    return { ...f };
+                  });
+                }}
+              />
+            </Form.Item>
+
+            {form.setType === 1 ? (
+              <Form.Item label="选择成员" name="nodeAssigneeList">
+                <Button
+                  type="primary"
+                  icon={<PlusOutlined />}
+                  onClick={() =>
+                    selectorCtx.setSelectHandler(
+                      1,
+                      form.nodeAssigneeList,
+                      (selected) => {
+                      setForm((f) => {
+                        // 设置 人员、角色 列表数组
+                        f.nodeAssigneeList = selected;
+                        return { ...f };
+                      });
+                    },
+                    2
+                  )
+                  }
+                >
+                  选择人员
+                </Button>
+                <div className="tags-list">
+                  {form.nodeAssigneeList?.map((user, idx) => {
+                    return (
+                      <Tag
+                        key={user.id || idx}
+                        className="node-assignee-item"
+                        closable
+                        onClose={() => {
+                          onUserDel(idx);
+                        }}
+                      >
+                        {user.name}
+                      </Tag>
+                    );
+                  })}
+                </div>
+              </Form.Item>
+            ) : null}
+
+            {form.setType === 2 ? (
+              <Form.Item label="指定主管" name="aaa">
+                发起人的第
+                <InputNumber
+                  min={1}
+                  value={form.examineLevel}
+                  onChange={(val) => {
+                    setForm((f) => {
+                      form.examineLevel = val;
+                      return { ...f };
+                    });
+                  }}
+                />
+                级主管
+              </Form.Item>
+            ) : null}
+
+            {form.setType === 3 ? (
+              <Form.Item label="选择角色" name="nodeAssigneeList">
+                <Button
+                  type="primary"
+                  icon={<PlusOutlined />}
+                  onClick={() =>
+                    selectorCtx.setSelectHandler(2, form.nodeAssigneeList, (selected) => {
+                      setForm((f) => {
+                        // 设置 人员、角色 列表数组
+                        f.nodeAssigneeList = selected;
+                        return { ...f };
+                      });
+                    },2)
+                  }
+                >
+                  选择角色
+                </Button>
+                <div className="tags-list">
+                  {form.nodeAssigneeList?.map((it, idx) => {
+                    return (
+                      <Tag
+                        key={it.id || idx}
+                        className="node-assignee-item"
+                        closable
+                        onClose={() => {
+                          onRoleDel(idx);
+                        }}
+                      >
+                        {it.name}
+                      </Tag>
+                    );
+                  })}
+                </div>
+              </Form.Item>
+            ) : null}
+
+            {form.setType === 4 ? (
+              <Form.Item label="指定主管" name="selectMode">
+                <Radio.Group
+                  options={selectModeOptions}
+                  value={form.selectMode}
+                  onChange={(e) => {
+                    setForm((f) => {
+                      form.selectMode = e.target.value;
+                      return { ...f };
+                    });
+                  }}
+                />
+              </Form.Item>
+            ) : null}
+
+            {form.setType === 7 ? (
+              <Form.Item label="指定主管" name="directorMode">
+                <Radio.Group
+                  options={directorModeOptions}
+                  value={form.directorMode}
+                  onChange={(e) => {
+                    setForm((f) => {
+                      form.directorMode = e.target.value;
+                      return { ...f };
+                    });
+                  }}
+                />
+              </Form.Item>
+            ) : null}
+
+            {form.directorMode === 1 ? (
+              <Form.Item label="直到发起人的第" name="directorLevel">
+                <InputNumber
+                  min={1}
+                  value={form.directorLevel}
+                  onChange={(val) => {
+                    setForm((f) => {
+                      form.directorLevel = val;
+                      return { ...f };
+                    });
+                  }}
+                />{" "}
+                级主管
+              </Form.Item>
+            ) : null}
+            {/* <Form.Item label="选择要抄送的人员">
               <Button
                 type="primary"
                 onClick={() => {
@@ -190,7 +360,7 @@ export const Send = (props) => {
                   });
                 }}
               ></Switch>
-            </Form.Item>
+            </Form.Item> */}
           </Form>
         </Drawer>
       </div>

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

@@ -0,0 +1,44 @@
+/**
+ * 审批人员类型
+ */
+export const setTypeOptions = [
+  { label: "指定成员", value: 1 },
+  { label: "主管", value: 2 },
+  { label: "角色", value: 3 },
+  { label: "发起人自选", value: 4 },
+  { label: "发起人自己", value: 5 },
+  { label: "连续多级主管", value: 7 },
+];
+
+/**
+ * 发起人自选
+ */
+export const selectModeOptions = [
+  { label: "自选一个人", value: 1 },
+  { label: "自选多个人", value: 2 },
+];
+
+/**
+ * 连续主管审批终点
+ */
+export const directorModeOptions = [
+  { label: "直到最上层主管", value: 0 },
+  { label: "自定义审批终点", value: 1 },
+];
+
+/**
+ * 审批期限超时后执行
+ */
+export const termModeOptions = [
+  { label: "自动通过", value: 0 },
+  { label: "自动拒绝", value: 1 },
+];
+
+/**
+ * 多人审批时审批方式
+ */
+export const examineModeOptions = [
+  { label: "按顺序依次审批", value: 1 },
+  { label: "会签 (可同时审批，每个人必须审批通过)", value: 2 },
+  { label: "或签 (有一人审批通过即可)", value: 3 },
+];

package/src/components/Selector/SelectContext.tsx

@@ -5,13 +5,16 @@ export interface ISelectHandlerI {
   open: boolean;
   /** 选择类型 */
   type: number;
+  /** 抽屉选择类型 */
+  drawerType: number;
+
   /** 已选中的数据 */
   value: [];
   /** 选中保存回调 */
   onSave: (selected) => void;
-  listModel,
-  treeModel,
-  roleListModel,
+  roleListConfig,
+  listConfig,
+  initiatorListConfig,
 }
 
 /**
@@ -21,12 +24,13 @@ export const SelectContext = createContext({
   selectHandler: {
     open: false,
     type: undefined,
+    drawerType: undefined,
     value: [],
-    onSave: (s) => {},
-    listModel:undefined,
-    treeModel:undefined,
-    roleListModel:undefined
+    onSave: (s) => { },
+    roleListConfig: {},
+    listConfig: {},
+    initiatorListConfig: {},
   },
-  setSelectHandler(type, value, onSave) {},
-  onClose() {},
+  setSelectHandler(type, value, onSave, drawerType) { },
+  onClose() { },
 });

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 { SelectContext } from "./SelectContext";
 
 import "./index.less";
@@ -11,154 +11,157 @@ const titleMap = ["人员选择", "角色选择"];
 
 export const Selector = (props) => {
   const selectorCtx = useContext(SelectContext);
-  const { open, type, value, onSave, treeModel, listModel, roleListModel } = 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 [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 { 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 [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() {
-    onSave && onSave(selectedRef.current || []);
+    console.log(selectorRef.current?.selectedList);
+
+    onSave && onSave(selectorRef.current?.selectedList || []);
     onModalClose();
   }
 
   function onModalClose() {
-    setSelected([]);
-    selectedRef.current = [];
+    // 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);
-  }
+  // 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 (
@@ -167,7 +170,7 @@ export const Selector = (props) => {
         wrapClassName="selector-modal"
         open={open}
         title={titleMap[type - 1]}
-        width={type == 1 ? 680 : 560}
+        width={800}
         destroyOnClose
         getContainer="body"
         onCancel={onModalClose}
@@ -180,7 +183,8 @@ export const Selector = (props) => {
           </div>
         }
       >
-        <div className="sc-user-select">
+        <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="搜索成员" />
@@ -231,7 +235,7 @@ export const Selector = (props) => {
               })}
             </ul>
           </div>
-        </div>
+        </div> */}
       </Modal>
     </div>
   );

package/src/index.tsx

@@ -44,25 +44,32 @@ function copy(str) {
 }
 
 function FlowlongDesigner(props) {
-  const { value, flowName, listModel, treeModel ,roleListModel} = props;
+  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 }));
   const [selectHandler, setSelectHandler] = useState<ISelectHandlerI>({
     open: false,
     type: -1,
+    drawerType: -1,
     value: [],
-    onSave: (s) => {},
-    listModel,
-    treeModel,
-    roleListModel
+    onSave: (s) => { },
+    roleListConfig: {},
+    listConfig: {},
+    initiatorListConfig: {},
   });
 
   useEffect(() => {
     value && setData(value);
   }, [value]);
 
-  function saveAsPng() {}
+  function saveAsPng() { }
   function copyParseJson() {
     copy(JSON.stringify(data, null, 2));
   }
@@ -79,11 +86,29 @@ function FlowlongDesigner(props) {
       <SelectContext.Provider
         value={{
           selectHandler,
-          setSelectHandler(type, value, onSave) {
-            setSelectHandler({ open: true, type, value, onSave , listModel, treeModel, roleListModel});
+          setSelectHandler(type, value, onSave, drawerType) {
+            setSelectHandler({
+              open: true,
+              type,
+              drawerType,
+              value,
+              onSave,
+              roleListConfig,
+              listConfig,
+              initiatorListConfig
+            });
           },
           onClose() {
-            setSelectHandler({ open: false, type: -1, value: [], onSave: (s) => {} , listModel, treeModel,  roleListModel});
+            setSelectHandler({
+              open: false,
+              type: -1,
+              drawerType: -1,
+              value: [],
+              onSave: (s) => { },
+              roleListConfig,
+              listConfig,
+              initiatorListConfig
+            });
           },
         }}
       >