[Update] 完成刷新和搜索

package.json

@@ -22,6 +22,7 @@
     "js-cookie": "2.2.0",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
+    "lodash": "^4.17.15",
     "lodash.clonedeep": "^4.5.0",
     "lodash.frompairs": "^4.0.1",
     "lodash.get": "^4.4.2",

src/components/DataTable/compenents/el-data-table/el-data-table.vue

@@ -727,7 +727,8 @@ export default {
       // JSON.stringify是为了后面深拷贝作准备
       initExtraQuery: JSON.stringify(this.extraQuery || this.customQuery || {}),
       isSearchCollapse: false,
-      showNoData: false
+      showNoData: false,
+      innerQuery: {}
     }
   },
   computed: {
@@ -849,6 +850,7 @@ export default {
         formValue = this.$refs.searchForm.getFormValue()
         Object.assign(query, formValue)
       }
+      Object.assign(query, this.innerQuery)
       Object.assign(query, this._extraQuery)
 
       query[this.pageSizeKey] = this.hasPagination
@@ -939,18 +941,9 @@ export default {
           this.loading = false
         })
     },
-    async search() {
-      const form = this.$refs.searchForm
-      const valid = await new Promise(r => form.validate(r))
-      if (!valid) return
-
-      try {
-        await this.beforeSearch(form.getFormValue())
-        this.page = defaultFirstPage
-        this.getList()
-      } catch (err) {
-        this.$emit('error', err)
-      }
+    search(attrs) {
+      this.innerQuery = Object.assign(this.innerQuery, attrs)
+      return this.getList()
     },
     /**
      * 重置查询，相当于点击「重置」按钮
@@ -1165,15 +1158,12 @@ export default {
       return record[this.treeChildKey] && record[this.treeChildKey].length > 0
     },
     onSortChange({ column, prop, order }) {
-      if (!this.extraQuery) {
-        this.extraQuery = {}
-      }
       if (!order) {
-        delete this.extraQuery['sort']
-        delete this.extraQuery['direction']
+        delete this.innerQuery['sort']
+        delete this.innerQuery['direction']
       } else {
-        this.extraQuery['sort'] = prop
-        this.extraQuery['direction'] = order
+        this.innerQuery['sort'] = prop
+        this.innerQuery['direction'] = order
       }
       this.getList()
     }

src/components/DataTable/index.vue

@@ -91,6 +91,9 @@ export default {
     getList() {
       this.$refs.table.clearSelection()
       return this.$refs.table.getList()
+    },
+    search(attrs) {
+      return this.$refs.table.search(attrs)
     }
   }
 }

src/components/ListTable/TableAction.vue

@@ -14,6 +14,7 @@
 
 <script>
 import ActionsGroup from '@/components/ActionsGroup'
+import _ from 'lodash';
 import { createSourceIdCache } from '@/api/common'
 
 const defaultTrue = { type: Boolean, default: true }
@@ -46,6 +47,10 @@ export default {
       type: Function,
       default: () => {}
     },
+    searchTable: {
+      type: Function,
+      default: () => {}
+    },
     selectedRows: {
       type: Array,
       default: () => ([])
@@ -57,6 +62,10 @@ export default {
     extraMoreActions: {
       type: Array,
       default: () => ([])
+    },
+    extraRightSideActions: {
+      type: Array,
+      default: () => ([])
     }
   },
   data() {
@@ -65,7 +74,7 @@ export default {
       defaultRightSideActions: [
         { name: 'actionExport', fa: 'fa-download', has: this.hasExport },
         { name: 'actionImport', fa: 'fa-upload', has: this.hasImport },
-        { name: 'actionRefresh', fa: 'fa-refresh', has: this.hasRefresh }
+        { name: 'actionRefresh', fa: 'fa-refresh', has: this.hasRefresh, callback: this.handleRefresh }
       ],
       defaultActions: [
         {
@@ -97,33 +106,18 @@ export default {
   },
   computed: {
     rightSideActions() {
-      const actions = []
-      return actions
-      for (const k in this.defaultRightSideActions) {
-        if (this['has' + k]) {
-          actions.push(this.defaultRightSideActions[k])
-        }
-      }
-      return actions
+      const actions = [...this.defaultRightSideActions, ...this.extraRightSideActions]
+      return this.cleanActions(actions)
     },
     actions() {
       const actions = [...this.defaultActions, ...this.extraActions]
-      const validActions = []
-      for (const action of actions) {
-        let ok = this.checkItem(action, 'has')
-        if (!ok) {
-          continue
-        }
-        ok = this.checkItem(action, 'can')
-        action.disabled = !ok
-        validActions.push(action)
-      }
-      console.log(validActions)
-      return validActions
+      return this.cleanActions(actions)
     },
     moreActions() {
-      return this.defaultMoreActions
+      const actions = [...this.defaultMoreActions, ...this.extraMoreActions]
+      return this.cleanActions(actions)
     },
+
     namedActions() {
       const totalActions = [...this.actions, ...this.moreActions, ...this.rightSideActions]
       const actions = {}
@@ -137,10 +131,11 @@ export default {
     }
   },
   methods: {
-    handleSearch(keyword) {
-      console.log('Search: ', keyword)
-    },
+    handleSearch: _.debounce(function() {
+      this.searchTable({search: this.keyword})
+    }, 500),
     handleActionClick(item) {
+      console.log('name cations', this.namedActions)
       let handler = this.namedActions[item] ? this.namedActions[item].callback : null
       if (!handler) {
         handler = () => {
@@ -185,13 +180,32 @@ export default {
       const ids = rows.map((v) => {
         return v.id
       })
-      console.log('Delete ids: ', ids)
       const data = await createSourceIdCache(ids)
       const url = `${this.tableUrl}?spm=` + data.spm
       return this.$axios.delete(url)
     },
     handleBulkUpdate(rows) {
     },
+    handleExport() {
+    },
+    handleImport() {
+    },
+    handleRefresh() {
+      this.reloadTable()
+    },
+    cleanActions(actions) {
+      const validActions = []
+      for (const action of actions) {
+        let ok = this.checkItem(action, 'has')
+        if (!ok) {
+          continue
+        }
+        ok = this.checkItem(action, 'can')
+        action.disabled = !ok
+        validActions.push(action)
+      }
+      return validActions
+    },
     checkItem(item, attr) {
       let ok = item[attr]
       if (typeof ok === 'function') {

src/components/ListTable/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <TableAction :table-url="tableConfig.url" v-bind="headerActions" :selected-rows="selectedRows" :reload-table="reloadTable"></TableAction>
+    <TableAction :table-url="tableConfig.url" :search-table="search" v-bind="headerActions" :selected-rows="selectedRows" :reload-table="reloadTable"></TableAction>
     <el-card class="table-content" shadow="never">
       <DataTable ref="dataTable" :config="tableConfig" @selection-change="handleSelectionChange">
       </DataTable>
@@ -48,6 +48,9 @@ export default {
     },
     reloadTable() {
       this.$refs.dataTable.getList()
+    },
+    search(attrs) {
+      return this.$refs.dataTable.search(attrs)
     }
   }
 }

src/main.js

@@ -41,6 +41,9 @@ import service from '@/utils/request'
 // if the table component cannot access `this.$axios`, it cannot send request
 Vue.prototype.$axios = service
 
+import _ from 'lodash'
+Vue.use(_)
+
 new Vue({
   el: '#app',
   i18n,