cloud-ui/src/views/quest/node/Home.vue

<template>
  <div class="flow_region">
    <div class="nodes-wrap" align="center">
      <el-button
        style="width: 75%;margin-top: 5px;margin-bottom: 5px;"
        type="primary" @click="save">保存修改</el-button>
      <el-button
        style="width: 75%;margin-left: 0;margin-bottom: 5px;"
        @click="$router.push({path: '/quest/task'})">返回</el-button>
      <hr>
      <div v-for="item in nodeTypeList" :key="item.type" class="node" draggable="true" @dragstart="drag($event, item)">
        <div class="log">
          <img :src="item.logImg" alt="">
        </div>
        <div class="name">{{item.typeName}}</div>
      </div>
    </div>
    <div id="flowWrap" ref="flowWrap" class="flow-wrap" @drop="drop($event)" @dragover="allowDrop($event)"
    style="width: 98%;height: 790px;margin-left: 10px;margin-right: 10px;">
      <div id="flow">
        <div v-show="auxiliaryLine.isShowXLine" class="auxiliary-line-x" :style="{width: auxiliaryLinePos.width, top:auxiliaryLinePos.y + 'px', left: auxiliaryLinePos.offsetX + 'px'}" />
        <div v-show="auxiliaryLine.isShowYLine" class="auxiliary-line-y" :style="{height: auxiliaryLinePos.height, left:auxiliaryLinePos.x + 'px', top: auxiliaryLinePos.offsetY + 'px'}" />
        <flowNode v-for="item in data.nodeList" :id="item.id" :key="item.id" :node="item" @setNodeName="setNodeName" @deleteNode = "deleteNode" @changeLineState="changeLineState" />
      </div>
    </div>

  </div>
</template>

<script>
import {jsPlumb} from "jsplumb"
import {nodeTypeList} from './config/init'
import {jsplumbConnectOptions, jsplumbSetting, jsplumbSourceOptions, jsplumbTargetOptions} from './config/commonConfig'
// import data from "./config/data.json"
import flowNode from "./components/node-item"
import {batch, listNode} from "../../../api/quest/node";
import {GenNonDuplicateID} from "../../../common/until";
import panzoom from "panzoom";
import methods from "./config/methods";

export default {
  name: "FlowEdit",
  components: {
    flowNode
  },
  data() {
    return {
      jsPlumb: null,
      currentItem: null,
      nodeTypeList: nodeTypeList,
      nodeTypeObj: {},
      data: {
        nodeList:[],
        lineList:[]
      },
      selectedList: [],
      jsplumbSetting: jsplumbSetting,
      jsplumbConnectOptions: jsplumbConnectOptions,
      jsplumbSourceOptions: jsplumbSourceOptions,
      jsplumbTargetOptions: jsplumbTargetOptions,
      auxiliaryLine: { isShowXLine: false, isShowYLine: false},  //对齐辅助线是否显示
      auxiliaryLinePos: { width: '100%', height: '100%', offsetX: 0, offsetY: 0, x: 20, y: 20 },
      commonGrid: [5, 5], //节点移动最小距离
      selectModuleFlag: false, //多选标识
      rectAngle: {
        px: '',  //多选框绘制时的起始点横坐标
        py: '',  //多选框绘制时的起始点纵坐标
        left: 0,
        top: 0,
        height: 0,
        width: 0
      },
      taskCode: this.$route.query.taskCode
    };
  },
  mounted() {
    this.getList(); //参数查询方法
    this.jsPlumb = jsPlumb.getInstance();
    this.fixNodesPosition()
    this.$nextTick(() => {
      setTimeout(() => {
        this.init()
      },1000)
    });
  },
  methods: {
    ...methods,
    // 查询数据库节点信息并整合成jsPlumb格式
    getList() {
      listNode({taskCode: this.taskCode}).then(res => {
        const rows = res.data.rows
        for (let i = 0; i < rows.length; i++) {
          const r = flowNode.methods.toJsPlumbNode(rows[i])
          this.data.nodeList.push({
            id: r.node.id,
            type: r.node.type,
            typeName: r.node.typeName,
            nodeName: r.node.nodeName,
            top: r.node.top,
            left: r.node.left
          })
          if (r.line) {
            r.line.forEach(v => {
              this.data.lineList.push({
                from: v.from,
                to: v.to,
                label: "连线名称",
                id: GenNonDuplicateID(8),
                Remark: ""
              });
            })
          }
        }
        this.data.nodeList.forEach(node => {
          nodeTypeList.forEach(v => {
            if (node.type === v.type) {
              node.typeName = v.typeName
              node.logImg = v.logImg
              node.log_bg_color = v.log_bg_color
            }
          })
        })
        // console.log(data)
        console.log(this.data)
      })
    },
    // 保存修改按钮
    save() {
      // 1. 获取所有节点与连线信息
      const nodeList = this.data.nodeList
      const lineList = this.data.lineList
      console.log(this.data)
      // 2. 处理所有信息,将jsPlumb类型 ==> 数据表类型
      const nodeData = []
      nodeList.forEach(node => {
        let preLine = ''
        let nextLine = ''
        lineList.forEach(line => {
          // 如果节点的id是起点
          if (node.id === line.from){
            // 给下一节点标识赋值
            nextLine = line.to
          }
          // 如果节点id是终点
          if (node.id === line.to){
            // 给上一节点标识赋值
            preLine = line.from
          }
        })
        let newNode = flowNode.methods.toMysqlNode(node,preLine,nextLine)
        newNode.taskCode = this.$route.query.taskCode
        nodeData.push(newNode)
      })
      console.log(nodeData)
      // 3. 激活接口将参数传递到后端
      batch(nodeData).then(res => {
        alert(res.msg)
      })
    },
  }
};
</script>

<style lang="less" scoped>
.flow_region {
  display: flex;
  width: 98%;
  height: 90%;
  margin: 20px auto;
  border: 1px solid #ccc;
  .nodes-wrap {
    width: 150px;
    height: 790px;
    border-right: 1px solid #ccc;
    .node {
      display: flex;
      height: 40px;
      width: 80%;
      margin: 5px auto;
      border: 1px solid #ccc;
      line-height: 40px;
      &:hover{
        cursor: grab;
      }
      &:active{
        cursor: grabbing;
      }
      .log {
        width: 40px;
        height: 40px;
      }
      .name {
        width: 0;
        flex-grow: 1;
      }
    }
  }
  .flow-wrap {
    height: 100%;
    position: relative;
    overflow: hidden;
    outline: none !important;
    flex-grow: 1;
    background-image: url("../../../assets/point.png");
    #flow {
      position: relative;
      width: 100%;
      height: 100%;
      .auxiliary-line-x {
        position: absolute;
        border: .5px dashed #2ab1e8;
        z-index: 1008;
      }
      .auxiliary-line-y {
        position: absolute;
        border: .5px dashed #2ab1e8;
        z-index: 1008;
      }
    }
  }
}
</style>

<style lang="less">
.jtk-connector.active{
  z-index: 1008;
  path {
    stroke: #150042;
    stroke-width: 1.5;
    animation: ring;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    stroke-dasharray: 5;
  }
}
@keyframes ring {
  from {
    stroke-dashoffset: 50;
  }
  to {
    stroke-dashoffset: 0;
  }
}
</style>