From bbea968dd4c321b843cb688d435c2d93a4d5768f Mon Sep 17 00:00:00 2001
From: JiwenBai <jiwen.bai@tusimple.ai>
Date: Wed, 7 Aug 2019 19:26:43 +0800
Subject: [PATCH] feat(advance-table): add custom operation on the search right

---
 demo/components/advanceTableDemo.vue          | 23 +++++++++-
 .../AdvanceTable/filterDropDown/index.vue     | 44 ++++++++++++++++++-
 packages/common/AdvanceTable/src/main.vue     | 30 ++++++++-----
 styles/AdvancedTable.scss                     |  6 ++-
 4 files changed, 88 insertions(+), 15 deletions(-)

diff --git a/demo/components/advanceTableDemo.vue b/demo/components/advanceTableDemo.vue
index b6095b15d..738b074d7 100644
--- a/demo/components/advanceTableDemo.vue
+++ b/demo/components/advanceTableDemo.vue
@@ -571,7 +571,14 @@ export default {
             :on-change="onChange"
             :search="search"
             :pagination="{ total: data.length, limit: 10 }"
-          />
+          >
+            <div slot="table-operation">
+              custom
+            </div>
+            <div slot="table-operation-search-right">
+              right custom
+            </div>
+          </n-advance-table>
         </div>
         <div class="n-doc-section__source">
           <textarea>
@@ -804,7 +811,19 @@ export default {
           }, {
             label: '15',
             value: 15
-          }],
+          }, {
+            label: '16',
+            value: 16
+          }, {
+            label: '17',
+            value: 17
+          }, {
+            label: '18',
+            value: 18
+          }, {
+            label: '19',
+            value: 19
+          } ],
           onFilter: (value, record) => {
             return value.includes(record.age)
             // switch (value) {
diff --git a/packages/common/AdvanceTable/filterDropDown/index.vue b/packages/common/AdvanceTable/filterDropDown/index.vue
index a7a920577..021eddcf9 100644
--- a/packages/common/AdvanceTable/filterDropDown/index.vue
+++ b/packages/common/AdvanceTable/filterDropDown/index.vue
@@ -1,6 +1,9 @@
 <template>
   <filterIcon :status="filterStatus">
-    <ul class="n-table-filter-item">
+    <!-- <n-scrollbar> -->
+    <ul
+      class="n-table-filter-item"
+    >
       <li
         v-for="(item, idx) in items"
         :key="item.value"
@@ -15,6 +18,7 @@
         />
       </li>
     </ul>
+    <!-- </n-scrollbar> -->
   </filterIcon>
 </template>
 
@@ -27,6 +31,10 @@ export default {
     filterIcon
   },
   props: {
+    maxHeight: {
+      type: [String, Number],
+      default: 27 * 3
+    },
     filterItems: {
       type: Array,
       default: () => []
@@ -56,6 +64,14 @@ export default {
     }
   },
   computed: {
+    dropDownContent () {
+      let stl = {}
+      if (this.maxHeight !== 'unset') {
+        let maxHeight = typeof this.maxHeight === 'string' ? this.maxHeight : this.maxHeight + 'px'
+        stl.maxHeight = maxHeight
+      }
+      return stl
+    },
     filterStatus () {
       return !!this.emitData
     },
@@ -144,12 +160,38 @@ export default {
   }
 }
 </script>
+<style lang="scss" scoped>
+// .n-table-filter-item {
+
+//   &::-webkit-scrollbar {
+//     width: 5px;
+//   }
+//   &::-webkit-scrollbar-track {
+//     background: transparent;
+//   }
+//   &::-webkit-scrollbar-thumb {
+//     background: rgba(255, 255, 255, 0.2);
+//     border-radius: 2.5px;
+//   }
+//   &::-webkit-scrollbar-thumb:hover {
+//     background: rgba(255, 255, 255, 0.3);
+//   }
+//   &::-webkit-scrollbar-corner {
+//     background: transparent;
+//   }
+//   &::-webkit-scrollbar:horizontal {
+//     height: 5px;
+//   }
+// }
+</style>
 
 <style scoped>
+
 .n-table-filter-item {
   margin: 0;
   padding: 0;
   border-radius: 6px;
+  /* overflow-y: scroll; */
 }
 .n-table-filter-item li:first-of-type {
   border-top-left-radius: 6px;
diff --git a/packages/common/AdvanceTable/src/main.vue b/packages/common/AdvanceTable/src/main.vue
index 0a7e2e4db..08f1106a3 100644
--- a/packages/common/AdvanceTable/src/main.vue
+++ b/packages/common/AdvanceTable/src/main.vue
@@ -4,20 +4,27 @@
     class="n-advance-tabel__wrapper"
   >
     <div class="n-advance-table__operation">
-      <section class="n-advance-table__operation__bacth" />
-      <div class="n-advance-table__operation__custom">
-        <slot name="table-operation" />
+      <div class="n-advance-table__operation__left">
+        <slot name="table-operation-batch-left" />
+        <section class="n-advance-table__operation__bacth" />
+        <slot name="table-operation-batch-right" />
       </div>
       <div
-        v-if="search"
-        class="n-advance-table__operation__search"
+        class="n-advance-table__operation__right"
+        :style="search?'margin-bottom: 18px;':''"
       >
-        <searchInput
-          ref="search"
-          style=" margin-bottom: 18px;"
-          :options="search"
-          @on-change="handleSearch"
-        />
+        <slot name="table-operation" />
+        <div
+          v-if="search"
+          class="n-advance-table__operation__search"
+        >
+          <searchInput
+            ref="search"
+            :options="search"
+            @on-change="handleSearch"
+          />
+        </div>
+        <slot name="table-operation-search-right" />
       </div>
     </div>
     <n-table
@@ -65,6 +72,7 @@
             <filterDropDown
               v-if="column.filterItems && !column.filterDropdown"
               :ref="'filterDropDown_' + (column.key || i)"
+              :max-height="column.filterDropDownMaxHeight"
               :filter-fn="column.onFilter"
               :filter-key="column.key || i"
               :filter-items="column.filterItems"
diff --git a/styles/AdvancedTable.scss b/styles/AdvancedTable.scss
index 44c35414d..a7c0637da 100644
--- a/styles/AdvancedTable.scss
+++ b/styles/AdvancedTable.scss
@@ -63,7 +63,11 @@
   }
   .n-advance-table__operation {
     display: flex;
-    justify-content: space-between;
+    justify-content:space-between;
+  }
+  .n-advance-table__operation__right {
+    display: flex;
+    align-items: center;
   }
   .n-no-data-tip {
     padding: 5px;