|
@@ -34,7 +34,7 @@
|
|
|
|
|
|
|
|
<div class="flex justify-between items-end mb-4">
|
|
<div class="flex justify-between items-end mb-4">
|
|
|
<!-- Tabs -->
|
|
<!-- Tabs -->
|
|
|
- <div class="flex space-x-6 border-b border-gray-200 flex-1 mr-4">
|
|
|
|
|
|
|
+ <div class="flex space-x-6 border-b border-gray-200 w-64 mr-4">
|
|
|
<div
|
|
<div
|
|
|
class="cursor-pointer pb-2 px-2 whitespace-nowrap"
|
|
class="cursor-pointer pb-2 px-2 whitespace-nowrap"
|
|
|
:class="activeTab === 'all' ? 'text-primary border-b-2 border-primary font-medium' : 'text-gray-600'"
|
|
:class="activeTab === 'all' ? 'text-primary border-b-2 border-primary font-medium' : 'text-gray-600'"
|
|
@@ -53,21 +53,14 @@
|
|
|
v-model:current-page="currentPage"
|
|
v-model:current-page="currentPage"
|
|
|
v-model:page-size="pageSize"
|
|
v-model:page-size="pageSize"
|
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
|
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
:total="total"
|
|
:total="total"
|
|
|
@size-change="handleSizeChange"
|
|
@size-change="handleSizeChange"
|
|
|
@current-change="handleCurrentChange"
|
|
@current-change="handleCurrentChange"
|
|
|
class="shrink-0"
|
|
class="shrink-0"
|
|
|
/>
|
|
/>
|
|
|
- <el-pagination
|
|
|
|
|
- v-else
|
|
|
|
|
- v-model:current-page="selectedCurrentPage"
|
|
|
|
|
- v-model:page-size="selectedPageSize"
|
|
|
|
|
- :page-sizes="[10, 20, 50, 100]"
|
|
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
|
|
- :total="selectedCount"
|
|
|
|
|
- class="shrink-0"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ <!-- Empty div to maintain flex-between layout when pagination is hidden -->
|
|
|
|
|
+ <div v-else class="shrink-0"></div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Table for All -->
|
|
<!-- Table for All -->
|
|
@@ -130,14 +123,14 @@
|
|
|
<!-- Table for Selected -->
|
|
<!-- Table for Selected -->
|
|
|
<el-table
|
|
<el-table
|
|
|
v-show="activeTab === 'selected'"
|
|
v-show="activeTab === 'selected'"
|
|
|
- :data="selectedTableData"
|
|
|
|
|
|
|
+ :data="currentSelections"
|
|
|
row-key="isbn"
|
|
row-key="isbn"
|
|
|
border
|
|
border
|
|
|
height="400px"
|
|
height="400px"
|
|
|
>
|
|
>
|
|
|
<el-table-column width="55" align="center">
|
|
<el-table-column width="55" align="center">
|
|
|
<template #header>
|
|
<template #header>
|
|
|
- <el-checkbox :model-value="true" disabled />
|
|
|
|
|
|
|
+ <el-checkbox :model-value="true" @change="handleClearAllSelections" />
|
|
|
</template>
|
|
</template>
|
|
|
<template #default="{ row }">
|
|
<template #default="{ row }">
|
|
|
<el-checkbox :model-value="true" @change="() => handleRemoveSelection(row)" />
|
|
<el-checkbox :model-value="true" @change="() => handleRemoveSelection(row)" />
|
|
@@ -231,18 +224,8 @@
|
|
|
const pageSize = ref(10);
|
|
const pageSize = ref(10);
|
|
|
const loading = ref(false);
|
|
const loading = ref(false);
|
|
|
|
|
|
|
|
- // Pagination for 'selected'
|
|
|
|
|
- const selectedCurrentPage = ref(1);
|
|
|
|
|
- const selectedPageSize = ref(10);
|
|
|
|
|
- const selectedTableData = computed(() => {
|
|
|
|
|
- const start = (selectedCurrentPage.value - 1) * selectedPageSize.value;
|
|
|
|
|
- const end = start + selectedPageSize.value;
|
|
|
|
|
- return currentSelections.value.slice(start, end);
|
|
|
|
|
- });
|
|
|
|
|
-
|
|
|
|
|
const handleSearch = async () => {
|
|
const handleSearch = async () => {
|
|
|
if (activeTab.value === 'selected') {
|
|
if (activeTab.value === 'selected') {
|
|
|
- selectedCurrentPage.value = 1;
|
|
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -250,10 +233,12 @@
|
|
|
try {
|
|
try {
|
|
|
const params = {
|
|
const params = {
|
|
|
...searchForm,
|
|
...searchForm,
|
|
|
- page: currentPage.value,
|
|
|
|
|
- limit: pageSize.value
|
|
|
|
|
|
|
+ pageNum: currentPage.value,
|
|
|
|
|
+ pageSize: pageSize.value
|
|
|
};
|
|
};
|
|
|
|
|
+ console.log('Search params:', params);
|
|
|
const res = await request.get('/book/bookInfo/list', { params });
|
|
const res = await request.get('/book/bookInfo/list', { params });
|
|
|
|
|
+ console.log('API response:', res);
|
|
|
if (res.data.code === 200) {
|
|
if (res.data.code === 200) {
|
|
|
const data = res.data.data || res.data;
|
|
const data = res.data.data || res.data;
|
|
|
const rows = data.rows || data;
|
|
const rows = data.rows || data;
|
|
@@ -272,20 +257,24 @@
|
|
|
|
|
|
|
|
rows.forEach(updateRowDesc);
|
|
rows.forEach(updateRowDesc);
|
|
|
tableData.value = rows;
|
|
tableData.value = rows;
|
|
|
- total.value = data.count || rows.length;
|
|
|
|
|
|
|
+ total.value = data.total || rows.length;
|
|
|
|
|
+ console.log('Updated tableData:', tableData.value.length, 'rows, total:', total.value);
|
|
|
|
|
|
|
|
// Sync selections to table
|
|
// Sync selections to table
|
|
|
nextTick(() => {
|
|
nextTick(() => {
|
|
|
- rows.forEach(row => {
|
|
|
|
|
- const isSelected = currentSelections.value.some(s => s.isbn === row.isbn);
|
|
|
|
|
- if (isSelected && tableRef.value) {
|
|
|
|
|
- tableRef.value.toggleRowSelection(row, true);
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ if (tableRef.value) {
|
|
|
|
|
+ tableRef.value.clearSelection();
|
|
|
|
|
+ rows.forEach(row => {
|
|
|
|
|
+ const isSelected = currentSelections.value.some(s => s.isbn === row.isbn);
|
|
|
|
|
+ if (isSelected) {
|
|
|
|
|
+ tableRef.value.toggleRowSelection(row, true);
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
} catch (e) {
|
|
} catch (e) {
|
|
|
- console.error(e);
|
|
|
|
|
|
|
+ console.error('Search error:', e);
|
|
|
} finally {
|
|
} finally {
|
|
|
loading.value = false;
|
|
loading.value = false;
|
|
|
}
|
|
}
|
|
@@ -314,7 +303,6 @@
|
|
|
activeTab.value = 'all';
|
|
activeTab.value = 'all';
|
|
|
currentSelections.value = [];
|
|
currentSelections.value = [];
|
|
|
currentPage.value = 1;
|
|
currentPage.value = 1;
|
|
|
- selectedCurrentPage.value = 1;
|
|
|
|
|
if (tableRef.value) {
|
|
if (tableRef.value) {
|
|
|
tableRef.value.clearSelection();
|
|
tableRef.value.clearSelection();
|
|
|
}
|
|
}
|
|
@@ -322,24 +310,30 @@
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
const handleSelectionChange = (rows) => {
|
|
const handleSelectionChange = (rows) => {
|
|
|
- // Need to merge cross-page selections
|
|
|
|
|
- // Add new rows
|
|
|
|
|
|
|
+ // Get all selected rows from the table (only current page)
|
|
|
|
|
+ const currentPageSelectedIsbns = new Set(rows.map(row => row.isbn));
|
|
|
|
|
+
|
|
|
|
|
+ // Remove rows that are no longer selected on current page
|
|
|
|
|
+ currentSelections.value = currentSelections.value.filter(s =>
|
|
|
|
|
+ currentPageSelectedIsbns.has(s.isbn) ||
|
|
|
|
|
+ !tableData.value.some(r => r.isbn === s.isbn)
|
|
|
|
|
+ );
|
|
|
|
|
+
|
|
|
|
|
+ // Add newly selected rows from current page
|
|
|
rows.forEach(row => {
|
|
rows.forEach(row => {
|
|
|
if (!currentSelections.value.some(s => s.isbn === row.isbn)) {
|
|
if (!currentSelections.value.some(s => s.isbn === row.isbn)) {
|
|
|
currentSelections.value.push({ ...row });
|
|
currentSelections.value.push({ ...row });
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
-
|
|
|
|
|
- // Remove unselected rows from current page
|
|
|
|
|
- tableData.value.forEach(row => {
|
|
|
|
|
- const isSelectedNow = rows.some(r => r.isbn === row.isbn);
|
|
|
|
|
- if (!isSelectedNow) {
|
|
|
|
|
- const idx = currentSelections.value.findIndex(s => s.isbn === row.isbn);
|
|
|
|
|
- if (idx !== -1) {
|
|
|
|
|
- currentSelections.value.splice(idx, 1);
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const handleClearAllSelections = (val) => {
|
|
|
|
|
+ if (!val) { // User clicked to uncheck
|
|
|
|
|
+ currentSelections.value = [];
|
|
|
|
|
+ if (tableRef.value) {
|
|
|
|
|
+ tableRef.value.clearSelection();
|
|
|
}
|
|
}
|
|
|
- });
|
|
|
|
|
|
|
+ }
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
const handleRemoveSelection = (row) => {
|
|
const handleRemoveSelection = (row) => {
|
|
@@ -354,11 +348,6 @@
|
|
|
tableRef.value.toggleRowSelection(tableRow, false);
|
|
tableRef.value.toggleRowSelection(tableRow, false);
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- // Adjust pagination if needed
|
|
|
|
|
- const maxPage = Math.ceil(currentSelections.value.length / selectedPageSize.value) || 1;
|
|
|
|
|
- if (selectedCurrentPage.value > maxPage) {
|
|
|
|
|
- selectedCurrentPage.value = maxPage;
|
|
|
|
|
- }
|
|
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
const updateSelectionDesc = (row, val) => {
|
|
const updateSelectionDesc = (row, val) => {
|