mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-04 21:18:14 +08:00
288 lines
9.9 KiB
Vue
288 lines
9.9 KiB
Vue
import { defineComponent, inject, VNode, PropType, CSSProperties } from 'vue';
|
||
import classNames from '../_util/classNames';
|
||
import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
|
||
import FileOutlined from '@ant-design/icons-vue/FileOutlined';
|
||
import CaretDownFilled from '@ant-design/icons-vue/CaretDownFilled';
|
||
import MinusSquareOutlined from '@ant-design/icons-vue/MinusSquareOutlined';
|
||
import PlusSquareOutlined from '@ant-design/icons-vue/PlusSquareOutlined';
|
||
import VcTree from '../vc-tree';
|
||
import animation from '../_util/openAnimation';
|
||
import PropTypes from '../_util/vue-types';
|
||
import { getOptionProps, getComponent, getSlot } from '../_util/props-util';
|
||
import initDefaultProps from '../_util/props-util/initDefaultProps';
|
||
import { cloneElement } from '../_util/vnode';
|
||
import { defaultConfigProvider } from '../config-provider';
|
||
|
||
const TreeNode = VcTree.TreeNode;
|
||
|
||
export interface TreeDataItem {
|
||
key?: string | number;
|
||
title?: string;
|
||
isLeaf?: boolean;
|
||
selectable?: boolean;
|
||
children?: TreeDataItem[];
|
||
disableCheckbox?: boolean;
|
||
disabled?: boolean;
|
||
class?: string;
|
||
style?: CSSProperties;
|
||
checkable?: boolean;
|
||
icon?: VNode;
|
||
slots?: Record<string, string>;
|
||
switcherIcon?: VNode;
|
||
}
|
||
|
||
interface DefaultEvent {
|
||
nativeEvent: MouseEvent;
|
||
node: Record<string, any>;
|
||
}
|
||
|
||
export interface CheckEvent extends DefaultEvent {
|
||
checked: boolean;
|
||
checkedNodes: Array<Record<string, any>>;
|
||
checkedNodesPositions: { node: Record<string, any>; pos: string | number }[];
|
||
event: string;
|
||
halfCheckedKeys: (string | number)[];
|
||
}
|
||
|
||
export interface ExpendEvent extends DefaultEvent {
|
||
expanded: boolean;
|
||
}
|
||
|
||
export interface SelectEvent extends DefaultEvent {
|
||
event: string;
|
||
selected: boolean;
|
||
selectedNodes: Array<Record<string, any>>;
|
||
}
|
||
|
||
export interface TreeDragEvent {
|
||
event: DragEvent;
|
||
expandedKeys: (string | number)[];
|
||
node: Record<string, any>;
|
||
}
|
||
|
||
export interface DropEvent {
|
||
dragNode: Record<string, any>;
|
||
dragNodesKeys: (string | number)[];
|
||
dropPosition: number;
|
||
dropToGap: boolean;
|
||
event: DragEvent;
|
||
node: Record<string, any>;
|
||
}
|
||
|
||
function TreeProps() {
|
||
return {
|
||
showLine: PropTypes.looseBool,
|
||
/** 是否支持多选 */
|
||
multiple: PropTypes.looseBool,
|
||
/** 是否自动展开父节点 */
|
||
autoExpandParent: PropTypes.looseBool,
|
||
/** checkable状态下节点选择完全受控（父子节点选中状态不再关联）*/
|
||
checkStrictly: PropTypes.looseBool,
|
||
/** 是否支持选中 */
|
||
checkable: PropTypes.looseBool,
|
||
/** 是否禁用树 */
|
||
disabled: PropTypes.looseBool,
|
||
/** 默认展开所有树节点 */
|
||
defaultExpandAll: PropTypes.looseBool,
|
||
/** 默认展开对应树节点 */
|
||
defaultExpandParent: PropTypes.looseBool,
|
||
/** 默认展开指定的树节点 */
|
||
defaultExpandedKeys: PropTypes.arrayOf(
|
||
PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||
),
|
||
/** （受控）展开指定的树节点 */
|
||
expandedKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
|
||
/** （受控）选中复选框的树节点 */
|
||
checkedKeys: PropTypes.oneOfType([
|
||
PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
|
||
PropTypes.shape({
|
||
checked: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
|
||
halfChecked: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
|
||
}).loose,
|
||
]),
|
||
/** 默认选中复选框的树节点 */
|
||
defaultCheckedKeys: PropTypes.arrayOf(
|
||
PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||
),
|
||
/** （受控）设置选中的树节点 */
|
||
selectedKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
|
||
/** 默认选中的树节点 */
|
||
defaultSelectedKeys: PropTypes.arrayOf(
|
||
PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||
),
|
||
selectable: PropTypes.looseBool,
|
||
|
||
/** filter some AntTreeNodes as you need. it should return true */
|
||
filterAntTreeNode: PropTypes.func,
|
||
/** 异步加载数据 */
|
||
loadData: PropTypes.func,
|
||
loadedKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
|
||
// onLoaded: (loadedKeys: string[], info: { event: 'load', node: AntTreeNode; }) => void,
|
||
/** 响应右键点击 */
|
||
// onRightClick: (options: AntTreeNodeMouseEvent) => void,
|
||
/** 设置节点可拖拽（IE>8）*/
|
||
draggable: PropTypes.looseBool,
|
||
// /** 开始拖拽时调用 */
|
||
// onDragStart: (options: AntTreeNodeMouseEvent) => void,
|
||
// /** dragenter 触发时调用 */
|
||
// onDragEnter: (options: AntTreeNodeMouseEvent) => void,
|
||
// /** dragover 触发时调用 */
|
||
// onDragOver: (options: AntTreeNodeMouseEvent) => void,
|
||
// /** dragleave 触发时调用 */
|
||
// onDragLeave: (options: AntTreeNodeMouseEvent) => void,
|
||
// /** drop 触发时调用 */
|
||
// onDrop: (options: AntTreeNodeMouseEvent) => void,
|
||
showIcon: PropTypes.looseBool,
|
||
icon: PropTypes.func,
|
||
switcherIcon: PropTypes.any,
|
||
prefixCls: PropTypes.string,
|
||
filterTreeNode: PropTypes.func,
|
||
openAnimation: PropTypes.any,
|
||
treeData: {
|
||
type: Array as PropType<TreeDataItem[]>,
|
||
},
|
||
/**
|
||
* @default{title,key,children}
|
||
* 替换treeNode中 title,key,children字段为treeData中对应的字段
|
||
*/
|
||
replaceFields: PropTypes.object,
|
||
blockNode: PropTypes.looseBool,
|
||
/** 展开/收起节点时触发 */
|
||
onExpand: PropTypes.func,
|
||
/** 点击复选框触发 */
|
||
onCheck: PropTypes.func,
|
||
/** 点击树节点触发 */
|
||
onSelect: PropTypes.func,
|
||
/** 单击树节点触发 */
|
||
onClick: PropTypes.func,
|
||
/** 双击树节点触发 */
|
||
onDoubleclick: PropTypes.func,
|
||
onDblclick: PropTypes.func,
|
||
'onUpdate:selectedKeys': PropTypes.func,
|
||
'onUpdate:checkedKeys': PropTypes.func,
|
||
'onUpdate:expandedKeys': PropTypes.func,
|
||
};
|
||
}
|
||
|
||
export { TreeProps };
|
||
|
||
export default defineComponent({
|
||
name: 'ATree',
|
||
inheritAttrs: false,
|
||
props: initDefaultProps(TreeProps(), {
|
||
checkable: false,
|
||
showIcon: false,
|
||
openAnimation: {
|
||
...animation,
|
||
appear: null,
|
||
},
|
||
blockNode: false,
|
||
}),
|
||
setup() {
|
||
return {
|
||
tree: null,
|
||
configProvider: inject('configProvider', defaultConfigProvider),
|
||
};
|
||
},
|
||
TreeNode,
|
||
methods: {
|
||
renderSwitcherIcon(prefixCls: string, switcherIcon: VNode, { isLeaf, loading, expanded }) {
|
||
const { showLine } = this.$props;
|
||
if (loading) {
|
||
return <LoadingOutlined class={`${prefixCls}-switcher-loading-icon`} />;
|
||
}
|
||
|
||
if (isLeaf) {
|
||
return showLine ? <FileOutlined class={`${prefixCls}-switcher-line-icon`} /> : null;
|
||
}
|
||
const switcherCls = `${prefixCls}-switcher-icon`;
|
||
if (switcherIcon) {
|
||
return cloneElement(switcherIcon, {
|
||
class: switcherCls,
|
||
});
|
||
}
|
||
return showLine ? (
|
||
expanded ? (
|
||
<MinusSquareOutlined class={`${prefixCls}-switcher-line-icon`} />
|
||
) : (
|
||
<PlusSquareOutlined class={`${prefixCls}-switcher-line-icon`} />
|
||
)
|
||
) : (
|
||
<CaretDownFilled class={switcherCls} />
|
||
);
|
||
},
|
||
updateTreeData(treeData: TreeDataItem[]) {
|
||
const { $slots } = this;
|
||
const defaultFields = { children: 'children', title: 'title', key: 'key' };
|
||
const replaceFields = { ...defaultFields, ...this.$props.replaceFields };
|
||
return treeData.map(item => {
|
||
const key = item[replaceFields.key];
|
||
const children = item[replaceFields.children];
|
||
const { slots = {}, class: cls, style, ...restProps } = item;
|
||
const treeNodeProps = {
|
||
...restProps,
|
||
icon: $slots[slots.icon] || restProps.icon,
|
||
switcherIcon: $slots[slots.switcherIcon] || restProps.switcherIcon,
|
||
title: $slots[slots.title] || $slots.title || restProps[replaceFields.title],
|
||
dataRef: item,
|
||
key,
|
||
class: cls,
|
||
style,
|
||
};
|
||
if (children) {
|
||
return { ...treeNodeProps, children: this.updateTreeData(children) };
|
||
}
|
||
return treeNodeProps;
|
||
});
|
||
},
|
||
setTreeRef(node: VNode) {
|
||
this.tree = node;
|
||
},
|
||
handleCheck(checkedObj: (number | string)[], eventObj: CheckEvent) {
|
||
this.$emit('update:checkedKeys', checkedObj);
|
||
this.$emit('check', checkedObj, eventObj);
|
||
},
|
||
handleExpand(expandedKeys: (number | string)[], eventObj: ExpendEvent) {
|
||
this.$emit('update:expandedKeys', expandedKeys);
|
||
this.$emit('expand', expandedKeys, eventObj);
|
||
},
|
||
handleSelect(selectedKeys: (number | string)[], eventObj: SelectEvent) {
|
||
this.$emit('update:selectedKeys', selectedKeys);
|
||
this.$emit('select', selectedKeys, eventObj);
|
||
},
|
||
},
|
||
render() {
|
||
const props = getOptionProps(this);
|
||
const { prefixCls: customizePrefixCls, showIcon, treeNodes, blockNode } = props;
|
||
const getPrefixCls = this.configProvider.getPrefixCls;
|
||
const prefixCls = getPrefixCls('tree', customizePrefixCls);
|
||
const switcherIcon = getComponent(this, 'switcherIcon');
|
||
const checkable = props.checkable;
|
||
let treeData = props.treeData || treeNodes;
|
||
if (treeData) {
|
||
treeData = this.updateTreeData(treeData);
|
||
}
|
||
const { class: className, ...restAttrs } = this.$attrs;
|
||
const vcTreeProps = {
|
||
...props,
|
||
prefixCls,
|
||
checkable: checkable ? <span class={`${prefixCls}-checkbox-inner`} /> : checkable,
|
||
children: getSlot(this),
|
||
switcherIcon: nodeProps => this.renderSwitcherIcon(prefixCls, switcherIcon, nodeProps),
|
||
ref: this.setTreeRef,
|
||
...restAttrs,
|
||
class: classNames(className, {
|
||
[`${prefixCls}-icon-hide`]: !showIcon,
|
||
[`${prefixCls}-block-node`]: blockNode,
|
||
}),
|
||
onCheck: this.handleCheck,
|
||
onExpand: this.handleExpand,
|
||
onSelect: this.handleSelect,
|
||
} as Record<string, any>;
|
||
if (treeData) {
|
||
vcTreeProps.treeData = treeData;
|
||
}
|
||
return <VcTree {...vcTreeProps} __propsSymbol__={[]} />;
|
||
},
|
||
});
|