From d64ba0a7263c70fc6c02f8fd9ba46c4b08bc1776 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Mon, 12 Jan 2026 10:05:41 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E4=BA=A7=E5=93=81=E9=80=89=E6=8B=A9):=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=9C=80=E8=BF=91=E9=80=89=E6=8B=A9=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E5=B9=B6=E4=BC=98=E5=8C=96=E8=BE=93=E5=85=A5=E6=A1=86?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在产品和原材料选择组件中添加最近选择功能，显示最近选择的5项记录
优化输入框布局，将长属性分行显示提高可读性
---
 .../KLPService/ProductSelect/index.vue        | 72 +++++++++++++++++--
 .../KLPService/RawMaterialSelect/index.vue    | 68 +++++++++++++++---
 2 files changed, 125 insertions(+), 15 deletions(-)

diff --git a/klp-ui/src/components/KLPService/ProductSelect/index.vue b/klp-ui/src/components/KLPService/ProductSelect/index.vue
index 0c7fd27a..be724d59 100644
--- a/klp-ui/src/components/KLPService/ProductSelect/index.vue
+++ b/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>
 
diff --git a/klp-ui/src/components/KLPService/RawMaterialSelect/index.vue b/klp-ui/src/components/KLPService/RawMaterialSelect/index.vue
index e1dea4c8..7b317379 100644
--- a/klp-ui/src/components/KLPService/RawMaterialSelect/index.vue
+++ b/klp-ui/src/components/KLPService/RawMaterialSelect/index.vue
@@ -23,19 +23,24 @@
             @keyup.enter.native="handleQuery" />
         </el-form-item>
         <el-form-item label="规格">
-          <MemoInput storageKey="coilSpec" v-model="queryParams.specification" placeholder="请输入规格" @keyup.enter.native="handleQuery" />
+          <MemoInput storageKey="coilSpec" v-model="queryParams.specification" placeholder="请输入规格"
+            @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>
@@ -43,6 +48,16 @@
         </el-form-item>
       </el-form>
 
+      <h3>最近选择</h3>
+      <el-table v-loading="recentLoading" title="最近选择" :data="recentlySelectedList" @row-click="handleRowClick">
+        <el-table-column label="编号" prop="rawMaterialCode" />
+        <el-table-column label="名称" prop="rawMaterialName" />
+        <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 rawMaterialList" :key="index + item.rawMaterialId" class="material-card"
@@ -59,7 +74,6 @@
             </div>
             <div class="card-info">
               <div class="info-item">规格：<span>{{ item.specification || '-' }}</span></div>
-              <div class="info-item">单位：<span>{{ item.unit || '-' }}</span></div>
               <div class="info-item">材质：<span>{{ item.material || '-' }}</span></div>
               <div class="info-item">厂家：<span>{{ item.manufacturer || '-' }}</span></div>
               <div class="info-item">表面处理：<span>{{ item.surfaceTreatmentDesc || '-' }}</span></div>
@@ -89,7 +103,7 @@
 </template>
 
 <script>
-import { listRawMaterial } from '@/api/wms/rawMaterial';
+import { listRawMaterial, getRawMaterial } from '@/api/wms/rawMaterial';
 import MemoInput from '@/components/MemoInput/index.vue'
 
 export default {
@@ -133,7 +147,9 @@ export default {
         zincLayer: undefined
       },
       selectedIds: [],
-      selectedRows: []
+      selectedRows: [],
+      recentlySelectedList: [],
+      recentLoading: false
     };
   },
   computed: {
@@ -193,6 +209,28 @@ export default {
       }
     },
 
+    // 获取最近选择的数据
+    async listRecentlySelected() {
+      try {
+        this.recentLoading = true;
+        // 从localstorage中获取缓存的ids
+        const ids = localStorage.getItem('recentlySelectedRawMaterialIds') || '';
+        const idsArray = ids.split(',');
+        if (idsArray.length === 0) return;
+        const list = await Promise.all(idsArray.map(async id => {
+          const response = await getRawMaterial(id);
+          return response.data || {};
+        }));
+        console.log('recentlySelectedList', list);
+        this.recentlySelectedList = list || [];
+      } catch (error) {
+        console.error('获取最近选择的原材料列表失败', error);
+        this.$message.error('获取最近选择的原材料列表失败');
+      } finally {
+        this.recentLoading = false;
+      }
+    },
+
     // 原有方法保持不变（仅修改同步选中状态逻辑）
     async getList() {
       try {
@@ -238,6 +276,17 @@ export default {
 
     handleRowClick(row) {
       if (!this.multiple) {
+        // 存储在最近列表中，修改localstorage, 列表中最多5个，超过五个则删除最早的一个
+        const index = this.recentlySelectedList.findIndex(item => item.rawMaterialId === row.rawMaterialId);
+        if (index > -1) {
+          this.recentlySelectedList.splice(index, 1);
+        }
+        this.recentlySelectedList.unshift(row);
+        if (this.recentlySelectedList.length > 5) {
+          this.recentlySelectedList.pop();
+        }
+        localStorage.setItem('recentlySelectedRawMaterialIds', this.recentlySelectedList.map(item => item.rawMaterialId).join(','));
+
         this.selectedIds = [row.rawMaterialId];
         this.selectedRows = [row];
         this.confirmSelection();
@@ -269,6 +318,9 @@ export default {
       // this.syncSelectedRows();
       this.dialogVisible = false;
     }
+  },
+  mounted() {
+    this.listRecentlySelected();
   }
 };
 </script>