├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── views
    │   ├── About.vue
    │   └── Home.vue
    ├── components
    │   └── flow-design
    │   │   ├── imgs
    │   │       ├── shenpi.png
    │   │       ├── chaosong.png
    │   │       ├── shenpi@2x.png
    │   │       ├── shenpi@3x.png
    │   │       ├── tiaojian.png
    │   │       ├── chaosong@2x.png
    │   │       ├── chaosong@3x.png
    │   │       ├── tiaojian@2x.png
    │   │       └── tiaojian@3x.png
    │   │   ├── index.js
    │   │   ├── mixin
    │   │       └── util-mixin.js
    │   │   ├── components
    │   │       ├── node-wrap.vue
    │   │       ├── branch-wrap.vue
    │   │       ├── approver-node.vue
    │   │       ├── add-node-button.vue
    │   │       └── condition-node.vue
    │   │   └── index.vue
    ├── App.vue
    ├── utils
    │   └── index.js
    ├── main.js
    ├── router
    │   └── index.js
    └── mock
    │   └── index.js
├── images
    └── C7C39127-26A1-4CA7-A30E-DC8FB7007863.png
├── vue.config.js
├── .gitignore
├── README.md
└── package.json


/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@vue/cli-plugin-babel/preset"]
3 | };
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/baoxiaowang/flow-design-vue/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/baoxiaowang/flow-design-vue/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>This is an about page</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/components/flow-design/imgs/shenpi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/baoxiaowang/flow-design-vue/HEAD/src/components/flow-design/imgs/shenpi.png


--------------------------------------------------------------------------------
/src/components/flow-design/imgs/chaosong.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/baoxiaowang/flow-design-vue/HEAD/src/components/flow-design/imgs/chaosong.png


--------------------------------------------------------------------------------
/src/components/flow-design/imgs/shenpi@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/baoxiaowang/flow-design-vue/HEAD/src/components/flow-design/imgs/shenpi@2x.png


--------------------------------------------------------------------------------
/src/components/flow-design/imgs/shenpi@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/baoxiaowang/flow-design-vue/HEAD/src/components/flow-design/imgs/shenpi@3x.png


--------------------------------------------------------------------------------
/src/components/flow-design/imgs/tiaojian.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/baoxiaowang/flow-design-vue/HEAD/src/components/flow-design/imgs/tiaojian.png


--------------------------------------------------------------------------------
/images/C7C39127-26A1-4CA7-A30E-DC8FB7007863.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/baoxiaowang/flow-design-vue/HEAD/images/C7C39127-26A1-4CA7-A30E-DC8FB7007863.png


--------------------------------------------------------------------------------
/src/components/flow-design/imgs/chaosong@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/baoxiaowang/flow-design-vue/HEAD/src/components/flow-design/imgs/chaosong@2x.png


--------------------------------------------------------------------------------
/src/components/flow-design/imgs/chaosong@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/baoxiaowang/flow-design-vue/HEAD/src/components/flow-design/imgs/chaosong@3x.png


--------------------------------------------------------------------------------
/src/components/flow-design/imgs/tiaojian@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/baoxiaowang/flow-design-vue/HEAD/src/components/flow-design/imgs/tiaojian@2x.png


--------------------------------------------------------------------------------
/src/components/flow-design/imgs/tiaojian@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/baoxiaowang/flow-design-vue/HEAD/src/components/flow-design/imgs/tiaojian@3x.png


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style lang="scss">
 8 | * {
 9 |   margin: 0;
10 |   padding: 0;
11 | }
12 | html,
13 | body,
14 | #app {
15 |   height: 100%;
16 |   width: 100%;
17 | }
18 | </style>
19 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const path = require("path");
 2 | const resolve = dir => path.join(__dirname, dir);
 3 | module.exports = {
 4 |   chainWebpack: config => {
 5 |     config.resolve.alias // 添加别名
 6 |       .set("@", resolve("src"))
 7 |       .set("src", resolve("src"));
 8 |   }
 9 | };
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
 1 | export function guid() {
 2 |   // 生成随机码
 3 |   function S4() {
 4 |     return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
 5 |   }
 6 |   return (
 7 |     S4() +
 8 |     S4() +
 9 |     "-" +
10 |     S4() +
11 |     "-" +
12 |     S4() +
13 |     "-" +
14 |     S4() +
15 |     "-" +
16 |     S4() +
17 |     S4() +
18 |     S4()
19 |   );
20 | }
21 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // @ts-nocheck
 2 | import Vue from "vue";
 3 | import App from "./App.vue";
 4 | import router from "./router";
 5 | import ElementUI from "element-ui";
 6 | import "element-ui/lib/theme-chalk/index.css";
 7 | import "src/components/flow-design/index.js";
 8 | Vue.use(ElementUI);
 9 | Vue.config.productionTip = false;
10 | 
11 | new Vue({
12 |   router,
13 |   render: h => h(App)
14 | }).$mount("#app");
15 | 


--------------------------------------------------------------------------------
/src/components/flow-design/index.js:
--------------------------------------------------------------------------------
 1 | // @ts-nocheck
 2 | import Vue from "vue";
 3 | import ConditionNode from "src/components/flow-design/components/condition-node.vue";
 4 | import NodeWrap from "src/components/flow-design/components/node-wrap.vue";
 5 | import ApproverNode from "src/components/flow-design/components/approver-node.vue";
 6 | import BranchWrap from "src/components/flow-design/components/branch-wrap.vue";
 7 | 
 8 | Vue.component("ConditionNode", ConditionNode);
 9 | Vue.component("NodeWrap", NodeWrap);
10 | Vue.component("ApproverNode", ApproverNode);
11 | Vue.component("BranchWrap", BranchWrap);
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # flow-design-vue
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Run your tests
19 | ```
20 | npm run test
21 | ```
22 | 
23 | ### Lints and fixes files
24 | ```
25 | npm run lint
26 | ```
27 | 
28 | 
29 | 
30 | ### Customize configuration
31 | See [Configuration Reference](https://cli.vuejs.org/config/).
32 | 
33 | ![./images/C7C39127-26A1-4CA7-A30E-DC8FB7007863.png](https://github.com/baoxiaowang/flow-design-vue/blob/master/images/C7C39127-26A1-4CA7-A30E-DC8FB7007863.png)


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import VueRouter from "vue-router";
 3 | import Home from "../views/Home.vue";
 4 | 
 5 | Vue.use(VueRouter);
 6 | 
 7 | const routes = [
 8 |   {
 9 |     path: "/",
10 |     name: "Home",
11 |     component: Home
12 |   },
13 |   {
14 |     path: "/about",
15 |     name: "About",
16 |     // route level code-splitting
17 |     // this generates a separate chunk (about.[hash].js) for this route
18 |     // which is lazy-loaded when the route is visited.
19 |     component: () =>
20 |       import(/* webpackChunkName: "about" */ "../views/About.vue")
21 |   }
22 | ];
23 | 
24 | const router = new VueRouter({
25 |   mode: "history",
26 |   base: process.env.BASE_URL,
27 |   routes
28 | });
29 | 
30 | export default router;
31 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <FlowDesign
 4 |       style="height: 100%"
 5 |       ref="flowDesign"
 6 |       @nodeClick="nodeClick"
 7 |       :explainList="explainList"
 8 |       :propNodeData="processTree"
 9 |     />
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | // @ is an alias to /src
15 | import FlowDesign from "src/components/flow-design/index.vue";
16 | import { processTree } from "src/mock/index";
17 | export default {
18 |   data() {
19 |     return {
20 |       loading: false,
21 |       explainList: [],
22 |       processTree: processTree
23 |     };
24 |   },
25 |   name: "Home",
26 |   components: {
27 |     FlowDesign
28 |   },
29 |   methods: {
30 |     nodeClick() {}
31 |   }
32 | };
33 | </script>
34 | <style lang="scss">
35 | .home {
36 |   height: 100%;
37 | }
38 | </style>
39 | 


--------------------------------------------------------------------------------
/src/components/flow-design/mixin/util-mixin.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Author: xuwang.bao
 3 |  * @LastEditors: xuwang.bao
 4 |  * @Description: 一些公共逻辑mixin
 5 |  * @$emit:
 6 |  * @$slot:
 7 |  * @Date: 2019-04-09 09:43:07
 8 |  * @LastEditTime: 2020-09-02 13:47:50
 9 |  */
10 | // @ts-ignore
11 | import AddNodeButton from "./../components/add-node-button.vue";
12 | export default {
13 |   inject: {
14 |     flowIndex: { default: null },
15 |     branchWrap: { default: null },
16 |     nodeWrap: { default: null },
17 |     parentApproverNode: { default: null }
18 |   },
19 |   props: {
20 |     selectItem: {
21 |       // 当前选中项
22 |     },
23 |     parentNode: {
24 |       // 父节点
25 |       required: true,
26 |       default: () => ({})
27 |     }
28 |   },
29 |   components: {
30 |     AddNodeButton
31 |   },
32 |   computed: {
33 |     readonly() {
34 |       return this.flowIndex.readonly;
35 |     },
36 |     isSelect() {
37 |       // 自己是否被选中
38 |       return this.nodeData === this.selectItem;
39 |     }
40 |   },
41 |   methods: {}
42 | };
43 | 


--------------------------------------------------------------------------------
/src/mock/index.js:
--------------------------------------------------------------------------------
 1 | export const processTree = {
 2 |   data: {
 3 |     addTime: 1597901005,
 4 |     corpid: "ding45b220254ed2e97335c2f4657eb6378f",
 5 |     transferText: "转交",
 6 |     del: 0,
 7 |     templateId: 1152,
 8 |     timeoutHandle: "",
 9 |     type: 1,
10 |     ccPrintFlag: 0,
11 |     commitPrintFlag: 0,
12 |     enable: 1,
13 |     appId: 218,
14 |     backFlag: 0,
15 |     menuId: 2913,
16 |     signType: 1,
17 |     endText: "结束流程",
18 |     id: 8066,
19 |     fieldPermissionList: [],
20 |     formId: 4428,
21 |     storageFlag: 1,
22 |     mainUserList: [],
23 |     backType: 0,
24 |     opinionFlag: 0,
25 |     commitText: "提交",
26 |     backNodeList: [],
27 |     name: "流程开始节点",
28 |     prevId: "0",
29 |     fieldPermission: "",
30 |     ccUser: "[]",
31 |     transferFlag: 0,
32 |     printTemplateId: 0,
33 |     creatorId: "012736392139290520",
34 |     endFlag: 0,
35 |     uid: "startNode",
36 |     ccUserList: [],
37 |     mainUser: "[]",
38 |     backText: "回退",
39 |     commitPrintText: "提交并打印",
40 |     backNode: "[]",
41 |     fieldPermissionMap: {},
42 |     storageText: "暂存",
43 |     commitVerifyFlag: 1,
44 |     commitFlag: 1,
45 |     updateTime: 1597901005,
46 |     transferUser: "[]",
47 |     transferUserList: [],
48 |     enableCCFlag: 0,
49 |     commitVerifyCondition: "",
50 |     x: 0,
51 |     y: 50
52 |   },
53 |   name: "流程开始节点",
54 |   nodeId: "startNode",
55 |   prevId: "0",
56 |   type: 1
57 | };
58 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "flow-design-vue",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "element-ui": "^2.13.2",
13 |     "vue": "^2.6.11",
14 |     "vue-router": "^3.2.0"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "^4.5.0",
18 |     "@vue/cli-plugin-eslint": "^4.5.0",
19 |     "@vue/cli-service": "^4.5.0",
20 |     "@vue/eslint-config-prettier": "^6.0.0",
21 |     "babel-eslint": "^10.1.0",
22 |     "eslint": "^6.7.2",
23 |     "eslint-plugin-prettier": "^3.1.3",
24 |     "eslint-plugin-vue": "^6.2.2",
25 |     "lint-staged": "^9.5.0",
26 |     "prettier": "^1.19.1",
27 |     "sass": "^1.26.5",
28 |     "sass-loader": "^8.0.2",
29 |     "vue-template-compiler": "^2.6.11"
30 |   },
31 |   "eslintConfig": {
32 |     "root": true,
33 |     "env": {
34 |       "node": true
35 |     },
36 |     "extends": [
37 |       "plugin:vue/essential",
38 |       "eslint:recommended",
39 |       "@vue/prettier"
40 |     ],
41 |     "parserOptions": {
42 |       "parser": "babel-eslint"
43 |     },
44 |     "rules": {}
45 |   },
46 |   "browserslist": [
47 |     "> 1%",
48 |     "last 2 versions",
49 |     "not dead"
50 |   ],
51 |   "gitHooks": {
52 |     "pre-commit": "lint-staged"
53 |   },
54 |   "lint-staged": {
55 |     "*.{js,jsx,vue}": [
56 |       "vue-cli-service lint",
57 |       "git add"
58 |     ]
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/src/components/flow-design/components/node-wrap.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 |  * @Author: xuwang.bao
  3 |  * @LastEditors: xuwang.bao
  4 |  * @Description: 节点的布局组件（主要是为了控制连接线）
  5 |  * @$emit:
  6 |  * @$slot:
  7 |  * @Date: 2019-04-08 16:20:27
  8 |  * @LastEditTime: 2020-09-02 14:33:49
  9 |  -->
 10 | <template>
 11 |   <div class="node-wrap">
 12 |     <!-- 分支节点 -->
 13 |     <template v-if="nodeData.type === 6">
 14 |       <BranchWrap
 15 |         :selectItem="selectItem"
 16 |         :parentNode="parentNode"
 17 |         :nodeData="nodeData"
 18 |       />
 19 |     </template>
 20 |     <!-- 普通节点 -->
 21 |     <template v-else>
 22 |       <ApproverNode
 23 |         :selectItem="selectItem"
 24 |         :parentNode="parentNode"
 25 |         :nodeData="nodeData"
 26 |       />
 27 |     </template>
 28 | 
 29 |     <!-- 子节点 -->
 30 |     <template v-if="nodeData.childNode">
 31 |       <NodeWrap
 32 |         name="NodeWrap"
 33 |         :selectItem="selectItem"
 34 |         :parentNode="nodeData"
 35 |         :nodeData="nodeData.childNode"
 36 |       />
 37 |     </template>
 38 |   </div>
 39 | </template>
 40 | 
 41 | <script>
 42 | import utilMixin from "./../mixin/util-mixin";
 43 | export default {
 44 |   name: "NodeWrap",
 45 |   provide: function() {
 46 |     return {
 47 |       nodeWrap: this // 向下注入自己
 48 |     };
 49 |   },
 50 | 
 51 |   filters: {
 52 |     // 动态渲染warp
 53 |     warpName(type) {
 54 |       let res;
 55 |       switch (type) {
 56 |         case 1:
 57 |           res = "NodeWrap";
 58 |           break;
 59 |         case 5:
 60 |           res = "BranchWrap";
 61 |           break;
 62 |         default:
 63 |           break;
 64 |       }
 65 |       return res;
 66 |     }
 67 |   },
 68 | 
 69 |   mixins: [utilMixin],
 70 | 
 71 |   props: {
 72 |     nodeData: {
 73 |       /**
 74 |        * 节点数据对象
 75 |        */
 76 |       type: Object,
 77 |       default: () => ({}),
 78 |       required: true
 79 |     }
 80 |   },
 81 | 
 82 |   methods: {
 83 |     init() {}
 84 |   }
 85 | };
 86 | </script>
 87 | 
 88 | <style lang="scss">
 89 | .node-wrap {
 90 |   display: inline-flex;
 91 |   width: 100%;
 92 |   flex-direction: column;
 93 |   -webkit-box-pack: start;
 94 |   -ms-flex-pack: start;
 95 |   justify-content: flex-start;
 96 |   -webkit-box-align: center;
 97 |   -ms-flex-align: center;
 98 |   align-items: center;
 99 |   -ms-flex-wrap: wrap;
100 |   flex-wrap: wrap;
101 |   -webkit-box-flex: 1;
102 |   -ms-flex-positive: 1;
103 |   // padding: 0 50px;
104 |   position: relative;
105 |   .active {
106 |     &::after {
107 |       border: 1px solid orange !important;
108 |       box-shadow: 0 0 6px 0 rgba(176, 213, 250, 0.3) !important;
109 |     }
110 |   }
111 | }
112 | </style>
113 | 


--------------------------------------------------------------------------------
/src/components/flow-design/index.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 |  * @Author: xuwang.bao
  3 |  * @LastEditors: xuwang.bao
  4 |  * @Description: 仿钉钉流程设计 - 根组件
  5 |  * @$emit:
  6 |  * @$slot:
  7 |  * @Date: 2019-04-08 16:03:25
  8 |  * @LastEditTime: 2020-09-02 14:26:27
  9 |  -->
 10 | <template>
 11 |   <div class="flow-design">
 12 |     <div class="zoom-btns">
 13 |       <el-button
 14 |         :disabled="scale <= this.scaleRange.min"
 15 |         @click="scaleMinus"
 16 |         icon="el-icon-minus"
 17 |       ></el-button>
 18 |       <span class="scale-text">{{ parseInt(scale * 100) }}%</span>
 19 |       <el-button
 20 |         :disabled="scale >= this.scaleRange.max"
 21 |         @click="scalePlus"
 22 |         icon="el-icon-plus"
 23 |       ></el-button>
 24 |     </div>
 25 |     <div class="box-scale-box">
 26 |       <div style="width:100%;" :style="scaleStyle" class="box-scale">
 27 |         <!-- 开始节点 -->
 28 |         <NodeWrap
 29 |           :explainList="explainList"
 30 |           :selectItem="selectItem"
 31 |           :parentNode="null"
 32 |           :nodeData="nodeData"
 33 |         ></NodeWrap>
 34 |         <div class="end-node">
 35 |           <div class="end-node-circle"></div>
 36 |           <div class="end-node-text">流程结束</div>
 37 |         </div>
 38 |       </div>
 39 |     </div>
 40 |   </div>
 41 | </template>
 42 | <script>
 43 | import NodeWrap from "src/components/flow-design/components/node-wrap.vue";
 44 | // import BranchWrap from "src/components/flow-design/components/branch-wrap.vue";
 45 | export default {
 46 |   name: "flowDesign",
 47 |   provide: function() {
 48 |     return {
 49 |       flowIndex: this
 50 |     };
 51 |   },
 52 |   components: {
 53 |     NodeWrap
 54 |     // BranchWrap
 55 |   },
 56 | 
 57 |   filters: {
 58 |     // 动态渲染warp
 59 |     warpName(type) {
 60 |       let res;
 61 |       switch (type) {
 62 |         case 1:
 63 |           res = "NodeWrap";
 64 |           break;
 65 |         case "condition":
 66 |           res = "BranchWrap";
 67 |           break;
 68 |         default:
 69 |           break;
 70 |       }
 71 |       return res;
 72 |     }
 73 |   },
 74 | 
 75 |   props: {
 76 |     readonly: {
 77 |       type: Boolean,
 78 |       default: false
 79 |     },
 80 |     selectItem: {
 81 |       // 当前选中项
 82 |     },
 83 |     propNodeData: {
 84 |       // 表单树初始对象
 85 |       required: true
 86 |     },
 87 |     explainList: {
 88 |       default: () => []
 89 |     },
 90 |     summary: {
 91 |       default: () => []
 92 |     }
 93 |   },
 94 | 
 95 |   data() {
 96 |     console.log(this);
 97 |     return {
 98 |       nodeList: [],
 99 |       scaleRange: {
100 |         min: 0.5,
101 |         max: 1.5
102 |       },
103 |       scale: 1,
104 |       endNode: {
105 |         type: 2
106 |       },
107 |       nodeData: {},
108 |       nodeDataInit: {}
109 |     };
110 |   },
111 | 
112 |   computed: {
113 |     scaleStyle() {
114 |       return {
115 |         transform: `scale(${this.scale})`,
116 |         "min-height": this.scale + "px"
117 |       };
118 |     }
119 |   },
120 | 
121 |   watch: {
122 |     propNodeData: {
123 |       deep: true,
124 |       immediate: true,
125 |       handler(val) {
126 |         // eslint-disable-next-line no-debugger
127 |         debugger;
128 |         if (val) {
129 |           this.nodeData = JSON.parse(JSON.stringify(val));
130 |           this.nodeDataInit = JSON.parse(JSON.stringify(val));
131 |         }
132 |       }
133 |     }
134 |   },
135 | 
136 |   created() {},
137 | 
138 |   methods: {
139 |     init() {},
140 |     /**
141 |      * @function {cb} 回调函数 arg[校验是否通过,错误信息列表]
142 |      */
143 |     validate(cb) {
144 |       let vali = true;
145 |       let errorList = [];
146 |       this.nodeList.forEach(item => {
147 |         if (item.erro) {
148 |           vali = false;
149 |           errorList.push(item.erro);
150 |         }
151 |       });
152 |       cb && cb(vali, errorList);
153 |     },
154 |     /**
155 |      * 对数据格式进行处理
156 |      * 解递归
157 |      */
158 |     formatData() {
159 |       let list = [];
160 |       function fn(node, wrapperId) {
161 |         list.push({
162 |           ...node,
163 |           wrapperId
164 |         });
165 |         if (node.childNode) {
166 |           fn(node.childNode, wrapperId);
167 |         }
168 |         if (node.conditionNodes && node.conditionNodes.length > 0) {
169 |           let { nodeId } = node;
170 |           node.conditionNodes.forEach(item => {
171 |             fn(item, nodeId);
172 |           });
173 |         }
174 |         return false;
175 |       }
176 | 
177 |       fn(this.nodeData);
178 |       return list;
179 |     },
180 |     /**
181 |      * 层级减一
182 |      */
183 |     scaleMinus() {
184 |       if (this.scale <= this.scaleRange.min) {
185 |         return false;
186 |       }
187 |       this.scale = +this.scale - 0.1;
188 |       this.scale = this.scale.toFixed(1);
189 |     },
190 |     /**
191 |      * 层级加一
192 |      */
193 |     scalePlus() {
194 |       if (this.scale >= this.scaleRange.max) {
195 |         return false;
196 |       }
197 |       this.scale = +this.scale + 0.1;
198 |       this.scale = this.scale.toFixed(1);
199 |     }
200 |   }
201 | };
202 | </script>
203 | 
204 | <style lang="scss" scoped>
205 | .box-scale-box {
206 |   &::-webkit-scrollbar {
207 |     /*滚动条整体样式*/
208 | 
209 |     width: 9px; /*高宽分别对应横竖滚动条的尺寸*/
210 | 
211 |     height: 10px;
212 |   }
213 |   &::-webkit-scrollbar-thumb {
214 |     /*滚动条里面小方块*/
215 | 
216 |     border-radius: 10px;
217 | 
218 |     //  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
219 | 
220 |     background: #c2c2c2;
221 |   }
222 |   &::-webkit-scrollbar-track {
223 |     /*滚动条里面轨道*/
224 | 
225 |     // -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
226 | 
227 |     border-radius: 10px;
228 | 
229 |     background: #f5f5f7;
230 |   }
231 | }
232 | 
233 | .flow-design {
234 |   height: 100%;
235 |   width: 100%;
236 |   background-color: #f5f5f7;
237 |   position: relative;
238 |   & > .zoom-btns {
239 |     position: absolute;
240 |     right: 50px;
241 |     top: 20px;
242 |     z-index: 10;
243 |     & > .scale-text {
244 |       width: 66px;
245 |       display: inline-block;
246 |       text-align: center;
247 |     }
248 |     & > button {
249 |       width: 32px;
250 |       text-align: center;
251 |       padding-left: 0;
252 |       padding-right: 0;
253 |     }
254 |   }
255 |   & > .box-scale-box {
256 |     height: 100%;
257 |     width: 100%;
258 |     overflow: scroll;
259 |     & > .box-scale {
260 |       min-height: 0;
261 |       box-sizing: border-box;
262 |       transform: scale(1);
263 |       display: inline-block;
264 |       position: relative;
265 |       padding: 54.5px 0;
266 |       -webkit-box-align: start;
267 |       -ms-flex-align: start;
268 |       align-items: flex-start;
269 |       -webkit-box-pack: center;
270 |       -ms-flex-pack: center;
271 |       justify-content: center;
272 |       -ms-flex-wrap: wrap;
273 |       flex-wrap: wrap;
274 |       min-width: min-content;
275 |       background-color: #f5f5f7;
276 |       -webkit-transform-origin: 0 0 0;
277 |       transform-origin: 0 0 0;
278 |       & > .end-node {
279 |         border-radius: 50%;
280 |         font-size: 14px;
281 |         color: rgba(25, 31, 37, 0.4);
282 |         text-align: left;
283 |         & > .end-node-circle {
284 |           width: 10px;
285 |           height: 10px;
286 |           margin: auto;
287 |           border-radius: 50%;
288 |           background: #dbdcdc;
289 |         }
290 |         & > .end-node-text {
291 |           margin-top: 5px;
292 |           text-align: center;
293 |         }
294 |       }
295 |     }
296 |   }
297 | }
298 | </style>
299 | 


--------------------------------------------------------------------------------
/src/components/flow-design/components/branch-wrap.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 |  * @Author: xuwang.bao
  3 |  * @LastEditors: xuwang.bao
  4 |  * @Description: 条件节点的包裹组件
  5 |  * @$emit:
  6 |  * @$slot:
  7 |  * @Date: 2019-04-08 16:21:45
  8 |  * @LastEditTime: 2020-09-02 14:37:15
  9 |  -->
 10 | <template>
 11 |   <div class="branch-wrap">
 12 |     <div class="branch-box-wrap">
 13 |       <transition-group
 14 |         appear
 15 |         name="list-complete"
 16 |         tag="div"
 17 |         :style="borderStyle"
 18 |         ref="branchBox"
 19 |         class="branch-box"
 20 |       >
 21 |         <el-button
 22 |           key="btn"
 23 |           v-show="!readonly"
 24 |           @click="addCondition"
 25 |           class="add-branch list-complete-item"
 26 |           >添加条件</el-button
 27 |         >
 28 |         <!-- 循环条件 -->
 29 |         <template v-for="(cond, index) in nodeData.conditionNodes">
 30 |           <div :key="cond.nodeId" class="col-box list-complete-item">
 31 |             <!-- 遮蔽左侧 -->
 32 |             <template>
 33 |               <div class="top-left-cover-line cover-line"></div>
 34 |               <div class="bottom-left-cover-line cover-line"></div>
 35 |             </template>
 36 |             <!-- 遮蔽右侧 -->
 37 |             <template>
 38 |               <div class="top-right-cover-line cover-line"></div>
 39 |               <div class="bottom-right-cover-line cover-line"></div>
 40 |             </template>
 41 |             <ConditionNode
 42 |               :selectItem="selectItem"
 43 |               @beforeSort="beforeSort"
 44 |               @afterSort="afterSort"
 45 |               @deleteBranch="deleteBranch"
 46 |               :parentNode="nodeData"
 47 |               :index="index"
 48 |               :nodeData="cond"
 49 |             />
 50 |           </div>
 51 |         </template>
 52 |       </transition-group>
 53 | 
 54 |       <!-- 新建节点 -->
 55 |       <div class="add-node-btn-box">
 56 |         <div class="add-node-btn">
 57 |           <AddNodeButton
 58 |             :readonly="!!readonly"
 59 |             :isWrapBtn="true"
 60 |             :nodeData="nodeData"
 61 |           />
 62 |         </div>
 63 |       </div>
 64 |     </div>
 65 |   </div>
 66 | </template>
 67 | 
 68 | <script>
 69 | import utilMixin from "./../mixin/util-mixin";
 70 | import { guid } from "@/utils/index";
 71 | export default {
 72 |   name: "branch-wrap",
 73 |   provide: function() {
 74 |     return {
 75 |       branchWrap: this
 76 |     };
 77 |   },
 78 |   mixins: [utilMixin],
 79 | 
 80 |   props: {
 81 |     nodeData: {
 82 |       /**
 83 |        * 节点数据对象
 84 |        */
 85 |       type: Object,
 86 |       default: () => ({}),
 87 |       required: true
 88 |     }
 89 |   },
 90 | 
 91 |   data() {
 92 |     return {
 93 |       showBorder: true
 94 |     };
 95 |   },
 96 | 
 97 |   computed: {
 98 |     borderStyle() {
 99 |       if (!this.showBorder) {
100 |         return {
101 |           "border-color": "transparent"
102 |         };
103 |       } else {
104 |         return {};
105 |       }
106 |     }
107 |   },
108 | 
109 |   methods: {
110 |     init() {},
111 |     addCondition() {
112 |       this.beforeSort();
113 |       let newNodeId = guid();
114 |       let newNode = {
115 |         type: 5,
116 |         name: "条件" + (this.nodeData.conditionNodes.length + 1),
117 |         prevId: this.nodeData.nodeId,
118 |         wrapperId: this.nodeData.nodeId,
119 |         nodeId: newNodeId,
120 |         priority: this.nodeData.conditionNodes.length + 1,
121 |         data: {
122 |           // sUid: connection.getUuids()[0],
123 |           // tUid: connection.getUuids()[1],
124 |           conditionType: 1, // 流转条件 1：使用自定义流转条件判断；0：使用else条件
125 |           conditions: [] // 流转条件
126 |         }
127 |       };
128 |       this.nodeData.conditionNodes.push(newNode);
129 |       setTimeout(() => {
130 |         this.afterSort();
131 |       }, 800);
132 |     },
133 |     deleteBranch(children) {
134 |       this.$set(this.parentNode, "childNode", children);
135 |     },
136 |     beforeSort() {
137 |       this.showBorder = false;
138 |     },
139 |     afterSort() {
140 |       this.showBorder = true;
141 |     }
142 |   }
143 | };
144 | </script>
145 | 
146 | <style lang="scss">
147 | /* 过度动画 */
148 | .list-complete-enter, .list-complete-leave-to
149 | /* .list-complete-leave-active for below version 2.1.8 */ {
150 |   opacity: 0;
151 |   transform: translateY(-60px);
152 | }
153 | .list-complete-leave-active {
154 |   position: absolute;
155 | }
156 | .list-complete-move {
157 |   position: absolute;
158 |   & > .cover-line {
159 |     display: block !important;
160 |   }
161 | }
162 | /* 布局 */
163 | .branch-wrap {
164 |   display: inline-flex;
165 |   width: 100%;
166 |   & > .branch-box-wrap {
167 |     display: flex;
168 |     -webkit-box-orient: vertical;
169 |     -webkit-box-direction: normal;
170 |     -ms-flex-direction: column;
171 |     flex-direction: column;
172 |     -ms-flex-wrap: wrap;
173 |     flex-wrap: wrap;
174 |     -webkit-box-align: center;
175 |     -ms-flex-align: center;
176 |     align-items: center;
177 |     min-height: 270px;
178 |     width: 100%;
179 |     -ms-flex-negative: 0;
180 |     flex-shrink: 0;
181 |     & > .branch-box {
182 |       transition: width height 1s;
183 |       display: flex;
184 |       overflow: visible;
185 |       min-height: 180px;
186 |       height: auto;
187 |       border-bottom: 2px solid #ccc;
188 |       border-top: 2px solid #ccc;
189 |       position: relative;
190 |       // margin-top: 15px;
191 |       & > .add-branch {
192 |         border: none;
193 |         outline: none;
194 |         user-select: none;
195 |         justify-content: center;
196 |         font-size: 12px;
197 |         padding: 0 10px;
198 |         height: 30px;
199 |         line-height: 30px;
200 |         border-radius: 15px;
201 |         color: #3296fa;
202 |         background: #fff;
203 |         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
204 |         position: absolute;
205 |         top: -16px;
206 |         left: 50%;
207 |         transform: translateX(-50%);
208 |         transform-origin: center center;
209 |         cursor: pointer;
210 |         z-index: 1;
211 |         display: inline-flex;
212 |         align-items: center;
213 |         -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
214 |         transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
215 |       }
216 |       & > .list-complete-item {
217 |         &:nth-child(2) {
218 |           & > .top-left-cover-line {
219 |             display: block;
220 |           }
221 |           & > .bottom-left-cover-line {
222 |             display: block;
223 |           }
224 |         }
225 |         &:last-child {
226 |           & > .top-right-cover-line {
227 |             display: block;
228 |           }
229 |           & > .bottom-right-cover-line {
230 |             display: block;
231 |           }
232 |         }
233 |       }
234 |       & > .col-box {
235 |         transition: all 0.4s;
236 |         background: #f5f5f7;
237 |         display: inline-flex;
238 |         -webkit-box-orient: vertical;
239 |         -webkit-box-direction: normal;
240 |         flex-direction: column;
241 |         -webkit-box-align: center;
242 |         align-items: center;
243 |         position: relative;
244 |         &::before {
245 |           content: "";
246 |           position: absolute;
247 |           top: 0;
248 |           left: 0;
249 |           right: 0;
250 |           bottom: 0;
251 |           z-index: 0;
252 |           margin: auto;
253 |           width: 2px;
254 |           height: 100%;
255 |           background-color: #cacaca;
256 |         }
257 |         & > .top-left-cover-line {
258 |           display: none;
259 |           left: -1px;
260 |           position: absolute;
261 |           height: 3px;
262 |           width: 50%;
263 |           background-color: #f5f5f7;
264 |           top: -2px;
265 |         }
266 |         & > .top-right-cover-line {
267 |           display: none;
268 |           position: absolute;
269 |           height: 3px;
270 |           width: 50%;
271 |           background-color: #f5f5f7;
272 |           top: -2px;
273 |           right: -1px;
274 |         }
275 |         & > .bottom-left-cover-line {
276 |           display: none;
277 |           position: absolute;
278 |           height: 3px;
279 |           width: 50%;
280 |           background-color: #f5f5f7;
281 |           bottom: -2px;
282 |           left: -1px;
283 |         }
284 |         & > .bottom-right-cover-line {
285 |           display: none;
286 |           right: -1px;
287 |           position: absolute;
288 |           height: 3px;
289 |           width: 50%;
290 |           background-color: #f5f5f7;
291 |           bottom: -2px;
292 |         }
293 |       }
294 |     }
295 | 
296 |     & > .add-node-btn-box {
297 |       width: 240px;
298 |       display: inline-flex;
299 |       -ms-flex-negative: 0;
300 |       flex-shrink: 0;
301 |       -webkit-box-flex: 1;
302 |       -ms-flex-positive: 1;
303 |       position: relative;
304 |       &::before {
305 |         content: "";
306 |         position: absolute;
307 |         top: 0;
308 |         left: 0;
309 |         right: 0;
310 |         bottom: 0;
311 |         z-index: -1;
312 |         margin: auto;
313 |         width: 2px;
314 |         height: 100%;
315 |         background-color: #cacaca;
316 |       }
317 |       & > .add-node-btn {
318 |         user-select: none;
319 |         width: 240px;
320 |         padding: 20px 0 32px;
321 |         display: flex;
322 |         -webkit-box-pack: center;
323 |         justify-content: center;
324 |         flex-shrink: 0;
325 |         -webkit-box-flex: 1;
326 |         flex-grow: 1;
327 |       }
328 |     }
329 |   }
330 | }
331 | </style>
332 | 


--------------------------------------------------------------------------------
/src/components/flow-design/components/approver-node.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 |  * @Author: xuwang.bao
  3 |  * @LastEditors: xuwang.bao
  4 |  * @Description: 审批人节点
  5 |  * @$emit:
  6 |  * @$slot:
  7 |  * @Date: 2019-04-08 16:09:27
  8 |  * @LastEditTime: 2020-09-02 14:04:12
  9 |  -->
 10 | <template>
 11 |   <div class="approver-node">
 12 |     <!-- 错误警告 -->
 13 |     <el-tooltip class="item" effect="dark" :content="erro" placement="top">
 14 |       <div v-show="erro" class="node-erro__block">
 15 |         <i class="el-icon-warning"></i>
 16 |       </div>
 17 |     </el-tooltip>
 18 |     <!-- 删除按钮 -->
 19 |     <div
 20 |       v-show="!readonly && nodeType !== 1"
 21 |       @click="deleteClick"
 22 |       title="删除"
 23 |       class="node-close-btn"
 24 |     >
 25 |       <i class="el-icon-close"></i>
 26 |     </div>
 27 |     <!-- 节点 -->
 28 |     <div
 29 |       @click="nodeClick"
 30 |       v-if="nodeType === 1"
 31 |       class="node-wrap-box"
 32 |       :class="{ active: isSelect }"
 33 |     >
 34 |       <template>
 35 |         <div class="node-block start-node">
 36 |           <div class="approver-node__title">
 37 |             <i class="node-icon web-iconfont web-icon-start-node"></i>
 38 |             {{ nodeData.name }}
 39 |           </div>
 40 |           <div class="node-contant">
 41 |             请设置节点属性
 42 |           </div>
 43 |         </div>
 44 |       </template>
 45 |     </div>
 46 |     <div
 47 |       @click="nodeClick"
 48 |       v-else-if="/^(3|4)$/.test(nodeType)"
 49 |       class="node-wrap-box not-start-node"
 50 |       :class="{ active: isSelect }"
 51 |     >
 52 |       <template v-if="nodeType === 3">
 53 |         <div class="node-block flow-node">
 54 |           <div class="approver-node__title">
 55 |             <i class="web-iconfont node-icon web-icon-field-main-user"></i>
 56 |             {{ nodeData.name }}
 57 |           </div>
 58 |           <div class="node-contant">
 59 |             {{ mainUserText ? mainUserText : erro }}
 60 |           </div>
 61 |         </div>
 62 |       </template>
 63 |       <template v-else-if="nodeType === 4">
 64 |         <div class="node-block cc-node">
 65 |           <div class="approver-node__title">
 66 |             <i class="node-icon web-iconfont web-icon-cc-node"></i>
 67 |             {{ nodeData.name }}
 68 |           </div>
 69 |           <div class="node-contant">
 70 |             {{ ccUserText ? ccUserText : erro }}
 71 |           </div>
 72 |         </div>
 73 |       </template>
 74 |     </div>
 75 |     <!-- 连线 + 添加 -->
 76 |     <div class="add-node-btn-box">
 77 |       <AddNodeButton :readonly="!!readonly" :nodeData="nodeData" />
 78 |     </div>
 79 |   </div>
 80 | </template>
 81 | 
 82 | <script>
 83 | import utilMixin from "./../mixin/util-mixin";
 84 | export default {
 85 |   name: "approver-node",
 86 | 
 87 |   mixins: [utilMixin],
 88 | 
 89 |   props: {
 90 |     nodeData: {
 91 |       /**
 92 |        * 节点数据对象
 93 |        */
 94 |       type: Object,
 95 |       default: () => ({}),
 96 |       required: true
 97 |     }
 98 |   },
 99 | 
100 |   data() {
101 |     return {
102 |       // erro: null
103 |     };
104 |   },
105 | 
106 |   computed: {
107 |     permissionErro: {
108 |       get() {
109 |         let fieldPermissionList = [];
110 |         let fieldPermissionMap =
111 |           (this.nodeData &&
112 |             this.nodeData.data &&
113 |             this.nodeData.data.fieldPermissionMap) ||
114 |           {};
115 |         Object.keys(fieldPermissionMap).forEach(key => {
116 |           fieldPermissionList.push(fieldPermissionMap[key]);
117 |         });
118 |         let hasVisiblePermissionList = fieldPermissionList
119 |           .map(item => item.visible)
120 |           .filter(item => !!item);
121 |         if (hasVisiblePermissionList.length <= 0) {
122 |           return "请设置节点权限";
123 |         } else {
124 |           return null;
125 |         }
126 |       }
127 |     },
128 |     erro() {
129 |       let permissionErro = this.permissionErro;
130 |       if (permissionErro) {
131 |         return permissionErro;
132 |       }
133 |       // || this.nodeType === 1
134 |       if (this.nodeType === 3 && this.mainUserList.length <= 0) {
135 |         return "请设置负责人";
136 |       } else if (this.nodeType === 4 && this.ccUserList.length <= 0) {
137 |         return "请设置抄送人";
138 |       }
139 |       return null;
140 |     },
141 |     nodeType() {
142 |       // 节点类型 enum 1:开始节点 2:结束节点 3:审批阶段 4:抄送节点
143 |       // type: Number,
144 |       // default: 3
145 |       return this.nodeData.type;
146 |     },
147 |     ccUserList() {
148 |       let res = [];
149 |       if (this.nodeData.data && this.nodeData.data.ccUserList) {
150 |         res = this.nodeData.data.ccUserList;
151 |       }
152 |       return res;
153 |     },
154 |     mainUserList() {
155 |       let res = [];
156 |       if (this.nodeData.data && this.nodeData.data.mainUserList) {
157 |         res = this.nodeData.data.mainUserList;
158 |       }
159 |       return res;
160 |     },
161 |     mainUserText() {
162 |       return this.mainUserList.map(item => item.name).toString();
163 |     },
164 |     ccUserText() {
165 |       return this.ccUserList.map(item => item.name).toString();
166 |     }
167 |   },
168 | 
169 |   created() {},
170 | 
171 |   mounted() {
172 |     this.$set(
173 |       this["flowIndex"].nodeList,
174 |       this["flowIndex"].nodeList.length,
175 |       this
176 |     );
177 |   },
178 | 
179 |   destroyed() {
180 |     this["flowIndex"].nodeList.forEach((item, index) => {
181 |       if (item === this) {
182 |         this["flowIndex"].nodeList.splice(index, 1);
183 |       }
184 |     });
185 |   },
186 |   methods: {
187 |     getIsSecondNode() {
188 |       if (this.nodeData.type !== 3) {
189 |         return false;
190 |       }
191 |       // 递归向上找上一个审批节点
192 |       let nodeWrap = this.nodeWrap;
193 |       let IsSecondNode;
194 |       function getPreApproverNode(nodeWrap) {
195 |         let res = false;
196 |         if (!nodeWrap) {
197 |           return res;
198 |         }
199 |         let preNodeWrap = nodeWrap.nodeWrap;
200 |         if (!preNodeWrap) {
201 |           return res;
202 |         }
203 |         if (/^(1)$/.test(preNodeWrap.nodeData.type)) {
204 |           res = true;
205 |         } else {
206 |           res = getPreApproverNode(preNodeWrap);
207 |         }
208 |         return res;
209 |       }
210 |       IsSecondNode = getPreApproverNode(nodeWrap);
211 |       return IsSecondNode;
212 |     },
213 |     init() {},
214 |     /**
215 |      * 节点点击处理
216 |      */
217 |     nodeClick() {
218 |       // let isSecondNode = this.getIsSecondNode()
219 |       // this.$store.commit('SET_IS_SECOND_NODE', isSecondNode)
220 |       this.flowIndex.$emit("nodeClick", this.nodeData);
221 |     },
222 |     /**
223 |      * 删除自己
224 |      */
225 |     deleteClick() {
226 |       // 缓存自己的子节点
227 |       let tempChildNode = this.nodeData.childNode
228 |         ? JSON.parse(JSON.stringify(this.nodeData.childNode))
229 |         : null;
230 |       if (tempChildNode) {
231 |         tempChildNode.prevId = this.parentNode.nodeId;
232 |       }
233 |       // 将子节点挂载在自己的父节点
234 |       this.$set(this.parentNode, "childNode", tempChildNode);
235 |     }
236 |   }
237 | };
238 | </script>
239 | 
240 | <style lang="scss" scoped>
241 | .approver-node {
242 |   position: relative;
243 |   &:hover {
244 |     & > .node-close-btn {
245 |       display: block;
246 |     }
247 |   }
248 |   & > .node-erro__block {
249 |     position: absolute;
250 |     right: -40px;
251 |     top: 0px;
252 |     height: 24px;
253 |     width: 24px;
254 |     color: #e6a23c;
255 |     font-size: 24px;
256 |     cursor: help;
257 |   }
258 |   & > .node-close-btn {
259 |     cursor: pointer;
260 |     display: none;
261 |     width: 24px;
262 |     height: 24px;
263 |     position: absolute;
264 |     right: 0px;
265 |     top: 0px;
266 |     z-index: 19;
267 |     text-align: center;
268 |     line-height: 24px;
269 |     color: #eee;
270 |   }
271 |   & > .not-start-node {
272 |     &::before {
273 |       z-index: 2;
274 |       content: "";
275 |       position: absolute;
276 |       top: -12px;
277 |       left: 50%;
278 |       -webkit-transform: translateX(-50%);
279 |       transform: translateX(-50%);
280 |       width: 0;
281 |       height: 4px;
282 |       border-style: solid;
283 |       border-width: 8px 6px 4px;
284 |       border-color: #cacaca transparent transparent;
285 |       background: #f5f5f7;
286 |     }
287 |   }
288 |   & > .node-wrap-box {
289 |     position: relative;
290 |     box-sizing: border-box;
291 |     width: 220px;
292 |     min-height: 78px;
293 |     border-radius: 4px;
294 |     background-color: rgba(255, 255, 255, 1);
295 |     box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
296 |     &::after {
297 |       pointer-events: none;
298 |       content: "";
299 |       position: absolute;
300 |       top: 0;
301 |       bottom: 0;
302 |       left: 0;
303 |       right: 0;
304 |       z-index: 2;
305 |       border-radius: 4px;
306 |       border: 1px solid transparent;
307 |       transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
308 |       box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
309 |     }
310 |     // 节点统一样式
311 |     & > .node-block {
312 |       display: flex;
313 |       flex-direction: column;
314 |       & > .node-contant {
315 |         padding: 20px 10px 10px 10px;
316 |         display: flex;
317 |         align-items: center;
318 |         flex: 1;
319 |       }
320 |       & > .approver-node__title {
321 |         flex-shrink: 0;
322 |         z-index: 2;
323 |         position: relative;
324 |         border-top-right-radius: 4px;
325 |         border-top-left-radius: 4px;
326 |         height: 24px;
327 |         display: flex;
328 |         align-items: center;
329 |         color: #fff;
330 |         padding-left: 15px;
331 |         // background: orange;
332 |         & > .node-icon {
333 |           color: #fff;
334 |           margin-right: 5px;
335 |         }
336 |       }
337 |     }
338 |     //开始节点
339 |     & > .start-node {
340 |       & > .approver-node__title {
341 |         background: #7b94ba;
342 |       }
343 |     }
344 |     & > .flow-node {
345 |       & > .approver-node__title {
346 |         background: orange;
347 |       }
348 |     }
349 |     & > .cc-node {
350 |       & > .approver-node__title {
351 |         background: #5cc1a5;
352 |       }
353 |     }
354 |   }
355 |   & > .add-node-btn-box {
356 |     width: 220px;
357 |     display: inline-flex;
358 |     -ms-flex-negative: 0;
359 |     flex-shrink: 0;
360 |     -webkit-box-flex: 1;
361 |     -ms-flex-positive: 1;
362 |     position: relative;
363 |     &::before {
364 |       content: "";
365 |       position: absolute;
366 |       top: 0;
367 |       left: 0;
368 |       right: 0;
369 |       bottom: 0;
370 |       z-index: -1;
371 |       margin: auto;
372 |       width: 2px;
373 |       height: 100%;
374 |       background-color: #cacaca;
375 |     }
376 |     & > .add-node-btn {
377 |       user-select: none;
378 |       width: 220px;
379 |       padding: 20px 0 32px;
380 |       display: flex;
381 |       -webkit-box-pack: center;
382 |       justify-content: center;
383 |       flex-shrink: 0;
384 |       -webkit-box-flex: 1;
385 |       flex-grow: 1;
386 |     }
387 |   }
388 | }
389 | </style>
390 | 


--------------------------------------------------------------------------------
/src/components/flow-design/components/add-node-button.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 |  * @Author: xuwang.bao
  3 |  * @LastEditors: xuwang.bao
  4 |  * @Description: 添加按钮
  5 |  * @$emit:
  6 |  * @$slot:
  7 |  * @Date: 2019-04-09 12:29:25
  8 |  * @LastEditTime: 2020-09-02 14:17:56
  9 |  -->
 10 | <template>
 11 |   <div class="add-node-button add-node-btn">
 12 |     <el-popover
 13 |       placement="right-start"
 14 |       width="220"
 15 |       v-model="popoverShow"
 16 |       popper-class="add-node-button__popper"
 17 |       trigger="click"
 18 |     >
 19 |       <!-- 按钮 -->
 20 |       <el-button
 21 |         v-show="!readonly"
 22 |         slot="reference"
 23 |         type="primary"
 24 |         icon="el-icon-plus"
 25 |         circle
 26 |       ></el-button>
 27 | 
 28 |       <!-- 选项 -->
 29 |       <div class="add-node-button_item" @click="approverAdd">
 30 |         <div class="add-node-button_item-img approver_img"></div>
 31 |         <p>审批节点</p>
 32 |       </div>
 33 |       <div class="add-node-button_item" @click="ccAdd">
 34 |         <div class="add-node-button_item-img cc_img"></div>
 35 |         <p>抄送节点</p>
 36 |       </div>
 37 |       <div class="add-node-button_item" @click="branchAdd">
 38 |         <div class="add-node-button_item-img branch_img"></div>
 39 |         <p>条件分支</p>
 40 |       </div>
 41 |     </el-popover>
 42 |   </div>
 43 | </template>
 44 | 
 45 | <script>
 46 | import { guid } from "@/utils/index";
 47 | export default {
 48 |   name: "add-node-button",
 49 |   inject: {
 50 |     flowIndex: { default: {} },
 51 |     branchWrap: { default: null }
 52 |   },
 53 | 
 54 |   props: {
 55 |     readonly: {
 56 |       type: Boolean,
 57 |       default: false
 58 |     },
 59 |     isWrapBtn: {
 60 |       // 是否是wrap下面的按钮
 61 |       type: Boolean,
 62 |       default: false
 63 |     },
 64 |     nodeData: {
 65 |       /**
 66 |        * 节点数据对象
 67 |        */
 68 |       type: Object,
 69 |       default: () => ({}),
 70 |       required: true
 71 |     }
 72 |   },
 73 | 
 74 |   data() {
 75 |     return {
 76 |       popoverShow: false
 77 |     };
 78 |   },
 79 | 
 80 |   computed: {
 81 |     summaryArr() {
 82 |       let summary = this.flowIndex.summary || [];
 83 |       return summary.map(item => item.attr);
 84 |     }
 85 |   },
 86 | 
 87 |   methods: {
 88 |     init() {},
 89 |     /**
 90 |      * 添加审批
 91 |      */
 92 |     approverAdd() {
 93 |       // flowIndex
 94 |       let fieldPermissionMap = {};
 95 |       let explainList = this.flowIndex.explainList || [];
 96 |       let fieldPermissionList = [];
 97 |       explainList.forEach(item => {
 98 |         fieldPermissionList.push({
 99 |           attr: item.attr,
100 |           subAttr: "",
101 |           editable: 0,
102 |           fieldType: item.fieldType,
103 |           summary: this.summaryArr.includes(item.attr) ? 1 : 0,
104 |           visible: 1
105 |         });
106 |         fieldPermissionMap[item.attr] = {
107 |           attr: item.attr,
108 |           subAttr: "",
109 |           editable: 0,
110 |           fieldType: item.fieldType,
111 |           summary: this.summaryArr.includes(item.attr) ? 1 : 0,
112 |           visible: 1
113 |         };
114 |         if (/^(10006|20003)$/.test(item.fieldType)) {
115 |           let subFields = item.subForm.items;
116 |           subFields.forEach(sub => {
117 |             fieldPermissionList.push({
118 |               attr: item.attr,
119 |               subAttr: sub.attr,
120 |               editable: 0,
121 |               fieldType: sub.fieldType,
122 |               summary: 0,
123 |               visible: 1
124 |             });
125 |             fieldPermissionMap[`${item.attr}.${sub.attr}`] = {
126 |               attr: item.attr,
127 |               subAttr: sub.attr,
128 |               editable: 0,
129 |               fieldType: sub.fieldType,
130 |               summary: 0,
131 |               visible: 1
132 |             };
133 |           });
134 |         }
135 |       });
136 | 
137 |       let newNodeId = guid();
138 |       let newNode = {
139 |         type: 3,
140 |         name: "审批节点",
141 |         prevId: this.nodeData.nodeId,
142 |         nodeId: newNodeId,
143 |         wrapperId:
144 |           this.branchWrap && !this.isWrapBtn
145 |             ? this.branchWrap.nodeData.nodeId
146 |             : undefined,
147 |         data: {
148 |           fieldPermissionMap,
149 |           commitVerifyFlag: 1, // 节点提交验证，1所有数据均可提交，2满足条件的数据才可提交，具体条件参考验证条件字段
150 |           type: 3,
151 |           opinionFlag: 0, // 是否必填审批意见 2：选填，1必填，0不填
152 |           commitFlag: 1, // 是否开启提交（1：开启；0：不开启）
153 |           commitText: "提交", // 提交文案
154 |           storageFlag: 1, // 是否开启暂存（1：开启；0：不开启）
155 |           storageText: "暂存", // 暂存文案
156 |           commitPrintFlag: 0, // 是否开启提交并打印（1：开启；0：不开启）
157 |           commitPrintText: "提交并打印", // 提交并打印文案
158 |           backFlag: 0, // 是否开启回退（1：开启；0：不开启）
159 |           backType: 0, // 0 上一节点 1：所选节点
160 |           backText: "回退", // 回退文案
161 |           transferFlag: 0, // 是否开启转交（1：开启；0：不开启）
162 |           transferText: "转交", // 转交文案
163 |           transferUserList: [], // 转交人
164 |           endFlag: 1, // 是否开启结束流程（1：开启；0：不开启）
165 |           endText: "结束", // 结束流程文案
166 |           signType: 1, // 会签/或签，1或签(任意负责人提交后进入下一节点), 2会签(所有负责人提交后进入下一节点)  流转规则
167 |           mainUserList: [], // 节点负责人
168 |           enableCCFlag: 0, // 流程节点是否启用抄送，如果启用，则抄送人保存在ccUser中
169 |           ccUserList: [], // 抄送人
170 |           // 'fieldPermissionList': fieldPermissionList, // 字段权限
171 |           ccPrintFlag: 0 // 是否开启抄送打印（1：开启；0：不开启）
172 |         }
173 |       };
174 |       let tempChildrenNode = this.nodeData.childNode
175 |         ? JSON.parse(JSON.stringify(this.nodeData.childNode))
176 |         : null;
177 |       if (tempChildrenNode) {
178 |         tempChildrenNode.prevId = newNodeId;
179 |         newNode.childNode = tempChildrenNode;
180 |       }
181 | 
182 |       this.$set(this.nodeData, "childNode", newNode);
183 |       this.popoverShow = false;
184 |     },
185 |     /**
186 |      * 添加抄送
187 |      */
188 |     ccAdd() {
189 |       let fieldPermissionMap = {};
190 |       let explainList = this.flowIndex.explainList || [];
191 |       let fieldPermissionList = [];
192 |       explainList.forEach(item => {
193 |         fieldPermissionList.push({
194 |           attr: item.attr,
195 |           subAttr: "",
196 |           editable: 0,
197 |           fieldType: item.fieldType,
198 |           summary: this.summaryArr.includes(item.attr) ? 1 : 0,
199 |           visible: 1
200 |         });
201 |         fieldPermissionMap[item.attr] = {
202 |           attr: item.attr,
203 |           subAttr: "",
204 |           editable: 0,
205 |           fieldType: item.fieldType,
206 |           summary: this.summaryArr.includes(item.attr) ? 1 : 0,
207 |           visible: 1
208 |         };
209 |         if (/^(10006|20003)$/.test(item.fieldType)) {
210 |           let subFields = item.subForm.items;
211 |           subFields.forEach(sub => {
212 |             fieldPermissionList.push({
213 |               attr: item.attr,
214 |               subAttr: sub.attr,
215 |               editable: 0,
216 |               fieldType: sub.fieldType,
217 |               summary: 0,
218 |               visible: 1
219 |             });
220 |             fieldPermissionMap[`${item.attr}.${sub.attr}`] = {
221 |               attr: item.attr,
222 |               subAttr: sub.attr,
223 |               editable: 0,
224 |               fieldType: sub.fieldType,
225 |               summary: 0,
226 |               visible: 1
227 |             };
228 |           });
229 |         }
230 |       });
231 |       let newNodeId = guid();
232 |       let newNode = {
233 |         type: 4,
234 |         name: "抄送节点",
235 |         prevId: this.nodeData.nodeId,
236 |         nodeId: newNodeId,
237 |         wrapperId:
238 |           this.branchWrap && !this.isWrapBtn
239 |             ? this.branchWrap.nodeData.nodeId
240 |             : undefined,
241 |         data: {
242 |           opinionFlag: 0, // 是否必填审批意见 2：选填，1必填，0不填
243 |           commitPrintFlag: 0, // 是否开启提交并打印（1：开启；0：不开启）
244 |           type: 4,
245 |           enableCCFlag: 1, // 流程节点是否启用抄送，如果启用，则抄送人保存在ccUser中
246 |           ccUserList: [], // 抄送人
247 |           // 'fieldPermissionList': fieldPermissionList, // 字段权限
248 |           fieldPermissionMap: fieldPermissionMap,
249 |           ccPrintFlag: 0, // 是否开启抄送打印（1：开启；0：不开启）
250 |           commitVerifyFlag: 1, // 节点提交验证，1所有数据均可提交，2满足条件的数据才可提交，具体条件参考验证条件字段
251 |           commitFlag: 1, // 是否开启提交（1：开启；0：不开启）
252 |           commitText: "提交", // 提交文案
253 |           storageFlag: 1, // 是否开启暂存（1：开启；0：不开启）
254 |           storageText: "暂存", // 暂存文案
255 |           commitPrintText: "提交并打印", // 提交并打印文案
256 |           backFlag: 0, // 是否开启回退（1：开启；0：不开启）
257 |           backType: 0, // 0 上一节点 1：所选节点
258 |           backText: "回退", // 回退文案
259 |           transferFlag: 0, // 是否开启转交（1：开启；0：不开启）
260 |           transferText: "转交", // 转交文案
261 |           transferUserList: [], // 转交人
262 |           endFlag: 0, // 是否开启结束流程（1：开启；0：不开启）
263 |           endText: "结束流程", // 结束流程文案
264 |           signType: 1, // 会签/或签，1或签(任意负责人提交后进入下一节点), 2会签(所有负责人提交后进入下一节点)  流转规则
265 |           mainUserList: [] // 节点负责人
266 |         }
267 |       };
268 |       let tempChildrenNode = this.nodeData.childNode
269 |         ? JSON.parse(JSON.stringify(this.nodeData.childNode))
270 |         : null;
271 |       if (tempChildrenNode) {
272 |         tempChildrenNode.prevId = newNodeId;
273 |         newNode.childNode = tempChildrenNode;
274 |       }
275 | 
276 |       this.$set(this.nodeData, "childNode", newNode);
277 |       this.popoverShow = false;
278 |     },
279 |     /**
280 |      * 添加条件分支
281 |      */
282 |     branchAdd() {
283 |       let newNodeId = guid();
284 |       let newNode = {
285 |         type: 6,
286 |         name: "",
287 |         prevId: this.nodeData.nodeId,
288 |         nodeId: newNodeId,
289 |         conditionNodes: [
290 |           {
291 |             name: "条件1",
292 |             priority: 1,
293 |             type: 5,
294 |             wrapperId: newNodeId,
295 |             prevId: newNodeId,
296 |             nodeId: guid(),
297 |             data: {
298 |               // sUid: connection.getUuids()[0],
299 |               // tUid: connection.getUuids()[1],
300 |               conditionType: 1, // 流转条件 1：使用自定义流转条件判断；0：使用else条件
301 |               conditions: [] // 流转条件
302 |             }
303 |           },
304 |           {
305 |             name: "条件2",
306 |             type: 5,
307 |             priority: 2,
308 |             prevId: newNodeId,
309 |             wrapperId: newNodeId,
310 |             nodeId: guid(),
311 |             data: {
312 |               // sUid: connection.getUuids()[0],
313 |               // tUid: connection.getUuids()[1],
314 |               conditionType: 1, // 流转条件 1：使用自定义流转条件判断；0：使用else条件
315 |               conditions: [] // 流转条件
316 |             }
317 |           }
318 |         ]
319 |       };
320 |       let tempChildrenNode = this.nodeData.childNode
321 |         ? JSON.parse(JSON.stringify(this.nodeData.childNode))
322 |         : null;
323 |       if (tempChildrenNode) {
324 |         tempChildrenNode.prevId = newNode.conditionNodes[0].nodeId;
325 |         newNode.conditionNodes[0].childNode = tempChildrenNode;
326 |       }
327 | 
328 |       this.$set(this.nodeData, "childNode", newNode);
329 |       this.popoverShow = false;
330 |     }
331 |   }
332 | };
333 | </script>
334 | 
335 | <style lang="scss">
336 | body {
337 |   .add-node-button__popper {
338 |     padding: 20px;
339 |     display: flex;
340 |     justify-content: space-around;
341 |     .add-node-button_item {
342 |       font-size: 12px;
343 |       cursor: pointer;
344 |       width: 50px;
345 |       &:hover {
346 |         color: orange;
347 |       }
348 |       & > .add-node-button_item-img {
349 |         width: 100%;
350 |         height: 50px;
351 |         box-sizing: border-box;
352 |         // border: 1px solid #999;
353 |         margin-bottom: 5px;
354 |       }
355 |       & > .approver_img {
356 |         background: url("./../imgs/shenpi@2x.png");
357 |         background-size: 100% 100%;
358 |       }
359 |       & > .cc_img {
360 |         background: url("./../imgs/chaosong@2x.png");
361 |         background-size: 100% 100%;
362 |       }
363 |       & > .branch_img {
364 |         background: url("./../imgs/tiaojian@2x.png");
365 |         background-size: 100% 100%;
366 |       }
367 |     }
368 |   }
369 | }
370 | .add-node-button {
371 |   user-select: none;
372 |   width: 240px;
373 |   padding: 20px 0 32px;
374 |   display: flex;
375 |   position: relative;
376 |   z-index: 3;
377 |   -webkit-box-pack: center;
378 |   justify-content: center;
379 |   flex-shrink: 0;
380 |   -webkit-box-flex: 1;
381 |   flex-grow: 1;
382 |   & > .btn {
383 |     height: 32px;
384 |     position: relative;
385 |     z-index: 3;
386 |   }
387 | }
388 | </style>
389 | 


--------------------------------------------------------------------------------
/src/components/flow-design/components/condition-node.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 |  * @Author: xuwang.bao
  3 |  * @LastEditors: xuwang.bao
  4 |  * @Description: 条件节点
  5 |  * @$emit:
  6 |  * @$slot:
  7 |  * @Date: 2019-04-08 16:14:30
  8 |  * @LastEditTime: 2020-09-02 14:33:56
  9 |  -->
 10 | <template>
 11 |   <div class="condition-node">
 12 |     <div
 13 |       class="condition-node-box"
 14 |       :class="{ 'han-children-condition': hasChildrenCondition }"
 15 |     >
 16 |       <div
 17 |         @click="handleClick"
 18 |         :class="{ active: isSelect }"
 19 |         class="condition-node__block"
 20 |       >
 21 |         <template v-if="!readonly">
 22 |           <!-- 删除 -->
 23 |           <div @click.stop="deleteClick" title="删除" class="node-close-btn">
 24 |             <i class="el-icon-close"></i>
 25 |           </div>
 26 |           <!-- 左移 -->
 27 |           <div @click.stop="leftSort" v-if="leftSortShow" class="sort-left">
 28 |             &lt;
 29 |           </div>
 30 |           <!-- 右移 -->
 31 |           <div @click.stop="rightSort" v-if="rightSortShow" class="sort-right">
 32 |             &gt;
 33 |           </div>
 34 |         </template>
 35 |         <!-- 头部 -->
 36 |         <div class="condition-node__top">
 37 |           <span
 38 |             class="name__span"
 39 |             @click.stop.prevent="conditionNameClick"
 40 |             v-if="!edit"
 41 |             >{{ nodeData.name }}</span
 42 |           >
 43 |           <el-input
 44 |             class="name__input"
 45 |             size="mini"
 46 |             ref="nameInput"
 47 |             @blur="edit = false"
 48 |             v-else
 49 |             v-model="nodeData.name"
 50 |             placeholder=""
 51 |           ></el-input>
 52 |           <span class="lever__span">
 53 |             {{ "优先级" + `${nodeData.priority}` }}
 54 |           </span>
 55 |         </div>
 56 |         <div class="condition-node_contant">
 57 |           <template v-if="conditionType === 2">
 58 |             使用else流转条件
 59 |           </template>
 60 |           <template v-else>
 61 |             <p :key="index" v-for="(item, index) in filterConditions">
 62 |               {{ item }}
 63 |             </p>
 64 |           </template>
 65 |         </div>
 66 |       </div>
 67 | 
 68 |       <!-- 添加按钮 -->
 69 |       <div class="add-node-btn">
 70 |         <AddNodeButton :readonly="!!readonly" :nodeData="nodeData" />
 71 |       </div>
 72 |       <!-- 下级节点 -->
 73 |       <template v-if="nodeData.childNode">
 74 |         <NodeWrap
 75 |           :selectItem="selectItem"
 76 |           :parentNode="nodeData"
 77 |           :nodeData="nodeData.childNode"
 78 |         />
 79 |       </template>
 80 |     </div>
 81 |   </div>
 82 | </template>
 83 | 
 84 | <script>
 85 | import utilMixin from "./../mixin/util-mixin";
 86 | export default {
 87 |   name: "condition-node",
 88 |   mixins: [utilMixin],
 89 | 
 90 |   props: {
 91 |     index: {
 92 |       // 索引
 93 |       type: Number,
 94 |       required: true
 95 |     },
 96 |     nodeData: {
 97 |       /**
 98 |        * 节点数据对象
 99 |        */
100 |       type: Object,
101 |       default: () => ({}),
102 |       required: true
103 |     }
104 |   },
105 | 
106 |   data() {
107 |     return {
108 |       edit: false
109 |     };
110 |   },
111 | 
112 |   computed: {
113 |     conditionType() {
114 |       return this.nodeData.data.conditionType;
115 |     },
116 |     /**
117 |      * 是否可以左移
118 |      */
119 |     leftSortShow() {
120 |       let res = true;
121 |       if (this.index === 0) {
122 |         res = false;
123 |       }
124 |       return res;
125 |     },
126 |     /**
127 |      * 是否可以右移
128 |      */
129 |     rightSortShow() {
130 |       let res = true;
131 |       if (this.index === this.parentNode.conditionNodes.length - 1) {
132 |         res = false;
133 |       }
134 |       return res;
135 |     },
136 |     /**
137 |      * 该条件下是否含有子详情
138 |      */
139 |     hasChildrenCondition() {
140 |       let res = false;
141 |       function has(node) {
142 |         if (node.conditionNodes && node.conditionNodes.length >= 2) {
143 |           return true;
144 |         } else if (node.childNode) {
145 |           return has(node.childNode);
146 |         } else {
147 |           return false;
148 |         }
149 |       }
150 |       res = has(this.nodeData);
151 |       return res;
152 |     },
153 |     conditions() {
154 |       let res = [];
155 |       if (this.nodeData.data && this.nodeData.data.conditions) {
156 |         res = this.nodeData.data.conditions;
157 |       }
158 |       return res;
159 |     },
160 |     filterConditions() {
161 |       let arr = this.conditions;
162 |       return arr.map(item => {
163 |         return `关于${item.name}的条件`;
164 |       });
165 |     }
166 |   },
167 | 
168 |   watch: {
169 |     index: {
170 |       handler(val) {
171 |         this.nodeData.priority = val + 1;
172 |       }
173 |     }
174 |   },
175 | 
176 |   mounted() {},
177 | 
178 |   destroyed() {},
179 | 
180 |   methods: {
181 |     init() {},
182 |     /**
183 |      * 条件块点击处理
184 |      */
185 |     handleClick() {
186 |       this.flowIndex.$emit("nodeClick", this.nodeData);
187 |     },
188 |     /**
189 |      * 条件名称点击
190 |      */
191 |     conditionNameClick() {
192 |       if (this.readonly) {
193 |         return;
194 |       }
195 |       this.edit = true;
196 |       this.$nextTick(() => {
197 |         this.$refs["nameInput"].focus();
198 |       });
199 |     },
200 |     /**
201 |      * 删除当前条件分支
202 |      */
203 |     deleteClick() {
204 |       // 分支对象
205 |       let conditionNodes = this.parentNode.conditionNodes;
206 |       // 如果条件分支只有2个(分支最少存在两个)
207 |       if (conditionNodes && conditionNodes.length === 2) {
208 |         let branchChildren = this.parentNode.childNode;
209 |         if (branchChildren) {
210 |           branchChildren.prevId = this.parentNode.prevId;
211 |         }
212 |         // this.$set(this.parentNode, 'conditionNodes', [])
213 |         // this.$set(this.parentNode.parentNode, 'childNode', branchChildren)
214 |         this.$emit("deleteBranch", branchChildren);
215 |       } else {
216 |         if (Array.isArray(this.parentNode.conditionNodes)) {
217 |           this.parentNode.conditionNodes.splice(this.index, 1);
218 |         }
219 |       }
220 |       this.flowIndex.$emit("nodeClick", null);
221 |     },
222 |     /**
223 |      * 左移
224 |      */
225 |     leftSort() {
226 |       // 排序开始前
227 |       this.$emit("beforeSort");
228 |       let targetNode = this.parentNode.conditionNodes[this.index - 1];
229 |       let newArrObj = {
230 |         ...this.parentNode.conditionNodes,
231 |         [this.index - 1]: this.nodeData,
232 |         [this.index]: targetNode,
233 |         length: this.parentNode.conditionNodes.length
234 |       };
235 |       let newArr = Array.from(newArrObj);
236 |       this.parentNode["conditionNodes"] = newArr;
237 | 
238 |       setTimeout(() => {
239 |         this.$emit("afterSort");
240 |       }, 800);
241 |     },
242 |     /**
243 |      * 右移
244 |      */
245 |     rightSort() {
246 |       this.$emit("beforeSort");
247 |       let targetNode = this.parentNode.conditionNodes[this.index + 1];
248 |       let newArrObj = {
249 |         ...this.parentNode.conditionNodes,
250 |         [this.index + 1]: this.nodeData,
251 |         [this.index]: targetNode,
252 |         length: this.parentNode.conditionNodes.length
253 |       };
254 |       let newArr = Array.from(newArrObj);
255 |       this.parentNode["conditionNodes"] = newArr;
256 |       setTimeout(() => {
257 |         this.$emit("afterSort");
258 |       }, 800);
259 |     }
260 |   }
261 | };
262 | </script>
263 | 
264 | <style lang="scss" scoped>
265 | .condition-node {
266 |   position: relative;
267 |   display: inline-flex;
268 |   -webkit-box-orient: vertical;
269 |   -webkit-box-direction: normal;
270 |   flex-direction: column;
271 |   -webkit-box-flex: 1;
272 |   // min-height: 220px;
273 |   & > .han-children-condition {
274 |     padding-right: 0 !important;
275 |     padding-left: 0 !important;
276 |   }
277 |   & > .condition-node-box {
278 |     padding-top: 30px;
279 |     padding-right: 50px;
280 |     padding-left: 50px;
281 |     -webkit-box-pack: center;
282 |     justify-content: center;
283 |     -webkit-box-align: center;
284 |     align-items: center;
285 |     flex-grow: 1;
286 |     position: relative;
287 |     display: inline-flex;
288 |     -webkit-box-orient: vertical;
289 |     -webkit-box-direction: normal;
290 |     flex-direction: column;
291 |     -webkit-box-flex: 1;
292 |     &::before {
293 |       content: "";
294 |       position: absolute;
295 |       top: 0;
296 |       left: 0;
297 |       right: 0;
298 |       bottom: 0;
299 |       margin: auto;
300 |       width: 2px;
301 |       height: 100%;
302 |       background-color: #cacaca;
303 |     }
304 |     & > .condition-node__block {
305 |       & > .condition-node_contant {
306 |         padding-top: 10px;
307 |       }
308 |       box-sizing: border-box;
309 |       position: relative;
310 |       width: 220px;
311 |       min-height: 78px;
312 |       background: #fff;
313 |       border-radius: 4px;
314 |       padding: 20px 19px;
315 |       cursor: pointer;
316 |       box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
317 |       &::after {
318 |         pointer-events: none;
319 |         content: "";
320 |         position: absolute;
321 |         top: 0;
322 |         bottom: 0;
323 |         left: 0;
324 |         right: 0;
325 |         z-index: 2;
326 |         border-radius: 4px;
327 |         border: 1px solid transparent;
328 |         transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
329 |         box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
330 |       }
331 |       &:hover {
332 |         & > .node-close-btn {
333 |           display: block;
334 |         }
335 |         & > .sort-right {
336 |           display: flex;
337 |         }
338 |         & > .sort-left {
339 |           display: flex;
340 |         }
341 |       }
342 |       & > .sort-left {
343 |         color: #999;
344 |         position: absolute;
345 |         top: 0;
346 |         bottom: 0;
347 |         display: none;
348 |         z-index: 1;
349 |         left: 0;
350 |         border-left: 1px solid #f6f6f6;
351 |         align-items: center;
352 |         &:hover {
353 |           background: #efefef;
354 |         }
355 |         &::after {
356 |           border: 1px solid #3296fa;
357 |           box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
358 |           pointer-events: none;
359 |           content: "";
360 |           position: absolute;
361 |           top: 0;
362 |           bottom: 0;
363 |           left: 0;
364 |           right: 0;
365 |           z-index: 2;
366 |           border-radius: 4px;
367 |           border: 1px solid transparent;
368 |           transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
369 |           box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
370 |         }
371 |       }
372 |       & > .sort-right {
373 |         color: #999;
374 |         position: absolute;
375 |         top: 0;
376 |         bottom: 0;
377 |         display: none;
378 |         z-index: 1;
379 |         right: 0;
380 |         border-left: 1px solid #f6f6f6;
381 |         align-items: center;
382 |         &:hover {
383 |           background: #efefef;
384 |         }
385 |         &::after {
386 |           border: 1px solid #3296fa;
387 |           box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
388 |           pointer-events: none;
389 |           content: "";
390 |           position: absolute;
391 |           top: 0;
392 |           bottom: 0;
393 |           left: 0;
394 |           right: 0;
395 |           z-index: 2;
396 |           border-radius: 4px;
397 |           border: 1px solid transparent;
398 |           transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
399 |           box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
400 |         }
401 |       }
402 |       & > .node-close-btn {
403 |         cursor: pointer;
404 |         display: none;
405 |         width: 24px;
406 |         height: 24px;
407 |         position: absolute;
408 |         right: 5px;
409 |         top: 0px;
410 |         z-index: 19;
411 |         text-align: center;
412 |         line-height: 24px;
413 |         color: #999;
414 |         &:hover {
415 |           color: red;
416 |         }
417 |       }
418 |       & > .condition-node__top {
419 |         & > .name__span {
420 |           color: orange;
421 |           text-decoration: underline;
422 |           font-size: 13px;
423 |           display: inline-block;
424 |           width: 120px;
425 |           overflow: hidden;
426 |           white-space: nowrap;
427 |           text-overflow: ellipsis;
428 |         }
429 |         & > .name__input {
430 |           width: 120px;
431 |         }
432 |         & > .lever__span {
433 |           float: right;
434 |           font-size: 13px;
435 |         }
436 |       }
437 |     }
438 |   }
439 | }
440 | </style>
441 | 


--------------------------------------------------------------------------------