@hzab/flowlong-designer 0.1.8 → 0.2.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+# @hzab/flowlong-designer@0.2.0
+
+fix:图片引用改为相对路径
+
+# @hzab/flowlong-designer@0.1.9
+
+fix:查看 JSON 按钮隐藏、用户搜索调接口
+style:控制面板样式优化
+feat:支持详情
+
 # @hzab/flowlong-designer@0.1.8
 
 fix:重置将子节点置为 null

package/package.json

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

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

@@ -78,7 +78,7 @@ export function getNodeKey() {
 }
 
 export const AddNode = (props) => {
-  const { modelValue, onChange } = props;
+  const { modelValue, onChange, disable } = props;
 
   function addType(type) {
     const data = _.cloneDeep(typeDataEnum[type]);
@@ -91,6 +91,7 @@ export const AddNode = (props) => {
     <div className="add-node-box">
       <div className="add-node-btn-box">
         <Popover
+          open={disable ? false : undefined}
           className="popover"
           trigger="click"
           placement="bottom"
@@ -109,7 +110,13 @@ export const AddNode = (props) => {
             </div>
           }
         >
-          <Button className="add-node-btn" type="primary" shape="circle" icon={<PlusOutlined />}></Button>
+          <Button
+            disabled={disable}
+            className="add-node-btn"
+            type="primary"
+            shape="circle"
+            icon={<PlusOutlined />}
+          ></Button>
         </Popover>
       </div>
     </div>

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

@@ -10,7 +10,7 @@ import { SelectContext } from "../../../Selector/SelectContext";
 import "./index.less";
 
 export const Approver = (props) => {
-  const { modelValue = {}, onChange } = props;
+  const { modelValue = {}, onChange, disable } = props;
   const [form, setForm] = useState({
     nodeName: "",
     setType: undefined,
@@ -33,11 +33,17 @@ export const Approver = (props) => {
   const nodeTitleRef = useRef();
 
   function onShow() {
+    if (disable) {
+      return;
+    }
     setDrawer(true);
     setForm(JSON.parse(JSON.stringify(modelValue)));
   }
 
   function onNodeDel(e) {
+    if (disable) {
+      return;
+    }
     e.stopPropagation();
     onChange && onChange(modelValue.childNode);
   }
@@ -113,11 +119,15 @@ export const Approver = (props) => {
   return (
     <div className="approver-wrap">
       <div className="node-wrap">
-        <div className="node-wrap-box" onClick={onShow}>
+        <div className={`${disable ? "node-wrap-box-disable" : "node-wrap-box"}`} onClick={onShow}>
           <div className="title" style={{ background: "#ff943e" }}>
             <UserOutlined />
             <span>{modelValue?.nodeName}</span>
-            <DeleteOutlined className="node-close-btn" onClick={onNodeDel} />
+            <DeleteOutlined
+              className="node-close-btn"
+              onClick={onNodeDel}
+              style={disable ? { cursor: "not-allowed" } : {}}
+            />
           </div>
           <div className="content">
             {toText(modelValue) ? <span>{toText(modelValue)}</span> : <span className="placeholder">请选择</span>}
@@ -125,6 +135,7 @@ export const Approver = (props) => {
         </div>
 
         <AddNode
+          {...props}
           modelValue={modelValue?.childNode}
           onChange={(val) => {
             modelValue.childNode = val;

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

@@ -90,7 +90,6 @@ const GroupUserSelectorModal = (props) => {
       value: valueArr?.length && valueArr[index],
     }));
   }, [value, type]);
-
   return (
     <div>
       <Input
@@ -120,6 +119,7 @@ const GroupUserSelectorModal = (props) => {
             value={groupUserSelectorValue || []}
             ref={groupUserSelectorRef}
             model={model}
+            searchModel={model}
             {...(type === "useId" ? userListConfig : {})}
           ></GroupUserSelector>
         </div>

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

@@ -43,7 +43,7 @@ const timeType = ["day", "hour"];
 /** 部门或用户 */
 const deptUserType = ["dept", "useId"];
 export const Branch = (props) => {
-  const { modelValue: nodeConfig, onChange, ItemSlot } = props;
+  const { modelValue: nodeConfig, onChange, ItemSlot, disable } = props;
   const [form, setForm] = useState({
     nodeName: "",
     setType: undefined,
@@ -272,16 +272,15 @@ export const Branch = (props) => {
       operatorOptions,
     };
   };
-
   return (
     <div className="branch-wrap">
       <div className="branch-box-wrap">
         <div className="branch-box">
-          <Button className="add-branch" onClick={onTermAdd}>
+          <Button className="add-branch" onClick={onTermAdd} disabled={disable}>
             添加条件
           </Button>
           {nodeConfig?.conditionNodes?.map((item, idx) => {
-            const conditionDisable = idx == nodeConfig.conditionNodes?.length - 1;
+            const conditionDisable = idx == nodeConfig.conditionNodes?.length - 1 || disable;
 
             return (
               <div className="col-box" key={idx}>
@@ -341,6 +340,7 @@ export const Branch = (props) => {
                       ) : null}
                     </div>
                     <AddNode
+                      {...props}
                       modelValue={item.childNode}
                       onChange={(val) => {
                         item.childNode = val;
@@ -371,6 +371,7 @@ export const Branch = (props) => {
           })}
         </div>
         <AddNode
+          {...props}
           modelValue={nodeConfig.childNode}
           onChange={(val) => {
             nodeConfig.childNode = val;

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

@@ -4,7 +4,8 @@
       background-color: #576a95;
     }
   }
-}
 
-.promoter-drawer {
+
 }
+
+.promoter-drawer {}

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

@@ -9,7 +9,7 @@ import "./index.less";
 
 export const Promoter = (props) => {
   const selectorCtx = useContext(SelectContext);
-  const { modelValue: nodeConfig = {}, onChange } = props;
+  const { modelValue: nodeConfig = {}, onChange, disable } = props;
 
   const [drawer, setDrawer] = useState(false);
   const [isEditTitle, setIsEditTitle] = useState(false);
@@ -32,6 +32,9 @@ export const Promoter = (props) => {
   const nodeTitleRef = useRef();
 
   function onShow() {
+    if (disable) {
+      return;
+    }
     setForm(JSON.parse(JSON.stringify(nodeConfig)));
     setIsEditTitle(false);
     setDrawer(true);
@@ -81,7 +84,7 @@ export const Promoter = (props) => {
   return (
     <div className="promoter-wrap">
       <div className="node-wrap">
-        <div className="node-wrap-box start-node" onClick={onShow}>
+        <div className={`start-node ${disable ? "node-wrap-box-disable" : "node-wrap-box"}`} onClick={onShow}>
           <div className="title">
             <UserOutlined className="icon" />
             <span>{nodeConfig.nodeName}</span>
@@ -91,6 +94,7 @@ export const Promoter = (props) => {
           </div>
         </div>
         <AddNode
+          {...props}
           modelValue={nodeConfig.childNode}
           onChange={(val) => {
             nodeConfig.childNode = val;

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

@@ -10,7 +10,7 @@ import { SelectContext } from "../../../Selector/SelectContext";
 import "./index.less";
 
 export const Approver = (props) => {
-  const { modelValue = {}, onChange } = props;
+  const { modelValue = {}, onChange, disable } = props;
   const [form, setForm] = useState({
     nodeName: "",
     setType: undefined,
@@ -33,11 +33,17 @@ export const Approver = (props) => {
   const nodeTitleRef = useRef();
 
   function onShow() {
+    if (disable) {
+      return;
+    }
     setDrawer(true);
     setForm(JSON.parse(JSON.stringify(modelValue)));
   }
 
   function onNodeDel(e) {
+    if (disable) {
+      return;
+    }
     e.stopPropagation();
     onChange && onChange(modelValue.childNode);
   }
@@ -115,11 +121,15 @@ export const Approver = (props) => {
   return (
     <div className="approver-wrap">
       <div className="node-wrap">
-        <div className="node-wrap-box" onClick={onShow}>
+        <div className={`${disable ? "node-wrap-box-disable" : "node-wrap-box"}`} onClick={onShow}>
           <div className="title send-title">
             <UserOutlined />
             <span>{modelValue?.nodeName}</span>
-            <DeleteOutlined className="node-close-btn" onClick={onNodeDel} />
+            <DeleteOutlined
+              className="node-close-btn"
+              onClick={onNodeDel}
+              style={disable ? { cursor: "not-allowed" } : {}}
+            />
           </div>
           <div className="content">
             {toText(modelValue) ? <span>{toText(modelValue)}</span> : <span className="placeholder">请选择</span>}
@@ -127,6 +137,7 @@ export const Approver = (props) => {
         </div>
 
         <AddNode
+          {...props}
           modelValue={modelValue?.childNode}
           onChange={(val) => {
             modelValue.childNode = val;

package/src/components/NodeWrap/index.tsx

@@ -7,15 +7,18 @@ export const NodeWrap = (props) => {
   const { modelValue: nodeConfig, onChange } = props;
   return (
     <div className="node-wrap">
-      {nodeConfig.type == 0 ? <Promoter modelValue={nodeConfig} onChange={onChange}></Promoter> : null}
+      {nodeConfig.type == 0 ? <Promoter {...props} modelValue={nodeConfig} onChange={onChange}></Promoter> : null}
 
-      {nodeConfig.type == 1 ? <Approver modelValue={nodeConfig} onChange={onChange}></Approver> : null}
+      {nodeConfig.type == 1 ? <Approver {...props} modelValue={nodeConfig} onChange={onChange}></Approver> : null}
 
-      {nodeConfig.type == 2 ? <Send modelValue={nodeConfig} onChange={onChange}></Send> : null}
-      {nodeConfig.type == 4 ? <Branch modelValue={nodeConfig} onChange={onChange} ItemSlot={NodeWrap}></Branch> : null}
+      {nodeConfig.type == 2 ? <Send {...props} modelValue={nodeConfig} onChange={onChange}></Send> : null}
+      {nodeConfig.type == 4 ? (
+        <Branch {...props} modelValue={nodeConfig} onChange={onChange} ItemSlot={NodeWrap}></Branch>
+      ) : null}
 
       {nodeConfig.childNode ? (
         <NodeWrap
+          {...props}
           modelValue={nodeConfig.childNode}
           onChange={(val) => {
             nodeConfig.childNode = val;

package/src/components/ScWorkflow/index.tsx

@@ -4,12 +4,12 @@ import NodeWrap from "../NodeWrap";
 import Selector from "../Selector";
 
 export const ScWorkflow = (props) => {
-  const { modelValue: nodeConfig, onChange } = props;
+  const { modelValue: nodeConfig, onChange, disable } = props;
 
   return (
     <div className="sc-workflow-design">
       <div className="box-scale">
-        {nodeConfig ? <NodeWrap modelValue={nodeConfig} onChange={onChange}></NodeWrap> : null}
+        {nodeConfig ? <NodeWrap {...props} modelValue={nodeConfig} onChange={onChange}></NodeWrap> : null}
         <div className="end-node">
           <div className="end-node-circle"></div>
           <div className="end-node-text">流程结束</div>

package/src/components/Selector/SelectContext.tsx

@@ -12,9 +12,9 @@ export interface ISelectHandlerI {
   value: [];
   /** 选中保存回调 */
   onSave: (selected) => void;
-  roleListConfig,
-  listConfig,
-  initiatorListConfig,
+  roleListConfig;
+  listConfig;
+  initiatorListConfig;
 }
 
 /**
@@ -26,11 +26,11 @@ export const SelectContext = createContext({
     type: undefined,
     drawerType: undefined,
     value: [],
-    onSave: (s) => { },
+    onSave: (s) => {},
     roleListConfig: {},
     listConfig: {},
     initiatorListConfig: {},
   },
-  setSelectHandler(type, value, onSave, drawerType) { },
-  onClose() { },
+  setSelectHandler(type, value, onSave, drawerType) {},
+  onClose() {},
 });

package/src/index.less

@@ -3,17 +3,43 @@
   /* 默认白色背景 */
   width: 100%;
 
-  .designer-affix {
+  .designer-affix,
+  .designer-affix-isShowJson {
     position: fixed;
     right: 20px;
     bottom: 20px;
     z-index: 9;
-    padding: 12px;
-    border: 1px solid #999;
+    // padding: 12px;
+    // border: 1px solid #999;
+    width: 132px;
+    height: 48px;
+    background: url("./assets/img/control-bg.png") no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-position-x: 100%;
+    background-position-y: 100%;
 
     .action-btn+.action-btn {
       margin-left: 12px;
     }
+
+    .action-img {
+      width: 28px;
+      height: 28px;
+      margin-right: 16px;
+      cursor: pointer;
+
+    }
+
+    .action-img:last-child {
+      margin-right: 0px;
+    }
+  }
+
+  .designer-affix-isShowJson {
+    width: 180px;
   }
 
   .json-viewer {
@@ -45,7 +71,8 @@
     z-index: 1;
   }
 
-  .node-wrap-box {
+  .node-wrap-box,
+  .node-wrap-box-disable {
     display: inline-flex;
     flex-direction: column;
     position: relative;
@@ -58,7 +85,12 @@
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
   }
 
-  .node-wrap-box::before {
+  .node-wrap-box-disable {
+    cursor: not-allowed;
+  }
+
+  .node-wrap-box::before,
+  .node-wrap-box-disable::before {
     content: "";
     position: absolute;
     top: -12px;
@@ -70,11 +102,13 @@
     border-color: rgb(202, 202, 202) transparent transparent;
   }
 
-  .node-wrap-box.start-node:before {
+  .node-wrap-box.start-node:before,
+  .node-wrap-box-disable.start-node:before {
     content: none;
   }
 
-  .node-wrap-box .title {
+  .node-wrap-box .title,
+  .node-wrap-box-disable .title {
     height: 24px;
     line-height: 24px;
     color: #fff;
@@ -86,11 +120,13 @@
     align-items: center;
   }
 
-  .node-wrap-box .title .icon {
+  .node-wrap-box .title .icon,
+  .node-wrap-box-disable .title .icon {
     margin-right: 5px;
   }
 
-  .node-wrap-box .title .close {
+  .node-wrap-box .title .close,
+  .node-wrap-box-disable .title .close {
     font-size: 15px;
     position: absolute;
     top: 50%;
@@ -99,12 +135,14 @@
     display: none;
   }
 
-  .node-wrap-box .content {
+  .node-wrap-box .content,
+  .node-wrap-box-disable .content {
     position: relative;
     padding: 15px;
   }
 
-  .node-wrap-box .content .placeholder {
+  .node-wrap-box .content .placeholder,
+  .node-wrap-box-disable .content .placeholder {
     color: #999;
   }
 
@@ -418,7 +456,8 @@
     text-align: center;
   }
 
-  .node-wrap-box:after {
+  .node-wrap-box:after,
+  .node-wrap-box-disable:after {
     pointer-events: none;
     content: "";
     position: absolute;
@@ -492,6 +531,7 @@
 .dark .flowlong-designer {
 
   .node-wrap-box,
+  .node-wrap-box-disable,
   .auto-judge {
     background: #2b2b2b;
   }
@@ -508,7 +548,8 @@
   }
 
   .node-wrap-box::before,
-  .auto-judge::before {
+  .auto-judge::before,
+  .node-wrap-box-disable::before {
     background-color: var(--el-bg-color);
   }
 

package/src/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useImperativeHandle, forwardRef, useState } from "react";
-import { Button, Drawer } from "antd";
+import { Button, Drawer, Tooltip } from "antd";
 
 import ScWorkflow from "./components/ScWorkflow";
 
@@ -7,6 +7,10 @@ import { SelectContext, ISelectHandlerI } from "./components/Selector/SelectCont
 import { getInitNodeData } from "./common/flowData";
 
 import "./index.less";
+import addImg from "./assets/img/add.png";
+import subImg from "./assets/img/sub.png";
+import reloadImg from "./assets/img/reload.png";
+import checkJsonImg from "./assets/img/check-json.png";
 
 /**
  * 复制指定字符串
@@ -44,7 +48,7 @@ function copy(str) {
 }
 
 function FlowlongDesigner(props, ref) {
-  const { value, flowName, roleListConfig, listConfig, initiatorListConfig } = props;
+  const { value, flowName, roleListConfig, listConfig, initiatorListConfig, isShowJson, disable } = props;
   const [drawer, setDrawer] = useState(false);
   const [zoom, setZoom] = useState(1);
   const [data, setData] = useState(Object.keys(value || {}).length > 0 ? value : getInitNodeData({ name: flowName }));
@@ -117,28 +121,28 @@ function FlowlongDesigner(props, ref) {
           },
         }}
       >
-        <div className="designer-affix">
-          <Button className="action-btn view-json-btn" onClick={() => setDrawer(true)}>
-            查看 JSON
-          </Button>
-          {/* <Button className="action-btn save-img-btn" onClick={saveAsPng}>
-          保存图片
-        </Button> */}
-          <Button className="action-btn zoom-in-btn" onClick={() => setZoom((z) => z - 0.1)}>
-            缩小
-          </Button>
-          <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 className={isShowJson ? "designer-affix-isShowJson" : "designer-affix"}>
+          {isShowJson && (
+            <Tooltip title={"查看 JSON"}>
+              <img className="action-img" src={checkJsonImg} onClick={() => setDrawer(true)} alt="" />
+            </Tooltip>
+          )}
+          <Tooltip title={"缩小"}>
+            <img className="action-img" src={subImg} onClick={() => setZoom((z) => z - 0.1)} alt="" />
+          </Tooltip>
+          <Tooltip title={"放大"}>
+            <img className="action-img" src={addImg} onClick={() => setZoom((z) => z + 0.1)} alt="" />
+          </Tooltip>
+          <Tooltip title={"重置"}>
+            <img className="action-img" src={reloadImg} onClick={onReset} alt="" />
+          </Tooltip>
         </div>
         <div className="affix-container" style={{ transformOrigin: "0 0", transform: `scale(${zoom})` }}>
           <ScWorkflow
             className="workflow"
             id="content-to-capture"
             modelValue={data.nodeConfig}
+            disable={disable}
             onChange={(val) => {
               setData((d) => {
                 d.nodeConfig = val;