lshcomment 1.0.0

package/src/components/iris-oldtree/tree-store.js

@@ -0,0 +1,250 @@
+// const pinyin = require('chinese-to-pinyin')
+import Vue from 'vue'
+export default class TreeStore {
+    constructor(options) {
+        for (let option in options) {
+            if (options.hasOwnProperty(option)) {
+                this[option] = options[option]
+            }
+        }
+        this.datas = new Map()
+        const _traverseNodes = (root) => {
+            for (let node of root) {
+                this.datas.set(node.key, node)
+                if (node.children && node.children.length > 0) _traverseNodes(node.children)
+            }
+        }
+        _traverseNodes(this.root)
+    }
+    __parseKey(key) {
+            return {
+                current: key,
+                parent: key.slice(0, -2)
+            }
+        }
+        /**
+         * 控制 checkbox 选中状态
+         * @param node
+         */
+    changeCheckStatus(node) {
+        const _traverseUp = (node) => {
+            if (node.key.length <= 3) {
+                return false
+            }
+
+            let key = this.__parseKey(node.key)
+            if (node.checked) {
+                let parent = this.getNode(key.parent)
+                Vue.set(parent, 'checked', this.sameSilibingChecked(key.parent, key.current))
+                _traverseUp(parent)
+            } else {
+                if (!node.checked) {
+                    let upparent = this.getNode(key.parent)
+                    Vue.set(upparent, 'checked', false)
+                    if (upparent.key) {
+                        _traverseUp(upparent)
+                    }
+                }
+            }
+        }
+
+        const _traverseDown = (node) => {
+            if (node.children && node.children.length > 0) {
+                for (let child of node.children) {
+                    Vue.set(child, 'checked', node.checked)
+                    _traverseDown(child)
+                }
+            }
+        }
+        _traverseUp(node)
+        _traverseDown(node)
+    }
+    changeCheckHalfStatus(node) {
+        let flag = false;
+        //如果勾选的是子节点，父节点默认打上勾
+        const _traverseUp = (node, flag) => {
+            if (node.key.length <= 3) {
+                return false
+            }
+
+            let key = this.__parseKey(node.key)
+
+            let parent = null;
+            if (node.checked) { //打钩
+                if (key.parent) {
+                    parent = this.getNode(key.parent)
+                    if (flag) {
+                        parent.checked = true
+                        parent.nodeSelectNotAll = true
+                        _traverseUp(parent, true)
+                    } else {
+                        parent.checked = true;
+                        parent.nodeSelectNotAll = this.sameSilibingHalfChecked(true, parent, key.parent, key.current) === 'half' ? true : false; //返回true则全钩，false为半钩
+                        _traverseUp(parent)
+                    }
+                }
+            } else { //去钩
+                if (key.parent) {
+                    parent = this.getNode(key.parent)
+                    if (this.sameSilibingHalfChecked(false, parent, key.parent, key.current) === "none") { //返回true则全没钩，false为半钩
+                        parent.checked = false
+                        parent.nodeSelectNotAll = false
+                    } else {
+                        parent.checked = true
+                        parent.nodeSelectNotAll = true
+                    }
+                    _traverseUp(parent, true)
+                }
+            }
+        }
+        const _traverseDown = (node) => {
+            if (node.children && node.children.length > 0) {
+                if (node.nodeSelectNotAll) { //节点没勾选
+                    node.nodeSelectNotAll = false
+                }
+                for (let child of node.children) {
+                    Vue.set(child, 'checked', node.checked)
+                    _traverseDown(child)
+                }
+            }
+        }
+        _traverseUp(node)
+        _traverseDown(node)
+    }
+
+    /**
+     * 同级的是否全部 check
+     * @param parentKey
+     * @param currentKey
+     * @returns {boolean}
+     */
+    sameSilibingChecked(parentKey, currentKey) {
+        let parent = this.datas.get(parentKey)
+        let sbIds = []
+        parent.children.forEach(x => {
+            if (x.key !== currentKey) sbIds.push(x.key)
+        })
+        for (let key of sbIds) {
+            let node = this.getNode(key)
+            if (!node.checked) return false
+        }
+        return true
+    }
+
+    /**
+     * 控制父框是否需要半钩状态
+     * @param status
+     * @param parent
+     * @param parentId
+     * @param currentId
+     * @returns {*}
+     */
+    sameSilibingHalfChecked(status, parent, parentKey, currentKey) {
+        let sbIds = []
+        let currentNode = this.getNode(currentKey)
+        parent.children.forEach(x => {
+            if (!currentNode.nodeSelectNotAll && x.key !== currentKey) sbIds.push(x.key) //除去当前节点的剩下节点
+        })
+
+        if (status) { //打钩
+            if (sbIds.length !== 0) {
+                for (let id of sbIds) { //子节点只要有一个被选中则父框打黑，全选打钩，全没有被选无状态
+                    let node = this.getNode(id)
+                    if (!node.checked || node.nodeSelectNotAll) { //节点没勾选
+                        return "half" //表示父框半钩的状态
+                    }
+                }
+            } else {
+                if (currentNode.nodeSelectNotAll) {
+                    return "all" //表示全钩的状态
+                }
+            }
+            return "all" //表示全钩的状态
+        } else { //去钩
+            if (sbIds.length !== 0) {
+                for (let id of sbIds) { //子节点只要有一个被选中则父框打黑，全选打钩，全没有被选无状态
+                    let node = this.getNode(id)
+                    if (node.checked || node.nodeSelectNotAll) { //有节点被勾选，父框半钩的状态
+                        return "half"
+                    }
+                }
+            } else {
+                if (currentNode.nodeSelectNotAll) {
+                    return "all" //表示全钩的状态
+                }
+            }
+            return "none"
+        }
+    }
+    isExitParent(parent) {
+        let key = this.getNode(parent.key)
+        if (key.current.length > 3) {
+            return this.getNode(key.parent)
+        }
+        return null
+    }
+    isNullOrEmpty(world) {
+        if (world) {
+            return world.trim().length === 0
+        }
+        return true
+    }
+    filterNodes(keyworld, searchOptions) {
+        const _filterNode = (val, node) => {
+            if (!val) return true
+            if (searchOptions.useEnglish) {
+                return node.label.indexOf(val) !== -1
+            } else {
+                return this.toPinYin(node.label, searchOptions.useInitial).indexOf(this.toPinYin(keyworld.toLowerCase(), searchOptions.useInitial, true)) !== -1
+            }
+        }
+
+        const _syncNodeStatus = (node) => {
+            if (node.parentId) {
+                let parentNode = this.getNode(node.parentId)
+                if (node.visible) {
+                    parentNode.visible = node.visible
+                    _syncNodeStatus(parentNode)
+                }
+            }
+        }
+        let filterFunc = (searchOptions.customFilter && typeof(searchOptions.customFilter) === 'function') ? searchOptions.customFilter : _filterNode
+        this.datas.forEach(node => {
+            node.visible = filterFunc(keyworld, node)
+            node.searched = false
+            if (node.visible) {
+                if (!this.isNullOrEmpty(keyworld)) {
+                    node.searched = true
+                }
+                _syncNodeStatus(node)
+            }
+        })
+    }
+    getNode(key) {
+        return this.datas.get(key)
+    }
+    toPinYin(keyworld, useInitial) {
+        if (/^[a-zA-Z]/.test(keyworld)) {
+            return keyworld
+        }
+        let fullpinyin = pinyin(keyworld, {
+            filterChinese: true,
+            noTone: true
+        })
+        if (useInitial) {
+            let res = ''
+            fullpinyin.split(' ').forEach(w => {
+                if (!(/[a-zA-Z]/.test(w))) {
+                    res += w
+                } else {
+                    res += w.slice(0, 1)
+                }
+            })
+            return res
+        }
+        return fullpinyin
+    }
+    setData(node) {
+        this.datas.set(node.key, node)
+    }
+}

package/src/components/iris-oldtree/tree.vue

@@ -0,0 +1,250 @@
+<template>
+    <div class="halo-tree">
+        <div class="input" v-if="options.showSearch">
+            <input type="text" v-model="search">
+            <span class="icon search"></span>
+        </div>
+        <ul>
+            <li>
+                <div class="root">
+                    <i class="icon iconfont" :class="[itemsShow ? treeNodeOptions.iconClass.open : treeNodeOptions.iconClass.close ]" :style="treeNodeOptions.iconStyle" @click="rootIconClick"></i>
+                    <span @click="rootClick">{{ options.rootName }}</span>
+                </div>
+            </li>
+        </ul>
+        
+        <tree-node :treeData='store.root' :options="treeNodeOptions" @handlecheckedChange="handlecheckedChange" v-show="itemsShow">
+        </tree-node>
+    </div>
+</template>
+<script>
+
+    import TreeNode from './tree-node.vue'
+    import TreeStore from './tree-store'
+
+    const DEFAULTICONCLASS = {
+        open: 'icon-jian-fangkuang',
+        close: 'icon-jia-fangkuang',
+        add: 'icon-add'
+    }
+    const DEFAULTICONCOLOR = '#000'
+    export default {
+        name: 'tree',
+        props: {
+            treeData: [Array],
+            options: [Object],
+            treeRootCode: [String],
+            treeName: [String],
+            rootOrgCode: [String]
+        },
+        data() {
+            return {
+                itemsShow: true,
+                search: null,
+                treeNodeOptions: {},
+                store: {
+                    root: [],
+                    last: null
+                }
+            }
+        },
+        created() {
+            this.isTree = true
+            this.dealTreeData()
+            this.checkOptions() // check options
+            this.treeNodeOptions = Object.assign({}, {
+                rootName: '根节点',
+                labelKey: 'label', // 默认的标题字段
+                iconClass: DEFAULTICONCLASS,
+                iconStyle: {
+                    color: DEFAULTICONCOLOR
+                },
+                lazy: false, // 异步加载
+                load: () => {},
+                dynamicAdd: false, // 动态添加
+                dynamicAddFilter() {
+                    return true
+                },
+                dynamicAddNode() {},
+                dynamicSaveNode() {},
+                leafIcon() {
+                    return ''
+                } // not required
+            }, this.options)
+        },
+        watch: {
+            search: function(val) {
+                this.store.filterNodes(val, this.options.search)
+            },
+            treeData: {
+                handler: function(data, oldData) {
+                    this.dealTreeData()
+                },
+                deep: true
+            }
+        },
+        methods: {
+            /**
+             * generate key 0-1-2-3
+             * this is very important function for now module
+             * @param treeData
+             * @param parentKey
+             * @returns {Array}
+             */
+            generateKey(treeData = [], parentKey) {
+                treeData = treeData.map((item, i) => {
+                    item.key = parentKey + '-' + i.toString();
+                    if (item.hasOwnProperty('children') && item.children.length > 0) {
+                        this.generateKey(item.children, item.key)
+                    }
+                    return item;
+                })
+                return treeData;
+            },
+            rootIconClick() {
+                this.itemsShow = !this.itemsShow
+            },
+            handlecheckedChange(node) {
+                if (this.options.halfCheckedStatus) {
+                    this.store.changeCheckHalfStatus(node)
+                } else {
+                    this.store.changeCheckStatus(node)
+                }
+                this.$emit('handlecheckedChange', node)
+            },
+            getSelectedNodes() {
+                const allnodes = this.store.datas
+                let selectedNodes = []
+                for (let [, node] of allnodes) {
+                    if (node.checked) {
+                        selectedNodes.push(node)
+                    }
+                }
+                return selectedNodes
+            },
+            getSelectedNodeIds() {
+                const allnodes = this.store.datas
+                let selectedNodeIds = []
+                for (let [, node] of allnodes) {
+                    if (node.checked) {
+                        selectedNodeIds.push(node.id)
+                    }
+                }
+                return selectedNodeIds
+            },
+            /**
+             * 初始化时检查 参数
+             */
+            checkOptions() {
+                if ('lazy' in this.options) {
+                    if (typeof this.options.load !== 'function') {
+                        console.error('load must be Function')
+                    }
+                }
+                if ('dynamicAdd' in this.options) {
+                    if ('dynamicAddFilter' in this.options) {
+                        if (typeof this.options.dynamicAddFilter !== 'function') {
+                            console.error('dynamicFilter must be Function')
+                        }
+                    }
+                    if ('dynamicAddNode' in this.options) {
+                        if (typeof this.options.dynamicAddNode !== 'function') {
+                            console.error('dynamicAddNode must be Function')
+                        }
+                    } else {
+                        // console.warning('seem\'s u config dynamicAdd, but dynamicAddNode Function missing')
+                    }
+                    if ('dynamicSaveNode' in this.options) {
+                        if (typeof this.options.dynamicSaveNode !== 'function') {
+                            console.error('dynamicSaveNode must be Function')
+                        }
+                    } else {
+                        // console.warning('seem\'s u config dynamicAdd, but dynamicSaveNode Function missing')
+                    }
+                }
+                if ('leafIcon' in this.options) {
+                    if (typeof this.options.leafIcon !== 'function') {
+                        console.error('leafIcon must be Function')
+                    }
+                }
+            },
+            /**
+             * del tree data
+             * when created, update, dynamic add node
+             */
+            dealTreeData() {
+                this.store = new TreeStore({
+                    root: (this.generateKey(this.treeData, '0') || []).slice(0),
+                    last: null
+                })
+            },
+            rootClick() {
+                this.$emit('root-click', this.treeRootCode, this.treeName, this.rootOrgCode)
+            }
+        },
+        components: {
+            TreeNode
+        }
+    }
+</script>
+<style lang="scss" scoped>
+    @import '../../assets/css/iconfont.css';
+    .halo-tree * {
+        font-size: 13px;
+        font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
+    }
+    .halo-tree ul li .root {   
+        position: relative;
+        left: -60px;        /* 改动 */
+        cursor: default;
+        padding: 5px 0px;   /* 改动 */
+        user-select: none;
+        i {
+            font-size: 16px;
+            cursor: pointer;
+        }
+    }
+    .halo-tree .input {
+        width: 100%;
+        position: relative;
+    }
+    .halo-tree .input span {
+        position: absolute;
+        top: 7px;
+        right: 5px;
+    }
+    .halo-tree .input input {
+        display: inline-block;
+        box-sizing: border-box;
+        width: 100%;
+        border-radius: 5px;
+        height: 25px;
+        margin-top: 2px;
+    }
+    .halo-tree .input input:focus {
+        border: none;
+    }
+    .halo-tree .icon {
+        display: inline-block;
+        margin-right: 10px;
+        vertical-align: middle;
+    }
+    .halo-tree .search {
+        width: 14px;
+        height: 14px;
+        // background-image: url("../../assets/image/search.png");
+    }
+    /* 外加样式 */
+    ul li {
+        padding: 0;
+        margin: 0;
+    }
+    .halo-tree ul li{
+        list-style-type: none;
+        line-height: 20px;
+    }
+    .halo-tree ul li .root:hover {
+        background: rgba(0, 0, 0, .065)
+    }
+</style>
+