123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611 |
- <template>
- <view>
- <template v-if="showLoading">
- <view class="ly-loader ly-flex-center">
- <view class="ly-loader-inner">加载中...</view>
- </view>
- </template>
-
- <template v-else>
- <view v-if="isEmpty || !visible"
- class="ly-empty">
- {{emptyText}}
- </view>
- <view :key="updateKey"
- class="ly-tree"
- :class="{'is-empty': isEmpty || !visible}"
- role="tree"
- name="LyTreeExpand">
- <ly-tree-node v-for="nodeId in childNodesId"
- :nodeId="nodeId"
- :render-after-expand="renderAfterExpand"
- :show-checkbox="showCheckbox"
- :show-radio="showRadio"
- :check-only-leaf="checkOnlyLeaf"
- :key="getNodeKey(nodeId)"
- :indent="indent"
- :icon-class="iconClass">
- </ly-tree-node>
- </view>
- </template>
- </view>
- </template>
- <script>
- import Vue from 'vue'
- import TreeStore from './model/tree-store.js';
- import {getNodeKey} from './tool/util.js';
- import LyTreeNode from './ly-tree-node.vue';
- export default {
- name: 'LyTree',
-
- componentName: 'LyTree',
-
- components: {
- LyTreeNode
- },
-
- data() {
- return {
- updateKey: new Date().getTime(),
- elId: `ly_${Math.ceil(Math.random() * 10e5).toString(36)}`,
- visible: true,
- store: {
- ready: false
- },
- currentNode: null,
- childNodesId: []
- };
- },
-
- provide() {
- return {
- tree: this
- }
- },
-
- props: {
-
- treeData: Array,
-
-
- ready: {
- type: Boolean,
- default: true
- },
-
-
- emptyText: {
- type: String,
- default: '暂无数据'
- },
-
-
- renderAfterExpand: {
- type: Boolean,
- default: true
- },
-
-
- nodeKey: String,
-
-
- checkStrictly: Boolean,
-
-
- defaultExpandAll: Boolean,
-
-
- toggleExpendAll: Boolean,
-
-
- expandOnClickNode: {
- type: Boolean,
- default: true
- },
-
-
- expandOnCheckNode: {
- type: Boolean,
- default: true
- },
-
-
- checkOnClickNode: Boolean,
- checkDescendants: {
- type: Boolean,
- default: false
- },
-
-
- autoExpandParent: {
- type: Boolean,
- default: true
- },
-
-
- defaultCheckedKeys: Array,
-
-
- defaultExpandedKeys: Array,
-
-
- expandCurrentNodeParent: Boolean,
-
-
- currentNodeKey: [String, Number],
-
-
- checkOnlyLeaf: {
- type: Boolean,
- default: false
- },
-
-
- showCheckbox: {
- type: Boolean,
- default: false
- },
-
-
- showRadio: {
- type: Boolean,
- default: false
- },
-
-
- props: {
- type: [Object, Function],
- default () {
- return {
- children: 'children',
- label: 'label',
- disabled: 'disabled'
- };
- }
- },
-
-
- lazy: {
- type: Boolean,
- default: false
- },
-
-
- highlightCurrent: Boolean,
-
-
- load: Function,
-
-
- filterNodeMethod: Function,
-
-
- childVisibleForFilterNode: {
- type: Boolean,
- default: false
- },
-
-
- accordion: Boolean,
-
-
- indent: {
- type: Number,
- default: 18
- },
-
-
- iconClass: String,
-
-
- showNodeIcon: {
- type: Boolean,
- default: false
- },
-
-
- defaultNodeIcon: {
- type: String,
- default: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/github.svg'
- },
-
-
- isInjectParentInNode: {
- type: Boolean,
- default: false
- }
- },
-
- computed: {
- isEmpty() {
- if (this.store.root) {
- const childNodes = this.store.root.getChildNodes(this.childNodesId);
-
- return !childNodes || childNodes.length === 0 || childNodes.every(({visible}) => !visible);
- }
-
- return true;
- },
- showLoading() {
- return !(this.store.ready && this.ready);
- }
- },
-
- watch: {
- toggleExpendAll(newVal) {
- this.store.toggleExpendAll(newVal);
- },
- defaultCheckedKeys(newVal) {
- this.store.setDefaultCheckedKey(newVal);
- },
- defaultExpandedKeys(newVal) {
- this.store.defaultExpandedKeys = newVal;
- this.store.setDefaultExpandedKeys(newVal);
- },
- checkStrictly(newVal) {
- this.store.checkStrictly = newVal || this.checkOnlyLeaf;
- },
- 'store.root.childNodesId'(newVal) {
- this.childNodesId = newVal;
- },
- 'store.root.visible'(newVal) {
- this.visible = newVal;
- },
- childNodesId(){
- this.$nextTick(() => {
- this.$emit('ly-tree-render-completed');
- });
- },
- treeData: {
- handler(newVal) {
- this.updateKey = new Date().getTime();
- this.store.setData(newVal);
- },
- deep: true
- }
- },
-
- methods: {
-
- filter(value, data) {
- if (!this.filterNodeMethod) throw new Error('[Tree] filterNodeMethod is required when filter');
- this.store.filter(value, data);
- },
-
-
- getNodeKey(nodeId) {
- let node = this.store.root.getChildNodes([nodeId])[0];
- return getNodeKey(this.nodeKey, node.data);
- },
-
-
- getNodePath(data) {
- return this.store.getNodePath(data);
- },
-
-
- getCheckedNodes(leafOnly, includeHalfChecked) {
- return this.store.getCheckedNodes(leafOnly, includeHalfChecked);
- },
-
-
- getCheckedKeys(leafOnly, includeHalfChecked) {
- return this.store.getCheckedKeys(leafOnly, includeHalfChecked);
- },
-
-
- getCurrentNode() {
- const currentNode = this.store.getCurrentNode();
- return currentNode ? currentNode.data : null;
- },
-
-
- getCurrentKey() {
- const currentNode = this.getCurrentNode();
- return currentNode ? currentNode[this.nodeKey] : null;
- },
-
-
- setCheckAll(isCheckAll = true) {
- if (this.showRadio) throw new Error('You set the "show-radio" property, so you cannot select all nodes');
-
- if (!this.showCheckbox) console.warn('You have not set the property "show-checkbox". Please check your settings');
-
- this.store.setCheckAll(isCheckAll);
- },
-
-
- setCheckedNodes(nodes, leafOnly) {
- this.store.setCheckedNodes(nodes, leafOnly);
- },
-
-
- setCheckedKeys(keys, leafOnly) {
- if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedKeys');
- this.store.setCheckedKeys(keys, leafOnly);
- },
-
-
- setChecked(data, checked, deep) {
- this.store.setChecked(data, checked, deep);
- },
-
-
- getHalfCheckedNodes() {
- return this.store.getHalfCheckedNodes();
- },
-
-
- getHalfCheckedKeys() {
- return this.store.getHalfCheckedKeys();
- },
-
-
- setCurrentNode(node) {
- if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCurrentNode');
- this.store.setUserCurrentNode(node);
- },
-
-
- setCurrentKey(key) {
- if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCurrentKey');
- this.store.setCurrentNodeKey(key);
- },
-
-
- getNode(data) {
- return this.store.getNode(data);
- },
-
-
- remove(data) {
- this.store.remove(data);
- },
-
-
- append(data, parentNode) {
- this.store.append(data, parentNode);
- },
-
-
- insertBefore(data, refNode) {
- this.store.insertBefore(data, refNode);
- },
-
-
- insertAfter(data, refNode) {
- this.store.insertAfter(data, refNode);
- },
-
-
- updateKeyChildren(key, data) {
- if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in updateKeyChild');
- this.store.updateChildren(key, data);
- }
- },
-
- created() {
- this.isTree = true;
-
- let props = this.props;
- if (typeof this.props === 'function') props = this.props();
- if (typeof props !== 'object') throw new Error('props must be of object type.');
-
- this.store = new TreeStore({
- key: this.nodeKey,
- data: this.treeData,
- lazy: this.lazy,
- props: props,
- load: this.load,
- showCheckbox: this.showCheckbox,
- showRadio: this.showRadio,
- currentNodeKey: this.currentNodeKey,
- checkStrictly: this.checkStrictly || this.checkOnlyLeaf,
- checkDescendants: this.checkDescendants,
- expandOnCheckNode: this.expandOnCheckNode,
- defaultCheckedKeys: this.defaultCheckedKeys,
- defaultExpandedKeys: this.defaultExpandedKeys,
- expandCurrentNodeParent: this.expandCurrentNodeParent,
- autoExpandParent: this.autoExpandParent,
- defaultExpandAll: this.defaultExpandAll,
- filterNodeMethod: this.filterNodeMethod,
- childVisibleForFilterNode: this.childVisibleForFilterNode,
- showNodeIcon: this.showNodeIcon,
- isInjectParentInNode: this.isInjectParentInNode
- });
- this.childNodesId = this.store.root.childNodesId;
- },
-
- beforeDestroy() {
- if (this.accordion) {
- uni.$off(`${this.elId}-tree-node-expand`)
- }
- },
- edit(node){
- this.$emit('edit',node)
- },
- deldata(node){
- this.$emit('deldata',node)
- }
- };
- </script>
- <style>
- .ly-tree {
- position: relative;
- cursor: default;
- background: #FFF;
- color: #606266;
- padding: 30rpx;
- }
-
- .ly-tree.is-empty {
- background: transparent;
- }
-
-
- .ly-empty {
- width: 100%;
- display: flex;
- justify-content: center;
- margin-top: 100rpx;
- }
-
-
-
- .ly-loader {
- margin-top: 100rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .ly-loader-inner,
- .ly-loader-inner:before,
- .ly-loader-inner:after {
- background: #efefef;
- animation: load 1s infinite ease-in-out;
- width: .5em;
- height: 1em;
- }
-
- .ly-loader-inner:before,
- .ly-loader-inner:after {
- position: absolute;
- top: 0;
- content: '';
- }
-
- .ly-loader-inner:before {
- left: -1em;
- }
-
- .ly-loader-inner {
- text-indent: -9999em;
- position: relative;
- font-size: 22rpx;
- animation-delay: 0.16s;
- }
-
- .ly-loader-inner:after {
- left: 1em;
- animation-delay: 0.32s;
- }
-
-
- @keyframes load {
- 0%,
- 80%,
- 100% {
- box-shadow: 0 0 #efefef;
- height: 1em;
- }
-
- 40% {
- box-shadow: 0 -1.5em #efefef;
- height: 1.5em;
- }
- }
- </style>
|