@@ -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();
}
};
@@ -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 {