@aochuang/common 1.0.1 → 1.0.126

package/uni-components/tree/tree-select-store.js

@@ -0,0 +1,520 @@
+import Vue from 'vue'
+import { newNode } from './utils'
+
+export default class VirtualTreeStore {
+    idKey = null
+	leafKey = null
+    childrenKey = null
+    itemHeight = null
+    
+    nodesMap = null
+
+    rootNodesMap = null
+
+    filterMethod = null
+
+    props = Vue.observable({
+        nodes: [],
+        currentId: null
+    })
+
+    constructor (options) {
+        options = Object.assign({
+            data: [],
+            itemHeight: null,
+            idKey: null,
+			leafKey: null,
+            current: null,
+            expandLevel: null,
+            expandKeys: null,
+            childrenKey: null,
+            filterMethod: null,
+			loadNodeChildrenMethod: null,
+            onCurrent: null
+        }, options)
+        this.idKey = options.idKey
+		this.leafKey = options.leafKey
+        this.itemHeight = options.itemHeight
+        this.childrenKey = options.childrenKey
+        this.filterMethod = options.filterMethod
+		this.loadNodeChildrenMethod = options.loadNodeChildrenMethod
+        this.onCurrent = options.onCurrent
+        this.setData(options.data)
+        this.expandNodesByLevel(options.expandLevel)
+        this.expandNodesByKeys(options.expandKeys)
+        this.setCurrentNodeId(options.current)
+    }
+
+    getNode (node) {
+        let nodeId = node
+        if (node && typeof node === 'object') {
+            nodeId = node.id
+        }
+        return this.nodesMap[nodeId]
+    }
+
+    insertNode (data, parentNode) {
+        data = data || {}
+        const node = newNode(data, this.idKey)
+        if (!node) {
+            return
+        }
+        if (this.getNode(node)) {
+            throw new Error('已存在相同标识的节点')
+        }
+        parentNode = this.getNode(parentNode)
+        if (!parentNode) {
+            node.height = this.itemHeight
+            node.level = 1
+            node.parent = null
+            this.rootNodesMap[node.id] = node
+            this.props.nodes.push(node)
+        } else {
+            node.parent = parentNode
+            node.level = parentNode.level + 1
+            if (parentNode.removed) {
+                node.removed = true
+            }
+            if (!parentNode.height) {
+                node.height = 0
+            }
+            if (parentNode.expanded) {
+                node.height = this.itemHeight
+            } else {
+                node.height = 0
+            }
+            const parentIndex = this.getNodeIndex(parentNode)
+            let insertIndex = -1
+            if (!parentNode.children) {
+                Vue.set(parentNode, 'children', [])
+                insertIndex = parentIndex + 1
+            } else {
+                insertIndex = parentIndex + this.getChildrensNodes(parentNode).length + 1
+            }
+            if (insertIndex < 0) {
+                throw new Error('插入节点失败')
+            }
+            parentNode.children.push(node)
+            this.props.nodes.splice(insertIndex, 0, node)
+        }
+		node.isLeaf = node.data[this.leafKey] === true
+        this.nodesMap[node.id] = node
+    }
+
+    removeNode (node) {
+        node = this.getNode(node)
+        if (!node) {
+            return
+        }
+        const index = this.getNodeIndex(node)
+        this.getChildrensNodes(node).forEach((cn) => {
+            delete this.nodesMap[cn.id]
+            this.props.nodes.splice(index + 1, 1)
+        })
+        if (node.parent) {
+            node.parent.children = node.parent.children.filter(n => n.id !== node.id)
+        }
+        delete this.rootNodesMap[node.id]
+        delete this.nodesMap[node.id]
+        this.props.nodes.splice(index, 1)
+    }
+
+    /**
+     * 回收节点
+    */
+    refuseNode (node) {
+        node = this.getNode(node)
+        if (!node) {
+            return
+        }
+        if (!node.state) {
+            node.state = {
+                height: node.height,
+                expanded: node.expanded
+            }
+        }
+        node.height = 0
+        node.removed = true
+    }
+
+    /**
+     * 恢复节点
+    */
+    restoreNode (node) {
+        node = this.getNode(node)
+        if (!node) {
+            return
+        }
+        if (node.state) {
+            node.height = node.state.height
+            node.expanded = node.state.expanded
+            delete node.state
+        }
+        node.removed = false
+    }
+
+    /**
+     * 隐藏节点
+    */
+    hideNode (node) {
+        node = this.getNode(node)
+        if (!node || node.removed) {
+            return
+        }
+        node.height = 0
+    }
+
+    /**
+     * 显示节点
+    */
+    showNode (node) {
+        node = this.getNode(node)
+        if (!node || node.removed) {
+            return
+        }
+        if (node.parent) {
+            if (node.parent.expanded) {
+                node.height = this.itemHeight
+            }
+        } else {
+            node.height = this.itemHeight
+        }
+    }
+
+    getParentNode (node) {
+        node = this.getNode(node)
+        if (!node) {
+            return
+        }
+        return node.parent
+    }
+
+    getClosestNodes (node) {
+        const rs = []
+        if (!node) {
+            return rs
+        }
+        const loop = (node) => {
+            if (!node) {
+                return
+            }
+            rs.push(node)
+            loop(node.parent)
+        }
+        loop(node)
+        return rs
+    }
+
+    getChildrensNodes (node) {
+        let rs = []
+        if (!node || !node.children) {
+            return rs
+        }
+        const loop = (node) => {
+            if (!node.children) {
+                return
+            }
+            node.children.forEach(cn => {
+                rs.push(cn)
+                loop(cn)
+            })
+        }
+        loop(node)
+        return rs
+    }
+
+    expandNode (node) {
+        node = this.getNode(node)
+        if (!node || node.removed) {
+            return
+        }
+        node.expanded = true
+        this.showNode(node)
+        this.loopChildrensShow(node)
+        this.loopParentsExpand(node)
+    }
+
+    collapseNode (node) {
+        node = this.getNode(node)
+        if (!node || node.removed) {
+            return
+        }
+        node.expanded = false
+        this.loopChildrensHide(node)
+    }
+
+    loopParentsExpand (node) {
+        const closestNodes = this.getClosestNodes(node).slice(1)
+        if (!closestNodes || !closestNodes.length) {
+            return
+        }
+        closestNodes.forEach(node => {
+            if (node.removed) {
+                return
+            }
+            node.expanded = true
+            node.height = this.itemHeight
+            if (node.children) {
+                node.children.forEach(cn => {
+                    if (cn.removed) {
+                        return
+                    }
+                    this.showNode(cn)
+                })
+            }
+        })
+    }
+
+    /**
+     * 设置所有后端节点显示
+    */
+   loopChildrensShow (node) {
+        if (!node || !node.children || !node.children.length) {
+            return
+        }
+        const loop = (nodes, parent) => {
+            if (!nodes || !nodes.length) {
+                return
+            }
+            nodes.forEach(node => {
+                if (node.removed) {
+                    return
+                }
+                if (parent) {
+                    if (parent.expanded) {
+                        this.showNode(node)
+                    } else {
+                        this.hideNode(node)
+                    }
+                } else {
+                    this.showNode(node)
+                }
+                loop(node.children, node)
+            })
+        }
+        loop(node.children, node)
+   }
+    
+    /**
+     * 设置所有后代节点隐藏
+    */
+    loopChildrensHide (node) {
+        if (!node || !node.children || !node.children.length) {
+            return
+        }
+        const loop = (nodes) => {
+            if (node.removed) {
+                return
+            }
+            if (!nodes || !nodes.length) {
+                return
+            }
+            nodes.forEach(node => {
+                this.hideNode(node)
+                loop(node.children)
+            })
+        }
+        loop(node.children, node)
+    }
+
+    /**
+     * 展开到指定层级
+    */
+    expandNodesByLevel (expandLevel) {
+        if (!expandLevel) {
+            return
+        }
+        if (!this.props.nodes) {
+            return
+        }
+        this.props.nodes.forEach(node => {
+            if (node.removed) {
+                return
+            }
+            if (node.level <= expandLevel) {
+                node.expanded = true
+                this.showNode(node)
+            } else {
+                node.expanded = false
+                if (node.level === expandLevel + 1) {
+                    this.showNode(node)
+                } else {
+                    this.hideNode(node)
+                }
+            }
+        })
+    }
+
+    expandNodesByKeys (keys) {
+        if (!keys || !keys.length) {
+            return
+        }
+        const allExpandNodeMap = keys.reduce((rs, k) => {
+            if (!this.nodesMap[k]) {
+                return rs
+            }
+            const nodes = this.getClosestNodes(this.nodesMap[k])
+            nodes.forEach(node => {
+                rs[node.id] = node
+            })
+            return rs
+        }, {})
+        const allShowNodeMap = Object.assign(keys.reduce((rs, k) => {
+            if (!this.nodesMap[k]) {
+                return rs
+            }
+            const nodes = this.getClosestNodes(this.nodesMap[k]).slice(1)
+            nodes.forEach(node => {
+                if (node && node.children) {
+                    node.children.forEach(n => {
+                        rs[n.id] = true
+                    })
+                }
+            })
+            return rs
+        }, {}), this.rootNodesMap)
+        this.props.nodes.forEach(node => {
+            if (node.removed) {
+                return
+            }
+            if (allExpandNodeMap[node.id]) {
+                node.expanded = true
+                this.showNode(node)
+            } else {
+                node.expanded = false
+                if (allShowNodeMap[node.id]) {
+                    this.showNode(node)
+                } else {
+                    this.hideNode(node)
+                }
+            }
+        })
+    }
+
+    setCurrentNodeId (nodeId) {
+        const node = this.getNode(nodeId)
+        if (!node) {
+            return
+        }
+        this.props.currentId = node.id
+        if (this.onCurrent) {
+            this.onCurrent({
+                node
+            })
+        }
+    }
+
+    getNodeIndex (node) {
+        let index = -1
+        let nodeId = node
+        if (node && typeof node === 'object') {
+            nodeId = node.id
+        }
+        if (!this.nodesMap[nodeId]) {
+            return index
+        }
+        this.props.nodes.some((v, i) => {
+            if (v.id === nodeId) {
+                index = i
+                return true
+            }
+        })
+        return index
+    }
+
+    setData (data) {
+        const result = []
+        const nodesMap = {}
+        const rootNodesMap = {}
+        if (data && data.length) {
+            const loop = (data, level, parent) => {
+                if (!data || !data.length) {
+                    return
+                }
+                return data.map(v => {
+                    const node = {
+                        id: v[this.idKey],
+                        level,
+                        height: parent ? 0 : this.itemHeight,
+                        expanded: false,
+                        removed: false,
+						loaded: false,
+						isLeaf: v[this.leafKey] === true,
+                        parent,
+                        data: v
+                    }
+                    if (level === 1) {
+                        rootNodesMap[v[this.idKey]] = node
+                    }
+                    result.push(node)
+                    nodesMap[node[this.idKey]] = node
+                    if (v[this.childrenKey]) {
+                        node.children = loop(v[this.childrenKey], level + 1, node)
+                    }
+                    return node
+                })
+            }
+            loop(data, 1, null)
+        }
+        this.nodesMap = nodesMap
+        this.rootNodesMap = rootNodesMap
+        this.props.nodes = result
+    }
+
+    filter (keyword) {
+        keyword = typeof keyword === 'string' ? keyword.trim() : String(keyword)
+        if (!this.filterMethod) {
+            return
+        }
+        if (!keyword) {
+            this.props.nodes.filter(node => {
+                this.restoreNode(node)
+            })
+        } else {
+            const currentData = this.props.nodes.filter(node => {
+                const rs = this.filterMethod({
+                    node,
+                    keyword
+                })
+                if (!rs) {
+                    this.refuseNode(node)
+                }
+                return rs
+            })
+            currentData.forEach(node => {
+                const closestNodes = this.getClosestNodes(node)
+                closestNodes.forEach(n => {
+                    this.restoreNode(n)
+                    this.showNode(n)
+                })
+                this.expandNode(node)
+            })
+        }
+    }
+	
+	loadNodeChildren (node) {
+		node = this.getNode(node)
+		if (!node) {
+			return
+		}
+		if (!this.loadNodeChildrenMethod) {
+			return
+		}
+		if (node.loaded) {
+			return
+		} 
+		Vue.set(node, 'loading', true)
+		this.loadNodeChildrenMethod({
+			node
+		}).then(rs => {
+			node.loaded = true
+			if (rs && rs.length) {
+				rs.forEach(v => {
+					this.insertNode(v, node)
+				})
+			}
+		}).finally(() => {
+			node.loading = false
+		})
+	}
+}

package/uni-components/tree/tree-select.vue

@@ -0,0 +1,210 @@
+<template>
+    <view class="tree-select" :style="{'height': height}">
+        <view class="tree-select__main" v-show="treeNodes && treeNodes.length">
+			<template
+				v-for="(item, index) in renderTreeNodes"
+			>
+				<tree-select-node
+					:key="item[idKey]"
+					:node="item"
+					:index="index"
+					:label-key="labelKey"
+					:item-height="itemHeight"
+					:selected="currentNodeId === item[idKey]"
+					:lazy-load="lazyLoad"
+					@expand="handleExpandNode"
+					@collapse="handleCollapseNode"
+					@click="handleNodeClick"
+					@dblclick="handleNodeDblClick"
+				>
+					<slot name="item" slot-scope="scope" v-bind="scope"></slot>
+					<template slot="addon" slot-scope="scope">
+						<slot name="addon" v-bind="scope"></slot>
+					</template>
+				</tree-select-node>
+			</template>
+        </view>
+        <slot name="empty" v-if="!loading && (!treeNodes || !treeNodes.length)">
+            <view class="tree-select__empty">暂无数据</view>
+        </slot>
+        <view class="tree-select__loading" v-if="loading">
+            <tree-select-loading></tree-select-loading>
+        </view>
+    </view>
+</template>
+<script>
+import Vue from 'vue'
+import TreeSelectNode from './tree-select-node'
+import TreeSelectStore from './tree-select-store' 
+import TreeSelectLoading from './tree-select-loading.vue'
+
+export default {
+    name: 'TreeSelect',
+    components: {
+        TreeSelectNode,
+        TreeSelectLoading
+    },
+	provide () {
+		return {
+			TreeSelect: this
+		}
+	},
+    props: {
+        data: {
+            type: Array,
+            default: () => []
+        },
+        loading: {
+            type: Boolean
+        },
+        height: {
+            type: String,
+            default: '100%'
+        },
+        itemHeight: {
+            type: Number,
+            default: 24
+        },
+        idKey: {
+            type: String,
+            default: 'id'
+        },
+        labelKey: {
+            type: String,
+            default: 'label'
+        },
+        childrenKey: {
+            type: String,
+            default: 'children'
+        },
+		leafKey: {
+			type: String,
+			default: 'isLeaf'
+		},
+        defaultExpandLevel: {
+            type: Number
+        },
+        defaultExpandKeys: {
+            type: Array
+        },
+		lazyLoad: {
+			type: Boolean
+		},
+		loadNodeChildrenMethod: {
+			type: Function
+		},
+        filterMethod: {
+            type: Function
+        },
+        current: {
+            type: [String, Number]
+        }
+    },
+    watch: {
+        data () {
+            this.handleDataChange()
+        }
+    },
+    created () {
+        this.store = new TreeSelectStore({
+            data: this.data,
+            idKey: this.idKey,
+			leafKey: this.leafKey,
+            itemHeight: this.itemHeight,
+            childrenKey: this.childrenKey,
+            expandLevel: this.defaultExpandLevel,
+            expandKeys: this.defaultExpandKeys,
+            current: this.current,
+            filterMethod: this.filterMethod,
+			loadNodeChildrenMethod: this.loadNodeChildrenMethod,
+            onCurrent: this.handleCurrentChange
+        })
+		console.log(this.store)
+    },
+    mounted () {
+        // this.$watch(() => {
+        //     return this.$refs.scroller.ready
+        // }, () => {
+        //     this.$nextTick(() => {
+        //         this.scrollTo(this.currentNodeId)
+        //     })
+        // })
+    },
+    computed: {
+        treeNodes () {
+            return this.store.props.nodes
+        },
+		renderTreeNodes () {
+			return this.treeNodes.filter(v => v.height > 0)
+		},
+        currentNodeId () {
+            return this.store.props.currentId
+        }
+    },
+    methods: {
+        handleDataChange () {
+            this.store.setData(this.data)
+        },
+        handleExpandNode ({ node }) {
+            this.store.expandNode(node)
+        },
+        handleCollapseNode ({ node }) {
+            this.store.collapseNode(node)
+        },
+        handleNodeClick ({ node }) {
+            this.store.setCurrentNodeId(node[this.idKey])
+        },
+        handleNodeDblClick ({ node }) {
+            this.$emit('node-dblclick', {
+                node
+            })
+        },
+        filter (keyword) {
+            this.store.filter(keyword)
+        },
+        handleCurrentChange ({ node }) {
+            this.$emit('current', {
+                node
+            })
+        },
+        insertNode (data, parentNode) {
+            this.store.insertNode(data, parentNode)
+        },
+        removeNode (node) {
+            this.store.removeNode(node)
+        },
+        scrollTo (node) {
+            const index = this.store.getNodeIndex(node)
+            if (index < 0) {
+                return
+            }
+            this.store.expandNode(this.store.getParentNode(node))
+            // this.$refs.scroller && this.$refs.scroller.scrollToItem(index)
+        }
+    }
+}
+</script>
+<style>
+.tree-select{
+    overflow: auto;
+    position: relative;
+}
+.tree-select__main{
+    height: 100%;
+}
+.tree-select__empty{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #999;
+}
+.tree-select__loading{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+</style>