From 74b5fb610413a232716aee4c3ad23713ebcc6d13 Mon Sep 17 00:00:00 2001
From: hzlilang <hzlilang@corp.netease.com>
Date: Tue, 12 Jun 2018 11:03:45 +0800
Subject: [PATCH 1/2] =?UTF-8?q?multi.select=20=E5=A2=9E=E5=8A=A0=E8=BF=9C?=
 =?UTF-8?q?=E7=A8=8B=E6=95=B0=E6=8D=AE=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 doc/source/doc.js                             |  2 +-
 .../components/form/KLMultiSelect/index.html  |  4 +-
 src/js/components/form/KLMultiSelect/index.js | 16 ++++++
 src/js/components/form/KLMultiSelect/index.md | 57 +++++++++++++++++++
 4 files changed, 76 insertions(+), 3 deletions(-)

diff --git a/doc/source/doc.js b/doc/source/doc.js
index 6630a1f3..41e44bdd 100644
--- a/doc/source/doc.js
+++ b/doc/source/doc.js
@@ -108,7 +108,7 @@ const doc = (isDev, callback) => {
   // 组件文档
   CATES.forEach((c) => {
     const components = getComponents(c.cate).filter((comp) => {
-      if (isDev && !/^KL(Sidebar|Modal|Draggable|Button|Loading|ImagePreview)$/.test(comp)) {
+      if (isDev && !/^KL(Sidebar|Modal|Draggable|Button|Loading|ImagePreview|MultiSelect)$/.test(comp)) {
         return false;
       }
 
diff --git a/src/js/components/form/KLMultiSelect/index.html b/src/js/components/form/KLMultiSelect/index.html
index 137de71e..469eebc6 100644
--- a/src/js/components/form/KLMultiSelect/index.html
+++ b/src/js/components/form/KLMultiSelect/index.html
@@ -40,13 +40,13 @@
             <ul r-animation="on: leave; class: animated fadeOutX fast;">
                 <kl-input value={search[level]}  readonly={readonly}></kl-input>
                 {#list tree[level] | search : search[level],level as cate}
-                {#if !filter || (filter && filter(cate))}
+                {#if !filter || (filter && filter(cate, cate_index))}
                 <li class="f-csp {cate.active?'active':''}" on-click={this.viewCate(cate, level)}>
                 	{#if multiple}
                 	<kl-check checked={cate[checkKey]} on-check={this.checkCate(cate, level, cate[checkKey])}  readonly={readonly} ></kl-check>
                     {/if}
                     <span {#if !multiple} class="cateName"  {/if}>{cate[nameKey]}</span>
-                    {#if cate[childKey] && cate[childKey].length}<span class="more" r-class={{onlyChild:!multiple && !onlyChild}} {#if !multiple && !onlyChild} on-click={this.viewCate(cate, level, true, $event)} {/if}><kl-icon type="chevron_right" /></span>{/if}
+                    {#if (cate[childKey] && cate[childKey].length) || (server && cate[hasChildKey])}<span class="more" r-class={{onlyChild:!multiple && !onlyChild}} {#if !multiple && !onlyChild} on-click={this.viewCate(cate, level, true, $event)} {/if}><kl-icon type="chevron_right" /></span>{/if}
                 </li>
                 {/if}
                 {/list}
diff --git a/src/js/components/form/KLMultiSelect/index.js b/src/js/components/form/KLMultiSelect/index.js
index 93a8fffd..e5e89e7d 100644
--- a/src/js/components/form/KLMultiSelect/index.js
+++ b/src/js/components/form/KLMultiSelect/index.js
@@ -23,6 +23,9 @@ const _ = require('../../../ui-base/_');
  * @param {string}          [options.data.rootValue=null]           <=> 模式2种的选择值(具体见文档 demo)
  * @param {string}          [options.data.showRoot=false]           => 是否用模式2(具体见文档 demo)，这种模式下如果 value 和 rootValue 都传入，回显以 rootValue 为准
  * @param {object}          [options.data.selected=null]            <=> 当前选择项
+ * @param {object}          [options.data.server=false]             => 是否远程获取数据
+ * @param {object}          [options.data.hasChildKey=hasChild]     => 远程获取数据时标识是否有子级的字段的 key
+ * @param {object}          [options.data.serverFn]                 => 远程获取数据的方法，传入当前的 item，返回一个 promise，promose.resolve(list)
  * @param {string}          [options.data.placeholder='']           => 默认提示
  * @param {string}          [options.data.separator=,]              => 多选时value分隔符
  * @param {boolean}         [options.data.showPath=false]           => 单选时是否展示路径
@@ -50,6 +53,8 @@ const KLMultiSelect = Dropdown.extend({
       selected: [],
       rootSelected: [],
       separator: ',',
+      server: false,
+      hasChildKey: 'hasChild',
       placeholder: '',
       key: 'id',
       nameKey: 'name',
@@ -231,6 +236,17 @@ const KLMultiSelect = Dropdown.extend({
     if (data.disabled || data.readonly) {
       return;
     }
+    if (data.server && cate[data.hasChildKey] && (!cate[data.childKey] || !cate[data.childKey].length)) {
+      data.serverFn(cate).then((list) => {
+        cate[data.childKey] = list;
+        this.dealCate(cate, level, show);
+      });
+    } else {
+      this.dealCate(cate, level, show);
+    }
+  },
+  dealCate(cate, level, show) {
+    const data = this.data;
     data.tree[level + 1] = cate[data.childKey] || [];
     // 将本级和下一级的active都置为false
     for (let i = level; i < level + 2; i += 1) {
diff --git a/src/js/components/form/KLMultiSelect/index.md b/src/js/components/form/KLMultiSelect/index.md
index 5c49bd9d..bff2b21e 100644
--- a/src/js/components/form/KLMultiSelect/index.md
+++ b/src/js/components/form/KLMultiSelect/index.md
@@ -426,4 +426,61 @@ var component = new NEKUI.Component({
     },
 });
 ```
+<!-- demo_end -->
+
+<!-- demo_start -->
+### 远程数据
+
+server 为 true
+
+serverFn 是一个接受当前 item， return promise 的 方法，在 resolve 里面传入下一级的 list，并且在 list 里面的每一项都需要一个 key 来判断是否还有下一级，key 默认为 hasChild，可以用 hasChildKey 来覆盖。
+
+<div class="m-example"></div>
+
+```xml
+<kl-multi-select 
+    source={source} 
+    value={value}  
+    server={server}
+    serverFn={serverFn}
+    hasChildKey={hasChildKey}
+    on-select={this.selected($event)} 
+    on-change={this.change($event)}
+    />
+<p>选择的是：{value}</p>
+```
+
+```javascript
+var component = new NEKUI.Component({
+    template: template,
+    data: {
+        source: [
+            {name: '母婴儿童', id: 1, hasChild: true},
+            {name: '美容彩妆', id: 2, hasChild: true},
+            {name: '服饰鞋包', id: 3, hasChild: true}
+        ],
+        value: '',
+        server: true,
+        hasChildKey: 'hasChild',
+        serverFn: function(item) {
+            return new Promise(function(resolve, reject) {
+                setTimeout(function() {
+                    var list = [
+                        {name: '母婴儿童', id: 1, hasChild: true},
+                        {name: '美容彩妆', id: 2, hasChild: true},
+                        {name: '服饰鞋包', id: 3, hasChild: true}
+                    ];
+                    resolve(list)
+                }, 0)
+                // request(url, {
+                //     data: item.id,
+                //     onload: function(json) {
+                //         resolve(json.result.list);
+                //     }
+                // })
+            })
+        }
+    }
+});
+```
 <!-- demo_end -->
\ No newline at end of file

From eef6e2c4ec27fd5090d2116592dab6210df62efe Mon Sep 17 00:00:00 2001
From: hzlilang <hzlilang@corp.netease.com>
Date: Tue, 12 Jun 2018 11:08:01 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/js/components/form/KLMultiSelect/index.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/js/components/form/KLMultiSelect/index.md b/src/js/components/form/KLMultiSelect/index.md
index bff2b21e..41591cd2 100644
--- a/src/js/components/form/KLMultiSelect/index.md
+++ b/src/js/components/form/KLMultiSelect/index.md
@@ -444,8 +444,6 @@ serverFn 是一个接受当前 item， return promise 的 方法，在 resolve 
     server={server}
     serverFn={serverFn}
     hasChildKey={hasChildKey}
-    on-select={this.selected($event)} 
-    on-change={this.change($event)}
     />
 <p>选择的是：{value}</p>
 ```