qgb-process 0.1.52 → 0.1.53

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

@@ -1,976 +0,0 @@
-<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>