el-table树形数据 + jsPlumb , 批量映射字段 -526互联

<template>

  <el-dialog
    title="映射"
    append-to-body
    :visible.sync="mappingShow"
    :close-on-click-modal="false"
    :before-close="closeFileMappingDialog"
    width="1000px"
  >
    <el-card class="box-card" shadow="always">

      <el-row style="margin-bottom: 10px;" >
        <el-col :span="24" >
          {{ routeRow.mappingname }}
        </el-col>
      </el-row>
      <el-row >
        <!--      :gutter="20" -->

        <div id="jsplumbContainer" @scroll="connect"   >

          <el-col :span="8">
            <el-table id="leftTable"
                      :data="leftTab"
                      row-key="code"
                      default-expand-all
                      border
                      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                      :row-class-name="({row}) => `leftRow Id-${row.code}`"
            >
               <el-table-column  label="名称" prop="name"></el-table-column>
<!--              <el-table-column  label="代码" >-->
<!--                  <template slot-scope="scope">-->
<!--                     <div :class="`leftRow Id-${scope.row.code}`" :id="scope.row.code" >-->
<!--                       {{ scope.row.code }}-->
<!--                     </div>-->
<!--                  </template>-->
<!--              </el-table-column>-->
            </el-table>
          </el-col>

          <el-col :span="8" :offset="8">
            <el-table id="rightTable"
                      :data="rightTab"
                      row-key="code"
                      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                      default-expand-all
                      border
                      :row-class-name="({row}) => `rightRow Id-${row.code}`"
            >
               <el-table-column label="名称" prop="name"></el-table-column>
<!--              <el-table-column  label="代码" >-->
<!--                <template slot-scope="scope">-->
<!--                  <div :id="scope.row.code" >-->
<!--&lt;!&ndash;                    :class="`rightRow Id-${scope.row.code}`"  &ndash;&gt;-->
<!--                    {{ scope.row.code }}-->
<!--                  </div>-->
<!--                </template>-->
<!--              </el-table-column>-->
            </el-table>

          </el-col>
        </div>

      </el-row>


    </el-card>

  </el-dialog>

</template>

<script>

// import { jsPlumb } from 'jsplumb'
import jsPlumb from 'jsplumb'
//jsplumb使用
let $jsPlumb = jsPlumb.jsPlumb;

let instance = null;
const relationship = []

export default {
  name: "fieldMapping",
  props:{
    currentTreeData:{},
    leftTab: [],
    rightTab: [],
  },
  data() {
    return {
      mappingShow: false,
      routeRow:{},
      contrastId: this.currentTreeData.id, // 点击树id

      pointList: [ ],
      count: 0,

    }
  },
  watch(){

  },
  created() {

    this.init3();

  },
  mounted(){


  },
  methods:{

    openFileMappingDialog(row){
      // console.log('选择数据 row ：', row )
      this.routeRow = row ;
      
      this.mappingShow = true ;

        this.initJsPlumb() ;
     
    },
    closeFileMappingDialog(){
      this.mappingShow = false ;
    },

    initJsPlumb(){
      let that = this ;
      that.$nextTick(()=> {
        instance.ready(function () {

          setTimeout(()=>{
          // console.log(' /////// initJsPlumb ///////////////' )

              instance.setContainer('jsplumbContainer');
              // 初始化jsPlumb 创建jsPlumb实例
              // that.init3();
              // 设置可以为连线起点和连线终点的元素
              that.setContainer();
              // 设置默认连线
              //  that.setConnect(relationship);
              // 绑定事件监听
              that.setEvent();
              // 连线前的判断
              // that.beforeDrop3();

          },1000)

        });
      })
    },
    init3() {

      instance = $jsPlumb.getInstance({
        //父级元素id；假如页面元素所在上层不同，最外层父级一定要设置
        Container: "jsplumbContainer",
        // DragOptions : { cursor: "pointer", zIndex:2000 },//拖动的时候
        PaintStyle: { //连接线样式
          stroke: '#BCBCBC',
          strokeWidth: 5,
        },
        HoverPaintStyle: {
          stroke: '#1E90FF'
        },
        EndpointStyle: {
          fill: '#BCBCBC',
          radius: 6
        },
        EndpointHoverStyle: {
          fill: '#1E90FF',
          radius: 8
        }, // 端点悬停样式
        Rectangle: {

        },
        ConnectionsDetachable: true, //连线是否可用鼠标分离
        ReattachConnections: true, //是否重新连接使用鼠标分离的线
      });

    },
    // 截取元素类名中的id
    interceptId(className){
      return className.slice(className.indexOf('-') + 1);
    },
    // 设置可以连线的元素
    setContainer(){
      // console.log(' /////// 设置可以连线的元素 ///////////////' )
        const leftElList = document.querySelectorAll('.leftRow'); // 左侧行元素集合
        const rightElList = document.querySelectorAll('.rightRow');  // 右侧行元素集合
        // 将dom元素设置为连线的起点或者终点 设置了起点的元素才能开始连线 设置为终点的元素才能为连线终点
        // console.log('leftElList ==>', leftElList )
        instance.batch(function () {
          [leftElList, rightElList].forEach((trList, index) => {
            trList.forEach((tr) => {
              // const id = that.interceptId(tr.classList[2]);
              instance.setDraggable(tr, false); // 是否支持拖拽
              if (index === 0) {
                // const item = that.leftTab.find(i => i.id == id);
                  // 判断是否有子项,若没有则设置为起点
                  //  !item?.hasChild && instance.makeSource(tr, {
                instance.makeSource(tr, {
                  // anchor: ["Right"],  // 设置端点位置
                  anchor: [1, 0.5, 0, 0], // 左 上 右 下
                  allowLoopback: true, //允许回连
                  maxConnections: -1, //最大连接数（-1表示不限制）
                  endpoint: "Dot"
                })
              }
              else {
                // const item = that.rightTab.find(i => i.id == id);
                  // 判断是否有子项,若没有则设置为终点
                // !item?.hasChild && instance.makeTarget(tr, {
                instance.makeTarget(tr, {
                  // anchor: ["Left"], // 设置端点位置
                  anchor: [0, 0.5, 0, 0],  // 左 上 右 下
                  allowLoopback: true, //允许回连
                  maxConnections: -1, //最大连接数（-1表示不限制）
                });
              }
            });
          });
        });

    },
    // 设置默认连线
    setConnect(relationship) {
      setTimeout(() => {
        relationship.forEach(function (data) {
          // source是连线起点元素id target是连线终点元素id
          instance.connect({
            source: document.querySelector(`.Id-${data.sourceId}`),
            target: document.querySelector(`.Id-${data.targetId}`)
          });
        });
      })
    },
    // 绑定事件监听
    setEvent() {
      let that = this ;
        // 连线事件
      instance.bind("connection", function (connInfo, originalEvent) {
        // connInfo是jsPlumb对象 可以打印出来康康有哪些东西 source
        // console.log('连线事件 connInfo :', connInfo, )
        let sourceid = that.interceptId(connInfo.source.classList[2]);
        let targetid = that.interceptId(connInfo.target.classList[2]);
        console.log('连线事件 :', sourceid, targetid, connInfo.source.classList,   )
        that.pointList.push({
          sourceId:  sourceid,
          targetId:  targetid ,
          pointIds: sourceid + "-" + targetid
        })
        that.pointList = that.unique(that.pointList)
        // console.log('连线事件 pointList :', that.pointList, )
      });
        // 点击连接线删除该条线
      instance.bind('click', function (connection, originalEvent) {
        let sourceid = that.interceptId(connection.source.classList[2]);
        let targetid = that.interceptId(connection.target.classList[2]);
        console.log('删除事件 :', sourceid, targetid , connection, )

        that.$confirm("确认删除映射么?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          closeOnClickModal: false,
          type: "warning",
        })
          .then(() => {
            instance.deleteConnection(connection);
            for(let i = 0; i < that.pointList.length; i++) {
              let item = that.pointList[i];
              if ( item.sourceId == sourceid && item.targetId == targetid ) {
                that.pointList.splice(i, 1);
              }
            }

          })
          .catch(() => {});

        // console.log('删除事件 pointList :', that.pointList, )

      })

    },
    unique(arr) {
      const res = new Map();
      return arr.filter((arr) => !res.has(arr.pointIds) && res.set(arr.pointIds, 1));
    },
    // 页面滚动，连线跟随变化
    connect() {
      this.count++;
      if (this.count >= 3) {
        let connections = instance.getAllConnections();
        let linePoints = [];
        for (let i = connections.length - 1; i >= 0; i--) {
          linePoints.push([connections[i].sourceId, connections[i].targetId]);
          instance.deleteConnection(connections[i]);
        }
        for (let i = 0; i < linePoints.length; i++) {
          instance.connect({
            source: linePoints[i][0],
            target: linePoints[i][1]
          });
        }
        this.count = 0;
      }
    },
 

  }
}
</script>
 
<style lang="scss" scoped>

#jsplumbContainer{
  height: 65vh;
  overflow-y: auto;
  position: relative; /*一定加上这句，否则连线位置发生错乱*/
}
.el-table /deep/.el-table__cell {
  padding: 5px 0;
} 

</style>