qgb-process 0.1.52 → 0.1.53

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

@@ -1,1322 +0,0 @@
-<template>
-  <div v-if="easyFlowVisible">
-    <el-row v-if="tools">
-      <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">{{ $route.query.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-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: ["tools"],
-  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() {
-      return this.$store.state.user;
-    },
-    orgSelectorList() {
-      return this.memberSelectorType === 0
-        ? this.nodeInfo.approvers
-        : this.nodeInfo.notifiers;
-    }
-  },
-  created() {
-    this.type =
-      this.$route.path == "/index"
-        ? "customForm_" + this.$store.state.formBuilder.formDesId
-        : this.$route.query.type;
-  },
-  mounted() {
-    this.jsPlumbInit();
-  },
-  methods: {
-    async save() {
-      const user = this.$store.state.user;
-      const flg = false;
-      if (this.$route.path == "/index") {
-        this.params.menuId = this.$store.state.formBuilder.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 };
-        this.name = this.$route.query.name
-          ? this.$route.query.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.$route.query.name
-            ? this.$route.query.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.$route.query.name
-              ? this.$route.query.name + "流程"
-              : this.$store.state.formBuilder.name + "流程";
-            this.initProcess();
-            const result = ProcessBuilder.treeToListLocal(this.root.lists);
-            this.id = result.length + 10;
-          }
-        } else {
-          this.name = this.$route.query.name
-            ? this.$route.query.name + "流程"
-            : this.$store.state.formBuilder.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>