@hzab/flowlong-designer 1.0.2 → 1.0.3

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+# @hzab/flowlong-designer@1.0.3
+
+fix:添加节点连接线优化；
+feat:新增只读;
+feat:新增可拖拽流程图
+
 # @hzab/flowlong-designer@1.0.2
 
 fix:修复条件节点删除

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/flowlong-designer",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "自定义审批流配置组件",
   "main": "src",
   "scripts": {
@@ -54,5 +54,8 @@
     "@hzab/deep-list": ">=0.0.2",
     "@hzab/group-user-selector": ">=0.0.4",
     "nanoid": "^3.3.7"
+  },
+  "dependencies": {
+    "react-draggable": "^4.5.0"
   }
 }

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

@@ -78,7 +78,7 @@ export function getNodeKey() {
 }
 
 export const AddNode = (props) => {
-  const { modelValue, onChange, disable } = props;
+  const { modelValue, onChange, disable, readOnly } = props;
   /**重置nodeKey */
   const resetNodeKey = (item) => {
     if (item?.nodeKey) {
@@ -122,7 +122,7 @@ export const AddNode = (props) => {
           }
         >
           <Button
-            disabled={disable}
+            disabled={disable || readOnly}
             className="add-node-btn"
             type="primary"
             shape="circle"

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, disable } = props;
+  const { modelValue = {}, onChange, disable, readOnly } = props;
   const [form, setForm] = useState({
     nodeName: "",
     setType: undefined,
@@ -120,7 +120,7 @@ export const Approver = (props) => {
           <div className="title" style={{ background: "#ff943e" }}>
             <UserOutlined />
             <span>{modelValue?.nodeName}</span>
-            {!disable && <DeleteOutlined className="node-close-btn" onClick={onNodeDel} />}
+            {!disable && !readOnly && <DeleteOutlined className="node-close-btn" onClick={onNodeDel} />}
           </div>
           <div className="content">
             {toText(modelValue) ? <span>{toText(modelValue)}</span> : <span className="placeholder">请选择</span>}
@@ -152,7 +152,9 @@ export const Approver = (props) => {
               ) : (
                 <div className="drawer-title">
                   {form.nodeName || "审批人设置"}
-                  {!disable && <EditOutlined className="node-wrap-drawer__title-edit" onClick={onEditTitle} />}
+                  {!disable && !readOnly && (
+                    <EditOutlined className="node-wrap-drawer__title-edit" onClick={onEditTitle} />
+                  )}
                 </div>
               )}
             </div>
@@ -162,12 +164,14 @@ export const Approver = (props) => {
           destroyOnClose
           getContainer="body"
           footer={
-            <div className="approver-drawer-footer">
-              <Button type="primary" onClick={onDrawerSave} disabled={disable}>
-                保存
-              </Button>
-              <Button onClick={onDrawerClose}>取消</Button>
-            </div>
+            readOnly ? null : (
+              <div className="approver-drawer-footer">
+                <Button type="primary" onClick={onDrawerSave} disabled={disable}>
+                  保存
+                </Button>
+                <Button onClick={onDrawerClose}>取消</Button>
+              </div>
+            )
           }
         >
           <Form
@@ -181,6 +185,7 @@ export const Approver = (props) => {
           >
             <Form.Item label="审批人员类型" name="setType">
               <Select
+                disabled={readOnly}
                 options={setTypeOptions}
                 value={form.setType}
                 onSelect={(val) => {
@@ -191,38 +196,42 @@ export const Approver = (props) => {
                     return { ...f };
                   });
                 }}
+                className={`${readOnly ? "readonly-select" : ""}`}
               />
             </Form.Item>
 
             {form.setType === 1 ? (
               <Form.Item label="选择成员" name="nodeAssigneeList">
-                <Button
-                  type="primary"
-                  icon={<PlusOutlined />}
-                  onClick={() =>
-                    selectorCtx.setSelectHandler(
-                      1,
-                      form.nodeAssigneeList,
-                      (selected) => {
-                        setForm((f) => {
-                          // 设置 人员、角色 列表数组
-                          f.nodeAssigneeList = selected;
-                          return { ...f };
-                        });
-                      },
-                      2,
-                    )
-                  }
-                >
-                  选择人员
-                </Button>
+                {readOnly ? null : (
+                  <Button
+                    type="primary"
+                    icon={<PlusOutlined />}
+                    onClick={() =>
+                      selectorCtx.setSelectHandler(
+                        1,
+                        form.nodeAssigneeList,
+                        (selected) => {
+                          setForm((f) => {
+                            // 设置 人员、角色 列表数组
+                            f.nodeAssigneeList = selected;
+                            return { ...f };
+                          });
+                        },
+                        2,
+                      )
+                    }
+                  >
+                    选择人员
+                  </Button>
+                )}
+
                 <div className="tags-list">
                   {form.nodeAssigneeList?.map((user, idx) => {
                     return (
                       <Tag
                         key={user.id || idx}
                         className="node-assignee-item"
-                        closable
+                        closable={!readOnly}
                         onClose={() => {
                           onUserDel(idx);
                         }}
@@ -254,33 +263,36 @@ export const Approver = (props) => {
 
             {form.setType === 3 ? (
               <Form.Item label="选择角色" name="nodeAssigneeList">
-                <Button
-                  type="primary"
-                  icon={<PlusOutlined />}
-                  onClick={() =>
-                    selectorCtx.setSelectHandler(
-                      2,
-                      form.nodeAssigneeList,
-                      (selected) => {
-                        setForm((f) => {
-                          // 设置 人员、角色 列表数组
-                          f.nodeAssigneeList = selected;
-                          return { ...f };
-                        });
-                      },
-                      2,
-                    )
-                  }
-                >
-                  选择角色
-                </Button>
+                {readOnly ? null : (
+                  <Button
+                    type="primary"
+                    icon={<PlusOutlined />}
+                    onClick={() =>
+                      selectorCtx.setSelectHandler(
+                        2,
+                        form.nodeAssigneeList,
+                        (selected) => {
+                          setForm((f) => {
+                            // 设置 人员、角色 列表数组
+                            f.nodeAssigneeList = selected;
+                            return { ...f };
+                          });
+                        },
+                        2,
+                      )
+                    }
+                  >
+                    选择角色
+                  </Button>
+                )}
+
                 <div className="tags-list">
                   {form.nodeAssigneeList?.map((it, idx) => {
                     return (
                       <Tag
                         key={it.id || idx}
                         className="node-assignee-item"
-                        closable
+                        closable={!readOnly}
                         onClose={() => {
                           onRoleDel(idx);
                         }}
@@ -384,6 +396,7 @@ export const Approver = (props) => {
               <Radio.Group
                 options={examineModeOptions}
                 value={form.examineMode}
+                style={readOnly ? { pointerEvents: "none" } : {}}
                 onChange={(e) => {
                   setForm((f) => {
                     form.examineMode = e.target.value;

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

@@ -6,13 +6,15 @@ interface FormMapProps {
   onChange?: (v: any) => void;
   value?: any;
   disabled?: boolean;
+  readOnly?: boolean;
 }
 const Field = (props: FormMapProps) => {
-  const { type, onChange, value, disabled } = props;
+  const { type, onChange, value, disabled, readOnly } = props;
   return (
     <>
       {["day", "hour"].includes(type) && (
         <Input
+          readOnly={readOnly}
           disabled={disabled}
           value={value}
           placeholder="值"
@@ -28,6 +30,7 @@ const Field = (props: FormMapProps) => {
           onChange={onChange}
           value={value}
           disabled={disabled}
+          readOnly={readOnly}
         ></GroupUserSelectorModal>
       )}
     </>

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

@@ -12,7 +12,7 @@ const titleMap = {
   assignee: "用户",
 };
 const GroupUserSelectorModal = (props) => {
-  const { type, onChange, value = [], disabled } = props;
+  const { type, onChange, value = [], disabled, readOnly } = props;
   const [open, setOpen] = useState(false);
   const groupUserSelectorRef = useRef(null);
   const deptModel = new DataModel({
@@ -94,12 +94,15 @@ const GroupUserSelectorModal = (props) => {
       <Input
         disabled={disabled}
         value={value?.deptUserLabel || null}
-        readOnly
+        readOnly={readOnly}
         onClick={() => {
+          if (readOnly) {
+            return;
+          }
           setOpen(true);
         }}
         placeholder="请点击编辑"
-        style={!disabled ? { cursor: "pointer" } : {}}
+        style={disabled || readOnly ? {} : { cursor: "pointer" }}
       ></Input>
       <Modal
         title={titleMap[type]}
@@ -121,6 +124,7 @@ const GroupUserSelectorModal = (props) => {
             model={model}
             searchModel={model}
             {...(type === "assignee" ? userListConfig : {})}
+            readOnly={readOnly}
           ></GroupUserSelector>
         </div>
       </Modal>

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

@@ -17,7 +17,8 @@
     flex-shrink: 0;
   }
 
-  .col-box {
+  .col-box,
+  .col-box-custom {
     display: inline-flex;
     flex-direction: column;
     align-items: center;
@@ -49,6 +50,12 @@
     background-color: rgb(202, 202, 202);
   }
 
+  .branch-box .col-box-custom {
+    border-right: 2px solid #ffffff;
+  }
+
+
+
   .condition-node {
     display: inline-flex;
     flex-direction: column;
@@ -81,7 +88,8 @@
   }
 
   .auto-judge,
-  .auto-judge-disable {
+  .auto-judge-disable,
+  .auto-judge-read-only {
     position: relative;
     width: 220px;
     min-height: 72px;
@@ -92,8 +100,11 @@
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
   }
 
+
+
   .auto-judge::before,
-  .auto-judge-disable::before {
+  .auto-judge-disable::before,
+  .auto-judge-read-only::before {
     content: "";
     position: absolute;
     top: -12px;
@@ -107,17 +118,20 @@
   }
 
   .auto-judge .title,
-  .auto-judge-disable .title {
+  .auto-judge-disable .title,
+  .auto-judge-read-only .title {
     line-height: 16px;
   }
 
   .auto-judge .title .node-title,
-  .auto-judge-disable .title .node-title {
+  .auto-judge-disable .title .node-title,
+  .auto-judge-read-only .title .node-title {
     color: #15bc83;
   }
 
   .auto-judge .title .delete-btn,
-  .auto-judge-disable .title .delete-btn {
+  .auto-judge-disable .title .delete-btn,
+  .auto-judge-read-only .title .delete-btn {
     font-size: 15px;
     position: absolute;
     top: 15px;
@@ -127,7 +141,8 @@
   }
 
   .auto-judge .title .priority-title,
-  .auto-judge-disable .title .priority-title {
+  .auto-judge-disable .title .priority-title,
+  .auto-judge-read-only .title .priority-title {
     position: absolute;
     top: 15px;
     right: 15px;
@@ -135,13 +150,15 @@
   }
 
   .auto-judge .content,
-  .auto-judge-disable .content {
+  .auto-judge-disable .content,
+  .auto-judge-read-only .content {
     position: relative;
     padding-top: 15px;
   }
 
   .auto-judge .content .placeholder,
-  .auto-judge-disable .content .placeholder {
+  .auto-judge-disable .content .placeholder,
+  .auto-judge-read-only .content .placeholder {
     color: #999;
   }
 
@@ -166,7 +183,8 @@
   }
 
   .auto-judge .sort-left,
-  .auto-judge-disable .sort-left {
+  .auto-judge-disable .sort-left,
+  .auto-judge-read-only .sort-left {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -179,7 +197,8 @@
   }
 
   .auto-judge .sort-right,
-  .auto-judge-disable .sort-right {
+  .auto-judge-disable .sort-right,
+  .auto-judge-read-only .sort-right {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -197,7 +216,8 @@
   }
 
   .auto-judge:after,
-  .auto-judge-disable:after {
+  .auto-judge-disable:after,
+  .auto-judge-read-only:after {
     pointer-events: none;
     content: "";
     position: absolute;
@@ -210,15 +230,22 @@
     transition: all 0.1s;
   }
 
-  .auto-judge:hover:after {
+  .auto-judge:hover:after,
+  .auto-judge-read-only:hover:after {
     border: 1px solid #3296fa;
     box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
+
   }
 
   .auto-judge-disable {
     cursor: not-allowed;
   }
 
+  .auto-judge-read-only {
+    cursor: pointer;
+
+  }
+
   .top-left-cover-line,
   .top-right-cover-line {
     position: absolute;

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

@@ -37,7 +37,7 @@ const timeType = ["day", "hour"];
 /** 部门或用户 */
 const deptUserType = ["dept", "assignee"];
 export const Branch = (props) => {
-  const { modelValue: nodeConfig, onChange, ItemSlot, disable } = props;
+  const { modelValue: nodeConfig, onChange, ItemSlot, disable, readOnly } = props;
   const [form, setForm] = useState({
     nodeName: "",
     setType: undefined,
@@ -67,6 +67,9 @@ export const Branch = (props) => {
     return arr;
   }
   function onTermAdd() {
+    if (readOnly) {
+      return;
+    }
     if (!nodeConfig.conditionNodes) {
       nodeConfig.conditionNodes = [];
     }
@@ -274,22 +277,42 @@ export const Branch = (props) => {
       operatorOptions,
     };
   };
+
+  const getEvenNumber = (number) => {
+    return number % 2 === 0;
+  };
+
   return (
     <div className="branch-wrap">
       <div className="branch-box-wrap">
         <div className="branch-box">
-          <Button className="add-branch" onClick={onTermAdd} disabled={disable}>
+          <Button
+            className="add-branch"
+            onClick={onTermAdd}
+            disabled={disable}
+            style={readOnly ? { cursor: "default" } : {}}
+          >
             添加条件
           </Button>
           {nodeConfig?.conditionNodes?.map((item, idx) => {
             const conditionDisable = idx == nodeConfig.conditionNodes?.length - 1;
-
+            let num = 0;
+            let autoJudgeClassName = "auto-judge";
+            if (getEvenNumber(nodeConfig?.conditionNodes?.length)) {
+              num = nodeConfig?.conditionNodes?.length / 2;
+            }
+            if (conditionDisable) {
+              autoJudgeClassName = "auto-judge-disable";
+            }
+            if (readOnly) {
+              autoJudgeClassName = "auto-judge-read-only";
+            }
             return (
-              <div className="col-box" key={idx}>
+              <div className={`col-box ${num - 1 === idx ? "col-box-custom" : ""}`} key={idx}>
                 <div className="condition-node">
                   <div className="condition-node-box">
                     <div
-                      className={conditionDisable ? "auto-judge-disable" : "auto-judge"}
+                      className={autoJudgeClassName}
                       onClick={() => {
                         if (!conditionDisable) {
                           onShow(idx);
@@ -312,7 +335,7 @@ export const Branch = (props) => {
                       <div className="title">
                         <span className="node-title">{item.nodeName}</span>
                         <span className="priority-title">优先级{item.priorityLevel}</span>
-                        {!conditionDisable && !disable && (
+                        {!conditionDisable && !disable && !readOnly && (
                           <DeleteOutlined
                             className="delete-btn"
                             onClick={(e) => {
@@ -403,17 +426,23 @@ export const Branch = (props) => {
             ) : (
               <div className="drawer-title">
                 {form.nodeName || "条件设置"}
-                {!disable && <EditOutlined className="node-wrap-drawer__title-edit" onClick={onEditTitle} />}
+                {!disable && !readOnly && (
+                  <EditOutlined className="node-wrap-drawer__title-edit" onClick={onEditTitle} />
+                )}
               </div>
             )}
           </div>
         }
         footer={
           <>
-            <Button type="primary" onClick={onDrawerSave} disabled={disable}>
-              保存
-            </Button>
-            <Button onClick={onDrawerClose}>取消</Button>
+            {readOnly ? null : (
+              <>
+                <Button type="primary" onClick={onDrawerSave} disabled={disable}>
+                  保存
+                </Button>
+                <Button onClick={onDrawerClose}>取消</Button>
+              </>
+            )}
           </>
         }
       >
@@ -425,16 +454,18 @@ export const Branch = (props) => {
               <div className="condition-group-editor">
                 <div className="header">
                   <span>条件组 {conditionGroupIdx + 1}</span>
-                  <div
-                    onClick={() => {
-                      if (disable) {
-                        return;
-                      }
-                      deleteConditionGroup(conditionGroupIdx);
-                    }}
-                  >
-                    <DeleteOutlined className={`branch-delete-icon ${disable ? "disable-delete-button" : ""}`} />
-                  </div>
+                  {readOnly ? null : (
+                    <div
+                      onClick={() => {
+                        if (disable) {
+                          return;
+                        }
+                        deleteConditionGroup(conditionGroupIdx);
+                      }}
+                    >
+                      <DeleteOutlined className={`branch-delete-icon ${disable ? "disable-delete-button" : ""}`} />
+                    </div>
+                  )}
                 </div>
 
                 <div className="main-content">
@@ -451,19 +482,21 @@ export const Branch = (props) => {
                       <div className="condition-content" key={idx}>
                         <div className="condition-relation">
                           <span>{idx == 0 ? "当" : "且"}</span>
-                          <div onClick={() => deleteConditionList(conditionGroup, idx)}>
-                            <DeleteOutlined
-                              className={`branch-delete-icon ${disable ? "disable-delete-button" : ""}`}
-                            />
-                          </div>
+                          {readOnly ? null : (
+                            <div onClick={() => deleteConditionList(conditionGroup, idx)}>
+                              <DeleteOutlined
+                                className={`branch-delete-icon ${disable ? "disable-delete-button" : ""}`}
+                              />
+                            </div>
+                          )}
                         </div>
                         <div className="condition-content">
                           <div className="condition-content-box">
                             <Select
-                              disabled={disable}
+                              disabled={disable || readOnly}
                               value={condition.label}
                               options={descOption}
-                              className="condition-content-box-item"
+                              className={`condition-content-box-item ${readOnly ? "readonly-select" : ""}`}
                               onChange={(e) => {
                                 condition.label = e;
                                 if (e === "时长") {
@@ -479,7 +512,7 @@ export const Branch = (props) => {
                               }}
                             ></Select>
                             <Select
-                              disabled={disable}
+                              disabled={disable || readOnly}
                               options={conditionOption}
                               value={condition.field}
                               onChange={(e) => {
@@ -491,11 +524,11 @@ export const Branch = (props) => {
                                 // 更新数据
                                 setForm((f) => ({ ...f }));
                               }}
-                              className="condition-content-box-item"
+                              className={`condition-content-box-item ${readOnly ? "readonly-select" : ""}`}
                               placeholder="条件字段"
                             />
                             <Select
-                              disabled={disable}
+                              disabled={disable || readOnly}
                               value={condition.operator}
                               onChange={(val) => {
                                 condition.operator = val;
@@ -504,9 +537,10 @@ export const Branch = (props) => {
                               }}
                               placeholder="请选择"
                               options={operatorOptions}
-                              className="condition-content-box-item"
+                              className={`condition-content-box-item ${readOnly ? "readonly-select" : ""}`}
                             ></Select>
                             <Field
+                              readOnly={readOnly}
                               disabled={disable}
                               value={fieldValue}
                               type={condition.field}
@@ -529,17 +563,21 @@ export const Branch = (props) => {
                   })}
                 </div>
                 <div className="sub-content">
-                  <Button type="primary" onClick={() => onConditionAdd(conditionGroup)} disabled={disable}>
-                    添加条件
-                  </Button>
+                  {readOnly ? null : (
+                    <Button type="primary" onClick={() => onConditionAdd(conditionGroup)} disabled={disable}>
+                      添加条件
+                    </Button>
+                  )}
                 </div>
               </div>
             </div>
           );
         })}
-        <Button onClick={onConditionGroupAdd} disabled={disable}>
-          添加条件组
-        </Button>
+        {readOnly ? null : (
+          <Button onClick={onConditionGroupAdd} disabled={disable}>
+            添加条件组
+          </Button>
+        )}
       </Drawer>
     </div>
   );

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, disable } = props;
+  const { modelValue: nodeConfig = {}, onChange, disable, readOnly } = props;
 
   const [drawer, setDrawer] = useState(false);
   const [isEditTitle, setIsEditTitle] = useState(false);
@@ -122,48 +122,55 @@ export const Promoter = (props) => {
               ) : (
                 <div className="drawer-title">
                   {form.nodeName || "发起人"}
-                  <EditOutlined className="node-wrap-drawer__title-edit" onClick={onEditTitle} />
+                  {!disable && !readOnly && (
+                    <EditOutlined className="node-wrap-drawer__title-edit" onClick={onEditTitle} />
+                  )}
                 </div>
               )}
             </div>
           }
           footer={
-            <>
-              <Button type="primary" onClick={onDrawerSave}>
-                保存
-              </Button>
-              <Button onClick={onDrawerClose}>取消</Button>
-            </>
+            readOnly ? null : (
+              <>
+                <Button type="primary" onClick={onDrawerSave}>
+                  保存
+                </Button>
+                <Button onClick={onDrawerClose}>取消</Button>
+              </>
+            )
           }
         >
           <Form label-position="top" initialValues={form}>
             <Form.Item label="谁可以发起此审批">
-              <Button
-                type="primary"
-                onClick={() =>
-                  selectorCtx.setSelectHandler(
-                    2,
-                    form.nodeAssigneeList,
-                    (selected) => {
-                      setForm((f) => {
-                        // 设置 人员、角色 列表数组
-                        f.nodeAssigneeList = selected;
-                        return { ...f };
-                      });
-                    },
-                    1,
-                  )
-                }
-              >
-                选择人员
-              </Button>
+              {readOnly ? null : (
+                <Button
+                  type="primary"
+                  onClick={() =>
+                    selectorCtx.setSelectHandler(
+                      2,
+                      form.nodeAssigneeList,
+                      (selected) => {
+                        setForm((f) => {
+                          // 设置 人员、角色 列表数组
+                          f.nodeAssigneeList = selected;
+                          return { ...f };
+                        });
+                      },
+                      1,
+                    )
+                  }
+                >
+                  选择人员
+                </Button>
+              )}
+
               <div className="tags-list">
                 {form.nodeAssigneeList?.map((it, idx) => {
                   return (
                     <Tag
                       key={idx}
                       className="node-assignee-item"
-                      closable
+                      closable={!readOnly}
                       onClose={(e) => {
                         e.preventDefault();
                         onRoleDel(idx);

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, disable } = props;
+  const { modelValue = {}, onChange, disable, readOnly } = props;
   const [form, setForm] = useState({
     nodeName: "",
     setType: undefined,
@@ -122,7 +122,7 @@ export const Approver = (props) => {
           <div className="title send-title">
             <UserOutlined />
             <span>{modelValue?.nodeName}</span>
-            {!disable && <DeleteOutlined className="node-close-btn" onClick={onNodeDel} />}
+            {!disable && !readOnly && <DeleteOutlined className="node-close-btn" onClick={onNodeDel} />}
           </div>
           <div className="content">
             {toText(modelValue) ? <span>{toText(modelValue)}</span> : <span className="placeholder">请选择</span>}
@@ -154,7 +154,9 @@ export const Approver = (props) => {
               ) : (
                 <div className="drawer-title">
                   {form.nodeName || "审批人设置"}
-                  {!disable && <EditOutlined className="node-wrap-drawer__title-edit" onClick={onEditTitle} />}
+                  {!disable && !readOnly && (
+                    <EditOutlined className="node-wrap-drawer__title-edit" onClick={onEditTitle} />
+                  )}
                 </div>
               )}
             </div>
@@ -164,12 +166,14 @@ export const Approver = (props) => {
           destroyOnClose
           getContainer="body"
           footer={
-            <div className="approver-drawer-footer">
-              <Button type="primary" onClick={onDrawerSave} disabled={disable}>
-                保存
-              </Button>
-              <Button onClick={onDrawerClose}>取消</Button>
-            </div>
+            readOnly ? null : (
+              <div className="approver-drawer-footer">
+                <Button type="primary" onClick={onDrawerSave} disabled={disable}>
+                  保存
+                </Button>
+                <Button onClick={onDrawerClose}>取消</Button>
+              </div>
+            )
           }
         >
           <Form
@@ -183,6 +187,8 @@ export const Approver = (props) => {
           >
             <Form.Item label="审批人员类型" name="setType">
               <Select
+                disabled={readOnly}
+                className={`${readOnly ? "readonly-select" : ""}`}
                 options={setTypeOptions}
                 value={form.setType}
                 onSelect={(val) => {
@@ -198,33 +204,36 @@ export const Approver = (props) => {
 
             {form.setType === 1 ? (
               <Form.Item label="选择成员" name="nodeAssigneeList">
-                <Button
-                  type="primary"
-                  icon={<PlusOutlined />}
-                  onClick={() =>
-                    selectorCtx.setSelectHandler(
-                      1,
-                      form.nodeAssigneeList,
-                      (selected) => {
-                        setForm((f) => {
-                          // 设置 人员、角色 列表数组
-                          f.nodeAssigneeList = selected;
-                          return { ...f };
-                        });
-                      },
-                      2,
-                    )
-                  }
-                >
-                  选择人员
-                </Button>
+                {readOnly ? null : (
+                  <Button
+                    type="primary"
+                    icon={<PlusOutlined />}
+                    onClick={() =>
+                      selectorCtx.setSelectHandler(
+                        1,
+                        form.nodeAssigneeList,
+                        (selected) => {
+                          setForm((f) => {
+                            // 设置 人员、角色 列表数组
+                            f.nodeAssigneeList = selected;
+                            return { ...f };
+                          });
+                        },
+                        2,
+                      )
+                    }
+                  >
+                    选择人员
+                  </Button>
+                )}
+
                 <div className="tags-list">
                   {form.nodeAssigneeList?.map((user, idx) => {
                     return (
                       <Tag
                         key={user.id || idx}
                         className="node-assignee-item"
-                        closable
+                        closable={!readOnly}
                         onClose={() => {
                           onUserDel(idx);
                         }}
@@ -256,33 +265,36 @@ export const Approver = (props) => {
 
             {form.setType === 3 ? (
               <Form.Item label="选择角色" name="nodeAssigneeList">
-                <Button
-                  type="primary"
-                  icon={<PlusOutlined />}
-                  onClick={() =>
-                    selectorCtx.setSelectHandler(
-                      2,
-                      form.nodeAssigneeList,
-                      (selected) => {
-                        setForm((f) => {
-                          // 设置 人员、角色 列表数组
-                          f.nodeAssigneeList = selected;
-                          return { ...f };
-                        });
-                      },
-                      2,
-                    )
-                  }
-                >
-                  选择角色
-                </Button>
+                {readOnly ? null : (
+                  <Button
+                    type="primary"
+                    icon={<PlusOutlined />}
+                    onClick={() =>
+                      selectorCtx.setSelectHandler(
+                        2,
+                        form.nodeAssigneeList,
+                        (selected) => {
+                          setForm((f) => {
+                            // 设置 人员、角色 列表数组
+                            f.nodeAssigneeList = selected;
+                            return { ...f };
+                          });
+                        },
+                        2,
+                      )
+                    }
+                  >
+                    选择角色
+                  </Button>
+                )}
+
                 <div className="tags-list">
                   {form.nodeAssigneeList?.map((it, idx) => {
                     return (
                       <Tag
                         key={it.id || idx}
                         className="node-assignee-item"
-                        closable
+                        closable={!readOnly}
                         onClose={() => {
                           onRoleDel(idx);
                         }}

package/src/components/Selector/index.tsx

@@ -24,6 +24,7 @@ export const Selector = (props) => {
   function onModalClose() {
     selectorCtx.onClose();
   }
+  console.log(listConfig, "listConfig");
 
   return (
     <div className="selector">

package/src/index.less

@@ -3,40 +3,7 @@
   /* 默认白色背景 */
   width: 100%;
 
-  .designer-affix,
-  .designer-affix-isShowJson {
-    position: fixed;
-    right: 20px;
-    bottom: 20px;
-    z-index: 9;
-    // 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;
@@ -571,4 +538,43 @@
   .ant-btn+.ant-btn {
     margin-left: 12px;
   }
+}
+
+
+.readonly-select.ant-select:not(.ant-select-customize-input) .ant-select-selector {
+  background: none;
+  color: rgba(0, 0, 0, .85);
+  cursor: default
+}
+
+.designer-affix,
+.designer-affix-isShowJson {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  z-index: 9;
+  width: 180px;
+  height: 48px;
+  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;
+  }
 }

package/src/index.tsx

@@ -12,7 +12,7 @@ import subImg from "./assets/img/sub.png";
 import reloadImg from "./assets/img/reload.png";
 import checkJsonImg from "./assets/img/check-json.png";
 import controlBgImg from "./assets/img/control-bg.png";
-
+import Draggable from "react-draggable";
 /**
  * 复制指定字符串
  * @param str
@@ -49,7 +49,7 @@ function copy(str) {
 }
 
 function FlowlongDesigner(props, ref) {
-  const { value, flowName, roleListConfig, listConfig, initiatorListConfig, isShowJson, disable } = props;
+  const { value, flowName, roleListConfig, listConfig, initiatorListConfig, isShowJson, disable, readOnly } = props;
   const [drawer, setDrawer] = useState(false);
   const [zoom, setZoom] = useState(1);
   const [data, setData] = useState(Object.keys(value || {}).length > 0 ? value : getInitNodeData({ name: flowName }));
@@ -92,85 +92,90 @@ function FlowlongDesigner(props, ref) {
   };
 
   return (
-    <div className="flowlong-designer">
-      <SelectContext.Provider
-        value={{
-          selectHandler,
-          setSelectHandler(type, value, onSave, drawerType) {
-            setSelectHandler({
-              open: true,
-              type,
-              drawerType,
-              value,
-              onSave,
-              roleListConfig,
-              listConfig,
-              initiatorListConfig,
-            });
-          },
-          onClose() {
-            setSelectHandler({
-              open: false,
-              type: -1,
-              drawerType: -1,
-              value: [],
-              onSave: (s) => {},
-              roleListConfig,
-              listConfig,
-              initiatorListConfig,
-            });
-          },
-        }}
-      >
-        <div
-          className={isShowJson ? "designer-affix-isShowJson" : "designer-affix"}
-          style={{
-            backgroundImage: `url(${controlBgImg})`,
-          }}
-        >
-          {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;
-                return { ...d };
-              });
+    <>
+      <Draggable>
+        <div className="flowlong-designer">
+          <SelectContext.Provider
+            value={{
+              selectHandler,
+              setSelectHandler(type, value, onSave, drawerType) {
+                setSelectHandler({
+                  open: true,
+                  type,
+                  drawerType,
+                  value,
+                  onSave,
+                  roleListConfig,
+                  listConfig,
+                  initiatorListConfig,
+                });
+              },
+              onClose() {
+                setSelectHandler({
+                  open: false,
+                  type: -1,
+                  drawerType: -1,
+                  value: [],
+                  onSave: (s) => {},
+                  roleListConfig,
+                  listConfig,
+                  initiatorListConfig,
+                });
+              },
             }}
-          />
-          <Drawer className="drawer-wrapper" open={drawer} width={720} onClose={onDrawerClose}>
-            <div>
-              <div className="cp-parse-json-btn" onClick={copyParseJson}>
-                复制格式化后的 JSON
-              </div>
-              <div className="cp-json-btn" onClick={copyJson}>
-                复制压缩后的 JSON
-              </div>
+          >
+            <div className="affix-container" style={{ transformOrigin: "0 0", transform: `scale(${zoom})` }}>
+              <ScWorkflow
+                className="workflow"
+                id="content-to-capture"
+                modelValue={data.nodeConfig}
+                disable={disable}
+                readOnly={readOnly}
+                onChange={(val) => {
+                  setData((d) => {
+                    d.nodeConfig = val;
+                    return { ...d };
+                  });
+                }}
+              />
+              <Drawer className="drawer-wrapper" open={drawer} width={720} onClose={onDrawerClose}>
+                <div>
+                  <div className="cp-parse-json-btn" onClick={copyParseJson}>
+                    复制格式化后的 JSON
+                  </div>
+                  <div className="cp-json-btn" onClick={copyJson}>
+                    复制压缩后的 JSON
+                  </div>
+                </div>
+                {/* <json-editor-vue className="editor" language="zh-CN" current-mode="view" v-model="data" /> */}
+                <pre className="json-viewer">{JSON.stringify(data, null, 2)}</pre>
+              </Drawer>
             </div>
-            {/* <json-editor-vue className="editor" language="zh-CN" current-mode="view" v-model="data" /> */}
-            <pre className="json-viewer">{JSON.stringify(data, null, 2)}</pre>
-          </Drawer>
+          </SelectContext.Provider>
         </div>
-      </SelectContext.Provider>
-    </div>
+      </Draggable>
+      <div
+        className={isShowJson ? "designer-affix-isShowJson" : "designer-affix"}
+        style={{
+          backgroundImage: `url(${controlBgImg})`,
+        }}
+      >
+        {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>
+    </>
   );
 }