1490 lines
37 KiB
Vue
1490 lines
37 KiB
Vue
<template>
|
||
<view class="apart-container">
|
||
<!-- 扫码按钮 -->
|
||
<view class="scan-section" v-if="!form.coilId">
|
||
<view class="scan-btn-wrapper" @click="handleScan">
|
||
<view class="scan-icon">
|
||
<text class="icon-camera">📷</text>
|
||
</view>
|
||
<text class="scan-tip">扫描要分卷的钢卷</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 原钢卷信息 -->
|
||
<view class="info-card" v-if="form.coilId">
|
||
<view class="card-title">
|
||
<text class="title-dot"></text>
|
||
<text class="title-text">原钢卷信息</text>
|
||
<view class="more-btn" @click.stop="showBomDialog" v-if="coilDetail.bomItemList && coilDetail.bomItemList.length > 0">
|
||
<text class="icon-more">⚙</text>
|
||
<text class="more-text">参数</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="info-grid">
|
||
<view class="info-item">
|
||
<text class="item-label">入场钢卷号</text>
|
||
<text class="item-value">{{ coilDetail.enterCoilNo || '-' }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="item-label">当前钢卷号</text>
|
||
<text class="item-value">{{ coilDetail.currentCoilNo || '-' }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="item-label">当前库区</text>
|
||
<text class="item-value">{{ (coilDetail.warehouse && coilDetail.warehouse.warehouseName) || '未分配' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- 分卷列表 -->
|
||
<view class="form-card" v-if="form.coilId" @click="closeWarehouseList">
|
||
<view class="card-title">
|
||
<text class="title-dot"></text>
|
||
<text class="title-text">分卷配置</text>
|
||
</view>
|
||
|
||
<!-- 分卷数量选择 -->
|
||
<view class="form-item">
|
||
<text class="form-label">分卷数量</text>
|
||
<view class="split-count-selector">
|
||
<view
|
||
class="count-btn"
|
||
:class="{ 'count-btn-disabled': splitCoils.length <= 2 }"
|
||
@click="changeSplitCount(-1)"
|
||
>
|
||
<text>-</text>
|
||
</view>
|
||
<text class="count-value">{{ splitCoils.length }}</text>
|
||
<view
|
||
class="count-btn"
|
||
:class="{ 'count-btn-disabled': splitCoils.length >= 10 }"
|
||
@click="changeSplitCount(1)"
|
||
>
|
||
<text>+</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 分卷信息列表 -->
|
||
<view class="split-list">
|
||
<view
|
||
class="split-item"
|
||
v-for="(item, index) in splitCoils"
|
||
:key="index"
|
||
>
|
||
<view class="split-header">
|
||
<text class="split-title">分卷 {{ index + 1 }}</text>
|
||
</view>
|
||
<view class="split-body">
|
||
<view class="split-field">
|
||
<text class="field-label">新钢卷号</text>
|
||
<input
|
||
v-model="item.currentCoilNo"
|
||
placeholder="请输入新钢卷号"
|
||
class="field-input"
|
||
/>
|
||
</view>
|
||
<view class="split-field">
|
||
<text class="field-label">班组</text>
|
||
<input
|
||
v-model="item.team"
|
||
placeholder="请输入班组名称"
|
||
class="field-input"
|
||
/>
|
||
</view>
|
||
<view class="split-field">
|
||
<text class="field-label-optional">目标库区</text>
|
||
<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>
|
||
|
||
<view class="split-field">
|
||
<text class="field-label-optional">毛重 (吨)</text>
|
||
<input
|
||
v-model="item.grossWeight"
|
||
type="digit"
|
||
placeholder="请输入毛重（选填）"
|
||
class="field-input"
|
||
/>
|
||
</view>
|
||
<view class="split-field">
|
||
<text class="field-label-optional">净重 (吨)</text>
|
||
<input
|
||
v-model="item.netWeight"
|
||
type="digit"
|
||
placeholder="请输入净重（选填）"
|
||
class="field-input"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 操作者信息 -->
|
||
<view class="operator-info">
|
||
<text class="operator-label">操作人：</text>
|
||
<text class="operator-name">{{ operatorName }}</text>
|
||
</view>
|
||
|
||
<!-- 操作按钮 -->
|
||
<view class="action-buttons">
|
||
<button class="btn btn-secondary" @click="handleReset">重新扫码</button>
|
||
<button class="btn btn-primary" @click="handleConfirm" :disabled="loading">
|
||
{{ loading ? '提交中...' : '确认分卷' }}
|
||
</button>
|
||
</view>
|
||
</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="closeWarehousePickerForItem">✕</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="currentPickerItemIndex !== -1 && splitCoils[currentPickerItemIndex].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="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">
|
||
<view class="popup-header">
|
||
<text class="popup-title">BOM 清单</text>
|
||
<text class="popup-close" @click="closeBomDialog">✕</text>
|
||
</view>
|
||
<scroll-view class="popup-body" scroll-y>
|
||
<view class="bom-item" v-for="(item, index) in coilDetail.bomItemList" :key="index">
|
||
<view class="bom-index">{{ index + 1 }}</view>
|
||
<view class="bom-content">
|
||
<view class="bom-row">
|
||
<text class="bom-label">{{ item.attrKey }}:</text>
|
||
<text class="bom-value">{{ item.attrValue }}</text>
|
||
</view>
|
||
<view class="bom-row" v-if="item.remark">
|
||
<text class="bom-label">备注:</text>
|
||
<text class="bom-value">{{ item.remark }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="empty-tip" v-if="!coilDetail.bomItemList || coilDetail.bomItemList.length === 0">
|
||
<text>暂无参数数据</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() {
|
||
return {
|
||
form: {
|
||
coilId: undefined,
|
||
hasMergeSplit: 1 // 1表示分卷
|
||
},
|
||
coilDetail: {},
|
||
splitCoils: [
|
||
{
|
||
currentCoilNo: '',
|
||
team: '',
|
||
hasMergeSplit: 1,
|
||
warehouseId: undefined,
|
||
warehouseName: '',
|
||
warehouseKeyword: '',
|
||
filteredWarehouses: [],
|
||
showWarehouseList: false,
|
||
itemType: '',
|
||
itemId: undefined,
|
||
productName: '',
|
||
rawMaterialName: '',
|
||
grossWeight: '',
|
||
netWeight: ''
|
||
},
|
||
{
|
||
currentCoilNo: '',
|
||
team: '',
|
||
hasMergeSplit: 1,
|
||
warehouseId: undefined,
|
||
warehouseName: '',
|
||
warehouseKeyword: '',
|
||
filteredWarehouses: [],
|
||
showWarehouseList: false,
|
||
itemType: '',
|
||
itemId: undefined,
|
||
productName: '',
|
||
rawMaterialName: '',
|
||
grossWeight: '',
|
||
netWeight: ''
|
||
}
|
||
],
|
||
warehouses: [],
|
||
warehouseSearchKeyword: '',
|
||
filteredWarehousesInPicker: [],
|
||
products: [], // 产品列表
|
||
productSearchKeyword: '',
|
||
filteredProductsInPicker: [],
|
||
rawMaterials: [], // 原材料列表
|
||
rawMaterialSearchKeyword: '',
|
||
filteredRawMaterialsInPicker: [],
|
||
currentPickerItemIndex: -1,
|
||
loading: false
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
operatorName() {
|
||
return this.$store.state.user.nickName || this.$store.state.user.name || '未知'
|
||
}
|
||
},
|
||
|
||
onLoad() {
|
||
this.loadWarehouses();
|
||
this.loadProducts();
|
||
this.loadRawMaterials();
|
||
},
|
||
|
||
mounted() {
|
||
this.loadWarehouses();
|
||
this.loadProducts();
|
||
this.loadRawMaterials();
|
||
},
|
||
|
||
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 || [];
|
||
console.log('库区加载成功，数量:', this.warehouses.length);
|
||
// 为每个分卷初始化库区列表
|
||
this.splitCoils.forEach(item => {
|
||
item.filteredWarehouses = [...this.warehouses];
|
||
});
|
||
console.log('分卷库区列表初始化完成');
|
||
} 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);
|
||
}
|
||
},
|
||
|
||
// 过滤库区（在选择器中）
|
||
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) {
|
||
if (this.currentPickerItemIndex === -1) return;
|
||
|
||
const item = this.splitCoils[this.currentPickerItemIndex];
|
||
|
||
// 使用 $set 确保响应式更新
|
||
this.$set(item, 'warehouseId', warehouse.warehouseId);
|
||
this.$set(item, 'warehouseName', warehouse.warehouseName);
|
||
|
||
this.closeWarehousePickerForItem();
|
||
},
|
||
|
||
// 显示物品类型选择器
|
||
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();
|
||
},
|
||
|
||
// 关闭BOM弹窗
|
||
closeBomDialog() {
|
||
this.$refs.bomPopup.close();
|
||
},
|
||
|
||
// 显示库区选择器（为特定分卷）
|
||
showWarehousePickerForItem(index) {
|
||
this.currentPickerItemIndex = index;
|
||
this.warehouseSearchKeyword = '';
|
||
this.filteredWarehousesInPicker = [...this.warehouses];
|
||
this.$refs.warehousePopup.open();
|
||
},
|
||
|
||
// 关闭库区选择器
|
||
closeWarehousePickerForItem() {
|
||
this.$refs.warehousePopup.close();
|
||
this.currentPickerItemIndex = -1;
|
||
},
|
||
|
||
// 显示产品选择器（为特定分卷）
|
||
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({
|
||
success: async (res) => {
|
||
console.log('扫码结果：', res.result);
|
||
try {
|
||
const qrcodeId = res.result;
|
||
|
||
// 1. 获取二维码详情
|
||
const qrcodeRes = await getGenerateRecord(qrcodeId);
|
||
if (qrcodeRes.code !== 200) {
|
||
throw new Error('未找到二维码记录');
|
||
}
|
||
|
||
// 2. 解析content获取enter_coil_no、current_coil_no和coil_id
|
||
const qrcodeRecord = qrcodeRes.data;
|
||
const content = JSON.parse(qrcodeRecord.content);
|
||
const enterCoilNo = content.enter_coil_no;
|
||
const currentCoilNo = content.current_coil_no;
|
||
const coilId = content.coil_id && content.coil_id !== 'null' ? content.coil_id : null;
|
||
|
||
if (!enterCoilNo) {
|
||
throw new Error('二维码中未包含有效的入场钢卷号');
|
||
}
|
||
|
||
// 3. 通过追溯接口获取钢卷信息
|
||
const traceRes = await getMaterialCoilTrace(enterCoilNo, currentCoilNo);
|
||
if (traceRes.code !== 200 || !traceRes.data || !traceRes.data.records || traceRes.data.records.length === 0) {
|
||
throw new Error('未找到钢卷信息');
|
||
}
|
||
|
||
// 4. 根据二维码内容匹配对应的钢卷数据
|
||
let coilData = null;
|
||
const records = traceRes.data.records;
|
||
|
||
// 优先使用coil_id精确匹配
|
||
if (coilId) {
|
||
coilData = records.find(record => String(record.coilId) === String(coilId));
|
||
}
|
||
|
||
// 如果没找到，使用currentCoilNo匹配
|
||
if (!coilData && currentCoilNo) {
|
||
coilData = records.find(record => record.currentCoilNo === currentCoilNo);
|
||
}
|
||
|
||
// 如果还是没找到，取第一条记录
|
||
if (!coilData && records.length > 0) {
|
||
coilData = records[0];
|
||
}
|
||
|
||
if (!coilData) {
|
||
throw new Error('未找到对应的钢卷数据');
|
||
}
|
||
|
||
// 5. 检查是否为历史数据
|
||
if (coilData.dataType === 0) {
|
||
uni.showModal({
|
||
title: '历史数据',
|
||
content: '此为历史记录，不允许进行分卷操作',
|
||
showCancel: false
|
||
});
|
||
return;
|
||
}
|
||
|
||
this.coilDetail = coilData;
|
||
this.form.coilId = coilData.coilId;
|
||
|
||
console.log('钢卷详情：', coilData);
|
||
uni.showToast({
|
||
title: '扫码成功',
|
||
icon: 'success'
|
||
});
|
||
} catch (err) {
|
||
console.error('扫码处理失败：', err);
|
||
uni.showToast({
|
||
title: err.message || '扫码信息解析失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.error('扫码失败：', err);
|
||
uni.showToast({
|
||
title: '扫码失败，请重试',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
// 修改分卷数量
|
||
changeSplitCount(delta) {
|
||
const newCount = this.splitCoils.length + delta;
|
||
if (newCount < 2 || newCount > 10) {
|
||
return;
|
||
}
|
||
|
||
if (delta > 0) {
|
||
// 增加分卷
|
||
this.splitCoils.push({
|
||
currentCoilNo: '',
|
||
team: '',
|
||
hasMergeSplit: 1,
|
||
warehouseId: undefined,
|
||
warehouseName: '',
|
||
warehouseKeyword: '',
|
||
filteredWarehouses: this.warehouses,
|
||
showWarehouseList: false,
|
||
itemType: '',
|
||
itemId: undefined,
|
||
productName: '',
|
||
rawMaterialName: '',
|
||
grossWeight: '',
|
||
netWeight: ''
|
||
});
|
||
} else {
|
||
// 减少分卷
|
||
this.splitCoils.pop();
|
||
}
|
||
},
|
||
|
||
// 重新扫码
|
||
handleReset() {
|
||
uni.showModal({
|
||
title: '确认重新扫码',
|
||
content: '是否要清空当前数据并重新扫码？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
this.form = {
|
||
coilId: undefined,
|
||
hasMergeSplit: 1
|
||
};
|
||
this.coilDetail = {};
|
||
this.splitCoils = [
|
||
{
|
||
currentCoilNo: '',
|
||
team: '',
|
||
hasMergeSplit: 1,
|
||
warehouseId: undefined,
|
||
warehouseName: '',
|
||
warehouseKeyword: '',
|
||
filteredWarehouses: this.warehouses,
|
||
showWarehouseList: false,
|
||
itemType: '',
|
||
itemId: undefined,
|
||
productName: '',
|
||
rawMaterialName: '',
|
||
grossWeight: '',
|
||
netWeight: ''
|
||
},
|
||
{
|
||
currentCoilNo: '',
|
||
team: '',
|
||
hasMergeSplit: 1,
|
||
warehouseId: undefined,
|
||
warehouseName: '',
|
||
warehouseKeyword: '',
|
||
filteredWarehouses: this.warehouses,
|
||
showWarehouseList: false,
|
||
itemType: '',
|
||
itemId: undefined,
|
||
productName: '',
|
||
rawMaterialName: '',
|
||
grossWeight: '',
|
||
netWeight: ''
|
||
}
|
||
];
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
// 提交分卷
|
||
handleConfirm() {
|
||
// 历史数据不允许分卷
|
||
if (this.coilDetail.dataType === 0) {
|
||
uni.showModal({
|
||
title: '历史数据',
|
||
content: '此为历史记录，不允许进行分卷操作',
|
||
showCancel: false
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 验证所有分卷都有钢卷号和班组
|
||
for (let i = 0; i < this.splitCoils.length; i++) {
|
||
if (!this.splitCoils[i].currentCoilNo) {
|
||
uni.showToast({
|
||
title: `请输入分卷 ${i + 1} 的钢卷号`,
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
if (!this.splitCoils[i].team) {
|
||
uni.showToast({
|
||
title: `请输入分卷 ${i + 1} 的班组`,
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
|
||
this.loading = true;
|
||
|
||
// 构建提交数据
|
||
const submitData = {
|
||
coilId: this.form.coilId,
|
||
enterCoilNo: this.coilDetail.enterCoilNo, // 添加入场钢卷号
|
||
supplierCoilNo: this.coilDetail.supplierCoilNo, // 保留厂家原料卷号
|
||
currentCoilNo: this.coilDetail.currentCoilNo, // 添加当前钢卷号
|
||
hasMergeSplit: 1, // 分卷标识
|
||
newCoils: this.splitCoils.map(item => ({
|
||
currentCoilNo: item.currentCoilNo,
|
||
team: item.team,
|
||
hasMergeSplit: 1,
|
||
itemType: item.itemType || this.coilDetail.itemType, // 优先使用分卷的itemType
|
||
itemId: item.itemId || this.coilDetail.itemId, // 优先使用分卷的itemId
|
||
warehouseId: item.warehouseId || this.coilDetail.warehouseId, // 使用分卷的库区或原库区
|
||
grossWeight: item.grossWeight ? Number(item.grossWeight) : null,
|
||
netWeight: item.netWeight ? Number(item.netWeight) : null
|
||
}))
|
||
};
|
||
|
||
updateMaterialCoil(submitData).then(res => {
|
||
if (res.code === 200) {
|
||
uni.showToast({
|
||
title: '分卷成功',
|
||
icon: 'success'
|
||
});
|
||
setTimeout(() => {
|
||
this.handleReset();
|
||
}, 1500);
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg || '分卷失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}).catch(err => {
|
||
console.error('提交失败：', err);
|
||
uni.showToast({
|
||
title: '分卷失败，请重试',
|
||
icon: 'none'
|
||
});
|
||
}).finally(() => {
|
||
this.loading = false;
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.apart-container {
|
||
padding-bottom: 30rpx;
|
||
}
|
||
|
||
/* 扫码区域 */
|
||
.scan-section {
|
||
padding: 80rpx 40rpx;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||
|
||
.scan-btn-wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 30rpx;
|
||
|
||
.scan-icon {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #ff9500 0%, #ff6b00 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 8rpx 24rpx rgba(255, 149, 0, 0.3);
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
}
|
||
}
|
||
|
||
.icon-camera {
|
||
font-size: 70rpx;
|
||
}
|
||
|
||
.scan-tip {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 卡片样式 */
|
||
.info-card,
|
||
.form-card {
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.card-title {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 25rpx;
|
||
padding-bottom: 20rpx;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
|
||
.title-dot {
|
||
width: 8rpx;
|
||
height: 28rpx;
|
||
background: #ff9500;
|
||
border-radius: 4rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.title-text {
|
||
flex: 1;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
/* 信息网格 */
|
||
.info-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20rpx;
|
||
|
||
.info-item {
|
||
flex: 1;
|
||
min-width: 45%;
|
||
background: #f8f9fa;
|
||
padding: 20rpx;
|
||
border-radius: 12rpx;
|
||
|
||
.item-label {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.item-value {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 表单项 */
|
||
.form-item {
|
||
margin-bottom: 30rpx;
|
||
|
||
.form-label {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
margin-bottom: 15rpx;
|
||
font-weight: 500;
|
||
|
||
&::before {
|
||
content: '*';
|
||
color: #ff4d4f;
|
||
margin-right: 6rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 分卷数量选择器 */
|
||
.split-count-selector {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 40rpx;
|
||
padding: 20rpx 0;
|
||
|
||
.count-btn {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #ff9500 0%, #ff6b00 100%);
|
||
color: #fff;
|
||
font-size: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 4rpx 12rpx rgba(255, 149, 0, 0.2);
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
&.count-btn-disabled {
|
||
background: #e8e8e8;
|
||
color: #999;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
|
||
.count-value {
|
||
font-size: 48rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
min-width: 80rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
/* 分卷列表 */
|
||
.split-list {
|
||
margin-top: 20rpx;
|
||
|
||
.split-item {
|
||
background: #f8f9fa;
|
||
border-radius: 12rpx;
|
||
padding: 24rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.split-header {
|
||
margin-bottom: 20rpx;
|
||
|
||
.split-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #ff9500;
|
||
}
|
||
}
|
||
|
||
.split-body {
|
||
.split-field {
|
||
margin-bottom: 20rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.field-label {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.field-label-optional {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.field-input {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
padding: 0 20rpx;
|
||
background: #fff;
|
||
border: 2rpx solid #e8e8e8;
|
||
border-radius: 10rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
box-sizing: border-box;
|
||
|
||
&:focus {
|
||
border-color: #ff9500;
|
||
}
|
||
}
|
||
|
||
.picker-input {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
padding: 0 20rpx;
|
||
background: #fff;
|
||
border: 2rpx solid #e8e8e8;
|
||
border-radius: 10rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
transition: all 0.3s;
|
||
|
||
&:active {
|
||
background: #f0f7ff;
|
||
border-color: #ff9500;
|
||
}
|
||
|
||
.picker-text {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
|
||
&.picker-placeholder {
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.picker-arrow {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 操作者信息 */
|
||
.operator-info {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20rpx 0;
|
||
margin-top: 20rpx;
|
||
|
||
.operator-label {
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.operator-name {
|
||
font-size: 26rpx;
|
||
color: #ff9500;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
/* 操作按钮 */
|
||
.action-buttons {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
margin-top: 30rpx;
|
||
|
||
.btn {
|
||
flex: 1;
|
||
height: 88rpx;
|
||
border-radius: 12rpx;
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
border: none;
|
||
transition: all 0.2s;
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
&[disabled] {
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: #f5f5f5;
|
||
color: #666;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, #ff9500 0%, #ff6b00 100%);
|
||
color: #fff;
|
||
box-shadow: 0 4rpx 16rpx rgba(255, 149, 0, 0.3);
|
||
}
|
||
}
|
||
|
||
/* 库区选择弹窗 */
|
||
.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: #ff9500;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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: #fff3e0;
|
||
}
|
||
|
||
.warehouse-name {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.warehouse-check {
|
||
font-size: 32rpx;
|
||
color: #ff9500;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.empty-tip {
|
||
text-align: center;
|
||
padding: 60rpx 0;
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 参数按钮 */
|
||
.more-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
padding: 8rpx 16rpx;
|
||
background: #fff3e0;
|
||
border-radius: 20rpx;
|
||
border: 1rpx solid #ff9500;
|
||
|
||
.icon-more {
|
||
font-size: 24rpx;
|
||
color: #ff9500;
|
||
}
|
||
|
||
.more-text {
|
||
font-size: 24rpx;
|
||
color: #ff9500;
|
||
}
|
||
}
|
||
|
||
/* BOM弹窗 */
|
||
.bom-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-body {
|
||
padding: 30rpx;
|
||
max-height: 500rpx;
|
||
|
||
.bom-item {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
padding: 24rpx;
|
||
background: #f8f9fa;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.bom-index {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
background: #ff9500;
|
||
color: #fff;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.bom-content {
|
||
flex: 1;
|
||
|
||
.bom-row {
|
||
display: flex;
|
||
margin-bottom: 10rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.bom-label {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
min-width: 120rpx;
|
||
}
|
||
|
||
.bom-value {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.empty-tip {
|
||
text-align: center;
|
||
padding: 60rpx 0;
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|