ui库和web端产品库合并版本(还需修复细节)
This commit is contained in:
279
ui/packages/common/AiUserGet/tree/tree-node.vue
Normal file
279
ui/packages/common/AiUserGet/tree/tree-node.vue
Normal file
@@ -0,0 +1,279 @@
|
||||
<template>
|
||||
<div
|
||||
class="el-tree-node"
|
||||
@click.stop="handleClick"
|
||||
@contextmenu="($event) => this.handleContextMenu($event)"
|
||||
v-show="node.visible"
|
||||
:class="{
|
||||
'is-expanded': expanded,
|
||||
'is-current': node.isCurrent,
|
||||
'is-hidden': !node.visible,
|
||||
'is-focusable': !node.disabled,
|
||||
'is-checked': !node.disabled && node.checked
|
||||
}"
|
||||
role="treeitem"
|
||||
tabindex="-1"
|
||||
:aria-expanded="expanded"
|
||||
:aria-disabled="node.disabled"
|
||||
:aria-checked="node.checked"
|
||||
:draggable="tree.draggable"
|
||||
@dragstart.stop="handleDragStart"
|
||||
@dragover.stop="handleDragOver"
|
||||
@dragend.stop="handleDragEnd"
|
||||
@drop.stop="handleDrop"
|
||||
ref="node"
|
||||
>
|
||||
<div class="el-tree-node__content"
|
||||
:style="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }">
|
||||
<span
|
||||
@click.stop="handleExpandIconClick"
|
||||
:class="[
|
||||
{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded },
|
||||
'el-tree-node__expand-icon',
|
||||
tree.iconClass ? tree.iconClass : 'el-icon-caret-right'
|
||||
]"
|
||||
>
|
||||
</span>
|
||||
<el-checkbox
|
||||
v-if="showCheckbox"
|
||||
v-model="node.checked"
|
||||
:indeterminate="node.indeterminate"
|
||||
:disabled="!!node.disabled"
|
||||
@click.native.stop
|
||||
@change="handleCheckChange"
|
||||
>
|
||||
</el-checkbox>
|
||||
<span
|
||||
v-if="node.loading"
|
||||
class="el-tree-node__loading-icon el-icon-loading">
|
||||
</span>
|
||||
<node-content :node="node"></node-content>
|
||||
</div>
|
||||
<el-collapse-transition>
|
||||
<div
|
||||
class="el-tree-node__children"
|
||||
v-if="!renderAfterExpand || childNodeRendered"
|
||||
v-show="expanded"
|
||||
role="group"
|
||||
:aria-expanded="expanded"
|
||||
>
|
||||
<el-tree-node
|
||||
:render-content="renderContent"
|
||||
v-for="child in node.childNodes"
|
||||
:render-after-expand="renderAfterExpand"
|
||||
:show-checkbox="showCheckbox"
|
||||
:key="getNodeKey(child)"
|
||||
:node="child"
|
||||
@node-expand="handleChildNodeExpand">
|
||||
</el-tree-node>
|
||||
</div>
|
||||
</el-collapse-transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/jsx">
|
||||
import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition';
|
||||
import ElCheckbox from 'element-ui/packages/checkbox';
|
||||
import emitter from 'element-ui/src/mixins/emitter';
|
||||
import { getNodeKey } from './model/util';
|
||||
|
||||
export default {
|
||||
name: 'ElTreeNode',
|
||||
|
||||
componentName: 'ElTreeNode',
|
||||
|
||||
mixins: [emitter],
|
||||
|
||||
props: {
|
||||
node: {
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
props: {},
|
||||
renderContent: Function,
|
||||
renderAfterExpand: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showCheckbox: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
ElCollapseTransition,
|
||||
ElCheckbox,
|
||||
NodeContent: {
|
||||
props: {
|
||||
node: {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
render(h) {
|
||||
const parent = this.$parent;
|
||||
const tree = parent.tree;
|
||||
const node = this.node;
|
||||
const { data, store } = node;
|
||||
return (
|
||||
parent.renderContent
|
||||
? parent.renderContent.call(parent._renderProxy, h, { _self: tree.$vnode.context, node, data, store })
|
||||
: tree.$scopedSlots.default
|
||||
? tree.$scopedSlots.default({ node, data })
|
||||
: <span class="el-tree-node__label">{ node.label }</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
tree: null,
|
||||
expanded: false,
|
||||
childNodeRendered: false,
|
||||
oldChecked: null,
|
||||
oldIndeterminate: null
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
'node.indeterminate'(val) {
|
||||
this.handleSelectChange(this.node.checked, val);
|
||||
},
|
||||
|
||||
'node.checked'(val) {
|
||||
this.handleSelectChange(val, this.node.indeterminate);
|
||||
},
|
||||
|
||||
'node.expanded'(val) {
|
||||
this.$nextTick(() => this.expanded = val);
|
||||
if (val) {
|
||||
this.childNodeRendered = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getNodeKey(node) {
|
||||
return getNodeKey(this.tree.nodeKey, node.data);
|
||||
},
|
||||
|
||||
handleSelectChange(checked, indeterminate) {
|
||||
if (this.oldChecked !== checked && this.oldIndeterminate !== indeterminate) {
|
||||
this.tree.$emit('check-change', this.node.data, checked, indeterminate);
|
||||
}
|
||||
this.oldChecked = checked;
|
||||
this.indeterminate = indeterminate;
|
||||
},
|
||||
|
||||
handleClick() {
|
||||
const store = this.tree.store;
|
||||
store.setCurrentNode(this.node);
|
||||
this.tree.$emit('current-change', store.currentNode ? store.currentNode.data : null, store.currentNode);
|
||||
this.tree.currentNode = this;
|
||||
if (this.tree.expandOnClickNode) {
|
||||
this.handleExpandIconClick();
|
||||
}
|
||||
if (this.tree.checkOnClickNode && !this.node.disabled) {
|
||||
this.handleCheckChange(null, {
|
||||
target: { checked: !this.node.checked }
|
||||
});
|
||||
}
|
||||
this.tree.$emit('node-click', this.node.data, this.node, this);
|
||||
},
|
||||
|
||||
handleContextMenu(event) {
|
||||
if (this.tree._events['node-contextmenu'] && this.tree._events['node-contextmenu'].length > 0) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
this.tree.$emit('node-contextmenu', event, this.node.data, this.node, this);
|
||||
},
|
||||
|
||||
handleExpandIconClick() {
|
||||
if (this.node.isLeaf) return;
|
||||
if (this.expanded) {
|
||||
this.tree.$emit('node-collapse', this.node.data, this.node, this);
|
||||
this.node.collapse();
|
||||
} else {
|
||||
this.node.expand();
|
||||
this.$emit('node-expand', this.node.data, this.node, this);
|
||||
}
|
||||
},
|
||||
|
||||
handleCheckChange(value, ev) {
|
||||
this.node.setChecked(ev.target.checked, !this.tree.checkStrictly);
|
||||
this.$nextTick(() => {
|
||||
const store = this.tree.store;
|
||||
this.tree.$emit('check', this.node.data, {
|
||||
checkedNodes: store.getCheckedNodes(),
|
||||
checkedKeys: store.getCheckedKeys(),
|
||||
halfCheckedNodes: store.getHalfCheckedNodes(),
|
||||
halfCheckedKeys: store.getHalfCheckedKeys(),
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
handleChildNodeExpand(nodeData, node, instance) {
|
||||
this.broadcast('ElTreeNode', 'tree-node-expand', node);
|
||||
this.tree.$emit('node-expand', nodeData, node, instance);
|
||||
},
|
||||
|
||||
handleDragStart(event) {
|
||||
if (!this.tree.draggable) return;
|
||||
this.tree.$emit('tree-node-drag-start', event, this);
|
||||
},
|
||||
|
||||
handleDragOver(event) {
|
||||
if (!this.tree.draggable) return;
|
||||
this.tree.$emit('tree-node-drag-over', event, this);
|
||||
event.preventDefault();
|
||||
},
|
||||
|
||||
handleDrop(event) {
|
||||
event.preventDefault();
|
||||
},
|
||||
|
||||
handleDragEnd(event) {
|
||||
if (!this.tree.draggable) return;
|
||||
this.tree.$emit('tree-node-drag-end', event, this);
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
const parent = this.$parent;
|
||||
|
||||
if (parent.isTree) {
|
||||
this.tree = parent;
|
||||
} else {
|
||||
this.tree = parent.tree;
|
||||
}
|
||||
|
||||
const tree = this.tree;
|
||||
if (!tree) {
|
||||
console.warn('Can not find node\'s tree.');
|
||||
}
|
||||
|
||||
const props = tree.props || {};
|
||||
const childrenKey = props['children'] || 'children';
|
||||
|
||||
this.$watch(`node.data.${childrenKey}`, () => {
|
||||
this.node.updateChildren();
|
||||
});
|
||||
|
||||
if (this.node.expanded) {
|
||||
this.expanded = true;
|
||||
this.childNodeRendered = true;
|
||||
}
|
||||
|
||||
if(this.tree.accordion) {
|
||||
this.$on('tree-node-expand', node => {
|
||||
if(this.node !== node) {
|
||||
this.node.collapse();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user