@hzab/flowlong-designer 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+# @hzab/flowlong-designer@0.2.2
+
+fix:其他条件文案修改
+
+# @hzab/flowlong-designer@0.2.1
+
+fix:审批人详情
+fix:条件节点-用户字段替换
+fix:每次新增节点刷新 nodeKey
+
 # @hzab/flowlong-designer@0.2.0
 
 fix:图片引用改为相对路径

package/package.json

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

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

@@ -60,7 +60,7 @@ export const typeDataEnum = {
         conditionList: [],
       },
       {
-        nodeName: "条件2",
+        nodeName: "其他条件",
         nodeKey: getNodeKey(),
         type: 3,
         priorityLevel: 2,
@@ -79,9 +79,20 @@ export function getNodeKey() {
 
 export const AddNode = (props) => {
   const { modelValue, onChange, disable } = props;
-
+  /**重置nodeKey */
+  const resetNodeKey = (item) => {
+    if (item?.nodeKey) {
+      item.nodeKey = getNodeKey();
+      if (item?.conditionNodes?.length > 0) {
+        item?.conditionNodes?.forEach((el) => {
+          resetNodeKey(el);
+        });
+      }
+    }
+  };
   function addType(type) {
     const data = _.cloneDeep(typeDataEnum[type]);
+    resetNodeKey(data);
     data.childNode = modelValue;
     delete data._Icon;
     onChange && onChange(data);
@@ -93,7 +104,7 @@ export const AddNode = (props) => {
         <Popover
           open={disable ? false : undefined}
           className="popover"
-          trigger="click"
+          trigger="focus"
           placement="bottom"
           content={
             <div className="add-node-popover-body">

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

@@ -123,11 +123,7 @@ export const Approver = (props) => {
           <div className="title" style={{ background: "#ff943e" }}>
             <UserOutlined />
             <span>{modelValue?.nodeName}</span>
-            <DeleteOutlined
-              className="node-close-btn"
-              onClick={onNodeDel}
-              style={disable ? { cursor: "not-allowed" } : {}}
-            />
+            {!disable && <DeleteOutlined className="node-close-btn" onClick={onNodeDel} />}
           </div>
           <div className="content">
             {toText(modelValue) ? <span>{toText(modelValue)}</span> : <span className="placeholder">请选择</span>}

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

@@ -20,7 +20,7 @@ const Field = (props: FormMapProps) => {
           }}
         ></Input>
       )}
-      {["dept", "useId"].includes(type) && (
+      {["dept", "assignee"].includes(type) && (
         <GroupUserSelectorModal type={type} onChange={onChange} value={value}></GroupUserSelectorModal>
       )}
     </>

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

@@ -5,11 +5,11 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import "./index.less";
 const fieldMap = {
   dept: "deptList",
-  useId: "userNameVos",
+  assignee: "userNameVos",
 };
 const titleMap = {
   dept: "部门",
-  useId: "用户",
+  assignee: "用户",
 };
 const GroupUserSelectorModal = (props) => {
   const { type, onChange, value = [] } = props;
@@ -36,7 +36,7 @@ const GroupUserSelectorModal = (props) => {
     if (type === "dept") {
       return deptModel;
     }
-    if (type === "useId") {
+    if (type === "assignee") {
       return userModel;
     }
   }, [type]);
@@ -52,7 +52,7 @@ const GroupUserSelectorModal = (props) => {
         deptUserLabel: groupUserSelectorRef.current?.selectedList?.map((item) => item?.label)?.join(","),
       };
     }
-    if (type === "useId") {
+    if (type === "assignee") {
       onOkValue = {
         value: groupUserSelectorRef.current?.selectedList?.map((item) => item?.userId)?.join(","),
         deptUserLabel: groupUserSelectorRef.current?.selectedList?.map((item) => item?.name)?.join(","),
@@ -71,14 +71,14 @@ const GroupUserSelectorModal = (props) => {
   const groupUserSelectorValue = useMemo(() => {
     const deptUserLabelArr = value?.deptUserLabel?.split(",") || [];
     let valueArr = value?.value?.split(",");
-    if (type === "useId") {
+    if (type === "assignee") {
       valueArr = value?.value?.split(",")?.map((el) => Number(el)) || [];
     }
 
     if (!value) {
       return [];
     }
-    if (type === "useId") {
+    if (type === "assignee") {
       return deptUserLabelArr?.map((item, index) => ({
         name: item,
         id: valueArr?.length && valueArr[index],
@@ -120,7 +120,7 @@ const GroupUserSelectorModal = (props) => {
             ref={groupUserSelectorRef}
             model={model}
             searchModel={model}
-            {...(type === "useId" ? userListConfig : {})}
+            {...(type === "assignee" ? userListConfig : {})}
           ></GroupUserSelector>
         </div>
       </Modal>

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

@@ -20,13 +20,7 @@ export const operatorOptions = [
   { label: "包含", value: "include" },
   { label: "不包含", value: "notinclude" },
 ];
-/**条件字段下拉数据 */
-// const conditionOption = [
-//   { label: "天", value: "day" },
-//   { label: "小时", value: "hour" },
-//   { label: "部门", value: "dept" },
-//   { label: "用户id", value: "useId" },
-// ];
+
 /**描述下拉字段 */
 const descOption = [
   {
@@ -41,7 +35,7 @@ const descOption = [
 /** 时间类型 */
 const timeType = ["day", "hour"];
 /** 部门或用户 */
-const deptUserType = ["dept", "useId"];
+const deptUserType = ["dept", "assignee"];
 export const Branch = (props) => {
   const { modelValue: nodeConfig, onChange, ItemSlot, disable } = props;
   const [form, setForm] = useState({
@@ -87,8 +81,11 @@ export const Branch = (props) => {
     nodeConfig.conditionNodes = swapLastTwo(nodeConfig.conditionNodes);
 
     nodeConfig.conditionNodes.forEach((el, index) => {
-      el.priorityLevel = index;
+      el.priorityLevel = index + 1;
       el.nodeName = el.nodeName ? el.nodeName : "条件" + (index + 1);
+      if (index === nodeConfig.conditionNodes.length - 1) {
+        el.nodeName = "其他条件";
+      }
     });
     onChange && onChange({ ...nodeConfig });
   }
@@ -143,7 +140,7 @@ export const Branch = (props) => {
         .map((conditionGroup) =>
           conditionGroup.map((item) => {
             const el = operatorOptions?.find((el) => el?.value === item?.operator);
-            if (["dept", "useId"].includes(item?.field)) {
+            if (["dept", "assignee"].includes(item?.field)) {
               return `${item.label}${el?.label}${item?.deptUserLabel}`;
             }
             return `${item.label}${el?.label}${item.value}`;
@@ -253,7 +250,7 @@ export const Branch = (props) => {
     if (condition?.field === "dept") {
       operatorOptions = [{ label: "包含", value: "include" }];
     }
-    if (condition?.field === "useId") {
+    if (condition?.field === "assignee") {
       operatorOptions = [
         { label: "等于", value: "==" },
         { label: "包含", value: "include" },
@@ -263,7 +260,7 @@ export const Branch = (props) => {
     if (condition?.label === "发起人") {
       conditionOption = [
         { label: "部门", value: "dept" },
-        { label: "用户id", value: "useId" },
+        { label: "用户id", value: "assignee" },
       ];
     }
     return {
@@ -352,6 +349,7 @@ export const Branch = (props) => {
                 </div>
                 {item.childNode && ItemSlot ? (
                   <ItemSlot
+                    {...props}
                     modelValue={item}
                     onChange={(val) => {
                       // 数据保存到指定对象中

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

@@ -125,11 +125,7 @@ export const Approver = (props) => {
           <div className="title send-title">
             <UserOutlined />
             <span>{modelValue?.nodeName}</span>
-            <DeleteOutlined
-              className="node-close-btn"
-              onClick={onNodeDel}
-              style={disable ? { cursor: "not-allowed" } : {}}
-            />
+            {!disable && <DeleteOutlined className="node-close-btn" onClick={onNodeDel} />}
           </div>
           <div className="content">
             {toText(modelValue) ? <span>{toText(modelValue)}</span> : <span className="placeholder">请选择</span>}

package/src/components/NodeWrap/index.tsx

@@ -5,6 +5,7 @@ import Branch from "./Nodes/Branch";
 
 export const NodeWrap = (props) => {
   const { modelValue: nodeConfig, onChange } = props;
+
   return (
     <div className="node-wrap">
       {nodeConfig.type == 0 ? <Promoter {...props} modelValue={nodeConfig} onChange={onChange}></Promoter> : null}

package/src/components/ScWorkflow/index.tsx

@@ -4,8 +4,7 @@ import NodeWrap from "../NodeWrap";
 import Selector from "../Selector";
 
 export const ScWorkflow = (props) => {
-  const { modelValue: nodeConfig, onChange, disable } = props;
-
+  const { modelValue: nodeConfig, onChange } = props;
   return (
     <div className="sc-workflow-design">
       <div className="box-scale">