508 lines
13 KiB
Vue
508 lines
13 KiB
Vue
<template>
|
||
<!-- <view class="form-container"> -->
|
||
<!-- <view class="view-container"> -->
|
||
<view class="view-item view-item-3">
|
||
<view class="label" @click="onLabelClick">货区</view>
|
||
<view class="select" @click="openPicker">
|
||
{{ selectedStorage || '请选择货区' }}
|
||
</view>
|
||
<u-picker :show="showPicker" ref="uPicker" :columns="columns" @cancel="cancelPicker" @confirm="confirmPicker"
|
||
@change="changeHandler"></u-picker>
|
||
</view>
|
||
<!-- </view> -->
|
||
<!-- </view> -->
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'WarehouseSelector',
|
||
props: {
|
||
// 初始选中的货区
|
||
initialStorage: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 原始warehouse对象
|
||
initialWarehouse: {
|
||
type: Object,
|
||
default: null
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
showPicker: false,
|
||
selectedStorage: this.initialStorage,
|
||
warehouse: '',
|
||
shelf: '',
|
||
location: '',
|
||
columns: [
|
||
[], // 仓库列表
|
||
[], // 货架列表
|
||
[] // 货位列表
|
||
],
|
||
shelves: [], // 货架列表
|
||
locations: [], // 货位列表
|
||
selectedWarehouse: null,
|
||
selectedSheId: null,
|
||
selectedFreId: null
|
||
};
|
||
},
|
||
mounted() {
|
||
this.initData();
|
||
this.loadStorageSelection();
|
||
},
|
||
watch: {
|
||
// 监听initialWarehouse变化,重新初始化
|
||
initialWarehouse: {
|
||
handler(newValue) {
|
||
if (newValue) {
|
||
this.selectedWarehouse = newValue;
|
||
this.initData();
|
||
}
|
||
},
|
||
immediate: true
|
||
},
|
||
selectedWarehouse: {
|
||
handler(newVal, oldVal) {
|
||
if (newVal) {
|
||
// 重新拉取货架和货位数据
|
||
this.columns[0] = [newVal.name];
|
||
this.fetchShelves(newVal.id).then(shelves => {
|
||
if (shelves.length > 0) {
|
||
this.columns[1] = shelves.map(item => item.code);
|
||
this.fetchLocations(shelves[0].id).then(locations => {
|
||
this.columns[2] = locations.map(item => item.code);
|
||
|
||
// 在数据加载完成后，尝试加载该仓库的货区状态
|
||
this.$nextTick(() => {
|
||
this.loadStorageSelection();
|
||
});
|
||
});
|
||
} else {
|
||
this.columns[1] = [];
|
||
this.columns[2] = [];
|
||
// 没有货架数据时也要尝试加载货区状态（可能会清空）
|
||
this.$nextTick(() => {
|
||
this.loadStorageSelection();
|
||
});
|
||
}
|
||
});
|
||
|
||
// 如果是仓库切换（不是初始化），先清空当前状态
|
||
if (oldVal && oldVal.id !== newVal.id) {
|
||
console.log(`仓库从${oldVal.id}切换到${newVal.id}，清空当前货区状态`);
|
||
this.clearStorageSelection();
|
||
}
|
||
} else {
|
||
// 没有选择仓库时清空状态
|
||
this.clearStorageSelection();
|
||
}
|
||
},
|
||
immediate: true
|
||
}
|
||
},
|
||
methods: {
|
||
// 保存货区选择状态到本地存储
|
||
saveStorageSelection() {
|
||
// 只有在选择了仓库的情况下才保存货区状态
|
||
if (!this.selectedWarehouse || !this.selectedWarehouse.id) {
|
||
console.log('未选择仓库，不保存货区状态');
|
||
return;
|
||
}
|
||
|
||
const storageData = {
|
||
selectedStorage: this.selectedStorage,
|
||
warehouse: this.warehouse,
|
||
shelf: this.shelf,
|
||
location: this.location,
|
||
selectedSheId: this.selectedSheId,
|
||
selectedFreId: this.selectedFreId
|
||
};
|
||
|
||
// 使用仓库ID作为键的一部分，为每个仓库单独保存货区状态
|
||
const storageKey = `selectedStorageData_${this.selectedWarehouse.id}`;
|
||
uni.setStorageSync(storageKey, storageData);
|
||
console.log(`保存仓库${this.selectedWarehouse.id}的货区选择状态:`, storageData);
|
||
},
|
||
|
||
// 从本地存储加载货区选择状态
|
||
loadStorageSelection() {
|
||
try {
|
||
// 只有在选择了仓库的情况下才加载货区状态
|
||
if (!this.selectedWarehouse || !this.selectedWarehouse.id) {
|
||
console.log('未选择仓库，清空货区状态');
|
||
this.clearStorageSelection();
|
||
return;
|
||
}
|
||
|
||
// 根据仓库ID加载对应的货区状态
|
||
const storageKey = `selectedStorageData_${this.selectedWarehouse.id}`;
|
||
const storageData = uni.getStorageSync(storageKey);
|
||
|
||
if (storageData) {
|
||
console.log(`加载仓库${this.selectedWarehouse.id}的货区选择状态:`, storageData);
|
||
this.selectedStorage = storageData.selectedStorage || '';
|
||
this.warehouse = storageData.warehouse || '';
|
||
this.shelf = storageData.shelf || '';
|
||
this.location = storageData.location || '';
|
||
this.selectedSheId = storageData.selectedSheId || null;
|
||
this.selectedFreId = storageData.selectedFreId || null;
|
||
|
||
// 强制更新视图
|
||
this.$forceUpdate();
|
||
} else {
|
||
console.log(`仓库${this.selectedWarehouse.id}没有保存的货区状态，清空当前状态`);
|
||
this.clearStorageSelection();
|
||
}
|
||
} catch (error) {
|
||
console.error('加载货区选择状态失败:', error);
|
||
}
|
||
},
|
||
|
||
// 清空货区选择状态
|
||
clearStorageSelection() {
|
||
this.selectedStorage = '';
|
||
this.warehouse = '';
|
||
this.shelf = '';
|
||
this.location = '';
|
||
this.selectedSheId = null;
|
||
this.selectedFreId = null;
|
||
|
||
// 重置选择器的值
|
||
this.selectedValues = ['', '', ''];
|
||
|
||
// 强制更新视图
|
||
this.$forceUpdate();
|
||
console.log('已清空货区选择状态');
|
||
},
|
||
|
||
// 初始化数据
|
||
async initData() {
|
||
if (this.initialWarehouse) {
|
||
this.selectedWarehouse = this.initialWarehouse;
|
||
|
||
// 设置仓库列
|
||
this.columns[0] = [this.initialWarehouse.name];
|
||
|
||
// 加载货架数据
|
||
if (this.initialWarehouse.id) {
|
||
const shelves = await this.fetchShelves(this.initialWarehouse.id);
|
||
// console.log('初始化货架数据:', shelves);
|
||
|
||
// 如果存在货架数据,加载第一个货架的货位数据
|
||
if (shelves && shelves.length > 0) {
|
||
await this.fetchLocations(shelves[0].id);
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
// 更新选中的货区数据
|
||
updateSelectedStorage(data) {
|
||
// console.log('更新货区数据:', data);
|
||
if (data) {
|
||
this.selectedStorage = data.storage;
|
||
this.warehouse = data.warehouse;
|
||
this.shelf = data.shelf;
|
||
this.location = data.location;
|
||
this.selectedSheId = data.shelfId;
|
||
this.selectedFreId = data.locationId;
|
||
|
||
// 强制更新视图
|
||
this.$forceUpdate();
|
||
}
|
||
},
|
||
|
||
// 打开选择器
|
||
openPicker() {
|
||
// 在打开选择器前确保数据已加载
|
||
if (this.columns[0].length === 0 && this.selectedWarehouse) {
|
||
this.columns[0] = [this.selectedWarehouse.name];
|
||
}
|
||
this.showPicker = true;
|
||
},
|
||
|
||
// 点击标签
|
||
onLabelClick() {
|
||
this.$emit('label-click');
|
||
},
|
||
|
||
// 取消选择
|
||
cancelPicker() {
|
||
this.showPicker = false;
|
||
},
|
||
|
||
// 确认选择
|
||
confirmPicker(e) {
|
||
const {
|
||
value
|
||
} = e;
|
||
const [warehouse, shelf, location] = value;
|
||
|
||
// 只有当三个值都存在时才保存选中的值
|
||
if (warehouse && shelf && location) {
|
||
this.warehouse = warehouse;
|
||
this.shelf = shelf;
|
||
this.location = location;
|
||
|
||
// 更新显示文本
|
||
this.selectedStorage = `${warehouse} / ${shelf} / ${location}`;
|
||
|
||
// 查找选中项的ID
|
||
const selectedShelf = this.shelves.find(item => item.code === shelf);
|
||
const selectedLocation = this.locations.find(item => item.code === location);
|
||
|
||
// 保存选中ID
|
||
this.selectedSheId = selectedShelf?.id;
|
||
this.selectedFreId = selectedLocation?.id;
|
||
|
||
// 保存选择状态到本地存储
|
||
this.saveStorageSelection();
|
||
|
||
// 向父组件发送选中数据
|
||
this.$emit('storage-selected', {
|
||
storage: this.selectedStorage,
|
||
warehouse: this.warehouse,
|
||
shelf: this.shelf,
|
||
location: this.location,
|
||
shelfId: this.selectedSheId,
|
||
locationId: this.selectedFreId
|
||
});
|
||
} else {
|
||
// 如果不完整，提示用户
|
||
uni.showToast({
|
||
title: '请完整选择仓库、货架和货位',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
this.showPicker = false;
|
||
},
|
||
|
||
// 处理picker列变化
|
||
async changeHandler(e) {
|
||
// 防御性检查，确保e和必要的属性存在
|
||
if (!e) {
|
||
console.warn('changeHandler: 事件对象为空');
|
||
return;
|
||
}
|
||
|
||
// console.log('选择器变化:', e);
|
||
|
||
// 获取列索引和选中的索引数组
|
||
const {
|
||
columnIndex,
|
||
index
|
||
} = e;
|
||
|
||
// 如果是选择了仓库（第0列）
|
||
if (columnIndex === 0) {
|
||
// 获取选中的仓库
|
||
const warehouseName = this.columns[0][index];
|
||
|
||
// 使用仓库ID获取货架数据
|
||
if (this.selectedWarehouse && this.selectedWarehouse.id) {
|
||
await this.fetchShelves(this.selectedWarehouse.id);
|
||
}
|
||
}
|
||
|
||
// 如果是选择了货架（第1列）
|
||
if (columnIndex === 1 && this.shelves.length > 0) {
|
||
// 获取选中的货架
|
||
const selectedShelf = this.shelves[index];
|
||
// console.log('选中货架:', selectedShelf);
|
||
|
||
// 保存选中的货架ID
|
||
if (selectedShelf && selectedShelf.id) {
|
||
this.selectedSheId = selectedShelf.id;
|
||
await this.fetchLocations(selectedShelf.id);
|
||
}
|
||
}
|
||
},
|
||
|
||
// 获取货架列表
|
||
async fetchShelves(depotId) {
|
||
try {
|
||
// console.log('获取货架数据,仓库ID:', depotId);
|
||
|
||
const response = await uni.request({
|
||
url: 'https://api.buzhiyushu.cn/shelves/shelves/sheNamelist',
|
||
data: {
|
||
depotId
|
||
}
|
||
});
|
||
|
||
// 使用数组解构获取响应结果
|
||
const [err, res] = Array.isArray(response) ? response : [null, response];
|
||
|
||
if (!res?.data?.rows) {
|
||
console.error('获取货架数据失败,返回空数据');
|
||
return [];
|
||
}
|
||
|
||
this.shelves = res.data.rows; // 保存货架列表
|
||
this.columns[1] = this.shelves.map(item => item.code || '未知货架');
|
||
|
||
// console.log('获取到货架数据:', this.shelves);
|
||
// console.log('货架选项:', this.columns[1]);
|
||
|
||
// 更新UI
|
||
this.$nextTick(() => {
|
||
if (this.$refs.uPicker) {
|
||
this.$refs.uPicker.setColumnValues(1, this.columns[1]);
|
||
// 清空货位列
|
||
this.$refs.uPicker.setColumnValues(2, []);
|
||
}
|
||
});
|
||
|
||
return this.shelves;
|
||
} catch (error) {
|
||
console.error('获取货架失败:', error);
|
||
return [];
|
||
}
|
||
},
|
||
|
||
// 获取货位列表
|
||
async fetchLocations(sheId) {
|
||
if (!sheId) {
|
||
console.error('获取货位列表失败：未提供货架ID');
|
||
return [];
|
||
}
|
||
|
||
try {
|
||
// console.log('获取货位数据,货架ID:', sheId);
|
||
|
||
const response = await uni.request({
|
||
url: 'https://api.buzhiyushu.cn/shelves/shelves/freNamelist',
|
||
method: 'GET',
|
||
data: {
|
||
sheId
|
||
}
|
||
});
|
||
|
||
// 使用数组解构获取响应结果
|
||
const [err, res] = Array.isArray(response) ? response : [null, response];
|
||
|
||
if (err) {
|
||
console.error('获取货位请求错误:', err);
|
||
return [];
|
||
}
|
||
|
||
if (!res || !res.data || !res.data.rows) {
|
||
console.error('货位响应数据格式不正确');
|
||
return [];
|
||
}
|
||
|
||
const locations = res.data.rows;
|
||
// console.log('获取到货位数据:', locations);
|
||
|
||
// 保存货位数据
|
||
this.locations = locations;
|
||
|
||
// 更新货位列
|
||
this.columns[2] = locations.map(item => item.code || '未知货位');
|
||
// console.log('货位选项:', this.columns[2]);
|
||
|
||
// 更新UI
|
||
this.$nextTick(() => {
|
||
if (this.$refs.uPicker) {
|
||
this.$refs.uPicker.setColumnValues(2, this.columns[2]);
|
||
}
|
||
});
|
||
|
||
return locations;
|
||
} catch (error) {
|
||
console.error('获取货位列表失败:', error);
|
||
return [];
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
// 监听外部更新事件
|
||
this.$on('storage-selected', this.updateSelectedStorage);
|
||
},
|
||
beforeDestroy() {
|
||
// 移除事件监听
|
||
this.$off('storage-selected', this.updateSelectedStorage);
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<style scoped>
|
||
.view-container {
|
||
display: flex;
|
||
background-color: #fff;
|
||
margin-bottom: 20rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.view-item {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
/* 垂直居中 */
|
||
padding: 3rpx 0;
|
||
text-align: center;
|
||
color: #666;
|
||
position: relative;
|
||
/* border-bottom: 1px solid #ccc; */
|
||
}
|
||
|
||
.view-item-3 {
|
||
flex: 3 !important;
|
||
}
|
||
|
||
.view-item-4 {
|
||
flex: 4 !important;
|
||
}
|
||
|
||
.view-item-6 {
|
||
flex: 6 !important;
|
||
}
|
||
|
||
.view-item-7 {
|
||
flex: 7 !important;
|
||
}
|
||
|
||
.view-item>.label {
|
||
padding: 0rpx 15rpx;
|
||
text-align: center;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
color: #000;
|
||
font-size: 28rpx;
|
||
background-color: #ccc;
|
||
border-radius: 8rpx;
|
||
margin-right: 20rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.view-item>.select {
|
||
padding: 16rpx 0rpx;
|
||
text-align: center;
|
||
width: 100%;
|
||
height: 40rpx;
|
||
font-size: 18rpx;
|
||
line-height: 45rpx;
|
||
}
|
||
|
||
.form-container {
|
||
padding-left: 10rpx;
|
||
background-color: #fff;
|
||
}
|
||
|
||
::v-deep .u-picker__view__column__item[class*="data-v-"] {
|
||
font-size: 30rpx !important;
|
||
}
|
||
|
||
/* 确保选择器文本也使用相同大小 */
|
||
.view-item>.select {
|
||
font-size: 23rpx !important;
|
||
}
|
||
|
||
::v-deep .data-v-55c89db1 .u-toolbar__wrapper__confirm.data-v-55c89db1 {
|
||
color: #3c9cff;
|
||
font-size: 45rpx;
|
||
padding: 0 15rpx;
|
||
}
|
||
</style> |