Forráskód Böngészése

fix(salesOps): 修复商品选择对话框的分页和选择逻辑问题

修复分页组件布局问题,移除选中商品的分页功能
优化商品选择逻辑,修复跨页选择同步问题
添加清空所有选择的功能
ylong 1 hete
szülő
commit
52c455ed33
1 módosított fájl, 40 hozzáadás és 51 törlés
  1. 40 51
      src/views/salesOps/components/GoodsSelectDialog.vue

+ 40 - 51
src/views/salesOps/components/GoodsSelectDialog.vue

@@ -34,7 +34,7 @@
 
         <div class="flex justify-between items-end mb-4">
             <!-- 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 
                     class="cursor-pointer pb-2 px-2 whitespace-nowrap"
                     :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:page-size="pageSize"
                 :page-sizes="[10, 20, 50, 100]"
-                layout="total, sizes, prev, pager, next, jumper"
+                layout="total, prev, pager, next, jumper"
                 :total="total"
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
                 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>
 
         <!-- Table for All -->
@@ -130,14 +123,14 @@
         <!-- Table for Selected -->
         <el-table
             v-show="activeTab === 'selected'"
-            :data="selectedTableData"
+            :data="currentSelections"
             row-key="isbn"
             border
             height="400px"
         >
             <el-table-column width="55" align="center">
                 <template #header>
-                    <el-checkbox :model-value="true" disabled />
+                    <el-checkbox :model-value="true" @change="handleClearAllSelections" />
                 </template>
                 <template #default="{ row }">
                     <el-checkbox :model-value="true" @change="() => handleRemoveSelection(row)" />
@@ -231,18 +224,8 @@
     const pageSize = ref(10);
     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 () => {
         if (activeTab.value === 'selected') {
-            selectedCurrentPage.value = 1;
             return;
         }
         
@@ -250,10 +233,12 @@
         try {
             const params = {
                 ...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 });
+            console.log('API response:', res);
             if (res.data.code === 200) {
                 const data = res.data.data || res.data;
                 const rows = data.rows || data;
@@ -272,20 +257,24 @@
 
                 rows.forEach(updateRowDesc);
                 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
                 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) {
-            console.error(e);
+            console.error('Search error:', e);
         } finally {
             loading.value = false;
         }
@@ -314,7 +303,6 @@
         activeTab.value = 'all';
         currentSelections.value = [];
         currentPage.value = 1;
-        selectedCurrentPage.value = 1;
         if (tableRef.value) {
             tableRef.value.clearSelection();
         }
@@ -322,24 +310,30 @@
     };
 
     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 => {
             if (!currentSelections.value.some(s => s.isbn === row.isbn)) {
                 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) => {
@@ -354,11 +348,6 @@
                 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) => {