feat(hand-factory): 添加物品类型选择组件
实现成品和原材料的选择器组件，包含类型选择、搜索过滤和弹窗交互功能
This commit is contained in:
砂糖
@@ -72,15 +72,7 @@
|
||||
<!-- 目标库区 -->
|
||||
<view class="form-item form-item-optional">
|
||||
<text class="form-label-optional">目标库位</text>
|
||||
<view
|
||||
class="picker-input"
|
||||
@click="showWarehousePicker()"
|
||||
>
|
||||
<text class="picker-text" :class="{ 'picker-placeholder': !warehouseName }">
|
||||
{{ warehouseName || '请选择目标库位' }}
|
||||
</text>
|
||||
<text class="picker-arrow">▼</text>
|
||||
</view>
|
||||
<klp-warehouse-picker v-model="warehouseId" :disabled="coilDetail.dataType === 0" placeholder="请选择目标库区" />
|
||||
</view>
|
||||
|
||||
<!-- 实际库区 -->
|
||||
@@ -90,48 +82,11 @@
|
||||
ware-type="actual" />
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 物品类型选择 -->
|
||||
<view class="form-item form-item-optional">
|
||||
<text class="form-label-optional">物品类型</text>
|
||||
<view
|
||||
class="picker-input"
|
||||
@click="showItemTypePicker()"
|
||||
>
|
||||
<text class="picker-text" :class="{ 'picker-placeholder': !itemType }">
|
||||
{{ itemType === 'product' ? '成品' : itemType === 'raw_material' ? '原料' : '请选择物品类型' }}
|
||||
</text>
|
||||
<text class="picker-arrow">▼</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 产品选择（仅当选择了成品类型时显示） -->
|
||||
<view class="form-item form-item-optional" v-if="itemType === 'product'">
|
||||
<text class="form-label-optional">选择产品</text>
|
||||
<view
|
||||
class="picker-input"
|
||||
@click="showProductPicker()"
|
||||
>
|
||||
<text class="picker-text" :class="{ 'picker-placeholder': !selectedProductName }">
|
||||
{{ selectedProductName || '请选择产品' }}
|
||||
</text>
|
||||
<text class="picker-arrow">▼</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 原材料选择（仅当选择了原料类型时显示） -->
|
||||
<view class="form-item form-item-optional" v-if="itemType === 'raw_material'">
|
||||
<text class="form-label-optional">选择原材料</text>
|
||||
<view
|
||||
class="picker-input"
|
||||
@click="showRawMaterialPicker()"
|
||||
>
|
||||
<text class="picker-text" :class="{ 'picker-placeholder': !selectedRawMaterialName }">
|
||||
{{ selectedRawMaterialName || '请选择原材料' }}
|
||||
</text>
|
||||
<text class="picker-arrow">▼</text>
|
||||
</view>
|
||||
</view>
|
||||
<klp-material-picker
|
||||
:item-type.sync="itemType"
|
||||
:item-id.sync="itemId"
|
||||
:page-size="2000"
|
||||
/>
|
||||
|
||||
<!-- 毛重 -->
|
||||
<view class="form-item form-item-optional">
|
||||
@@ -174,131 +129,12 @@
|
||||
<view class="tip-card" v-if="scannedCoils.length === 1">
|
||||
<text class="tip-text">至少需要扫描 2 个钢卷才能进行合卷操作</text>
|
||||
</view>
|
||||
|
||||
<!-- 库区选择弹窗 -->
|
||||
<uni-popup ref="warehousePopup" type="bottom">
|
||||
<view class="warehouse-popup">
|
||||
<view class="popup-header">
|
||||
<text class="popup-title">选择库区</text>
|
||||
<text class="popup-close" @click="closeWarehousePicker">✕</text>
|
||||
</view>
|
||||
<view class="popup-search">
|
||||
<input
|
||||
v-model="warehouseSearchKeyword"
|
||||
@input="filterWarehousesInPicker"
|
||||
placeholder="搜索库区名称"
|
||||
class="search-input"
|
||||
/>
|
||||
</view>
|
||||
<scroll-view class="popup-body" scroll-y>
|
||||
<view
|
||||
class="warehouse-item"
|
||||
v-for="warehouse in filteredWarehousesInPicker"
|
||||
:key="warehouse.warehouseId"
|
||||
@click="selectWarehouseFromPicker(warehouse)"
|
||||
>
|
||||
<text class="warehouse-name">{{ warehouse.warehouseName }}</text>
|
||||
<text class="warehouse-check" v-if="warehouseId === warehouse.warehouseId">✓</text>
|
||||
</view>
|
||||
<view class="empty-tip" v-if="!filteredWarehousesInPicker || filteredWarehousesInPicker.length === 0">
|
||||
<text>未找到匹配的库区</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<!-- 产品选择弹窗 -->
|
||||
<uni-popup ref="productPopup" type="bottom">
|
||||
<view class="warehouse-popup">
|
||||
<view class="popup-header">
|
||||
<text class="popup-title">选择产品</text>
|
||||
<text class="popup-close" @click="closeProductPicker">✕</text>
|
||||
</view>
|
||||
<view class="popup-search">
|
||||
<input
|
||||
v-model="productSearchKeyword"
|
||||
@input="filterProductsInPicker"
|
||||
placeholder="搜索产品名称"
|
||||
class="search-input"
|
||||
/>
|
||||
</view>
|
||||
<scroll-view class="popup-body" scroll-y>
|
||||
<view
|
||||
class="warehouse-item"
|
||||
v-for="product in filteredProductsInPicker"
|
||||
:key="product.productId"
|
||||
@click="selectProductFromPicker(product)"
|
||||
>
|
||||
<text class="warehouse-name">{{ product.productName }}</text>
|
||||
<text class="warehouse-check" v-if="itemId === product.productId">✓</text>
|
||||
</view>
|
||||
<view class="empty-tip" v-if="!filteredProductsInPicker || filteredProductsInPicker.length === 0">
|
||||
<text>未找到匹配的产品</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<!-- 原材料选择弹窗 -->
|
||||
<uni-popup ref="rawMaterialPopup" type="bottom">
|
||||
<view class="warehouse-popup">
|
||||
<view class="popup-header">
|
||||
<text class="popup-title">选择原材料</text>
|
||||
<text class="popup-close" @click="closeRawMaterialPicker">✕</text>
|
||||
</view>
|
||||
<view class="popup-search">
|
||||
<input
|
||||
v-model="rawMaterialSearchKeyword"
|
||||
@input="filterRawMaterialsInPicker"
|
||||
placeholder="搜索原材料名称"
|
||||
class="search-input"
|
||||
/>
|
||||
</view>
|
||||
<scroll-view class="popup-body" scroll-y>
|
||||
<view
|
||||
class="warehouse-item"
|
||||
v-for="material in filteredRawMaterialsInPicker"
|
||||
:key="material.rawMaterialId"
|
||||
@click="selectRawMaterialFromPicker(material)"
|
||||
>
|
||||
<text class="warehouse-name">{{ material.rawMaterialName }}</text>
|
||||
<text class="warehouse-check" v-if="itemId === material.rawMaterialId">✓</text>
|
||||
</view>
|
||||
<view class="empty-tip" v-if="!filteredRawMaterialsInPicker || filteredRawMaterialsInPicker.length === 0">
|
||||
<text>未找到匹配的原材料</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<!-- 物品类型选择弹窗 -->
|
||||
<uni-popup ref="itemTypePopup" type="bottom">
|
||||
<view class="warehouse-popup">
|
||||
<view class="popup-header">
|
||||
<text class="popup-title">选择物品类型</text>
|
||||
<text class="popup-close" @click="closeItemTypePicker">✕</text>
|
||||
</view>
|
||||
<scroll-view class="popup-body" scroll-y>
|
||||
<view class="warehouse-item" @click="selectItemType('product')">
|
||||
<text class="warehouse-name">成品</text>
|
||||
<text class="warehouse-check" v-if="itemType === 'product'">✓</text>
|
||||
</view>
|
||||
<view class="warehouse-item" @click="selectItemType('raw_material')">
|
||||
<text class="warehouse-name">原料</text>
|
||||
<text class="warehouse-check" v-if="itemType === 'raw_material'">✓</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getGenerateRecord } from '@/api/wms/code.js'
|
||||
import { updateMaterialCoil, getMaterialCoil, getMaterialCoilTrace } from '@/api/wms/coil.js'
|
||||
import { listWarehouse } from '@/api/wms/warehouse.js'
|
||||
import { listProduct } from '@/api/wms/product.js'
|
||||
import { listRawMaterial } from '@/api/wms/rawMaterial.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@@ -331,19 +167,6 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
onLoad() {
|
||||
this.loadWarehouses();
|
||||
this.loadProducts();
|
||||
this.loadRawMaterials();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.loadWarehouses();
|
||||
this.loadProducts();
|
||||
this.loadRawMaterials();
|
||||
},
|
||||
|
||||
computed: {
|
||||
operatorName() {
|
||||
return this.$store.state.user.nickName || this.$store.state.user.name || '未知'
|
||||
@@ -351,226 +174,6 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 加载库区列表
|
||||
async loadWarehouses() {
|
||||
console.log('合卷页面开始加载库区...');
|
||||
try {
|
||||
const res = await listWarehouse({ pageNum: 1, pageSize: 1000 });
|
||||
console.log("合卷页面库区返回值", res);
|
||||
if (res.code === 200) {
|
||||
this.warehouses = res.data || [];
|
||||
this.filteredWarehouses = [...this.warehouses];
|
||||
console.log('合卷页面库区加载成功，数量:', this.warehouses.length);
|
||||
} else {
|
||||
console.error('合卷页面库区加载失败:', res.msg);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('合卷页面加载库区异常:', err);
|
||||
}
|
||||
},
|
||||
|
||||
// 加载产品列表
|
||||
async loadProducts() {
|
||||
console.log('开始加载产品列表...');
|
||||
try {
|
||||
const res = await listProduct({ pageNum: 1, pageSize: 1000 });
|
||||
console.log("产品返回值", res);
|
||||
if (res.code === 200) {
|
||||
this.products = res.rows || res.data || [];
|
||||
this.filteredProductsInPicker = this.products;
|
||||
console.log('产品加载成功，数量:', this.products.length);
|
||||
} else {
|
||||
console.error('产品加载失败:', res.msg);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('加载产品异常:', err);
|
||||
}
|
||||
},
|
||||
|
||||
// 加载原材料列表
|
||||
async loadRawMaterials() {
|
||||
console.log('开始加载原材料列表...');
|
||||
try {
|
||||
const res = await listRawMaterial({ pageNum: 1, pageSize: 1000 });
|
||||
console.log("原材料返回值", res);
|
||||
if (res.code === 200) {
|
||||
this.rawMaterials = res.rows || res.data || [];
|
||||
this.filteredRawMaterialsInPicker = this.rawMaterials;
|
||||
console.log('原材料加载成功，数量:', this.rawMaterials.length);
|
||||
} else {
|
||||
console.error('原材料加载失败:', res.msg);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('加载原材料异常:', err);
|
||||
}
|
||||
},
|
||||
|
||||
// 显示产品选择器
|
||||
showProductPicker() {
|
||||
this.productSearchKeyword = '';
|
||||
this.filteredProductsInPicker = [...this.products];
|
||||
this.$refs.productPopup.open();
|
||||
},
|
||||
|
||||
// 关闭产品选择器
|
||||
closeProductPicker() {
|
||||
this.$refs.productPopup.close();
|
||||
},
|
||||
|
||||
// 过滤产品（在选择器中）
|
||||
filterProductsInPicker() {
|
||||
const keyword = this.productSearchKeyword.trim().toLowerCase();
|
||||
if (!keyword) {
|
||||
this.filteredProductsInPicker = [...this.products];
|
||||
} else {
|
||||
this.filteredProductsInPicker = this.products.filter(product => {
|
||||
const name = (product.productName || '').toLowerCase();
|
||||
return name.includes(keyword);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 从选择器中选择产品
|
||||
selectProductFromPicker(product) {
|
||||
this.itemId = product.productId;
|
||||
this.itemType = 'product';
|
||||
this.selectedProductName = product.productName;
|
||||
uni.showToast({
|
||||
title: `已选择产品：${product.productName}`,
|
||||
icon: 'success'
|
||||
});
|
||||
this.closeProductPicker();
|
||||
},
|
||||
|
||||
// 显示原材料选择器
|
||||
showRawMaterialPicker() {
|
||||
this.rawMaterialSearchKeyword = '';
|
||||
this.filteredRawMaterialsInPicker = [...this.rawMaterials];
|
||||
this.$refs.rawMaterialPopup.open();
|
||||
},
|
||||
|
||||
// 关闭原材料选择器
|
||||
closeRawMaterialPicker() {
|
||||
this.$refs.rawMaterialPopup.close();
|
||||
},
|
||||
|
||||
// 过滤原材料（在选择器中）
|
||||
filterRawMaterialsInPicker() {
|
||||
const keyword = this.rawMaterialSearchKeyword.trim().toLowerCase();
|
||||
if (!keyword) {
|
||||
this.filteredRawMaterialsInPicker = [...this.rawMaterials];
|
||||
} else {
|
||||
this.filteredRawMaterialsInPicker = this.rawMaterials.filter(material => {
|
||||
const name = (material.rawMaterialName || '').toLowerCase();
|
||||
return name.includes(keyword);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 从选择器中选择原材料
|
||||
selectRawMaterialFromPicker(material) {
|
||||
this.itemId = material.rawMaterialId;
|
||||
this.itemType = 'raw_material';
|
||||
this.selectedRawMaterialName = material.rawMaterialName;
|
||||
uni.showToast({
|
||||
title: `已选择原材料：${material.rawMaterialName}`,
|
||||
icon: 'success'
|
||||
});
|
||||
this.closeRawMaterialPicker();
|
||||
},
|
||||
|
||||
// 过滤库区
|
||||
filterWarehouses() {
|
||||
console.log('合卷页面过滤库区，关键词:', this.warehouseKeyword);
|
||||
console.log('合卷页面当前库区列表:', this.warehouses);
|
||||
const keyword = this.warehouseKeyword.trim().toLowerCase();
|
||||
if (!keyword) {
|
||||
this.filteredWarehouses = this.warehouses;
|
||||
} else {
|
||||
this.filteredWarehouses = this.warehouses.filter(warehouse => {
|
||||
const name = (warehouse.warehouseName || '').toLowerCase();
|
||||
return name.includes(keyword);
|
||||
});
|
||||
}
|
||||
console.log('合卷页面过滤后库区数量:', this.filteredWarehouses.length);
|
||||
this.showWarehouseList = true;
|
||||
},
|
||||
|
||||
// 选择库区
|
||||
selectWarehouse(warehouse) {
|
||||
this.warehouseId = warehouse.warehouseId;
|
||||
this.warehouseName = warehouse.warehouseName;
|
||||
this.warehouseKeyword = warehouse.warehouseName;
|
||||
this.showWarehouseList = false;
|
||||
},
|
||||
|
||||
// 关闭库区搜索列表
|
||||
closeWarehouseList() {
|
||||
this.showWarehouseList = false;
|
||||
},
|
||||
|
||||
// 显示库区选择器
|
||||
showWarehousePicker() {
|
||||
this.warehouseSearchKeyword = '';
|
||||
this.filteredWarehousesInPicker = [...this.warehouses];
|
||||
this.$refs.warehousePopup.open();
|
||||
},
|
||||
|
||||
// 关闭库区选择器
|
||||
closeWarehousePicker() {
|
||||
this.$refs.warehousePopup.close();
|
||||
},
|
||||
|
||||
// 在选择器中过滤库区
|
||||
filterWarehousesInPicker() {
|
||||
const keyword = this.warehouseSearchKeyword.trim().toLowerCase();
|
||||
if (!keyword) {
|
||||
this.filteredWarehousesInPicker = [...this.warehouses];
|
||||
} else {
|
||||
this.filteredWarehousesInPicker = this.warehouses.filter(warehouse => {
|
||||
const name = (warehouse.warehouseName || '').toLowerCase();
|
||||
return name.includes(keyword);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 从选择器中选择库区
|
||||
async selectWarehouseFromPicker(warehouse) {
|
||||
this.warehouseId = warehouse.warehouseId;
|
||||
this.warehouseName = warehouse.warehouseName;
|
||||
this.warehouseKeyword = warehouse.warehouseName;
|
||||
this.closeWarehousePicker();
|
||||
},
|
||||
|
||||
// 显示物品类型选择器
|
||||
showItemTypePicker() {
|
||||
this.$refs.itemTypePopup.open();
|
||||
},
|
||||
|
||||
// 关闭物品类型选择器
|
||||
closeItemTypePicker() {
|
||||
this.$refs.itemTypePopup.close();
|
||||
},
|
||||
|
||||
// 选择物品类型
|
||||
selectItemType(type) {
|
||||
// 设置物品类型
|
||||
this.itemType = type;
|
||||
// 清空之前选择的物品
|
||||
this.itemId = undefined;
|
||||
this.selectedProductName = '';
|
||||
this.selectedRawMaterialName = '';
|
||||
|
||||
this.closeItemTypePicker();
|
||||
|
||||
// 根据类型自动弹出对应的选择器
|
||||
if (type === 'product') {
|
||||
this.showProductPicker();
|
||||
} else if (type === 'raw_material') {
|
||||
this.showRawMaterialPicker();
|
||||
}
|
||||
},
|
||||
|
||||
// 扫码
|
||||
handleScan() {
|
||||
uni.scanCode({
|
||||
|
||||
Reference in New Issue
Block a user