From 6f82f39f4c054b46953aa65b7ad454d90a88beef Mon Sep 17 00:00:00 2001
From: xufei <xufei@tapdata.io>
Date: Tue, 11 Apr 2023 13:04:30 +0800
Subject: [PATCH 1/2]  refactor(@tap/dag): FieldRenameProcessor add
 batchRemove/batchShow

---
 packages/assets/styles/element-overrides.scss |  1 +
 .../components/form/field-processor/index.js  | 73 ++++++++++++++--
 .../form/field-processor/style.scss           | 84 ++++++++++---------
 3 files changed, 114 insertions(+), 44 deletions(-)

diff --git a/packages/assets/styles/element-overrides.scss b/packages/assets/styles/element-overrides.scss
index 5ad1892ce0..e72523fe73 100644
--- a/packages/assets/styles/element-overrides.scss
+++ b/packages/assets/styles/element-overrides.scss
@@ -752,6 +752,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
   th.el-table__cell {
     padding: 0;
     height: 40px;
+    font-weight: 500;
   }
 
   .cell {
diff --git a/packages/dag/src/components/form/field-processor/index.js b/packages/dag/src/components/form/field-processor/index.js
index bd7dee8ce8..c28edb79a1 100644
--- a/packages/dag/src/components/form/field-processor/index.js
+++ b/packages/dag/src/components/form/field-processor/index.js
@@ -405,6 +405,31 @@ export const FieldRenameProcessor = defineComponent({
       )
       return props.disabled ? disabled : show
     }
+
+    const showBatchRemove = computed(() => {
+      return config.checkedFields.some(field => !!field.isShow)
+    })
+
+    const batchRemove = () => {
+      console.log('config.checkedFields', config.checkedFields) // eslint-disable-line
+      config.checkedFields.forEach(field => {
+        field.isShow = false
+        doUpdateField(field, 'del', false)
+      })
+      updateDeletedNum(config.selectTableRow)
+      refs.table?.clearSelection()
+    }
+
+    const batchShow = () => {
+      console.log('config.checkedFields', config.checkedFields) // eslint-disable-line
+      config.checkedFields.forEach(field => {
+        field.isShow = true
+        doUpdateField(field, 'del', true)
+      })
+      updateDeletedNum(config.selectTableRow)
+      refs.table?.clearSelection()
+    }
+
     watch(
       () => root.$store.state.dataflow.transformLoading,
       v => {
@@ -414,6 +439,7 @@ export const FieldRenameProcessor = defineComponent({
         }
       }
     )
+
     loadData()
     return {
       list,
@@ -433,7 +459,10 @@ export const FieldRenameProcessor = defineComponent({
       updateView,
       doOperationRest,
       doSearchField,
-      doSearchTables
+      doSearchTables,
+      batchRemove,
+      batchShow,
+      showBatchRemove
     }
   },
   render() {
@@ -453,7 +482,7 @@ export const FieldRenameProcessor = defineComponent({
                 ></ElInput>
               </div>
             </div>
-            <div class="bg-main flex justify-content-between line-height processor-ml-10">
+            <div class="bg-main flex justify-content-between line-height processor-ml-10 table-checkbox-wrap">
               <span>
                 <el-checkbox v-model={this.config.checkAll} onChange={this.doCheckAllChange}></el-checkbox>
                 <span class="table-name ml-2">{i18n.t('packages_form_field_mapping_list_biaoming')}</span>
@@ -525,7 +554,7 @@ export const FieldRenameProcessor = defineComponent({
           </div>
           <div class="main">
             <div class="flex ml-2 text-start justify-content-between" style="margin-bottom: 8px">
-              <div class="flex">
+              <div class="flex field-search-input-wrap">
                 <ElInput
                   size="mini"
                   placeholder={i18n.t('packages_form_field_mapping_list_qingshuruziduan')}
@@ -546,13 +575,43 @@ export const FieldRenameProcessor = defineComponent({
                 >
                   {i18n.t('public_button_bulk_operation')}
                 </ElButton>
+
+                {this.config.checkedFields.length > 0 &&
+                  (this.showBatchRemove ? (
+                    <ElButton
+                      key="batchRemove"
+                      type="text"
+                      class="btn-operation"
+                      onClick={this.batchRemove}
+                      disabled={
+                        (this.config.checkedTables.length === 0 && this.config.checkedFields.length === 0) ||
+                        this.disabled
+                      }
+                    >
+                      {i18n.t('packages_form_field_processor_index_pingbi')}
+                    </ElButton>
+                  ) : (
+                    <ElButton
+                      key="batchShow"
+                      type="text"
+                      class="btn-operation"
+                      onClick={this.batchShow}
+                      disabled={
+                        (this.config.checkedTables.length === 0 && this.config.checkedFields.length === 0) ||
+                        this.disabled
+                      }
+                    >
+                      {i18n.t('packages_form_field_processor_index_huifu')}
+                    </ElButton>
+                  ))}
+
                 <ElButton type="text" class="btn-rest mr-2" disabled={this.disabled} onClick={this.doOperationRest}>
                   {i18n.t('public_button_reset')}
                 </ElButton>
               </div>
             </div>
             <ElTable
-              class="field-mapping-table"
+              class="field-mapping-table border-start-0 border-end-0 border-bottom-0"
               border
               height="100%"
               ref={'table'}
@@ -561,8 +620,9 @@ export const FieldRenameProcessor = defineComponent({
               row-class-name={this.tableRowClassName}
               onSelection-change={this.doSelectionField}
             >
-              <ElTableColumn type="selection" width="55"></ElTableColumn>
+              <ElTableColumn type="selection" width="32" class-name="ck-cell-wrap"></ElTableColumn>
               <ElTableColumn
+                align="center"
                 type="index"
                 width="55"
                 label={i18n.t('packages_form_field_mapping_list_xuhao')}
@@ -576,6 +636,7 @@ export const FieldRenameProcessor = defineComponent({
                 }}
               ></ElTableColumn>
               <ElTableColumn
+                class-name="p-0"
                 show-overflow-tooltip
                 label={i18n.t('packages_form_field_processor_index_xinziduanming')}
                 prop="targetFieldName"
@@ -584,7 +645,7 @@ export const FieldRenameProcessor = defineComponent({
                 }}
               ></ElTableColumn>
               <ElTableColumn
-                show-overflow-tooltip
+                align="center"
                 label={i18n.t('public_operation')}
                 prop="isShow"
                 width={'60px'}
diff --git a/packages/dag/src/components/form/field-processor/style.scss b/packages/dag/src/components/form/field-processor/style.scss
index 72f3beb04b..c7ca18fbb7 100644
--- a/packages/dag/src/components/form/field-processor/style.scss
+++ b/packages/dag/src/components/form/field-processor/style.scss
@@ -60,6 +60,7 @@
     border-radius: 4px;
     .task-form-left {
       padding-top: 8px;
+      width: 200px;
       border-right: 1px solid map-get($borderColor, light);
       .table-name {
         font-size: 12px;
@@ -73,28 +74,27 @@
     }
     .task-form-left__ul {
       flex: 1;
-      max-width: 210px;
       overflow-x: hidden;
       overflow-y: auto;
       li {
         background: map-get($bgColor, white);
-        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02);
+        border-left: 2px solid transparent;
         border-bottom: 1px solid map-get($borderColor, light);
         display: flex;
-        padding: 10px 0 10px 10px;
+        padding: 10px;
         &:hover {
           background: map-get($bgColor, disactive);
           cursor: pointer;
-          border-left: 2px solid map-get($color, primary);
+          border-left-color: map-get($color, primary);
         }
         &.active {
           background: map-get($bgColor, disactive);
-          border-left: 2px solid map-get($color, primary);
+          border-left-color: map-get($color, primary);
           cursor: pointer;
         }
         .task-form-text-box {
-          margin-left: 10px;
-          width: 120px;
+          flex: 1;
+          min-width: 0;
           .target {
             font-size: 12px;
             font-weight: 400;
@@ -165,39 +165,47 @@
       line-height: 15px;
     }
   }
-  .field-mapping-table {
-    ::v-deep {
-      .el-table {
-        border: none;
-      }
-      .el-table__empty-block {
-        height: 100% !important;
-      }
-      .el-table__header {
-        .el-table__cell {
-          border-right: 0;
-          &.is-leaf {
-            border-bottom: 0;
-          }
-          &:hover {
-            border-right: 1px solid map-get($borderColor, light);
-          }
-        }
-        th {
-          color: map-get($fontColor, normal);
-          font-weight: 500;
-          white-space: nowrap;
-          background-color: map-get($bgColor, normal);
-        }
-      }
-      .el-table__body {
-        td {
-          color: map-get($fontColor, light);
-        }
+
+  .field-mapping-table.el-table {
+    .ck-cell-wrap .cell {
+      padding: 0 !important;
+      text-align: center;
+    }
+  }
+
+  .table-checkbox-wrap {
+    border-top: 1px solid #ebeef5;
+  }
+
+  .field-search-input-wrap {
+    width: 180px;
+  }
+  /*.el-table__empty-block {
+    height: 100% !important;
+  }
+  .el-table__header {
+    .el-table__cell {
+      border-right: 0;
+      &.is-leaf {
+        border-bottom: 0;
       }
-      &:after {
-        width: 0;
+      &:hover {
+        border-right: 1px solid map-get($borderColor, light);
       }
     }
+    th {
+      color: map-get($fontColor, normal);
+      font-weight: 500;
+      white-space: nowrap;
+      background-color: map-get($bgColor, normal);
+    }
+  }
+  .el-table__body {
+    td {
+      color: map-get($fontColor, light);
+    }
   }
+  &:after {
+    width: 0;
+  }*/
 }

From 84c05dee362ae1d9f4916e77af24afe88b371671 Mon Sep 17 00:00:00 2001
From: xufei <xufei@tapdata.io>
Date: Tue, 11 Apr 2023 13:20:48 +0800
Subject: [PATCH 2/2]  refactor(@tap/dag): MetaPanel field list field name add
 show-overflow-tooltip

---
 packages/dag/src/components/form/field-inference/List.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/dag/src/components/form/field-inference/List.vue b/packages/dag/src/components/form/field-inference/List.vue
index f2cd486014..27e8cd55bc 100644
--- a/packages/dag/src/components/form/field-inference/List.vue
+++ b/packages/dag/src/components/form/field-inference/List.vue
@@ -11,7 +11,7 @@
     >
       <template slot="field_name" slot-scope="scope">
         <span class="flex align-center"
-          >{{ scope.row.field_name }}
+          ><span class="ellipsis">{{ scope.row.field_name }}</span>
           <VIcon v-if="scope.row.primary_key_position > 0" size="12" class="text-warning ml-1">key</VIcon>
         </span>
       </template>
@@ -168,7 +168,8 @@ export default {
           label: i18n.t('packages_form_field_add_del_index_ziduanmingcheng'),
           prop: 'field_name',
           slotName: 'field_name',
-          'min-width': '90px'
+          'min-width': '90px',
+          'show-overflow-tooltip': true
         },
         {
           label: i18n.t('packages_form_dag_dialog_field_mapping_type'),