完成table组件的过滤功能

src/views/haomo/components/tables/HmComplexTable.vue

@@ -2,6 +2,17 @@
   <div class="app-container calendar-list-container">
     <!-- 过滤 -->
     <div class="filter-container">
+      <!-- 过滤条件 -->
+      <span v-for="filter in filters" class="hm-complex-table__filter-span">
+        <el-input @keyup.enter.native="handleFilter"
+                  style="width: 200px;"
+                  class="filter-item"
+                  :placeholder="filter.placeholder"
+                  v-model="listQuery.filters[schema['modelUnderscore']][getFilterColumn(filter)][getFilterOper(filter)]">
+        </el-input>
+      </span>
+      <!-- end 过滤条件 -->
+
       <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
       <el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download" @click="handleDownload">导出</el-button>
     </div>
@@ -57,7 +68,25 @@
         required: true
       },
       /**
-       * 搜索过滤选项。默认没有过滤功能
+       * 搜索过滤选项。默认没有过滤功能。完整的实力为：
+       *  {
+       *    "column1": {
+       *      like: '%abc%',                 模糊查询,包含字符”abc”
+       *      notLike: ''                    模糊查询,不包含字符
+       *      between: [1, 10],              取值在[1,10]之间,包含1与10
+       *      notBetween: [1, 10],           取值小于1大于10
+       *      isNull: true,     // 只能为true 判断字段是否为空
+       *      isNotNull: true,  // 只能为true 判断字段是否不为空
+       *      equalTo: "abc",                相等于
+       *      notEqualTo: "abc",             不等于
+       *      greaterThan: 10,               大于
+       *      greaterThanOrEqualTo: Í10,      大于等于
+       *      lessThan: 10,                  小于
+       *      lessThanOrEqualTo: 10,         小于等于
+       *      in: [],                        包含[]中字段
+       *      notIn: []                      不包含[]中字段
+       *    }
+       *  }
        */
       filters: {
         type: Array,
@@ -72,12 +101,22 @@
        *      "render": function(value){
        *        return "<a href='value'></a>"
        *      }
-       *    }
+       *    },
+       *    "mobile",
+       *    "sexual"
        *  ]
        */
       columns: {
         type: Array,
-        required: false
+        required: false,
+        validator: function(value) {
+          if (typeof value !== 'object') {
+            console.warn(`传入的columns不符合要求，必须是数组`)
+            return false
+          }
+
+          return true
+        }
       },
       /**
        * 修改行数据的Hook函数。参数为行数据 rowData
@@ -112,21 +151,69 @@
           page_no: 1,
           page_size: 20,
           sort_item: 'create_time',
-          sort_order: 'desc'
+          sort_order: 'desc',
+          filters: {}
         },
         downloadLoading: false,
 
         showColumns: [] // 要显示的列数据
       }
     },
+    computed: {
+      filterParams: function() {
+        const self = this
+        const ret = JSON.parse(JSON.stringify(self.listQuery.filters))
+        if (!ret) {
+          return ret
+        }
+
+        if (!ret[self.schema['modelUnderscore']]) {
+          return ret
+        }
+
+        _.each(Object.keys(ret[self.schema['modelUnderscore']]), function(column) {
+          const operValue = ret[self.schema['modelUnderscore']][column]
+          console.log(`column: ${column}`)
+          if (Object.keys(operValue)[0] === 'like') {
+            ret[self.schema['modelUnderscore']][column]['like'] = '%' + ret[self.schema['modelUnderscore']][column]['like'] + '%'
+          }
+        })
+
+        return ret
+      }
+    },
     created() {
+      // this.validate()
+
       this.init()
 
       this.getList()
     },
     methods: {
+      validate() {
+        const self = this
+        // this.columns数组元素本身必须是string或者object. 且必须是schema中定义的列
+        // 由于vue中不允许通过其他的props来验证当前props，只能在created里进行调用
+        _.each(self.columns, function(item) {
+          if (!item) {
+            return 0
+          }
+
+          if (typeof item !== 'string' && typeof item !== 'object') {
+            console.error(`传入的columns不符合要求，数组元素必须是字符串或对象`)
+          }
+          if (typeof item === 'string' && !_.keyBy(self.schema['columns'], 'code')[item.toUpperCase()]) {
+            console.error(`传入的columns不符合要求，字符串元素[${item}]必须是schema中定义的列[code]`)
+          }
+          if (typeof item === 'object' && !_.keyBy(self.schema['columns'], 'code')[item['code'].toUpperCase()]) {
+            console.error(`传入的columns不符合要求，元素的code属性[${item['code']}]必须是schema中定义的列[code]`)
+          }
+        })
+      },
+
       init() {
         const self = this
+        // 处理要显示的列
         if (!self.columns || !self.columns.length) {
           _.each(self.schema['columns'], function(column) {
             const tmp = JSON.parse(JSON.stringify(column))
@@ -135,13 +222,38 @@
           })
         } else {
           self.showColumns = JSON.parse(JSON.stringify(self.columns))
+          // 将字符串对象进行替换处理
+          _.each(self.showColumns, function(column, index) {
+            if (typeof column === 'string') {
+              const tmp = _.keyBy(self.schema['columns'], 'code')[column.toUpperCase()]
+              self.$set(tmp, 'code', tmp.code.toLowerCase())
+              self.$set(self.showColumns, index, tmp)
+            }
+          })
+        }
+
+        // 处理过滤条件
+        if (self.filters) {
+          const tableName = self.schema['modelUnderscore']
+          const filters = {}
+          filters[tableName] = {}
+          _.each(self.filters, function(filter) {
+            filters[tableName] = Object.assign(filters[tableName], filter)
+          })
+          delete filters[tableName]['placeholder']
+          self.$set(self.listQuery, 'filters', filters)
         }
       },
       getList() {
         const self = this
         self.listLoading = true
+
+        // 处理过滤条件
+        const params = JSON.parse(JSON.stringify(self.listQuery))
+        params.filters = self.filterParams
+
         request(self.schema.modelUnderscorePlural, {
-          params: self.listQuery
+          params: params
         }).then(resp => {
           console.log(resp)
           self.list = resp.data
@@ -150,7 +262,6 @@
         })
       },
       handleFilter() {
-        this.listQuery.page_no = 1
         this.getList()
       },
       handleSizeChange(val) {
@@ -190,7 +301,29 @@
             return v[j]
           }
         }))
+      },
+
+      getFilterColumn(filter) {
+        const keys = Object.keys(filter)
+        let column = null
+        _.each(keys, function(key) {
+          if (key !== 'placeholder') {
+            column = key
+            return 0
+          }
+        })
+        return column.toLowerCase()
+      },
+
+      getFilterOper(filter) {
+        return Object.keys(filter[this.getFilterColumn(filter)])[0]
       }
     }
   }
 </script>
+
+<style>
+  .hm-complex-table__filter-span {
+    margin-right: 5px;
+  }
+</style>

src/views/haomo/components/tables/index.vue

 <template>
   <div class="app-container calendar-list-container">
-    <hm-complex-table :schema="schema['HmUser']"></hm-complex-table>
+    <hm-complex-table :schema="schema['HmUser']"
+                      :columns="showUserColumns"
+                      :filters="userFilters"></hm-complex-table>
     <hm-complex-table :schema="schema['Department']"></hm-complex-table>
     <hm-complex-table :schema="schema['Role']"></hm-complex-table>
   </div>
@@ -19,7 +21,13 @@
       'hm-complex-table': HmComplexTable
     },
     data() {
-      return {}
+      return {
+        showUserColumns: ['mobile', 'loginid'],
+        userFilters: [
+          { placeholder: '过滤手机号', 'mobile': { 'like': '' }},
+          { placeholder: '过滤登录Id', 'loginid': { 'like': '3001' }}
+        ]
+      }
     },
     filters: {
     },