@hzab/flowlong-designer 0.1.2 → 0.1.3

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# @hzab/flowlong-designer@0.1.3
+
+fix:条件节点正常删除
+feat:流程图增加重置功能
+
+# @hzab/flowlong-designer@0.1.2
+
+领导审批显示多人审批时审批方式
+
 # @hzab/flowlong-designer@0.0.4
 
 条件选择数据兼容

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/flowlong-designer",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "自定义审批流配置组件",
   "main": "src",
   "scripts": {
@@ -24,7 +24,6 @@
     "@hzab/data-model": "^1.7.0",
     "@hzab/deep-list": "^0.0.2",
     "@hzab/group-user-selector": "^0.0.4",
-    "nanoid": "^3.3.7",
     "@hzab/permissions": "0.1.1",
     "@hzab/webpack-config": "^0.7.1",
     "@types/react": "^17.0.62",
@@ -35,6 +34,7 @@
     "less": "^4.1.3",
     "mobx": "^6.7.0",
     "mobx-react": "^7.6.0",
+    "nanoid": "^3.3.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.14.1",

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

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Drawer, Button, Input, Select } from "antd";
 import { LeftOutlined, DeleteOutlined, RightOutlined, EditOutlined } from "@ant-design/icons";
 
@@ -80,17 +80,26 @@ export const Branch = (props) => {
     });
     onChange && onChange({ ...nodeConfig });
   }
+
+  function reData(data, addData) {
+    if (!data.childNode) {
+      data.childNode = addData;
+    } else {
+      reData(data.childNode, addData);
+    }
+  }
+
   function onTermDel(idx) {
     nodeConfig.conditionNodes?.splice(idx, 1);
     if (nodeConfig.conditionNodes?.length == 1) {
       if (nodeConfig.childNode) {
         if (nodeConfig.conditionNodes[0].childNode) {
-          this.reData(nodeConfig.conditionNodes[0].childNode, nodeConfig.childNode);
+          reData(nodeConfig.conditionNodes[0].childNode, nodeConfig.childNode);
         } else {
           nodeConfig.conditionNodes[0].childNode = nodeConfig.childNode;
         }
       }
-      onChange && onChange({ ...nodeConfig });
+      onChange && onChange(nodeConfig.conditionNodes[0].childNode);
     }
   }
   function toText(nodeConfig, idx) {

package/src/index.less

@@ -1,15 +1,17 @@
 .flowlong-designer {
-  --el-bg-color: #ffffff; /* 默认白色背景 */
+  --el-bg-color: #ffffff;
+  /* 默认白色背景 */
   width: 100%;
+
   .designer-affix {
     position: fixed;
-    top: 20px;
-    left: 20px;
+    right: 20px;
+    bottom: 20px;
     z-index: 9;
     padding: 12px;
     border: 1px solid #999;
 
-    .action-btn + .action-btn {
+    .action-btn+.action-btn {
       margin-left: 12px;
     }
   }
@@ -20,6 +22,7 @@
     white-space: pre-wrap;
   }
 }
+
 .flowlong-designer .box-scale {
   display: inline-block;
   position: relative;
@@ -41,6 +44,7 @@
     position: relative;
     z-index: 1;
   }
+
   .node-wrap-box {
     display: inline-flex;
     flex-direction: column;
@@ -53,6 +57,7 @@
     cursor: pointer;
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
   }
+
   .node-wrap-box::before {
     content: "";
     position: absolute;
@@ -64,9 +69,11 @@
     border-width: 8px 6px 4px;
     border-color: rgb(202, 202, 202) transparent transparent;
   }
+
   .node-wrap-box.start-node:before {
     content: none;
   }
+
   .node-wrap-box .title {
     height: 24px;
     line-height: 24px;
@@ -78,9 +85,11 @@
     display: flex;
     align-items: center;
   }
+
   .node-wrap-box .title .icon {
     margin-right: 5px;
   }
+
   .node-wrap-box .title .close {
     font-size: 15px;
     position: absolute;
@@ -89,16 +98,20 @@
     right: 10px;
     display: none;
   }
+
   .node-wrap-box .content {
     position: relative;
     padding: 15px;
   }
+
   .node-wrap-box .content .placeholder {
     color: #999;
   }
+
   .node-wrap-box:hover .close {
     display: block;
   }
+
   .add-node-btn-box {
     width: 240px;
     display: inline-flex;
@@ -106,6 +119,7 @@
     position: relative;
     z-index: 1;
   }
+
   .add-node-btn-box:before {
     content: "";
     position: absolute;
@@ -119,6 +133,7 @@
     height: 100%;
     background-color: rgb(202, 202, 202);
   }
+
   .add-node-btn {
     user-select: none;
     // width: 240px;
@@ -129,8 +144,9 @@
     flex-shrink: 0;
     // flex-grow: 1;
   }
-  .add-node-btn span {
-  }
+
+  .add-node-btn span {}
+
   .add-branch {
     justify-content: center;
     padding: 0px 10px;
@@ -143,11 +159,13 @@
     display: inline-flex;
     align-items: center;
   }
+
   // branch-start
   .branch-wrap {
     display: inline-flex;
     width: 100%;
   }
+
   .branch-box-wrap {
     display: flex;
     flex-flow: column wrap;
@@ -156,12 +174,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;
@@ -172,6 +192,7 @@
     position: relative;
     margin-top: 15px;
   }
+
   .branch-box .col-box::before {
     content: "";
     position: absolute;
@@ -185,11 +206,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;
@@ -201,6 +224,7 @@
     display: inline-flex;
     flex-direction: column;
   }
+
   .condition-node-box::before {
     content: "";
     position: absolute;
@@ -213,6 +237,7 @@
     height: 100%;
     background-color: rgb(202, 202, 202);
   }
+
   .auto-judge {
     position: relative;
     width: 220px;
@@ -223,6 +248,7 @@
     cursor: pointer;
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
   }
+
   .auto-judge::before {
     content: "";
     position: absolute;
@@ -236,12 +262,15 @@
     // background: rgb(239, 239, 239);
     background: #fff;
   }
+
   .auto-judge .title {
     line-height: 16px;
   }
+
   .auto-judge .title .node-title {
     color: #15bc83;
   }
+
   .auto-judge .title .close {
     font-size: 15px;
     position: absolute;
@@ -250,27 +279,33 @@
     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 {
     .close {
       display: block;
     }
+
     .priority-title {
       display: none;
     }
   }
+
   .top-left-cover-line,
   .top-right-cover-line {
     position: absolute;
@@ -279,6 +314,7 @@
     background-color: #fff;
     top: -2px;
   }
+
   .bottom-left-cover-line,
   .bottom-right-cover-line {
     position: absolute;
@@ -287,26 +323,33 @@
     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;
   }
+
   .auto-judge:hover {
     .sort-left {
       display: flex;
     }
+
     .sort-right {
       display: flex;
     }
   }
+
   .auto-judge .sort-left {
     position: absolute;
     top: 0;
@@ -318,6 +361,7 @@
     align-items: center;
     flex-direction: column;
   }
+
   .auto-judge .sort-right {
     position: absolute;
     top: 0;
@@ -329,10 +373,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: "";
@@ -345,10 +391,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);
   }
+
   // branch-end
   .end-node {
     border-radius: 50%;
@@ -356,6 +404,7 @@
     color: rgba(25, 31, 37, 0.4);
     text-align: left;
   }
+
   .end-node-circle {
     width: 10px;
     height: 10px;
@@ -363,10 +412,12 @@
     border-radius: 50%;
     background: #ccc;
   }
+
   .end-node-text {
     margin-top: 5px;
     text-align: center;
   }
+
   .node-wrap-box:after {
     pointer-events: none;
     content: "";
@@ -379,6 +430,7 @@
     border-radius: 4px;
     transition: all 0.1s;
   }
+
   .node-wrap-box:hover:after {
     border: 1px solid #3296fa;
     box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
@@ -389,12 +441,14 @@
   margin-top: 15px;
   width: 100%;
 }
+
 .add-node-popover-body li {
   display: inline-block;
   width: 80px;
   text-align: center;
   padding: 10px 0;
 }
+
 .add-node-popover-body li i {
   border: 1px solid var(--el-border-color-light);
   width: 40px;
@@ -405,24 +459,30 @@
   font-size: 18px;
   cursor: pointer;
 }
+
 .add-node-popover-body li i:hover {
   border: 1px solid #3296fa;
   background: #3296fa;
   color: #fff !important;
 }
+
 .add-node-popover-body li p {
   font-size: 12px;
   margin-top: 5px;
 }
+
 .node-wrap-drawer__title {
   padding-right: 40px;
 }
+
 .node-wrap-drawer__title label {
   cursor: pointer;
 }
+
 .node-wrap-drawer__title label:hover {
   border-bottom: 1px dashed #409eff;
 }
+
 .node-wrap-drawer__title .node-wrap-drawer__title-edit {
   color: #409eff;
   margin-left: 10px;
@@ -430,29 +490,36 @@
 }
 
 .dark .flowlong-designer {
+
   .node-wrap-box,
   .auto-judge {
     background: #2b2b2b;
   }
+
   .col-box {
     background: var(--el-bg-color);
   }
+
   .top-left-cover-line,
   .top-right-cover-line,
   .bottom-left-cover-line,
   .bottom-right-cover-line {
     background-color: var(--el-bg-color);
   }
+
   .node-wrap-box::before,
   .auto-judge::before {
     background-color: var(--el-bg-color);
   }
+
   .branch-box .add-branch {
     background: var(--el-bg-color);
   }
+
   .end-node .end-node-text {
     color: #ccc;
   }
+
   .auto-judge .sort-left:hover,
   .auto-judge .sort-right:hover {
     background: var(--el-bg-color);
@@ -460,7 +527,7 @@
 }
 
 .ant-drawer-footer {
-  .ant-btn + .ant-btn {
+  .ant-btn+.ant-btn {
     margin-left: 12px;
   }
-}
+}

package/src/index.tsx

@@ -79,6 +79,12 @@ function FlowlongDesigner(props, ref) {
   function onDrawerClose() {
     setDrawer(false);
   }
+  /** 重置 */
+  const onReset = () => {
+    const newData = { ...data };
+    newData.nodeConfig.childNode = {};
+    setData(newData);
+  };
 
   return (
     <div className="flowlong-designer">
@@ -124,6 +130,9 @@ function FlowlongDesigner(props, ref) {
           <Button className="action-btn zoom-out-btn" onClick={() => setZoom((z) => z + 0.1)}>
             放大
           </Button>
+          <Button className="action-btn zoom-out-btn" onClick={onReset}>
+            重置
+          </Button>
         </div>
         <div className="affix-container" style={{ transformOrigin: "0 0", transform: `scale(${zoom})` }}>
           <ScWorkflow