数据入湖-准实时-->映射规则配置

src/views/dataIntegration/dataLakePunctual/index.vue

@@ -226,6 +226,7 @@
   const myCheckedKeys = ref([]);
   let notCustomSQLTable = ref(notCustomSQLTableList);
   let mappingRuleConfigurationTable = ref(mappingRuleConfigurationTableList);
+  let mappingRuleConfiguration = ref(mappingRuleConfigurationColumns);
   let sql = ref('SELECT * FROM user_info,customer_details,order_history,product_inventory');
   let metadataAcquisitionModeFlag = ref();
   let isParsingSQL = ref(false);
@@ -399,7 +400,7 @@
     showTableSetting: false,
     showIndexColumn: false,
     rowSelection: true,
-
+    customRow: customRow,
     bordered: false,
     actionColumn: {
       width: 100,
@@ -408,6 +409,60 @@
       // slots: { customRender: 'action' },
     },
   });
+  let source = 0; // 源目标数据序号
+  let target = 0; // 目标数据序号
+  // Table拖拽
+  function customRow(record, index) {
+    console.log(record, index); // 这里输出是表格全部的数据
+    return {
+      props: {
+        // draggable: 'true'
+      },
+      style: {
+        cursor: 'pointer',
+      },
+      // 鼠标移入
+      onMouseenter: (event) => {
+        // 兼容IE
+        let ev = event || window.event;
+        ev.target.draggable = true; // 让你要拖动的行可以拖动，默认不可以
+      },
+      // 开始拖拽
+      onDragstart: (event) => {
+        // 兼容IE
+        let ev = event || window.event;
+        // 阻止冒泡
+        ev.stopPropagation();
+        // 得到源目标数据序号
+        source = index;
+        console.log(record, index, 'source');
+      },
+      // 拖动元素经过的元素
+      onDragover: (event) => {
+        // 兼容 IE
+        let ev = event || window.event;
+        // 阻止默认行为
+        ev.preventDefault();
+      },
+      // 鼠标松开
+      onDrop: (event) => {
+        // 兼容IE
+        let ev = event || window.event;
+        // 阻止冒泡
+        ev.stopPropagation();
+        // 得到目标数据序号
+        target = index;
+        // 这里就是让数据位置互换，让视图更新 你们可以看record，index的输出，看是什么
+        console.log(mappingRuleConfigurationTable);
+        // [tableData.value[source], tableData.value[target]] = [tableData.value[target], tableData.value[source]];
+        const temp = ref();
+        temp.value = mappingRuleConfigurationTable.value[source];
+        mappingRuleConfigurationTable.value[source] = mappingRuleConfigurationTable.value[target];
+        mappingRuleConfigurationTable.value[target] = temp.value;
+        console.log(record, index, 'target', source, target);
+      },
+    };
+  }
 
   const actionList = [
     {
@@ -463,6 +518,8 @@
     });
   }
 
+
+
   function handleSelect(keys) {
     isParsingSQL.value = false;
     console.log(keys,'keys', getFieldsValue());