feat(photo): 添加货号搜索功能并优化照片列表查询接口

- 修改 Go 后端接口 GetPhotoListApp 添加 goodsArtNo 参数
- 更新 CameraMachineHandler 的 GetPhotoList 方法支持货号过滤
- 在前端 CutoutPage 和 ShadowRename 组件中添加货号搜索输入框
- 实现搜索功能，支持按货号筛选照片列表
- 添加搜索按钮和回车键触发搜索
- 将每页显示数量从 10 条改为 20 条
- 更新 Wails 类型定义和 JavaScript 绑定以支持新参数

app.go

@@ -260,9 +260,9 @@ func (a *App) GetPhotoList() (*handlers.PhotoRecordResponse, error) {
 	fmt.Printf("数据列表获取成功，共 %d 条记录\n", len(response.List))
 	return &response, nil
 }
-func (a *App) GetPhotoListApp(page string) (*handlers.PhotoRecordResponse, error) {
+func (a *App) GetPhotoListApp(page string, goodsArtNo string) (*handlers.PhotoRecordResponse, error) {
 
-	return a.cameraMachineHandler.GetPhotoList(page)
+	return a.cameraMachineHandler.GetPhotoList(page, goodsArtNo)
 }
 
 func (a *App) RemoveBackgroundApp(goodsArtNos []string) (string, error) {

frontend/src/components/CutoutPage.vue

@@ -10,10 +10,11 @@ const fullscreenLoading = ref(false)
 // 数据
 const photoList = ref<any[]>([]);
 const selectedProducts = ref<number[]>([]); // 存储选中的货号索引
-
+// 绑定参数的变量
+const goodsArtNo = ref<string>('');
 // 分页状态
 const currentPage = ref(1);
-const pageSize = ref(10); // 每页显示10条记录
+const pageSize = ref(20); // 每页显示10条记录
 const totalCount = ref(0);
 const totalPages = ref(1);
 const hasPrev = ref(false);
@@ -25,7 +26,7 @@ const selectedCount = computed(() => {
 });
 
 // 获取拍照列表数据
-const fetchPhotoList = async (page: number = 1, append = false) => {
+const fetchPhotoList = async (page: number = 1, append = false, goodsArtNo?: string) => {
   if (page === 1) {
     loading.value = true;
   } else {
@@ -36,7 +37,9 @@ const fetchPhotoList = async (page: number = 1, append = false) => {
 
   try {
     // 调用API时传递分页参数
-    const data = await GetPhotoListApp(page.toString());
+    const searchKeyword = goodsArtNo ?? '';
+    console.log("搜索货号:", searchKeyword);
+    const data = await GetPhotoListApp(page.toString(),searchKeyword);
     console.log("获取的拍照列表数据:", data);
 
     if (data) {
@@ -153,6 +156,23 @@ const handleBatchCutout = async() => {
 onMounted(() => {
   fetchPhotoList(1, false);
 });
+// 搜索处理函数
+const handleSearch = async () => {
+  try {
+    // if (!goodsArtNo.value) {
+    //   await ElMessageBox.confirm('货号不能为空',{
+    //     closeOnClickModal: false, // 点击遮罩层不关闭
+    //     closeOnPressEscape: false, // 按ESC键不关闭
+    //     showCancelButton: false,   // 隐藏取消按钮
+    //   })
+    //   return;
+    // }
+    await fetchPhotoList(1, false, goodsArtNo.value);
+
+  } catch (error) {
+    console.error("搜索失败:", error);
+  }
+};
 </script>
 
 <template>
@@ -177,6 +197,17 @@ onMounted(() => {
 
     <!-- 正常内容 -->
     <div v-else>
+      <!-- 新增：搜索框区域 -->
+      <div class="search-container">
+        <input
+            v-model="goodsArtNo"
+            type="text"
+            class="search-input"
+            placeholder="请输入货号进行搜索"
+            @keyup.enter="handleSearch"
+        />
+        <button class="search-btn" @click="handleSearch">搜索</button>
+      </div>
       <!-- 货号卡片列表 -->
       <div class="product-cards-container">
         <div
@@ -418,4 +449,33 @@ onMounted(() => {
   padding: 40px 20px;
   text-align: center;
 }
+
+.search-container {
+  margin: 20px auto;
+  max-width: 800px; /* 根据页面宽度调整 */
+  display: flex;
+  gap: 10px;
+}
+
+.search-input {
+  flex: 1;
+  padding: 10px 15px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  font-size: 16px;
+  outline: none;
+}
+
+.search-input:focus {
+  border-color: #409eff; /* 你的主题色 */
+}
+
+.search-btn {
+  padding: 10px 20px;
+  background-color: #409eff;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+}
 </style>

frontend/src/components/ShadowRename.vue

@@ -20,13 +20,23 @@ const hasPrev = ref(false);
 const hasNext = ref(true); // 默认有下一页，直到加载完成
 const dialogTableVisible = ref(false)
 const output_folder = ref<any[]>([])
+// 绑定参数的变量
+const goodsArtNo = ref<string>('');
 // 计算已选择的图片数量
 const selectedCount = computed(() => {
   return selectedProducts.value.length;
 });
+// 搜索处理函数
+const handleSearch = async () => {
+  try {
+    await fetchPhotoList(1, false, goodsArtNo.value);
 
+  } catch (error) {
+    console.error("搜索失败:", error);
+  }
+};
 // 获取拍照列表数据
-const fetchPhotoList = async (page: number = 1, append = false) => {
+const fetchPhotoList = async (page: number = 1, append = false,goodsArtNo:string = '') => {
   if (page === 1) {
     loading.value = true;
   } else {
@@ -37,7 +47,7 @@ const fetchPhotoList = async (page: number = 1, append = false) => {
 
   try {
     // 调用API时传递分页参数
-    const data = await GetPhotoListApp(page.toString());
+    const data = await GetPhotoListApp(page.toString(),goodsArtNo);
     console.log("获取的拍照列表数据:", data);
 
     if (data) {
@@ -180,6 +190,16 @@ onMounted(() => {
     <!-- 正常内容 -->
     <div v-else>
       <!-- 货号卡片列表 -->
+      <div class="search-container">
+        <input
+            v-model="goodsArtNo"
+            type="text"
+            class="search-input"
+            placeholder="请输入货号进行搜索"
+            @keyup.enter="handleSearch"
+        />
+        <button class="search-btn" @click="handleSearch">搜索</button>
+      </div>
       <div class="product-cards-container">
         <div
             v-for="(photo, index) in photoList"
@@ -432,4 +452,33 @@ onMounted(() => {
   padding: 40px 20px;
   text-align: center;
 }
+
+.search-container {
+  margin: 20px auto;
+  max-width: 800px; /* 根据页面宽度调整 */
+  display: flex;
+  gap: 10px;
+}
+
+.search-input {
+  flex: 1;
+  padding: 10px 15px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  font-size: 16px;
+  outline: none;
+}
+
+.search-input:focus {
+  border-color: #409eff; /* 你的主题色 */
+}
+
+.search-btn {
+  padding: 10px 20px;
+  background-color: #409eff;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+}
 </style>

frontend/wailsjs/go/main/App.d.ts

@@ -6,7 +6,7 @@ export function GetAppArgument():Promise<any>;
 
 export function GetPhotoList():Promise<handlers.PhotoRecordResponse>;
 
-export function GetPhotoListApp(arg1:string):Promise<handlers.PhotoRecordResponse>;
+export function GetPhotoListApp(arg1:string,arg2:string):Promise<handlers.PhotoRecordResponse>;
 
 export function HandlerDirectory(arg1:string,arg2:string):Promise<void>;
 

frontend/wailsjs/go/main/App.js

@@ -10,8 +10,8 @@ export function GetPhotoList() {
   return window['go']['main']['App']['GetPhotoList']();
 }
 
-export function GetPhotoListApp(arg1) {
-  return window['go']['main']['App']['GetPhotoListApp'](arg1);
+export function GetPhotoListApp(arg1, arg2) {
+  return window['go']['main']['App']['GetPhotoListApp'](arg1, arg2);
 }
 
 export function HandlerDirectory(arg1, arg2) {

handlers/camera_machine_handler.go

@@ -137,9 +137,9 @@ func (t *CameraMachineHandler) compressAndEncodeImage(imagePath string, maxWidth
 }
 
 // GetPhotoList 获取拍照记录列表
-func (t *CameraMachineHandler) GetPhotoList(page string) (*PhotoRecordResponse, error) {
+func (t *CameraMachineHandler) GetPhotoList(page string, goodsArtNo string) (*PhotoRecordResponse, error) {
 	t.handlerRequest = NewHandlerRequests(t.ctx, t.token, cameraMachineUrl)
-	request, err := t.handlerRequest.MakeGetRequest(GetPhotoRecordUrl + "?page=" + page)
+	request, err := t.handlerRequest.MakeGetRequest(GetPhotoRecordUrl + "?page=" + page + "&goods_art_no=" + goodsArtNo)
 	if err != nil {
 		return nil, err
 	}