<template>
|
<div class="flex px-2 py-1.5 items-center border-b-1">
|
<BasicTitle :helpMessage="helpMessage" v-if="title">{{ title }}</BasicTitle>
|
|
<div class="flex flex-1 justify-end items-center cursor-pointer" v-if="search || toolbar">
|
<div class="mr-1 w-2/3" v-if="search">
|
<InputSearch :placeholder="t('common.searchText')" size="small" @change="handleSearch" />
|
</div>
|
<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">
|
import type { PropType } from 'vue';
|
import { defineComponent, ref } from 'vue';
|
|
import { Dropdown, Menu, Input } from 'ant-design-vue';
|
import { Icon } from '/@/components/Icon';
|
import { BasicTitle } from '/@/components/Basic';
|
|
import { propTypes } from '/@/utils/propTypes';
|
|
import { useI18n } from '/@/hooks/web/useI18n';
|
import { useDebounce } from '/@/hooks/core/useDebounce';
|
|
import { ToolbarEnum } from './enum';
|
|
interface MenuInfo {
|
key: ToolbarEnum;
|
}
|
export default defineComponent({
|
name: 'BasicTreeHeader',
|
components: {
|
BasicTitle,
|
Icon,
|
Dropdown,
|
Menu,
|
MenuItem: Menu.Item,
|
MenuDivider: Menu.Divider,
|
InputSearch: Input.Search,
|
},
|
props: {
|
helpMessage: {
|
type: [String, Array] as PropType<string | string[]>,
|
default: '',
|
},
|
title: propTypes.string,
|
toolbar: propTypes.bool,
|
search: propTypes.bool,
|
checkAll: propTypes.func,
|
expandAll: propTypes.func,
|
},
|
emits: ['strictly-change', 'search'],
|
setup(props, { emit }) {
|
const { t } = useI18n();
|
const toolbarList = ref([
|
{ label: t('component.tree.selectAll'), value: ToolbarEnum.SELECT_ALL },
|
{ label: t('component.tree.unSelectAll'), value: ToolbarEnum.UN_SELECT_ALL, divider: true },
|
{ label: t('component.tree.expandAll'), value: ToolbarEnum.EXPAND_ALL },
|
{ label: t('component.tree.unExpandAll'), value: ToolbarEnum.UN_EXPAND_ALL, divider: true },
|
{ label: t('component.tree.checkStrictly'), value: ToolbarEnum.CHECK_STRICTLY },
|
{ label: t('component.tree.checkUnStrictly'), value: ToolbarEnum.CHECK_UN_STRICTLY },
|
]);
|
|
function handleMenuClick(e: MenuInfo) {
|
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;
|
}
|
}
|
|
function emitChange(value?: string): void {
|
emit('search', value);
|
}
|
const [debounceEmitChange] = useDebounce(emitChange, 200);
|
|
function handleSearch(e: ChangeEvent): void {
|
debounceEmitChange(e.target.value);
|
}
|
|
return { t, toolbarList, handleMenuClick, handleSearch };
|
},
|
});
|
</script>
|
