@hzab/flowlong-designer 0.0.1

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

@@ -0,0 +1,319 @@
+.branch-wrap {
+  .branch-box .add-branch {
+    background: var(--el-bg-color);
+  }
+  .branch-wrap {
+    display: inline-flex;
+    width: 100%;
+  }
+  .branch-box-wrap {
+    display: flex;
+    flex-flow: column wrap;
+    align-items: center;
+    min-height: 270px;
+    width: 100%;
+    flex-shrink: 0;
+  }
+  .col-box {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+  }
+  .branch-box {
+    display: flex;
+    overflow: visible;
+    min-height: 180px;
+    height: auto;
+    border-bottom: 2px solid #ccc;
+    border-top: 2px solid #ccc;
+    position: relative;
+    margin-top: 15px;
+  }
+  .branch-box .col-box::before {
+    content: "";
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    z-index: 0;
+    margin: auto;
+    width: 2px;
+    height: 100%;
+    background-color: rgb(202, 202, 202);
+  }
+  .condition-node {
+    display: inline-flex;
+    flex-direction: column;
+    min-height: 220px;
+  }
+  .condition-node-box {
+    padding-top: 30px;
+    padding-right: 50px;
+    padding-left: 50px;
+    justify-content: center;
+    align-items: center;
+    flex-grow: 1;
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+  }
+  .condition-node-box::before {
+    content: "";
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    margin: auto;
+    width: 2px;
+    height: 100%;
+    background-color: rgb(202, 202, 202);
+  }
+  .auto-judge {
+    position: relative;
+    width: 220px;
+    min-height: 72px;
+    background: rgb(255, 255, 255);
+    border-radius: 4px;
+    padding: 15px 15px;
+    cursor: pointer;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
+  }
+  .auto-judge::before {
+    content: "";
+    position: absolute;
+    top: -12px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0px;
+    border-style: solid;
+    border-width: 8px 6px 4px;
+    border-color: rgb(202, 202, 202) transparent transparent;
+    background: rgb(239, 239, 239);
+  }
+  .auto-judge .title {
+    line-height: 16px;
+  }
+  .auto-judge .title .node-title {
+    color: #15bc83;
+  }
+  .auto-judge .title .delete-btn {
+    font-size: 15px;
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    color: #999;
+    display: none;
+  }
+  .auto-judge .title .priority-title {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    color: #999;
+  }
+  .auto-judge .content {
+    position: relative;
+    padding-top: 15px;
+  }
+  .auto-judge .content .placeholder {
+    color: #999;
+  }
+  .auto-judge:hover {
+    .delete-btn {
+      display: block;
+    }
+    .priority-title {
+      display: none;
+    }
+  }
+  .auto-judge:hover {
+    .sort-left {
+      display: flex;
+    }
+    .sort-right {
+      display: flex;
+    }
+  }
+  .auto-judge .sort-left {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 1;
+    left: 0;
+    display: none;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+  .auto-judge .sort-right {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 1;
+    right: 0;
+    display: none;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+  .auto-judge .sort-left:hover,
+  .auto-judge .sort-right:hover {
+    background: #eee;
+  }
+  .auto-judge:after {
+    pointer-events: none;
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 2;
+    border-radius: 4px;
+    transition: all 0.1s;
+  }
+  .auto-judge:hover:after {
+    border: 1px solid #3296fa;
+    box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
+  }
+  .top-left-cover-line,
+  .top-right-cover-line {
+    position: absolute;
+    height: 3px;
+    width: 50%;
+    background-color: #fff;
+    top: -2px;
+  }
+  .bottom-left-cover-line,
+  .bottom-right-cover-line {
+    position: absolute;
+    height: 3px;
+    width: 50%;
+    background-color: #fff;
+    bottom: -2px;
+  }
+  .top-left-cover-line {
+    left: -1px;
+  }
+  .top-right-cover-line {
+    right: -1px;
+  }
+  .bottom-left-cover-line {
+    left: -1px;
+  }
+  .bottom-right-cover-line {
+    right: -1px;
+  }
+}
+
+.branch-drawer {
+  .top-tips {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+    color: #646a73;
+  }
+
+  .or-branch-link-tip {
+    margin: 10px 0;
+    color: #646a73;
+  }
+
+  .condition-group-editor {
+    user-select: none;
+    border-radius: 4px;
+    border: 1px solid #e4e5e7;
+    position: relative;
+    margin-bottom: 16px;
+
+    .branch-delete-icon {
+      font-size: 18px;
+    }
+
+    .header {
+      background-color: #f4f6f8;
+      padding: 0 12px;
+      font-size: 14px;
+      color: #171e31;
+      height: 36px;
+      display: flex;
+      align-items: center;
+
+      span {
+        flex: 1;
+      }
+    }
+
+    .main-content {
+      padding: 0 12px;
+
+      .condition-relation {
+        color: #9ca2a9;
+        display: flex;
+        align-items: center;
+        height: 36px;
+        display: flex;
+        justify-content: space-between;
+        padding: 0 2px;
+      }
+
+      .condition-content-box {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        div {
+          width: 100%;
+          min-width: 120px;
+        }
+
+        div:not(:first-child) {
+          margin-left: 16px;
+        }
+      }
+
+      .cell-box {
+        div {
+          padding: 16px 0;
+          width: 100%;
+          min-width: 120px;
+          color: #909399;
+          font-size: 14px;
+          font-weight: 600;
+          text-align: center;
+        }
+      }
+
+      .condition-content {
+        display: flex;
+        flex-direction: column;
+
+        :deep(.el-input__wrapper) {
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        }
+
+        .content {
+          flex: 1;
+          padding: 0 0 4px 0;
+          display: flex;
+          align-items: center;
+          min-height: 31.6px;
+          flex-wrap: wrap;
+        }
+      }
+    }
+
+    .sub-content {
+      padding: 12px;
+    }
+  }
+  .ant-drawer-footer {
+    .ant-btn + .ant-btn {
+      margin-left: 12px;
+    }
+  }
+}

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

@@ -0,0 +1,387 @@
+import { useRef, useState } from "react";
+import { Drawer, Button, Input, Select } from "antd";
+import { LeftOutlined, DeleteOutlined, RightOutlined, EditOutlined } from "@ant-design/icons";
+
+import AddNode from "../AddNode";
+
+import "./index.less";
+
+/**
+ * 操作符选项列表
+ */
+export const operatorOptions = [
+  { label: "等于", value: "==" },
+  { label: "不等于", value: "!=" },
+  { label: "大于", value: ">" },
+  { label: "大于等于", value: ">=" },
+  { label: "小于", value: "<" },
+  { label: "小于等于", value: "<=" },
+  { label: "包含", value: "include" },
+  { label: "不包含", value: "notinclude" },
+];
+
+export const Branch = (props) => {
+  const { modelValue: nodeConfig, onChange, ItemSlot } = 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,
+    conditionList: [],
+  });
+  const [drawer, setDrawer] = useState(false);
+  const [isEditTitle, setIsEditTitle] = useState(false);
+  const curIdxRef = useRef(-1);
+
+  const nodeTitleRef = useRef();
+
+  function onTermAdd() {
+    if (!nodeConfig.conditionNodes) {
+      nodeConfig.conditionNodes = [];
+    }
+    let len = nodeConfig.conditionNodes?.length + 1;
+    nodeConfig.conditionNodes?.push({
+      nodeName: "条件" + len,
+      type: 3,
+      priorityLevel: len,
+      conditionMode: 1,
+      conditionList: [],
+    });
+    onChange && onChange({ ...nodeConfig });
+  }
+  function onShow(idx) {
+    curIdxRef.current = idx;
+    setForm(JSON.parse(JSON.stringify(nodeConfig.conditionNodes[idx])));
+    setDrawer(true);
+  }
+  function arrTransfer(idx, type = 1) {
+    nodeConfig.conditionNodes[idx] = nodeConfig.conditionNodes?.splice(
+      idx + type,
+      1,
+      nodeConfig.conditionNodes[idx],
+    )[0];
+    nodeConfig.conditionNodes?.map((item, index) => {
+      item.priorityLevel = index + 1;
+    });
+    onChange && onChange({ ...nodeConfig });
+  }
+  function onTermDel(idx) {
+    nodeConfig.conditionNodes?.splice(idx, 1);
+    if (nodeConfig.conditionNodes?.length == 1) {
+      if (nodeConfig.childNode) {
+        if (nodeConfig.conditionNodes[0].childNode) {
+          this.reData(nodeConfig.conditionNodes[0].childNode, nodeConfig.childNode);
+        } else {
+          nodeConfig.conditionNodes[0].childNode = nodeConfig.childNode;
+        }
+      }
+      onChange && onChange({ ...nodeConfig });
+    }
+  }
+  function toText(nodeConfig, idx) {
+    var { conditionList } = nodeConfig.conditionNodes[idx];
+    if (conditionList && conditionList.length == 1) {
+      const text = conditionList
+        .map((conditionGroup) => conditionGroup.map((item) => `${item.label}${item.operator}${item.value}`))
+        .join(" 和 ");
+      return text;
+    } else if (conditionList && conditionList.length > 1) {
+      return conditionList.length + "个条件，或满足";
+    } else {
+      if (idx == nodeConfig.conditionNodes?.length - 1) {
+        return "其他条件进入此流程";
+      } else {
+        return false;
+      }
+    }
+  }
+  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({ ...nodeConfig });
+    onDrawerClose();
+  }
+
+  /**
+   * 添加条件组
+   */
+  function onConditionGroupAdd() {
+    onConditionAdd(form.conditionList[form.conditionList.push([]) - 1]);
+  }
+
+  /**
+   * 添加条件
+   * @param conditionList
+   */
+  function onConditionAdd(conditionList) {
+    conditionList.push({
+      label: "",
+      field: "",
+      operator: "=",
+      value: "",
+    });
+    // 更新数据
+    setForm((f) => ({ ...f }));
+  }
+
+  function deleteConditionGroup(idx) {
+    form.conditionList.splice(idx, 1);
+    setForm((f) => ({ ...f }));
+  }
+  function deleteConditionList(conditionList, idx) {
+    conditionList.splice(idx, 1);
+    setForm((f) => ({ ...f }));
+  }
+
+  return (
+    <div className="branch-wrap">
+      <div className="branch-box-wrap">
+        <div className="branch-box">
+          <Button className="add-branch" onClick={onTermAdd}>
+            添加条件
+          </Button>
+          {nodeConfig?.conditionNodes?.map((item, idx) => {
+            return (
+              <div className="col-box" key={idx}>
+                <div className="condition-node">
+                  <div className="condition-node-box">
+                    <div
+                      className="auto-judge"
+                      onClick={() => {
+                        onShow(idx);
+                      }}
+                    >
+                      {idx != 0 ? (
+                        <div
+                          className="sort-left"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            arrTransfer(idx, -1);
+                          }}
+                        >
+                          <LeftOutlined />
+                        </div>
+                      ) : null}
+                      <div className="title">
+                        <span className="node-title">{item.nodeName}</span>
+                        <span className="priority-title">优先级{item.priorityLevel}</span>
+
+                        <DeleteOutlined
+                          className="delete-btn"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            onTermDel(idx);
+                          }}
+                        />
+                      </div>
+                      <div className="content">
+                        {toText(nodeConfig, idx) ? (
+                          <span>{toText(nodeConfig, idx)}</span>
+                        ) : (
+                          <span className="placeholder">请设置条件</span>
+                        )}
+                      </div>
+                      {idx != nodeConfig.conditionNodes?.length - 1 ? (
+                        <div
+                          className="sort-right"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            arrTransfer(idx);
+                          }}
+                        >
+                          <RightOutlined />
+                        </div>
+                      ) : null}
+                    </div>
+                    <AddNode
+                      modelValue={item.childNode}
+                      onChange={(val) => {
+                        item.childNode = val;
+                        // 更新数据
+                        setForm((f) => ({ ...f }));
+                      }}
+                    ></AddNode>
+                  </div>
+                </div>
+                {item.childNode && ItemSlot ? (
+                  <ItemSlot
+                    modelValue={item}
+                    onChange={(val) => {
+                      // 数据保存到指定对象中
+                      if (nodeConfig?.conditionNodes[idx]) {
+                        nodeConfig.conditionNodes[idx].childNode = val?.childNode;
+                      }
+                      onChange && onChange({ ...nodeConfig });
+                    }}
+                  />
+                ) : null}
+                {idx == 0 ? <div className="top-left-cover-line"></div> : null}
+                {idx == 0 ? <div className="bottom-left-cover-line"></div> : null}
+                {idx == nodeConfig.conditionNodes?.length - 1 ? <div className="top-right-cover-line"></div> : null}
+                {idx == nodeConfig.conditionNodes?.length - 1 ? <div className="bottom-right-cover-line"></div> : null}
+              </div>
+            );
+          })}
+        </div>
+        <AddNode
+          modelValue={nodeConfig.childNode}
+          onChange={(val) => {
+            nodeConfig.childNode = val;
+            onChange && onChange({ ...nodeConfig });
+          }}
+        ></AddNode>
+      </div>
+
+      <Drawer
+        className={"branch-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>
+          </>
+        }
+      >
+        <div className="top-tips">满足以下条件时进入当前分支</div>
+        {form?.conditionList?.map((conditionGroup, conditionGroupIdx) => {
+          return (
+            <div key={conditionGroupIdx}>
+              {conditionGroupIdx != 0 ? <div className="or-branch-link-tip">或满足</div> : null}
+              <div className="condition-group-editor">
+                <div className="header">
+                  <span>条件组 {conditionGroupIdx + 1}</span>
+                  <div
+                    onClick={() => {
+                      deleteConditionGroup(conditionGroupIdx);
+                    }}
+                  >
+                    <DeleteOutlined className="branch-delete-icon" />
+                  </div>
+                </div>
+
+                <div className="main-content">
+                  {/* <!-- 单个条件 --> */}
+                  <div className="condition-content-box cell-box">
+                    <div>描述</div>
+                    <div>条件字段</div>
+                    <div>运算符</div>
+                    <div>值</div>
+                  </div>
+                  {conditionGroup?.map((condition, idx) => {
+                    return (
+                      <div className="condition-content" key={idx}>
+                        <div className="condition-relation">
+                          <span>{idx == 0 ? "当" : "且"}</span>
+                          <div onClick={() => deleteConditionList(conditionGroup, idx)}>
+                            <DeleteOutlined className="branch-delete-icon" />
+                          </div>
+                        </div>
+                        <div className="condition-content">
+                          <div className="condition-content-box">
+                            <Input
+                              value={condition.label}
+                              onChange={(e) => {
+                                condition.label = e.target.value;
+                                // 更新数据
+                                setForm((f) => ({ ...f }));
+                              }}
+                              placeholder="描述"
+                            />
+                            <Input
+                              value={condition.field}
+                              onChange={(e) => {
+                                condition.field = e.target.value;
+                                // 更新数据
+                                setForm((f) => ({ ...f }));
+                              }}
+                              placeholder="条件字段"
+                            />
+                            <Select
+                              value={condition.operator}
+                              onChange={(val) => {
+                                condition.operator = val;
+                              }}
+                              placeholder="请选择"
+                              options={operatorOptions}
+                            ></Select>
+                            <Input
+                              value={condition.value}
+                              onChange={(e) => {
+                                condition.value = e.target.value;
+                                // 更新数据
+                                setForm((f) => ({ ...f }));
+                              }}
+                              placeholder="值"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+                <div className="sub-content">
+                  <Button type="primary" onClick={() => onConditionAdd(conditionGroup)}>
+                    添加条件
+                  </Button>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+        <Button onClick={onConditionGroupAdd}>添加条件组</Button>
+      </Drawer>
+    </div>
+  );
+};
+
+export default Branch;

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

@@ -0,0 +1,10 @@
+.promoter-wrap {
+  .start-node {
+    .title {
+      background-color: #576a95;
+    }
+  }
+}
+
+.promoter-drawer {
+}