feat: 新增 vxe table 工具栏二次封装,提供给 vxe 原生列表使用
parent
c200490585
commit
5c4b95b01e
|
@ -0,0 +1 @@
|
||||||
|
export { default as TableToolbar } from './table-toolbar.vue';
|
|
@ -0,0 +1,54 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { VxeToolbarInstance } from 'vxe-table';
|
||||||
|
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
import { useContentMaximize, useRefresh } from '@vben/hooks';
|
||||||
|
import { Fullscreen, RefreshCw, Search } from '@vben/icons';
|
||||||
|
|
||||||
|
import { Button } from 'ant-design-vue';
|
||||||
|
import { VxeToolbar } from 'vxe-table';
|
||||||
|
|
||||||
|
/** 列表工具栏封装 */
|
||||||
|
defineOptions({ name: 'TableToolbar' });
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
hiddenSearch: boolean;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const emits = defineEmits(['update:hiddenSearch']);
|
||||||
|
|
||||||
|
const toolbarRef = ref<VxeToolbarInstance>();
|
||||||
|
const { toggleMaximizeAndTabbarHidden } = useContentMaximize();
|
||||||
|
const { refresh } = useRefresh();
|
||||||
|
|
||||||
|
/** 隐藏搜索栏 */
|
||||||
|
function onHiddenSearchBar() {
|
||||||
|
emits('update:hiddenSearch', !props.hiddenSearch);
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
getToolbarRef: () => toolbarRef.value,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<VxeToolbar ref="toolbarRef" custom>
|
||||||
|
<template #toolPrefix>
|
||||||
|
<slot></slot>
|
||||||
|
<Button class="ml-2 font-[8px]" shape="circle" @click="onHiddenSearchBar">
|
||||||
|
<Search :size="15" />
|
||||||
|
</Button>
|
||||||
|
<Button class="ml-2 font-[8px]" shape="circle" @click="refresh">
|
||||||
|
<RefreshCw :size="15" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
class="ml-2 font-[8px]"
|
||||||
|
shape="circle"
|
||||||
|
@click="toggleMaximizeAndTabbarHidden"
|
||||||
|
>
|
||||||
|
<Fullscreen :size="15" />
|
||||||
|
</Button>
|
||||||
|
</template>
|
||||||
|
</VxeToolbar>
|
||||||
|
</template>
|
|
@ -55,10 +55,12 @@ export {
|
||||||
Pin,
|
Pin,
|
||||||
PinOff,
|
PinOff,
|
||||||
Plus,
|
Plus,
|
||||||
|
RefreshCw,
|
||||||
RotateCw,
|
RotateCw,
|
||||||
Search,
|
Search,
|
||||||
SearchX,
|
SearchX,
|
||||||
Settings,
|
Settings,
|
||||||
|
ShieldQuestion,
|
||||||
Shrink,
|
Shrink,
|
||||||
Square,
|
Square,
|
||||||
SquareCheckBig,
|
SquareCheckBig,
|
||||||
|
@ -69,5 +71,4 @@ export {
|
||||||
Upload,
|
Upload,
|
||||||
UserRoundPen,
|
UserRoundPen,
|
||||||
X,
|
X,
|
||||||
RefreshCw,
|
|
||||||
} from 'lucide-vue-next';
|
} from 'lucide-vue-next';
|
||||||
|
|
|
@ -17,8 +17,25 @@ export function useContentMaximize() {
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function toggleMaximizeAndTabbarHidden() {
|
||||||
|
const isMaximize = contentIsMaximize.value;
|
||||||
|
updatePreferences({
|
||||||
|
header: {
|
||||||
|
hidden: !isMaximize,
|
||||||
|
},
|
||||||
|
sidebar: {
|
||||||
|
hidden: !isMaximize,
|
||||||
|
},
|
||||||
|
tabbar: {
|
||||||
|
enable: isMaximize,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
contentIsMaximize,
|
contentIsMaximize,
|
||||||
toggleMaximize,
|
toggleMaximize,
|
||||||
|
toggleMaximizeAndTabbarHidden,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue