feat(产品选择): 添加最近选择功能并优化输入框布局

在产品和原材料选择组件中添加最近选择功能，显示最近选择的5项记录
优化输入框布局，将长属性分行显示提高可读性

klp-ui/src/components/KLPService/ProductSelect/index.vue

@@ -27,16 +27,20 @@
             @keyup.enter.native="handleQuery" />
         </el-form-item>
         <el-form-item label="材质">
-          <MemoInput storageKey="material" v-model="queryParams.material" placeholder="请输入材质" @keyup.enter.native="handleQuery" />
+          <MemoInput storageKey="material" v-model="queryParams.material" placeholder="请输入材质"
+            @keyup.enter.native="handleQuery" />
         </el-form-item>
         <el-form-item label="厂家">
-          <MemoInput storageKey="manufacturer" v-model="queryParams.manufacturer" placeholder="请输入厂家" @keyup.enter.native="handleQuery" />
+          <MemoInput storageKey="manufacturer" v-model="queryParams.manufacturer" placeholder="请输入厂家"
+            @keyup.enter.native="handleQuery" />
         </el-form-item>
         <el-form-item label="表面处理">
-          <MemoInput storageKey="surfaceTreatmentDesc" v-model="queryParams.surfaceTreatmentDesc" placeholder="请输入表面处理" @keyup.enter.native="handleQuery" />
+          <MemoInput storageKey="surfaceTreatmentDesc" v-model="queryParams.surfaceTreatmentDesc" placeholder="请输入表面处理"
+            @keyup.enter.native="handleQuery" />
         </el-form-item>
         <el-form-item label="锌层">
-          <MemoInput storageKey="zincLayer" v-model="queryParams.zincLayer" placeholder="请输入锌层" @keyup.enter.native="handleQuery" />
+          <MemoInput storageKey="zincLayer" v-model="queryParams.zincLayer" placeholder="请输入锌层"
+            @keyup.enter.native="handleQuery" />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
@@ -44,6 +48,17 @@
         </el-form-item>
       </el-form>
 
+      <h3>最近选择</h3>
+      <el-table v-loading="recentLoading" title="最近选择" :data="recentlySelectedList" @row-click="handleRowClick">
+        <el-table-column label="编号" prop="productCode" />
+        <el-table-column label="名称" prop="productName" />
+        <el-table-column label="规格" prop="specification" />
+        <el-table-column label="材质" prop="material" />
+        <el-table-column label="厂家" prop="manufacturer" />
+        <el-table-column label="表面处理" prop="surfaceTreatmentDesc" />
+        <el-table-column label="锌层" prop="zincLayer" />
+      </el-table>
+
       <!-- 卡片布局（替换原表格） -->
       <div v-loading="loading" class="card-container">
         <div v-for="(item, index) in productList" :key="index + item.productId" class="product-card"
@@ -86,7 +101,7 @@
 </template>
 
 <script>
-import { listProduct } from '@/api/wms/product';
+import { listProduct, getProduct } from '@/api/wms/product';
 import MemoInput from '@/components/MemoInput/index.vue';
 
 export default {
@@ -131,7 +146,9 @@ export default {
         zincLayer: undefined
       },
       selectedIds: [],
-      selectedRows: []
+      selectedRows: [],
+      recentlySelectedList: [],
+      recentLoading: false
     };
   },
   computed: {
@@ -179,6 +196,27 @@ export default {
       return this.selectedIds.includes(productId);
     },
 
+    // 获取最近选择的数据
+    async listRecentlySelected() {
+      try {
+        this.recentLoading = true;
+        // 从localstorage中获取缓存的ids
+        const ids = localStorage.getItem('recentlySelectedProductIds') || '';
+        const idsArray = ids.split(',');
+        if (idsArray.length === 0) return;
+        const list = await Promise.all(idsArray.map(async id => {
+          const response = await getProduct(id);
+          return response.data || {};
+        }));
+        console.log('recentlySelectedList', list);
+        this.recentlySelectedList = list || [];
+      } catch (error) {
+        console.error('获取最近选择的产品列表失败', error);
+        this.$message.error('获取最近选择的产品列表失败');
+      } finally {
+        this.recentLoading = false;
+      }
+    },
     // 同步选中行数据
     // syncSelectedRows() {
     //   if (this.productList.length === 0) return;
@@ -240,12 +278,28 @@ export default {
 
     handleRowClick(row) {
       if (!this.multiple) {
+        // 点击卡片时，更新最近选择的产品列表
+        this.updateRecentlySelected(row);
         this.selectedIds = [row.productId];
         this.selectedRows = [row];
         this.confirmSelection();
       }
     },
 
+    // 更新最近选择的产品列表
+    updateRecentlySelected(row) {
+      // 存储在最近列表中，修改localstorage, 列表中最多5个，超过五个则删除最早的一个
+      const index = this.recentlySelectedList.findIndex(item => item.productId === row.productId);
+      if (index > -1) {
+        this.recentlySelectedList.splice(index, 1);
+      }
+      this.recentlySelectedList.unshift(row);
+      if (this.recentlySelectedList.length > 5) {
+        this.recentlySelectedList.pop();
+      }
+      localStorage.setItem('recentlySelectedProductIds', this.recentlySelectedList.map(item => item.productId).join(','));
+    },
+
     handleSelect(row) {
       if (this.multiple) {
         const index = this.selectedIds.indexOf(row.productId);
@@ -272,7 +326,11 @@ export default {
       // this.syncSelectedRows();
       this.dialogVisible = false;
     }
-  }
+  },
+  mounted() {
+    // 初始化最近选择的产品列表
+    this.listRecentlySelected();
+  },
 };
 </script>