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

77
klp-ui/src/components/KLPService/ActualWarehouseSelect/index.vue
View File

@@ -3,13 +3,27 @@
:class="['actual-warehouse-select', { 'is-block': block }]"
:style="wrapperStyle"
>
<!-- 新增：clearInput为true时展示 只读+可清除 的输入框，展示选中名称 -->
<el-input
v-loading="currentLoading"
v-if="clearInput"
v-model="selectedLabel"
clearable
readonly
placeholder="当前未选择库位"
style="width: 100%; margin-bottom: 8px; border: 1px solid greenyellow;"
@clear="handleClearInput"
>
<el-button slot="append" icon="el-icon-remove" @click="handleClearInput">清除</el-button>
</el-input>
<el-cascader
filterable
ref="cascader"
v-model="innerPath"
:props="cascaderProps"
:placeholder="placeholder"
:clearable="clearable"
:clearable="clearable && !clearInput"
:show-all-levels="true"
:emit-path="true"
style="width: 100%;"
@@ -19,7 +33,7 @@
</template>
<script>
import { listActualWarehouse } from '@/api/wms/actualWarehouse';
import { listActualWarehouse, getActualWarehouse } from '@/api/wms/actualWarehouse';
export default {
name: 'ActualWarehouseSelect',
@@ -62,6 +76,11 @@ export default {
canSelectDisabled: {
type: Boolean,
default: false
},
// ========== 新增核心属性 ==========
clearInput: {
type: Boolean,
default: true
}
},
data() {
@@ -69,7 +88,11 @@ export default {
// 级联组件内部使用的「路径值」，例如 [一级ID, 二级ID, 三级ID]
innerPath: [],
// 记录所有已加载节点（如果后面要根据 ID 反查路径，可复用）
allLoadedNodes: []
allLoadedNodes: [],
// ========== 新增：绑定输入框展示的选中名称文本 ==========
selectedLabel: '',
// ========== 新增：加载中状态 ==========
currentLoading: false,
};
},
computed: {
@@ -92,11 +115,29 @@ export default {
}
},
watch: {
// 外部把 value 置空时，同步清空面板
value(val) {
if (val == null || val === '') {
this.innerPath = [];
}
// 外部把 value 置空时，同步清空面板 + 清空输入框文本
value: {
handler(val) {
if (val == null || val === '') {
this.innerPath = [];
this.selectedLabel = '';
return;
}
if (val == '-1') {
this.selectedLabel = '空库位';
return;
}
if (val) {
// this.innerPath = [val];
this.selectedLabel = val;
this.currentLoading = true;
getActualWarehouse(val).then(res => {
this.selectedLabel = res.data.actualWarehouseName || '';
this.currentLoading = false;
});
}
},
immediate: true
}
},
methods: {
@@ -109,7 +150,7 @@ export default {
*/
loadNode(node, resolve) {
const { level, value } = node;
// 超过第三级就不再加载
if (level >= 3) {
resolve([]);
@@ -176,11 +217,13 @@ export default {
* 选中变化：
* value 是路径数组，如 [一级ID, 二级ID, 三级ID]
* 我们对外只抛最后一个（第三级）ID
* 新增：同步赋值输入框的展示文本
*/
handleChange(value) {
if (!Array.isArray(value) || value.length === 0) {
this.$emit('input', null);
this.$emit('select', null);
this.selectedLabel = ''; // 清空选中时，输入框文本置空
return;
}
@@ -200,16 +243,30 @@ export default {
// 原始 data（如果需要后台做别的处理可以用）
rawPath: pathNodes.map(n => n.data || n.raw || {})
};
// ========== 核心新增：拼接选中的完整路径名称，赋值给输入框 ==========
this.selectedLabel = payload.pathLabels.join(' / ');
}
this.$emit('input', leafId);
this.$emit('select', payload);
},
// ========== 新增核心方法：输入框清除按钮点击事件 ==========
handleClearInput() {
// 1. 清空输入框文本
this.selectedLabel = '';
// 2. 清空级联选择器的选中路径
this.innerPath = [];
// 3. 对外抛出清空的事件，和级联自身清空逻辑一致
this.$emit('input', '-1');
this.$emit('select', null);
},
/** 外部刷新：如果以后需要强制重载，可以扩展这里（目前不需要缓存） */
refresh() {
this.innerPath = [];
this.allLoadedNodes = [];
this.selectedLabel = ''; // 刷新时同步清空输入框
// el-cascader 的懒加载不需要预载，这里清空即可
}
}
@@ -230,4 +287,4 @@ export default {
.actual-warehouse-select .el-cascader {
width: 100%;
}
</style>
</style>

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 {

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 {