Przeglądaj źródła

feat(photography): 添加分页功能并优化界面布局

- 在拍照记录页面添加 el-pagination 组件实现分页功能
- 添加 pageSize、currentPage、totalPages 响应式数据
- 更新 getPhotoRecords 方法支持分页参数传递
- 修改历史记录区域高度为 min-height 以优化布局
- 注释掉未开发的自定义详情页模板功能入口
- 添加分页容器样式以居中显示分页控件
panqiuyao 9 godzin temu
rodzic
commit
d4ed2b8e70

+ 2 - 4
frontend/src/views/Photography/detail.vue

@@ -65,7 +65,7 @@
         </div>
 
         <!-- 未开发的功能 -->
-        <div class="service-tab " title="新增自定义详情页模板" @click="addCustomTemplate"
+<!--        <div class="service-tab " title="新增自定义详情页模板" @click="addCustomTemplate"
              v-log="{ describe: { action: '点击新增自定义详情页模板', service: '新增自定义详情页模板' } }">
           <div class="tab-content">
             <div class="tab-img flex">
@@ -73,9 +73,8 @@
             </div>
             <span class="tab-name">新增自定义详情页模板</span>
           </div>
-        </div>
+        </div>-->
 
-<!--
         <div class="service-tab disabled" title="功能开发中">
           <div class="tab-content">
             <div class="tab-img flex">
@@ -84,7 +83,6 @@
             <span class="tab-name">详情页模板自定义</span>
           </div>
         </div>
--->
 
         <div class="service-tab external-tool" title="白底图批量导出" @click="handleWhiteBgExportClick"
           v-log="{ describe: { action: '点击白底图批量导出', service: '白底图批量导出' } }">

+ 25 - 6
frontend/src/views/Photography/mixin/usePhotography.ts

@@ -17,6 +17,10 @@ export default function usePhotography() {
     const loading = ref(false)
     const runLoading = ref(false)
     const takePictureLoading = ref(false)
+    // pagination
+    const pageSize = ref(1)
+    const currentPage = ref(1)
+    const totalPages = ref(1)
     const goodsList = ref([])
     const goods_art_no_tpl = ref('')
     const goods_art_no = ref('')
@@ -95,14 +99,20 @@ export default function usePhotography() {
      * 获取拍照记录。
      * @param params - 可选参数,用于分页或其他筛选条件。
      */
-    async function getPhotoRecords(params?: {}) {
+    async function getPhotoRecords(params?: { page?: number; size?: number } ) {
       if (loading.value) return;
       loading.value = true;
-      console.log('params' , params)
+      const page = params?.page ?? currentPage.value ?? 1
+      const size = params?.size ?? pageSize.value ?? 5
+      console.log('params' , {
+        ...params,
+        page,
+        size,
+      })
       clientStore.ipc.send(icpList.takePhoto.getPhotoRecords, {
         ...params,
-        page: 1,
-        size: 100,
+        page,
+        size,
       });
       clientStore.ipc.on(icpList.takePhoto.getPhotoRecords, (event, result) => {
 
@@ -111,9 +121,15 @@ export default function usePhotography() {
 
           clientStore.ipc.removeAllListeners(icpList.takePhoto.getPhotoRecords);
 
-          console.log('getPhotoRecords  print_time:' + new Date().toLocaleString())
-          console.log('getPhotoRecords  print_time:' + JSON.stringify(result.data.list))
+          //console.log('getPhotoRecords  print_time:' + new Date().toLocaleString())
+          // console.log('getPhotoRecords  print_time:' + JSON.stringify(result.data.list))
+          console.log(result.data)
           goodsList.value = result.data.list
+          // update pagination info if provided by API
+          if (result.data) {
+            currentPage.value = result.data.current_page || page
+            totalPages.value = result.data.total_pages || 1
+          }
           if (isDelGoodsGetList.value) {
             isDelGoodsGetList.value = false;
             return;
@@ -835,6 +851,9 @@ export default function usePhotography() {
       runLoading,
       takePictureLoading,
       goodsList,
+      pageSize,
+      currentPage,
+      totalPages,
       goods_art_no_tpl,
       goods_art_no,
       runAction,

+ 11 - 2
frontend/src/views/Photography/processImage.vue

@@ -99,6 +99,13 @@
               </span>
             </div>
             <div class="footer-right">
+              <el-pagination
+                :page-count="totalPages"
+                :current-page="currentPage"
+                @current-change="(page) => getPhotoRecords({ page })"
+                layout="prev, pager, next"
+                :page-size="pageSize"
+              />
               <el-button
                 :disabled="selectedGoods.size === 0 || runLoading || takePictureLoading"
                 @click="deleteSelected"
@@ -152,6 +159,9 @@ const {
   onGenerateCLick,
   initEventListeners,
   cleanupEventListeners,
+  pageSize,
+  currentPage,
+  totalPages,
 } = usePhotography()
 
 
@@ -333,11 +343,10 @@ onBeforeUnmount(() => {
 
 .history-section {
         width: 100%;
-        height: calc(100vh - 30px);
+        min-height: calc(100vh - 30px);
         display: flex;
         flex-direction: column;
         padding: 20px;
-        overflow-y: auto;
 
         ::v-deep {
           .el-checkbox__input {

+ 14 - 0
frontend/src/views/Photography/shot.vue

@@ -27,6 +27,7 @@
               </div>
             </div>
           </div>
+
         </div>
 
         <div class="step-section">
@@ -147,6 +148,16 @@
               </span>
             </div>
             <div class="footer-right">
+
+              <div class="pagination-container" style="padding: 10px 0; text-align: center;">
+                <el-pagination
+                    :page-count="totalPages"
+                    :current-page="currentPage"
+                    @current-change="(page) => getPhotoRecords({ page })"
+                    layout="prev, pager, next"
+                    :page-size="pageSize"
+                />
+              </div>
               <el-button
                 :disabled="selectedGoods.size === 0 || runLoading || takePictureLoading"
                 @click="deleteSelected"
@@ -203,6 +214,9 @@ const {
   onGenerateCLick,
   initEventListeners,
   cleanupEventListeners,
+  pageSize,
+  currentPage,
+  totalPages,
 } = usePhotography()
 
 // 选中的货号列表