DeXun/klp-mono
9
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(hand-factory): 添加物品类型选择组件

Browse Source 
实现成品和原材料的选择器组件，包含类型选择、搜索过滤和弹窗交互功能
This commit is contained in:
砂糖
2025-11-04 17:41:42 +08:00
parent 157bf7559c
commit f3d27a2baa
4 changed files with 489 additions and 1205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

365
apps/hand-factory/components/panels/code/apart.vue
View File

@@ -80,57 +80,18 @@
<view class="split-field">
<text class="field-label-optional">目标库位</text>
<klp-warehouse-picker v-model="item.warehouseId" placeholder="请选择目标库区" />
<!-- <view class="picker-input" @click="showWarehousePickerForItem(index)">
<text class="picker-text" :class="{ 'picker-placeholder': !item.warehouseName }">
{{ item.warehouseName || '请选择目标库区' }}
</text>
<text class="picker-arrow">▼</text>
</view> -->
</view>
<view class="split-field">
<text class="field-label-optional">实际库区</text>
<klp-warehouse-picker v-model="item.actualWarehouseId" placeholder="请选择实际库区" ware-type="actual" />
<!-- <view class="picker-input" @click="showWarehousePickerForItem(index)">
<text class="picker-text" :class="{ 'picker-placeholder': !item.warehouseName }">
{{ item.warehouseName || '请选择目标库区' }}
</text>
<text class="picker-arrow">▼</text>
</view> -->
</view>
<!-- 物品类型选择 -->
<view class="split-field">
<text class="field-label-optional">物品类型</text>
<view class="picker-input" @click="showItemTypePickerForItem(index)">
<text class="picker-text" :class="{ 'picker-placeholder': !item.itemType }">
{{ item.itemType === 'product' ? '成品' : item.itemType === 'raw_material' ? '原料' : '请选择物品类型' }}
</text>
<text class="picker-arrow">▼</text>
</view>
</view>
<!-- 产品选择（仅当选择了成品类型时显示） -->
<view class="split-field" v-if="item.itemType === 'product'">
<text class="field-label-optional">选择产品</text>
<view class="picker-input" @click="showProductPickerForItem(index)">
<text class="picker-text" :class="{ 'picker-placeholder': !item.productName }">
{{ item.productName || '请选择产品' }}
</text>
<text class="picker-arrow">▼</text>
</view>
</view>
<!-- 原材料选择（仅当选择了原料类型时显示） -->
<view class="split-field" v-if="item.itemType === 'raw_material'">
<text class="field-label-optional">选择原材料</text>
<view class="picker-input" @click="showRawMaterialPickerForItem(index)">
<text class="picker-text" :class="{ 'picker-placeholder': !item.rawMaterialName }">
{{ item.rawMaterialName || '请选择原材料' }}
</text>
<text class="picker-arrow">▼</text>
</view>
</view>
<klp-material-picker
:item-type.sync="item.itemType"
:item-id.sync="item.itemId"
:page-size="2000"
/>
<view class="split-field">
<text class="field-label-optional">毛重 (吨)</text>
@@ -159,78 +120,6 @@
</view>
</view>
<!-- 产品选择弹窗 -->
<uni-popup ref="productPopup" type="bottom">
<view class="warehouse-popup">
<view class="popup-header">
<text class="popup-title">选择产品</text>
<text class="popup-close" @click="closeProductPickerForItem">✕</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="currentPickerItemIndex !== -1 && splitCoils[currentPickerItemIndex].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="closeRawMaterialPickerForItem">✕</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="currentPickerItemIndex !== -1 && splitCoils[currentPickerItemIndex].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="closeItemTypePickerForItem">✕</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="currentPickerItemIndex !== -1 && splitCoils[currentPickerItemIndex].itemType === 'product'">✓</text>
</view>
<view class="warehouse-item" @click="selectItemType('raw_material')">
<text class="warehouse-name">原料</text>
<text class="warehouse-check"
v-if="currentPickerItemIndex !== -1 && splitCoils[currentPickerItemIndex].itemType === 'raw_material'">✓</text>
</view>
</scroll-view>
</view>
</uni-popup>
<!-- BOM弹窗 -->
<uni-popup ref="bomPopup" type="bottom">
<view class="bom-popup">
@@ -270,15 +159,6 @@
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() {
@@ -343,95 +223,7 @@
}
},
onLoad() {
this.loadProducts();
this.loadRawMaterials();
},
mounted() {
this.loadProducts();
this.loadRawMaterials();
},
methods: {
// 加载产品列表
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);
}
},
// 显示物品类型选择器
showItemTypePickerForItem(index) {
this.currentPickerItemIndex = index;
this.$refs.itemTypePopup.open();
},
// 关闭物品类型选择器
closeItemTypePickerForItem() {
this.$refs.itemTypePopup.close();
this.currentPickerItemIndex = -1;
},
// 选择物品类型
selectItemType(type) {
if (this.currentPickerItemIndex === -1) return;
const item = this.splitCoils[this.currentPickerItemIndex];
const currentIndex = this.currentPickerItemIndex;
// 设置物品类型
this.$set(item, 'itemType', type);
// 清空之前选择的物品
this.$set(item, 'itemId', undefined);
this.$set(item, 'productName', '');
this.$set(item, 'rawMaterialName', '');
this.closeItemTypePickerForItem();
// 根据类型自动弹出对应的选择器
if (type === 'product') {
this.showProductPickerForItem(currentIndex);
} else if (type === 'raw_material') {
this.showRawMaterialPickerForItem(currentIndex);
}
},
// 显示BOM弹窗
showBomDialog() {
this.$refs.bomPopup.open();
@@ -442,151 +234,6 @@
this.$refs.bomPopup.close();
},
// 显示产品选择器（为特定分卷）
showProductPickerForItem(index) {
this.currentPickerItemIndex = index;
this.productSearchKeyword = '';
this.filteredProductsInPicker = [...this.products];
this.$refs.productPopup.open();
},
// 关闭产品选择器
closeProductPickerForItem() {
this.$refs.productPopup.close();
this.currentPickerItemIndex = -1;
},
// 过滤产品（在选择器中）
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) {
if (this.currentPickerItemIndex === -1) return;
const item = this.splitCoils[this.currentPickerItemIndex];
item.itemId = product.productId;
item.itemType = 'product';
item.productName = product.productName; // 保存产品名称用于显示
uni.showToast({
title: `分卷 ${this.currentPickerItemIndex + 1} 已选择产品：${product.productName}`,
icon: 'success'
});
this.closeProductPickerForItem();
},
// 显示原材料选择器（为特定分卷）
showRawMaterialPickerForItem(index) {
this.currentPickerItemIndex = index;
this.rawMaterialSearchKeyword = '';
this.filteredRawMaterialsInPicker = [...this.rawMaterials];
this.$refs.rawMaterialPopup.open();
},
// 关闭原材料选择器
closeRawMaterialPickerForItem() {
this.$refs.rawMaterialPopup.close();
this.currentPickerItemIndex = -1;
},
// 过滤原材料（在选择器中）
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) {
if (this.currentPickerItemIndex === -1) return;
const item = this.splitCoils[this.currentPickerItemIndex];
item.itemId = material.rawMaterialId;
item.itemType = 'raw_material';
item.rawMaterialName = material.rawMaterialName; // 保存原材料名称用于显示
uni.showToast({
title: `分卷 ${this.currentPickerItemIndex + 1} 已选择原材料：${material.rawMaterialName}`,
icon: 'success'
});
this.closeRawMaterialPickerForItem();
},
// 过滤库区（为特定分卷）
filterWarehousesForItem(index) {
console.log(`分卷页面过滤库区，分卷${index + 1}，关键词:`, this.splitCoils[index].warehouseKeyword);
console.log('分卷页面当前库区列表:', this.warehouses);
const item = this.splitCoils[index];
const keyword = item.warehouseKeyword.trim().toLowerCase();
if (!keyword) {
item.filteredWarehouses = [...this.warehouses];
} else {
item.filteredWarehouses = this.warehouses.filter(warehouse => {
const name = (warehouse.warehouseName || '').toLowerCase();
return name.includes(keyword);
});
}
console.log(`分卷页面过滤后库区数量:`, item.filteredWarehouses.length);
item.showWarehouseList = true;
},
// 选择库区（为特定分卷）
selectWarehouseForItem(index, warehouse) {
const item = this.splitCoils[index];
item.warehouseId = warehouse.warehouseId;
item.warehouseName = warehouse.warehouseName;
item.warehouseKeyword = warehouse.warehouseName;
item.showWarehouseList = false;
},
// 关闭所有库区搜索列表
closeWarehouseList() {
this.splitCoils.forEach(item => {
item.showWarehouseList = false;
});
},
// 显示库区选择器（为特定分卷）
showWarehousePickerForItem(index) {
this.currentPickerItemIndex = index;
this.warehouseSearchKeyword = '';
this.filteredWarehousesInPicker = [...this.warehouses];
this.$refs.warehousePopup.open();
},
// 关闭库区选择器
closeWarehousePickerForItem() {
this.currentPickerItemIndex = -1;
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);
});
}
},
// 扫码
handleScan() {
uni.scanCode({

409
apps/hand-factory/components/panels/code/merge.vue
View File

@@ -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({

454
apps/hand-factory/components/panels/code/typing.vue
View File

@@ -83,41 +83,13 @@
placeholder="请选择目标库区" ware-type="actual" />
</view>
<!-- 物品类型选择 -->
<view class="form-item form-item-optional">
<text class="form-label-optional">物品类型</text>
<view class="picker-input" @click="coilDetail.dataType !== 0 && showItemTypePicker()"
:class="{ 'picker-input-disabled': coilDetail.dataType === 0 }">
<text class="picker-text" :class="{ 'picker-placeholder': !form.itemType }">
{{ form.itemType === 'product' ? '成品' : form.itemType === 'raw_material' ? '原料' : '请选择物品类型' }}
</text>
<text class="picker-arrow" v-if="coilDetail.dataType !== 0">▼</text>
</view>
</view>
<!-- 产品选择（仅当选择了成品类型时显示） -->
<view class="form-item form-item-optional" v-if="form.itemType === 'product'">
<text class="form-label-optional">选择产品</text>
<view class="picker-input" @click="coilDetail.dataType !== 0 && showProductPicker()"
:class="{ 'picker-input-disabled': coilDetail.dataType === 0 }">
<text class="picker-text" :class="{ 'picker-placeholder': !selectedProductName }">
{{ selectedProductName || '请选择产品' }}
</text>
<text class="picker-arrow" v-if="coilDetail.dataType !== 0">▼</text>
</view>
</view>
<!-- 原材料选择（仅当选择了原料类型时显示） -->
<view class="form-item form-item-optional" v-if="form.itemType === 'raw_material'">
<text class="form-label-optional">选择原材料</text>
<view class="picker-input" @click="coilDetail.dataType !== 0 && showRawMaterialPicker()"
:class="{ 'picker-input-disabled': coilDetail.dataType === 0 }">
<text class="picker-text" :class="{ 'picker-placeholder': !selectedRawMaterialName }">
{{ selectedRawMaterialName || '请选择原材料' }}
</text>
<text class="picker-arrow" v-if="coilDetail.dataType !== 0">▼</text>
</view>
</view>
<!-- 物品类型、产品、原材料选择（使用封装组件） -->
<klp-material-picker
:item-type.sync="form.itemType"
:item-id.sync="form.itemId"
:disabled="coilDetail.dataType === 0"
:page-size="2000"
/>
<!-- 毛重 -->
<view class="form-item form-item-optional">
@@ -148,74 +120,6 @@
</view>
</view>
<!-- 产品选择弹窗 -->
<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 scroll-y class="popup-body">
<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="form.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 scroll-y class="popup-body">
<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="form.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="form.itemType === 'product'">✓</text>
</view>
<view class="warehouse-item" @click="selectItemType('raw_material')">
<text class="warehouse-name">原料</text>
<text class="warehouse-check" v-if="form.itemType === 'raw_material'">✓</text>
</view>
</scroll-view>
</view>
</uni-popup>
<!-- BOM弹窗 -->
<uni-popup ref="bomPopup" type="bottom">
<view class="bom-popup">
@@ -256,23 +160,16 @@
getMaterialCoilTrace
} from '@/api/wms/coil.js'
import {
listWarehouse
} from '@/api/wms/warehouse.js'
import {
getRawMaterial,
listRawMaterial
getRawMaterial
} from '@/api/wms/rawMaterial.js'
import {
listProduct
} from '@/api/wms/product.js'
export default {
data() {
return {
form: {
coilId: undefined,
itemType: '',
itemId: undefined,
itemType: '', // 由ItemSelector组件双向绑定
itemId: undefined, // 由ItemSelector组件双向绑定
team: '',
currentCoilNo: '',
warehouseId: undefined,
@@ -291,14 +188,6 @@
currentWarehouseName: '',
warehouseSearchKeyword: '',
filteredWarehousesInPicker: [],
products: [], // 产品列表
productSearchKeyword: '',
filteredProductsInPicker: [],
selectedProductName: '', // 已选择的产品名称
rawMaterials: [], // 原材料列表
rawMaterialSearchKeyword: '',
filteredRawMaterialsInPicker: [],
selectedRawMaterialName: '', // 已选择的原材料名称
loading: false,
qrcodeStatus: 1 // 二维码状态：0=历史码，1=当前有效码
}
@@ -311,172 +200,14 @@
}
},
onLoad() {
this.loadProducts();
this.loadRawMaterials();
},
mounted() {
this.loadProducts();
this.loadRawMaterials();
},
methods: {
// 加载产品列表
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() {
console.log('过滤产品，关键词:', this.productSearchKeyword);
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.form.itemId = product.productId;
this.form.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() {
console.log('过滤原材料，关键词:', this.rawMaterialSearchKeyword);
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.form.itemId = material.rawMaterialId;
this.form.itemType = 'raw_material';
this.selectedRawMaterialName = material.rawMaterialName;
uni.showToast({
title: `已选择原材料：${material.rawMaterialName}`,
icon: 'success'
});
this.closeRawMaterialPicker();
},
// 处理库区选择变化（可选，如需获取完整库区信息）
// 处理库区选择变化
handleWarehouseChange(warehouse) {
console.log('选中的库区信息:', warehouse)
// 可在这里更新库区名称等信息
this.form.warehouseName = warehouse.warehouseName
this.currentWarehouseName = warehouse.warehouseName
},
// 显示物品类型选择器
showItemTypePicker() {
this.$refs.itemTypePopup.open();
},
// 关闭物品类型选择器
closeItemTypePicker() {
this.$refs.itemTypePopup.close();
},
// 选择物品类型
selectItemType(type) {
// 设置物品类型
this.form.itemType = type;
// 清空之前选择的物品
this.form.itemId = undefined;
this.selectedProductName = '';
this.selectedRawMaterialName = '';
this.closeItemTypePicker();
// 根据类型自动弹出对应的选择器
if (type === 'product') {
this.showProductPicker();
} else if (type === 'raw_material') {
this.showRawMaterialPicker();
}
},
// 扫码
handleScan() {
uni.scanCode({
@@ -621,14 +352,12 @@
if (res.confirm) {
this.handleReset()
}
}
});
},
// 重新扫码
handleReset() {
this.form = {
coilId: undefined,
itemType: '',
@@ -646,7 +375,6 @@
this.bomItemList = [];
this.warehouseKeyword = '';
this.currentWarehouseName = '';
this.selectedProductName = '';
this.filteredWarehouses = this.warehouses;
this.qrcodeStatus = 1; // 重置二维码状态
},
@@ -908,32 +636,6 @@
}
}
/* 详情网格 */
.detail-grid {
.detail-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx 0;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
}
.detail-label {
font-size: 28rpx;
color: #666;
}
.detail-value {
font-size: 28rpx;
color: #333;
font-weight: 500;
}
}
}
/* 表单项 */
.form-item {
margin-bottom: 30rpx;
@@ -989,140 +691,6 @@
}
}
/* 选择器输入框 */
.picker-input {
width: 100%;
height: 88rpx;
padding: 0 24rpx;
background: #f8f9fa;
border: 2rpx solid #e8e8e8;
border-radius: 12rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.3s;
&:active {
background: #fff;
border-color: #007aff;
}
&.picker-input-disabled {
background: #f5f5f5;
color: #999;
cursor: not-allowed;
}
.picker-text {
flex: 1;
font-size: 28rpx;
color: #333;
&.picker-placeholder {
color: #999;
}
}
.picker-arrow {
font-size: 24rpx;
color: #999;
margin-left: 10rpx;
}
}
/* 库区选择弹窗 */
.warehouse-popup {
background: #fff;
border-radius: 24rpx 24rpx 0 0;
max-height: 70vh;
.popup-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx;
border-bottom: 1rpx solid #f0f0f0;
.popup-title {
font-size: 32rpx;
color: #333;
font-weight: 600;
}
.popup-close {
font-size: 40rpx;
color: #999;
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
}
}
.popup-search {
padding: 20rpx 30rpx;
border-bottom: 1rpx solid #f0f0f0;
.search-input {
width: 100%;
height: 80rpx;
padding: 0 20rpx;
background: #f8f9fa;
border: 2rpx solid #e8e8e8;
border-radius: 10rpx;
font-size: 28rpx;
color: #333;
box-sizing: border-box;
&:focus {
background: #fff;
border-color: #007aff;
}
}
}
.popup-body {
max-height: 400rpx;
.warehouse-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
}
&:active {
background: #f0f7ff;
}
.warehouse-name {
flex: 1;
font-size: 28rpx;
color: #333;
}
.warehouse-check {
font-size: 32rpx;
color: #007aff;
font-weight: bold;
}
}
.empty-tip {
text-align: center;
padding: 60rpx 0;
color: #999;
font-size: 28rpx;
}
}
}
/* 操作者信息 */
.operator-info {
display: flex;