初始版本提交
This commit is contained in:
yaoyn
6
src/components/Tree/index.ts
Normal file
6
src/components/Tree/index.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import BasicTree from './src/Tree.vue';
|
||||
import './style';
|
||||
|
||||
export { BasicTree };
|
||||
export type { ContextMenuItem } from '/@/hooks/web/useContextMenu';
|
||||
export * from './src/tree';
|
||||
499
src/components/Tree/src/Tree.vue
Normal file
499
src/components/Tree/src/Tree.vue
Normal file
@ -0,0 +1,499 @@
|
||||
<script lang="tsx">
|
||||
import type { CSSProperties } from 'vue';
|
||||
import type { FieldNames, TreeState, TreeItem, KeyType, CheckKeys, TreeActionType } from './tree';
|
||||
|
||||
import {
|
||||
defineComponent,
|
||||
reactive,
|
||||
computed,
|
||||
unref,
|
||||
ref,
|
||||
watchEffect,
|
||||
toRaw,
|
||||
watch,
|
||||
onMounted,
|
||||
} from 'vue';
|
||||
import TreeHeader from './TreeHeader.vue';
|
||||
import { Spin, Empty, Input } from 'ant-design-vue';
|
||||
import { TreeIcon } from './TreeIcon';
|
||||
import { ScrollContainer } from '/@/components/Container';
|
||||
import { omit, get, difference, cloneDeep } from 'lodash-es';
|
||||
import { isArray, isBoolean, isEmpty, isFunction } from '/@/utils/is';
|
||||
import { extendSlots, getSlot } from '/@/utils/helper/tsxHelper';
|
||||
import { filter, treeToList, eachTree } from '/@/utils/helper/treeHelper';
|
||||
import { useTree } from './useTree';
|
||||
import { useContextMenu } from '/@/hooks/web/useContextMenu';
|
||||
import { CreateContextOptions } from '/@/components/ContextMenu';
|
||||
import { treeEmits, treeProps } from './tree';
|
||||
import { createBEM } from '/@/utils/bem';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { Icon } from '/@/components/Icon';
|
||||
export default defineComponent({
|
||||
name: 'BasicTree',
|
||||
inheritAttrs: false,
|
||||
props: treeProps,
|
||||
emits: treeEmits,
|
||||
setup(props, { attrs, slots, emit, expose }) {
|
||||
const [bem] = createBEM('tree');
|
||||
const { t } = useI18n();
|
||||
const state = reactive<TreeState>({
|
||||
checkStrictly: props.checkStrictly,
|
||||
expandedKeys: props.expandedKeys || [],
|
||||
selectedKeys: props.selectedKeys || [],
|
||||
checkedKeys: props.checkedKeys || [],
|
||||
});
|
||||
|
||||
const searchState = reactive({
|
||||
startSearch: false,
|
||||
searchText: '',
|
||||
searchData: [] as TreeItem[],
|
||||
});
|
||||
|
||||
const treeDataRef = ref<TreeItem[]>([]);
|
||||
|
||||
const [createContextMenu] = useContextMenu();
|
||||
|
||||
const getFieldNames = computed((): Required<FieldNames> => {
|
||||
const { fieldNames } = props;
|
||||
return {
|
||||
children: 'children',
|
||||
title: 'title',
|
||||
key: 'key',
|
||||
...fieldNames,
|
||||
};
|
||||
});
|
||||
|
||||
const getBindValues = computed(() => {
|
||||
let propsData = {
|
||||
blockNode: true,
|
||||
...attrs,
|
||||
...props,
|
||||
expandedKeys: state.expandedKeys,
|
||||
selectedKeys: state.selectedKeys,
|
||||
checkedKeys: state.checkedKeys,
|
||||
checkStrictly: state.checkStrictly,
|
||||
fieldNames: unref(getFieldNames),
|
||||
'onUpdate:expandedKeys': (v: KeyType[]) => {
|
||||
state.expandedKeys = v;
|
||||
emit('update:expandedKeys', v);
|
||||
},
|
||||
'onUpdate:selectedKeys': (v: KeyType[]) => {
|
||||
state.selectedKeys = v;
|
||||
emit('update:selectedKeys', v);
|
||||
},
|
||||
onCheck: (v: CheckKeys, e) => {
|
||||
let currentValue = toRaw(state.checkedKeys) as KeyType[];
|
||||
if (isArray(currentValue) && searchState.startSearch) {
|
||||
const { key } = unref(getFieldNames);
|
||||
currentValue = difference(currentValue, getChildrenKeys(e.node.$attrs.node[key]));
|
||||
if (e.checked) {
|
||||
currentValue.push(e.node.$attrs.node[key]);
|
||||
}
|
||||
state.checkedKeys = currentValue;
|
||||
} else {
|
||||
state.checkedKeys = v;
|
||||
}
|
||||
|
||||
const rawVal = toRaw(state.checkedKeys);
|
||||
emit('update:value', rawVal);
|
||||
emit('check', rawVal, e);
|
||||
},
|
||||
onRightClick: handleRightClick,
|
||||
};
|
||||
return omit(propsData, 'treeData', 'class');
|
||||
});
|
||||
|
||||
const getTreeData = computed((): TreeItem[] =>
|
||||
searchState.startSearch ? searchState.searchData : unref(treeDataRef),
|
||||
);
|
||||
|
||||
const getNotFound = computed((): boolean => {
|
||||
return !getTreeData.value || getTreeData.value.length === 0;
|
||||
});
|
||||
|
||||
const {
|
||||
deleteNodeByKey,
|
||||
insertNodeByKey,
|
||||
insertNodesByKey,
|
||||
filterByLevel,
|
||||
updateNodeByKey,
|
||||
getAllKeys,
|
||||
getChildrenKeys,
|
||||
getEnabledKeys,
|
||||
getSelectedNode,
|
||||
} = useTree(treeDataRef, getFieldNames);
|
||||
|
||||
function getIcon(params: Recordable, icon?: string) {
|
||||
if (!icon) {
|
||||
if (props.renderIcon && isFunction(props.renderIcon)) {
|
||||
return props.renderIcon(params);
|
||||
}
|
||||
}
|
||||
return icon;
|
||||
}
|
||||
|
||||
async function handleRightClick({ event, node }: Recordable) {
|
||||
const { rightMenuList: menuList = [], beforeRightClick } = props;
|
||||
let contextMenuOptions: CreateContextOptions = { event, items: [] };
|
||||
|
||||
if (beforeRightClick && isFunction(beforeRightClick)) {
|
||||
let result = await beforeRightClick(node, event);
|
||||
if (Array.isArray(result)) {
|
||||
contextMenuOptions.items = result;
|
||||
} else {
|
||||
Object.assign(contextMenuOptions, result);
|
||||
}
|
||||
} else {
|
||||
contextMenuOptions.items = menuList;
|
||||
}
|
||||
if (!contextMenuOptions.items?.length) return;
|
||||
contextMenuOptions.items = contextMenuOptions.items.filter((item) => !item.hidden);
|
||||
createContextMenu(contextMenuOptions);
|
||||
}
|
||||
|
||||
function setExpandedKeys(keys: KeyType[]) {
|
||||
state.expandedKeys = keys;
|
||||
}
|
||||
|
||||
function getExpandedKeys() {
|
||||
return state.expandedKeys;
|
||||
}
|
||||
function setSelectedKeys(keys: KeyType[]) {
|
||||
state.selectedKeys = keys;
|
||||
}
|
||||
|
||||
function getSelectedKeys() {
|
||||
return state.selectedKeys;
|
||||
}
|
||||
|
||||
function setCheckedKeys(keys: CheckKeys) {
|
||||
state.checkedKeys = keys;
|
||||
}
|
||||
|
||||
function getCheckedKeys() {
|
||||
return state.checkedKeys;
|
||||
}
|
||||
|
||||
function checkAll(checkAll: boolean) {
|
||||
state.checkedKeys = checkAll ? getEnabledKeys() : ([] as KeyType[]);
|
||||
}
|
||||
|
||||
function expandAll(expandAll: boolean) {
|
||||
state.expandedKeys = expandAll ? getAllKeys() : ([] as KeyType[]);
|
||||
}
|
||||
|
||||
function onStrictlyChange(strictly: boolean) {
|
||||
state.checkStrictly = strictly;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.searchValue,
|
||||
(val) => {
|
||||
if (val !== searchState.searchText) {
|
||||
searchState.searchText = val;
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.treeData,
|
||||
(val) => {
|
||||
if (val) {
|
||||
handleSearch(searchState.searchText);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
function handleSearch(searchValue) {
|
||||
if (searchValue !== searchState.searchText) searchState.searchText = searchValue;
|
||||
emit('update:searchValue', searchValue);
|
||||
if (!searchValue) {
|
||||
searchState.startSearch = false;
|
||||
return;
|
||||
}
|
||||
const { filterFn, checkable, expandOnSearch, checkOnSearch, selectedOnSearch } =
|
||||
unref(props);
|
||||
searchState.startSearch = true;
|
||||
const { title: titleField, key: keyField } = unref(getFieldNames);
|
||||
|
||||
const matchedKeys: string[] = [];
|
||||
searchState.searchData = filter(
|
||||
unref(treeDataRef),
|
||||
(node) => {
|
||||
const result = filterFn
|
||||
? filterFn(searchValue, node, unref(getFieldNames))
|
||||
: node[titleField]?.includes(searchValue) ?? false;
|
||||
if (result) {
|
||||
matchedKeys.push(node[keyField]);
|
||||
}
|
||||
return result;
|
||||
},
|
||||
unref(getFieldNames),
|
||||
);
|
||||
|
||||
if (expandOnSearch) {
|
||||
const expandKeys = treeToList(searchState.searchData).map((val) => {
|
||||
return val[keyField];
|
||||
});
|
||||
if (expandKeys && expandKeys.length) {
|
||||
setExpandedKeys(expandKeys);
|
||||
}
|
||||
}
|
||||
|
||||
if (checkOnSearch && checkable && matchedKeys.length) {
|
||||
setCheckedKeys(matchedKeys);
|
||||
}
|
||||
|
||||
if (selectedOnSearch && matchedKeys.length) {
|
||||
setSelectedKeys(matchedKeys);
|
||||
}
|
||||
}
|
||||
function handleKeyChange(v) {
|
||||
handleSearch(v.target.value);
|
||||
}
|
||||
function handleClickNode(key: string, children: TreeItem[]) {
|
||||
if (!props.clickRowToExpand || !children || children.length === 0) return;
|
||||
if (!state.expandedKeys.includes(key)) {
|
||||
setExpandedKeys([...state.expandedKeys, key]);
|
||||
} else {
|
||||
const keys = [...state.expandedKeys];
|
||||
const index = keys.findIndex((item) => item === key);
|
||||
if (index !== -1) {
|
||||
keys.splice(index, 1);
|
||||
}
|
||||
setExpandedKeys(keys);
|
||||
}
|
||||
}
|
||||
|
||||
watchEffect(() => {
|
||||
treeDataRef.value = props.treeData as TreeItem[];
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
const level = parseInt(props.defaultExpandLevel);
|
||||
if (level > 0) {
|
||||
state.expandedKeys = filterByLevel(level);
|
||||
} else if (props.defaultExpandAll) {
|
||||
expandAll(true);
|
||||
}
|
||||
});
|
||||
|
||||
watchEffect(() => {
|
||||
state.expandedKeys = props.expandedKeys;
|
||||
});
|
||||
|
||||
watchEffect(() => {
|
||||
state.selectedKeys = props.selectedKeys;
|
||||
});
|
||||
|
||||
watchEffect(() => {
|
||||
state.checkedKeys = props.checkedKeys;
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
() => {
|
||||
state.checkedKeys = toRaw(props.value || []);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => state.checkedKeys,
|
||||
() => {
|
||||
const v = toRaw(state.checkedKeys);
|
||||
emit('update:value', v);
|
||||
emit('change', v);
|
||||
},
|
||||
);
|
||||
|
||||
watchEffect(() => {
|
||||
state.checkStrictly = props.checkStrictly;
|
||||
});
|
||||
|
||||
const instance: TreeActionType = {
|
||||
setExpandedKeys,
|
||||
getExpandedKeys,
|
||||
setSelectedKeys,
|
||||
getSelectedKeys,
|
||||
setCheckedKeys,
|
||||
getCheckedKeys,
|
||||
insertNodeByKey,
|
||||
insertNodesByKey,
|
||||
deleteNodeByKey,
|
||||
updateNodeByKey,
|
||||
getSelectedNode,
|
||||
checkAll,
|
||||
expandAll,
|
||||
filterByLevel: (level: number) => {
|
||||
state.expandedKeys = filterByLevel(level);
|
||||
},
|
||||
setSearchValue: (value: string) => {
|
||||
handleSearch(value);
|
||||
},
|
||||
getSearchValue: () => {
|
||||
return searchState.searchText;
|
||||
},
|
||||
};
|
||||
|
||||
function renderAction(node: TreeItem) {
|
||||
const { actionList } = props;
|
||||
if (!actionList || actionList.length === 0) return;
|
||||
return actionList.map((item, index) => {
|
||||
let nodeShow = true;
|
||||
if (isFunction(item.show)) {
|
||||
nodeShow = item.show?.(node);
|
||||
} else if (isBoolean(item.show)) {
|
||||
nodeShow = item.show;
|
||||
}
|
||||
|
||||
if (!nodeShow) return null;
|
||||
|
||||
return (
|
||||
<span key={index} class={bem('action')}>
|
||||
{item.render(node)}
|
||||
</span>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
const treeData = computed(() => {
|
||||
const data = cloneDeep(getTreeData.value);
|
||||
eachTree(data, (item, _parent) => {
|
||||
const searchText = searchState.searchText;
|
||||
const { highlight } = unref(props);
|
||||
const {
|
||||
title: titleField,
|
||||
key: keyField,
|
||||
children: childrenField,
|
||||
} = unref(getFieldNames);
|
||||
|
||||
const icon = getIcon(item, item.icon);
|
||||
const title = get(item, titleField);
|
||||
|
||||
const searchIdx = searchText ? title.indexOf(searchText) : -1;
|
||||
const isHighlight =
|
||||
searchState.startSearch && !isEmpty(searchText) && highlight && searchIdx !== -1;
|
||||
const highlightStyle = `color: ${isBoolean(highlight) ? '#f50' : highlight}`;
|
||||
|
||||
const titleDom = isHighlight ? (
|
||||
<span class={unref(getBindValues)?.blockNode ? `${bem('content')}` : ''}>
|
||||
<span>{title.substr(0, searchIdx)}</span>
|
||||
<span style={highlightStyle}>{searchText}</span>
|
||||
<span>{title.substr(searchIdx + (searchText as string).length)}</span>
|
||||
</span>
|
||||
) : (
|
||||
title
|
||||
);
|
||||
item[titleField] = (
|
||||
<span
|
||||
class={`${bem('title')} pl-2`}
|
||||
onClick={handleClickNode.bind(null, item[keyField], item[childrenField])}
|
||||
>
|
||||
{slots?.title ? (
|
||||
getSlot(slots, 'title', item)
|
||||
) : (
|
||||
<>
|
||||
{icon && <TreeIcon icon={icon} />}
|
||||
{titleDom}
|
||||
<span class={bem('actions')}>{renderAction(item)}</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
return item;
|
||||
});
|
||||
return data;
|
||||
});
|
||||
const searchListData = ref('');
|
||||
|
||||
expose(instance);
|
||||
|
||||
return () => {
|
||||
const { title, helpMessage, toolbar, search, checkable } = props;
|
||||
const showTitle = title || toolbar || search || slots.headerTitle;
|
||||
const scrollStyle: CSSProperties = { height: 'calc(100% - 51px)' };
|
||||
const inputslots = { prefix: () => <Icon icon="gg:search" size="18" color="#ccc" /> };
|
||||
return (
|
||||
<div class={[bem(), 'h-full', attrs.class]}>
|
||||
{showTitle && (
|
||||
<TreeHeader
|
||||
checkable={checkable}
|
||||
checkAll={checkAll}
|
||||
expandAll={expandAll}
|
||||
title={title}
|
||||
toolbar={toolbar}
|
||||
helpMessage={helpMessage}
|
||||
onStrictlyChange={onStrictlyChange}
|
||||
>
|
||||
{extendSlots(slots)}
|
||||
</TreeHeader>
|
||||
)}
|
||||
{search && (
|
||||
<div class="p-2">
|
||||
<Input
|
||||
placeholder={t('输入搜索关键词')}
|
||||
size="small"
|
||||
allowClear
|
||||
style="height: 35px;padding: 3px 2px 3px 10px;"
|
||||
v-slots={inputslots}
|
||||
v-model={searchListData.value}
|
||||
onChange={handleKeyChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div style={scrollStyle}>
|
||||
<Spin spinning={unref(props.loading)} tip="加载中...">
|
||||
<ScrollContainer>
|
||||
{!unref(getNotFound) && (
|
||||
<a-directory-tree
|
||||
class="custom-directory-tree"
|
||||
{...unref(getBindValues)}
|
||||
expandAction={unref(getBindValues).clickRowToExpand ? 'click' : false}
|
||||
showIcon={false}
|
||||
treeData={treeData.value}
|
||||
/>
|
||||
)}
|
||||
</ScrollContainer>
|
||||
{unref(getNotFound) && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} class="!mt-4" />}
|
||||
</Spin>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.ant-spin-nested-loading {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
:deep(.ant-tree) {
|
||||
&.ant-tree-directory.custom-directory-tree {
|
||||
.ant-tree-treenode-selected::before,
|
||||
.ant-tree-treenode:hover::before {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ant-tree-treenode-selected .ant-tree-switcher,
|
||||
.ant-tree-treenode .ant-tree-node-content-wrapper.ant-tree-node-selected {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tree-switcher {
|
||||
width: 12px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.ant-tree-indent-unit {
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
122
src/components/Tree/src/TreeHeader.vue
Normal file
122
src/components/Tree/src/TreeHeader.vue
Normal file
@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div :class="bem()" class="flex px-2 py-2 items-center justify-between header">
|
||||
<slot name="headerTitle" v-if="slots.headerTitle"></slot>
|
||||
<BasicTitle :helpMessage="helpMessage" v-if="!slots.headerTitle && title">
|
||||
{{ title }}
|
||||
</BasicTitle>
|
||||
<div class="cursor-pointer" v-if="toolbar">
|
||||
<Dropdown @click.prevent v-if="toolbar">
|
||||
<Icon icon="ion:ellipsis-vertical" />
|
||||
<template #overlay>
|
||||
<Menu @click="handleMenuClick">
|
||||
<template v-for="item in toolbarList" :key="item.value">
|
||||
<MenuItem v-bind="{ key: item.value }">
|
||||
{{ item.label }}
|
||||
</MenuItem>
|
||||
<MenuDivider v-if="item.divider" />
|
||||
</template>
|
||||
</Menu>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed, useSlots } from 'vue';
|
||||
import { Dropdown, Menu, MenuItem, MenuDivider } from 'ant-design-vue';
|
||||
import { Icon } from '/@/components/Icon';
|
||||
import { BasicTitle } from '/@/components/Basic/index';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
|
||||
import { createBEM } from '/@/utils/bem';
|
||||
import { ToolbarEnum } from './tree';
|
||||
|
||||
const [bem] = createBEM('tree-header');
|
||||
|
||||
const props = defineProps({
|
||||
helpMessage: {
|
||||
type: [String, Array] as PropType<string | string[]>,
|
||||
default: '',
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
toolbar: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
checkable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
checkAll: {
|
||||
type: Function,
|
||||
default: undefined,
|
||||
},
|
||||
expandAll: {
|
||||
type: Function,
|
||||
default: undefined,
|
||||
},
|
||||
} as const);
|
||||
const emit = defineEmits(['strictly-change']);
|
||||
|
||||
const slots = useSlots();
|
||||
const { t } = useI18n();
|
||||
|
||||
const toolbarList = computed(() => {
|
||||
const { checkable } = props;
|
||||
const defaultToolbarList = [
|
||||
{ label: t('展开全部'), value: ToolbarEnum.EXPAND_ALL },
|
||||
{
|
||||
label: t('折叠全部'),
|
||||
value: ToolbarEnum.UN_EXPAND_ALL,
|
||||
divider: checkable,
|
||||
},
|
||||
];
|
||||
|
||||
return checkable
|
||||
? [
|
||||
{ label: t('选择全部'), value: ToolbarEnum.SELECT_ALL },
|
||||
{
|
||||
label: t('取消选择'),
|
||||
value: ToolbarEnum.UN_SELECT_ALL,
|
||||
divider: checkable,
|
||||
},
|
||||
...defaultToolbarList,
|
||||
{ label: t('层级关联'), value: ToolbarEnum.CHECK_STRICTLY },
|
||||
{ label: t('层级独立'), value: ToolbarEnum.CHECK_UN_STRICTLY },
|
||||
]
|
||||
: defaultToolbarList;
|
||||
});
|
||||
|
||||
function handleMenuClick(e) {
|
||||
const { key } = e;
|
||||
switch (key) {
|
||||
case ToolbarEnum.SELECT_ALL:
|
||||
props.checkAll?.(true);
|
||||
break;
|
||||
case ToolbarEnum.UN_SELECT_ALL:
|
||||
props.checkAll?.(false);
|
||||
break;
|
||||
case ToolbarEnum.EXPAND_ALL:
|
||||
props.expandAll?.(true);
|
||||
break;
|
||||
case ToolbarEnum.UN_EXPAND_ALL:
|
||||
props.expandAll?.(false);
|
||||
break;
|
||||
case ToolbarEnum.CHECK_STRICTLY:
|
||||
emit('strictly-change', false);
|
||||
break;
|
||||
case ToolbarEnum.CHECK_UN_STRICTLY:
|
||||
emit('strictly-change', true);
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.header {
|
||||
height: 60px;
|
||||
}
|
||||
</style>
|
||||
13
src/components/Tree/src/TreeIcon.ts
Normal file
13
src/components/Tree/src/TreeIcon.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import type { VNode, FunctionalComponent } from 'vue';
|
||||
|
||||
import { h } from 'vue';
|
||||
import { isString } from '/@/utils/is';
|
||||
import { Icon } from '/@/components/Icon';
|
||||
|
||||
export const TreeIcon: FunctionalComponent = ({ icon }: { icon: VNode | string }) => {
|
||||
if (!icon) return null;
|
||||
if (isString(icon)) {
|
||||
return h(Icon, { icon, class: 'mr-1' });
|
||||
}
|
||||
return Icon;
|
||||
};
|
||||
194
src/components/Tree/src/tree.ts
Normal file
194
src/components/Tree/src/tree.ts
Normal file
@ -0,0 +1,194 @@
|
||||
import type { ExtractPropTypes } from 'vue';
|
||||
import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
|
||||
|
||||
import { buildProps } from '/@/utils/props';
|
||||
|
||||
export enum ToolbarEnum {
|
||||
SELECT_ALL,
|
||||
UN_SELECT_ALL,
|
||||
EXPAND_ALL,
|
||||
UN_EXPAND_ALL,
|
||||
CHECK_STRICTLY,
|
||||
CHECK_UN_STRICTLY,
|
||||
}
|
||||
|
||||
export const treeEmits = [
|
||||
'update:expandedKeys',
|
||||
'update:selectedKeys',
|
||||
'update:value',
|
||||
'change',
|
||||
'check',
|
||||
'update:searchValue',
|
||||
];
|
||||
|
||||
export interface TreeState {
|
||||
expandedKeys: KeyType[];
|
||||
selectedKeys: KeyType[];
|
||||
checkedKeys: CheckKeys;
|
||||
checkStrictly: boolean;
|
||||
}
|
||||
|
||||
export interface FieldNames {
|
||||
children?: string;
|
||||
title?: string;
|
||||
key?: string;
|
||||
}
|
||||
|
||||
export type KeyType = string | number;
|
||||
|
||||
export type CheckKeys =
|
||||
| KeyType[]
|
||||
| { checked: string[] | number[]; halfChecked: string[] | number[] };
|
||||
|
||||
export const treeProps = buildProps({
|
||||
value: {
|
||||
type: [Object, Array] as PropType<KeyType[] | CheckKeys>,
|
||||
},
|
||||
|
||||
renderIcon: {
|
||||
type: Function as PropType<(params: Recordable) => string>,
|
||||
},
|
||||
|
||||
helpMessage: {
|
||||
type: [String, Array] as PropType<string | string[]>,
|
||||
default: '',
|
||||
},
|
||||
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
toolbar: Boolean,
|
||||
search: Boolean,
|
||||
searchValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
checkStrictly: Boolean,
|
||||
clickRowToExpand: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
checkable: Boolean,
|
||||
defaultExpandLevel: {
|
||||
type: [String, Number] as PropType<string | number>,
|
||||
default: '',
|
||||
},
|
||||
defaultExpandAll: Boolean,
|
||||
|
||||
fieldNames: {
|
||||
type: Object as PropType<FieldNames>,
|
||||
},
|
||||
|
||||
treeData: {
|
||||
type: Array as PropType<TreeDataItem[]>,
|
||||
},
|
||||
|
||||
actionList: {
|
||||
type: Array as PropType<TreeActionItem[]>,
|
||||
default: () => [],
|
||||
},
|
||||
|
||||
expandedKeys: {
|
||||
type: Array as PropType<KeyType[]>,
|
||||
default: () => [],
|
||||
},
|
||||
|
||||
selectedKeys: {
|
||||
type: Array as PropType<KeyType[]>,
|
||||
default: () => [],
|
||||
},
|
||||
|
||||
checkedKeys: {
|
||||
type: Array as PropType<CheckKeys>,
|
||||
default: () => [],
|
||||
},
|
||||
|
||||
beforeRightClick: {
|
||||
type: Function as PropType<(...arg: any) => ContextMenuItem[] | ContextMenuOptions>,
|
||||
default: undefined,
|
||||
},
|
||||
|
||||
rightMenuList: {
|
||||
type: Array as PropType<ContextMenuItem[]>,
|
||||
},
|
||||
// 自定义数据过滤判断方法(注: 不是整个过滤方法，而是内置过滤的判断方法，用于增强原本仅能通过title进行过滤的方式)
|
||||
filterFn: {
|
||||
type: Function as PropType<
|
||||
(searchValue: any, node: TreeItem, fieldNames: FieldNames) => boolean
|
||||
>,
|
||||
default: undefined,
|
||||
},
|
||||
// 高亮搜索值，仅高亮具体匹配值（通过title）值为true时使用默认色值，值为#xxx时使用此值替代且高亮开启
|
||||
highlight: {
|
||||
type: [Boolean, String] as PropType<Boolean | String>,
|
||||
default: false,
|
||||
},
|
||||
// 搜索完成时自动展开结果
|
||||
expandOnSearch: Boolean,
|
||||
// 搜索完成自动选中所有结果,当且仅当 checkable===true 时生效
|
||||
checkOnSearch: Boolean,
|
||||
// 搜索完成自动select所有结果
|
||||
selectedOnSearch: Boolean,
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
export type TreeProps = ExtractPropTypes<typeof treeProps>;
|
||||
|
||||
export interface ContextMenuItem {
|
||||
label: string;
|
||||
icon?: string;
|
||||
hidden?: boolean;
|
||||
disabled?: boolean;
|
||||
handler?: Fn;
|
||||
divider?: boolean;
|
||||
children?: ContextMenuItem[];
|
||||
}
|
||||
|
||||
export interface ContextMenuOptions {
|
||||
icon?: string;
|
||||
styles?: any;
|
||||
items?: ContextMenuItem[];
|
||||
}
|
||||
|
||||
export interface TreeItem extends TreeDataItem {
|
||||
icon?: any;
|
||||
}
|
||||
|
||||
export interface TreeActionItem {
|
||||
render: (record: Recordable) => any;
|
||||
show?: boolean | ((record: Recordable) => boolean);
|
||||
}
|
||||
|
||||
export interface InsertNodeParams {
|
||||
parentKey: string | null;
|
||||
node: TreeDataItem;
|
||||
list?: TreeDataItem[];
|
||||
push?: 'push' | 'unshift';
|
||||
}
|
||||
|
||||
export interface TreeActionType {
|
||||
checkAll: (checkAll: boolean) => void;
|
||||
expandAll: (expandAll: boolean) => void;
|
||||
setExpandedKeys: (keys: KeyType[]) => void;
|
||||
getExpandedKeys: () => KeyType[];
|
||||
setSelectedKeys: (keys: KeyType[]) => void;
|
||||
getSelectedKeys: () => KeyType[];
|
||||
setCheckedKeys: (keys: CheckKeys) => void;
|
||||
getCheckedKeys: () => CheckKeys;
|
||||
filterByLevel: (level: number) => void;
|
||||
insertNodeByKey: (opt: InsertNodeParams) => void;
|
||||
insertNodesByKey: (opt: InsertNodeParams) => void;
|
||||
deleteNodeByKey: (key: string) => void;
|
||||
updateNodeByKey: (key: string, node: Omit<TreeDataItem, 'key'>) => void;
|
||||
setSearchValue: (value: string) => void;
|
||||
getSearchValue: () => string;
|
||||
getSelectedNode: (
|
||||
key: KeyType,
|
||||
treeList?: TreeItem[],
|
||||
selectNode?: TreeItem | null,
|
||||
) => TreeItem | null;
|
||||
}
|
||||
209
src/components/Tree/src/useTree.ts
Normal file
209
src/components/Tree/src/useTree.ts
Normal file
@ -0,0 +1,209 @@
|
||||
import type { InsertNodeParams, KeyType, FieldNames, TreeItem } from './tree';
|
||||
import type { Ref, ComputedRef } from 'vue';
|
||||
import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
|
||||
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { unref } from 'vue';
|
||||
import { forEach } from '/@/utils/helper/treeHelper';
|
||||
import { validateScript } from '/@/utils/event/design';
|
||||
|
||||
export function useTree(treeDataRef: Ref<TreeDataItem[]>, getFieldNames: ComputedRef<FieldNames>) {
|
||||
function getAllKeys(list?: TreeDataItem[]) {
|
||||
const keys: string[] = [];
|
||||
const treeData = list || unref(treeDataRef);
|
||||
const { key: keyField, children: childrenField } = unref(getFieldNames);
|
||||
if (!childrenField || !keyField) return keys;
|
||||
|
||||
for (let index = 0; index < treeData.length; index++) {
|
||||
const node = treeData[index];
|
||||
keys.push(node[keyField]!);
|
||||
const children = node[childrenField];
|
||||
if (children && children.length) {
|
||||
keys.push(...(getAllKeys(children) as string[]));
|
||||
}
|
||||
}
|
||||
return keys as KeyType[];
|
||||
}
|
||||
|
||||
// get keys that can be checked and selected
|
||||
function getEnabledKeys(list?: TreeDataItem[]) {
|
||||
const keys: string[] = [];
|
||||
const treeData = list || unref(treeDataRef);
|
||||
const { key: keyField, children: childrenField } = unref(getFieldNames);
|
||||
if (!childrenField || !keyField) return keys;
|
||||
|
||||
for (let index = 0; index < treeData.length; index++) {
|
||||
const node = treeData[index];
|
||||
node.disabled !== true && node.selectable !== false && keys.push(node[keyField]!);
|
||||
const children = node[childrenField];
|
||||
if (children && children.length) {
|
||||
keys.push(...(getEnabledKeys(children) as string[]));
|
||||
}
|
||||
}
|
||||
return keys as KeyType[];
|
||||
}
|
||||
|
||||
function getChildrenKeys(nodeKey: string | number, list?: TreeDataItem[]) {
|
||||
const keys: KeyType[] = [];
|
||||
const treeData = list || unref(treeDataRef);
|
||||
const { key: keyField, children: childrenField } = unref(getFieldNames);
|
||||
if (!childrenField || !keyField) return keys;
|
||||
for (let index = 0; index < treeData.length; index++) {
|
||||
const node = treeData[index];
|
||||
const children = node[childrenField];
|
||||
if (nodeKey === node[keyField]) {
|
||||
keys.push(node[keyField]!);
|
||||
if (children && children.length) {
|
||||
keys.push(...(getAllKeys(children) as string[]));
|
||||
}
|
||||
} else {
|
||||
if (children && children.length) {
|
||||
keys.push(...getChildrenKeys(nodeKey, children));
|
||||
}
|
||||
}
|
||||
}
|
||||
return keys as KeyType[];
|
||||
}
|
||||
|
||||
// Update node
|
||||
function updateNodeByKey(key: string, node: TreeDataItem, list?: TreeDataItem[]) {
|
||||
if (!key) return;
|
||||
const treeData = list || unref(treeDataRef);
|
||||
const { key: keyField, children: childrenField } = unref(getFieldNames);
|
||||
|
||||
if (!childrenField || !keyField) return;
|
||||
|
||||
for (let index = 0; index < treeData.length; index++) {
|
||||
const element: any = treeData[index];
|
||||
const children = element[childrenField];
|
||||
|
||||
if (element[keyField] === key) {
|
||||
treeData[index] = { ...treeData[index], ...node };
|
||||
break;
|
||||
} else if (children && children.length) {
|
||||
updateNodeByKey(key, node, element[childrenField]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Expand the specified level
|
||||
function filterByLevel(level = 1, list?: TreeDataItem[], currentLevel = 1) {
|
||||
if (!level) {
|
||||
return [];
|
||||
}
|
||||
const res: (string | number)[] = [];
|
||||
const data = list || unref(treeDataRef) || [];
|
||||
for (let index = 0; index < data.length; index++) {
|
||||
const item = data[index];
|
||||
|
||||
const { key: keyField, children: childrenField } = unref(getFieldNames);
|
||||
const key = keyField ? item[keyField] : '';
|
||||
const children = childrenField ? item[childrenField] : [];
|
||||
res.push(key);
|
||||
if (children && children.length && currentLevel < level) {
|
||||
currentLevel += 1;
|
||||
res.push(...filterByLevel(level, children, currentLevel));
|
||||
}
|
||||
}
|
||||
return res as string[] | number[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加节点
|
||||
*/
|
||||
function insertNodeByKey({ parentKey = null, node, push = 'push' }: InsertNodeParams) {
|
||||
const treeData: any = cloneDeep(unref(treeDataRef));
|
||||
if (!parentKey) {
|
||||
validateScript(push);
|
||||
treeData[push](node);
|
||||
treeDataRef.value = treeData;
|
||||
return;
|
||||
}
|
||||
const { key: keyField, children: childrenField } = unref(getFieldNames);
|
||||
if (!childrenField || !keyField) return;
|
||||
|
||||
forEach(treeData, (treeItem) => {
|
||||
if (treeItem[keyField] === parentKey) {
|
||||
treeItem[childrenField] = treeItem[childrenField] || [];
|
||||
treeItem[childrenField][push](node);
|
||||
return true;
|
||||
}
|
||||
});
|
||||
treeDataRef.value = treeData;
|
||||
}
|
||||
/**
|
||||
* 批量添加节点
|
||||
*/
|
||||
function insertNodesByKey({ parentKey = null, list, push = 'push' }: InsertNodeParams) {
|
||||
const treeData: any = cloneDeep(unref(treeDataRef));
|
||||
if (!list || list.length < 1) {
|
||||
return;
|
||||
}
|
||||
if (!parentKey) {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
treeData[push](list[i]);
|
||||
}
|
||||
} else {
|
||||
const { key: keyField, children: childrenField } = unref(getFieldNames);
|
||||
if (!childrenField || !keyField) return;
|
||||
|
||||
forEach(treeData, (treeItem) => {
|
||||
if (treeItem[keyField] === parentKey) {
|
||||
treeItem[childrenField] = treeItem[childrenField] || [];
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
treeItem[childrenField][push](list[i]);
|
||||
}
|
||||
treeDataRef.value = treeData;
|
||||
return true;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
// Delete node
|
||||
function deleteNodeByKey(key: string, list?: TreeDataItem[]) {
|
||||
if (!key) return;
|
||||
const treeData = list || unref(treeDataRef);
|
||||
const { key: keyField, children: childrenField } = unref(getFieldNames);
|
||||
if (!childrenField || !keyField) return;
|
||||
|
||||
for (let index = 0; index < treeData.length; index++) {
|
||||
const element: any = treeData[index];
|
||||
const children = element[childrenField];
|
||||
|
||||
if (element[keyField] === key) {
|
||||
treeData.splice(index, 1);
|
||||
break;
|
||||
} else if (children && children.length) {
|
||||
deleteNodeByKey(key, element[childrenField]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Get selected node
|
||||
function getSelectedNode(key: KeyType, list?: TreeItem[], selectedNode?: TreeItem | null) {
|
||||
if (!key && key !== 0) return null;
|
||||
const treeData = list || unref(treeDataRef);
|
||||
treeData.forEach((item) => {
|
||||
if (selectedNode?.key || selectedNode?.key === 0) return selectedNode;
|
||||
if (item.key === key) {
|
||||
selectedNode = item;
|
||||
return;
|
||||
}
|
||||
if (item.children && item.children.length) {
|
||||
selectedNode = getSelectedNode(key, item.children, selectedNode);
|
||||
}
|
||||
});
|
||||
return selectedNode || null;
|
||||
}
|
||||
return {
|
||||
deleteNodeByKey,
|
||||
insertNodeByKey,
|
||||
insertNodesByKey,
|
||||
filterByLevel,
|
||||
updateNodeByKey,
|
||||
getAllKeys,
|
||||
getChildrenKeys,
|
||||
getEnabledKeys,
|
||||
getSelectedNode,
|
||||
};
|
||||
}
|
||||
74
src/components/Tree/style/index.less
Normal file
74
src/components/Tree/style/index.less
Normal file
@ -0,0 +1,74 @@
|
||||
@tree-prefix-cls: ~'@{namespace}-tree';
|
||||
|
||||
.@{tree-prefix-cls} {
|
||||
background-color: @component-background;
|
||||
|
||||
.ant-tree-treenode {
|
||||
align-items: center;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.ant-tree-treenode-selected {
|
||||
background-color: #eef4ff !important;
|
||||
}
|
||||
|
||||
.ant-tree-switcher {
|
||||
align-self: auto;
|
||||
}
|
||||
|
||||
.ant-tree-node-content-wrapper {
|
||||
position: relative;
|
||||
|
||||
&.ant-tree-node-selected {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
.ant-tree-title {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding-right: 10px;
|
||||
|
||||
&:hover {
|
||||
.@{tree-prefix-cls}__action {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
position: absolute;
|
||||
//top: 2px;
|
||||
right: 3px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__action {
|
||||
margin-left: 4px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&-header {
|
||||
border-bottom: 1px solid @border-color-base;
|
||||
}
|
||||
}
|
||||
1
src/components/Tree/style/index.ts
Normal file
1
src/components/Tree/style/index.ts
Normal file
@ -0,0 +1 @@
|
||||
import './index.less';
|
||||
Reference in New Issue
Block a user