support fuzzy search for local data

docs/en_US.md

@@ -51,6 +51,7 @@ Supported attributes of `Element UI Table column`: column-key / fixed / render-h
 | size | size of form item | string | large/small/mini | - |
 | showResetBtn | whether to show the reset button | boolean | - | false
 | inline | whether the form is inline | boolean | - | false |
+| fuzzy | whether the form support fuzzy search, global setting, only avaliable for `local` data | boolean | - | false |
 | labelWidth | width of form label, and all its direct child form items will inherit this value | number | - | - |
 | itemWidth | width of form item, and all its direct child form items will inherit this value | number | - | - |
 submitHandler | function to hander click event of submit button, the will receive the form object as the first argument | function | - | - |
@@ -64,6 +65,7 @@ submitHandler | function to hander click event of submit button, the will receiv
 | --- |------|:----:|-----|:-----:|
 | label | form item label value | string | - | - |
 | prop | form item prop's key | string | - | - |
+| fuzzy | whether form item support fuzzy search, only avaliable for `local` data | boolean | - | false |
 | itemType | form item type, Recently, only input/select/date/daterange are avaliable | string | input/select/date/daterange | - |
 | size | form item size | string | large/small/mini | - |
 | labelWidth | width of form label | - | - |

docs/zh_CN.md

@@ -51,6 +51,7 @@
 | size | 全局的表单尺寸 | string | large/small/mini | - |
 | showResetBtn | 是否显示'重置'按钮 | boolean | - | false
 | inline | 行内表单模式 | boolean | - | false |
+| fuzzy | 搜索条件是否支持模糊搜索，全局设置，仅支持 local 数据展示 | boolean | - | false |
 | labelWidth | 表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值 | number | - | - |
 | itemWidth | 表单域宽度 | number | - | - |
 submitHandler | 查询按钮的click处理函数，接收form表单对象数据作为第一个参数 | function | - | - |
@@ -64,6 +65,7 @@ submitHandler | 查询按钮的click处理函数，接收form表单对象数据
 | --- |------|:----:|-----|:-----:|
 | label | form表单标签 | string | - | - |
 | prop | form表单属性key值 | string | - | - |
+| fuzzy | 该 form item 是否支持模糊搜索，仅支持 local 数据展示 | boolean | - | false |
 | itemType | 表单类型，目前支持input/select/date/daterange四种表单 | string | input/select/date/daterange | - |
 | size | 表单尺寸 | string | large/small/mini | - |
 | labelWidth | 表单域标签的宽度 | number | - | - |

lib/search.js

@@ -200,6 +200,10 @@ var formProps = exports.formProps = {
     type: Boolean,
     default: false
   },
+  fuzzy: {
+    type: Boolean,
+    default: false
+  },
   labelWidth: Number,
   itemWidth: Number,
   submitHandler: Function,
@@ -249,6 +253,10 @@ var formProps = exports.formProps = {
       type: Boolean,
       default: false
     },
+    fuzzy: {
+      type: Boolean,
+      default: false
+    },
     options: Array,
     selectFetch: Function,
     selectResultField: String,
@@ -295,7 +303,7 @@ function itemTypeValidator(value) {
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_main_vue__ = __webpack_require__(3);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_main_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_main_vue__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_37e2b53c_hasScoped_false_preserveWhitespace_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_main_vue__ = __webpack_require__(4);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_23f9868e_hasScoped_false_preserveWhitespace_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_main_vue__ = __webpack_require__(4);
 var normalizeComponent = __webpack_require__(0)
 /* script */
 
@@ -311,7 +319,7 @@ var __vue_scopeId__ = null
 var __vue_module_identifier__ = null
 var Component = normalizeComponent(
   __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_main_vue___default.a,
-  __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_37e2b53c_hasScoped_false_preserveWhitespace_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_main_vue__["a" /* default */],
+  __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_23f9868e_hasScoped_false_preserveWhitespace_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_main_vue__["a" /* default */],
   __vue_template_functional__,
   __vue_styles__,
   __vue_scopeId__,
@@ -407,7 +415,9 @@ exports.default = {
   data: function data() {
     var _this = this;
 
-    var forms = this.$props.forms;
+    var _$props = this.$props,
+        forms = _$props.forms,
+        fuzzy = _$props.fuzzy;
 
     var datePrefix = 'daterange-prefix';
     var selectOptionPrefix = 'select-option-prefix';
@@ -417,12 +427,15 @@ exports.default = {
 
     var params = {};
     var format = {};
+    var fuzzyOps = {};
 
     forms.forEach(function (v, i) {
       var propType = _typeof(v.prop);
       if (propType === 'string') {
         v.modelValue = v.prop;
         params[v.prop] = '';
+
+        fuzzyOps[v.prop] = v.fuzzy ? v.fuzzy : fuzzy;
         if (v.format) {
           format[v.prop] = v.format;
         }
@@ -432,6 +445,8 @@ exports.default = {
           if (v.format) {
             format[vv] = v.format;
           }
+
+          fuzzyOps[vv] = v.fuzzy ? v.fuzzy : fuzzy;
         });
       }
       if (v.itemType === 'daterange') {
@@ -462,7 +477,8 @@ exports.default = {
       datePrefix: datePrefix,
       selectOptionPrefix: selectOptionPrefix
     }, dataObj, {
-      format: format
+      format: format,
+      fuzzyOps: fuzzyOps
     });
   },
 
@@ -495,6 +511,9 @@ exports.default = {
         }
       });
     },
+    getParamFuzzy: function getParamFuzzy() {
+      return this.fuzzyOps;
+    },
     getParams: function getParams(callback) {
       var _this3 = this;
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "el-search-table-pagination",
-  "version": "0.4.18",
+  "version": "0.4.19",
   "description": "A component which combines form、table with pagination components in Element UI. ",
   "main": "./lib/index.js",
   "files": [

packages/search-table-pagination/src/main.vue

@@ -7,6 +7,7 @@
       ref="searchForm"
       :forms="formOptions.forms"
       :size="formOptions.size"
+      :fuzzy="formOptions.fuzzy"
       :inline="formOptions.inline"
       :label-width="formOptions.labelWidth"
       :item-width="formOptions.itemWidth"
@@ -189,14 +190,21 @@
         const validParamKeys = Object.keys(mergeParams).filter(v => {
           return mergeParams[v] !== undefined && mergeParams[v] !== ''
         })
+        const paramFuzzy = this.$refs['searchForm'].getParamFuzzy()
+
         if (validParamKeys.length > 0) {
           const validData = cacheLocalData.filter(v => {
             let valids = []
             validParamKeys.forEach(vv => {
               if (typeof v[vv] === 'number') {
-                valids.push(String(v[vv]) === String(mergeParams[vv]))
+                valids.push(
+                  paramFuzzy[vv] ? (String(v[vv]).indexOf(String(mergeParams[vv])) !== -1)
+                    : (String(v[vv]) === String(mergeParams[vv]))
+                )
               } else {
-                valids.push(v[vv] === mergeParams[vv])
+                valids.push(
+                  paramFuzzy[vv] ? (v[vv].indexOf(mergeParams[vv]) !== -1) : (v[vv] === mergeParams[vv])
+                )
               }
             })
             return valids.every(vvv => {
@@ -255,7 +263,7 @@
 
         requestObject.then(response => {
           let result = response
-          
+
           if (response && !(response instanceof Array)) {
             if (listField && listField.indexOf('.') !== -1) {
               listField.split('.').forEach(vv => {

packages/search/src/main.vue

@@ -71,7 +71,7 @@
     name: 'ElSearchForm',
     props: formProps,
     data() {
-      const { forms } = this.$props
+      const { forms, fuzzy } = this.$props
       const datePrefix = 'daterange-prefix'
       const selectOptionPrefix = 'select-option-prefix'
       let dataObj = {
@@ -80,12 +80,15 @@
 
       let params = {}
       let format = {}
+      let fuzzyOps = {}
 
       forms.forEach((v, i) => {
         const propType = typeof v.prop
         if (propType === 'string') {
           v.modelValue = v.prop
           params[v.prop] = ''
+
+          fuzzyOps[v.prop] = v.fuzzy ? v.fuzzy : fuzzy
           if (v.format) {
             format[v.prop] = v.format
           }
@@ -95,6 +98,8 @@
             if (v.format) {
               format[vv] = v.format
             }
+
+            fuzzyOps[vv] = v.fuzzy ? v.fuzzy : fuzzy
           })
         }
         if (v.itemType === 'daterange') {
@@ -125,7 +130,8 @@
         datePrefix,
         selectOptionPrefix,
         ...dataObj,
-        format
+        format,
+        fuzzyOps
       }
     },
     computed: {
@@ -153,6 +159,9 @@
           }
         })
       },
+      getParamFuzzy() {
+        return this.fuzzyOps
+      },
       getParams(callback) {
         this.$refs['form'].validate(valid => {
           if (valid) {
@@ -189,7 +198,7 @@
             `${secondDate.getFullYear()}-${('0' + (secondDate.getMonth() + 1)).substr(-2)}-${('0' + secondDate.getDate()).substr(-2)}`
           ]
         }
-        
+
         this.params[startDate] = dates[0]
         this.params[endDate] = dates[1]
       },

packages/search/src/props.js

@@ -13,6 +13,10 @@ export const formProps = {
     type: Boolean,
     default: false
   },
+  fuzzy: {
+    type: Boolean,
+    default: false
+  },
   labelWidth: Number,
   itemWidth: Number,
   submitHandler: Function,
@@ -62,6 +66,10 @@ export const formProps = {
       type: Boolean,
       default: false
     },
+    fuzzy: {
+      type: Boolean,
+      default: false
+    },
     options: Array,
     selectFetch: Function,
     selectResultField: String,