From e81207a2a24ef76d5298994ddd797a6a4c9192c1 Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Tue, 7 Feb 2017 11:34:00 +0800
Subject: [PATCH] update Tree

---
 src/components/tree/tree-node.vue |  13 -------------
 src/components/tree/tree.vue      | 286 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----
 src/locale/lang/en-US.js          |   3 +++
 src/locale/lang/zh-CN.js          |   3 +++
 src/locale/lang/zh-TW.js          |   3 +++
 src/styles/components/tree.less   | 130 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 test/routers/tree.vue             |  48 ++++++++++++++++++++++++++++++++++++++++--------
 7 files changed, 459 insertions(+), 27 deletions(-)
 delete mode 100644 src/components/tree/tree-node.vue

diff --git a/src/components/tree/tree-node.vue b/src/components/tree/tree-node.vue
deleted file mode 100644
index 5bc4676..0000000
--- a/src/components/tree/tree-node.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-
-</template>
-<script>
-    export default {
-        props: {},
-        data () {
-            return {};
-        },
-        computed: {},
-        methods: {}
-    };
-</script>
\ No newline at end of file
diff --git a/src/components/tree/tree.vue b/src/components/tree/tree.vue
index 5bc4676..c0eebfb 100644
--- a/src/components/tree/tree.vue
+++ b/src/components/tree/tree.vue
@@ -1,13 +1,289 @@
 <template>
-
+    <ul :class="classes">
+        <li v-for="item in data" :class="itemCls(item)">
+            <span :class="arrowCls(item)" @click="setExpand(item.disabled, $index)"></span>
+            <span v-if="showCheckbox" :class="checkboxCls(item)" @click="setCheck(item.disabled||item.disableCheckbox,$index)">
+                <span :class="[prefixCls + '-checkbox-inner']"></span>
+            </span>
+            <a :class="titleCls(item)" @click="setSelect(item.disabled, $index)">
+                <span :class="[prefixCls + '-title']" v-html="item.title"></span>
+            </a>
+            <tree
+                v-if="!item.isLeaf"
+                v-show="item.expand"
+                :class="expandCls(item)"
+                :data.sync="item.node"
+                :key="this.key+'.'+$index"
+                :multiple="multiple"
+                :show-checkbox="showCheckbox"
+                transition="slide-up"></tree>
+        </li>
+    </ul>
 </template>
 <script>
+    import { t } from '../../locale';
+
+    const prefixCls = 'ivu-tree';
+
     export default {
-        props: {},
+        name: 'tree',
+        props: {
+            data: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            key: {
+                type: String,
+                default: '0'
+            },
+            multiple: {
+                type: Boolean,
+                default: false
+            },
+            showCheckbox: {
+                type: Boolean,
+                default: false
+            },
+            onSelect: {
+                type: Function,
+                default () {
+                    return {};
+                }
+            },
+            onCheck: {
+                type: Function,
+                default () {
+                    return {};
+                }
+            },
+            emptyText: {
+                type: String,
+                default () {
+                    return t('i.tree.emptyText');
+                }
+            }
+        },
         data () {
-            return {};
+            return {
+                prefixCls: prefixCls
+            };
         },
-        computed: {},
-        methods: {}
+        computed: {
+            classes () {
+                if (this.key === '0') {
+                    return this.prefixCls;
+                } else {
+                    return `${this.prefixCls}-child-tree`;
+                }
+            }
+        },
+        watch: {
+            data(){
+                if (this.key === '0') {
+                    this.setKey();
+                    this.preHandle();
+                }
+            }
+        },
+        methods: {
+            itemCls (item) {
+                return [
+                    {
+                        [`${prefixCls}-item-disabled`]: item.disabled
+                    }
+                ];
+            },
+            arrowCls (item) {
+                return [
+                    `${this.prefixCls}-switcher`,
+                    {
+                        [`${this.prefixCls}-switcher-disabled`]: item.disabled,
+                        [`${this.prefixCls}-noline_close`]: !item.expand && !item.isLeaf,
+                        [`${this.prefixCls}-noline_open`]: item.expand && !item.isLeaf,
+                        [`${this.prefixCls}-switcher-noop`]: item.isLeaf
+                    }
+                ];
+            },
+            checkboxCls (item) {
+                return [
+                    `${this.prefixCls}-checkbox`,
+                    {
+                        [`${this.prefixCls}-checkbox-disabled`]: item.disabled || item.disableCheckbox,
+                        [`${this.prefixCls}-checkbox-checked`]: item.checked && item.childrenCheckedStatus == 2,
+                        [`${this.prefixCls}-checkbox-indeterminate`]: item.checked && item.childrenCheckedStatus == 1
+                    }
+                ];
+            },
+            titleCls (item) {
+                return [
+                    {
+                        [`${this.prefixCls}-node-selected`]: item.selected
+                    }
+                ];
+            },
+            expandCls (item) {
+                return [
+                    {
+                        [`${this.prefixCls}-child-tree-open`]: item.expand
+                    }
+                ];
+            },
+            setKey () {
+                for (let i = 0; i < this.data.length; i++) {
+                    this.data[i].key = `${this.key}.${i}`;
+                }
+            },
+            preHandle(){
+                for (let [i,item] of this.data.entries()) {
+                    if (!item.node || !item.node.length) {
+                        this.$set(`data[${i}].isLeaf`, true);
+                        this.$set(`data[${i}].childrenCheckedStatus`, 2);
+                        continue;
+                    }
+                    if (item.checked && !item.childrenCheckedStatus) {
+                        this.$set(`data[${i}].childrenCheckedStatus`, 2);
+                        this.$broadcast('parentChecked', true, `${this.key}.${i}`);
+                    } else {
+                        let status = this.getChildrenCheckedStatus(item.node);
+                        this.$set(`data[${i}].childrenCheckedStatus`, status);
+                        if (status !== 0) this.$set(`data[${i}].checked`, true);
+                    }
+                }
+            },
+            setExpand(disabled, index){
+                if (!disabled) {
+                    this.$set(`data[${index}].expand`, !this.data[index].expand);
+                }
+            },
+            setSelect(disabled, index){
+                if (!disabled) {
+                    const selected = !this.data[index].selected;
+                    if (this.multiple || !selected) {
+                        this.$set(`data[${index}].selected`, selected);
+                    } else {
+                        for (let i = 0; i < this.data.length; i++) {
+                            if (i == index) {
+                                this.$set(`data[${i}].selected`, true);
+                            } else {
+                                this.$set(`data[${i}].selected`, false);
+                            }
+                        }
+                    }
+                    this.$dispatch('nodeSelected', this, selected);
+                }
+            },
+            setCheck(disabled, index){
+                if (disabled) return;
+                const checked = !this.data[index].checked;
+                this.$set(`data[${index}].checked`, checked);
+                this.$set(`data[${index}].childrenCheckedStatus`, checked ? 2 : 0);
+                this.$dispatch('childChecked', this, this.key);
+                this.$broadcast('parentChecked', checked, `${this.key}.${index}`);
+            },
+            getNodes(data, opt){
+                data = data || this.data;
+                let res = [];
+                for (let node of data) {
+                    let tmp = true;
+                    for (let [key, value] of Object.entries(opt)) {
+                        if (node[key] != value) {
+                            tmp = false;
+                            break;
+                        }
+                    }
+                    if (tmp) {
+                        res.push(node);
+                    }
+                    if (node.node && node.node.length) {
+                        res = res.concat(this.getNodes(node.node, opt));
+                    }
+                }
+                return res;
+            },
+            getSelectedNodes(){
+                return this.getNodes(this.data, {selected: true});
+            },
+            getCheckedNodes(){
+                return this.getNodes(this.data, {checked: true, childrenCheckedStatus: 2});
+            },
+            getChildrenCheckedStatus(children){
+                let checkNum = 0, child_childrenAllChecked = true;
+                for (let child of children) {
+                    if (child.checked) {
+                        checkNum++;
+                    }
+                    if (child.childrenCheckedStatus !== 2) {
+                        child_childrenAllChecked = false;
+                    }
+                }
+                // select all
+                if (checkNum == children.length) {
+                    return child_childrenAllChecked ? 2 : 1;
+                    // select some
+                } else if (checkNum > 0) {
+                    return 1;
+                } else {
+                    return 0;
+                }
+            }
+        },
+        ready(){
+            this.setKey();
+            this.preHandle();
+
+            this.$on('nodeSelected', (ori, selected) => {
+                if (this.key !== '0') return true;
+                if (!this.multiple && selected) {
+                    if (this !== ori) {
+                        for (let i = 0; i < this.data.length; i++) {
+                            this.$set(`data[${i}].selected`, false);
+                        }
+                    }
+                    this.$broadcast('cancelSelected', ori);
+                }
+                if (this.onSelect) {
+                    this.$nextTick(() => {
+                        this.onSelect(this.getSelectedNodes());
+                    });
+                }
+            });
+            this.$on('cancelSelected', ori => {
+                this.$broadcast('cancelSelected', ori);
+                if (this !== ori) {
+                    for (let i = 0; i < this.data.length; i++) {
+                        this.$set(`data[${i}].selected`, false);
+                    }
+                }
+            });
+            this.$on('parentChecked', (status, key) => {
+                if (this.key == key || this.key.startsWith(key + '.')) {
+                    for (let i = 0; i < this.data.length; i++) {
+                        this.$set(`data[${i}].checked`, status);
+                        this.$set(`data[${i}].childrenCheckedStatus`, status ? 2 : 0);
+                    }
+                    this.$broadcast('parentChecked', status, key);
+                }
+            });
+            this.$on('childChecked', (ori, key) => {
+                if (this.key === '0' && this.onCheck) {
+                    this.$nextTick(() => {
+                        this.onCheck(this.getCheckedNodes());
+                    });
+                }
+                if (this === ori) return;
+                for (let [i,item] of this.data.entries()) {
+                    if (this.key + '.' + i == key) {
+                        let temp = this.getChildrenCheckedStatus(item.node);
+                        if (temp != item.childrenCheckedStatus) {
+                            this.$set(`data[${i}].checked`, !!temp);
+                            this.$set(`data[${i}].childrenCheckedStatus`, temp);
+                            if (this.key !== '0') this.$dispatch('childChecked', this, this.key);
+                        }
+                    }
+                }
+            });
+        }
     };
 </script>
\ No newline at end of file
diff --git a/src/locale/lang/en-US.js b/src/locale/lang/en-US.js
index 9b21baf..ade42eb 100644
--- a/src/locale/lang/en-US.js
+++ b/src/locale/lang/en-US.js
@@ -87,6 +87,9 @@ export default {
         rate: {
             star: 'Star',
             stars: 'Stars'
+        },
+        tree: {
+            emptyText: 'No Data'
         }
     }
 };
\ No newline at end of file
diff --git a/src/locale/lang/zh-CN.js b/src/locale/lang/zh-CN.js
index c44f917..4e1c914 100644
--- a/src/locale/lang/zh-CN.js
+++ b/src/locale/lang/zh-CN.js
@@ -87,6 +87,9 @@ export default {
         rate: {
             star: '星',
             stars: '星'
+        },
+        tree: {
+            emptyText: '暂无数据'
         }
     }
 };
\ No newline at end of file
diff --git a/src/locale/lang/zh-TW.js b/src/locale/lang/zh-TW.js
index e7c8d6c..aa6fe1d 100644
--- a/src/locale/lang/zh-TW.js
+++ b/src/locale/lang/zh-TW.js
@@ -87,6 +87,9 @@ export default {
         rate: {
             star: '星',
             stars: '星'
+        },
+        tree: {
+            emptyText: '暫無數據'
         }
     }
 };
\ No newline at end of file
diff --git a/src/styles/components/tree.less b/src/styles/components/tree.less
index 99927cb..d8279f8 100644
--- a/src/styles/components/tree.less
+++ b/src/styles/components/tree.less
@@ -1,5 +1,133 @@
 @tree-prefix-cls: ~"@{css-prefix}tree";
 
 .@{tree-prefix-cls} {
-
+    margin: 0;
+    padding: 5px;
+    font-size: 12px;
+    li {
+        padding: 0;
+        margin: 7px 0;
+        list-style: none;
+        white-space: nowrap;
+        outline: 0;
+        a[draggable],
+        a[draggable="true"] {
+            user-select: none;
+            /* Required to make elements draggable in old WebKit */
+            -khtml-user-drag: element;
+            -webkit-user-drag: element;
+        }
+        &.drag-over {
+            > a[draggable] {
+                background-color: @primary-color;
+                color: white;
+                opacity: 0.8;
+            }
+        }
+        &.drag-over-gap-top {
+            > a[draggable] {
+                border-top: 2px @primary-color solid;
+            }
+        }
+        &.drag-over-gap-bottom {
+            > a[draggable] {
+                border-bottom: 2px @primary-color solid;
+            }
+        }
+        &.filter-node {
+            > a {
+                color: @error-color!important;
+                font-weight: bold!important;
+            }
+        }
+        ul {
+            margin: 0;
+            padding: 0 0 0 18px;
+        }
+        a {
+            display: inline-block;
+            padding: 1px 5px;
+            border-radius: 2px;
+            margin: 0;
+            cursor: pointer;
+            text-decoration: none;
+            vertical-align: top;
+            color: #666;
+            transition: all 0.3s ease;
+            &:hover {
+                background-color: tint(@primary-color, 90%);
+            }
+            &.@{tree-prefix-cls}-node-selected {
+                background-color: tint(@primary-color, 80%);
+            }
+        }
+        span {
+            &.@{tree-prefix-cls}-checkbox {
+                margin: 2px 4px 0 0;
+            }
+            &.@{tree-prefix-cls}-switcher,
+            &.@{tree-prefix-cls}-iconEle {
+                margin: 0;
+                width: 16px;
+                height: 16px;
+                line-height: 16px;
+                display: inline-block;
+                vertical-align: middle;
+                border: 0 none;
+                cursor: pointer;
+                outline: none;
+            }
+            &.@{tree-prefix-cls}-icon_loading {
+                &:after {
+                    display: inline-block;
+                    //.iconfont-font("\e6a1");
+                    animation: loadingCircle 1s infinite linear;
+                    color: @primary-color;
+                }
+            }
+            &.@{tree-prefix-cls}-switcher {
+                &.@{tree-prefix-cls}-switcher-noop {
+                    cursor: auto;
+                }
+                &.@{tree-prefix-cls}-roots_open,
+                &.@{tree-prefix-cls}-center_open,
+                &.@{tree-prefix-cls}-bottom_open,
+                &.@{tree-prefix-cls}-noline_open {
+                    //.antTreeSwitcherIcon();
+                }
+                &.@{tree-prefix-cls}-roots_close,
+                &.@{tree-prefix-cls}-center_close,
+                &.@{tree-prefix-cls}-bottom_close,
+                &.@{tree-prefix-cls}-noline_close {
+                    //.antTreeSwitcherIcon();
+                    //.ie-rotate(3);
+                    &:after {
+                        transform: rotate(270deg) scale(0.5);
+                    }
+                }
+            }
+        }
+    }
+    &-child-tree {
+        display: none;
+        &-open {
+            display: block;
+        }
+    }
+    &-treenode-disabled {
+        >span,
+        >a,
+        >a span {
+            color: #ccc;
+            cursor: not-allowed;
+        }
+    }
+    &-icon__open {
+        margin-right: 2px;
+        vertical-align: top;
+    }
+    &-icon__close {
+        margin-right: 2px;
+        vertical-align: top;
+    }
 }
\ No newline at end of file
diff --git a/test/routers/tree.vue b/test/routers/tree.vue
index 5bc4676..bc93b01 100644
--- a/test/routers/tree.vue
+++ b/test/routers/tree.vue
@@ -1,13 +1,45 @@
 <template>
-
+    <Tree
+        :data.sync="treeData"
+        :checkable="true"
+        :multiple="true"
+        :on-select="selectFn"
+        :on-check="checkFn"></Tree>
 </template>
 <script>
     export default {
-        props: {},
-        data () {
-            return {};
+        data: function() {
+            return {
+                treeData: [{
+                    title: 'parent 1',
+                    selected: false,
+                    node: [{
+                        title: 'parent 1-0',
+                        expand: true,
+                        disabled: true,
+                        node: [{
+                            title: 'leaf',
+                            disableCheckbox: true
+                        }, {
+                            title: 'leaf',
+                        }]
+                    }, {
+                        title: 'parent 1-1',
+                        checked: true,
+                        node: [{
+                            title: '<span style="color: red">sss</span>',
+                        }]
+                    }]
+                }]
+            }
         },
-        computed: {},
-        methods: {}
-    };
-</script>
\ No newline at end of file
+        methods: {
+            selectFn(data){
+                console.log(data);
+            },
+            checkFn(data){
+                console.log(data);
+            }
+        }
+    }
+</script>
--
libgit2 0.21.4