@hzab/flowlong-designer 0.1.6 → 0.1.8

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+# @hzab/flowlong-designer@0.1.8
+
+fix:重置将子节点置为 null
+fix:发起人节点正常删除
+
+# @hzab/flowlong-designer@0.1.7
+
+fix:请假天数文案改为时长
+fix:条件节点-其他条件进入此流程不可编辑
+
 # @hzab/flowlong-designer@0.1.6
 
 fix:条件节点-描述字段改下拉框

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/flowlong-designer",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "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

@@ -30,8 +30,8 @@ export const operatorOptions = [
 /**描述下拉字段 */
 const descOption = [
   {
-    label: "请假天数",
-    value: "请假天数",
+    label: "时长",
+    value: "时长",
   },
   {
     label: "发起人",
@@ -63,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 + 1);
+    });
     onChange && onChange({ ...nodeConfig });
   }
   function onShow(idx) {
@@ -121,6 +135,7 @@ export const Branch = (props) => {
       onChange({ ...nodeConfig });
     }
   }
+
   function toText(nodeConfig, idx) {
     var { conditionList } = nodeConfig.conditionNodes[idx];
     if (conditionList && conditionList.length == 1) {
@@ -266,22 +281,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 />
@@ -290,14 +311,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) ? (
@@ -306,7 +328,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) => {
@@ -434,7 +456,7 @@ export const Branch = (props) => {
                               className="condition-content-box-item"
                               onChange={(e) => {
                                 condition.label = e;
-                                if (e === "请假天数") {
+                                if (e === "时长") {
                                   condition.field = "day";
                                 }
                                 if (e === "发起人") {

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

@@ -137,13 +137,18 @@ export const Promoter = (props) => {
               <Button
                 type="primary"
                 onClick={() =>
-                  selectorCtx.setSelectHandler(2, form.nodeAssigneeList, (selected) => {
-                    setForm((f) => {
-                      // 设置 人员、角色 列表数组
-                      f.nodeAssigneeList = selected;
-                      return { ...f };
-                    });
-                  }, 1)
+                  selectorCtx.setSelectHandler(
+                    2,
+                    form.nodeAssigneeList,
+                    (selected) => {
+                      setForm((f) => {
+                        // 设置 人员、角色 列表数组
+                        f.nodeAssigneeList = selected;
+                        return { ...f };
+                      });
+                    },
+                    1,
+                  )
                 }
               >
                 选择人员
@@ -155,7 +160,8 @@ export const Promoter = (props) => {
                       key={idx}
                       className="node-assignee-item"
                       closable
-                      onClose={() => {
+                      onClose={(e) => {
+                        e.preventDefault();
                         onRoleDel(idx);
                       }}
                     >

package/src/index.tsx

@@ -82,7 +82,7 @@ function FlowlongDesigner(props, ref) {
   /** 重置 */
   const onReset = () => {
     const newData = { ...data };
-    newData.nodeConfig.childNode = {};
+    newData.nodeConfig.childNode = null;
     setData(newData);
   };