From 06f6202bc45b2f6d09e042b892b4cfdc6db35bd3 Mon Sep 17 00:00:00 2001
From: Orange <orangemtony@gmail.com>
Date: Thu, 17 Dec 2020 17:53:50 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20Filter=E4=BD=BF=E7=94=A8=E5=90=8E?=
 =?UTF-8?q?=E7=AB=AF=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AutoDataTable/index.vue        | 22 +++++----
 .../el-data-table/el-data-table.vue           |  2 +
 src/components/ListTable/index.vue            | 47 ++++++++++---------
 3 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/src/components/AutoDataTable/index.vue b/src/components/AutoDataTable/index.vue
index b4dd2dc34..7a4397437 100644
--- a/src/components/AutoDataTable/index.vue
+++ b/src/components/AutoDataTable/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <DataTable v-if="!loading" ref="dataTable" v-loading="loading" :config="iConfig" v-bind="$attrs" v-on="$listeners" />
+  <DataTable v-if="!loading" ref="dataTable" v-loading="loading" :config="iConfig" v-bind="$attrs" v-on="$listeners" @filter-change="filterChange" />
 </template>
 
 <script type="text/jsx">
@@ -15,6 +15,10 @@ export default {
     config: {
       type: Object,
       default: () => ({})
+    },
+    filterTable: {
+      type: Function,
+      default: () => ({})
     }
   },
   data() {
@@ -130,10 +134,7 @@ export default {
             { text: this.$t('common.No'), value: false }
           ]
           col.sortable = false
-          col.filterMethod = function(value, row, column) {
-            const property = column['property']
-            return row[property] === value
-          }
+          col['column-key'] = col.prop
         }
         if (column.type === 'choice' && column.choices) {
           col.filters = column.choices.map(item => {
@@ -147,10 +148,7 @@ export default {
             return { text: item.display_name, value: item.value }
           })
           col.sortable = false
-          col.filterMethod = function(value, row, column) {
-            const property = column['property']
-            return row[property] === value
-          }
+          col['column-key'] = col.prop
         }
       }
       return col
@@ -180,6 +178,12 @@ export default {
       }
       config.columns = columns
       this.iConfig = config
+    },
+    filterChange(filters) {
+      const key = Object.keys(filters)[0]
+      const attr = {}
+      attr[key] = filters[key][0]
+      this.filterTable(attr)
     }
   }
 }
diff --git a/src/components/DataTable/compenents/el-data-table/el-data-table.vue b/src/components/DataTable/compenents/el-data-table/el-data-table.vue
index 1cc43338c..f5e5fd50d 100644
--- a/src/components/DataTable/compenents/el-data-table/el-data-table.vue
+++ b/src/components/DataTable/compenents/el-data-table/el-data-table.vue
@@ -11,6 +11,7 @@
         v-bind="tableAttrs"
         :data="data"
         :row-class-name="rowClassName"
+        v-on="$listeners"
         @selection-change="selectStrategy.onSelectionChange"
         @select="selectStrategy.onSelect"
         @select-all="selectStrategy.onSelectAll($event, canSelect)"
@@ -96,6 +97,7 @@
             :key="col.prop"
             :formatter="typeof col.formatter === 'function' ? col.formatter : null"
             :filters="col.filters || null"
+            :filter-multiple="false"
             :filter-method="typeof col.filterMethod === 'function' ? col.filterMethod : null"
             v-bind="{align: columnsAlign, ...col}"
           >
diff --git a/src/components/ListTable/index.vue b/src/components/ListTable/index.vue
index f7b2e4c98..74705ca13 100644
--- a/src/components/ListTable/index.vue
+++ b/src/components/ListTable/index.vue
@@ -2,7 +2,7 @@
   <div>
     <TableAction :table-url="iTableConfig.url" :search-table="search" :date-pick="handleDateChange" v-bind="headerActions" :selected-rows="selectedRows" :reload-table="reloadTable" />
     <IBox class="table-content">
-      <AutoDataTable ref="dataTable" :config="iTableConfig" @selection-change="handleSelectionChange" v-on="$listeners" />
+      <AutoDataTable ref="dataTable" :filter-table="filter" :config="iTableConfig" @selection-change="handleSelectionChange" v-on="$listeners" />
     </IBox>
   </div>
 </template>
@@ -91,6 +91,9 @@ export default {
     search(attrs) {
       return this.dataTable.search(attrs, true)
     },
+    filter(attrs) {
+      this.$refs.dataTable.$refs.dataTable.search(attrs, true)
+    },
     handleDateChange(attrs) {
       this.$set(this.extraQuery, 'date_from', attrs[0].toISOString())
       this.$set(this.extraQuery, 'date_to', attrs[1].toISOString())
@@ -113,28 +116,28 @@ export default {
 
 <style lang="scss" scoped>
 
-  .table-content {
-    margin-top: 10px;
+.table-content {
+  margin-top: 10px;
 
-    & >>> .el-card__body {
-      padding: 0;
-    }
-    & >>> .el-table__header thead > tr > th {
-      background-color: white;
-    }
-
-    /*& >>> .el-table--striped .el-table__body tr.el-table__row--striped td {*/
-      /*background: white;*/
-    /*}*/
-
-    /*& >>> .el-table th, .el-table tr  {*/
-      /*background-color: red;*/
-      /*!*background-color: #FAFAFA;*!*/
-    /*}*/
+  & >>> .el-card__body {
+    padding: 0;
+  }
+  & >>> .el-table__header thead > tr > th {
+    background-color: white;
   }
 
-  //修改颜色
-  // .el-button--text{
-  //   color: #409EFF;
-  // }
+  /*& >>> .el-table--striped .el-table__body tr.el-table__row--striped td {*/
+  /*background: white;*/
+  /*}*/
+
+  /*& >>> .el-table th, .el-table tr  {*/
+  /*background-color: red;*/
+  /*!*background-color: #FAFAFA;*!*/
+  /*}*/
+}
+
+//修改颜色
+// .el-button--text{
+//   color: #409EFF;
+// }
 </style>