@hzab/flowlong-designer 0.0.1 → 0.0.3

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

@@ -1,19 +1,16 @@
 import { useRef, useState, useContext } from "react";
-import { Drawer, Button, Input, Form, Tag, Switch } from "antd";
-import { EditOutlined, SendOutlined, DeleteOutlined } from "@ant-design/icons";
+import { Drawer, Input, Button, Form, Select, Tag, InputNumber, Radio, Checkbox, Switch } from "antd";
+import { UserOutlined, DeleteOutlined, EditOutlined, PlusOutlined } from "@ant-design/icons";
 
 import AddNode from "../AddNode";
+import { setTypeOptions, selectModeOptions, directorModeOptions, termModeOptions, examineModeOptions } from "./options";
+
 import { SelectContext } from "../../../Selector/SelectContext";
 
 import "./index.less";
 
-export const Send = (props) => {
-  const selectorCtx = useContext(SelectContext);
-  const { modelValue: nodeConfig = {}, onChange } = props;
-
-  const [drawer, setDrawer] = useState(false);
-  const [isEditTitle, setIsEditTitle] = useState(false);
-
+export const Approver = (props) => {
+  const { modelValue = {}, onChange } = props;
   const [form, setForm] = useState({
     nodeName: "",
     setType: undefined,
@@ -26,29 +23,55 @@ export const Send = (props) => {
     term: undefined,
     termMode: undefined,
     examineMode: undefined,
-    conditionList: [],
-    userSelectFlag: undefined,
   });
+  const [drawer, setDrawer] = useState(false);
+  const [isEditTitle, setIsEditTitle] = useState(false);
+
+  const selectorCtx = useContext(SelectContext);
 
+  const formRef = useRef();
   const nodeTitleRef = useRef();
 
   function onShow() {
-    setForm(JSON.parse(JSON.stringify(nodeConfig)));
-    setIsEditTitle(false);
     setDrawer(true);
+    setForm(JSON.parse(JSON.stringify(modelValue)));
   }
 
-  function onDrawerClose() {
-    setDrawer(false);
+  function onNodeDel(e) {
+    e.stopPropagation();
+    onChange && onChange(modelValue.childNode);
   }
 
-  function onEditTitle() {
-    setIsEditTitle(true);
-    if (nodeTitleRef.current) {
-      // @ts-ignore
-      nodeTitleRef.current?.focus();
+  function toText(nodeConf) {
+    if (nodeConf.setType == 1) {
+      if (nodeConf.nodeAssigneeList && nodeConf.nodeAssigneeList.length > 0) {
+        const users = nodeConf.nodeAssigneeList.map((item) => item.name).join("、");
+        return users;
+      } else {
+        return false;
+      }
+    } else if (nodeConf.setType == 2) {
+      return nodeConf.examineLevel == 1 || !nodeConf.examineLevel
+        ? "直接部门经理"
+        : `发起人的第${nodeConf.examineLevel}级部门经理`;
+    } else if (nodeConf.setType == 3) {
+      if (nodeConf.nodeAssigneeList && nodeConf.nodeAssigneeList.length > 0) {
+        const roles = nodeConf.nodeAssigneeList.map((item) => item.name).join("、");
+        return "角色-" + roles;
+      } else {
+        return false;
+      }
+    } else if (nodeConf.setType == 4) {
+      return "发起人自选";
+    } else if (nodeConf.setType == 5) {
+      return "发起人自己";
+    } else if (nodeConf.setType == 7) {
+      return "连续多级主管";
+    } else if (nodeConf.setType == 9) {
+      return "驻点队长";
     }
   }
+
   function onSaveTitle(e) {
     setForm((f) => {
       // @ts-ignore
@@ -57,68 +80,62 @@ export const Send = (props) => {
     });
     setIsEditTitle(false);
   }
+  function onEditTitle() {
+    setIsEditTitle(true);
+    if (nodeTitleRef.current) {
+      // @ts-ignore
+      nodeTitleRef.current?.focus();
+    }
+  }
 
   function onDrawerSave() {
-    // nodeConfig.conditionNodes[curIdxRef.current] = form;
-    onChange && onChange({ ...form });
+    // 强制更新数据
+    onChange && onChange(form);
     onDrawerClose();
   }
 
-  function delNode() {
-    onChange && onChange({ ...nodeConfig.childNode });
+  function onDrawerClose() {
+    setDrawer(false);
   }
 
-  function toText(nodeConfig) {
-    if (nodeConfig.nodeAssigneeList && nodeConfig.nodeAssigneeList.length > 0) {
-      const users = nodeConfig.nodeAssigneeList.map((item) => item.name).join("、");
-      return users;
-    } else {
-      if (nodeConfig.userSelectFlag) {
-        return "发起人自选";
-      } else {
-        return false;
-      }
-    }
+  function onUserDel(idx) {
+    setForm((f) => {
+      f.nodeAssigneeList.splice(idx, 1);
+      return { ...f };
+    });
   }
 
-  function delUser(index) {
-    form.nodeAssigneeList.splice(index, 1);
-    setForm((f) => ({ ...f }));
+  function onRoleDel(idx) {
+    setForm((f) => {
+      f.nodeAssigneeList.splice(idx, 1);
+      return { ...f };
+    });
   }
 
   return (
-    <div className="send">
+    <div className="approver-wrap">
       <div className="node-wrap">
         <div className="node-wrap-box" onClick={onShow}>
-          <div className="title">
-            <SendOutlined className="icon" />
-            <span>{nodeConfig.nodeName || "抄送人"}</span>
-            <DeleteOutlined
-              className="close"
-              onClick={(e) => {
-                e.stopPropagation();
-                delNode();
-              }}
-            />
+          <div className="title send-title">
+            <UserOutlined />
+            <span>{modelValue?.nodeName}</span>
+            <DeleteOutlined className="node-close-btn" onClick={onNodeDel} />
           </div>
           <div className="content">
-            {toText(nodeConfig) ? <span>{toText(nodeConfig)}</span> : <span className="placeholder">请选择人员</span>}
+            {toText(modelValue) ? <span>{toText(modelValue)}</span> : <span className="placeholder">请选择</span>}
           </div>
         </div>
+
         <AddNode
-          modelValue={nodeConfig.childNode}
+          modelValue={modelValue?.childNode}
           onChange={(val) => {
-            nodeConfig.childNode = val;
-            onChange && onChange({ ...nodeConfig });
+            modelValue.childNode = val;
+            // 强制更新数据
+            onChange && onChange({ ...modelValue });
           }}
         ></AddNode>
 
         <Drawer
-          v-model="drawer"
-          open={drawer}
-          onClose={onDrawerClose}
-          destroyOnClose
-          getContainer="body"
           width={600}
           title={
             <div className="node-wrap-drawer-title">
@@ -132,65 +149,246 @@ export const Send = (props) => {
                 />
               ) : (
                 <div className="drawer-title">
-                  {form.nodeName || "抄送人设置"}
+                  {form.nodeName || "审批人设置"}
                   <EditOutlined className="node-wrap-drawer__title-edit" onClick={onEditTitle} />
                 </div>
               )}
             </div>
           }
+          open={drawer}
+          onClose={onDrawerClose}
+          destroyOnClose
+          getContainer="body"
           footer={
-            <>
+            <div className="approver-drawer-footer">
               <Button type="primary" onClick={onDrawerSave}>
                 保存
               </Button>
               <Button onClick={onDrawerClose}>取消</Button>
-            </>
+            </div>
           }
         >
-          <Form label-position="top" initialValues={form}>
-            <Form.Item label="选择要抄送的人员">
-              <Button
-                type="primary"
-                onClick={() => {
-                  selectorCtx.setSelectHandler(1, form.nodeAssigneeList, (selected) => {
-                    setForm((f) => {
-                      // 设置 人员、角色 列表数组
-                      f.nodeAssigneeList = selected;
-                      return { ...f };
-                    });
+          <Form
+            ref={formRef}
+            name="approverForm"
+            labelCol={{ span: 8 }}
+            wrapperCol={{ span: 16 }}
+            initialValues={form}
+            autoComplete="off"
+          >
+            <Form.Item label="审批人员类型" name="setType">
+              <Select
+                options={setTypeOptions}
+                value={form.setType}
+                onSelect={(val) => {
+                  setForm((f) => {
+                    // 清空 人员、角色 列表数组
+                    f.nodeAssigneeList = [];
+                    f.setType = val;
+                    return { ...f };
                   });
                 }}
-              >
-                选择人员
-              </Button>
-              <div className="tags-list">
-                {form.nodeAssigneeList?.map((it, idx) => {
-                  return (
-                    <Tag
-                      key={it.id ?? idx}
-                      className="node-assignee-item"
-                      closable
-                      onClose={() => {
-                        delUser(idx);
-                      }}
-                    >
-                      {it.name}
-                    </Tag>
-                  );
-                })}
-              </div>
+              />
             </Form.Item>
-            <Form.Item label="允许发起人自选抄送人">
+
+            {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>
+                <div className="tags-list">
+                  {form.nodeAssigneeList?.map((user, idx) => {
+                    return (
+                      <Tag
+                        key={user.id || idx}
+                        className="node-assignee-item"
+                        closable
+                        onClose={() => {
+                          onUserDel(idx);
+                        }}
+                      >
+                        {user.name}
+                      </Tag>
+                    );
+                  })}
+                </div>
+              </Form.Item>
+            ) : null}
+
+            {/* {form.setType === 2 ? (
+              <Form.Item label="指定主管" name="aaa">
+                发起人的第
+                <InputNumber
+                  min={1}
+                  value={form.examineLevel}
+                  onChange={(val) => {
+                    setForm((f) => {
+                      form.examineLevel = val;
+                      return { ...f };
+                    });
+                  }}
+                />
+                级主管
+              </Form.Item>
+            ) : null} */}
+
+            {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>
+                <div className="tags-list">
+                  {form.nodeAssigneeList?.map((it, idx) => {
+                    return (
+                      <Tag
+                        key={it.id || idx}
+                        className="node-assignee-item"
+                        closable
+                        onClose={() => {
+                          onRoleDel(idx);
+                        }}
+                      >
+                        {it.name}
+                      </Tag>
+                    );
+                  })}
+                </div>
+              </Form.Item>
+            ) : null}
+
+            {/* {form.setType === 4 ? (
+              <Form.Item label="指定主管" name="selectMode">
+                <Radio.Group
+                  options={selectModeOptions}
+                  value={form.selectMode}
+                  onChange={(e) => {
+                    setForm((f) => {
+                      form.selectMode = e.target.value;
+                      return { ...f };
+                    });
+                  }}
+                />
+              </Form.Item>
+            ) : null}
+
+            {form.setType === 7 ? (
+              <Form.Item label="指定主管" name="directorMode">
+                <Radio.Group
+                  options={directorModeOptions}
+                  value={form.directorMode}
+                  onChange={(e) => {
+                    setForm((f) => {
+                      form.directorMode = e.target.value;
+                      return { ...f };
+                    });
+                  }}
+                />
+              </Form.Item>
+            ) : null}
+
+            {form.directorMode === 1 ? (
+              <Form.Item label="直到发起人的第" name="directorLevel">
+                <InputNumber
+                  min={1}
+                  value={form.directorLevel}
+                  onChange={(val) => {
+                    setForm((f) => {
+                      form.directorLevel = val;
+                      return { ...f };
+                    });
+                  }}
+                />{" "}
+                级主管级主管
+              </Form.Item>
+            ) : null}
+
+            <Form.Item label="超时自动审批" name="termAuto">
               <Switch
-                checked={form.userSelectFlag}
+                checked={form.termAuto}
                 onChange={(val) => {
                   setForm((f) => {
-                    form.userSelectFlag = val;
+                    form.termAuto = val;
                     return { ...f };
                   });
                 }}
               ></Switch>
             </Form.Item>
+
+            {form.termAuto ? (
+              <>
+                <Form.Item label="审批期限（为 0 则不生效）" name="term">
+                  <InputNumber
+                    min={0}
+                    value={form.term}
+                    onChange={(val) => {
+                      setForm((f) => {
+                        form.term = val;
+                        return { ...f };
+                      });
+                    }}
+                  />
+                </Form.Item>
+                <Form.Item label="审批期限超时后执行" name="termMode">
+                  <Radio.Group
+                    options={termModeOptions}
+                    value={form.termMode}
+                    onChange={(e) => {
+                      setForm((f) => {
+                        form.termMode = e.target.value;
+                        return { ...f };
+                      });
+                    }}
+                  />
+                </Form.Item>
+              </>
+            ) : null}
+
+            <Form.Item label="多人审批时审批方式" name="examineMode">
+              <Radio.Group
+                options={examineModeOptions}
+                value={form.examineMode}
+                onChange={(e) => {
+                  setForm((f) => {
+                    form.examineMode = e.target.value;
+                    return { ...f };
+                  });
+                }}
+              />
+            </Form.Item> */}
           </Form>
         </Drawer>
       </div>
@@ -198,4 +396,4 @@ export const Send = (props) => {
   );
 };
 
-export default Send;
+export default Approver;

package/src/components/NodeWrap/Nodes/Send/options.ts

@@ -0,0 +1,45 @@
+/**
+ * 审批人员类型
+ */
+export const setTypeOptions = [
+  { label: "指定成员", value: 1 },
+  { label: "部门经理", value: 2 },
+  { label: "角色", value: 3 },
+  // { label: "发起人自选", value: 4 },
+  // { label: "发起人自己", value: 5 },
+  // { label: "连续多级主管", value: 7 },
+  { label: "驻点队长", value: 9 },
+];
+
+/**
+ * 发起人自选
+ */
+export const selectModeOptions = [
+  { label: "自选一个人", value: 1 },
+  { label: "自选多个人", value: 2 },
+];
+
+/**
+ * 连续主管审批终点
+ */
+export const directorModeOptions = [
+  { label: "直到最上层主管", value: 0 },
+  { label: "自定义审批终点", value: 1 },
+];
+
+/**
+ * 审批期限超时后执行
+ */
+export const termModeOptions = [
+  { label: "自动通过", value: 0 },
+  { label: "自动拒绝", value: 1 },
+];
+
+/**
+ * 多人审批时审批方式
+ */
+export const examineModeOptions = [
+  { label: "按顺序依次审批", value: 1 },
+  { label: "会签 (可同时审批，每个人必须审批通过)", value: 2 },
+  { label: "或签 (有一人审批通过即可)", value: 3 },
+];

package/src/components/Selector/SelectContext.tsx

@@ -5,13 +5,16 @@ export interface ISelectHandlerI {
   open: boolean;
   /** 选择类型 */
   type: number;
+  /** 抽屉选择类型 */
+  drawerType: number;
+
   /** 已选中的数据 */
   value: [];
   /** 选中保存回调 */
   onSave: (selected) => void;
-  listModel,
-  treeModel,
-  roleListModel,
+  roleListConfig,
+  listConfig,
+  initiatorListConfig,
 }
 
 /**
@@ -21,12 +24,13 @@ export const SelectContext = createContext({
   selectHandler: {
     open: false,
     type: undefined,
+    drawerType: undefined,
     value: [],
-    onSave: (s) => {},
-    listModel:undefined,
-    treeModel:undefined,
-    roleListModel:undefined
+    onSave: (s) => { },
+    roleListConfig: {},
+    listConfig: {},
+    initiatorListConfig: {},
   },
-  setSelectHandler(type, value, onSave) {},
-  onClose() {},
+  setSelectHandler(type, value, onSave, drawerType) { },
+  onClose() { },
 });