From 5addfd8526e5c8c58e720a1d11ab91189e1f025a Mon Sep 17 00:00:00 2001
From: Brook <brook.qin@gmail.com>
Date: Wed, 14 Aug 2019 17:27:45 +0800
Subject: [PATCH] =?UTF-8?q?[new=20feature]=20TreeSelect:=20=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E5=A4=9A=E9=80=89=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/pages/tree-select/index.js | 20 +++++++++++++++++---
 packages/tree-select/README.md     | 21 ++++++++++++++++++---
 packages/tree-select/index.ts      |  2 +-
 packages/tree-select/index.wxml    | 22 ++++++++++++++++++++--
 4 files changed, 56 insertions(+), 9 deletions(-)

diff --git a/example/pages/tree-select/index.js b/example/pages/tree-select/index.js
index 4b0e49ca..67d900fa 100644
--- a/example/pages/tree-select/index.js
+++ b/example/pages/tree-select/index.js
@@ -23,8 +23,7 @@ Page({
         children: config.pro3
       }
     ],
-    mainActiveIndex: 0,
-    activeId: 1
+    mainActiveIndex: 0
   },
 
   onClickNav({ detail }) {
@@ -34,8 +33,23 @@ Page({
   },
 
   onClickItem({ detail }) {
+    // 多选
+    if (!this.data.activeId) this.data.activeId = [];
+
+    const idx = this.data.activeId.indexOf(detail.id);
+    if (idx > -1) {
+      this.data.activeId.splice(idx, 1);
+    } else {
+      this.data.activeId.push(detail.id);
+    }
+
+/*
+    // 单选
+    this.data.activeId = this.data.activeId === detail.id ? null : detail.id;
+*/
+
     this.setData({
-      activeId: detail.id
+      activeId: this.data.activeId
     });
   }
 });
diff --git a/packages/tree-select/README.md b/packages/tree-select/README.md
index 5eb723c1..f9d5d2f3 100644
--- a/packages/tree-select/README.md
+++ b/packages/tree-select/README.md
@@ -15,7 +15,7 @@
 ### 基础用法
 
 可以在任意位置上使用 van-tree-select 标签。传入对应的数据即可。
-
+此组件支持单选或多选，具体行为完全基于事件 click-item 的实现逻辑如何为属性 active-id 赋值，当 active-id 为数组时即为多选状态。
 ```html
 <van-tree-select
   items="{{ items }}"
@@ -39,8 +39,23 @@ Page({
   },
 
   onClickItem({ detail = {} }) {
+    // 多选
+    if (!this.data.activeId) this.data.activeId = [];
+
+    const idx = this.data.activeId.indexOf(detail.id);
+    if (idx > -1) {
+      this.data.activeId.splice(idx, 1);
+    } else {
+      this.data.activeId.push(detail.id);
+    }
+
+/*
+    // 单选
+    this.data.activeId = this.data.activeId === detail.id ? null : detail.id;
+*/
+
     this.setData({
-      activeId: detail.id
+      activeId: this.data.activeId
     });
   }
 });
@@ -52,7 +67,7 @@ Page({
 |-----------|-----------|-----------|-------------|-------------|
 | items | 分类显示所需的数据，具体数据结构可看 数据结构	 | Array | [] | |
 | main-active-index | 左侧导航高亮的索引	 | Number | 0 | |
-| active-id	 | 右侧选择项，高亮的数据id	 | String | Number	 | 0 | |
+| active-id	 | 右侧选择项，高亮的数据id	 | String / Number / Array	 | 0 | |
 
 ### Events
 
diff --git a/packages/tree-select/index.ts b/packages/tree-select/index.ts
index ba148103..280702ec 100644
--- a/packages/tree-select/index.ts
+++ b/packages/tree-select/index.ts
@@ -20,7 +20,7 @@ VantComponent({
       value: 0
     },
     activeId: {
-      type: [Number, String]
+      type: [Number, String, Array]
     },
     maxHeight: {
       type: Number,
diff --git a/packages/tree-select/index.wxml b/packages/tree-select/index.wxml
index e1f25b50..b5e73dbb 100644
--- a/packages/tree-select/index.wxml
+++ b/packages/tree-select/index.wxml
@@ -1,5 +1,23 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 
+<wxs module="tsUtil">
+// 判断子项是否被选中
+function isArray (array) {
+  return array instanceof Array;
+}
+function isActive (activeList, itemId) {
+  if (typeof activeList === 'undefined' || activeList == null) return false;
+  if (isArray(activeList)) {
+    return activeList.indexOf(itemId) > -1;
+  }
+  else {
+    return activeList === itemId;
+  }
+}
+
+module.exports.isActive = isActive;
+</wxs>
+
 <view
   class="van-tree-select"
   style="height: {{ mainHeight }}px"
@@ -23,13 +41,13 @@
     <view
       wx:for="{{ subItems }}"
       wx:key="id"
-      class="van-ellipsis van-hairline--bottom content-item-class {{ utils.bem('tree-select__item', { active: activeId === item.id, disabled: item.disabled }) }} {{ activeId === item.id ? 'content-active-class' : '' }} {{ item.disabled ? 'content-disabled-class' : '' }}"
+      class="van-ellipsis van-hairline--bottom content-item-class {{ utils.bem('tree-select__item', { active: tsUtil.isActive(activeId, item.id), disabled: item.disabled }) }} {{ tsUtil.isActive(activeId, item.id) ? 'content-active-class' : '' }} {{ item.disabled ? 'content-disabled-class' : '' }}"
       data-item="{{ item }}"
       bind:tap="onSelectItem"
     >
       {{ item.text }}
       <van-icon
-        wx:if="{{ activeId === item.id }}"
+        wx:if="{{ tsUtil.isActive(activeId, item.id) }}"
         name="checked"
         size="16px"
         class="van-tree-select__selected"