@hzab/flowlong-designer 1.0.0 → 1.0.1

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+# @hzab/flowlong-designer@1.0.1
+
+fix:详情优化(节点可点击打开详情)
+
 # @hzab/flowlong-designer@1.0.0
 
 fix:审核人默认值为或签

package/package.json

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

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

@@ -84,4 +84,8 @@
   .ant-btn+.ant-btn {
     margin-left: 12px;
   }
+}
+
+.disable-delete-button {
+  cursor: not-allowed;
 }

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

@@ -33,9 +33,6 @@ export const Approver = (props) => {
   const nodeTitleRef = useRef();
 
   function onShow() {
-    if (disable) {
-      return;
-    }
     setDrawer(true);
     setForm(JSON.parse(JSON.stringify(modelValue)));
   }
@@ -119,7 +116,7 @@ export const Approver = (props) => {
   return (
     <div className="approver-wrap">
       <div className="node-wrap">
-        <div className={`${disable ? "node-wrap-box-disable" : "node-wrap-box"}`} onClick={onShow}>
+        <div className="node-wrap-box" onClick={onShow}>
           <div className="title" style={{ background: "#ff943e" }}>
             <UserOutlined />
             <span>{modelValue?.nodeName}</span>
@@ -155,7 +152,7 @@ export const Approver = (props) => {
               ) : (
                 <div className="drawer-title">
                   {form.nodeName || "审批人设置"}
-                  <EditOutlined className="node-wrap-drawer__title-edit" onClick={onEditTitle} />
+                  {!disable && <EditOutlined className="node-wrap-drawer__title-edit" onClick={onEditTitle} />}
                 </div>
               )}
             </div>
@@ -166,7 +163,7 @@ export const Approver = (props) => {
           getContainer="body"
           footer={
             <div className="approver-drawer-footer">
-              <Button type="primary" onClick={onDrawerSave}>
+              <Button type="primary" onClick={onDrawerSave} disabled={disable}>
                 保存
               </Button>
               <Button onClick={onDrawerClose}>取消</Button>
@@ -174,6 +171,7 @@ export const Approver = (props) => {
           }
         >
           <Form
+            disabled={disable}
             ref={formRef}
             name="approverForm"
             labelCol={{ span: 8 }}

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

@@ -5,13 +5,15 @@ interface FormMapProps {
   type: string;
   onChange?: (v: any) => void;
   value?: any;
+  disabled?: boolean;
 }
 const Field = (props: FormMapProps) => {
-  const { type, onChange, value } = props;
+  const { type, onChange, value, disabled } = props;
   return (
     <>
       {["day", "hour"].includes(type) && (
         <Input
+          disabled={disabled}
           value={value}
           placeholder="值"
           type="number"
@@ -21,7 +23,12 @@ const Field = (props: FormMapProps) => {
         ></Input>
       )}
       {["dept", "assignee"].includes(type) && (
-        <GroupUserSelectorModal type={type} onChange={onChange} value={value}></GroupUserSelectorModal>
+        <GroupUserSelectorModal
+          type={type}
+          onChange={onChange}
+          value={value}
+          disabled={disabled}
+        ></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 = [] } = props;
+  const { type, onChange, value = [], disabled } = props;
   const [open, setOpen] = useState(false);
   const groupUserSelectorRef = useRef(null);
   const deptModel = new DataModel({
@@ -92,13 +92,14 @@ const GroupUserSelectorModal = (props) => {
   return (
     <div>
       <Input
+        disabled={disabled}
         value={value?.deptUserLabel || null}
         readOnly
         onClick={() => {
           setOpen(true);
         }}
         placeholder="请点击编辑"
-        style={{ cursor: "pointer" }}
+        style={!disabled ? { cursor: "pointer" } : {}}
       ></Input>
       <Modal
         title={titleMap[type]}

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

@@ -368,4 +368,10 @@
       margin-left: 12px;
     }
   }
+
+
+}
+
+.disable-delete-button {
+  cursor: not-allowed;
 }

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

@@ -213,6 +213,9 @@ export const Branch = (props) => {
     setForm((f) => ({ ...f }));
   }
   function deleteConditionList(conditionList, idx) {
+    if (disable) {
+      return;
+    }
     conditionList.splice(idx, 1);
     setForm((f) => ({ ...f }));
   }
@@ -279,7 +282,7 @@ export const Branch = (props) => {
             添加条件
           </Button>
           {nodeConfig?.conditionNodes?.map((item, idx) => {
-            const conditionDisable = idx == nodeConfig.conditionNodes?.length - 1 || disable;
+            const conditionDisable = idx == nodeConfig.conditionNodes?.length - 1;
 
             return (
               <div className="col-box" key={idx}>
@@ -309,15 +312,16 @@ export const Branch = (props) => {
                       <div className="title">
                         <span className="node-title">{item.nodeName}</span>
                         <span className="priority-title">优先级{item.priorityLevel}</span>
-                        {!conditionDisable && (
-                          <DeleteOutlined
-                            className="delete-btn"
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              onTermDel(idx);
-                            }}
-                          />
-                        )}
+                        {!conditionDisable ||
+                          (!disable && (
+                            <DeleteOutlined
+                              className="delete-btn"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                onTermDel(idx);
+                              }}
+                            />
+                          ))}
                       </div>
                       <div className="content">
                         {toText(nodeConfig, idx) ? (
@@ -400,14 +404,14 @@ export const Branch = (props) => {
             ) : (
               <div className="drawer-title">
                 {form.nodeName || "条件设置"}
-                <EditOutlined className="node-wrap-drawer__title-edit" onClick={onEditTitle} />
+                {!disable && <EditOutlined className="node-wrap-drawer__title-edit" onClick={onEditTitle} />}
               </div>
             )}
           </div>
         }
         footer={
           <>
-            <Button type="primary" onClick={onDrawerSave}>
+            <Button type="primary" onClick={onDrawerSave} disabled={disable}>
               保存
             </Button>
             <Button onClick={onDrawerClose}>取消</Button>
@@ -424,10 +428,13 @@ export const Branch = (props) => {
                   <span>条件组 {conditionGroupIdx + 1}</span>
                   <div
                     onClick={() => {
+                      if (disable) {
+                        return;
+                      }
                       deleteConditionGroup(conditionGroupIdx);
                     }}
                   >
-                    <DeleteOutlined className="branch-delete-icon" />
+                    <DeleteOutlined className={`branch-delete-icon ${disable ? "disable-delete-button" : ""}`} />
                   </div>
                 </div>
 
@@ -446,12 +453,15 @@ export const Branch = (props) => {
                         <div className="condition-relation">
                           <span>{idx == 0 ? "当" : "且"}</span>
                           <div onClick={() => deleteConditionList(conditionGroup, idx)}>
-                            <DeleteOutlined className="branch-delete-icon" />
+                            <DeleteOutlined
+                              className={`branch-delete-icon ${disable ? "disable-delete-button" : ""}`}
+                            />
                           </div>
                         </div>
                         <div className="condition-content">
                           <div className="condition-content-box">
                             <Select
+                              disabled={disable}
                               value={condition.label}
                               options={descOption}
                               className="condition-content-box-item"
@@ -470,6 +480,7 @@ export const Branch = (props) => {
                               }}
                             ></Select>
                             <Select
+                              disabled={disable}
                               options={conditionOption}
                               value={condition.field}
                               onChange={(e) => {
@@ -485,6 +496,7 @@ export const Branch = (props) => {
                               placeholder="条件字段"
                             />
                             <Select
+                              disabled={disable}
                               value={condition.operator}
                               onChange={(val) => {
                                 condition.operator = val;
@@ -496,6 +508,7 @@ export const Branch = (props) => {
                               className="condition-content-box-item"
                             ></Select>
                             <Field
+                              disabled={disable}
                               value={fieldValue}
                               type={condition.field}
                               onChange={(e) => {
@@ -517,7 +530,7 @@ export const Branch = (props) => {
                   })}
                 </div>
                 <div className="sub-content">
-                  <Button type="primary" onClick={() => onConditionAdd(conditionGroup)}>
+                  <Button type="primary" onClick={() => onConditionAdd(conditionGroup)} disabled={disable}>
                     添加条件
                   </Button>
                 </div>
@@ -525,7 +538,9 @@ export const Branch = (props) => {
             </div>
           );
         })}
-        <Button onClick={onConditionGroupAdd}>添加条件组</Button>
+        <Button onClick={onConditionGroupAdd} disabled={disable}>
+          添加条件组
+        </Button>
       </Drawer>
     </div>
   );

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

@@ -33,9 +33,6 @@ export const Approver = (props) => {
   const nodeTitleRef = useRef();
 
   function onShow() {
-    if (disable) {
-      return;
-    }
     setDrawer(true);
     setForm(JSON.parse(JSON.stringify(modelValue)));
   }
@@ -121,7 +118,7 @@ export const Approver = (props) => {
   return (
     <div className="approver-wrap">
       <div className="node-wrap">
-        <div className={`${disable ? "node-wrap-box-disable" : "node-wrap-box"}`} onClick={onShow}>
+        <div className={"node-wrap-box"} onClick={onShow}>
           <div className="title send-title">
             <UserOutlined />
             <span>{modelValue?.nodeName}</span>
@@ -157,7 +154,7 @@ export const Approver = (props) => {
               ) : (
                 <div className="drawer-title">
                   {form.nodeName || "审批人设置"}
-                  <EditOutlined className="node-wrap-drawer__title-edit" onClick={onEditTitle} />
+                  {!disable && <EditOutlined className="node-wrap-drawer__title-edit" onClick={onEditTitle} />}
                 </div>
               )}
             </div>
@@ -168,7 +165,7 @@ export const Approver = (props) => {
           getContainer="body"
           footer={
             <div className="approver-drawer-footer">
-              <Button type="primary" onClick={onDrawerSave}>
+              <Button type="primary" onClick={onDrawerSave} disabled={disable}>
                 保存
               </Button>
               <Button onClick={onDrawerClose}>取消</Button>
@@ -182,6 +179,7 @@ export const Approver = (props) => {
             wrapperCol={{ span: 16 }}
             initialValues={form}
             autoComplete="off"
+            disabled={disable}
           >
             <Form.Item label="审批人员类型" name="setType">
               <Select