feat(advance-table): finished advance-table header components

demo/documentation/components/advancedTable/enUS/seniorUsage.md

@@ -1,4 +1,5 @@
 # Senior Usage
+
 ```html
 <n-advance-table
   ref="table"
@@ -11,10 +12,7 @@
   @on-change="onChange"
 >
   <div slot="table-operation-batch-left">
-    <n-button
-      size="small"
-      @click="clear"
-    >
+    <n-button size="small" @click="clear">
       clear all filters
     </n-button>
   </div>
@@ -22,6 +20,7 @@
 <h1>Network params</h1>
 <pre>{{ query }}</pre>
 ```
+
 ```js
 const items = [
   {
@@ -55,7 +54,7 @@ const sex = [
     value: 'female'
   }
 ]
-const _columns3 = ($this) => {
+const _columns3 = $this => {
   return [
     {
       title: 'Name',
@@ -69,11 +68,11 @@ const _columns3 = ($this) => {
       title: 'Age',
       key: 'age',
       sortable: true,
-      sorter (a, b) {
+      sorter(a, b) {
         return a.age - b.age
       },
       // filterMultiple: true,
-      asyncFilterItems () {
+      asyncFilterItems() {
         return new Promise((resolve, reject) => {
           setTimeout(() => {
             // 模拟概率发生错误
@@ -95,7 +94,7 @@ const _columns3 = ($this) => {
         return values.includes(record.sex)
       },
       filterMultiple: true,
-      asyncFilterItems () {
+      asyncFilterItems() {
         return new Promise((resolve, reject) => {
           setTimeout(() => {
             Math.random() > 0.6
@@ -123,7 +122,7 @@ const _columns3 = ($this) => {
 }
 export default {
   components: {},
-  data () {
+  data() {
     const columns = _columns3(this)
     return {
       loading: false,
@@ -140,15 +139,15 @@ export default {
       }
     }
   },
-  mounted () {
+  mounted() {
     this.$refs.table.setParams({
       filter: { age: [15] },
-      sorter: { key: 'age', type: -1 },
+      sorter: { key: 'name', type: -1 },
       searcher: { key: 'name', value: 'xiaobai' }
     })
   },
   methods: {
-    getData (args) {
+    getData(args) {
       this.loading = true
       setTimeout(() => {
         let d = new Array(20).fill(0)
@@ -163,7 +162,8 @@ export default {
         this.loading = false
       }, 3000)
     },
-    onChange (args) {
+    onChange(args) {
+      console.log('reomte change')
       this.query = args
       /**
        * "filter": {
@@ -199,11 +199,11 @@ export default {
        */
       this.getData(args)
     },
-    clear () {
+    clear() {
       // 清除所有的Filter选项,会触发onchange事件
       this.$refs.table.setParams({})
       this.$NMessage.info('clear all filters', { duration: 5000 })
     }
   }
 }
-```
+```

packages/common/AdvanceTable/header/header.vue

@@ -10,9 +10,9 @@
         v-for="(column, i) in columns"
         :key="i"
         :style="computeCustomWidthStl(column)"
-      >
+      />
 
-      <col v-if="scrollBarWidth" :width="scrollBarWidth" >
+      <col v-if="scrollBarWidth" :width="scrollBarWidth" />
     </colgroup>
     <n-thead>
       <n-tr>
@@ -51,11 +51,10 @@
               :ref="'sorter_' + (column.key || i)"
               :value="sortIndexs[column.key || i]"
               class="n-advance-table__header-icon"
-              @input="sortInput"
-              :current-key="currentKey"
               :column="column"
               :index="i"
-              @onSortTypeChange="onSortTypeChange"
+              :current-key="currentKey"
+              @input="sortInput"
             />
 
             <!-- 优先自定义 -->
@@ -98,12 +97,30 @@ export default {
     PopFilter
   },
   props: {
-    colGroupStl: {},
-    columns: {},
-    scrollBarWidth: {},
-    sortIndexs: {},
-    selectedFilter: {},
-    showingData: {}
+    colGroupStl: {
+      type: Object,
+      default: () => ({})
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    scrollBarWidth: {
+      type: [Number, String],
+      default: 0
+    },
+    sortIndexs: {
+      type: Object,
+      default: () => ({})
+    },
+    selectedFilter: {
+      type: Object,
+      default: () => ({})
+    },
+    showingData: {
+      type: Array,
+      default: () => []
+    }
   },
   data () {
     return {
@@ -118,12 +135,13 @@ export default {
       )
     },
     currentKey () {
-      let currentKey = null
+      let currentKey = ''
       Object.keys(this.sortIndexs).forEach(key => {
         if (this.sortIndexs[key] !== null) {
           currentKey = key
         }
       })
+      // console.log('TCL: currentKey -> currentKey', currentKey)
       return currentKey
     }
   },
@@ -138,8 +156,11 @@ export default {
         }
       }
     },
-    sortInput (value, column) {
-      this.$set(this.sortIndexs, column.key, value)
+    sortInput (value, column, sorter) {
+      const sortIndexs = {}
+      sortIndexs[column.key] = value
+      // console.log('TCL: sortInput -> value', sortIndexs)
+      this.$emit('on-sort-change', sortIndexs)
     },
     sortByColumn (column) {
       if (!column.sortable || column.key === void 0) return
@@ -165,20 +186,16 @@ export default {
       }
       return null
     },
-    clearSort () {
+    clearOtherSort (notClearKey) {
+      const sortIndexs = {}
       Object.keys(this.sortIndexs).forEach(key => {
-        this.sortIndexs[key] = null
+        if (key !== notClearKey) sortIndexs[key] = null
       })
+      return sortIndexs
     },
     onAllCheckboxesClick () {
       this.$emit('on-checkbox-all', this.currentPageAllSelect)
     },
-    onSortTypeChange (sorter) {
-      this.clearSort()
-      this.sortInput(sorter.type, sorter.column)
-      console.log('TCL: onSortTypeChange -> sorter', sorter)
-      this.$emit('on-sort-change', sorter)
-    },
     onFilter (value, column) {
       this.$emit('on-filter', value, column)
     }

packages/common/AdvanceTable/sortIcon/index.vue

@@ -23,26 +23,22 @@
 <script>
 // refer to https://github.com/TuSimple/infra-ecos-webui/blob/develop/src/components/SortIcon.vue
 const computeOpacity = val => {
-  let self = {}
+  let upOpacity = 0.4
+  let downOpacity = 0.4
   switch (val) {
-    case 0:
-      self.upOpacity = 0.4
-      self.downOpacity = 0.4
-      break
     case 1:
-      self.upOpacity = 1
-      self.downOpacity = 0.4
+      upOpacity = 1
+      downOpacity = 0.4
       break
     case -1:
-      self.upOpacity = 0.4
-      self.downOpacity = 1
-      break
-    case null:
-      self.upOpacity = 0.4
-      self.downOpacity = 0.4
+      upOpacity = 0.4
+      downOpacity = 1
       break
   }
-  return self
+  return {
+    downOpacity,
+    upOpacity
+  }
 }
 export default {
   name: 'SortIcon',
@@ -63,7 +59,10 @@ export default {
       type: Object,
       required: true
     },
-    currentKey: {}
+    currentKey: {
+      type: [String, Number],
+      required: true
+    }
   },
   data () {
     return {
@@ -73,27 +72,31 @@ export default {
   },
   computed: {
     opacitys () {
+      const normalOpacity = 0.4
       if (this.currentKey !== this.column.key) {
-        this.upOpacity = 0.4
-        this.downOpacity = 0.4
-        return 0.4
+        return {
+          upOpacity: normalOpacity,
+          downOpacity: normalOpacity
+        }
       }
       let val = this.value
       return computeOpacity(val)
     }
   },
   watch: {
-    value (val) {
-      if (val !== null) {
-        this.$emit('onSortTypeChange', {
-          i: this.index,
-          sortable: this.column.sortable,
-          key: this.column.key || this.index,
-          type: val,
-          column: this.column
-        })
-      }
-    }
+    // value (val, pldVal) {
+    //   if (val !== null) {
+    //     console.log('from watch', val, pldVal)
+    //     const sorter = {
+    //       i: this.index,
+    //       sortable: this.column.sortable,
+    //       key: this.column.key || this.index,
+    //       type: val,
+    //       column: this.column
+    //     }
+    //     this.$emit('on-sort-change', val, this.column, sorter)
+    //   }
+    // }
   },
   mounted () {
     if (this.value !== 0 && this.value !== null) {
@@ -130,7 +133,14 @@ export default {
       }
     },
     setSort (val) {
-      this.$emit('input', val)
+      const sorter = {
+        i: this.index,
+        sortable: this.column.sortable,
+        key: this.column.key || this.index,
+        type: val,
+        column: this.column
+      }
+      this.$emit('input', val, this.column, sorter)
     }
   }
 }

packages/common/AdvanceTable/src/main.vue

@@ -39,7 +39,7 @@
         :selected-filter="selectedFilter"
         :showing-data="showingData"
         @on-checkbox-all="onAllCheckboxesClick"
-        @on-sort-change="onSortTypeChange"
+        @on-sort-change="onSortChange"
         @on-filter="onFilter"
       />
       <!-- table body -->
@@ -137,8 +137,8 @@
 
 <script>
 import row from '../row/index.js'
-import SortIcon from '../sortIcon'
-import PopFilter from '../popFilter'
+// import SortIcon from '../sortIcon'
+// import PopFilter from '../popFilter'
 import searchInput from '../searchInput'
 import { noopFn } from '../../../utils/index'
 import withapp from '../../../mixins/withapp'
@@ -149,8 +149,8 @@ export default {
   name: 'NAdvanceTable',
   components: {
     row,
-    SortIcon,
-    PopFilter,
+    // SortIcon,
+    // PopFilter,
     searchInput,
     TableHeader
   },
@@ -234,7 +234,6 @@ export default {
       tbodyWidth: 'auto;',
       scrollBarWidth: '0',
       searchData: [],
-      currentSortColumn: null,
       currentFilterColumn: null,
       currentSearchColumn: null,
       currentPage: 1,
@@ -245,6 +244,33 @@ export default {
     }
   },
   computed: {
+    currentSortColumn () {
+      let sorterKey = null
+      let i = 0
+      console.log(this.sortIndexs)
+      Object.keys(this.sortIndexs).forEach(key => {
+        if (this.sortIndexs[key] !== null) {
+          sorterKey = key
+        }
+      })
+      if (!sorterKey) {
+        return null
+      }
+      let sorterColumn = this.columns.find((column, idx) => {
+        i = idx
+        return column.key === sorterKey
+      })
+      if (!sorterColumn) {
+        return null
+      }
+      return {
+        sortable: sorterColumn.sortable,
+        key: sorterKey,
+        type: this.sortIndexs[sorterKey],
+        column: sorterColumn,
+        i
+      }
+    },
     paginationer () {
       if (this.pagination) {
         return {
@@ -369,9 +395,6 @@ export default {
         this.useRemoteChange()
       }
       this.currentPageAllSelect = this.allCheckboxesSelect
-
-      console.log('currentPage')
-
       this.$emit('on-page-change', this.paginationer)
     },
     data () {
@@ -385,9 +408,16 @@ export default {
     currentSearchColumn () {
       this.searchData = this.computeShowingData()
     },
-    currentSortColumn () {
+    currentSortColumn (sorter, oldSorter) {
       this.searchData = this.computeShowingData()
-      console.log('currentSortColumn')
+      //  上次的若是为custom,本次为locale sort那么也需要触发useRemoteChange
+      if (
+        sorter.sortable === 'custom' ||
+        (oldSorter && oldSorter.sortable === 'custom')
+      ) {
+        this.useRemoteChange()
+      }
+      this.$emit('on-sort-change', this.currentSortColumn)
     },
     checkBoxes () {
       this.$emit('on-selected-change', this.selectedRows)
@@ -517,7 +547,9 @@ export default {
      */
     setParams ({ filter, sorter, page, searcher }) {
       if (sorter) {
-        this.sortIndexs[sorter.key] = sorter.type
+        // console.log('this.sortIndexs', this.sortIndexs)
+        this.$set(this.sortIndexs, sorter.key, sorter.type)
+        // this.sortIndexs[sorter.key] = sorter.type
         // const ref = this.$refs['sorter_' + sorter.key][0]
         // ref.setSort(sorter.type)
         // this.sortIndexs[sorter.key] = sorter.type
@@ -767,23 +799,9 @@ export default {
       }
       this.$emit('on-filter-change', this.currentFilterColumn)
     },
-    onSortTypeChange ({ i, sortable, key, type, column }) {
-      console.log(
-        'TCL: onSortTypeChange -> onSortTypeChange',
-        'onSortTypeChange'
-      )
-      this.$set(this.sortIndexs, key, type)
-      this.currentSortColumn = {
-        sortable,
-        key,
-        type,
-        column,
-        i
-      }
-      if (sortable === 'custom') {
-        this.useRemoteChange()
-      }
-      this.$emit('on-sort-change', this.currentSortColumn)
+    onSortChange (sortIndexs) {
+      console.log('TCL: onSortTypeChange -> sortIndexs', sortIndexs)
+      this.sortIndexs = sortIndexs
     }
   }
 }