@hzab/flowlong-designer 0.1.5 → 0.1.7

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+# @hzab/flowlong-designer@0.1.7
+
+fix:请假天数文案改为时长
+fix:条件节点-其他条件进入此流程不可编辑
+
+# @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.7",
   "description": "自定义审批流配置组件",
   "main": "src",
   "scripts": {

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

@@ -80,7 +80,8 @@
     background-color: rgb(202, 202, 202);
   }
 
-  .auto-judge {
+  .auto-judge,
+  .auto-judge-disable {
     position: relative;
     width: 220px;
     min-height: 72px;
@@ -91,7 +92,8 @@
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
   }
 
-  .auto-judge::before {
+  .auto-judge::before,
+  .auto-judge-disable::before {
     content: "";
     position: absolute;
     top: -12px;
@@ -101,18 +103,21 @@
     border-style: solid;
     border-width: 8px 6px 4px;
     border-color: rgb(202, 202, 202) transparent transparent;
-    background: rgb(239, 239, 239);
+    background: #fff;
   }
 
-  .auto-judge .title {
+  .auto-judge .title,
+  .auto-judge-disable .title {
     line-height: 16px;
   }
 
-  .auto-judge .title .node-title {
+  .auto-judge .title .node-title,
+  .auto-judge-disable .title .node-title {
     color: #15bc83;
   }
 
-  .auto-judge .title .delete-btn {
+  .auto-judge .title .delete-btn,
+  .auto-judge-disable .title .delete-btn {
     font-size: 15px;
     position: absolute;
     top: 15px;
@@ -121,19 +126,22 @@
     display: none;
   }
 
-  .auto-judge .title .priority-title {
+  .auto-judge .title .priority-title,
+  .auto-judge-disable .title .priority-title {
     position: absolute;
     top: 15px;
     right: 15px;
     color: #999;
   }
 
-  .auto-judge .content {
+  .auto-judge .content,
+  .auto-judge-disable .content {
     position: relative;
     padding-top: 15px;
   }
 
-  .auto-judge .content .placeholder {
+  .auto-judge .content .placeholder,
+  .auto-judge-disable .content .placeholder {
     color: #999;
   }
 
@@ -157,7 +165,8 @@
     }
   }
 
-  .auto-judge .sort-left {
+  .auto-judge .sort-left,
+  .auto-judge-disable .sort-left {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -169,7 +178,8 @@
     flex-direction: column;
   }
 
-  .auto-judge .sort-right {
+  .auto-judge .sort-right,
+  .auto-judge-disable .sort-right {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -186,7 +196,8 @@
     background: #eee;
   }
 
-  .auto-judge:after {
+  .auto-judge:after,
+  .auto-judge-disable:after {
     pointer-events: none;
     content: "";
     position: absolute;
@@ -204,6 +215,10 @@
     box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
   }
 
+  .auto-judge-disable {
+    cursor: not-allowed;
+  }
+
   .top-left-cover-line,
   .top-right-cover-line {
     position: absolute;

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"];
@@ -52,19 +63,33 @@ export const Branch = (props) => {
   const curIdxRef = useRef(-1);
 
   const nodeTitleRef = useRef();
-
+  /** 数组位置互换*/
+  function swapLastTwo(arr) {
+    if (arr.length >= 2) {
+      const temp = arr[arr.length - 1];
+      arr[arr.length - 1] = arr[arr.length - 2];
+      arr[arr.length - 2] = temp;
+    }
+    return arr;
+  }
   function onTermAdd() {
     if (!nodeConfig.conditionNodes) {
       nodeConfig.conditionNodes = [];
     }
     let len = nodeConfig.conditionNodes?.length + 1;
     nodeConfig.conditionNodes?.push({
-      nodeName: "条件" + len,
+      // nodeName: "条件" + len,
       type: 3,
       priorityLevel: len,
       conditionMode: 1,
       conditionList: [],
     });
+    nodeConfig.conditionNodes = swapLastTwo(nodeConfig.conditionNodes);
+
+    nodeConfig.conditionNodes.forEach((el, index) => {
+      el.priorityLevel = index;
+      el.nodeName = el.nodeName ? el.nodeName : "条件" + index;
+    });
     onChange && onChange({ ...nodeConfig });
   }
   function onShow(idx) {
@@ -110,16 +135,19 @@ export const Branch = (props) => {
       onChange({ ...nodeConfig });
     }
   }
+  console.log(nodeConfig, "nodeConfignodeConfig");
+
   function toText(nodeConfig, idx) {
     var { conditionList } = nodeConfig.conditionNodes[idx];
     if (conditionList && conditionList.length == 1) {
       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 +219,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">
@@ -199,22 +282,28 @@ export const Branch = (props) => {
             添加条件
           </Button>
           {nodeConfig?.conditionNodes?.map((item, idx) => {
+            const conditionDisable = idx == nodeConfig.conditionNodes?.length - 1;
+
             return (
               <div className="col-box" key={idx}>
                 <div className="condition-node">
                   <div className="condition-node-box">
                     <div
-                      className="auto-judge"
+                      className={conditionDisable ? "auto-judge-disable" : "auto-judge"}
                       onClick={() => {
-                        onShow(idx);
+                        if (!conditionDisable) {
+                          onShow(idx);
+                        }
                       }}
                     >
-                      {idx != 0 ? (
+                      {idx != 0 && !conditionDisable ? (
                         <div
                           className="sort-left"
                           onClick={(e) => {
-                            e.stopPropagation();
-                            arrTransfer(idx, -1);
+                            if (!conditionDisable) {
+                              e.stopPropagation();
+                              arrTransfer(idx, -1);
+                            }
                           }}
                         >
                           <LeftOutlined />
@@ -223,14 +312,15 @@ export const Branch = (props) => {
                       <div className="title">
                         <span className="node-title">{item.nodeName}</span>
                         <span className="priority-title">优先级{item.priorityLevel}</span>
-
-                        <DeleteOutlined
-                          className="delete-btn"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            onTermDel(idx);
-                          }}
-                        />
+                        {!conditionDisable && (
+                          <DeleteOutlined
+                            className="delete-btn"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onTermDel(idx);
+                            }}
+                          />
+                        )}
                       </div>
                       <div className="content">
                         {toText(nodeConfig, idx) ? (
@@ -239,7 +329,7 @@ export const Branch = (props) => {
                           <span className="placeholder">请设置条件</span>
                         )}
                       </div>
-                      {idx != nodeConfig.conditionNodes?.length - 1 ? (
+                      {idx != nodeConfig.conditionNodes?.length - 1 && idx < nodeConfig.conditionNodes?.length - 2 ? (
                         <div
                           className="sort-right"
                           onClick={(e) => {
@@ -350,17 +440,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 +451,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}