DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
在产品和原材料选择组件中添加最近选择功能，显示最近选择的5项记录
优化输入框布局，将长属性分行显示提高可读性
This commit is contained in:
砂糖
2026-01-12 10:05:41 +08:00
parent 8a4e67eb3e
commit d64ba0a726
2 changed files with 125 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
klp-ui/src/components/KLPService/ProductSelect/index.vue
View File

@@ -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>

68
klp-ui/src/components/KLPService/RawMaterialSelect/index.vue
View File

@@ -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>