@hzab/flowlong-designer 0.0.1

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

@@ -0,0 +1,178 @@
+import { useRef, useState, useContext } from "react";
+import { Drawer, Button, Input, Form, Alert, Tag } from "antd";
+import { UserOutlined, EditOutlined } from "@ant-design/icons";
+
+import AddNode from "../AddNode";
+import { SelectContext } from "../../../Selector/SelectContext";
+
+import "./index.less";
+
+export const Promoter = (props) => {
+  const selectorCtx = useContext(SelectContext);
+  const { modelValue: nodeConfig = {}, onChange } = props;
+
+  const [drawer, setDrawer] = useState(false);
+  const [isEditTitle, setIsEditTitle] = useState(false);
+
+  const [form, setForm] = useState({
+    nodeName: "",
+    setType: undefined,
+    nodeAssigneeList: [],
+    directorMode: undefined,
+    termAuto: false,
+    examineLevel: undefined,
+    selectMode: undefined,
+    directorLevel: undefined,
+    term: undefined,
+    termMode: undefined,
+    examineMode: undefined,
+    conditionList: [],
+  });
+
+  const nodeTitleRef = useRef();
+
+  function onShow() {
+    setForm(JSON.parse(JSON.stringify(nodeConfig)));
+    setIsEditTitle(false);
+    setDrawer(true);
+  }
+
+  function toText(nodeConfig) {
+    if (nodeConfig.nodeAssigneeList && nodeConfig.nodeAssigneeList.length > 0) {
+      return nodeConfig.nodeAssigneeList.map((item) => item.name).join("、");
+    } else {
+      return "所有人";
+    }
+  }
+
+  function onEditTitle() {
+    setIsEditTitle(true);
+    if (nodeTitleRef.current) {
+      // @ts-ignore
+      nodeTitleRef.current?.focus();
+    }
+  }
+  function onSaveTitle(e) {
+    setForm((f) => {
+      // @ts-ignore
+      f.nodeName = nodeTitleRef.current?.input?.value;
+      return { ...f };
+    });
+    setIsEditTitle(false);
+  }
+
+  function onDrawerClose() {
+    setDrawer(false);
+  }
+
+  function onDrawerSave() {
+    // nodeConfig.conditionNodes[curIdxRef.current] = form;
+    onChange && onChange({ ...form });
+    onDrawerClose();
+  }
+
+  function onRoleDel(idx) {
+    setForm((f) => {
+      f.nodeAssigneeList.splice(idx, 1);
+      return { ...f };
+    });
+  }
+
+  return (
+    <div className="promoter-wrap">
+      <div className="node-wrap">
+        <div className="node-wrap-box start-node" onClick={onShow}>
+          <div className="title">
+            <UserOutlined className="icon" />
+            <span>{nodeConfig.nodeName}</span>
+          </div>
+          <div className="content">
+            <span>{toText(nodeConfig)}</span>
+          </div>
+        </div>
+        <AddNode
+          modelValue={nodeConfig.childNode}
+          onChange={(val) => {
+            nodeConfig.childNode = val;
+            onChange && onChange({ ...nodeConfig });
+          }}
+        ></AddNode>
+
+        <Drawer
+          className={"promoter-drawer"}
+          open={drawer}
+          onClose={onDrawerClose}
+          destroyOnClose
+          getContainer="body"
+          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>
+          }
+          footer={
+            <>
+              <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 };
+                    });
+                  })
+                }
+              >
+                选择角色
+              </Button>
+              <div className="tags-list">
+                {form.nodeAssigneeList?.map((it, idx) => {
+                  return (
+                    <Tag
+                      key={idx}
+                      className="node-assignee-item"
+                      closable
+                      onClose={() => {
+                        onRoleDel(idx);
+                      }}
+                    >
+                      {it.name}
+                    </Tag>
+                  );
+                })}
+              </div>
+            </Form.Item>
+          </Form>
+          {!form.nodeAssigneeList || form.nodeAssigneeList?.length <= 0 ? (
+            <Alert message="不指定则默认所有人都可发起此审批" type="info" />
+          ) : null}
+        </Drawer>
+      </div>
+    </div>
+  );
+};
+
+export default Promoter;

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

@@ -0,0 +1,7 @@
+.send {
+  .node-wrap-box {
+    .title {
+      background-color: #3296fa;
+    }
+  }
+}

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

@@ -0,0 +1,201 @@
+import { useRef, useState, useContext } from "react";
+import { Drawer, Button, Input, Form, Tag, Switch } from "antd";
+import { EditOutlined, SendOutlined, DeleteOutlined } from "@ant-design/icons";
+
+import AddNode from "../AddNode";
+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);
+
+  const [form, setForm] = useState({
+    nodeName: "",
+    setType: undefined,
+    nodeAssigneeList: [],
+    directorMode: undefined,
+    termAuto: false,
+    examineLevel: undefined,
+    selectMode: undefined,
+    directorLevel: undefined,
+    term: undefined,
+    termMode: undefined,
+    examineMode: undefined,
+    conditionList: [],
+    userSelectFlag: undefined,
+  });
+
+  const nodeTitleRef = useRef();
+
+  function onShow() {
+    setForm(JSON.parse(JSON.stringify(nodeConfig)));
+    setIsEditTitle(false);
+    setDrawer(true);
+  }
+
+  function onDrawerClose() {
+    setDrawer(false);
+  }
+
+  function onEditTitle() {
+    setIsEditTitle(true);
+    if (nodeTitleRef.current) {
+      // @ts-ignore
+      nodeTitleRef.current?.focus();
+    }
+  }
+  function onSaveTitle(e) {
+    setForm((f) => {
+      // @ts-ignore
+      f.nodeName = nodeTitleRef.current?.input?.value;
+      return { ...f };
+    });
+    setIsEditTitle(false);
+  }
+
+  function onDrawerSave() {
+    // nodeConfig.conditionNodes[curIdxRef.current] = form;
+    onChange && onChange({ ...form });
+    onDrawerClose();
+  }
+
+  function delNode() {
+    onChange && onChange({ ...nodeConfig.childNode });
+  }
+
+  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 delUser(index) {
+    form.nodeAssigneeList.splice(index, 1);
+    setForm((f) => ({ ...f }));
+  }
+
+  return (
+    <div className="send">
+      <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>
+          <div className="content">
+            {toText(nodeConfig) ? <span>{toText(nodeConfig)}</span> : <span className="placeholder">请选择人员</span>}
+          </div>
+        </div>
+        <AddNode
+          modelValue={nodeConfig.childNode}
+          onChange={(val) => {
+            nodeConfig.childNode = val;
+            onChange && onChange({ ...nodeConfig });
+          }}
+        ></AddNode>
+
+        <Drawer
+          v-model="drawer"
+          open={drawer}
+          onClose={onDrawerClose}
+          destroyOnClose
+          getContainer="body"
+          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>
+          }
+          footer={
+            <>
+              <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(1, 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={() => {
+                        delUser(idx);
+                      }}
+                    >
+                      {it.name}
+                    </Tag>
+                  );
+                })}
+              </div>
+            </Form.Item>
+            <Form.Item label="允许发起人自选抄送人">
+              <Switch
+                checked={form.userSelectFlag}
+                onChange={(val) => {
+                  setForm((f) => {
+                    form.userSelectFlag = val;
+                    return { ...f };
+                  });
+                }}
+              ></Switch>
+            </Form.Item>
+          </Form>
+        </Drawer>
+      </div>
+    </div>
+  );
+};
+
+export default Send;

package/src/components/NodeWrap/index.less

@@ -0,0 +1,29 @@
+.dark .sc-workflow-design {
+  .node-wrap-box,
+  .auto-judge {
+    background: #2b2b2b;
+  }
+  .col-box {
+    background: var(--el-bg-color);
+  }
+  .top-left-cover-line,
+  .top-right-cover-line,
+  .bottom-left-cover-line,
+  .bottom-right-cover-line {
+    background-color: var(--el-bg-color);
+  }
+  .node-wrap-box::before,
+  .auto-judge::before {
+    background-color: var(--el-bg-color);
+  }
+  .branch-box .add-branch {
+    background: var(--el-bg-color);
+  }
+  .end-node .end-node-text {
+    color: #ccc;
+  }
+  .auto-judge .sort-left:hover,
+  .auto-judge .sort-right:hover {
+    background: var(--el-bg-color);
+  }
+}

package/src/components/NodeWrap/index.tsx

@@ -0,0 +1,30 @@
+import Promoter from "./Nodes/Promoter";
+import Approver from "./Nodes/Approver";
+import Send from "./Nodes/Send";
+import Branch from "./Nodes/Branch";
+
+export const NodeWrap = (props) => {
+  const { modelValue: nodeConfig, onChange } = props;
+  return (
+    <div className="node-wrap">
+      {nodeConfig.type == 0 ? <Promoter modelValue={nodeConfig} onChange={onChange}></Promoter> : null}
+
+      {nodeConfig.type == 1 ? <Approver modelValue={nodeConfig} onChange={onChange}></Approver> : null}
+
+      {nodeConfig.type == 2 ? <Send modelValue={nodeConfig} onChange={onChange}></Send> : null}
+      {nodeConfig.type == 4 ? <Branch modelValue={nodeConfig} onChange={onChange} ItemSlot={NodeWrap}></Branch> : null}
+
+      {nodeConfig.childNode ? (
+        <NodeWrap
+          modelValue={nodeConfig.childNode}
+          onChange={(val) => {
+            nodeConfig.childNode = val;
+            onChange && onChange(nodeConfig);
+          }}
+        ></NodeWrap>
+      ) : null}
+    </div>
+  );
+};
+
+export default NodeWrap;

package/src/components/ScWorkflow/index.tsx

@@ -0,0 +1,23 @@
+import { useRef, useState } from "react";
+
+import NodeWrap from "../NodeWrap";
+import Selector from "../Selector";
+
+export const ScWorkflow = (props) => {
+  const { modelValue: nodeConfig, onChange } = props;
+
+  return (
+    <div className="sc-workflow-design">
+      <div className="box-scale">
+        {nodeConfig ? <NodeWrap modelValue={nodeConfig} onChange={onChange}></NodeWrap> : null}
+        <div className="end-node">
+          <div className="end-node-circle"></div>
+          <div className="end-node-text">流程结束</div>
+        </div>
+      </div>
+      <Selector />
+    </div>
+  );
+};
+
+export default ScWorkflow;

package/src/components/Selector/SelectContext.tsx

@@ -0,0 +1,32 @@
+import { createContext } from "react";
+
+export interface ISelectHandlerI {
+  /** 弹窗展示 */
+  open: boolean;
+  /** 选择类型 */
+  type: number;
+  /** 已选中的数据 */
+  value: [];
+  /** 选中保存回调 */
+  onSave: (selected) => void;
+  listModel,
+  treeModel,
+  roleListModel,
+}
+
+/**
+ * 选择组件 context
+ */
+export const SelectContext = createContext({
+  selectHandler: {
+    open: false,
+    type: undefined,
+    value: [],
+    onSave: (s) => {},
+    listModel:undefined,
+    treeModel:undefined,
+    roleListModel:undefined
+  },
+  setSelectHandler(type, value, onSave) {},
+  onClose() {},
+});

package/src/components/Selector/index.less

@@ -0,0 +1,139 @@
+.selector-modal {
+  --border-color-light: #ccc;
+  .sc-user-select {
+    display: flex;
+  }
+  .sc-user-select__left {
+    // width: 400px;
+  }
+  .sc-user-select__right {
+    flex: 1;
+  }
+
+  .sc-user-select__search {
+    padding-bottom: 10px;
+  }
+
+  .sc-user-select__select {
+    display: flex;
+    border: 1px solid var(--border-color-light);
+    background: var(--el-color-white);
+  }
+  .sc-user-select__tree {
+    width: 200px;
+    height: 300px;
+    border-right: 1px solid var(--border-color-light);
+    overflow: auto;
+  }
+  .sc-user-select__user {
+    // width: 200px;
+    flex: 1;
+    height: 300px;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+  }
+  .sc-user-select__user__list {
+    flex: 1;
+    overflow: auto;
+    .sc-user-select__user__item {
+      display: flex;
+      align-items: center;
+      padding: 5px 20px;
+      cursor: pointer;
+      &.active {
+        background: var(--el-color-primary-light-9);
+      }
+    }
+  }
+  .sc-user-select__user footer {
+    height: 36px;
+    padding-top: 5px;
+    border-top: 1px solid var(--border-color-light);
+  }
+
+  .sc-user-select__toicon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 10px;
+  }
+  .sc-user-select__toicon i {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #ccc;
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    line-height: 20px;
+    border-radius: 50%;
+    color: #fff;
+  }
+
+  .sc-user-select__selected {
+    height: 345px;
+    width: 200px;
+    border: 1px solid var(--border-color-light);
+    background: var(--el-color-white);
+  }
+
+  .sc-user-select__selected header {
+    height: 43px;
+    line-height: 43px;
+    border-bottom: 1px solid var(--border-color-light);
+    padding: 0 15px;
+    font-size: 12px;
+  }
+  .sc-user-select__selected ul {
+    height: 300px;
+    overflow: auto;
+    padding-left: 0;
+  }
+  .sc-user-select__selected li {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px 5px 5px 15px;
+    height: 38px;
+  }
+  .sc-user-select__selected li .name {
+    display: flex;
+    align-items: center;
+    .ant-avatar{
+      margin-right: 10px;
+    }
+  }
+  .sc-user-select__selected li .name .el-avatar {
+    background: #409eff;
+    margin-right: 10px;
+  }
+  .sc-user-select__selected li .name label {
+  }
+  .sc-user-select__selected li .delete {
+    display: none;
+  }
+  .sc-user-select__selected li:hover {
+    background: var(--el-color-primary-light-9);
+  }
+  .sc-user-select__selected li:hover .delete {
+    display: inline-block;
+  }
+
+  .sc-user-select-role .sc-user-select__left {
+    width: 200px;
+  }
+  .sc-user-select-role .sc-user-select__tree {
+    border: none;
+    height: 343px;
+  }
+  .sc-user-select-role .sc-user-select__selected {
+  }
+
+  [data-theme="dark"] .sc-user-select__selected li:hover {
+    background: rgba(0, 0, 0, 0.2);
+  }
+  [data-theme="dark"] .sc-user-select__toicon i {
+    background: #383838;
+  }
+}