qgb-process 0.2.3 → 0.2.7

package/src/views/formBuilder/process-1.vue

@@ -1,976 +1,976 @@
-<template>
-  <div v-if="easyFlowVisible">
-    <el-row>
-      <el-col :span="24" class="right-plan">
-        <div class="process-heard">
-          <template v-if="$route.query.name">
-            <div v-if="isEdit">
-              <span class="process-title">{{name}}</span>
-              <!-- <i class="el-icon-edit" @click.stop="isEdit = false; conName = name"></i> -->
-            </div>
-            <div v-else>
-              <el-input autofocus v-model="conName" placeholder="请输入内容" @blur="changeName"></el-input>
-            </div>
-          </template>
-          <div v-else></div>
-          <div>
-            <div class="switch">
-              <span>是否开启审批: </span>
-              <el-switch
-                v-model="isFlg">
-              </el-switch>
-            </div>
-            <el-button @click="cancal">取消</el-button>
-            <el-button type="primary" @click="save">保存</el-button>
-          </div>
-        </div>
-        <el-row>
-          <!--画布-->
-          <el-col :span="24">
-            <div id="flowContainer" class="container">
-              <template v-for="(node,index) in data.nodeList">
-                <flow-node
-                  :key="index"
-                  :node="node"
-                  @deleteNode="deleteNode"
-                  @changeNodeSite="changeNodeSite"
-                  @nodeRightMenu="nodeRightMenu"
-                  @editNode="editNode"
-                  @showForm="showForm"
-                  @changeName="changeNodeName"
-                ></flow-node>
-              </template>
-              <flow-node-condition :formData="connection" :title="title" @edit="editName" v-show="conditionVisible" @save="setCondition" @cancal="conditionVisible = false"  ref="conditionForm"></flow-node-condition>
-              <add-node-box v-if="showAddNode" :info="addNodeInfo" @close="()=>{showAddNode = false}" @addNode="addNode"></add-node-box>
-            </div>
-          </el-col>
-        </el-row>
-      </el-col>
-    </el-row>
-    <!-- 流程数据表单 -->
-    <flow-node-form :formData="nodeInfo" v-if="nodeVisible" @close="nodeVisible = false" @save="setNode" ref="nodeForm"></flow-node-form>
-  </div>
-</template>
-
-<script>
-// import draggable from "vuedraggable";
-import jsPlumb from "jsplumb";
-import flowNode from "./components/planNode";
-// import nodeMenu from "./components/nodeMenu";
-import FlowNodeForm from "./components/nodeForm";
-import FlowNodeCondition from "./components/nodeConditionConfig";
-import addNodeBox from "./components/addNode";
-import lodash from "lodash";
-import * as config from "./components/dataDefault";
-import * as api from "@/api/apiProcess";
-
-export default {
-  data() {
-    return {
-      // jsPlumb 实例
-      jsPlumb: null,
-      easyFlowVisible: true,
-      // 控制流程数据显示与隐藏
-      flowInfoVisible: false,
-      // 控制表单显示与隐藏
-      nodeVisible: false,
-      conditionVisible: false,
-      loadEasyFlowFinish: false,
-      // 数据
-      data: {},
-      maxId: 0,
-      maxUserTask: 0,
-      maxCondition: 0,
-      activeNode: "",
-      activeConditions: {},
-      activeLine: {
-        sourceId: "",
-        targetId: "",
-        isCondition: false
-      },
-      connection: {},
-      title: "",
-      nodeInfo: {},
-      isEdit: true,
-      name: "",
-      conName: "",
-      desc: "",
-      processId: "",
-      isFlg: true,
-      type: "",
-      label: [
-        "Label",
-        {
-          // 连接点的可配置标签
-          location: 0.5,
-          id: "label",
-          label: "",
-          cssClass: "aLabel",
-          events: {
-            click: (e, event) => {
-              const label = e.getElement();
-              const top = parseFloat(label.style.top) - 35;
-              const left = parseFloat(label.style.left) + 30;
-              this.showAddNode = true;
-              this.addNodeInfo = {
-                top: top,
-                left: left
-              };
-              event.stopPropagation();
-            }
-          }
-        }
-      ],
-      showAddNode: false,
-      addNodeInfo: {
-        top: "0",
-        left: "0",
-        isShwo: true
-      }
-    };
-  },
-  components: {
-    flowNode,
-    FlowNodeForm,
-    FlowNodeCondition,
-    addNodeBox
-  },
-  computed: {
-    user() {
-      return this.$store.state.user;
-    }
-  },
-  created() {
-    if (this.$route.query.type) {
-      this.type = this.$route.query.type;
-    } else if (this.$route.path == "/formBuilder") {
-      this.type = "customForm_" + this.$store.state.formBuilder.formDesId;
-    }
-  },
-  mounted() {
-    this.$nextTick(async() => {
-      // this.jsPlumb = jsPlumb.jsPlumb.getInstance();
-      this.jsPlumb = jsPlumb.jsPlumb
-        ? jsPlumb.jsPlumb.getInstance()
-        : jsPlumb.getInstance();
-      // 默认加载流程A的数据、在这里可以根据具体的业务返回符合流程数据格式的数据即可
-      const id = this.$route.params.id;
-      if (id) {
-        // this.processId = this.$route.params.id
-        this.processId = "5e7af90cf7b2ed3ef17c4216";
-        const res = await api.getProcessDetail({
-          id: "5e7af90cf7b2ed3ef17c4216"
-        });
-        if (res.data.state == "ok") {
-          this.processId = res.data.data._id;
-          const content = JSON.parse(res.data.data.content);
-          this.data = {
-            nodeList: content.nodeList,
-            lineList: content.lineList
-          };
-          this.$nextTick(() => {
-            // this.jsPlumb = jsPlumb.jsPlumb.getInstance();
-            this.jsPlumb = jsPlumb.jsPlumb
-              ? jsPlumb.jsPlumb.getInstance()
-              : jsPlumb.getInstance();
-            this.$nextTick(() => {
-              this.jsPlumbInit();
-            });
-          });
-        }
-      } else {
-        // this.dataReload(config.dataDefault)
-        this.queryProcessByCompanyAndUser();
-      }
-    });
-  },
-  methods: {
-    // 修改题目
-    changeName() {
-      if (this.conName) {
-        this.name = this.conName;
-      } else {
-        this.conName = this.name;
-      }
-      this.isEdit = true;
-    },
-    // 设置节点条件
-    setCondition(data) {
-      const conditions = Object.entries(data.form).map(([key, val]) => {
-        if (Array.isArray(val.value)) {
-          return {
-            ...val,
-            variable: key,
-            value: val.value.join(","),
-            opt: "=",
-            isArray: true
-          };
-        } else {
-          return {
-            ...val,
-            variable: key,
-            isArray: false
-          };
-        }
-      });
-      this.data.nodeList.forEach((item, index) => {
-        if (item.id == this.activeNode) {
-          item.conditions = conditions;
-          item.desc = data.desc.join(" 并且 ");
-        }
-      });
-      this.conditionVisible = false;
-    },
-    // 设置节点信息
-    setNode(data) {
-      // this.data
-      this.data.nodeList.forEach((item, index) => {
-        if (item.id == this.activeNode) {
-          item.approverType = data.approverType;
-          item.approvers = data.approvers;
-          item.notifiers = data.notifiers;
-        }
-      });
-    },
-    // 点击节点事件
-    showForm(node) {
-      this.activeNode = node.id;
-      if (node.type == "condition") {
-        this.conditionVisible = true;
-        let condition = this.data.nodeList.filter((item, index) => {
-          return item.id == node.id;
-        });
-        condition = lodash.cloneDeep(condition);
-        const json = {};
-        condition[0].conditions.forEach((item, index) => {
-          if (item.isArray) {
-            item.value = item.value.split(",");
-          }
-          json[item.variable] = item;
-        });
-        this.connection = json;
-        this.title = node.name;
-      } else if (node.type == "userTask") {
-        const nodeInfo = this.data.nodeList.filter((item, index) => {
-          return item.id == node.id;
-        });
-        const json = {
-          approverType: nodeInfo[0].approverType || "",
-          approvers: nodeInfo[0].approvers || [],
-          notifiers: nodeInfo[0].notifiers || []
-        };
-        this.nodeInfo = json;
-        this.nodeVisible = true;
-      }
-    },
-    // 修改条件名称
-    editName(data) {
-      this.title = data;
-      this.data.nodeList.forEach((item, index) => {
-        if (item.id == this.activeNode) {
-          item.name = data;
-        }
-      });
-    },
-    // 初始化数据
-    jsPlumbInit() {
-      const _this = this;
-      this.jsPlumb.ready(() => {
-        // 导入默认配置
-        const defaultConfig = _.cloneDeep(config.DefaultConfig);
-        defaultConfig.ConnectionOverlays.push(this.label);
-        this.jsPlumb.importDefaults(defaultConfig);
-        // 会使整个jsPlumb立即重绘。
-        this.jsPlumb.setSuspendDrawing(false, true);
-        // 初始化节点
-        this.loadEasyFlow();
-        // 单点击了连接线,
-        this.jsPlumb.bind("click", (conn, originalEvent) => {
-          const endSource = conn.endpoints[0].getUuid();
-          const endTarget = conn.endpoints[1].getUuid();
-          const sourceId = conn.sourceId.substring(15);
-          const targetId = conn.targetId.substring(15);
-          this.activeLine.sourceId = sourceId;
-          this.activeLine.targetId = targetId;
-          this.activeLine.sourceUUid =
-            endSource.indexOf("BottomCenter") > -1
-              ? "BottomCenter"
-              : "RightMiddle";
-          this.activeLine.targetUUid =
-            endTarget.indexOf("TopCenter") > -1 ? "TopCenter" : "RightMiddle";
-          this.addNodeInfo.isShow = true;
-          this.activeLine.isCondition = false;
-          this.data.nodeList.forEach((item) => {
-            if (
-              (item.id == sourceId || item.id == targetId) &&
-              item.type == "condition"
-            ) {
-              this.addNodeInfo.isShow = false;
-            }
-            if (item.id == sourceId && item.type == "condition") {
-              this.activeLine.isCondition = true;
-            }
-          });
-        });
-        // 连线
-        this.jsPlumb.bind("connection", (evt) => {
-          const from = evt.sourceId;
-          const to = evt.targetId;
-          const nodeFrom = evt.sourceId.substring(15);
-          const nodeTo = evt.targetId.substring(15);
-          const uuid0 = evt.connection.endpoints[0].getUuid();
-          const uuid1 = evt.connection.endpoints[1].getUuid();
-          if (this.loadEasyFlowFinish) {
-            const line = {
-              sourceId: from,
-              targetId: to,
-              nodeFrom: nodeFrom,
-              nodeTo: nodeTo,
-              condName: "",
-              uuid0: uuid0,
-              uuid1: uuid1
-            };
-            this.data.nodeList.forEach((item, index) => {
-              if (
-                item.id == nodeFrom &&
-                evt.sourceEndpoint.anchor.type == "RightMiddle"
-              ) {
-                item.ifNo = nodeTo;
-              } else if (item.id == nodeFrom) {
-                item.to = nodeTo;
-              }
-              if (item.id == nodeTo) {
-                item.from = nodeFrom;
-              }
-            });
-            this.data.lineList.push(line);
-          }
-        });
-
-        // 删除连线回调
-        this.jsPlumb.bind("connectionDetached", (evt) => {
-          this.deleteLine(evt.sourceId, evt.targetId, evt);
-        });
-
-        // 改变线的连接节点
-        this.jsPlumb.bind("connectionMoved", (evt) => {
-          this.changeLine(evt.originalSourceId, evt.originalTargetId);
-        });
-
-        // contextmenu
-        this.jsPlumb.bind("contextmenu", (evt) => {
-          // console.log("contextmenu", evt);
-        });
-
-        // 连线
-        this.jsPlumb.bind("beforeDrop", (evt) => {
-          const from = evt.sourceId;
-          const to = evt.targetId;
-          if (from === to) {
-            this.$message.error("不能连接自己");
-            return false;
-          }
-          if (this.hasLine(from, to)) {
-            this.$message.error("不能重复连线");
-            return false;
-          }
-          if (this.hashOppositeLine(from, to)) {
-            this.$message.error("不能回环");
-            return false;
-          }
-          return true;
-        });
-
-        // beforeDetach
-        this.jsPlumb.bind("beforeDetach", (evt) => {
-          this.deleteLine(evt.sourceId, evt.targetId);
-        });
-      });
-    },
-    // 加载流程图
-    loadEasyFlow() {
-      // 初始化节点
-      const _this = this;
-      this.maxId = 0;
-      this.maxUserTask = 1;
-      this.maxCondition = 0;
-      for (let i = 0; i < this.data.nodeList.length; i++) {
-        const node = this.data.nodeList[i];
-        _this.maxId =
-          parseFloat(node.id) > parseFloat(_this.maxId)
-            ? parseFloat(node.id)
-            : _this.maxId;
-
-        if (node.type == "start") {
-          _this._addEndpoints("Window" + node.id + "", ["BottomCenter"], []);
-        } else if (node.type == "end") {
-          _this._addEndpoints(
-            "Window" + node.id + "",
-            [],
-            ["TopCenter", "LeftMiddle", "RightMiddle"]
-          );
-        } else if (node.type == "condition") {
-          const sort = node.name.substring(4);
-          _this.maxCondition =
-            parseFloat(sort) > parseFloat(_this.maxCondition)
-              ? parseFloat(sort)
-              : _this.maxCondition;
-          _this._addEndpoints(
-            "Window" + node.id + "",
-            ["BottomCenter", "RightMiddle"],
-            ["TopCenter"]
-          );
-        } else {
-          const sort2 = node.name.substring(4);
-          _this.maxUserTask =
-            parseFloat(sort2) > parseFloat(_this.maxUserTask)
-              ? parseFloat(sort2)
-              : _this.maxUserTask;
-          _this._addEndpoints(
-            "Window" + node.id + "",
-            ["BottomCenter"],
-            ["TopCenter"]
-          );
-        }
-        _this.jsPlumb.draggable("flowchartWindow" + node.id, {
-          grid: [20, 20]
-        });
-      }
-
-      // 初始化连线
-      for (let i = 0; i < this.data.lineList.length; i++) {
-        const line = this.data.lineList[i];
-        _this.jsPlumb.connect({ uuids: [line.uuid0, line.uuid1] });
-      }
-      this.$nextTick(function() {
-        this.loadEasyFlowFinish = true;
-      });
-    },
-    // 删除线
-    deleteLine(from, to, evt) {
-      const _this = this;
-      const fromId = from.substring(15);
-      const toId = to.substring(15);
-      this.data.lineList = this.data.lineList.filter(function(line) {
-        if (line.sourceId == from && line.targetId == to) {
-          return false;
-        }
-        return true;
-      });
-    },
-    // 改变连线
-    changeLine(oldFrom, oldTo) {
-      this.deleteLine(oldFrom, oldTo);
-    },
-    // 改变节点的位置
-    changeNodeSite(data) {
-      for (var i = 0; i < this.data.nodeList.length; i++) {
-        const node = this.data.nodeList[i];
-        if (node.id === data.id) {
-          node.left = data.left;
-          node.top = data.top;
-        }
-      }
-    },
-    // 修改节点名称
-    changeNodeName(data) {
-      console.log(data);
-      this.data.nodeList.forEach((item) => {
-        if (item.id == data.id) {
-          item.name = data.name;
-        }
-      });
-    },
-    /**
-     * 拖拽结束后添加新的节点
-     * @param evt
-     * @param nodeMenu 被添加的节点对象
-     * @param mousePosition 鼠标拖拽结束的坐标
-     */
-    addNode(nodeMenu) {
-      this.showAddNode = false;
-      const nodeId = this.maxId + 1;
-      let left, top, from, to;
-      let nextTo = this.activeLine.targetId;
-      let fromNode;
-      let frist = true;
-      let isRight = false;
-      let oldTop = "";
-      // 循环修改下面节点的位置
-      while (nextTo !== "end") {
-        this.data.nodeList.forEach((item) => {
-          // 添加ifNo下添加节点
-          if (
-            frist &&
-            item.id == this.activeLine.sourceId &&
-            this.activeLine.isCondition
-          ) {
-            frist = false;
-            if (this.activeLine.sourceUUid == "RightMiddle") {
-              left = parseFloat(item.left) + 300 + "px";
-              top = parseFloat(item.top) + 170 + "px";
-              nextTo = item.ifNo == "5" ? "end" : item.ifNo;
-              isRight = true;
-            } else {
-              const nodeInfo = this.data.nodeList.filter(
-                (i) => i.id == this.activeLine.sourceId
-              );
-              left = nodeInfo[0].left;
-              top = parseFloat(nodeInfo[0].top) + 170 + "px";
-              nextTo = item.to;
-            }
-            oldTop = top;
-          }
-          // 普通添加
-          if (frist && item.id == nextTo && !this.activeLine.isCondition) {
-            frist = false;
-            const nodeInfo = this.data.nodeList.filter(
-              (i) => i.id == this.activeLine.sourceId
-            );
-            left = nodeInfo[0].left;
-            top = parseFloat(nodeInfo[0].top) + 170 + "px";
-            oldTop = top;
-          }
-          if (item.id == nextTo) {
-            item.top =
-              parseFloat(item.top) - parseFloat(oldTop) < 170
-                ? parseFloat(item.top) + 170 + "px"
-                : item.top;
-            oldTop = item.top;
-            nextTo = item.to;
-            return;
-          }
-        });
-      }
-      // 修改新增上下节点from to
-      this.data.nodeList.forEach((item, index) => {
-        if (
-          item.id == this.activeLine.sourceId &&
-          !this.activeLine.isCondition
-        ) {
-          from = item.id;
-          item.to = nodeId;
-        }
-        if (
-          item.id == this.activeLine.sourceId &&
-          this.activeLine.isCondition
-        ) {
-          from = item.id;
-          if (this.activeLine.sourceUUid == "RightMiddle") {
-            item.ifNo = nodeId;
-          } else {
-            item.to = nodeId;
-          }
-        }
-        if (item.id == this.activeLine.targetId) {
-          to = item.id;
-          item.from = nodeId;
-        }
-      });
-      // 添加新节点
-      const sort =
-        nodeMenu.type == "condition"
-          ? this.maxCondition + 1
-          : this.maxUserTask + 1;
-      const node = {
-        id: nodeId,
-        type: nodeMenu.type,
-        name: nodeMenu.name + sort,
-        left: left,
-        top: top,
-        from: from,
-        to: to
-      };
-      if (nodeMenu.type == "condition") {
-        node.conditions = [];
-        node.ifNo = "5"; // 连接到结束
-        node.desc = "";
-        this.maxCondition = sort;
-        // 条件节点新增连接到结束的连线
-        this.data.lineList.push({
-          nodeFrom: nodeId,
-          nodeTo: "5",
-          sourceId: "flowchartWindow" + nodeId,
-          targetId: "flowchartWindow5",
-          uuid0: "Window" + nodeId + "RightMiddle",
-          uuid1: "Window5RightMiddle"
-        });
-      } else if (nodeMenu.type == "userTask") {
-        node.approverType = "";
-        node.approvers = [];
-        node.notifiers = [];
-        this.maxUserTask = sort;
-      }
-      this.data.nodeList.push(node);
-      // 添加新增连线
-      this.data.lineList.forEach((item, index) => {
-        if (
-          item.nodeFrom == this.activeLine.sourceId &&
-          item.nodeTo == this.activeLine.targetId &&
-          item.uuid0.indexOf(this.activeLine.sourceUUid) > -1 &&
-          item.uuid1.indexOf(this.activeLine.targetUUid) > -1
-        ) {
-          this.data.lineList.splice(index, 1);
-        }
-      });
-      this.data.lineList.push({
-        nodeFrom: this.activeLine.sourceId,
-        nodeTo: nodeId,
-        sourceId: "flowchartWindow" + this.activeLine.sourceId,
-        targetId: "flowchartWindow" + nodeId,
-        uuid0: "Window" + this.activeLine.sourceId + this.activeLine.sourceUUid,
-        uuid1: "Window" + nodeId + "TopCenter"
-      });
-      this.data.lineList.push({
-        nodeFrom: nodeId,
-        nodeTo: this.activeLine.targetId,
-        sourceId: "flowchartWindow" + nodeId,
-        targetId: "flowchartWindow" + this.activeLine.targetId,
-        uuid0: "Window" + nodeId + "BottomCenter",
-        uuid1: "Window" + this.activeLine.targetId + this.activeLine.targetUUid
-      });
-      this.maxId = nodeId;
-      const _this = this;
-      this.dataReload({
-        nodeList: this.data.nodeList,
-        lineList: this.data.lineList
-      });
-    },
-    /**
-     * 删除节点
-     * @param nodeId 被删除节点的ID
-     */
-    deleteNode(nodeId, type) {
-      console.log(nodeId, type);
-      const _this = this;
-      const userTasknode = this.data.nodeList.filter(
-        (item) => item.type == "userTask"
-      );
-      if (userTasknode.length < 2 && type == "userTask") {
-        this.$message.error("至少保留一个流程节点");
-        return;
-      }
-      this.$confirm("确定要删除节点" + nodeId + "?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-        closeOnClickModal: false
-      })
-        .then(() => {
-          this.jsPlumb.removeAllEndpoints("flowchartWindow" + nodeId);
-          this.$nextTick(function() {
-            this.jsPlumb.remove("flowchartWindow" + nodeId);
-            var list = [];
-            const nodeInfo = this.data.nodeList.filter(
-              (item) => item.id == nodeId
-            );
-            const fromId = nodeInfo[0].from;
-            const toId = nodeInfo[0].to;
-            var nextTo = nodeInfo[0].to;
-            let ifNo = false;
-            // 循环修改下面节点的位置
-            while (nextTo !== "end" && nextTo) {
-              this.data.nodeList.forEach((item) => {
-                if (item.id == nextTo) {
-                  item.top =
-                    nextTo != 5 ? parseFloat(item.top) - 170 + "px" : item.top;
-                  nextTo = item.to;
-                }
-              });
-            }
-            this.data.nodeList.forEach((item, index) => {
-              if (item.id == fromId && item.to == nodeId) {
-                item.to = toId;
-              }
-              if (item.id == fromId && item.ifNo == nodeId) {
-                item.ifNo = toId;
-                ifNo = true;
-              }
-              if (item.id == toId) {
-                item.from = fromId;
-              }
-              if (item.id !== nodeId) {
-                list.push(item);
-              }
-            });
-            // 删除条件分支
-            if (nodeInfo[0].type == "condition") {
-              list = this.removeCondition(nodeInfo[0], list);
-            }
-            const fromLocal = ifNo ? "RightMiddle" : "BottomCenter";
-            const toLocal =
-              toId == 5 &&
-              parseFloat(nodeInfo[0].left) >
-                document.getElementById("flowchartWindow5").offsetLeft
-                ? "RightMiddle"
-                : "TopCenter";
-            this.data.lineList.push({
-              nodeFrom: fromId,
-              nodeTo: toId,
-              sourceId: "flowchartWindow" + fromId,
-              targetId: "flowchartWindow" + toId,
-              uuid0: "Window" + fromId + fromLocal,
-              uuid1: "Window" + toId + toLocal
-            });
-            this.dataReload({ nodeList: list, lineList: this.data.lineList });
-          });
-        })
-        .catch((err) => {});
-      return true;
-    },
-    removeCondition(nodeInfo, list) {
-      const _this = this;
-      var arr = [];
-      var removeId = nodeInfo.ifNo;
-      while (removeId != 5 && removeId) {
-        arr.push(removeId);
-        var removeNode = _this.data.nodeList.filter((i) => i.id == removeId);
-        removeId = removeNode[0].to;
-        if (removeNode[0].type == "condition") {
-          _this.removeCondition(removeNode[0], list);
-        }
-      }
-      list = list.filter((no) => arr.indexOf(no.id) == -1);
-      arr.forEach((item, index, a) => {
-        var removeA = a[index];
-        var removeB = a[index + 1] || "5";
-        if (removeA && removeB) {
-          _this.data.lineList = _this.data.lineList.filter(
-            (line) => !(line.nodeFrom == removeA && line.nodeTo == removeB)
-          );
-        }
-      });
-      return list;
-    },
-    /**
-     * 编辑节点
-     * @param nodeId 被点击编辑的节点的ID
-     */
-    editNode(nodeId) {
-      this.nodeFormVisible = true;
-      this.$nextTick(function() {
-        this.$refs.nodeForm.init(this.data, nodeId);
-      });
-    },
-    // 是否具有该线
-    hasLine(from, to) {
-      for (var i = 0; i < this.data.lineList.length; i++) {
-        var line = this.data.lineList[i];
-        if (line.from === from && line.to === to) {
-          return true;
-        }
-      }
-      return false;
-    },
-    // 是否含有相反的线
-    hashOppositeLine(from, to) {
-      return this.hasLine(to, from);
-    },
-    nodeRightMenu(nodeId, evt) {
-      this.menu.show = true;
-      this.menu.curNodeId = nodeId;
-      this.menu.left = evt.x + "px";
-      this.menu.top = evt.y + "px";
-    },
-    // 加载流程图
-    dataReload(data) {
-      this.easyFlowVisible = false;
-      this.data.nodeList = [];
-      this.data.lineList = [];
-      this.$nextTick(() => {
-        data = lodash.cloneDeep(data);
-        this.easyFlowVisible = true;
-        this.data = data;
-        this.$nextTick(() => {
-          // this.jsPlumb = jsPlumb.jsPlumb.getInstance();
-          this.jsPlumb = jsPlumb.jsPlumb
-            ? jsPlumb.jsPlumb.getInstance()
-            : jsPlumb.getInstance();
-          this.$nextTick(() => {
-            this.jsPlumbInit();
-          });
-        });
-      });
-    },
-    _addEndpoints(toId, sourceAnchors, targetAnchors) {
-      for (var i = 0; i < sourceAnchors.length; i++) {
-        var sourceUUID = toId + sourceAnchors[i];
-        this.jsPlumb.addEndpoint("flowchart" + toId, config.sourceEndpoint, {
-          anchor: sourceAnchors[i],
-          uuid: sourceUUID
-        });
-      }
-      for (var j = 0; j < targetAnchors.length; j++) {
-        var targetUUID = toId + targetAnchors[j];
-        this.jsPlumb.addEndpoint("flowchart" + toId, config.targetEndpoint, {
-          anchor: targetAnchors[j],
-          uuid: targetUUID
-        });
-      }
-    },
-    // 保存
-    async save() {
-      const user = this.$store.state.user;
-      let flg = false;
-      if (this.type == "") return;
-      this.data.nodeList.forEach((item) => {
-        if (item.type == "condition" && item.ifNo == "") {
-          this.$message.error(`条件节点: ${item.name} 没有闭合，请检查`);
-          flg = true;
-          return false;
-        }
-        if ((item.to == "" || item.from == "") && item.type != "end") {
-          this.$message.error(`节点: ${item.name} 流程未闭合，请检查`);
-          flg = true;
-          return false;
-        }
-        if (
-          item.type == "userTask" &&
-          item.approvers.length < 1 &&
-          item.notifiers.length < 1
-        ) {
-          this.$message.error(`节点: ${item.name} 申请人和抄送人不能为空`);
-          flg = true;
-          return false;
-        }
-      });
-      if (flg) {
-        return false;
-      }
-      const param = {
-        name: this.name,
-        desc: "",
-        creator: user.no + "",
-        processId: this.processId,
-        startId: "1",
-        endId: "5",
-        companyId: user.cno + "",
-        type: this.type,
-        switchOn: this.isFlg ? "1" : "0",
-        nodeList: this.data.nodeList,
-        lineList: this.data.lineList
-      };
-      if (this.$route.path == "/formBuilder") {
-        param.menuId = this.$store.state.formBuilder.menuId;
-      }
-      let res;
-      if (this.processId) {
-        const data = {
-          id: this.processId + "",
-          content: JSON.stringify(param)
-        };
-        res = await api.updateProcess(data);
-      } else {
-        const data = {
-          content: JSON.stringify(param)
-        };
-        res = await api.saveProcess(data);
-      }
-      if (res.data.state == "ok") {
-        this.$message.success({
-          message: this.processId ? "编辑成功" : "保存成功",
-          duration: 1500
-        });
-        this.processId = res.data.data;
-        this.type.indexOf("customForm_") == -1 &&
-          this.$removeTag("/processList");
-      } else {
-        this.$message.error({
-          message: res.data.msg ? res.data.msg : "保存失败",
-          duration: 1500
-        });
-      }
-    },
-    cancal() {
-      this.$confirm("有修改的内容未保存，确认离开吗?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(() => {
-          this.$removeTag("/processList");
-        })
-        .catch(() => {});
-    },
-    async queryProcessByCompanyAndUser() {
-      const param = {
-        userId: this.user.no + "",
-        companyId: this.user.cno + "",
-        type: this.type
-      };
-      const res = await api.queryProcessByCompanyAndUser(param);
-      if (res.data.data) {
-        this.processId = res.data.data._id;
-        const content = JSON.parse(res.data.data.content);
-        this.data = { nodeList: content.nodeList, lineList: content.lineList };
-        this.name = content.name;
-        this.isFlg = content.switchOn != 0;
-        this.$nextTick(() => {
-          this.jsPlumb = jsPlumb.jsPlumb
-            ? jsPlumb.jsPlumb.getInstance()
-            : jsPlumb.getInstance();
-          this.$nextTick(() => {
-            this.jsPlumbInit();
-          });
-        });
-      } else {
-        this.name = this.$route.query.name
-          ? this.$route.query.name + "流程"
-          : this.$store.state.formBuilder.name + "流程";
-        this.dataReload(config.dataDefault);
-      }
-    }
-  }
-};
-</script>
-<style>
-.right-plan {
-  height: calc(100vh - 100px);
-  overflow-y: auto;
-}
-.process-heard {
-  padding: 10px 20px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.process-heard .el-icon-edit {
-  cursor: pointer;
-}
-.process-heard .process-title {
-  font-size: 18px;
-  margin-right: 10px;
-}
-#flowContainer {
-  height: 10000px;
-  /* background-color: rgb(251, 251, 251); */
-  /*background-color: #42b983;*/
-  position: relative;
-}
-
-.labelClass {
-  background-color: white;
-  padding: 5px;
-  opacity: 0.7;
-  border: 1px solid #346789;
-  /*border-radius: 10px;*/
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-.aLabel {
-  width: 30px;
-  height: 30px;
-  background: url("../../assets/process/jia.png") center center no-repeat;
-  cursor: pointer;
-}
-.switch {
-  display: inline-block;
-  margin-right: 30px;
-}
-.switch > span {
-  margin-right: 10px;
-}
-</style>
+<template>
+  <div v-if="easyFlowVisible">
+    <el-row>
+      <el-col :span="24" class="right-plan">
+        <div class="process-heard">
+          <template v-if="$route.query.name">
+            <div v-if="isEdit">
+              <span class="process-title">{{name}}</span>
+              <!-- <i class="el-icon-edit" @click.stop="isEdit = false; conName = name"></i> -->
+            </div>
+            <div v-else>
+              <el-input autofocus v-model="conName" placeholder="请输入内容" @blur="changeName"></el-input>
+            </div>
+          </template>
+          <div v-else></div>
+          <div>
+            <div class="switch">
+              <span>是否开启审批: </span>
+              <el-switch
+                v-model="isFlg">
+              </el-switch>
+            </div>
+            <el-button @click="cancal">取消</el-button>
+            <el-button type="primary" @click="save">保存</el-button>
+          </div>
+        </div>
+        <el-row>
+          <!--画布-->
+          <el-col :span="24">
+            <div id="flowContainer" class="container">
+              <template v-for="(node,index) in data.nodeList">
+                <flow-node
+                  :key="index"
+                  :node="node"
+                  @deleteNode="deleteNode"
+                  @changeNodeSite="changeNodeSite"
+                  @nodeRightMenu="nodeRightMenu"
+                  @editNode="editNode"
+                  @showForm="showForm"
+                  @changeName="changeNodeName"
+                ></flow-node>
+              </template>
+              <flow-node-condition :formData="connection" :title="title" @edit="editName" v-show="conditionVisible" @save="setCondition" @cancal="conditionVisible = false"  ref="conditionForm"></flow-node-condition>
+              <add-node-box v-if="showAddNode" :info="addNodeInfo" @close="()=>{showAddNode = false}" @addNode="addNode"></add-node-box>
+            </div>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+    <!-- 流程数据表单 -->
+    <flow-node-form :formData="nodeInfo" v-if="nodeVisible" @close="nodeVisible = false" @save="setNode" ref="nodeForm"></flow-node-form>
+  </div>
+</template>
+
+<script>
+// import draggable from "vuedraggable";
+import jsPlumb from "jsplumb";
+import flowNode from "./components/planNode";
+// import nodeMenu from "./components/nodeMenu";
+import FlowNodeForm from "./components/nodeForm";
+import FlowNodeCondition from "./components/nodeConditionConfig";
+import addNodeBox from "./components/addNode";
+import lodash from "lodash";
+import * as config from "./components/dataDefault";
+import * as api from "@/api/apiProcess";
+
+export default {
+  data() {
+    return {
+      // jsPlumb 实例
+      jsPlumb: null,
+      easyFlowVisible: true,
+      // 控制流程数据显示与隐藏
+      flowInfoVisible: false,
+      // 控制表单显示与隐藏
+      nodeVisible: false,
+      conditionVisible: false,
+      loadEasyFlowFinish: false,
+      // 数据
+      data: {},
+      maxId: 0,
+      maxUserTask: 0,
+      maxCondition: 0,
+      activeNode: "",
+      activeConditions: {},
+      activeLine: {
+        sourceId: "",
+        targetId: "",
+        isCondition: false
+      },
+      connection: {},
+      title: "",
+      nodeInfo: {},
+      isEdit: true,
+      name: "",
+      conName: "",
+      desc: "",
+      processId: "",
+      isFlg: true,
+      type: "",
+      label: [
+        "Label",
+        {
+          // 连接点的可配置标签
+          location: 0.5,
+          id: "label",
+          label: "",
+          cssClass: "aLabel",
+          events: {
+            click: (e, event) => {
+              const label = e.getElement();
+              const top = parseFloat(label.style.top) - 35;
+              const left = parseFloat(label.style.left) + 30;
+              this.showAddNode = true;
+              this.addNodeInfo = {
+                top: top,
+                left: left
+              };
+              event.stopPropagation();
+            }
+          }
+        }
+      ],
+      showAddNode: false,
+      addNodeInfo: {
+        top: "0",
+        left: "0",
+        isShwo: true
+      }
+    };
+  },
+  components: {
+    flowNode,
+    FlowNodeForm,
+    FlowNodeCondition,
+    addNodeBox
+  },
+  computed: {
+    user() {
+      return this.$store.state.user;
+    }
+  },
+  created() {
+    if (this.$route.query.type) {
+      this.type = this.$route.query.type;
+    } else if (this.$route.path == "/formBuilder") {
+      this.type = "customForm_" + this.$store.state.formBuilder.formDesId;
+    }
+  },
+  mounted() {
+    this.$nextTick(async() => {
+      // this.jsPlumb = jsPlumb.jsPlumb.getInstance();
+      this.jsPlumb = jsPlumb.jsPlumb
+        ? jsPlumb.jsPlumb.getInstance()
+        : jsPlumb.getInstance();
+      // 默认加载流程A的数据、在这里可以根据具体的业务返回符合流程数据格式的数据即可
+      const id = this.$route.params.id;
+      if (id) {
+        // this.processId = this.$route.params.id
+        this.processId = "5e7af90cf7b2ed3ef17c4216";
+        const res = await api.getProcessDetail({
+          id: "5e7af90cf7b2ed3ef17c4216"
+        });
+        if (res.data.state == "ok") {
+          this.processId = res.data.data._id;
+          const content = JSON.parse(res.data.data.content);
+          this.data = {
+            nodeList: content.nodeList,
+            lineList: content.lineList
+          };
+          this.$nextTick(() => {
+            // this.jsPlumb = jsPlumb.jsPlumb.getInstance();
+            this.jsPlumb = jsPlumb.jsPlumb
+              ? jsPlumb.jsPlumb.getInstance()
+              : jsPlumb.getInstance();
+            this.$nextTick(() => {
+              this.jsPlumbInit();
+            });
+          });
+        }
+      } else {
+        // this.dataReload(config.dataDefault)
+        this.queryProcessByCompanyAndUser();
+      }
+    });
+  },
+  methods: {
+    // 修改题目
+    changeName() {
+      if (this.conName) {
+        this.name = this.conName;
+      } else {
+        this.conName = this.name;
+      }
+      this.isEdit = true;
+    },
+    // 设置节点条件
+    setCondition(data) {
+      const conditions = Object.entries(data.form).map(([key, val]) => {
+        if (Array.isArray(val.value)) {
+          return {
+            ...val,
+            variable: key,
+            value: val.value.join(","),
+            opt: "=",
+            isArray: true
+          };
+        } else {
+          return {
+            ...val,
+            variable: key,
+            isArray: false
+          };
+        }
+      });
+      this.data.nodeList.forEach((item, index) => {
+        if (item.id == this.activeNode) {
+          item.conditions = conditions;
+          item.desc = data.desc.join(" 并且 ");
+        }
+      });
+      this.conditionVisible = false;
+    },
+    // 设置节点信息
+    setNode(data) {
+      // this.data
+      this.data.nodeList.forEach((item, index) => {
+        if (item.id == this.activeNode) {
+          item.approverType = data.approverType;
+          item.approvers = data.approvers;
+          item.notifiers = data.notifiers;
+        }
+      });
+    },
+    // 点击节点事件
+    showForm(node) {
+      this.activeNode = node.id;
+      if (node.type == "condition") {
+        this.conditionVisible = true;
+        let condition = this.data.nodeList.filter((item, index) => {
+          return item.id == node.id;
+        });
+        condition = lodash.cloneDeep(condition);
+        const json = {};
+        condition[0].conditions.forEach((item, index) => {
+          if (item.isArray) {
+            item.value = item.value.split(",");
+          }
+          json[item.variable] = item;
+        });
+        this.connection = json;
+        this.title = node.name;
+      } else if (node.type == "userTask") {
+        const nodeInfo = this.data.nodeList.filter((item, index) => {
+          return item.id == node.id;
+        });
+        const json = {
+          approverType: nodeInfo[0].approverType || "",
+          approvers: nodeInfo[0].approvers || [],
+          notifiers: nodeInfo[0].notifiers || []
+        };
+        this.nodeInfo = json;
+        this.nodeVisible = true;
+      }
+    },
+    // 修改条件名称
+    editName(data) {
+      this.title = data;
+      this.data.nodeList.forEach((item, index) => {
+        if (item.id == this.activeNode) {
+          item.name = data;
+        }
+      });
+    },
+    // 初始化数据
+    jsPlumbInit() {
+      const _this = this;
+      this.jsPlumb.ready(() => {
+        // 导入默认配置
+        const defaultConfig = _.cloneDeep(config.DefaultConfig);
+        defaultConfig.ConnectionOverlays.push(this.label);
+        this.jsPlumb.importDefaults(defaultConfig);
+        // 会使整个jsPlumb立即重绘。
+        this.jsPlumb.setSuspendDrawing(false, true);
+        // 初始化节点
+        this.loadEasyFlow();
+        // 单点击了连接线,
+        this.jsPlumb.bind("click", (conn, originalEvent) => {
+          const endSource = conn.endpoints[0].getUuid();
+          const endTarget = conn.endpoints[1].getUuid();
+          const sourceId = conn.sourceId.substring(15);
+          const targetId = conn.targetId.substring(15);
+          this.activeLine.sourceId = sourceId;
+          this.activeLine.targetId = targetId;
+          this.activeLine.sourceUUid =
+            endSource.indexOf("BottomCenter") > -1
+              ? "BottomCenter"
+              : "RightMiddle";
+          this.activeLine.targetUUid =
+            endTarget.indexOf("TopCenter") > -1 ? "TopCenter" : "RightMiddle";
+          this.addNodeInfo.isShow = true;
+          this.activeLine.isCondition = false;
+          this.data.nodeList.forEach((item) => {
+            if (
+              (item.id == sourceId || item.id == targetId) &&
+              item.type == "condition"
+            ) {
+              this.addNodeInfo.isShow = false;
+            }
+            if (item.id == sourceId && item.type == "condition") {
+              this.activeLine.isCondition = true;
+            }
+          });
+        });
+        // 连线
+        this.jsPlumb.bind("connection", (evt) => {
+          const from = evt.sourceId;
+          const to = evt.targetId;
+          const nodeFrom = evt.sourceId.substring(15);
+          const nodeTo = evt.targetId.substring(15);
+          const uuid0 = evt.connection.endpoints[0].getUuid();
+          const uuid1 = evt.connection.endpoints[1].getUuid();
+          if (this.loadEasyFlowFinish) {
+            const line = {
+              sourceId: from,
+              targetId: to,
+              nodeFrom: nodeFrom,
+              nodeTo: nodeTo,
+              condName: "",
+              uuid0: uuid0,
+              uuid1: uuid1
+            };
+            this.data.nodeList.forEach((item, index) => {
+              if (
+                item.id == nodeFrom &&
+                evt.sourceEndpoint.anchor.type == "RightMiddle"
+              ) {
+                item.ifNo = nodeTo;
+              } else if (item.id == nodeFrom) {
+                item.to = nodeTo;
+              }
+              if (item.id == nodeTo) {
+                item.from = nodeFrom;
+              }
+            });
+            this.data.lineList.push(line);
+          }
+        });
+
+        // 删除连线回调
+        this.jsPlumb.bind("connectionDetached", (evt) => {
+          this.deleteLine(evt.sourceId, evt.targetId, evt);
+        });
+
+        // 改变线的连接节点
+        this.jsPlumb.bind("connectionMoved", (evt) => {
+          this.changeLine(evt.originalSourceId, evt.originalTargetId);
+        });
+
+        // contextmenu
+        this.jsPlumb.bind("contextmenu", (evt) => {
+          // console.log("contextmenu", evt);
+        });
+
+        // 连线
+        this.jsPlumb.bind("beforeDrop", (evt) => {
+          const from = evt.sourceId;
+          const to = evt.targetId;
+          if (from === to) {
+            this.$message.error("不能连接自己");
+            return false;
+          }
+          if (this.hasLine(from, to)) {
+            this.$message.error("不能重复连线");
+            return false;
+          }
+          if (this.hashOppositeLine(from, to)) {
+            this.$message.error("不能回环");
+            return false;
+          }
+          return true;
+        });
+
+        // beforeDetach
+        this.jsPlumb.bind("beforeDetach", (evt) => {
+          this.deleteLine(evt.sourceId, evt.targetId);
+        });
+      });
+    },
+    // 加载流程图
+    loadEasyFlow() {
+      // 初始化节点
+      const _this = this;
+      this.maxId = 0;
+      this.maxUserTask = 1;
+      this.maxCondition = 0;
+      for (let i = 0; i < this.data.nodeList.length; i++) {
+        const node = this.data.nodeList[i];
+        _this.maxId =
+          parseFloat(node.id) > parseFloat(_this.maxId)
+            ? parseFloat(node.id)
+            : _this.maxId;
+
+        if (node.type == "start") {
+          _this._addEndpoints("Window" + node.id + "", ["BottomCenter"], []);
+        } else if (node.type == "end") {
+          _this._addEndpoints(
+            "Window" + node.id + "",
+            [],
+            ["TopCenter", "LeftMiddle", "RightMiddle"]
+          );
+        } else if (node.type == "condition") {
+          const sort = node.name.substring(4);
+          _this.maxCondition =
+            parseFloat(sort) > parseFloat(_this.maxCondition)
+              ? parseFloat(sort)
+              : _this.maxCondition;
+          _this._addEndpoints(
+            "Window" + node.id + "",
+            ["BottomCenter", "RightMiddle"],
+            ["TopCenter"]
+          );
+        } else {
+          const sort2 = node.name.substring(4);
+          _this.maxUserTask =
+            parseFloat(sort2) > parseFloat(_this.maxUserTask)
+              ? parseFloat(sort2)
+              : _this.maxUserTask;
+          _this._addEndpoints(
+            "Window" + node.id + "",
+            ["BottomCenter"],
+            ["TopCenter"]
+          );
+        }
+        _this.jsPlumb.draggable("flowchartWindow" + node.id, {
+          grid: [20, 20]
+        });
+      }
+
+      // 初始化连线
+      for (let i = 0; i < this.data.lineList.length; i++) {
+        const line = this.data.lineList[i];
+        _this.jsPlumb.connect({ uuids: [line.uuid0, line.uuid1] });
+      }
+      this.$nextTick(function() {
+        this.loadEasyFlowFinish = true;
+      });
+    },
+    // 删除线
+    deleteLine(from, to, evt) {
+      const _this = this;
+      const fromId = from.substring(15);
+      const toId = to.substring(15);
+      this.data.lineList = this.data.lineList.filter(function(line) {
+        if (line.sourceId == from && line.targetId == to) {
+          return false;
+        }
+        return true;
+      });
+    },
+    // 改变连线
+    changeLine(oldFrom, oldTo) {
+      this.deleteLine(oldFrom, oldTo);
+    },
+    // 改变节点的位置
+    changeNodeSite(data) {
+      for (var i = 0; i < this.data.nodeList.length; i++) {
+        const node = this.data.nodeList[i];
+        if (node.id === data.id) {
+          node.left = data.left;
+          node.top = data.top;
+        }
+      }
+    },
+    // 修改节点名称
+    changeNodeName(data) {
+      console.log(data);
+      this.data.nodeList.forEach((item) => {
+        if (item.id == data.id) {
+          item.name = data.name;
+        }
+      });
+    },
+    /**
+     * 拖拽结束后添加新的节点
+     * @param evt
+     * @param nodeMenu 被添加的节点对象
+     * @param mousePosition 鼠标拖拽结束的坐标
+     */
+    addNode(nodeMenu) {
+      this.showAddNode = false;
+      const nodeId = this.maxId + 1;
+      let left, top, from, to;
+      let nextTo = this.activeLine.targetId;
+      let fromNode;
+      let frist = true;
+      let isRight = false;
+      let oldTop = "";
+      // 循环修改下面节点的位置
+      while (nextTo !== "end") {
+        this.data.nodeList.forEach((item) => {
+          // 添加ifNo下添加节点
+          if (
+            frist &&
+            item.id == this.activeLine.sourceId &&
+            this.activeLine.isCondition
+          ) {
+            frist = false;
+            if (this.activeLine.sourceUUid == "RightMiddle") {
+              left = parseFloat(item.left) + 300 + "px";
+              top = parseFloat(item.top) + 170 + "px";
+              nextTo = item.ifNo == "5" ? "end" : item.ifNo;
+              isRight = true;
+            } else {
+              const nodeInfo = this.data.nodeList.filter(
+                (i) => i.id == this.activeLine.sourceId
+              );
+              left = nodeInfo[0].left;
+              top = parseFloat(nodeInfo[0].top) + 170 + "px";
+              nextTo = item.to;
+            }
+            oldTop = top;
+          }
+          // 普通添加
+          if (frist && item.id == nextTo && !this.activeLine.isCondition) {
+            frist = false;
+            const nodeInfo = this.data.nodeList.filter(
+              (i) => i.id == this.activeLine.sourceId
+            );
+            left = nodeInfo[0].left;
+            top = parseFloat(nodeInfo[0].top) + 170 + "px";
+            oldTop = top;
+          }
+          if (item.id == nextTo) {
+            item.top =
+              parseFloat(item.top) - parseFloat(oldTop) < 170
+                ? parseFloat(item.top) + 170 + "px"
+                : item.top;
+            oldTop = item.top;
+            nextTo = item.to;
+            return;
+          }
+        });
+      }
+      // 修改新增上下节点from to
+      this.data.nodeList.forEach((item, index) => {
+        if (
+          item.id == this.activeLine.sourceId &&
+          !this.activeLine.isCondition
+        ) {
+          from = item.id;
+          item.to = nodeId;
+        }
+        if (
+          item.id == this.activeLine.sourceId &&
+          this.activeLine.isCondition
+        ) {
+          from = item.id;
+          if (this.activeLine.sourceUUid == "RightMiddle") {
+            item.ifNo = nodeId;
+          } else {
+            item.to = nodeId;
+          }
+        }
+        if (item.id == this.activeLine.targetId) {
+          to = item.id;
+          item.from = nodeId;
+        }
+      });
+      // 添加新节点
+      const sort =
+        nodeMenu.type == "condition"
+          ? this.maxCondition + 1
+          : this.maxUserTask + 1;
+      const node = {
+        id: nodeId,
+        type: nodeMenu.type,
+        name: nodeMenu.name + sort,
+        left: left,
+        top: top,
+        from: from,
+        to: to
+      };
+      if (nodeMenu.type == "condition") {
+        node.conditions = [];
+        node.ifNo = "5"; // 连接到结束
+        node.desc = "";
+        this.maxCondition = sort;
+        // 条件节点新增连接到结束的连线
+        this.data.lineList.push({
+          nodeFrom: nodeId,
+          nodeTo: "5",
+          sourceId: "flowchartWindow" + nodeId,
+          targetId: "flowchartWindow5",
+          uuid0: "Window" + nodeId + "RightMiddle",
+          uuid1: "Window5RightMiddle"
+        });
+      } else if (nodeMenu.type == "userTask") {
+        node.approverType = "";
+        node.approvers = [];
+        node.notifiers = [];
+        this.maxUserTask = sort;
+      }
+      this.data.nodeList.push(node);
+      // 添加新增连线
+      this.data.lineList.forEach((item, index) => {
+        if (
+          item.nodeFrom == this.activeLine.sourceId &&
+          item.nodeTo == this.activeLine.targetId &&
+          item.uuid0.indexOf(this.activeLine.sourceUUid) > -1 &&
+          item.uuid1.indexOf(this.activeLine.targetUUid) > -1
+        ) {
+          this.data.lineList.splice(index, 1);
+        }
+      });
+      this.data.lineList.push({
+        nodeFrom: this.activeLine.sourceId,
+        nodeTo: nodeId,
+        sourceId: "flowchartWindow" + this.activeLine.sourceId,
+        targetId: "flowchartWindow" + nodeId,
+        uuid0: "Window" + this.activeLine.sourceId + this.activeLine.sourceUUid,
+        uuid1: "Window" + nodeId + "TopCenter"
+      });
+      this.data.lineList.push({
+        nodeFrom: nodeId,
+        nodeTo: this.activeLine.targetId,
+        sourceId: "flowchartWindow" + nodeId,
+        targetId: "flowchartWindow" + this.activeLine.targetId,
+        uuid0: "Window" + nodeId + "BottomCenter",
+        uuid1: "Window" + this.activeLine.targetId + this.activeLine.targetUUid
+      });
+      this.maxId = nodeId;
+      const _this = this;
+      this.dataReload({
+        nodeList: this.data.nodeList,
+        lineList: this.data.lineList
+      });
+    },
+    /**
+     * 删除节点
+     * @param nodeId 被删除节点的ID
+     */
+    deleteNode(nodeId, type) {
+      console.log(nodeId, type);
+      const _this = this;
+      const userTasknode = this.data.nodeList.filter(
+        (item) => item.type == "userTask"
+      );
+      if (userTasknode.length < 2 && type == "userTask") {
+        this.$message.error("至少保留一个流程节点");
+        return;
+      }
+      this.$confirm("确定要删除节点" + nodeId + "?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+        closeOnClickModal: false
+      })
+        .then(() => {
+          this.jsPlumb.removeAllEndpoints("flowchartWindow" + nodeId);
+          this.$nextTick(function() {
+            this.jsPlumb.remove("flowchartWindow" + nodeId);
+            var list = [];
+            const nodeInfo = this.data.nodeList.filter(
+              (item) => item.id == nodeId
+            );
+            const fromId = nodeInfo[0].from;
+            const toId = nodeInfo[0].to;
+            var nextTo = nodeInfo[0].to;
+            let ifNo = false;
+            // 循环修改下面节点的位置
+            while (nextTo !== "end" && nextTo) {
+              this.data.nodeList.forEach((item) => {
+                if (item.id == nextTo) {
+                  item.top =
+                    nextTo != 5 ? parseFloat(item.top) - 170 + "px" : item.top;
+                  nextTo = item.to;
+                }
+              });
+            }
+            this.data.nodeList.forEach((item, index) => {
+              if (item.id == fromId && item.to == nodeId) {
+                item.to = toId;
+              }
+              if (item.id == fromId && item.ifNo == nodeId) {
+                item.ifNo = toId;
+                ifNo = true;
+              }
+              if (item.id == toId) {
+                item.from = fromId;
+              }
+              if (item.id !== nodeId) {
+                list.push(item);
+              }
+            });
+            // 删除条件分支
+            if (nodeInfo[0].type == "condition") {
+              list = this.removeCondition(nodeInfo[0], list);
+            }
+            const fromLocal = ifNo ? "RightMiddle" : "BottomCenter";
+            const toLocal =
+              toId == 5 &&
+              parseFloat(nodeInfo[0].left) >
+                document.getElementById("flowchartWindow5").offsetLeft
+                ? "RightMiddle"
+                : "TopCenter";
+            this.data.lineList.push({
+              nodeFrom: fromId,
+              nodeTo: toId,
+              sourceId: "flowchartWindow" + fromId,
+              targetId: "flowchartWindow" + toId,
+              uuid0: "Window" + fromId + fromLocal,
+              uuid1: "Window" + toId + toLocal
+            });
+            this.dataReload({ nodeList: list, lineList: this.data.lineList });
+          });
+        })
+        .catch((err) => {});
+      return true;
+    },
+    removeCondition(nodeInfo, list) {
+      const _this = this;
+      var arr = [];
+      var removeId = nodeInfo.ifNo;
+      while (removeId != 5 && removeId) {
+        arr.push(removeId);
+        var removeNode = _this.data.nodeList.filter((i) => i.id == removeId);
+        removeId = removeNode[0].to;
+        if (removeNode[0].type == "condition") {
+          _this.removeCondition(removeNode[0], list);
+        }
+      }
+      list = list.filter((no) => arr.indexOf(no.id) == -1);
+      arr.forEach((item, index, a) => {
+        var removeA = a[index];
+        var removeB = a[index + 1] || "5";
+        if (removeA && removeB) {
+          _this.data.lineList = _this.data.lineList.filter(
+            (line) => !(line.nodeFrom == removeA && line.nodeTo == removeB)
+          );
+        }
+      });
+      return list;
+    },
+    /**
+     * 编辑节点
+     * @param nodeId 被点击编辑的节点的ID
+     */
+    editNode(nodeId) {
+      this.nodeFormVisible = true;
+      this.$nextTick(function() {
+        this.$refs.nodeForm.init(this.data, nodeId);
+      });
+    },
+    // 是否具有该线
+    hasLine(from, to) {
+      for (var i = 0; i < this.data.lineList.length; i++) {
+        var line = this.data.lineList[i];
+        if (line.from === from && line.to === to) {
+          return true;
+        }
+      }
+      return false;
+    },
+    // 是否含有相反的线
+    hashOppositeLine(from, to) {
+      return this.hasLine(to, from);
+    },
+    nodeRightMenu(nodeId, evt) {
+      this.menu.show = true;
+      this.menu.curNodeId = nodeId;
+      this.menu.left = evt.x + "px";
+      this.menu.top = evt.y + "px";
+    },
+    // 加载流程图
+    dataReload(data) {
+      this.easyFlowVisible = false;
+      this.data.nodeList = [];
+      this.data.lineList = [];
+      this.$nextTick(() => {
+        data = lodash.cloneDeep(data);
+        this.easyFlowVisible = true;
+        this.data = data;
+        this.$nextTick(() => {
+          // this.jsPlumb = jsPlumb.jsPlumb.getInstance();
+          this.jsPlumb = jsPlumb.jsPlumb
+            ? jsPlumb.jsPlumb.getInstance()
+            : jsPlumb.getInstance();
+          this.$nextTick(() => {
+            this.jsPlumbInit();
+          });
+        });
+      });
+    },
+    _addEndpoints(toId, sourceAnchors, targetAnchors) {
+      for (var i = 0; i < sourceAnchors.length; i++) {
+        var sourceUUID = toId + sourceAnchors[i];
+        this.jsPlumb.addEndpoint("flowchart" + toId, config.sourceEndpoint, {
+          anchor: sourceAnchors[i],
+          uuid: sourceUUID
+        });
+      }
+      for (var j = 0; j < targetAnchors.length; j++) {
+        var targetUUID = toId + targetAnchors[j];
+        this.jsPlumb.addEndpoint("flowchart" + toId, config.targetEndpoint, {
+          anchor: targetAnchors[j],
+          uuid: targetUUID
+        });
+      }
+    },
+    // 保存
+    async save() {
+      const user = this.$store.state.user;
+      let flg = false;
+      if (this.type == "") return;
+      this.data.nodeList.forEach((item) => {
+        if (item.type == "condition" && item.ifNo == "") {
+          this.$message.error(`条件节点: ${item.name} 没有闭合，请检查`);
+          flg = true;
+          return false;
+        }
+        if ((item.to == "" || item.from == "") && item.type != "end") {
+          this.$message.error(`节点: ${item.name} 流程未闭合，请检查`);
+          flg = true;
+          return false;
+        }
+        if (
+          item.type == "userTask" &&
+          item.approvers.length < 1 &&
+          item.notifiers.length < 1
+        ) {
+          this.$message.error(`节点: ${item.name} 申请人和抄送人不能为空`);
+          flg = true;
+          return false;
+        }
+      });
+      if (flg) {
+        return false;
+      }
+      const param = {
+        name: this.name,
+        desc: "",
+        creator: user.no + "",
+        processId: this.processId,
+        startId: "1",
+        endId: "5",
+        companyId: user.cno + "",
+        type: this.type,
+        switchOn: this.isFlg ? "1" : "0",
+        nodeList: this.data.nodeList,
+        lineList: this.data.lineList
+      };
+      if (this.$route.path == "/formBuilder") {
+        param.menuId = this.$store.state.formBuilder.menuId;
+      }
+      let res;
+      if (this.processId) {
+        const data = {
+          id: this.processId + "",
+          content: JSON.stringify(param)
+        };
+        res = await api.updateProcess(data);
+      } else {
+        const data = {
+          content: JSON.stringify(param)
+        };
+        res = await api.saveProcess(data);
+      }
+      if (res.data.state == "ok") {
+        this.$message.success({
+          message: this.processId ? "编辑成功" : "保存成功",
+          duration: 1500
+        });
+        this.processId = res.data.data;
+        this.type.indexOf("customForm_") == -1 &&
+          this.$removeTag("/processList");
+      } else {
+        this.$message.error({
+          message: res.data.msg ? res.data.msg : "保存失败",
+          duration: 1500
+        });
+      }
+    },
+    cancal() {
+      this.$confirm("有修改的内容未保存，确认离开吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          this.$removeTag("/processList");
+        })
+        .catch(() => {});
+    },
+    async queryProcessByCompanyAndUser() {
+      const param = {
+        userId: this.user.no + "",
+        companyId: this.user.cno + "",
+        type: this.type
+      };
+      const res = await api.queryProcessByCompanyAndUser(param);
+      if (res.data.data) {
+        this.processId = res.data.data._id;
+        const content = JSON.parse(res.data.data.content);
+        this.data = { nodeList: content.nodeList, lineList: content.lineList };
+        this.name = content.name;
+        this.isFlg = content.switchOn != 0;
+        this.$nextTick(() => {
+          this.jsPlumb = jsPlumb.jsPlumb
+            ? jsPlumb.jsPlumb.getInstance()
+            : jsPlumb.getInstance();
+          this.$nextTick(() => {
+            this.jsPlumbInit();
+          });
+        });
+      } else {
+        this.name = this.$route.query.name
+          ? this.$route.query.name + "流程"
+          : this.$store.state.formBuilder.name + "流程";
+        this.dataReload(config.dataDefault);
+      }
+    }
+  }
+};
+</script>
+<style>
+.right-plan {
+  height: calc(100vh - 100px);
+  overflow-y: auto;
+}
+.process-heard {
+  padding: 10px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.process-heard .el-icon-edit {
+  cursor: pointer;
+}
+.process-heard .process-title {
+  font-size: 18px;
+  margin-right: 10px;
+}
+#flowContainer {
+  height: 10000px;
+  /* background-color: rgb(251, 251, 251); */
+  /*background-color: #42b983;*/
+  position: relative;
+}
+
+.labelClass {
+  background-color: white;
+  padding: 5px;
+  opacity: 0.7;
+  border: 1px solid #346789;
+  /*border-radius: 10px;*/
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.aLabel {
+  width: 30px;
+  height: 30px;
+  background: url("../../assets/process/jia.png") center center no-repeat;
+  cursor: pointer;
+}
+.switch {
+  display: inline-block;
+  margin-right: 30px;
+}
+.switch > span {
+  margin-right: 10px;
+}
+</style>