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

feat(ActualWarehouseSelect): 新增可清除输入框功能并优化选中状态展示

Browse Source 
refactor(ProductSelect): 重构为单选模式并优化选中逻辑和UI

refactor(RawMaterialSelect): 重构为单选模式并优化选中逻辑和UI
This commit is contained in:
砂糖
2026-01-14 09:58:37 +08:00
parent afbc2db77f
commit fd58b8d43a
3 changed files with 170 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,7 +12,7 @@
<!-- 选择对话框 -->
<el-dialog append-to-body title="选择产品" :visible.sync="dialogVisible" width="1200px" :close-on-click-modal="false"
@close="handleClose">
<!-- 搜索区域（保持不变） -->
<!-- 搜索区域 -->
<el-form :inline="true" :model="queryParams" class="search-form" size="small">
<el-form-item label="产品编号">
<el-input v-model="queryParams.productCode" placeholder="请输入产品编号" clearable
@@ -59,15 +59,11 @@
<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"
:class="{ 'selected-card': isSelected(item.productId) }" @click="handleRowClick(item)">
<!-- 多选勾选框 -->
<el-checkbox v-if="multiple" :checked="isSelected(item.productId)"
@change="(val) => handleCardSelection(val, item)" class="card-checkbox" />
<!-- 卡片内容（包含所有原表格字段） -->
<!-- 卡片内容 -->
<div class="card-content">
<div class="card-title">
<span class="name">{{ item.productName }}</span>
@@ -76,7 +72,7 @@
<div class="card-info">
<div class="info-item">规格：<span>{{ item.specification || '-' }}</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.manufacturer || '-' }}</span></div>
<div class="info-item">表面处理：<span>{{ item.surfaceTreatmentDesc || '-' }}</span></div>
<div class="info-item">锌层：<span>{{ item.zincLayer || '-' }}</span></div>
</div>
@@ -89,15 +85,12 @@
</div>
</div>
<!-- 分页（保持不变） -->
<!-- 分页 -->
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="confirmSelection" v-if="multiple">
确认选择
</el-button>
</div>
</el-dialog>
</div>
@@ -121,10 +114,6 @@ export default {
type: Boolean,
default: false
},
multiple: {
type: Boolean,
default: false
},
filters: {
type: Object,
default: () => ({})
@@ -148,43 +137,36 @@ export default {
surfaceTreatmentDesc: undefined,
zincLayer: undefined
},
selectedIds: [],
selectedRows: [],
// 单选核心变量 - 替换原多选的数组
selectedId: '',
selectedRow: {},
recentlySelectedList: [],
recentLoading: false
};
},
computed: {
buttonText() {
// 如果为选中任何产品，显示选择产品
// 如果为选中多个产品，显示已选 X 项
// 如果为选中单个产品，显示产品名称
if (this.selectedIds.length === 0) {
if (!this.selectedId) {
return '请选择产品';
}
if (this.multiple) {
return `已选 ${this.selectedIds.length} 项`;
} else {
return `${this.selectedRows[0]?.productName}[${this.selectedRows[0]?.specification || '-'}] (${this.selectedRows[0]?.material || '-'})`;
}
return `${this.selectedRow.productName}[${this.selectedRow.specification || '-'}] (${this.selectedRow.material || '-'})`;
},
displayText() {
if (this.multiple) {
return this.selectedIds.length > 0
? `已选 ${this.selectedIds.length} 项`
: '未选择';
} else {
return this.selectedRows[0]?.productName || '未选择';
}
return this.selectedRow.productName || '未选择';
}
},
watch: {
// 监听父组件传值 实现精准回显 ✅修复原回显BUG
value: {
immediate: true,
handler(val) {
this.selectedIds = val ? val.split(',').filter(id => id) : [];
// this.syncSelectedRows();
this.$forceUpdate(); // 新增：强制刷新视图
async handler(val) {
this.selectedId = val || '';
if (this.selectedId) {
const res = await getProduct(this.selectedId);
if (res.code === 200) this.selectedRow = res.data;
} else {
this.selectedRow = {};
}
}
},
dialogVisible(val) {
@@ -194,16 +176,15 @@ export default {
}
},
methods: {
// 判断卡片是否选中
// 判断卡片是否选中 - 单选精准匹配
isSelected(productId) {
return this.selectedIds.includes(productId);
return this.selectedId === productId;
},
// 获取最近选择的数据
async listRecentlySelected() {
try {
this.recentLoading = true;
// 从localstorage中获取缓存的ids
const ids = localStorage.getItem('recentlySelectedProductIds') || '';
const idsArray = ids.split(',').filter(id => id);
if (idsArray.length === 0) return;
@@ -211,7 +192,6 @@ export default {
const response = await getProduct(id);
return response.data || {};
}));
console.log('recentlySelectedList', list);
this.recentlySelectedList = list || [];
} catch (error) {
console.error('获取最近选择的产品列表失败', error);
@@ -220,25 +200,8 @@ export default {
this.recentLoading = false;
}
},
// 同步选中行数据
// syncSelectedRows() {
// if (this.productList.length === 0) return;
// // this.selectedRows = this.productList.filter(item =>
// // this.selectedIds.includes(item.productId)
// // );
// },
// 卡片选择事件（多选）
handleCardSelection(checked, item) {
if (checked) {
!this.selectedIds.includes(item.productId) && this.selectedIds.push(item.productId);
} else {
this.selectedIds = this.selectedIds.filter(id => id !== item.productId);
}
// this.syncSelectedRows();
},
// 原有方法保持不变（仅修改同步选中状态逻辑）
// 获取产品列表 ✅修复原数据重复BUG+逻辑冗余
async getList() {
try {
this.loading = true;
@@ -247,9 +210,12 @@ export default {
if (response.code === 200) {
this.productList = response.rows || [];
this.total = response.total || 0;
// this.syncSelectedRows(); // 加载数据后同步选中状态
// 选中项不在列表则追加，保证选中高亮
if (this.selectedId && !this.productList.some(item => item.productId === this.selectedId)) {
const res = await getProduct(this.selectedId);
res.code === 200 && this.productList.push(res.data);
}
}
return this.productList;
} catch (error) {
console.error('获取产品列表失败', error);
this.$message.error('获取产品列表失败');
@@ -279,60 +245,36 @@ export default {
this.getList();
},
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);
}
if (index > -1) this.recentlySelectedList.splice(index, 1);
this.recentlySelectedList.unshift(row);
if (this.recentlySelectedList.length > 5) {
this.recentlySelectedList.pop();
}
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);
index > -1
? (this.selectedIds.splice(index, 1), this.selectedRows.splice(index, 1))
: (this.selectedIds.push(row.productId), this.selectedRows.push(row));
} else {
this.selectedIds = [row.productId];
this.selectedRows = [row];
this.confirmSelection();
}
},
confirmSelection() {
const emitValue = this.selectedIds.join(',');
this.$emit('input', emitValue);
this.$emit('change', emitValue, this.selectedRows);
// 点击行/卡片选中 - 单选核心事件
handleRowClick(row) {
this.updateRecentlySelected(row);
this.selectedId = row.productId;
this.selectedRow = row;
// 向父组件传值
this.$emit('input', this.selectedId);
this.$emit('change', this.selectedId, this.selectedRow);
// 选中后直接关闭弹窗
this.dialogVisible = false;
this.$forceUpdate(); // 新增：强制刷新视图
},
// 弹窗关闭时恢复选中状态
handleClose() {
this.selectedIds = this.value ? this.value.split(',').filter(id => id) : [];
// this.syncSelectedRows();
this.selectedId = this.value || '';
this.dialogVisible = false;
}
},
mounted() {
// 初始化最近选择的产品列表
this.listRecentlySelected();
this.getList();
},
};
</script>
@@ -378,7 +320,7 @@ export default {
.product-card {
border: 1px solid #e6e6e6;
border-radius: 0px;
padding: 4px;
padding: 12px 16px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
@@ -396,17 +338,9 @@ export default {
background-color: #f0f7ff;
}
/* 多选勾选框位置 */
.card-checkbox {
position: absolute;
top: 16px;
right: 16px;
}
/* 卡片内容样式 */
.card-content {
margin-right: 24px;
/* 给多选框留空间 */
width: 100%;
}
.card-title {