@hzab/flowlong-designer 0.1.5 → 0.1.6

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+# @hzab/flowlong-designer@0.1.6
+
+fix:条件节点-描述字段改下拉框
+fix:条件节点-运算符字段根据条件字段动态变更
+
 # @hzab/flowlong-designer@0.1.5
 
 fix:条件节点-部门或用户回显

package/package.json

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

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Drawer, Button, Input, Select } from "antd";
 import { LeftOutlined, DeleteOutlined, RightOutlined, EditOutlined } from "@ant-design/icons";
 
@@ -21,11 +21,22 @@ export const operatorOptions = [
   { label: "不包含", value: "notinclude" },
 ];
 /**条件字段下拉数据 */
-const conditionOption = [
-  { label: "天", value: "day" },
-  { label: "小时", value: "hour" },
-  { label: "部门", value: "dept" },
-  { label: "用户id", value: "useId" },
+// const conditionOption = [
+//   { label: "天", value: "day" },
+//   { label: "小时", value: "hour" },
+//   { label: "部门", value: "dept" },
+//   { label: "用户id", value: "useId" },
+// ];
+/**描述下拉字段 */
+const descOption = [
+  {
+    label: "请假天数",
+    value: "请假天数",
+  },
+  {
+    label: "发起人",
+    value: "发起人",
+  },
 ];
 /** 时间类型 */
 const timeType = ["day", "hour"];
@@ -116,10 +127,11 @@ export const Branch = (props) => {
       const text = conditionList
         .map((conditionGroup) =>
           conditionGroup.map((item) => {
+            const el = operatorOptions?.find((el) => el?.value === item?.operator);
             if (["dept", "useId"].includes(item?.field)) {
-              return `${item.label}${item.operator}${item?.deptUserLabel}`;
+              return `${item.label}${el?.label}${item?.deptUserLabel}`;
             }
-            return `${item.label}${item.operator}${item.value}`;
+            return `${item.label}${el?.label}${item.value}`;
           }),
         )
         .join(" 和 ");
@@ -191,6 +203,61 @@ export const Branch = (props) => {
     setForm((f) => ({ ...f }));
   }
 
+  //条件节点数据联动
+  const conditionDataLinkage = (condition) => {
+    /**值 */
+    let fieldValue = null;
+    /**条件字段下拉数据 */
+    let conditionOption = [
+      { label: "天", value: "day" },
+      { label: "小时", value: "hour" },
+    ];
+    /**
+     * 操作符选项列表
+     */
+    let operatorOptions = [
+      { label: "等于", value: "==" },
+      { label: "不等于", value: "!=" },
+      { label: "大于", value: ">" },
+      { label: "大于等于", value: ">=" },
+      { label: "小于", value: "<" },
+      { label: "小于等于", value: "<=" },
+      { label: "包含", value: "include" },
+      { label: "不包含", value: "notinclude" },
+    ];
+
+    if (timeType.includes(condition?.field)) {
+      fieldValue = condition?.value;
+    }
+    if (deptUserType.includes(condition?.field)) {
+      fieldValue = {
+        value: condition?.value,
+        deptUserLabel: condition?.deptUserLabel,
+      };
+    }
+    if (condition?.field === "dept") {
+      operatorOptions = [{ label: "包含", value: "include" }];
+    }
+    if (condition?.field === "useId") {
+      operatorOptions = [
+        { label: "等于", value: "==" },
+        { label: "包含", value: "include" },
+        { label: "不包含", value: "notinclude" },
+      ];
+    }
+    if (condition?.label === "发起人") {
+      conditionOption = [
+        { label: "部门", value: "dept" },
+        { label: "用户id", value: "useId" },
+      ];
+    }
+    return {
+      fieldValue,
+      conditionOption,
+      operatorOptions,
+    };
+  };
+
   return (
     <div className="branch-wrap">
       <div className="branch-box-wrap">
@@ -350,17 +417,7 @@ 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,
-                      };
-                    }
+                    const { fieldValue, conditionOption, operatorOptions } = conditionDataLinkage(condition);
                     return (
                       <div className="condition-content" key={idx}>
                         <div className="condition-relation">
@@ -371,16 +428,24 @@ export const Branch = (props) => {
                         </div>
                         <div className="condition-content">
                           <div className="condition-content-box">
-                            <Input
+                            <Select
                               value={condition.label}
+                              options={descOption}
+                              className="condition-content-box-item"
                               onChange={(e) => {
-                                condition.label = e.target.value;
+                                condition.label = e;
+                                if (e === "请假天数") {
+                                  condition.field = "day";
+                                }
+                                if (e === "发起人") {
+                                  condition.field = "dept";
+                                }
+                                condition.value = null;
+                                condition.operator = null;
                                 // 更新数据
                                 setForm((f) => ({ ...f }));
                               }}
-                              placeholder="描述"
-                              className="condition-content-box-item"
-                            />
+                            ></Select>
                             <Select
                               options={conditionOption}
                               value={condition.field}