@hzab/flowlong-designer 0.0.1

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

@@ -0,0 +1,385 @@
+import { useRef, useState, useContext } from "react";
+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 Approver = (props) => {
+  const { modelValue = {}, onChange } = props;
+  const [form, setForm] = useState({
+    nodeName: "",
+    setType: undefined,
+    nodeAssigneeList: [],
+    directorMode: undefined,
+    termAuto: false,
+    examineLevel: undefined,
+    selectMode: undefined,
+    directorLevel: undefined,
+    term: undefined,
+    termMode: undefined,
+    examineMode: undefined,
+  });
+  const [drawer, setDrawer] = useState(false);
+  const [isEditTitle, setIsEditTitle] = useState(false);
+
+  const selectorCtx = useContext(SelectContext);
+
+  const formRef = useRef();
+  const nodeTitleRef = useRef();
+
+  function onShow() {
+    setDrawer(true);
+    setForm(JSON.parse(JSON.stringify(modelValue)));
+  }
+
+  function onNodeDel(e) {
+    e.stopPropagation();
+    onChange && onChange(modelValue.childNode);
+  }
+
+  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}级主管`;
+    } 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 "连续多级主管";
+    }
+  }
+
+  function onSaveTitle(e) {
+    setForm((f) => {
+      // @ts-ignore
+      f.nodeName = nodeTitleRef.current?.input?.value;
+      return { ...f };
+    });
+    setIsEditTitle(false);
+  }
+  function onEditTitle() {
+    setIsEditTitle(true);
+    if (nodeTitleRef.current) {
+      // @ts-ignore
+      nodeTitleRef.current?.focus();
+    }
+  }
+
+  function onDrawerSave() {
+    // 强制更新数据
+    onChange && onChange(form);
+    onDrawerClose();
+  }
+
+  function onDrawerClose() {
+    setDrawer(false);
+  }
+
+  function onUserDel(idx) {
+    setForm((f) => {
+      f.nodeAssigneeList.splice(idx, 1);
+      return { ...f };
+    });
+  }
+
+  function onRoleDel(idx) {
+    setForm((f) => {
+      f.nodeAssigneeList.splice(idx, 1);
+      return { ...f };
+    });
+  }
+
+  return (
+    <div className="approver-wrap">
+      <div className="node-wrap">
+        <div className="node-wrap-box" onClick={onShow}>
+          <div className="title" style={{ background: "#ff943e" }}>
+            <UserOutlined />
+            <span>{modelValue?.nodeName}</span>
+            <DeleteOutlined className="node-close-btn" onClick={onNodeDel} />
+          </div>
+          <div className="content">
+            {toText(modelValue) ? <span>{toText(modelValue)}</span> : <span className="placeholder">请选择</span>}
+          </div>
+        </div>
+
+        <AddNode
+          modelValue={modelValue?.childNode}
+          onChange={(val) => {
+            modelValue.childNode = val;
+            // 强制更新数据
+            onChange && onChange({ ...modelValue });
+          }}
+        ></AddNode>
+
+        <Drawer
+          width={600}
+          title={
+            <div className="node-wrap-drawer-title">
+              {isEditTitle ? (
+                <Input
+                  ref={nodeTitleRef}
+                  autoFocus
+                  defaultValue={form.nodeName}
+                  onBlur={onSaveTitle}
+                  onPressEnter={onSaveTitle}
+                />
+              ) : (
+                <div className="drawer-title">
+                  {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
+            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 };
+                  });
+                }}
+              />
+            </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 };
+                      });
+                    })
+                  }
+                >
+                  选择人员
+                </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 };
+                      });
+                    })
+                  }
+                >
+                  选择角色
+                </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.termAuto}
+                onChange={(val) => {
+                  setForm((f) => {
+                    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>
+    </div>
+  );
+};
+
+export default Approver;

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

@@ -0,0 +1,44 @@
+/**
+ * 审批人员类型
+ */
+export const setTypeOptions = [
+  { label: "指定成员", value: 1 },
+  { label: "主管", value: 2 },
+  { label: "角色", value: 3 },
+  { label: "发起人自选", value: 4 },
+  { label: "发起人自己", value: 5 },
+  { label: "连续多级主管", value: 7 },
+];
+
+/**
+ * 发起人自选
+ */
+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 },
+];