DeXun/klp-oa
9
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

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

@@ -12,7 +12,7 @@
<!-- 选择对话框 -->
<el-dialog title="选择原材料" :visible.sync="dialogVisible" width="1200px" :close-on-click-modal="false"
@close="handleClose" append-to-body>
<!-- 搜索区域（保持不变） -->
<!-- 搜索区域 -->
<el-form :inline="true" :model="queryParams" class="search-form" size="small">
<el-form-item label="编号">
<el-input v-model="queryParams.rawMaterialCode" placeholder="请输入原材料编号" clearable
@@ -58,14 +58,11 @@
<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"
:class="{ 'selected-card': isSelected(item.rawMaterialId) }" @click="handleRowClick(item)">
<!-- 多选勾选框 -->
<el-checkbox v-if="multiple" :checked="isSelected(item.rawMaterialId)"
@change="(val) => handleCardSelection(val, item)" class="card-checkbox" />
<!-- 卡片内容（包含所有原表格字段） -->
<div class="card-content">
<div class="card-title">
@@ -88,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>
@@ -112,18 +106,17 @@ export default {
MemoInput
},
props: {
// 绑定值：原材料ID 单选字符串格式
value: {
type: String,
default: ''
},
// 是否只读
readonly: {
type: Boolean,
default: false
},
multiple: {
type: Boolean,
default: false
},
// 过滤条件
filters: {
type: Object,
default: () => ({})
@@ -133,7 +126,9 @@ export default {
return {
dialogVisible: false,
loading: false,
recentLoading: false,
rawMaterialList: [],
recentlySelectedList: [],
total: 0,
queryParams: {
pageNum: 1,
@@ -146,48 +141,40 @@ export default {
surfaceTreatmentDesc: undefined,
zincLayer: undefined
},
selectedIds: [],
selectedRows: [],
recentlySelectedList: [],
recentLoading: false
// ✅ 单选核心变量：选中的ID和单条数据对象
selectedId: '',
selectedRow: {}
};
},
computed: {
// 选择按钮展示文本
buttonText() {
// 如果为选中任何原材料，显示选择原材料
// 如果为选中多个原材料，显示已选 X 项
// 如果为选中单个原材料，显示原材料名称
console.log(this.selectedIds);
if (this.selectedIds.length === 0) {
if (!this.selectedId) {
return '请选择原材料';
}
if (this.multiple) {
return `已选 ${this.selectedIds.length} 项`;
} else {
return `${this.selectedRows[0]?.rawMaterialName}[${this.selectedRows[0]?.specification || '-'}] (${this.selectedRows[0]?.material || '-'})`;
}
return `${this.selectedRow.rawMaterialName}[${this.selectedRow.specification || '-'}] (${this.selectedRow.material || '-'})`;
},
// 只读状态展示文本
displayText() {
if (this.multiple) {
return this.selectedIds.length > 0
? `已选 ${this.selectedIds.length} 项`
: '未选择';
} else {
return this.selectedRows[0]?.rawMaterialName || '未选择';
}
},
return this.selectedRow.rawMaterialName || '未选择';
}
},
watch: {
// 监听父组件传值 实现值回显 ✅修复原回显BUG
value: {
immediate: true,
handler(val) {
console.log('watch触发val', val);
this.selectedIds = val ? val.split(',').filter(id => id) : [];
// this.syncSelectedRows();
this.$forceUpdate(); // 新增：强制刷新视图
async handler(val) {
this.selectedId = val || '';
// 有选中ID则获取详情赋值
if (this.selectedId) {
const res = await getRawMaterial(this.selectedId);
if (res.code === 200) this.selectedRow = res.data;
} else {
this.selectedRow = {};
}
}
},
// 弹窗打开时加载数据
dialogVisible(val) {
if (val) {
this.getList();
@@ -197,32 +184,20 @@ export default {
methods: {
// 判断卡片是否选中
isSelected(rawMaterialId) {
return this.selectedIds.includes(rawMaterialId);
return this.selectedId === rawMaterialId;
},
// 卡片选择事件（多选）
handleCardSelection(checked, item) {
if (checked) {
!this.selectedIds.includes(item.rawMaterialId) && this.selectedIds.push(item.rawMaterialId);
} else {
this.selectedIds = this.selectedIds.filter(id => id != item.rawMaterialId);
}
},
// 获取最近选择的数据
// 获取最近选择的原材料数据
async listRecentlySelected() {
try {
this.recentLoading = true;
// 从localstorage中获取缓存的ids
const ids = localStorage.getItem('recentlySelectedRawMaterialIds') || '';
const idsArray = ids.split(',').filter(id => id);
console.log('idsArray', idsArray, idsArray.length === 0);
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);
@@ -232,21 +207,21 @@ export default {
}
},
// 原有方法保持不变（仅修改同步选中状态逻辑）
// 获取原材料列表 ✅修复原数据重复BUG
async getList() {
try {
this.loading = true;
const params = { ...this.queryParams, ...this.filters };
console.log('params', params);
const response = await listRawMaterial(params);
if (response.code === 200) {
this.rawMaterialList = response.rows.map(item => ({
...item,
rawMaterialId: item.rawMaterialId.toString()
})) || [];
this.rawMaterialList = response.rows || [];
this.total = response.total || 0;
// 选中的项不在列表中则追加进去，保证选中高亮
if (this.selectedId && !this.rawMaterialList.some(item => item.rawMaterialId === this.selectedId)) {
const res = await getRawMaterial(this.selectedId);
res.code === 200 && this.rawMaterialList.push(res.data);
}
}
return this.rawMaterialList;
} catch (error) {
console.error('获取原材料列表失败', error);
this.$message.error('获取原材料列表失败');
@@ -255,11 +230,13 @@ export default {
}
},
// 搜索
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
// 重置搜索条件
resetQuery() {
this.queryParams = {
pageNum: 1,
@@ -275,53 +252,34 @@ export default {
this.getList();
},
// 点击行/卡片选中 核心单选事件
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(','));
// 缓存最近选择数据，最多5条
const index = this.recentlySelectedList.findIndex(item => item.rawMaterialId === row.rawMaterialId);
if (index > -1) this.recentlySelectedList.splice(index, 1);
this.recentlySelectedList.unshift(row);
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();
}
},
handleSelect(row) {
if (this.multiple) {
const index = this.selectedIds.indexOf(row.rawMaterialId);
index > -1
? (this.selectedIds.splice(index, 1), this.selectedRows.splice(index, 1))
: (this.selectedIds.push(row.rawMaterialId), this.selectedRows.push(row));
} else {
this.selectedIds = [row.rawMaterialId];
this.selectedRows = [row];
this.confirmSelection();
}
},
confirmSelection() {
const emitValue = this.selectedIds.join(',');
this.$emit('input', emitValue);
this.$emit('change', emitValue, this.selectedRows);
// 赋值选中状态
this.selectedId = row.rawMaterialId;
this.selectedRow = row;
// 向父组件传值
this.$emit('input', this.selectedId);
this.$emit('change', this.selectedId, this.selectedRow);
// 关闭弹窗
this.dialogVisible = false;
},
// 弹窗关闭时恢复选中状态，防止误操作
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>
@@ -367,7 +325,7 @@ export default {
.material-card {
border: 1px solid #e6e6e6;
border-radius: 0px;
padding: 4px;
padding: 12px 16px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
@@ -385,17 +343,9 @@ export default {
background-color: #f0f7ff;
}
/* 多选勾选框位置 */
.card-checkbox {
position: absolute;
top: 16px;
right: 16px;
}
/* 卡片内容样式 */
.card-content {
margin-right: 24px;
/* 给多选框留空间 */
width: 100%;
}
.card-title {