From 4048a000c78d2782c6b7c752ab1889fd8df9ca90 Mon Sep 17 00:00:00 2001
From: fit2bot <68588906+fit2bot@users.noreply.github.com>
Date: Thu, 10 Dec 2020 17:52:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E8=BF=87=E6=BB=A4=E5=AD=97=E6=AE=B5=E9=80=89=E9=A1=B9=20(#527)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 添加表格过滤字段选项

* fix: 如果已有Filter的情况下去掉过滤

Co-authored-by: Orange <orangemtony@gmail.com>
---
 src/components/AutoDataTable/index.vue        | 38 +++++++++++++++++++
 .../el-data-table/el-data-table.vue           |  2 +
 src/styles/index.scss                         |  4 ++
 3 files changed, 44 insertions(+)

diff --git a/src/components/AutoDataTable/index.vue b/src/components/AutoDataTable/index.vue
index b49c1721f..b4dd2dc34 100644
--- a/src/components/AutoDataTable/index.vue
+++ b/src/components/AutoDataTable/index.vue
@@ -118,6 +118,43 @@ export default {
       }
       return col
     },
+    addFilterIfNeed(col) {
+      if (col.prop) {
+        const column = this.meta[col.prop] || {}
+        if (!column.filter) {
+          return col
+        }
+        if (column.type === 'boolean') {
+          col.filters = [
+            { text: this.$t('common.Yes'), value: true },
+            { text: this.$t('common.No'), value: false }
+          ]
+          col.sortable = false
+          col.filterMethod = function(value, row, column) {
+            const property = column['property']
+            return row[property] === value
+          }
+        }
+        if (column.type === 'choice' && column.choices) {
+          col.filters = column.choices.map(item => {
+            if (typeof (item.value) === 'boolean') {
+              if (item.value) {
+                return { text: item.display_name, value: 'True' }
+              } else {
+                return { text: item.display_name, value: 'False' }
+              }
+            }
+            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
+          }
+        }
+      }
+      return col
+    },
     generateColumn(name) {
       const colMeta = this.meta[name] || {}
       const customMeta = this.config.columnsMeta ? this.config.columnsMeta[name] : {}
@@ -127,6 +164,7 @@ export default {
       col = this.generateColumnByType(colMeta.type, col)
       col = Object.assign(col, customMeta)
       col = this.addHelpTipsIfNeed(col)
+      col = this.addFilterIfNeed(col)
       return col
     },
     generateColumns() {
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 d292bf8c2..1cc43338c 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
@@ -95,6 +95,8 @@
             v-for="col in columns"
             :key="col.prop"
             :formatter="typeof col.formatter === 'function' ? col.formatter : null"
+            :filters="col.filters || null"
+            :filter-method="typeof col.filterMethod === 'function' ? col.filterMethod : null"
             v-bind="{align: columnsAlign, ...col}"
           >
             <template v-if="col.formatter && typeof col.formatter !== 'function'" v-slot:default="{row, column, index}">
diff --git a/src/styles/index.scss b/src/styles/index.scss
index e6450066d..420ea7369 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -153,3 +153,7 @@ input[type=file] {
   width: 100%;
   table-layout: fixed !important;
 }
+
+.el-table__column-filter-trigger i {
+  color: #c0c4cc !important;
+}