@hzab/flowlong-designer 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,2 @@
+# @hzab/flowlong-designer@0.0.1
+组件初始化

package/README.md

@@ -0,0 +1,67 @@
+# @hzab/flowlong-designer
+
+组件模板
+
+- node@16.16.0
+
+- 注意：首次克隆先执行 npm run prepare 命令
+
+# 组件
+
+## 示例
+
+```jsx
+import Demo from "@hzab/flowlong-designer";
+
+<Demo />;
+```
+
+## API
+
+### InfoPanel Attributes
+
+| 参数   | 类型   | 必填 | 默认值 | 说明              |
+| ------ | ------ | ---- | ------ | ----------------- |
+| schema | Object | 是   | -      | 数据信息的 schema |
+
+# 组件开发流程
+
+- 在 config/webpack.config.js 中按需修改 library 配置的文件名
+- 在 config/webpack.config.js 中按需修改 alias 配置的包名，便于本地调试
+- 在 tsconfig.json 中按需修改 paths 配置的包名，解决 ts 报错问题
+- npm run dev
+
+## 文件目录
+
+- example 本地开发测试代码
+- src 组件源码
+
+## 命令
+
+- Mac 执行该命令，设置 pre-commit 为可执行文件
+
+  - npm run mac-chmod
+  - chmod +x .husky && chmod +x .husky/pre-commit
+
+- 生成文档：npm run docs
+- 本地运行：npm run dev
+- 打包编译：npm run build
+
+## 发布
+
+- 注意：示例代码生效，但发布之后未生效。确认是否执行了编译！！！
+
+- 编译组件：npm run build
+- 命令：npm publish --access public
+- 发布目录：
+  - src
+
+## 配置
+
+### 配置文件
+
+- 本地配置文件：config/config.js
+
+### webpack 配置文件
+
+- config/webpack.config.js

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@hzab/flowlong-designer",
+  "version": "0.0.1",
+  "description": "自定义审批流配置组件",
+  "main": "src",
+  "scripts": {
+    "dev": "webpack serve -c ./config/webpack.config.js --env local",
+    "build": "webpack -c ./config/webpack.config.js --env production",
+    "publish-patch": "npm version patch && npm publish --access public",
+    "publish-minor": "npm version minor && npm publish --access public",
+    "publish-major": "npm version major && npm publish --access public",
+    "prepare": "husky install",
+    "mac-chmod": "chmod +x .husky && chmod +x .husky/pre-commit",
+    "docs": "typedoc"
+  },
+  "files": [
+    "src",
+    "CHANGELOG.md"
+  ],
+  "keywords": [],
+  "author": "CaiYansong",
+  "license": "ISC",
+  "devDependencies": {
+    "@hzab/permissions": "0.1.1",
+    "@hzab/webpack-config": "^0.7.1",
+    "@types/react": "^17.0.62",
+    "@types/react-dom": "^17.0.20",
+    "antd": "^4.14.0",
+    "axios": "^1.4.0",
+    "eslint": "^8.30.0",
+    "less": "^4.1.3",
+    "mobx": "^6.7.0",
+    "mobx-react": "^7.6.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^6.14.1",
+    "typedoc": "^0.24.8",
+    "typescript": "^4.9.4"
+  },
+  "directories": {
+    "src": "src"
+  },
+  "lint-staged": {
+    "**.{js,jsx,ts,tsx,css,scss,less,json,html}": [
+      "prettier --write"
+    ]
+  },
+  "dependencies": {
+    "nanoid": "^3.3.7"
+  }
+}

package/src/common/flowData.ts

@@ -0,0 +1,42 @@
+import { nanoid } from "nanoid";
+
+/**
+ * 流程数据
+ */
+export interface IConfig {
+  /** 流程名称 */
+  name?: string;
+}
+
+/**
+ * 节点数据
+ */
+export interface INodeConfig {
+  /** 节点名称 */
+  nodeName?: string;
+}
+
+/**
+ * 获取初始节点数据
+ * @param nodeConfig
+ * @param {Object} data 流程信息
+ * @param {Object} nodeConfig 节点数据
+ * @returns
+ */
+export const getInitNodeData = function (data: IConfig = {}, nodeConfig: INodeConfig = {}) {
+  const id = nanoid();
+  const res = {
+    id: id,
+    name: data.name,
+    key: "k" + id,
+    nodeConfig: {
+      nodeName: nodeConfig.nodeName ?? "发起人",
+      nodeKey: "flk" + id,
+      type: 0,
+      nodeAssigneeList: [],
+      ...nodeConfig,
+    },
+    ...data,
+  };
+  return res;
+};

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

@@ -0,0 +1,38 @@
+.add-node-box {
+  width: 240px;
+  display: inline-flex;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 1;
+  &:before {
+    content: "";
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    z-index: -1;
+    margin: auto;
+    width: 2px;
+    height: 100%;
+    background-color: rgb(202, 202, 202);
+  }
+  .add-node-btn-box {
+    user-select: none;
+    width: 240px;
+    padding: 20px 0px 32px;
+    display: flex;
+    justify-content: center;
+    flex-shrink: 0;
+    flex-grow: 1;
+  }
+}
+.add-node-popover-body {
+  .add-node-popover-btn {
+    display: inline-block;
+    width: 80px;
+    margin: 0 8px;
+    text-align: center;
+    cursor: pointer;
+  }
+}

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

@@ -0,0 +1,119 @@
+import { Button, Popover } from "antd";
+import { PlusOutlined, UserOutlined, ShareAltOutlined, SendOutlined } from "@ant-design/icons";
+import { nanoid } from "nanoid";
+import _ from "lodash";
+
+import "./index.less";
+
+/**
+ * 节点类型
+ */
+export const NODE_TYPE = {
+  /** 审批节点 */
+  approvalNode: "ApprovalNode",
+  /** 抄送节点 */
+  ccNode: "CcNode",
+  /** 条件分支 */
+  conditionalBranching: "ConditionalBranching",
+};
+
+/**
+ * 类型数据枚举
+ */
+export const typeDataEnum = {
+  [NODE_TYPE.approvalNode]: {
+    _Icon: UserOutlined,
+    nodeName: "审核人",
+    nodeKey: getNodeKey(),
+    type: 1, //节点类型
+    setType: 1, //审核人类型 1，选择成员 3，选择角色
+    nodeAssigneeList: [], //审核人员，根据 setType 确定成员还是角色
+    examineLevel: 1, //指定主管层级
+    directorLevel: 1, //自定义连续主管审批层级
+    selectMode: 1, //发起人自选类型
+    termAuto: false, //审批期限超时自动审批
+    term: 0, //审批期限
+    termMode: 1, //审批期限超时后执行类型
+    examineMode: 1, //多人审批时审批方式
+    directorMode: 0, //连续主管审批方式
+  },
+  [NODE_TYPE.ccNode]: {
+    _Icon: SendOutlined,
+    nodeName: "抄送人",
+    nodeKey: getNodeKey(),
+    type: 2,
+    userSelectFlag: true,
+    nodeAssigneeList: [],
+  },
+  [NODE_TYPE.conditionalBranching]: {
+    _Icon: ShareAltOutlined,
+    nodeName: "条件路由",
+    nodeKey: getNodeKey(),
+    type: 4,
+    conditionNodes: [
+      {
+        nodeName: "条件1",
+        nodeKey: getNodeKey(),
+        type: 3,
+        priorityLevel: 1,
+        conditionMode: 1,
+        conditionList: [],
+      },
+      {
+        nodeName: "条件2",
+        nodeKey: getNodeKey(),
+        type: 3,
+        priorityLevel: 2,
+        conditionMode: 1,
+        conditionList: [],
+      },
+    ],
+  },
+};
+
+const types = Object.keys(typeDataEnum);
+
+export function getNodeKey() {
+  return "flk" + nanoid();
+}
+
+export const AddNode = (props) => {
+  const { modelValue, onChange } = props;
+
+  function addType(type) {
+    const data = _.cloneDeep(typeDataEnum[type]);
+    data.childNode = modelValue;
+    delete data._Icon;
+    onChange && onChange(data);
+  }
+
+  return (
+    <div className="add-node-box">
+      <div className="add-node-btn-box">
+        <Popover
+          className="popover"
+          trigger="click"
+          placement="bottom"
+          content={
+            <div className="add-node-popover-body">
+              {types?.map((key) => {
+                const data = typeDataEnum[key];
+                const Icon = data?._Icon;
+                return (
+                  <div key={key} className="add-node-popover-btn" onClick={() => addType(key)}>
+                    <Icon className="add-node-popover-btn-icon" />
+                    <div className="add-node-popover-btn-text">{data?.nodeName}</div>
+                  </div>
+                );
+              })}
+            </div>
+          }
+        >
+          <Button className="add-node-btn" type="primary" shape="circle" icon={<PlusOutlined />}></Button>
+        </Popover>
+      </div>
+    </div>
+  );
+};
+
+export default AddNode;

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

@@ -0,0 +1,72 @@
+.approver-wrap {
+  .node-wrap {
+    display: inline-flex;
+    width: 100%;
+    flex-flow: column wrap;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 0px 0px;
+    position: relative;
+    z-index: 1;
+  }
+  .node-wrap-box {
+    display: inline-flex;
+    flex-direction: column;
+    position: relative;
+    width: 220px;
+    min-height: 72px;
+    flex-shrink: 0;
+    background: rgb(255, 255, 255);
+    border-radius: 4px;
+    cursor: pointer;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
+  }
+  .node-wrap-box::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;
+  }
+  .node-wrap-box.start-node:before {
+    content: none;
+  }
+  .node-wrap-box .title {
+    height: 24px;
+    line-height: 24px;
+    color: #fff;
+    padding-left: 16px;
+    padding-right: 30px;
+    border-radius: 4px 4px 0 0;
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .node-wrap-box .title .icon {
+    margin-right: 5px;
+  }
+  .node-wrap-box .title .node-close-btn {
+    font-size: 15px;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 10px;
+    display: none;
+  }
+  .node-wrap-box .content {
+    position: relative;
+    padding: 15px;
+  }
+  .node-wrap-box .content .placeholder {
+    color: #999;
+  }
+}
+.approver-drawer-footer {
+  .ant-btn + .ant-btn {
+    margin-left: 12px;
+  }
+}