qgb-process 0.2.3 → 0.2.7

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

@@ -1,1323 +1,1323 @@
-<template>
-  <div v-if="easyFlowVisible">
-    <el-row v-if="tools">
-      <el-col :span="24" class="right-plan">
-        <div class="process-heard">
-          <template v-if="queryName">
-            <div v-if="isEdit">
-              <span class="process-title">{{queryName}}流程</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-col>
-    </el-row>
-    <!--画布-->
-    <el-col :span="24">
-      <div id="flowContainer" class="container-process">
-        <!-- {{data.nodeList}} -->
-        <template v-for="(node, index) in data.nodeList">
-          <flow-node
-            ref="flowNode"
-            v-if="node.item.type !== 'addCondition'"
-            :key="index"
-            :node="node.item"
-            :level="node.level"
-            @deleteNode="deleteNode"
-            @changeNodeSite="changeNodeSite"
-            @nodeRightMenu="nodeRightMenu"
-            @editNode="editNode"
-            @showForm="showForm"
-            @changeName="changeNodeName"
-          ></flow-node>
-          <div
-            :id="'flowchartWindow' + node.item.id"
-            @click="addExtraCondition($event)"
-            class="add-condition"
-            :style="{ top: node.item.top, left: node.item.left }"
-            v-else
-            :key="node.item.id + '_add'"
-          >
-            添加条件
-          </div>
-        </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>
-      <div id="start" style="border:1px solid #000;width:200px;height:300;margin-bottom:150px">开始</div>
-      <div id="end"  style="border:1px solid #000;width:200px;height:300;margin-bottom:150px">结束</div>
-    </el-row> -->
-    <approver-selector
-      :approverList="approverSelectorData.approverList"
-      :notifierList="approverSelectorData.notifierList"
-      v-model="selectorVisible"
-      @save="setNode"
-      ref="approverSelector"
-    ></approver-selector>
-  </div>
-</template>
-
-<script>
-// import draggable from "vuedraggable";
-import jsPlumb from "jsplumb";
-import flowNode from "./components/planNode";
-// import nodeMenu from "./components/nodeMenu";
-import FlowNodeCondition from "./components/nodeConditionConfig";
-import addNodeBox from "./components/addNode";
-import approverSelector from "./components/approverSelector";
-import lodash from "lodash";
-import * as api from "../../api/apiProcess";
-import * as ProcessBuilder from "../../views/formBuilder/service/ProcessBuilder";
-export default {
-  props: ["queryInfo","tools","path","userInfo"],
-  data() {
-    return {
-      approverSelectorData: {
-        approverList: [],
-        notifierList: []
-      },
-      memberSelectorType: 0,
-      selectorVisible: false,
-      jsPlumb: null,
-      isFlg: true,
-      isEdit: true,
-      easyFlowVisible: true,
-      nodeVisible: false,
-      nodeInfo: {},
-      data: {
-        nodeList: [],
-        lineList: []
-      },
-      connection: {},
-      title: "",
-      conditionVisible: false,
-      showAddNode: false,
-      addNodeInfo: {
-        top: "0",
-        left: "0",
-        isShwo: true
-      },
-      root: new ProcessBuilder.Node(
-        ProcessBuilder.createItem(
-          "0",
-          "根节点",
-          "root",
-          "320px",
-          "20px",
-          "1",
-          "2"
-        )
-      ),
-      currentChooseItem: {},
-      currentNode: {
-        sourceId: "",
-        targetId: ""
-      },
-      id: 0,
-      params: {},
-      processId: "",
-      isFlg: true,
-      isClick: true,
-      name: "",
-      version: 1,
-      indexFlg: 1
-    };
-  },
-  components: {
-    flowNode,
-    // FlowNodeForm,
-    FlowNodeCondition,
-    addNodeBox,
-    approverSelector
-  },
-  computed: {
-    user: function() {
-      // this.$store.state.user
-      return "";
-    },
-    orgSelectorList() {
-      return this.memberSelectorType === 0
-        ? this.nodeInfo.approvers
-        : this.nodeInfo.notifiers;
-    }
-  },
-  created() {
-    this.type = this.queryInfo.type
-  },
-  mounted() {
-    this.jsPlumbInit();
-  },
-  methods: {
-    async save() {
-      // const user = this.$store.state.user;
-      const user = this.userInfo;
-      const flg = false;
-      if (this.path == "/index") {
-        // this.params.menuId = this.$store.state.formBuilder.menuId;
-         this.params.menuId  = ""
-      }
-      this.params.switchOn = this.isFlg ? "1" : "0";
-      let res;
-
-      if (this.processId) {
-        const data = {
-          id: this.processId + "",
-          content: JSON.stringify(this.params)
-        };
-        res = await api.updateProcess(data);
-      } else {
-        const data = {
-          content: JSON.stringify(this.params)
-        };
-        res = await api.saveProcess(data);
-      }
-
-      for (let i = 0; i < this.params.nodeList.length; i++) {
-        if (
-          this.params.nodeList[i].item.type == "userTask" &&
-          this.params.nodeList[i].item.approvers.length == 0 &&
-          this.params.nodeList[i].item.directorType &&
-          this.params.nodeList[i].item.directorType.type == 1
-        ) {
-          this.$message.error(
-            "当前审批流程中【" +
-              this.params.nodeList[i].item.name +
-              "】节点审批人不能为空"
-          );
-          return;
-        }
-      }
-      if (res.data.state == "ok") {
-        this.$message.success({
-          message: this.processId ? "编辑成功" : "保存成功",
-          duration: 1500
-        });
-        this.processId = res.data.data;
-        if (this.type.indexOf("customForm_") == -1) {
-          this.$removeTag1(this.$route);
-          this.$router.go(-1);
-        }
-      } else {
-        this.$message.error({
-          message: res.data.msg ? res.data.msg : "保存失败",
-          duration: 1500
-        });
-      }
-    },
-    cancal() {
-      this.$confirm("有修改的内容未保存，确认离开吗?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(() => {
-          this.$removeTag1(this.$route);
-          this.$router.go(-1);
-        })
-        .catch(() => {});
-    },
-    initProcess() {
-      this.easyFlowVisible = false;
-      const start = new ProcessBuilder.Node(
-        ProcessBuilder.createItem(
-          "1",
-          "开始",
-          "start",
-          "320px",
-          "20px",
-          "1",
-          "2"
-        )
-      );
-      const userTask = new ProcessBuilder.Node(
-        ProcessBuilder.createItem(
-          "2",
-          // "用户任务",
-          "审批人",
-          "userTask",
-          "320px",
-          "200px",
-          "1",
-          "3"
-        )
-      );
-
-
-
-      //   const userTask1 = new ProcessBuilder.Node(
-      //     ProcessBuilder.createItem(
-      //       "8",
-      //       // "用户任务",
-      //       "审批人",
-      //       "userTask",
-      //       "320px",
-      //       "400px",
-      //       "7",
-      //       "5"
-      //     )
-      //   );
-
-      const ccTask = new ProcessBuilder.Node(
-        ProcessBuilder.createItem(
-          "3",
-          // "用户任务",
-          "抄送人",
-          "ccTask",
-          "320px",
-          "350px",
-          "7",
-          "5"
-        )
-      );
-
-      const end = new ProcessBuilder.Node(
-        ProcessBuilder.createItem(
-          "5",
-          "结束",
-          "end",
-          "320px",
-          "330px",
-          "2",
-          "5"
-        )
-      );
-      this.root.add(start);
-      start.add(userTask);
-      userTask.add(ccTask);
-      ccTask.add(end)
-      // this.root.scan()
-      this.refresh();
-    },
-    refresh() {
-      this.jsPlumb.reset();
-      const result = this.root.lists;
-      const temp1 = result[0];
-      var nodeList = ProcessBuilder.treeToListLocal(result);
-
-      const self = this;
-      // 计算结束和开始标签相关的位置坐标
-      let left = 0;
-      const top = 0;
-      let end;
-      let start;
-      let addCondition;
-      let addConditionLeft = 0;
-      let maxLevel = 0;
-      for (let i = 0; i < nodeList.length; i++) {
-        const each = nodeList[i];
-        if (parseFloat(each.item.left) > left) {
-          left = parseFloat(each.item.left);
-        }
-        if (maxLevel < each.level && each.item.type != "end") {
-          maxLevel = each.level;
-        }
-        if (each.item.type == "end") {
-          end = each;
-        }
-        if (each.item.type == "start") {
-          start = each;
-        }
-
-        if (each.item.type == "addCondition") {
-          addCondition = each;
-          const min = addCondition.lists[0];
-          const max = addCondition.lists[addCondition.lists.length - 1];
-          const sum = parseFloat(min.item.left) + parseFloat(max.item.left);
-          if (addConditionLeft < sum / 2) {
-            addConditionLeft = sum / 2;
-          }
-          addCondition.item.left = sum / 2 + "px";
-        }
-      }
-      console.log(maxLevel);
-      const postion =
-        addConditionLeft > 0 ? addConditionLeft : (left + 320) / 2;
-      end.item.left = postion + "px";
-      end.level = maxLevel + 1;
-      end.item.top = 200 * (end.level - 1) + 20 + "px";
-      start.item.left = postion + "px";
-
-      this.data.nodeList = nodeList;
-      this.easyFlowVisible = true;
-      var label = [
-        "Label",
-        {
-          location: 0.0,
-          label: "",
-          cssClass: "aLabel",
-          events: {
-            click: function(e, originalEvent) {
-              const label = e.getElement();
-              const top = parseFloat(label.style.top) - 35;
-              const left = parseFloat(label.style.left) + 30;
-              self.showAddNode = true;
-              self.addNodeInfo = {
-                top: top,
-                left: left
-              };
-              var obj = e.component;
-              const sourceId = obj.sourceId.replace("flowchartWindow", "");
-              const targetId = obj.targetId.replace("flowchartWindow", "");
-              self.currentNode.sourceId = sourceId;
-              self.currentNode.targetId = targetId;
-            }
-          }
-        }
-      ];
-      var lineConnector = {
-        endpoint: ["Dot", { radius: 3 }],
-        connector: ["Flowchart"],
-        anchors: ["Bottom", "Top"],
-        overlays: [
-          [
-            "Arrow",
-            {
-              width: 10,
-              length: 10,
-              location: 1
-            }
-          ],
-          label
-        ]
-      };
-
-      var noLabelLineConn = {
-        endpoint: ["Dot", { radius: 3 }],
-        connector: ["Flowchart"],
-        anchors: ["Bottom", "Top"],
-        overlays: [
-          [
-            "Arrow",
-            {
-              width: 10,
-              length: 10,
-              location: 1
-            }
-          ]
-        ]
-      };
-      this.$nextTick(function() {
-        const gateWayList = [];
-        const _this = this;
-        for (let i = 0; i < this.data.nodeList.length; i++) {
-          const node = this.data.nodeList[i];
-
-          // 禁止移动开始节点
-          this.jsPlumb.draggable("flowchartWindow" + node.item.id, {
-            grid: [20, 20],
-            containment: "parent", // 设置只能在父级范围内拖动节点
-            stop: function(event) {
-              _this.isClick = false;
-              setTimeout(() => {
-                _this.isClick = true;
-              }, 1000);
-              event.e.preventDefault();
-            }
-          });
-
-          if (node.item.type != "end") {
-            if (node.lists.length > 0 && node.item.type == "addCondition") {
-              for (let j = 0; j < node.lists.length; j++) {
-                const each = node.lists[j];
-                const gateWayItem = {
-                  id: each.item.id,
-                  type: "condition",
-                  name: each.item.name,
-                  left: each.item.left,
-                  top: each.item.top,
-                  from: each.item.from,
-                  gateWayKey: node.item.id,
-                  to: each.item.to,
-                  conditions: each.item.conditions,
-                  ifNo: 10,
-                  desc: each.item.desc,
-                  isCondition: each.item.isCondition
-                };
-                gateWayList.push(gateWayItem);
-                this.jsPlumb.connect(
-                  {
-                    source: "flowchartWindow" + node.item.id,
-                    target: "flowchartWindow" + each.item.id
-                  },
-                  noLabelLineConn
-                );
-              }
-            } else {
-              this.jsPlumb.connect(
-                {
-                  source: "flowchartWindow" + node.item.id,
-                  target: "flowchartWindow" + node.item.to
-                },
-                lineConnector
-              );
-            }
-          }
-        }
-        this.loadEasyFlowFinish = true;
-        // 拼凑指定的数据结构 供后台进行接收解析
-
-        const params = {
-          name: this.name,
-          desc: "",
-          creator: this.user.no,
-          processId: this.processId,
-          startId: "1",
-          endId: "5",
-          companyId: this.user.cno,
-          type: this.type,
-          switchOn: this.isFlg ? "1" : "0",
-          gateWayList: gateWayList,
-          nodeList: this.data.nodeList,
-          lineList: [],
-          version: this.version
-        };
-        this.params = params;
-        // console.log("param----->", JSON.stringify(params));
-      });
-    },
-    async jsPlumbInit() {
-      // 初始化流程图实例信息
-      const self = this;
-      // this.jsPlumb = jsPlumb.getInstance();
-      this.jsPlumb = jsPlumb.jsPlumb
-        ? jsPlumb.jsPlumb.getInstance()
-        : jsPlumb.getInstance();
-      this.jsPlumb.importDefaults({
-        ConnectionsDetachable: false
-      });
-      const param = {
-        companyId: this.user.cno + "",
-        type: this.type
-      };
-
-      const res = await api.queryProcessByType(param);
-
-      if (res.data.data && res.data.data.gateWays) {
-        const content = JSON.parse(res.data.data.content);
-        this.data = { nodeList: content.nodeList, lineList: content.lineList };
-        // todo: 
-        this.name = this.queryInfo.name
-          ? this.queryInfo.name + "流程"
-          : content.name;
-        this.isFlg = content.switchOn != 0;
-        this.processId = res.data.data._id;
-        this.version = res.data.data.rootNode.version;
-        this.root.add(content.nodeList[0]);
-        // this.root.scan()
-        this.refresh();
-        const ids = content.nodeList.map((item) => parseFloat(item.item.id));
-        this.id = Math.max.apply(null, ids);
-      } else {
-        if (res.data.data && res.data.data._id) {
-          this.processId = res.data.data._id;
-          const processList = JSON.parse(res.data.data.content);
-          this.name = processList.name;
-          this.name = this.queryInfo.name
-            ? this.queryInfo.name + "流程"
-            : processList.name;
-
-          this.isFlg = processList.switchOn != 0;
-          this.version = res.data.data.rootNode.version;
-          const isflg = this.dataTonewList(processList.nodeList);
-          if (isflg) {
-            this.refresh();
-            const ids = processList.nodeList.map((item) => parseFloat(item.id));
-            this.id = Math.max.apply(null, ids);
-            setTimeout(async() => {
-              const data = {
-                id: this.processId + "",
-                content: JSON.stringify(this.params)
-              };
-              console.log(data);
-              const res = await api.updateProcessToNew(data);
-            }, 200);
-          } else {
-            this.name = this.queryInfo.name
-              ? this.queryInfo.name + "流程"
-              : "流程";
-            this.initProcess();
-            const result = ProcessBuilder.treeToListLocal(this.root.lists);
-            this.id = result.length + 10;
-          }
-        } else {
-          this.name = this.queryInfo.name
-            ? this.queryInfo.name + "流程"
-            : "流程";
-          this.initProcess();
-          const result = ProcessBuilder.treeToListLocal(this.root.lists);
-          this.id = result.length + 10;
-        }
-      }
-    },
-    dataTonewList(processList) {
-      let parent = this.root;
-      let currentId = 1;
-      let isflg = true;
-      while (parent.item.type != "end" && isflg) {
-        const currentNode = this.getCurrentNode(processList, currentId);
-        if (!currentNode) {
-          isflg = false;
-          break;
-        }
-        const node = new ProcessBuilder.Node(
-          ProcessBuilder.createItem(
-            currentNode.id,
-            currentNode.name,
-            currentNode.type,
-            currentNode.left,
-            currentNode.top,
-            currentNode.from,
-            currentNode.to
-          )
-        );
-        if (currentNode.type == "userTask") {
-          node.item = Object.assign(node.item, {
-            approverType: currentNode.approverType,
-            approvers: currentNode.approvers,
-            notifiers: currentNode.notifiers,
-            passCopy: currentNode.passCopy
-            // directorType: currentNode.directorType,
-          });
-        }
-        if (currentNode.type == "condition") {
-          currentId = currentNode.to;
-          parent.item.to = currentNode.to;
-        } else {
-          parent.add(node);
-          currentId = currentNode.to;
-          parent = node;
-        }
-      }
-      return isflg;
-    },
-    getCurrentNode(list, id) {
-      const node = list.filter((item) => item.id == id);
-      return node.length > 0 ? node[0] : null;
-    },
-    setNode(data) {
-      console.log(data);
-
-      const result = JSON.parse(data);
-      this.activeNode.directorType = result.directorType;
-      this.activeNode.approverType = result.approverType;
-      this.activeNode.approvers = result.approvers;
-      this.activeNode.notifiers = result.notifiers;
-      this.activeNode.passCopy = result.passCopy;
-
-      // 强制刷新子组件
-      this.$refs.flowNode.map(item => {
-        item.refreshFlowItem()
-      })
-    },
-    deleteNode(e, current) {
-    // 弹框提示是否需要继续进行当前操作.
-    //   if (e.type == "userTask") {
-    //     const approverNode = this.data.nodeList.filter(
-    //       (item) => item.item.type == "userTask"
-    //     );
-    //     if (approverNode.length < 2) {
-    //       this.$message.error("流程中必须保留一个审批节点");
-    //       return;
-    //     }
-    //   }
-    //   if (e.type == "ccTask") {
-    //     const approverNode = this.data.nodeList.filter(
-    //       (item) => item.item.type == "ccTask"
-    //     );
-    //     if (approverNode.length < 2) {
-    //       this.$message.error("流程中必须保留一个抄送节点");
-    //       return;
-    //     }
-    //   }
-      if (this.data.nodeList.length == 3) {
-        this.$message.error("流程中必须保留一个审批或抄送节点");
-        return;
-      }
-      this.$confirm("确定需要删除当前节点?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(() => {
-          let NextNode = null;
-
-          this.findNodeById(this.root, e.id);
-          const myself = _.cloneDeep(this.currentChooseItem);
-
-          this.findNodeById(this.root, e.from);
-
-          console.log(myself.item.type)
-          if (myself.item.type == "userTask") {
-            this.currentChooseItem.item.to = myself.item.to;
-            this.currentChooseItem.lists = myself.lists;
-            this.currentChooseItem.lists.forEach((item, index) => {
-              item.item.from = this.currentChooseItem.item.id;
-            });
-
-            this.data.nodeList.map((value, index) => {
-              const { type, from } = this.data.nodeList[index].item
-              if (type == "condition" && from == this.currentChooseItem.item.from) {
-                this.data.nodeList[index].item.to = myself.item.to
-              }
-            })
-
-          } else if (myself.item.type == "ccTask") {
-            this.currentChooseItem.item.to = myself.item.to;
-            this.currentChooseItem.lists = myself.lists;
-            this.currentChooseItem.lists.forEach((item, index) => {
-              item.item.from = this.currentChooseItem.item.id;
-            });
-
-            this.data.nodeList.map((value, index) => {
-              const { type, from } = this.data.nodeList[index].item
-              if (type == "condition" && from == this.currentChooseItem.item.from) {
-                this.data.nodeList[index].item.to = myself.item.to
-              }
-            })
-
-          } else {
-            const conditionLength = this.currentChooseItem.lists.length;
-            if (conditionLength > 2) {
-              this.currentChooseItem.lists.forEach((item, index) => {
-                if (item.item.id == e.id) {
-                  this.currentChooseItem.lists.splice(index, 1);
-                  if (index == 0) {
-                    this.currentChooseItem.item.to = this.currentChooseItem.lists[1].item.id;
-                    NextNode = this.currentChooseItem.lists[1];
-                  }
-                }
-              });
-            } else {
-              const listsItem = _.cloneDeep(
-                this.currentChooseItem.lists[0].lists[0]
-              );
-              const grandPaNodeNo = this.currentChooseItem.item.from;
-              if (listsItem) {
-                listsItem.item.from = grandPaNodeNo;
-                listsItem.item.left = this.currentChooseItem.item.left;
-                this.findNodeById(this.root, grandPaNodeNo);
-                this.currentChooseItem.item.to = listsItem.item.id;
-                // const end = new ProcessBuilder.Node(ProcessBuilder.createItem("5", "结束", "end", "320px", "380px", this.currentChooseItem.item.id, "5"));
-                this.currentChooseItem.lists = [listsItem];
-                this.data.nodeList.map((value, index) => {
-                  const { type, from } = this.data.nodeList[index].item
-                  if (type == "condition" && from == this.currentChooseItem.item.from) {
-                    this.data.nodeList[index].item.to = listsItem.item.id;
-                  }
-                })
-              } else {
-                this.findNodeById(this.root, grandPaNodeNo);
-                this.currentChooseItem.item.to = current.to
-
-                this.currentChooseItem.lists = myself.lists;
-                this.currentChooseItem.lists.forEach((item, index) => {
-                  item.item.from = this.currentChooseItem.item.id;
-                });
-
-                this.data.nodeList.map((value, index) => {
-                  const { type, from } = this.data.nodeList[index].item
-                  if (type == "condition" && from == this.currentChooseItem.item.from) {
-                    this.data.nodeList[index].item.to = current.to
-                  }
-                })
-                // const end = new ProcessBuilder.Node(
-                //   ProcessBuilder.createItem(
-                //     "5",
-                //     "测试结束",
-                //     "end",
-                //     "320px",
-                //     "380px",
-                //     this.currentChooseItem.item.id,
-                //     "5"
-                //   )
-                // );
-
-                // this.currentChooseItem.lists = [end];
-
-              }
-            }
-          }
-
-
-
-          const result = ProcessBuilder.treeToListLocal(this.root.lists);
-          if (NextNode) {
-            const node = result.filter((item) => item.item.type == "end");
-            const end = new ProcessBuilder.Node(
-              ProcessBuilder.createItem(
-                "5",
-                "结束",
-                "end",
-                "320px",
-                "380px",
-                "",
-                "5"
-              )
-            );
-            if (node.length < 1) {
-              const list = this.getLastList(NextNode);
-              list.push(end);
-            }
-            this.setResultToNode();
-          }
-          // TODO：记得抽取这个重新计算元素坐标的功能方法
-          result.sort(ProcessBuilder.compare("level"));
-          for (let i = 0; i < result.length; i++) {
-            // 重新计算当前结果中每一个元素的坐标位置信息
-            const each = result[i];
-            const top = 200 * (each.level - 1) + 20;
-            each.item.top = top + "px";
-          }
-          this.refresh();
-        })
-        .catch(() => {});
-    },
-    getLastList(node) {
-      if (node.lists.length == 0) {
-        return node.lists;
-      } else {
-        return this.getLastList(node.lists[0]);
-      }
-    },
-    changeNodeSite() {},
-    nodeRightMenu() {},
-    addNode(nodeMenu) {
-      this.showAddNode = false;
-      this.findNodeById(this.root, this.currentNode.sourceId);
-      this.id += 1;
-      let t;
-
-      if (nodeMenu.type == "condition") {
-        console.log(this.currentNode)
-        console.log(this.currentChooseItem)
-
-        t = new ProcessBuilder.Node(
-          ProcessBuilder.createItem(
-            this.id,
-            "条件" + this.id,
-            "addCondition",
-            this.currentChooseItem.item.left,
-            "20px",
-            this.currentNode.sourceId,
-            this.currentNode.targetId
-          )
-        );
-        this.currentChooseItem.item.isCondition = "1";
-        this.currentChooseItem.item.to = t.item.id;
-
-        let oldItem = null;
-        if (this.currentChooseItem.lists.length > 0) {
-          this.currentChooseItem.lists[0].item.from = t.item.id;
-          oldItem = _.cloneDeep(this.currentChooseItem.lists[0]);
-        }
-        this.id += 1;
-        const t1 = new ProcessBuilder.Node(
-          ProcessBuilder.createItem(
-            this.id,
-            "条件" + 1,
-            "condition",
-            "320px",
-            "20px",
-            this.currentNode.sourceId,
-            this.currentNode.targetId
-          )
-        );
-        t.item.to = t1.item.id;
-        t1.item.from = t.item.id;
-        t1.item.to = oldItem ? oldItem.item.id : this.currentNode.targetId;
-
-        if (oldItem && oldItem.item.type == "addCondition") {
-          t1.item.isCondition = "1";
-        }
-        if (oldItem) {
-          oldItem.item.from = t1.item.id;
-          t1.lists.push(oldItem);
-        }
-        this.currentChooseItem.lists[0] = t;
-        t.lists.push(t1);
-        this.addExtraCondition(event, true);
-      } else if (nodeMenu.type == "copyUser") {
-
-        // 抄送人节点
-        t = new ProcessBuilder.Node(
-          ProcessBuilder.createItem(
-            this.id,
-            "抄送人",
-            // + this.indexFlg
-            "ccTask",
-            "320px",
-            "20px",
-            this.currentNode.sourceId,
-            this.currentNode.targetId
-          )
-        );
-
-        this.currentChooseItem.item.isCondition = "0";
-        this.currentChooseItem.item.to = t.item.id;
-        t.item.left = this.currentChooseItem.item.left;
-
-        if (this.currentChooseItem.lists && this.currentChooseItem.lists.length > 0) {
-          this.currentChooseItem.lists[0].item.from = t.item.id;
-          const oldItem = _.cloneDeep(this.currentChooseItem.lists[0]);
-          this.currentChooseItem.lists[0] = t;
-          t.lists.push(oldItem);
-        } else {
-          this.currentChooseItem.lists.push(t);
-        }
-
-        const result = ProcessBuilder.treeToListLocal(this.root.lists);
-        result.sort(ProcessBuilder.compare("level"));
-        for (let i = 0; i < result.length; i++) {
-          // 重新计算当前结果中每一个元素的坐标位置信息
-          const each = result[i];
-          const top = 200 * (each.level - 1) + 20;
-          each.item.top = top + "px";
-        }
-      } else {
-        // debugger;
-        // this.indexFlg =0;
-
-        // if (this.currentChooseItem.item.name == "用户任务") {
-        //   index = Math.max.apply("", [parseFloat(1)]);
-        //   index++;
-        // } else {
-        //   index = Math.max.apply("", [
-        //     parseFloat(this.currentChooseItem.item.name.substring(4)),
-        // ]);
-        // this.indexFlg += 1;
-        // }
-        // let itemsdh = Math.max.apply("", [parseFloat(index)]);
-        // itemsdh++;
-        // debugger;
-        t = new ProcessBuilder.Node(
-          ProcessBuilder.createItem(
-            this.id,
-            // "用户任务",
-            "审批人",
-            // + this.indexFlg
-            "userTask",
-            "320px",
-            "20px",
-            this.currentNode.sourceId,
-            this.currentNode.targetId
-          )
-        );
-        this.currentChooseItem.item.isCondition = "0";
-        this.currentChooseItem.item.to = t.item.id;
-        t.item.left = this.currentChooseItem.item.left;
-        if (
-          this.currentChooseItem.lists &&
-          this.currentChooseItem.lists.length > 0
-        ) {
-          this.currentChooseItem.lists[0].item.from = t.item.id;
-          const oldItem = _.cloneDeep(this.currentChooseItem.lists[0]);
-          this.currentChooseItem.lists[0] = t;
-          t.lists.push(oldItem);
-        } else {
-          this.currentChooseItem.lists.push(t);
-        }
-        const result = ProcessBuilder.treeToListLocal(this.root.lists);
-        result.sort(ProcessBuilder.compare("level"));
-        for (let i = 0; i < result.length; i++) {
-          // 重新计算当前结果中每一个元素的坐标位置信息
-          const each = result[i];
-          const top = 200 * (each.level - 1) + 20;
-          each.item.top = top + "px";
-        }
-      }
-      this.refresh();
-    },
-    editNode() {},
-    showForm(node) {
-      console.log(this.data.nodeList, "showForm");
-      console.log(node)
-      this.activeNode = node;
-      if (node.type == "condition") {
-        const condition = lodash.cloneDeep(node);
-        const json = {};
-        condition.conditions.forEach((item, index) => {
-          if (item.isArray && item.variable != "userId") {
-            item.value = item.value.split(",");
-          }
-          json[item.variable] = item;
-        });
-        this.connection = json;
-        this.title = node.name;
-        this.conditionVisible = true;
-      } else if (node.type == "ccTask") {
-
-        // node.approvers.forEach((item) => {
-        //   item.name = item.userName;
-        //   item.memberNo = item.userId;
-        // });
-        // node.notifiers.forEach((item) => {
-        //   item.name = item.userName;
-        //   item.memberNo = item.userId;
-        // });
-        // console.log(node.directorType, "*****");
-        // // console.log(node.director ,"****director****");
-        // const jsList = {
-        //   approverType: node.approverType,
-        //   approvers: node.approvers || [],
-        //   notifiers: node.notifiers || [],
-
-        //   // director: node.director || {},
-        //   passCopy: node.passCopy
-        // };
-        // this.nodeInfo = jsList;
-        // if (node.directorType) {
-        //   jsList.directorType = node.directorType;
-        // } else {
-        //   jsList.directorType = {
-        //     typeName: "指定成员",
-        //     type: 1,
-        //     authType: "1"
-        //   };
-        // }
-        // if (node.approvers.length != 0) {
-        //   jsList.approvers = node.approvers;
-        // } else {
-        //   jsList.approvers = [{ directorId: 0, directorName: "直接主管" }];
-        // }
-        // // if (json.directorType.type==) {
-        // //
-        // // }
-        console.log(node)
-        const jsList = {
-          approverType: "1",
-          approvers: node.approvers || [],
-          notifiers: node.notifiers || []
-          // director: node.director || {},
-          // passCopy: node.passCopy
-        };
-
-        jsList.directorType = {
-          typeName: "指定成员",
-          type: 1,
-          authType: "1",
-          isCCTask: true // 是否抄送人
-        };
-
-        console.log(jsList)
-
-        this.$nextTick(() => {
-          this.$refs.approverSelector.init(jsList);
-        });
-
-      } else if (node.type == "userTask") {
-        node.approvers.forEach((item) => {
-          item.name = item.userName;
-          item.memberNo = item.userId;
-        });
-        node.notifiers.forEach((item) => {
-          item.name = item.userName;
-          item.memberNo = item.userId;
-        });
-        console.log(node.directorType, "*****");
-        // console.log(node.director ,"****director****");
-        const jsList = {
-          approverType: node.approverType,
-          approvers: node.approvers || [],
-          notifiers: node.notifiers || [],
-
-          // director: node.director || {},
-          passCopy: node.passCopy
-        };
-        this.nodeInfo = jsList;
-        if (node.directorType) {
-          jsList.directorType = node.directorType;
-        } else {
-          jsList.directorType = {
-            typeName: "指定成员",
-            type: 1,
-            authType: "1"
-          };
-        }
-        if (node.approvers.length != 0) {
-          jsList.approvers = node.approvers;
-        } else {
-          jsList.approvers = [{ directorId: 0, directorName: "直接主管" }];
-        }
-        // if (json.directorType.type==) {
-        //
-        // }
-
-        this.$nextTick(() => {
-          this.$refs.approverSelector.init(jsList);
-        });
-      }
-    },
-    changeNodeName(data) {
-      if (data.node.type == "condition") {
-        this.params.gateWayList.forEach((item, index) => {
-          if (item.id == data.node.id) {
-            item.name = data.name;
-          }
-        });
-      }
-      data.node.name = data.name;
-    },
-    editName(data) {
-      this.title = data;
-      this.activeNode.name = data;
-    },
-    // 设置节点条件
-    setCondition(data) {
-      console.log(data);
-      const conditions = Object.entries(data.form).map(([key, val]) => {
-        if (Array.isArray(val.value)) {
-          return {
-            ...val,
-            variable: key,
-            value:
-              key == "userId" || key == data.SxyData ? "" : val.value.join(","),
-            opt: "=",
-            isArray: true,
-            sponsors:
-              key == "userId" || key == data.SxyData ? val.sponsors : []
-          };
-        } else {
-          return {
-            ...val,
-            variable: key,
-            isArray: false
-          };
-        }
-      });
-      this.activeNode.conditions = conditions;
-      this.activeNode.desc = data.desc.join(" 并且 ");
-      this.params.gateWayList.forEach((item) => {
-        if (item.id == this.activeNode.id) {
-          item.conditions = this.activeNode.conditions;
-          item.desc = this.activeNode.desc;
-        }
-      });
-      this.conditionVisible = false;
-    },
-    // 加载流程图
-    dataReload(data) {},
-    findNodeById(data, id) {
-      const self = this;
-      if (data.item.id == id) {
-        self.currentChooseItem = data;
-        return;
-      } else {
-        data.lists.forEach((each, index) => {
-          if (each.item.id == id) {
-            self.currentChooseItem = each;
-            return;
-          }
-          self.findNodeById(each, id);
-        });
-      }
-    },
-    addExtraCondition(event, flg) {
-      // 添加一个新的Condition条件信息
-      if (!this.isClick) return;
-      const obj = event.currentTarget;
-      let id = obj.id;
-
-      if (id != "") {
-        id = id.replace("flowchartWindow", "");
-        this.findNodeById(this.root, parseInt(id));
-      }
-
-      this.id += 1;
-      let index = flg
-        ? 1
-        : Math.max.apply(
-          "",
-          this.currentChooseItem.lists.map((item) =>
-            parseFloat(item.item.name.substring(2))
-          )
-        );
-      index++;
-      const t1 = new ProcessBuilder.Node(
-        ProcessBuilder.createItem(
-          this.id,
-          "条件" + index,
-          "condition",
-          "320px",
-          "20px",
-          this.currentNode.sourceId,
-          this.currentNode.targetId
-        )
-      );
-      let oldItem;
-      const num = 0;
-      if (id == "") {
-        oldItem = this.currentChooseItem.lists[0];
-        const num = this.currentChooseItem.lists[0].lists.length;
-        this.currentChooseItem.lists[0].lists.push(t1);
-      } else {
-        oldItem = this.currentChooseItem;
-        this.currentChooseItem.lists.push(t1);
-      }
-
-      t1.item.from = oldItem.item.id;
-      t1.item.to = oldItem.lists[0].item.to;
-
-      this.setResultToNode();
-      this.refresh();
-    },
-    setResultToNode() {
-      const result = ProcessBuilder.treeToListLocal(this.root.lists);
-      result.sort(ProcessBuilder.compare("level"));
-      console.log(result, "result");
-      const level = 0;
-      const levelSort = 0;
-      let maxWidth = 320;
-      for (let i = result.length; i > 0; i--) {
-        // 重新计算当前结果中每一个元素的坐标位置信息
-        const each = result[i - 1];
-        for (let j = 0; j < each.lists.length; j++) {
-          const e = each.lists[j];
-          if (j == 0) {
-            e.item.left = maxWidth / 2 + "px";
-          } else {
-            maxWidth += 320;
-            e.item.left = maxWidth + "px";
-            this.resetNodeLeft(e);
-          }
-        }
-        const top = 200 * (each.level - 1) + 20;
-        each.item.top = top + "px";
-      }
-      this.data.nodeList = result;
-      //
-    },
-    resetNodeLeft(e) {
-      if (e.item.type == "condition" || e.item.type == "userTask") {
-        if (e.lists.length > 0) {
-          e.lists.forEach((con) => {
-            con.item.left = e.item.left;
-            this.resetNodeLeft(con);
-          });
-        }
-      } else if (e.item.type == "addCondition") {
-        e.lists.forEach((con, index) => {
-          con.item.left = parseFloat(e.item.left) - 160 + index * 320 + "px";
-          this.resetNodeLeft(con);
-        });
-      }
-    }
-  }
-};
-</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;
-  overflow: auto;
-  height: calc(100vh - 144px);
-}
-.container-process {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.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;
-  margin-top: 25px;
-  background: url("../../assets/process/jia.png") center center no-repeat;
-  cursor: pointer;
-}
-.switch {
-  display: inline-block;
-  margin-right: 30px;
-}
-.switch > span {
-  margin-right: 10px;
-}
-
-.add-condition {
-  color: #66a6e0;
-  font-size: 14px;
-  text-align: center;
-  padding: 10px 0;
-  border: 1px solid #66a6e0;
-  cursor: pointer;
-  position: absolute;
-  width: 200px;
-}
-
-.condition-container {
-  display: flex;
-}
-.condition-item {
-  margin: 30px;
-  padding: 20px;
-}
-.gray-background-class {
-  background-color: #f4f4f8;
-}
-</style>
+<template>
+  <div v-if="easyFlowVisible">
+    <el-row v-if="tools">
+      <el-col :span="24" class="right-plan">
+        <div class="process-heard">
+          <template v-if="queryName">
+            <div v-if="isEdit">
+              <span class="process-title">{{queryName}}流程</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-col>
+    </el-row>
+    <!--画布-->
+    <el-col :span="24">
+      <div id="flowContainer" class="container-process">
+        <!-- {{data.nodeList}} -->
+        <template v-for="(node, index) in data.nodeList">
+          <flow-node
+            ref="flowNode"
+            v-if="node.item.type !== 'addCondition'"
+            :key="index"
+            :node="node.item"
+            :level="node.level"
+            @deleteNode="deleteNode"
+            @changeNodeSite="changeNodeSite"
+            @nodeRightMenu="nodeRightMenu"
+            @editNode="editNode"
+            @showForm="showForm"
+            @changeName="changeNodeName"
+          ></flow-node>
+          <div
+            :id="'flowchartWindow' + node.item.id"
+            @click="addExtraCondition($event)"
+            class="add-condition"
+            :style="{ top: node.item.top, left: node.item.left }"
+            v-else
+            :key="node.item.id + '_add'"
+          >
+            添加条件
+          </div>
+        </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>
+      <div id="start" style="border:1px solid #000;width:200px;height:300;margin-bottom:150px">开始</div>
+      <div id="end"  style="border:1px solid #000;width:200px;height:300;margin-bottom:150px">结束</div>
+    </el-row> -->
+    <approver-selector
+      :approverList="approverSelectorData.approverList"
+      :notifierList="approverSelectorData.notifierList"
+      v-model="selectorVisible"
+      @save="setNode"
+      ref="approverSelector"
+    ></approver-selector>
+  </div>
+</template>
+
+<script>
+// import draggable from "vuedraggable";
+import jsPlumb from "jsplumb";
+import flowNode from "./components/planNode";
+// import nodeMenu from "./components/nodeMenu";
+import FlowNodeCondition from "./components/nodeConditionConfig";
+import addNodeBox from "./components/addNode";
+import approverSelector from "./components/approverSelector";
+import lodash from "lodash";
+import * as api from "../../api/apiProcess";
+import * as ProcessBuilder from "../../views/formBuilder/service/ProcessBuilder";
+export default {
+  props: ["queryInfo","tools","path","userInfo"],
+  data() {
+    return {
+      approverSelectorData: {
+        approverList: [],
+        notifierList: []
+      },
+      memberSelectorType: 0,
+      selectorVisible: false,
+      jsPlumb: null,
+      isFlg: true,
+      isEdit: true,
+      easyFlowVisible: true,
+      nodeVisible: false,
+      nodeInfo: {},
+      data: {
+        nodeList: [],
+        lineList: []
+      },
+      connection: {},
+      title: "",
+      conditionVisible: false,
+      showAddNode: false,
+      addNodeInfo: {
+        top: "0",
+        left: "0",
+        isShwo: true
+      },
+      root: new ProcessBuilder.Node(
+        ProcessBuilder.createItem(
+          "0",
+          "根节点",
+          "root",
+          "320px",
+          "20px",
+          "1",
+          "2"
+        )
+      ),
+      currentChooseItem: {},
+      currentNode: {
+        sourceId: "",
+        targetId: ""
+      },
+      id: 0,
+      params: {},
+      processId: "",
+      isFlg: true,
+      isClick: true,
+      name: "",
+      version: 1,
+      indexFlg: 1
+    };
+  },
+  components: {
+    flowNode,
+    // FlowNodeForm,
+    FlowNodeCondition,
+    addNodeBox,
+    approverSelector
+  },
+  computed: {
+    user: function() {
+      // this.$store.state.user
+      return "";
+    },
+    orgSelectorList() {
+      return this.memberSelectorType === 0
+        ? this.nodeInfo.approvers
+        : this.nodeInfo.notifiers;
+    }
+  },
+  created() {
+    this.type = this.queryInfo.type
+  },
+  mounted() {
+    this.jsPlumbInit();
+  },
+  methods: {
+    async save() {
+      // const user = this.$store.state.user;
+      const user = this.userInfo;
+      const flg = false;
+      if (this.path == "/index") {
+        // this.params.menuId = this.$store.state.formBuilder.menuId;
+         this.params.menuId  = ""
+      }
+      this.params.switchOn = this.isFlg ? "1" : "0";
+      let res;
+
+      if (this.processId) {
+        const data = {
+          id: this.processId + "",
+          content: JSON.stringify(this.params)
+        };
+        res = await api.updateProcess(data);
+      } else {
+        const data = {
+          content: JSON.stringify(this.params)
+        };
+        res = await api.saveProcess(data);
+      }
+
+      for (let i = 0; i < this.params.nodeList.length; i++) {
+        if (
+          this.params.nodeList[i].item.type == "userTask" &&
+          this.params.nodeList[i].item.approvers.length == 0 &&
+          this.params.nodeList[i].item.directorType &&
+          this.params.nodeList[i].item.directorType.type == 1
+        ) {
+          this.$message.error(
+            "当前审批流程中【" +
+              this.params.nodeList[i].item.name +
+              "】节点审批人不能为空"
+          );
+          return;
+        }
+      }
+      if (res.data.state == "ok") {
+        this.$message.success({
+          message: this.processId ? "编辑成功" : "保存成功",
+          duration: 1500
+        });
+        this.processId = res.data.data;
+        if (this.type.indexOf("customForm_") == -1) {
+          this.$removeTag1(this.$route);
+          this.$router.go(-1);
+        }
+      } else {
+        this.$message.error({
+          message: res.data.msg ? res.data.msg : "保存失败",
+          duration: 1500
+        });
+      }
+    },
+    cancal() {
+      this.$confirm("有修改的内容未保存，确认离开吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          this.$removeTag1(this.$route);
+          this.$router.go(-1);
+        })
+        .catch(() => {});
+    },
+    initProcess() {
+      this.easyFlowVisible = false;
+      const start = new ProcessBuilder.Node(
+        ProcessBuilder.createItem(
+          "1",
+          "开始",
+          "start",
+          "320px",
+          "20px",
+          "1",
+          "2"
+        )
+      );
+      const userTask = new ProcessBuilder.Node(
+        ProcessBuilder.createItem(
+          "2",
+          // "用户任务",
+          "审批人",
+          "userTask",
+          "320px",
+          "200px",
+          "1",
+          "3"
+        )
+      );
+
+
+
+      //   const userTask1 = new ProcessBuilder.Node(
+      //     ProcessBuilder.createItem(
+      //       "8",
+      //       // "用户任务",
+      //       "审批人",
+      //       "userTask",
+      //       "320px",
+      //       "400px",
+      //       "7",
+      //       "5"
+      //     )
+      //   );
+
+      const ccTask = new ProcessBuilder.Node(
+        ProcessBuilder.createItem(
+          "3",
+          // "用户任务",
+          "抄送人",
+          "ccTask",
+          "320px",
+          "350px",
+          "7",
+          "5"
+        )
+      );
+
+      const end = new ProcessBuilder.Node(
+        ProcessBuilder.createItem(
+          "5",
+          "结束",
+          "end",
+          "320px",
+          "330px",
+          "2",
+          "5"
+        )
+      );
+      this.root.add(start);
+      start.add(userTask);
+      userTask.add(ccTask);
+      ccTask.add(end)
+      // this.root.scan()
+      this.refresh();
+    },
+    refresh() {
+      this.jsPlumb.reset();
+      const result = this.root.lists;
+      const temp1 = result[0];
+      var nodeList = ProcessBuilder.treeToListLocal(result);
+
+      const self = this;
+      // 计算结束和开始标签相关的位置坐标
+      let left = 0;
+      const top = 0;
+      let end;
+      let start;
+      let addCondition;
+      let addConditionLeft = 0;
+      let maxLevel = 0;
+      for (let i = 0; i < nodeList.length; i++) {
+        const each = nodeList[i];
+        if (parseFloat(each.item.left) > left) {
+          left = parseFloat(each.item.left);
+        }
+        if (maxLevel < each.level && each.item.type != "end") {
+          maxLevel = each.level;
+        }
+        if (each.item.type == "end") {
+          end = each;
+        }
+        if (each.item.type == "start") {
+          start = each;
+        }
+
+        if (each.item.type == "addCondition") {
+          addCondition = each;
+          const min = addCondition.lists[0];
+          const max = addCondition.lists[addCondition.lists.length - 1];
+          const sum = parseFloat(min.item.left) + parseFloat(max.item.left);
+          if (addConditionLeft < sum / 2) {
+            addConditionLeft = sum / 2;
+          }
+          addCondition.item.left = sum / 2 + "px";
+        }
+      }
+      console.log(maxLevel);
+      const postion =
+        addConditionLeft > 0 ? addConditionLeft : (left + 320) / 2;
+      end.item.left = postion + "px";
+      end.level = maxLevel + 1;
+      end.item.top = 200 * (end.level - 1) + 20 + "px";
+      start.item.left = postion + "px";
+
+      this.data.nodeList = nodeList;
+      this.easyFlowVisible = true;
+      var label = [
+        "Label",
+        {
+          location: 0.0,
+          label: "",
+          cssClass: "aLabel",
+          events: {
+            click: function(e, originalEvent) {
+              const label = e.getElement();
+              const top = parseFloat(label.style.top) - 35;
+              const left = parseFloat(label.style.left) + 30;
+              self.showAddNode = true;
+              self.addNodeInfo = {
+                top: top,
+                left: left
+              };
+              var obj = e.component;
+              const sourceId = obj.sourceId.replace("flowchartWindow", "");
+              const targetId = obj.targetId.replace("flowchartWindow", "");
+              self.currentNode.sourceId = sourceId;
+              self.currentNode.targetId = targetId;
+            }
+          }
+        }
+      ];
+      var lineConnector = {
+        endpoint: ["Dot", { radius: 3 }],
+        connector: ["Flowchart"],
+        anchors: ["Bottom", "Top"],
+        overlays: [
+          [
+            "Arrow",
+            {
+              width: 10,
+              length: 10,
+              location: 1
+            }
+          ],
+          label
+        ]
+      };
+
+      var noLabelLineConn = {
+        endpoint: ["Dot", { radius: 3 }],
+        connector: ["Flowchart"],
+        anchors: ["Bottom", "Top"],
+        overlays: [
+          [
+            "Arrow",
+            {
+              width: 10,
+              length: 10,
+              location: 1
+            }
+          ]
+        ]
+      };
+      this.$nextTick(function() {
+        const gateWayList = [];
+        const _this = this;
+        for (let i = 0; i < this.data.nodeList.length; i++) {
+          const node = this.data.nodeList[i];
+
+          // 禁止移动开始节点
+          this.jsPlumb.draggable("flowchartWindow" + node.item.id, {
+            grid: [20, 20],
+            containment: "parent", // 设置只能在父级范围内拖动节点
+            stop: function(event) {
+              _this.isClick = false;
+              setTimeout(() => {
+                _this.isClick = true;
+              }, 1000);
+              event.e.preventDefault();
+            }
+          });
+
+          if (node.item.type != "end") {
+            if (node.lists.length > 0 && node.item.type == "addCondition") {
+              for (let j = 0; j < node.lists.length; j++) {
+                const each = node.lists[j];
+                const gateWayItem = {
+                  id: each.item.id,
+                  type: "condition",
+                  name: each.item.name,
+                  left: each.item.left,
+                  top: each.item.top,
+                  from: each.item.from,
+                  gateWayKey: node.item.id,
+                  to: each.item.to,
+                  conditions: each.item.conditions,
+                  ifNo: 10,
+                  desc: each.item.desc,
+                  isCondition: each.item.isCondition
+                };
+                gateWayList.push(gateWayItem);
+                this.jsPlumb.connect(
+                  {
+                    source: "flowchartWindow" + node.item.id,
+                    target: "flowchartWindow" + each.item.id
+                  },
+                  noLabelLineConn
+                );
+              }
+            } else {
+              this.jsPlumb.connect(
+                {
+                  source: "flowchartWindow" + node.item.id,
+                  target: "flowchartWindow" + node.item.to
+                },
+                lineConnector
+              );
+            }
+          }
+        }
+        this.loadEasyFlowFinish = true;
+        // 拼凑指定的数据结构 供后台进行接收解析
+
+        const params = {
+          name: this.name,
+          desc: "",
+          creator: this.user.no,
+          processId: this.processId,
+          startId: "1",
+          endId: "5",
+          companyId: this.user.cno,
+          type: this.type,
+          switchOn: this.isFlg ? "1" : "0",
+          gateWayList: gateWayList,
+          nodeList: this.data.nodeList,
+          lineList: [],
+          version: this.version
+        };
+        this.params = params;
+        // console.log("param----->", JSON.stringify(params));
+      });
+    },
+    async jsPlumbInit() {
+      // 初始化流程图实例信息
+      const self = this;
+      // this.jsPlumb = jsPlumb.getInstance();
+      this.jsPlumb = jsPlumb.jsPlumb
+        ? jsPlumb.jsPlumb.getInstance()
+        : jsPlumb.getInstance();
+      this.jsPlumb.importDefaults({
+        ConnectionsDetachable: false
+      });
+      const param = {
+        companyId: this.user.cno + "",
+        type: this.type
+      };
+
+      const res = await api.queryProcessByType(param);
+
+      if (res.data.data && res.data.data.gateWays) {
+        const content = JSON.parse(res.data.data.content);
+        this.data = { nodeList: content.nodeList, lineList: content.lineList };
+        // todo: 
+        this.name = this.queryInfo.name
+          ? this.queryInfo.name + "流程"
+          : content.name;
+        this.isFlg = content.switchOn != 0;
+        this.processId = res.data.data._id;
+        this.version = res.data.data.rootNode.version;
+        this.root.add(content.nodeList[0]);
+        // this.root.scan()
+        this.refresh();
+        const ids = content.nodeList.map((item) => parseFloat(item.item.id));
+        this.id = Math.max.apply(null, ids);
+      } else {
+        if (res.data.data && res.data.data._id) {
+          this.processId = res.data.data._id;
+          const processList = JSON.parse(res.data.data.content);
+          this.name = processList.name;
+          this.name = this.queryInfo.name
+            ? this.queryInfo.name + "流程"
+            : processList.name;
+
+          this.isFlg = processList.switchOn != 0;
+          this.version = res.data.data.rootNode.version;
+          const isflg = this.dataTonewList(processList.nodeList);
+          if (isflg) {
+            this.refresh();
+            const ids = processList.nodeList.map((item) => parseFloat(item.id));
+            this.id = Math.max.apply(null, ids);
+            setTimeout(async() => {
+              const data = {
+                id: this.processId + "",
+                content: JSON.stringify(this.params)
+              };
+              console.log(data);
+              const res = await api.updateProcessToNew(data);
+            }, 200);
+          } else {
+            this.name = this.queryInfo.name
+              ? this.queryInfo.name + "流程"
+              : "流程";
+            this.initProcess();
+            const result = ProcessBuilder.treeToListLocal(this.root.lists);
+            this.id = result.length + 10;
+          }
+        } else {
+          this.name = this.queryInfo.name
+            ? this.queryInfo.name + "流程"
+            : "流程";
+          this.initProcess();
+          const result = ProcessBuilder.treeToListLocal(this.root.lists);
+          this.id = result.length + 10;
+        }
+      }
+    },
+    dataTonewList(processList) {
+      let parent = this.root;
+      let currentId = 1;
+      let isflg = true;
+      while (parent.item.type != "end" && isflg) {
+        const currentNode = this.getCurrentNode(processList, currentId);
+        if (!currentNode) {
+          isflg = false;
+          break;
+        }
+        const node = new ProcessBuilder.Node(
+          ProcessBuilder.createItem(
+            currentNode.id,
+            currentNode.name,
+            currentNode.type,
+            currentNode.left,
+            currentNode.top,
+            currentNode.from,
+            currentNode.to
+          )
+        );
+        if (currentNode.type == "userTask") {
+          node.item = Object.assign(node.item, {
+            approverType: currentNode.approverType,
+            approvers: currentNode.approvers,
+            notifiers: currentNode.notifiers,
+            passCopy: currentNode.passCopy
+            // directorType: currentNode.directorType,
+          });
+        }
+        if (currentNode.type == "condition") {
+          currentId = currentNode.to;
+          parent.item.to = currentNode.to;
+        } else {
+          parent.add(node);
+          currentId = currentNode.to;
+          parent = node;
+        }
+      }
+      return isflg;
+    },
+    getCurrentNode(list, id) {
+      const node = list.filter((item) => item.id == id);
+      return node.length > 0 ? node[0] : null;
+    },
+    setNode(data) {
+      console.log(data);
+
+      const result = JSON.parse(data);
+      this.activeNode.directorType = result.directorType;
+      this.activeNode.approverType = result.approverType;
+      this.activeNode.approvers = result.approvers;
+      this.activeNode.notifiers = result.notifiers;
+      this.activeNode.passCopy = result.passCopy;
+
+      // 强制刷新子组件
+      this.$refs.flowNode.map(item => {
+        item.refreshFlowItem()
+      })
+    },
+    deleteNode(e, current) {
+    // 弹框提示是否需要继续进行当前操作.
+    //   if (e.type == "userTask") {
+    //     const approverNode = this.data.nodeList.filter(
+    //       (item) => item.item.type == "userTask"
+    //     );
+    //     if (approverNode.length < 2) {
+    //       this.$message.error("流程中必须保留一个审批节点");
+    //       return;
+    //     }
+    //   }
+    //   if (e.type == "ccTask") {
+    //     const approverNode = this.data.nodeList.filter(
+    //       (item) => item.item.type == "ccTask"
+    //     );
+    //     if (approverNode.length < 2) {
+    //       this.$message.error("流程中必须保留一个抄送节点");
+    //       return;
+    //     }
+    //   }
+      if (this.data.nodeList.length == 3) {
+        this.$message.error("流程中必须保留一个审批或抄送节点");
+        return;
+      }
+      this.$confirm("确定需要删除当前节点?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          let NextNode = null;
+
+          this.findNodeById(this.root, e.id);
+          const myself = _.cloneDeep(this.currentChooseItem);
+
+          this.findNodeById(this.root, e.from);
+
+          console.log(myself.item.type)
+          if (myself.item.type == "userTask") {
+            this.currentChooseItem.item.to = myself.item.to;
+            this.currentChooseItem.lists = myself.lists;
+            this.currentChooseItem.lists.forEach((item, index) => {
+              item.item.from = this.currentChooseItem.item.id;
+            });
+
+            this.data.nodeList.map((value, index) => {
+              const { type, from } = this.data.nodeList[index].item
+              if (type == "condition" && from == this.currentChooseItem.item.from) {
+                this.data.nodeList[index].item.to = myself.item.to
+              }
+            })
+
+          } else if (myself.item.type == "ccTask") {
+            this.currentChooseItem.item.to = myself.item.to;
+            this.currentChooseItem.lists = myself.lists;
+            this.currentChooseItem.lists.forEach((item, index) => {
+              item.item.from = this.currentChooseItem.item.id;
+            });
+
+            this.data.nodeList.map((value, index) => {
+              const { type, from } = this.data.nodeList[index].item
+              if (type == "condition" && from == this.currentChooseItem.item.from) {
+                this.data.nodeList[index].item.to = myself.item.to
+              }
+            })
+
+          } else {
+            const conditionLength = this.currentChooseItem.lists.length;
+            if (conditionLength > 2) {
+              this.currentChooseItem.lists.forEach((item, index) => {
+                if (item.item.id == e.id) {
+                  this.currentChooseItem.lists.splice(index, 1);
+                  if (index == 0) {
+                    this.currentChooseItem.item.to = this.currentChooseItem.lists[1].item.id;
+                    NextNode = this.currentChooseItem.lists[1];
+                  }
+                }
+              });
+            } else {
+              const listsItem = _.cloneDeep(
+                this.currentChooseItem.lists[0].lists[0]
+              );
+              const grandPaNodeNo = this.currentChooseItem.item.from;
+              if (listsItem) {
+                listsItem.item.from = grandPaNodeNo;
+                listsItem.item.left = this.currentChooseItem.item.left;
+                this.findNodeById(this.root, grandPaNodeNo);
+                this.currentChooseItem.item.to = listsItem.item.id;
+                // const end = new ProcessBuilder.Node(ProcessBuilder.createItem("5", "结束", "end", "320px", "380px", this.currentChooseItem.item.id, "5"));
+                this.currentChooseItem.lists = [listsItem];
+                this.data.nodeList.map((value, index) => {
+                  const { type, from } = this.data.nodeList[index].item
+                  if (type == "condition" && from == this.currentChooseItem.item.from) {
+                    this.data.nodeList[index].item.to = listsItem.item.id;
+                  }
+                })
+              } else {
+                this.findNodeById(this.root, grandPaNodeNo);
+                this.currentChooseItem.item.to = current.to
+
+                this.currentChooseItem.lists = myself.lists;
+                this.currentChooseItem.lists.forEach((item, index) => {
+                  item.item.from = this.currentChooseItem.item.id;
+                });
+
+                this.data.nodeList.map((value, index) => {
+                  const { type, from } = this.data.nodeList[index].item
+                  if (type == "condition" && from == this.currentChooseItem.item.from) {
+                    this.data.nodeList[index].item.to = current.to
+                  }
+                })
+                // const end = new ProcessBuilder.Node(
+                //   ProcessBuilder.createItem(
+                //     "5",
+                //     "测试结束",
+                //     "end",
+                //     "320px",
+                //     "380px",
+                //     this.currentChooseItem.item.id,
+                //     "5"
+                //   )
+                // );
+
+                // this.currentChooseItem.lists = [end];
+
+              }
+            }
+          }
+
+
+
+          const result = ProcessBuilder.treeToListLocal(this.root.lists);
+          if (NextNode) {
+            const node = result.filter((item) => item.item.type == "end");
+            const end = new ProcessBuilder.Node(
+              ProcessBuilder.createItem(
+                "5",
+                "结束",
+                "end",
+                "320px",
+                "380px",
+                "",
+                "5"
+              )
+            );
+            if (node.length < 1) {
+              const list = this.getLastList(NextNode);
+              list.push(end);
+            }
+            this.setResultToNode();
+          }
+          // TODO：记得抽取这个重新计算元素坐标的功能方法
+          result.sort(ProcessBuilder.compare("level"));
+          for (let i = 0; i < result.length; i++) {
+            // 重新计算当前结果中每一个元素的坐标位置信息
+            const each = result[i];
+            const top = 200 * (each.level - 1) + 20;
+            each.item.top = top + "px";
+          }
+          this.refresh();
+        })
+        .catch(() => {});
+    },
+    getLastList(node) {
+      if (node.lists.length == 0) {
+        return node.lists;
+      } else {
+        return this.getLastList(node.lists[0]);
+      }
+    },
+    changeNodeSite() {},
+    nodeRightMenu() {},
+    addNode(nodeMenu) {
+      this.showAddNode = false;
+      this.findNodeById(this.root, this.currentNode.sourceId);
+      this.id += 1;
+      let t;
+
+      if (nodeMenu.type == "condition") {
+        console.log(this.currentNode)
+        console.log(this.currentChooseItem)
+
+        t = new ProcessBuilder.Node(
+          ProcessBuilder.createItem(
+            this.id,
+            "条件" + this.id,
+            "addCondition",
+            this.currentChooseItem.item.left,
+            "20px",
+            this.currentNode.sourceId,
+            this.currentNode.targetId
+          )
+        );
+        this.currentChooseItem.item.isCondition = "1";
+        this.currentChooseItem.item.to = t.item.id;
+
+        let oldItem = null;
+        if (this.currentChooseItem.lists.length > 0) {
+          this.currentChooseItem.lists[0].item.from = t.item.id;
+          oldItem = _.cloneDeep(this.currentChooseItem.lists[0]);
+        }
+        this.id += 1;
+        const t1 = new ProcessBuilder.Node(
+          ProcessBuilder.createItem(
+            this.id,
+            "条件" + 1,
+            "condition",
+            "320px",
+            "20px",
+            this.currentNode.sourceId,
+            this.currentNode.targetId
+          )
+        );
+        t.item.to = t1.item.id;
+        t1.item.from = t.item.id;
+        t1.item.to = oldItem ? oldItem.item.id : this.currentNode.targetId;
+
+        if (oldItem && oldItem.item.type == "addCondition") {
+          t1.item.isCondition = "1";
+        }
+        if (oldItem) {
+          oldItem.item.from = t1.item.id;
+          t1.lists.push(oldItem);
+        }
+        this.currentChooseItem.lists[0] = t;
+        t.lists.push(t1);
+        this.addExtraCondition(event, true);
+      } else if (nodeMenu.type == "copyUser") {
+
+        // 抄送人节点
+        t = new ProcessBuilder.Node(
+          ProcessBuilder.createItem(
+            this.id,
+            "抄送人",
+            // + this.indexFlg
+            "ccTask",
+            "320px",
+            "20px",
+            this.currentNode.sourceId,
+            this.currentNode.targetId
+          )
+        );
+
+        this.currentChooseItem.item.isCondition = "0";
+        this.currentChooseItem.item.to = t.item.id;
+        t.item.left = this.currentChooseItem.item.left;
+
+        if (this.currentChooseItem.lists && this.currentChooseItem.lists.length > 0) {
+          this.currentChooseItem.lists[0].item.from = t.item.id;
+          const oldItem = _.cloneDeep(this.currentChooseItem.lists[0]);
+          this.currentChooseItem.lists[0] = t;
+          t.lists.push(oldItem);
+        } else {
+          this.currentChooseItem.lists.push(t);
+        }
+
+        const result = ProcessBuilder.treeToListLocal(this.root.lists);
+        result.sort(ProcessBuilder.compare("level"));
+        for (let i = 0; i < result.length; i++) {
+          // 重新计算当前结果中每一个元素的坐标位置信息
+          const each = result[i];
+          const top = 200 * (each.level - 1) + 20;
+          each.item.top = top + "px";
+        }
+      } else {
+        // debugger;
+        // this.indexFlg =0;
+
+        // if (this.currentChooseItem.item.name == "用户任务") {
+        //   index = Math.max.apply("", [parseFloat(1)]);
+        //   index++;
+        // } else {
+        //   index = Math.max.apply("", [
+        //     parseFloat(this.currentChooseItem.item.name.substring(4)),
+        // ]);
+        // this.indexFlg += 1;
+        // }
+        // let itemsdh = Math.max.apply("", [parseFloat(index)]);
+        // itemsdh++;
+        // debugger;
+        t = new ProcessBuilder.Node(
+          ProcessBuilder.createItem(
+            this.id,
+            // "用户任务",
+            "审批人",
+            // + this.indexFlg
+            "userTask",
+            "320px",
+            "20px",
+            this.currentNode.sourceId,
+            this.currentNode.targetId
+          )
+        );
+        this.currentChooseItem.item.isCondition = "0";
+        this.currentChooseItem.item.to = t.item.id;
+        t.item.left = this.currentChooseItem.item.left;
+        if (
+          this.currentChooseItem.lists &&
+          this.currentChooseItem.lists.length > 0
+        ) {
+          this.currentChooseItem.lists[0].item.from = t.item.id;
+          const oldItem = _.cloneDeep(this.currentChooseItem.lists[0]);
+          this.currentChooseItem.lists[0] = t;
+          t.lists.push(oldItem);
+        } else {
+          this.currentChooseItem.lists.push(t);
+        }
+        const result = ProcessBuilder.treeToListLocal(this.root.lists);
+        result.sort(ProcessBuilder.compare("level"));
+        for (let i = 0; i < result.length; i++) {
+          // 重新计算当前结果中每一个元素的坐标位置信息
+          const each = result[i];
+          const top = 200 * (each.level - 1) + 20;
+          each.item.top = top + "px";
+        }
+      }
+      this.refresh();
+    },
+    editNode() {},
+    showForm(node) {
+      console.log(this.data.nodeList, "showForm");
+      console.log(node)
+      this.activeNode = node;
+      if (node.type == "condition") {
+        const condition = lodash.cloneDeep(node);
+        const json = {};
+        condition.conditions.forEach((item, index) => {
+          if (item.isArray && item.variable != "userId") {
+            item.value = item.value.split(",");
+          }
+          json[item.variable] = item;
+        });
+        this.connection = json;
+        this.title = node.name;
+        this.conditionVisible = true;
+      } else if (node.type == "ccTask") {
+
+        // node.approvers.forEach((item) => {
+        //   item.name = item.userName;
+        //   item.memberNo = item.userId;
+        // });
+        // node.notifiers.forEach((item) => {
+        //   item.name = item.userName;
+        //   item.memberNo = item.userId;
+        // });
+        // console.log(node.directorType, "*****");
+        // // console.log(node.director ,"****director****");
+        // const jsList = {
+        //   approverType: node.approverType,
+        //   approvers: node.approvers || [],
+        //   notifiers: node.notifiers || [],
+
+        //   // director: node.director || {},
+        //   passCopy: node.passCopy
+        // };
+        // this.nodeInfo = jsList;
+        // if (node.directorType) {
+        //   jsList.directorType = node.directorType;
+        // } else {
+        //   jsList.directorType = {
+        //     typeName: "指定成员",
+        //     type: 1,
+        //     authType: "1"
+        //   };
+        // }
+        // if (node.approvers.length != 0) {
+        //   jsList.approvers = node.approvers;
+        // } else {
+        //   jsList.approvers = [{ directorId: 0, directorName: "直接主管" }];
+        // }
+        // // if (json.directorType.type==) {
+        // //
+        // // }
+        console.log(node)
+        const jsList = {
+          approverType: "1",
+          approvers: node.approvers || [],
+          notifiers: node.notifiers || []
+          // director: node.director || {},
+          // passCopy: node.passCopy
+        };
+
+        jsList.directorType = {
+          typeName: "指定成员",
+          type: 1,
+          authType: "1",
+          isCCTask: true // 是否抄送人
+        };
+
+        console.log(jsList)
+
+        this.$nextTick(() => {
+          this.$refs.approverSelector.init(jsList);
+        });
+
+      } else if (node.type == "userTask") {
+        node.approvers.forEach((item) => {
+          item.name = item.userName;
+          item.memberNo = item.userId;
+        });
+        node.notifiers.forEach((item) => {
+          item.name = item.userName;
+          item.memberNo = item.userId;
+        });
+        console.log(node.directorType, "*****");
+        // console.log(node.director ,"****director****");
+        const jsList = {
+          approverType: node.approverType,
+          approvers: node.approvers || [],
+          notifiers: node.notifiers || [],
+
+          // director: node.director || {},
+          passCopy: node.passCopy
+        };
+        this.nodeInfo = jsList;
+        if (node.directorType) {
+          jsList.directorType = node.directorType;
+        } else {
+          jsList.directorType = {
+            typeName: "指定成员",
+            type: 1,
+            authType: "1"
+          };
+        }
+        if (node.approvers.length != 0) {
+          jsList.approvers = node.approvers;
+        } else {
+          jsList.approvers = [{ directorId: 0, directorName: "直接主管" }];
+        }
+        // if (json.directorType.type==) {
+        //
+        // }
+
+        this.$nextTick(() => {
+          this.$refs.approverSelector.init(jsList);
+        });
+      }
+    },
+    changeNodeName(data) {
+      if (data.node.type == "condition") {
+        this.params.gateWayList.forEach((item, index) => {
+          if (item.id == data.node.id) {
+            item.name = data.name;
+          }
+        });
+      }
+      data.node.name = data.name;
+    },
+    editName(data) {
+      this.title = data;
+      this.activeNode.name = data;
+    },
+    // 设置节点条件
+    setCondition(data) {
+      console.log(data);
+      const conditions = Object.entries(data.form).map(([key, val]) => {
+        if (Array.isArray(val.value)) {
+          return {
+            ...val,
+            variable: key,
+            value:
+              key == "userId" || key == data.SxyData ? "" : val.value.join(","),
+            opt: "=",
+            isArray: true,
+            sponsors:
+              key == "userId" || key == data.SxyData ? val.sponsors : []
+          };
+        } else {
+          return {
+            ...val,
+            variable: key,
+            isArray: false
+          };
+        }
+      });
+      this.activeNode.conditions = conditions;
+      this.activeNode.desc = data.desc.join(" 并且 ");
+      this.params.gateWayList.forEach((item) => {
+        if (item.id == this.activeNode.id) {
+          item.conditions = this.activeNode.conditions;
+          item.desc = this.activeNode.desc;
+        }
+      });
+      this.conditionVisible = false;
+    },
+    // 加载流程图
+    dataReload(data) {},
+    findNodeById(data, id) {
+      const self = this;
+      if (data.item.id == id) {
+        self.currentChooseItem = data;
+        return;
+      } else {
+        data.lists.forEach((each, index) => {
+          if (each.item.id == id) {
+            self.currentChooseItem = each;
+            return;
+          }
+          self.findNodeById(each, id);
+        });
+      }
+    },
+    addExtraCondition(event, flg) {
+      // 添加一个新的Condition条件信息
+      if (!this.isClick) return;
+      const obj = event.currentTarget;
+      let id = obj.id;
+
+      if (id != "") {
+        id = id.replace("flowchartWindow", "");
+        this.findNodeById(this.root, parseInt(id));
+      }
+
+      this.id += 1;
+      let index = flg
+        ? 1
+        : Math.max.apply(
+          "",
+          this.currentChooseItem.lists.map((item) =>
+            parseFloat(item.item.name.substring(2))
+          )
+        );
+      index++;
+      const t1 = new ProcessBuilder.Node(
+        ProcessBuilder.createItem(
+          this.id,
+          "条件" + index,
+          "condition",
+          "320px",
+          "20px",
+          this.currentNode.sourceId,
+          this.currentNode.targetId
+        )
+      );
+      let oldItem;
+      const num = 0;
+      if (id == "") {
+        oldItem = this.currentChooseItem.lists[0];
+        const num = this.currentChooseItem.lists[0].lists.length;
+        this.currentChooseItem.lists[0].lists.push(t1);
+      } else {
+        oldItem = this.currentChooseItem;
+        this.currentChooseItem.lists.push(t1);
+      }
+
+      t1.item.from = oldItem.item.id;
+      t1.item.to = oldItem.lists[0].item.to;
+
+      this.setResultToNode();
+      this.refresh();
+    },
+    setResultToNode() {
+      const result = ProcessBuilder.treeToListLocal(this.root.lists);
+      result.sort(ProcessBuilder.compare("level"));
+      console.log(result, "result");
+      const level = 0;
+      const levelSort = 0;
+      let maxWidth = 320;
+      for (let i = result.length; i > 0; i--) {
+        // 重新计算当前结果中每一个元素的坐标位置信息
+        const each = result[i - 1];
+        for (let j = 0; j < each.lists.length; j++) {
+          const e = each.lists[j];
+          if (j == 0) {
+            e.item.left = maxWidth / 2 + "px";
+          } else {
+            maxWidth += 320;
+            e.item.left = maxWidth + "px";
+            this.resetNodeLeft(e);
+          }
+        }
+        const top = 200 * (each.level - 1) + 20;
+        each.item.top = top + "px";
+      }
+      this.data.nodeList = result;
+      //
+    },
+    resetNodeLeft(e) {
+      if (e.item.type == "condition" || e.item.type == "userTask") {
+        if (e.lists.length > 0) {
+          e.lists.forEach((con) => {
+            con.item.left = e.item.left;
+            this.resetNodeLeft(con);
+          });
+        }
+      } else if (e.item.type == "addCondition") {
+        e.lists.forEach((con, index) => {
+          con.item.left = parseFloat(e.item.left) - 160 + index * 320 + "px";
+          this.resetNodeLeft(con);
+        });
+      }
+    }
+  }
+};
+</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;
+  overflow: auto;
+  height: calc(100vh - 144px);
+}
+.container-process {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.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;
+  margin-top: 25px;
+  background: url("../../assets/process/jia.png") center center no-repeat;
+  cursor: pointer;
+}
+.switch {
+  display: inline-block;
+  margin-right: 30px;
+}
+.switch > span {
+  margin-right: 10px;
+}
+
+.add-condition {
+  color: #66a6e0;
+  font-size: 14px;
+  text-align: center;
+  padding: 10px 0;
+  border: 1px solid #66a6e0;
+  cursor: pointer;
+  position: absolute;
+  width: 200px;
+}
+
+.condition-container {
+  display: flex;
+}
+.condition-item {
+  margin: 30px;
+  padding: 20px;
+}
+.gray-background-class {
+  background-color: #f4f4f8;
+}
+</style>