Explorar el Código

feat(photo): 添加摄影页面多选和批量操作功能

- 在国际化文件中新增全选、删除、批量删除、开始生成等翻译项
- 添加图像选择计数显示功能,展示已选择的图像数量
- 实现多选框组件用于全选/取消全选功能
- 添加批量删除选中商品的功能按钮
- 添加删除所有商品的功能按钮
- 添加开始生成按钮用于打开摄影详情页面
- 重构底部控制区域布局结构以支持新功能
panqiuyao hace 1 día
padre
commit
6f87da1285
Se han modificado 2 ficheros con 54 adiciones y 48 borrados
  1. 6 0
      frontend/src/locales/en.ts
  2. 48 48
      frontend/src/views/Photography/shot.vue

+ 6 - 0
frontend/src/locales/en.ts

@@ -28,6 +28,7 @@ export default {
     status: 'Status',
     version: 'Version',
     download: 'Download',
+    selectAll: 'All',
     selected: 'Selected',
     of: 'of',
     close: 'Close',
@@ -241,6 +242,11 @@ export default {
     imageCount: 'images',
     advancedGenerate: 'Advanced Generate',
     retake: 'Retake',
+    retakeSingle: 'Retake',
+    delete: 'Delete',
+    deleteAll: 'Delete All',
+    startGenerate: 'Start Generate',
+    selectedCount: '{selected} of {total} images selected',
     leftFootProgram: 'Execute Left Foot Program',
     rightFootProgram: 'Execute Right Foot Program',
     goodsSuccess: 'Goods {goods} acquired. Press left or right button on remote to start shooting.',

+ 48 - 48
frontend/src/views/Photography/shot.vue

@@ -138,59 +138,59 @@
               </div>
             </div>
           </div>
-      </div>
-
-      <div class="footer-controls">
-        <div class="footer-left">
-          <el-checkbox
-            :model-value="isSelectAll"
-            :indeterminate="isIndeterminate"
-            @change="toggleSelectAll"
-            class="select-all-checkbox"
-          >
-            {{ $t('common.selectAll') }}
-          </el-checkbox>
-          <span class="image-count-text">
+        <div class="footer-controls">
+          <div class="footer-left">
+            <el-checkbox
+                :model-value="isSelectAll"
+                :indeterminate="isIndeterminate"
+                @change="toggleSelectAll"
+                class="select-all-checkbox"
+            >
+              {{ $t('common.selectAll') }}
+            </el-checkbox>
+            <span class="image-count-text">
             {{ $t('photoShot.selectedCount', { selected: selectedImageCount, total: totalImageCount }) }}
           </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"
-            v-log="{ describe: { action: 'delete selected goods' } }"
-          >
-            {{ $t('photoShot.delete') }}
-          </el-button>
-          <el-button
-            :disabled="!goodsList.length || runLoading || takePictureLoading"
-            @click="handleDeleteAll"
-            style="color: #FF4C00"
-            v-log="{ describe: { action: 'delete all goods' } }"
-          >
-            {{ $t('photoShot.deleteAll') }}
-          </el-button>
-          <el-button
-            type="primary"
-            :disabled="!goodsList.length || runLoading || takePictureLoading"
-            @click="openPhotographyDetail()"
-            v-log="{ describe: { action: 'start generate' } }"
-          >
-            <img src="@/assets/images/processImage.vue/sc.png" />
-            {{ $t('photoShot.startGenerate') }}
-            <img src="@/assets/images/processImage.vue/go.png"  class="go"/>
-          </el-button>
+          <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"
+                v-log="{ describe: { action: 'delete selected goods' } }"
+            >
+              {{ $t('photoShot.delete') }}
+            </el-button>
+            <el-button
+                :disabled="!goodsList.length || runLoading || takePictureLoading"
+                @click="handleDeleteAll"
+                style="color: #FF4C00"
+                v-log="{ describe: { action: 'delete all goods' } }"
+            >
+              {{ $t('photoShot.deleteAll') }}
+            </el-button>
+            <el-button
+                type="primary"
+                :disabled="!goodsList.length || runLoading || takePictureLoading"
+                @click="openPhotographyDetail()"
+                v-log="{ describe: { action: 'start generate' } }"
+            >
+              <img src="@/assets/images/processImage.vue/sc.png" />
+              {{ $t('photoShot.startGenerate') }}
+              <img src="@/assets/images/processImage.vue/go.png"  class="go"/>
+            </el-button>
+          </div>
         </div>
       </div>
+
     </div>
   </div>
 </template>