项目初始化

datax-ui/src/views/standard/dictmapping/index.vue

@@ -30,7 +30,6 @@
             <el-col :span="24">
               <el-button type="primary" size="mini" @click="handleAuto">自动对照</el-button>
               <el-button type="primary" size="mini" @click="handleManual">手动对照</el-button>
-              <el-button type="primary" size="mini">取消对照</el-button>
             </el-col>
           </el-row>
           <el-row>
@@ -70,11 +69,11 @@
                   </tr>
                 </thead>
                 <tbody>
-                  <tr v-for="(data, index) in leftTableDataList" :key="index" :id="'item_left_' + data.id">
+                  <tr v-for="(data, index) in leftTableDataList" :id="data.id" :key="index">
                     <td>{{ data.colCode }}</td>
                     <td>{{ data.colName }}</td>
                     <td>{{ data.contrastGbCode }}</td>
-                    <td>{{ data.contrastGbName }}</td>
+                    <td><span v-if="data.contrastGbId" style="padding-right: 10px;" @click="handleCancel(data.id)"><i class="el-icon-circle-close" style="color: red" /></span>{{ data.contrastGbName }}</td>
                   </tr>
                 </tbody>
               </table>
@@ -88,7 +87,7 @@
                   </tr>
                 </thead>
                 <tbody>
-                  <tr v-for="(data, index) in rightTableDataList" :key="index" :id="'item_right_' + data.id">
+                  <tr v-for="(data, index) in rightTableDataList" :id="data.id" :key="index">
                     <td>{{ data.gbCode }}</td>
                     <td>{{ data.gbName }}</td>
                   </tr>
@@ -127,7 +126,9 @@ export default {
       contrastId: undefined,
       title: '',
       description: '',
-      jsPlumb: null
+      jsPlumb: null,
+      // 连接点数据
+      connEndpoints: []
     }
   },
   created() {
@@ -148,32 +149,8 @@ export default {
       // 父级元素id；假如页面元素所在上层不同，最外层父级一定要设置
       Container: 'jsplumbContainer'
     })
-    this.$nextTick(() => {
-      this.initJsPlumb()
-    })
   },
   methods: {
-    initJsPlumb() {
-      const _this = this
-      this.jsPlumb.ready(function() {
-        // 双击连接线（删除）
-        _this.jsPlumb.bind('dblclick', function(conn, originalEvent) {
-          console.log('dblclick', conn)
-        })
-        // 连线
-        _this.jsPlumb.bind('connection', function(evt) {
-          console.log('connection', evt)
-        })
-        // 删除连线
-        _this.jsPlumb.bind('connectionDetached', function(evt) {
-          console.log('connectionDetached', evt)
-        })
-        // beforeDrop
-        _this.jsPlumb.bind('beforeDrop', function(evt) {
-          console.log('beforeDrop', evt)
-        })
-      })
-    },
     getTree() {
       getContrastTree().then(response => {
         if (response.success) {
@@ -204,37 +181,94 @@ export default {
           this.title = data.title
           this.description = data.description
           this.$nextTick(() => {
-            this.initEndpoint()
+            this.initJsPlumb()
           })
         }
       })
     },
-    initEndpoint() {
+    initJsPlumb() {
       const _this = this
+      // 初始化节点设置
+      const config = {
+        // 源端点
+        isSource: false,
+        // 目标端点
+        isTarget: false,
+        connector: ['Bezier', { gap: 10, cornerRadius: 5, alwaysRespectStubs: true }],
+        // 端点的形状
+        endpoint: ['Dot', {
+          radius: 8,
+          fill: '#84cfff'
+        }],
+        paintStyle: {
+          strokeStyle: '#84cfff',
+          stroke: '#84cfff',
+          fill: '#84cfff',
+          fillStyle: '#84cfff',
+          radius: 6,
+          lineWidth: 2
+        },
+        // 鼠标悬浮在端点的颜色
+        hoverPaintStyle: { stroke: '#409EFF' },
+        // 连接线的颜色，大小样式
+        connectorStyle: {
+          outlineStroke: '#84cfff',
+          strokeWidth: 1
+        },
+        // 鼠标悬浮在连接线上的样式
+        connectorHoverStyle: {
+          strokeWidth: 4
+        }
+      }
+      // 清除端点、连接
+      _this.jsPlumb.reset()
+      // 设置监听事件
+      _this.jsPlumb.ready(function() {
+        // 双击连接线（删除）
+        _this.jsPlumb.bind('dblclick', function(conn, originalEvent) {
+          console.log('dblclick', conn)
+          _this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            _this.jsPlumb.deleteConnection(conn)
+          }).catch(() => {
+          })
+        })
+        // 连线
+        _this.jsPlumb.bind('connection', function(evt) {
+          console.log('connection', evt)
+          _this.connEndpoints.push({
+            sourceId: evt.sourceId,
+            targetId: evt.targetId
+          })
+        })
+        // 删除连线
+        _this.jsPlumb.bind('connectionDetached', function(evt) {
+          console.log('connectionDetached', evt)
+          _this.connEndpoints.splice(_this.connEndpoints.findIndex(item => item.sourceId === evt.sourceId && item.targetId === evt.targetId), 1)
+        })
+      })
+      const leftConfig = Object.assign({}, config)
+      leftConfig.isSource = true
       // 过滤掉已映射数据
       this.leftTableDataList.filter(item => item.status === '0').forEach(function(item, index, arr) {
-        _this.jsPlumb.addEndpoint('item_left_' + item.id, {
+        _this.jsPlumb.addEndpoint(item.id, {
           anchors: ['Right'],
           uuid: item.id
-        },{
-          isSource: true,
-          isTarget: true,
-          connector: ['Straight']
-        })
+        }, leftConfig)
       })
-      this.rightTableDataList.forEach(function(item, index, arr) {
-        _this.jsPlumb.addEndpoint('item_right_' + item.id, {
+      const rightConfig = Object.assign({}, config)
+      rightConfig.isTarget = true
+      // 过滤掉已映射数据
+      const rightTableData = [...this.rightTableDataList].filter(x => [...this.leftTableDataList].every(y => y.contrastGbId !== x.id))
+      rightTableData.forEach(function(item, index, arr) {
+        _this.jsPlumb.addEndpoint(item.id, {
           anchors: ['Left'],
           uuid: item.id
-        },{
-          isSource: true,
-          isTarget: true,
-          connector: ['Straight']
-        })
+        }, rightConfig)
       })
-      // const connection = this.jsPlumb.connect({ uuids: ['fromId', 'toId'] })
-      // // 初始化label
-      // connection.getOverlay('label-1').setLabel('映射连线')
     },
     handleAuto() {
       dictAutoMapping(this.contrastId).then(response => {
@@ -245,7 +279,17 @@ export default {
       })
     },
     handleManual() {
-      console.log(this.contrastId)
+      console.log(this.connEndpoints)
+    },
+    handleCancel(id) {
+      console.log(id)
+      this.$confirm('是否取消对照关系？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+      }).catch(() => {
+      })
     }
   }
 }