Skip to content

Commit f8ee1df

Browse files
committed
feat(FileTable): 添加多选模式切换功能
添加多选按钮用于切换表格的选择模式,当退出多选模式时清空已选项
1 parent 302175e commit f8ee1df

File tree

1 file changed

+26
-3
lines changed

1 file changed

+26
-3
lines changed

web/src/components/FileTable.vue

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,14 @@
3333
title="刷新"
3434
class="panel-action-btn"
3535
/>
36+
<a-button
37+
type="text"
38+
@click="toggleSelectionMode"
39+
:icon="h(CheckSquare)"
40+
title="多选"
41+
class="panel-action-btn"
42+
:class="{ 'active': isSelectionMode }"
43+
/>
3644
<!-- <a-button
3745
@click="toggleAutoRefresh"
3846
size="small"
@@ -130,11 +138,11 @@
130138
:pagination="paginationCompact"
131139
v-model:expandedRowKeys="expandedRowKeys"
132140
:custom-row="customRow"
133-
:row-selection="{
141+
:row-selection="isSelectionMode ? {
134142
selectedRowKeys: selectedRowKeys,
135143
onChange: onSelectChange,
136144
getCheckboxProps: getCheckboxProps
137-
}"
145+
} : null"
138146
:locale="{
139147
emptyText: emptyText
140148
}">
@@ -230,6 +238,7 @@ import {
230238
ChevronLast,
231239
Ellipsis,
232240
FolderPlus,
241+
CheckSquare,
233242
} from 'lucide-vue-next';
234243
235244
const store = useDatabaseStore();
@@ -259,6 +268,8 @@ const selectedRowKeys = computed({
259268
set: (keys) => store.selectedRowKeys = keys,
260269
});
261270
271+
const isSelectionMode = ref(false);
272+
262273
const expandedRowKeys = ref([]);
263274
264275
// 新建文件夹相关
@@ -288,6 +299,13 @@ const toggleExpand = (record) => {
288299
}
289300
};
290301
302+
const toggleSelectionMode = () => {
303+
isSelectionMode.value = !isSelectionMode.value;
304+
if (!isSelectionMode.value) {
305+
selectedRowKeys.value = [];
306+
}
307+
};
308+
291309
const handleCreateFolder = async () => {
292310
if (!newFolderName.value.trim()) {
293311
message.warning('请输入文件夹名称');
@@ -863,7 +881,7 @@ import ChunkParamsConfig from '@/components/ChunkParamsConfig.vue';
863881
.panel-actions {
864882
display: flex;
865883
align-items: center;
866-
gap: 6px;
884+
gap: 0px;
867885
868886
.action-searcher {
869887
width: 120px;
@@ -1030,6 +1048,11 @@ import ChunkParamsConfig from '@/components/ChunkParamsConfig.vue';
10301048
/* border: 1px solid var(--main-100); */
10311049
}
10321050
1051+
.panel-action-btn.active {
1052+
color: var(--main-color);
1053+
background-color: var(--main-10);
1054+
}
1055+
10331056
.action-trigger-btn {
10341057
padding: 0;
10351058
width: 24px;

0 commit comments

Comments
 (0)