| 提交 | 用户 | age | ||
| cd8e92 | 1 | <template> |
| V | 2 | <div class="flex px-2 py-1.5 items-center border-b-1"> |
| 6bb19f | 3 | <slot name="headerTitle" v-if="$slots.headerTitle"></slot> |
| 8a1406 | 4 | <BasicTitle :helpMessage="helpMessage" v-if="!$slots.headerTitle && title"> |
| V | 5 | {{ title }} |
| 6 | </BasicTitle> | |
| cd8e92 | 7 | |
| V | 8 | <div class="flex flex-1 justify-end items-center cursor-pointer" v-if="search || toolbar"> |
| 9 | <div class="mr-1 w-2/3" v-if="search"> | |
| 8a1406 | 10 | <InputSearch |
| V | 11 | :placeholder="t('common.searchText')" |
| 12 | size="small" | |
| 13 | allowClear | |
| 14 | @change="handleSearch" | |
| 15 | /> | |
| cd8e92 | 16 | </div> |
| V | 17 | <Dropdown @click.prevent v-if="toolbar"> |
| 18 | <Icon icon="ion:ellipsis-vertical" /> | |
| 19 | <template #overlay> | |
| 20 | <Menu @click="handleMenuClick"> | |
| 4628d9 | 21 | <template v-for="item in toolbarList" :key="item.value"> |
| V | 22 | <MenuItem v-bind="{ key: item.value }"> |
| 23 | {{ item.label }} | |
| 24 | </MenuItem> | |
| 25 | <MenuDivider v-if="item.divider" /> | |
| 26 | </template> | |
| cd8e92 | 27 | </Menu> |
| V | 28 | </template> |
| 29 | </Dropdown> | |
| 30 | </div> | |
| 31 | </div> | |
| 32 | </template> | |
| 33 | <script lang="ts"> | |
| 34 | import type { PropType } from 'vue'; | |
| 1418dc | 35 | import { defineComponent, computed } from 'vue'; |
| cd8e92 | 36 | |
| ee5fb2 | 37 | import { Dropdown, Menu, Input } from 'ant-design-vue'; |
| cd8e92 | 38 | import { Icon } from '/@/components/Icon'; |
| V | 39 | import { BasicTitle } from '/@/components/Basic'; |
| 40 | ||
| 41 | import { propTypes } from '/@/utils/propTypes'; | |
| 42 | ||
| 43 | import { useI18n } from '/@/hooks/web/useI18n'; | |
| 44 | import { useDebounce } from '/@/hooks/core/useDebounce'; | |
| 45 | ||
| 46 | import { ToolbarEnum } from './enum'; | |
| 47 | ||
| 48 | interface MenuInfo { | |
| 49 | key: ToolbarEnum; | |
| 50 | } | |
| 51 | export default defineComponent({ | |
| 52 | name: 'BasicTreeHeader', | |
| 53 | components: { | |
| 54 | BasicTitle, | |
| 55 | Icon, | |
| 56 | Dropdown, | |
| 57 | Menu, | |
| 58 | MenuItem: Menu.Item, | |
| 4628d9 | 59 | MenuDivider: Menu.Divider, |
| cd8e92 | 60 | InputSearch: Input.Search, |
| V | 61 | }, |
| 62 | props: { | |
| 63 | helpMessage: { | |
| 64 | type: [String, Array] as PropType<string | string[]>, | |
| 65 | default: '', | |
| 66 | }, | |
| 67 | title: propTypes.string, | |
| 68 | toolbar: propTypes.bool, | |
| 7156e4 | 69 | checkable: propTypes.bool, |
| cd8e92 | 70 | search: propTypes.bool, |
| V | 71 | checkAll: propTypes.func, |
| 72 | expandAll: propTypes.func, | |
| 73 | }, | |
| 74 | emits: ['strictly-change', 'search'], | |
| 75 | setup(props, { emit }) { | |
| 76 | const { t } = useI18n(); | |
| 7156e4 | 77 | |
| V | 78 | const toolbarList = computed(() => { |
| 79 | const { checkable } = props; | |
| 80 | const defaultToolbarList = [ | |
| 81 | { label: t('component.tree.expandAll'), value: ToolbarEnum.EXPAND_ALL }, | |
| 82 | { | |
| 83 | label: t('component.tree.unExpandAll'), | |
| 84 | value: ToolbarEnum.UN_EXPAND_ALL, | |
| 85 | divider: checkable, | |
| 86 | }, | |
| 87 | ]; | |
| 88 | ||
| 89 | return checkable | |
| 90 | ? [ | |
| 91 | { label: t('component.tree.selectAll'), value: ToolbarEnum.SELECT_ALL }, | |
| 92 | { | |
| 93 | label: t('component.tree.unSelectAll'), | |
| 94 | value: ToolbarEnum.UN_SELECT_ALL, | |
| 95 | divider: checkable, | |
| 96 | }, | |
| 97 | ...defaultToolbarList, | |
| 98 | { label: t('component.tree.checkStrictly'), value: ToolbarEnum.CHECK_STRICTLY }, | |
| c2635f | 99 | { label: t('component.tree.checkUnStrictly'), value: ToolbarEnum.CHECK_UN_STRICTLY }, |
| 7156e4 | 100 | ] |
| V | 101 | : defaultToolbarList; |
| 102 | }); | |
| cd8e92 | 103 | |
| V | 104 | function handleMenuClick(e: MenuInfo) { |
| 105 | const { key } = e; | |
| 106 | switch (key) { | |
| 107 | case ToolbarEnum.SELECT_ALL: | |
| 108 | props.checkAll?.(true); | |
| 109 | break; | |
| 110 | case ToolbarEnum.UN_SELECT_ALL: | |
| 111 | props.checkAll?.(false); | |
| 112 | break; | |
| 113 | case ToolbarEnum.EXPAND_ALL: | |
| 114 | props.expandAll?.(true); | |
| 115 | break; | |
| 116 | case ToolbarEnum.UN_EXPAND_ALL: | |
| 117 | props.expandAll?.(false); | |
| 118 | break; | |
| 119 | case ToolbarEnum.CHECK_STRICTLY: | |
| 120 | emit('strictly-change', false); | |
| 121 | break; | |
| 122 | case ToolbarEnum.CHECK_UN_STRICTLY: | |
| 123 | emit('strictly-change', true); | |
| 124 | break; | |
| 125 | } | |
| 126 | } | |
| 127 | ||
| 128 | function emitChange(value?: string): void { | |
| 129 | emit('search', value); | |
| 130 | } | |
| 131 | const [debounceEmitChange] = useDebounce(emitChange, 200); | |
| 132 | ||
| 133 | function handleSearch(e: ChangeEvent): void { | |
| 134 | debounceEmitChange(e.target.value); | |
| 135 | } | |
| 136 | ||
| 137 | return { t, toolbarList, handleMenuClick, handleSearch }; | |
| 138 | }, | |
| 139 | }); | |
| 140 | </script> | |
