feat(FileTable): 添加多选模式切换功能
添加多选按钮用于切换表格的选择模式,当退出多选模式时清空已选项
This commit is contained in:
parent
302175e0b0
commit
f8ee1df96c
@ -33,6 +33,14 @@
|
|||||||
title="刷新"
|
title="刷新"
|
||||||
class="panel-action-btn"
|
class="panel-action-btn"
|
||||||
/>
|
/>
|
||||||
|
<a-button
|
||||||
|
type="text"
|
||||||
|
@click="toggleSelectionMode"
|
||||||
|
:icon="h(CheckSquare)"
|
||||||
|
title="多选"
|
||||||
|
class="panel-action-btn"
|
||||||
|
:class="{ 'active': isSelectionMode }"
|
||||||
|
/>
|
||||||
<!-- <a-button
|
<!-- <a-button
|
||||||
@click="toggleAutoRefresh"
|
@click="toggleAutoRefresh"
|
||||||
size="small"
|
size="small"
|
||||||
@ -130,11 +138,11 @@
|
|||||||
:pagination="paginationCompact"
|
:pagination="paginationCompact"
|
||||||
v-model:expandedRowKeys="expandedRowKeys"
|
v-model:expandedRowKeys="expandedRowKeys"
|
||||||
:custom-row="customRow"
|
:custom-row="customRow"
|
||||||
:row-selection="{
|
:row-selection="isSelectionMode ? {
|
||||||
selectedRowKeys: selectedRowKeys,
|
selectedRowKeys: selectedRowKeys,
|
||||||
onChange: onSelectChange,
|
onChange: onSelectChange,
|
||||||
getCheckboxProps: getCheckboxProps
|
getCheckboxProps: getCheckboxProps
|
||||||
}"
|
} : null"
|
||||||
:locale="{
|
:locale="{
|
||||||
emptyText: emptyText
|
emptyText: emptyText
|
||||||
}">
|
}">
|
||||||
@ -230,6 +238,7 @@ import {
|
|||||||
ChevronLast,
|
ChevronLast,
|
||||||
Ellipsis,
|
Ellipsis,
|
||||||
FolderPlus,
|
FolderPlus,
|
||||||
|
CheckSquare,
|
||||||
} from 'lucide-vue-next';
|
} from 'lucide-vue-next';
|
||||||
|
|
||||||
const store = useDatabaseStore();
|
const store = useDatabaseStore();
|
||||||
@ -259,6 +268,8 @@ const selectedRowKeys = computed({
|
|||||||
set: (keys) => store.selectedRowKeys = keys,
|
set: (keys) => store.selectedRowKeys = keys,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const isSelectionMode = ref(false);
|
||||||
|
|
||||||
const expandedRowKeys = ref([]);
|
const expandedRowKeys = ref([]);
|
||||||
|
|
||||||
// 新建文件夹相关
|
// 新建文件夹相关
|
||||||
@ -288,6 +299,13 @@ const toggleExpand = (record) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const toggleSelectionMode = () => {
|
||||||
|
isSelectionMode.value = !isSelectionMode.value;
|
||||||
|
if (!isSelectionMode.value) {
|
||||||
|
selectedRowKeys.value = [];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const handleCreateFolder = async () => {
|
const handleCreateFolder = async () => {
|
||||||
if (!newFolderName.value.trim()) {
|
if (!newFolderName.value.trim()) {
|
||||||
message.warning('请输入文件夹名称');
|
message.warning('请输入文件夹名称');
|
||||||
@ -863,7 +881,7 @@ import ChunkParamsConfig from '@/components/ChunkParamsConfig.vue';
|
|||||||
.panel-actions {
|
.panel-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 6px;
|
gap: 0px;
|
||||||
|
|
||||||
.action-searcher {
|
.action-searcher {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
@ -1030,6 +1048,11 @@ import ChunkParamsConfig from '@/components/ChunkParamsConfig.vue';
|
|||||||
/* border: 1px solid var(--main-100); */
|
/* border: 1px solid var(--main-100); */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.panel-action-btn.active {
|
||||||
|
color: var(--main-color);
|
||||||
|
background-color: var(--main-10);
|
||||||
|
}
|
||||||
|
|
||||||
.action-trigger-btn {
|
.action-trigger-btn {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user