@hzab/flowlong-designer 0.0.1 → 0.0.3

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.3",
   "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

@@ -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 };
-                      });
-                    })
+                    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 };
-                      });
-                    })
+                    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/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.less

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