Merge pull request #36 from vipshop/develop

Develop

STD-COMP.md

@@ -36,10 +36,12 @@
   autocomplete: { // 自动补全 
     itemValueField: 'value', // 项数据表示value的字段
     itemTemplate: '<span>{{item.value}}</span>', // 显示项的模板
+    immediateShow: false, // 是否立即显示，如果为false则当输入关键字才显示
     enumSource: [{value: [String | Number | Boolean], label: ''}], // 当提示数据是本地而非远程时提供
     enumSourceRemote: {
       remoteUrl: '', // 如果是远程访问，则填写该url
       paramName: 'keyword', // 请求参数名，默认是keyword
+      otherParams: {}, // 其它请求参数，值支持 dx表达式
       resField: '', // 响应结果的字段
     }
   },

packages/ncform-theme-elementui/examples/control-comps/input.html

@@ -52,6 +52,7 @@
     })
     Mock.mock(/getKeywords/, function (options) {
       let params = url('?', options.url) || {};
+      console.log('getKeywords:', params)
       let result = [
         { value: 'oppo' },
         { value: 'xiaomi' },
@@ -211,7 +212,8 @@
                   autocomplete: {
                     itemValueField: 'keyword', // 项数据表示value的字段
                     itemTemplate: '<span>-> {{item.keyword}}</span>',
-                    enumSource: [{ keyword: 'iphone1' }, { keyword: 'iphone x' }, { keyword: 'oppo' }]
+                    enumSource: [{ keyword: 'iphone1' }, { keyword: 'iphone x' }, { keyword: 'oppo' }],
+                    immediateShow: true
                   }
                 }
               }
@@ -222,6 +224,8 @@
 itemTemplate: 显示数据项的模板，如"<span>-> {{item.keyword}}</span>"
 
 itemValueField: 数据源的每一项显示的标签的字段，默认值是value. 例子中就是keyword
+
+immediateShow: 是否立即显示，如果为false则当输入关键字才显示。默认为false
         `
       },
       {
@@ -239,6 +243,7 @@ itemValueField: 数据源的每一项显示的标签的字段，默认值是valu
                     enumSourceRemote: {
                       remoteUrl: '/api/input/getKeywords', // 如果是远程访问，则填写该url
                       paramName: 'keyword', // 请求参数名，默认是keyword
+                      otherParams: { date: 'dx: +new Date()' }, // 其它请求参数，值支持 dx表达式
                       resField: 'data', // 响应结果的字段
                     }
                   }
@@ -252,6 +257,8 @@ remoteUrl: 远程接口url
 
 paramName: 请求参数名，默认是keyword
 
+otherParams: 其它请求参数，值支持 dx表达式
+
 resField: 数据源读取返回数据的哪个字段，如例子返回{data: [{ value: 'iphone', label: 'iphone' }, ...]}，则填写data
         `
       },

packages/ncform-theme-elementui/src/components/control-comps/input.vue

@@ -28,7 +28,7 @@
     </el-input>
 
     <!-- 自动补全 -->
-    <el-autocomplete v-else :disabled="disabled" :readonly="readonly" :placeholder="placeholder" v-show="!hidden" :type="mergeConfig.type" :prefix-icon="mergeConfig.prefixIcon" :suffix-icon="mergeConfig.suffixIcon" :fetchSuggestions="querySearch" :trigger-on-focus="false" :value-key="mergeConfig.autocomplete.itemValueField || 'value'" v-model="inputVal">
+    <el-autocomplete v-else :disabled="disabled" :readonly="readonly" :placeholder="placeholder" v-show="!hidden" :type="mergeConfig.type" :prefix-icon="mergeConfig.prefixIcon" :suffix-icon="mergeConfig.suffixIcon" :fetch-suggestions="querySearch" :trigger-on-focus="!!mergeConfig.autocomplete.immediateShow" :value-key="mergeConfig.autocomplete.itemValueField || 'value'" v-model="inputVal">
 
       <template slot-scope="props" v-if="mergeConfig.autocomplete && mergeConfig.autocomplete.itemTemplate">
         <component :is="itemTemplate" :item="props.item">
@@ -74,6 +74,7 @@
 <script>
 import ncformCommon from '@ncform/ncform-common';
 import _get from "lodash-es/get";
+import _cloneDeep from 'lodash-es/cloneDeep';
 import axios from "axios";
 
 const controlMixin = ncformCommon.mixins.vue.controlMixin;
@@ -174,6 +175,7 @@ export default {
         this.$emit("input", val);
       });
     }
+
   },
 
   data() {
@@ -203,10 +205,12 @@ export default {
         //   itemLabelField: 'label', // 项数据表示label的字段
         //   itemValueField: 'value', // 项数据表示value的字段
         //   itemTemplate: '<li value="{{value}}">{{label}}</li>', // 显示项的模板
+        //   immediateShow: false, // 是否立即显示，如果为false则当输入关键字才显示
         //   enumSource: [{value: [String | Number | Boolean], label: ''}], // 当提示数据是本地而非远程时提供
         //   enumSourceRemote: {
         //     remoteUrl: '', // 如果是远程访问，则填写该url
         //     paramName: 'keyword', // 请求参数名，默认是keyword
+        //     otherParams: {}, // 其它请求参数，值支持 dx表达式
         //     resField: '', // 响应结果的字段
         //   }
         // },
@@ -259,6 +263,16 @@ export default {
     };
   },
 
+  computed: {
+    autocompleteOtherParams() {
+      let otherParams = _cloneDeep(_get(this.mergeConfig, 'autocomplete.enumSourceRemote.otherParams'), {});
+      for (let key in otherParams) {
+        otherParams[key] = this._analyzeVal(otherParams[key]);
+      }
+      return otherParams;
+    }
+  },
+
   methods: {
     querySearch(queryString, cb) {
       const autoCpl = this.$data.mergeConfig.autocomplete;
@@ -279,7 +293,7 @@ export default {
       // 下面是远程数据源的处理
       const options = {
         url: autoCpl.enumSourceRemote.remoteUrl,
-        params: {}
+        params: JSON.parse(JSON.stringify(this.autocompleteOtherParams))
       };
       options.params[autoCpl.enumSourceRemote.paramName] = queryString;
 

packages/ncform/src/rules/index.js

@@ -21,6 +21,7 @@ import maxProperties from "./maxProperties";
 import minProperties from "./minProperties";
 import pattern from "./pattern";
 import url from "./url";
+import ajax from "./ajax";
 
 export default {
   contains,
@@ -45,5 +46,6 @@ export default {
   maxProperties,
   minProperties,
   pattern,
-  url
+  url,
+  ajax,
 };