#

zhou zhou

1 天以前 f7569ddaccd8bf4c0b121747caacade0a75a36c2

#

 pages.json

@@ -84,6 +84,12 @@
            }
        },
        {
            "path": "pages/sockroom/sockroom",
            "style": {
                "navigationBarTitleText": "组托入库"
            }
        },
        {
            "path": "pages/order/orderPakin",
            "style": {
                "navigationBarTitleText": "订单入库"

 pages/sockroom/sockroom.vue

New file
@@ -0,0 +1,545 @@
<template>
    <view class="sockpage">
        <view class="column">
            <!-- 托盘编码栏（对应后端barcode） -->
            <view class="form-card">
                <view class="form-row">
                    <view class="label">
                        <text class="required">*</text>托盘编码：
                    </view>
                    <view class="picker-wrap" @click="scan" hover-class="picker-hover">
                        <view class="input-box">
                            <text class="input-placeholder" v-if="!barcode">点击扫码录入</text>
                            <text class="input-value" v-else>{{barcode}}</text>
                        </view>
                        <view class="scan-icon">📷</view>
                    </view>
                </view>
            </view>
			
            <!-- 箱型栏（对应后端boxType） -->
            <view class="form-card">
                <view class="form-row">
                    <view class="label">
                        <text class="required">*</text>箱    型：
                    </view>
                    <view class="picker-wrap" hover-class="picker-hover">
                        <picker @change="modePickerChange" :value="index_mode" :range="mode">
                            <view class="input-box">
                                <text class="input-placeholder" v-if="!mode.length || !mode[index_mode]">请选择箱型</text>
                                <text class="input-value" v-else>{{mode[index_mode]}}</text>
                            </view>
                        </picker>
                    </view>
                </view>
            </view>
			
            <!-- 物料信息输入栏（对应后端MatList） -->
            <view class="form-card material-card">
                <view class="card-title">物料信息</view>
                <view class="material-grid">
                    <view class="material-item">
                        <text class="material-label"><text class="required">*</text>卷号：</text>
                        <input 
                            class="material-input" 
                            type="text" 
                            v-model="matList.model"
                            placeholder="请输入卷号"
                            placeholder-class="input-placeholder"
                        />
                    </view>
                    <view class="material-item">
                        <text class="material-label"><text class="required">*</text>箱号：</text>
                        <input 
                            class="material-input" 
                            type="text" 
                            v-model="matList.batch"
                            placeholder="请输入箱号"
                            placeholder-class="input-placeholder"
                        />
                    </view>
                    <view class="material-item">
                        <text class="material-label">规格：</text>
                        <input 
                            class="material-input" 
                            type="text" 
                            v-model="matList.matnr"
                            placeholder="请输入规格"
                            placeholder-class="input-placeholder"
                        />
                    </view>
                    <view class="material-item">
                        <text class="material-label">长度：</text>
                        <input 
                            class="material-input" 
                            type="number" 
                            v-model="matList.rollExtent"
                            placeholder="请输入长度(m)"
                            placeholder-class="input-placeholder"
                        />
                    </view>
                    <view class="material-item">
                        <text class="material-label">净重：</text>
                        <input 
                            class="material-input" 
                            type="number" 
                            v-model="matList.weight"
                            placeholder="请输入净重(kg)"
                            placeholder-class="input-placeholder"
                        />
                    </view>
                    <view class="material-item">
                        <text class="material-label">毛重：</text>
                        <input 
                            class="material-input" 
                            type="number" 
                            v-model="matList.roughWeight"
                            placeholder="请输入毛重(kg)"
                            placeholder-class="input-placeholder"
                        />
                    </view>
                    <view class="material-item">
                        <text class="material-label">接头：</text>
                        <input 
                            class="material-input" 
                            type="number" 
                            v-model="matList.joint"
                            placeholder="请输入接头数"
                            placeholder-class="input-placeholder"
                        />
                    </view>
                </view>
            </view>
			
            <!-- 操作按钮组 -->
            <view class="btn-group">
                <button class="operate-btn scan-btn" @click="scantwo">扫货物码</button>
                <button class="operate-btn submit-btn" @click="submit">成品入库</button>
            </view>
        </view>
    </view>
</template>

<script>
import { onLoad } from '../../uni_modules/uview-ui/libs/mixin/mixin'

export default {
    onLoad(){
        // 先读取缓存，再执行请求
        this.baseUrl = uni.getStorageSync('baseUrl');
        this.token = uni.getStorageSync('token');
        // 页面加载时 mode 为空，调用接口后才填充数据
        this.POSTinfo(); 
    },
    data() {
        return {
            baseUrl: '',
            barcodeNum:'',
            barcode: '', // 托盘码
            palletizingNo: '1', // 码垛位编号
            boxType: '', // 木箱类型
            matList: {
                matnr: '', // 规格
                maktx: '', // 物料名称
                batch: '', // 木箱编号
                model: '', // 卷编号
                position: '1', // 木箱码垛位置
                weight: '', // 净重
                roughWeight: '', // 毛重
                anfme: 1.0, // 默认值1.0
                rollExtent: '', // 卷长度
                joint: 0, // 接头
                cutting: 2, // 默认“否”
                qualified: 0, // 默认“否”
                modelFront: '', // 分切前箱编号
                batchFront: '' ,// 分切前卷号
            },
            // 关键1：初始化 mode 为空数组 → 页面加载时箱型无数据
            mode: [], 
            index_mode: 0,
            index_num: 0,
            submitData: {} // 最终提交给后端的数据
        }
    },
    methods: {
        POSTinfo(){
            uni.request({
                url: this.baseUrl + '/mobile/box/type/complete/auth/v2',
                method:'POST',
                header: {
                    'Content-Type': 'application/json'
                },
                success:(res)=>{
                    // 接口返回后才填充箱型数据
                    this.mode = res.data.data.map(item => item.boxSpecs || '').filter(item => item);
                    console.log('提取的箱型数据:', this.mode);
                },
                fail:(err)=>{
                    console.error('获取箱型失败:', err)
                }
            })
        },
        modePickerChange(e) {
            this.index_mode = e.detail.value;
            this.boxType = this.mode[this.index_mode]; // 同步到boxType
        },
        numPickerChange(e) {
            this.index_num = e.detail.value
        },
        // 关键2：修改重置方法 → 清空 mode 及相关状态
        resetForm() {
            this.barcodeNum = '';
            this.barcode = ''; 
            this.boxType = ''; 
            this.index_mode = 0; 
            this.index_num = 0; 
            this.submitData = {}; 
            // 清空 mode 数组 → 箱型选择器恢复无数据状态
            this.mode = [];
            // 重置物料信息（保留默认值）
            this.matList = {
                matnr: '',
                maktx: '',
                batch: '',
                model: '',
                position: '1', 
                weight: '',
                roughWeight: '',
                anfme: 1.0, 
                rollExtent: '',
                joint: 0, 
                cutting: 2, 
                qualified: 0, 
                modelFront: '',
                batchFront: ''
            };
            // 可选：重置后重新请求箱型数据（根据需求选择）
            // this.POSTinfo();
        },
        submit(){
            // 校验必填项
            if(!this.barcode) return uni.showToast({title: '请扫描托盘编码', icon: 'none'})
            if(!this.boxType) return uni.showToast({title: '请选择箱型', icon: 'none'})
            if(!this.matList.model || !this.matList.batch) return uni.showToast({title: '请填写卷号/箱号', icon: 'none'})
		    
            // 数据类型转换
            const matItem = {
                ...this.matList,
                weight: this.matList.weight ? Number(this.matList.weight) : null,
                roughWeight: this.matList.roughWeight ? Number(this.matList.roughWeight) : null,
                rollExtent: this.matList.rollExtent ? Number(this.matList.rollExtent) : null,
                joint: this.matList.joint ? Number(this.matList.joint) : 0,
                anfme: 1.0,
                cutting: 2,
                qualified: 0
            }
		    
            // 组装提交数据
            this.submitData = {
                barcode: this.barcode,
                palletizingNo: this.palletizingNo,
                boxType: this.boxType,
                matList: [matItem]
            }
            console.log('修正类型后的提交数据：', this.submitData)
		    
            // 提交请求
            uni.request({
                url: this.baseUrl + '/mobile/truss/comd/auth/v2',
                method: 'POST',
                header: {'Content-Type': 'application/json'},
                data: this.submitData,
                success: (res) => {
                    console.log('后端返回：', res)
                    uni.showToast({title:'提交成功',icon: 'success'})
                    // 提交成功后重置所有数据
                    this.resetForm();
                    // 可选：重置后重新拉取箱型数据，方便下次操作
                    // setTimeout(() => {
                    //     this.POSTinfo();
                    // }, 300);
                },
                fail: (err) => {
                    console.error('请求失败详情：', err)
                    uni.showToast({title:'提交失败',icon: 'none'})
                },
                complete: (res) => {
                    console.log('请求完成状态：', res)
                }
            })
        },
        scan(){
            uni.scanCode({
                autoDecodeCharSet: true,
                scanType: ['barCode'],
                onlyFromCamera: true,
                continuousScan: false,
                camera: 'back',
                timeout: 5000,
                success: (res) => {
                    this.barcodeNum = res.result
                    this.barcode = res.result
                    uni.showToast({title: `托盘编码扫码成功`,icon: 'success'})
                },
                fail: (err) => {
                    uni.showToast({title: '扫码失败或取消',icon: 'none'})
                }
            })
        },
        parseQrCodeText(text) {
            const result = {};
            const regMap = {
                model: /卷号：(.+)/,
                batch: /箱号：(.+)/,
                matnr: /规格：(.+)/,
                rollExtent: /长度：(.+?)\s*m/,
                weight: /净重：(.+?)\s*kg/,
                roughWeight: /毛重：(.+?)\s*kg/,
                joint: /接头：(.+?)\s*个/
            };
            Object.keys(regMap).forEach(key => {
                const match = text.match(regMap[key]);
                if (match && match[1]) {
                    result[key] = match[1].trim();
                }
            });
            return result;
        },
        scantwo(){
            uni.scanCode({
                autoDecodeCharSet:true,
                scanType: ['qrCode'], 
                success: (res) => {
                    const qrResult = res.result.trim();
                    this.barcodeNum = qrResult;
                    let parseResult = {};
					
                    try {
                        parseResult = JSON.parse(qrResult);
                        parseResult = {
                            model: parseResult.卷号 || '',
                            batch: parseResult.箱号 || '',
                            matnr: parseResult.规格 || '',
                            rollExtent: (parseResult.长度 || '').replace(/\s*m/g, '') || '',
                            weight: (parseResult.净重 || '').replace(/\s*kg/g, '') || '',
                            roughWeight: (parseResult.毛重 || '').replace(/\s*kg/g, '') || '',
                            joint: (parseResult.接头 || '').replace(/\s*个/g, '') || ''
                        };
                    } catch (e) {
                        parseResult = this.parseQrCodeText(qrResult);
                    }
					
                    this.matList = { ...this.matList, ...parseResult };
                    uni.showToast({title: `物料信息扫码成功`,icon: 'success'});
                },
                fail: (err) => {
                    uni.showToast({title: '扫码失败或取消',icon: 'none'})
                }
            })
        }
    }
}
</script>

<style scoped>
/* 全局样式 */
.sockpage {
    background-color: #f5f7fa;
    padding: 24rpx;
    min-height: 100vh;
}

/* 表单列容器 */
.column {
    display: flex;
    flex-direction: column;
    gap: 24rpx;
}

/* 表单卡片 */
.form-card {
    background: #ffffff;
    border-radius: 12rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
    padding: 24rpx;
    transition: all 0.2s ease;
}

/* 物料信息卡片特殊样式 */
.material-card {
    padding: 0;
}

.card-title {
    font-size: 30rpx;
    font-weight: 500;
    color: #1f2937;
    padding: 24rpx 24rpx 16rpx;
    border-bottom: 1rpx solid #f0f0f0;
}

/* 表单行 */
.form-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16rpx;
}

/* 标签样式 */
.label {
    font-size: 28rpx;
    color: #374151;
    font-weight: 500;
    min-width: 140rpx;
}

/* 必填项标红 */
.required {
    color: #ef4444;
    margin-right: 4rpx;
}

/* 选择器容器 */
.picker-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 选择器hover态 */
.picker-hover {
    background-color: #f9fafb;
    border-radius: 8rpx;
}

/* 输入框容器 */
.input-box {
    flex: 1;
    font-size: 28rpx;
    padding: 16rpx 12rpx;
    border: 1rpx solid #e5e7eb;
    border-radius: 8rpx;
    transition: border-color 0.2s ease;
}

.input-box:focus-within {
    border-color: #f97316;
}

/* 占位符样式 */
.input-placeholder {
    color: #9ca3af;
}

/* 输入值样式 */
.input-value {
    color: #1f2937;
}

/* 扫码图标 */
.scan-icon {
    font-size: 24rpx;
    margin-left: 8rpx;
    color: #6b7280;
}

/* 物料信息网格布局 */
.material-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
    padding: 24rpx;
}

/* 物料信息项 */
.material-item {
    display: flex;
    flex-direction: column;
    gap: 8rpx;
}

/* 物料标签 */
.material-label {
    font-size: 26rpx;
    color: #4b5563;
}

/* 物料输入框 */
.material-input {
    font-size: 28rpx;
    color: #1f2937;
    padding: 16rpx 12rpx;
    border: 1rpx solid #e5e7eb;
    border-radius: 8rpx;
    background-color: #ffffff;
    transition: border-color 0.2s ease;
}

.material-input:focus {
    border-color: #f97316;
    outline: none;
}

/* 按钮组 */
.btn-group {
    display: flex;
    gap: 20rpx;
    justify-content: center;
    margin-top: 16rpx;
    padding: 8rpx 0;
}

/* 操作按钮通用样式 */
.operate-btn {
    flex: 1;
    max-width: 200rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 28rpx;
    font-weight: 500;
    border-radius: 12rpx;
    border: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 扫码按钮 */
.scan-btn {
    background-color: #3b82f6;
    color: #ffffff;
}

.scan-btn:active {
    background-color: #2563eb;
    transform: scale(0.98);
}

/* 提交按钮 */
.submit-btn {
    background-color: #f97316;
    color: #ffffff;
}

.submit-btn:active {
    background-color: #ea580c;
    transform: scale(0.98);
}

/* 适配小屏幕 */
@media (max-width: 375px) {
    .material-grid {
        grid-template-columns: 1fr;
    }
	
    .operate-btn {
        max-width: 160rpx;
        height: 72rpx;
        line-height: 72rpx;
        font-size: 26rpx;
    }
}
</style>