#

zhou zhou

11 小时以前 d648edc0b6acaf33dac0030b15e01ae6622d0695

#

 pages.json

@@ -32,6 +32,12 @@
            }

        },

        {

            "path": "pages/outbound/orderOut/outLocView",

            "style": {

                "navigationBarTitleText": "出库库位视图"

            }

        },

        {

            "path": "pages/emptyTray/outBound",

            "style": {

                "navigationBarTitleText": "空托出库"


 pages/listing/matnrPalletising.vue

@@ -148,7 +148,7 @@
                    <view class="form-item">
                        <text class="form-label">AGV站点</text>
                        <view class="input-wrapper">
                            <input class="agv-input" type="text" v-model="agvStationInput" placeholder="请输入AGV站点编号" />
                            <input class="agv-input" type="text" v-model="agvStationInput" placeholder="请输入AGV站点编号" @input="checkAgvStation()"/>
                        </view>
                    </view>
                    <view class="form-item">
@@ -199,7 +199,8 @@
                buttonPermissions: [], // 按钮权限列表
                showAgvModal: false, // AGV确认弹窗
                showAgvInputModal: false, // AGV站点输入弹窗
                agvStationInput: '' // AGV站点输入值
                agvStationInput: '' ,// AGV站点输入值
                agvStationName: ''
            }
        },
        computed: {
@@ -222,6 +223,37 @@
            console.log('当前页面按钮权限:', this.buttonPermissions);
        },
        methods: {
            async checkAgvStation(){
                const that = this;
                if(this.agvStationInput === '' || this.agvStationInput === null){
                    uni.showToast({
                        title: "容器码为空",
                        icon: "none",
                        position: 'top'
                    })
                    return ;
                }
                const {
                    code,
                    data,
                    msg
                } = await request('/check/agvStation', {
                    transferStationNo: this.agvStationInput
                })
                if (code === 200) {
                    this.agvStationName = data.stationName
                } else {
                    uni.showToast({
                        title: msg,
                        icon: "none",
                        position: 'top'
                    })
                    setTimeout(function() {
                        that.agvStationName = ''
                        that.agvStationInput = ''
                    }, 200);
                }
            },
            pickerChange(e) {
                const index = e.detail.value
                this.whAreaId = this.range[index].value
@@ -257,55 +289,7 @@
                
                });
            },
            // async getDet() {
            //     let that = this;
            //     const {
            //         code,
            //         data,
            //         msg
            //     } = await request('/asnOrderItem/trackCode', {
            //         matnrCode: that.matnrCode,
            //         asnCode: that.asnCode
            //     }, "post")
            //     if (code === 200) {
            //         data.map(item => {
            //             item.receiptQty = 0;
            //             item.selected = false;
            //         })
            //         // for (var i = 0; i < data.length; i++) {
            //         //     data[i].receiptQty =1;
            //         //     data[i].selected = false;							
            //         // }
            //         if(data !== [] || data !== null){					
            //         uni.navigateTo({
            //                 url: "../listing/itemSelect",
            //                 success: function(res) {
            //                     // 通过eventChannel向被打开页面传送数据   向另外一个页面传递值的
            //                     res.eventChannel.emit('data', {
            //                         item: data
            //                     })
            //                 },
            //                 events: {
            //                     // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据  另外一个页面传过来的
            //                     backData: function(data) {									
            //                         that.showBackData(data.data)
            //                     },
            //                 },
                        
						
            //             });
						
            //         }
						
            //         // this.list = data
            //     } else {
            //         uni.showToast({
            //             title: msg,
            //             icon: "none",
            //             position: 'top'
            //         })
            //     }
            // },
            async getList() {
                if(this.container === '' || this.container === null){
                    uni.showToast({
@@ -447,12 +431,14 @@
            handleAgvYes() {
                this.showAgvModal = false;
                this.agvStationInput = '';
                this.agvStationName = '';
                this.showAgvInputModal = true;
            },
            // 关闭AGV站点输入弹窗
            closeAgvInputModal() {
                this.showAgvInputModal = false;
                this.agvStationInput = '';
                this.agvStationName = '';
            },
            // 确认AGV站点
            confirmAgvStation() {
@@ -473,7 +459,7 @@
                    return;
                }
                this.showAgvInputModal = false;
                this.submitConfirm(this.agvStationInput);
                this.submitConfirm(this.agvStationName);
            },
        // 提交组托请求
    async submitConfirm(agvStation) {

 pages/outbound/orderOut/orderDetlList.vue

@@ -42,7 +42,7 @@
                        </view>
                        <view class="info-item">
                            <text class="info-label">批次</text>
                            <text class="info-value">{{item.batch || '-'}}</text>
                            <text class="info-value">{{item.splrBatch || '-'}}</text>
                        </view>
                        <view class="info-item">
                            <text class="info-label">订单数量</text>
@@ -50,7 +50,7 @@
                        </view>
                        <view class="info-item">
                            <text class="info-label">已完成</text>
                            <text class="info-value">{{item.anfme - item.enableQty}}</text>
                            <text class="info-value">{{item.qty}}</text>
                        </view>
                    </view>
                    
@@ -64,8 +64,8 @@
                </view>
                
                <!-- 卡片底部 -->
                <view class="card-footer" v-if="item.enableQty > 0">
                    <text class="action-text">点击组托入库</text>
                <view class="card-footer" v-if="item.ableQty > 0">
                    <text class="action-text">点击出库</text>
                    <uni-icons type="right" size="14" color="#0081ff"></uni-icons>
                </view>
                <view class="card-footer card-footer-done" v-else>
@@ -158,8 +158,8 @@
        methods: {
            // 计算进度
            getProgress(item) {
                if (!item.anfme || item.anfme === 0) return 0;
                const progress = ((item.anfme - item.enableQty) / item.anfme * 100).toFixed(0);
                if (!item.qty || item.qty === 0) return 0;
                const progress = (item.qty  / item.anfme * 100).toFixed(0);
                return Math.min(100, Math.max(0, progress));
            },
            // 搜索
@@ -216,7 +216,7 @@
                    this.loading = false;
                }
            },
            // 选择明细进行组托
            // 选择明细进行出库
            chose(item) {
                if (item.enableQty <= 0) {
                    uni.showToast({ title: '该明细已完成', icon: "none", position: 'top' });
@@ -224,7 +224,7 @@
                }
                let that = this;
                uni.navigateTo({
                    url: "../order/orderPakin2",
                    url: "./outLocView",
                    success: function(res) {
                        res.eventChannel.emit('orderItem', {
                            item: item

 pages/outbound/orderOut/outLocView.vue

New file
@@ -0,0 +1,325 @@
<template>
    <view class="page-container">
        <!-- 订单信息头部 -->
        <view class="order-header" v-if="orderItem">
            <view class="header-content">
                <view class="header-row">
                    <text class="header-label">物料编码</text>
                    <text class="header-value">{{orderItem.matnrCode}}</text>
                </view>
                <view class="header-row">
                    <text class="header-label">物料名称</text>
                    <text class="header-value">{{orderItem.maktx || '-'}}</text>
                </view>
                <view class="header-row">
                    <text class="header-label">总出库数量</text>
                    <text class="header-value highlight-white">{{orderItem.anfme || 0}}</text>
                </view>
                <view class="header-row">
                    <text class="header-label">已完成数量</text>
                    <text class="header-value highlight-white">{{orderItem.qty || 0}}</text>
                </view>
            </view>
        </view>
		
        <!-- 库位视图列表 -->
        <view class="loc-list">
            <view class="loc-card" v-for="(item, index) in locList" :key="index">
                <!-- 卡片头部 -->
                <view class="card-header">
                    <view class="loc-info">
                        <text class="loc-code">{{item.locNo || '-'}}</text>
                        <text class="loc-name">{{item.locName || '库位'}}</text>
                    </view>
                    <view class="qty-badge">
                        <text class="qty-text">{{item.anfme || 0}}</text>
                    </view>
                </view>
				
                <!-- 卡片内容 -->
                <view class="card-body">
                    <view class="info-grid">
                        <view class="info-item">
                            <text class="info-label">批次</text>
                            <text class="info-value">{{item.batch || '-'}}</text>
                        </view>
                        <view class="info-item">
                            <text class="info-label">库存数量</text>
                            <text class="info-value highlight">{{item.qty || 0}}</text>
                        </view>
                        <view class="info-item">
                            <text class="info-label">托盘号</text>
                            <text class="info-value">{{item.zpallet || '-'}}</text>
                        </view>
                        <view class="info-item">
                            <text class="info-label">货架</text>
                            <text class="info-value">{{item.shelfNo || '-'}}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
		
        <!-- 空状态 -->
        <view class="empty-state" v-if="locList.length === 0 && !loading">
            <uni-icons type="info" size="60" color="#CCCCCC"></uni-icons>
            <text class="empty-text">暂无库位数据</text>
        </view>
		
        <!-- 统计信息 -->
        <view class="stats-bar" v-if="locList.length > 0">
            <view class="stats-item">
                <text class="stats-value">{{locList.length}}</text>
                <text class="stats-label">库位数</text>
            </view>
            <view class="stats-divider"></view>
            <view class="stats-item">
                <text class="stats-value">{{totalQty}}</text>
                <text class="stats-label">总库存</text>
            </view>
        </view>
    </view>
</template>

<script>
    import { request } from '@/common/request.js'
    export default {
        data() {
            return {
                orderItem: null,
                locList: [],
                loading: false,
            }
        },
        computed: {
            // 计算总库存数量
            totalQty() {
                return this.locList.reduce((sum, item) => sum + (item.qty || 0), 0);
            }
        },
        onLoad() {
            let that = this;
            const eventChannel = this.getOpenerEventChannel();
            if (eventChannel) {
                eventChannel.on('orderItem', function(data) {
                    that.orderItem = data.item;
                    that.getOutLocView(that.orderItem);
                });
            }
        },
        methods: {
            // 获取出库库位视图
            async getOutLocView(item) {
                if (!item) return;
                this.loading = true;
                try {
                    const res = await request('/orderOut/getOutLocView', {
                        orderItemId: item.id						
                    }, 'POST', true);
					
                    if (res.code === 200) {
                        this.locList = res.data || [];
                    } else if (res.code === 403) {
                        uni.showToast({ title: res.msg, icon: "none", position: 'top' });
                        setTimeout(() => {
                            uni.reLaunch({ url: '../login/login' });
                        }, 1000);
                    } else {
                        uni.showToast({ title: res.msg || '获取数据失败', icon: "none", position: 'top' });
                    }
                } catch (err) {
                    // request.js 已经处理了错误提示
                } finally {
                    this.loading = false;
                }
            }
        }
    }
</script>

<style>
    /* 引入公共样式 */
    @import url('@/static/css/common.scss');

    .page-container {
        padding-bottom: 120rpx;
    }
	
    /* 订单头部 */
    .order-header {
        background: linear-gradient(135deg, #0081ff 0%, #1890ff 100%);
        padding: 16rpx 20rpx;
    }
	
    .header-content {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 10rpx;
        padding: 12rpx 16rpx;
    }
	
    .header-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4rpx 0;
    }
	
    .header-label {
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.7);
    }
	
    .header-value {
        font-size: 26rpx;
        color: #ffffff;
        font-weight: 500;
    }
	
    .header-value.highlight-white {
        color: #ffeb3b;
        font-weight: 600;
    }
	
    /* 库位列表 */
    .loc-list {
        padding: 0 20rpx;
    }
	
    .loc-card {
        background: #ffffff;
        border-radius: 12rpx;
        margin-top: 12rpx;
        box-shadow: 0 2rpx 12rpx rgba(0, 129, 255, 0.08);
        overflow: hidden;
        border: 1rpx solid #e4e7ed;
    }
	
    /* 卡片头部 */
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 14rpx 16rpx;
        border-bottom: 1rpx solid #f0f0f0;
    }
	
    .loc-info {
        flex: 1;
        padding-right: 12rpx;
    }
	
    .loc-code {
        font-size: 26rpx;
        color: #303133;
        font-weight: 600;
        display: block;
    }
	
    .loc-name {
        font-size: 22rpx;
        color: #909399;
        margin-top: 4rpx;
        display: block;
    }
	
    .qty-badge {
        padding: 4rpx 12rpx;
        border-radius: 16rpx;
        flex-shrink: 0;
        background: linear-gradient(135deg, #0081ff 0%, #1890ff 100%);
    }
	
    .qty-text {
        font-size: 20rpx;
        font-weight: 500;
        color: #ffffff;
    }
	
    /* 卡片内容 */
    .card-body {
        padding: 12rpx 16rpx;
    }
	
    .info-grid {
        display: flex;
        flex-wrap: wrap;
    }
	
    .info-item {
        width: 50%;
        margin-bottom: 8rpx;
    }
	
    .info-label {
        font-size: 20rpx;
        color: #909399;
        display: block;
    }
	
    .info-value {
        font-size: 24rpx;
        color: #303133;
        font-weight: 500;
        display: block;
        margin-top: 2rpx;
    }
	
    .info-value.highlight {
        color: #0081ff;
        font-weight: 600;
    }
	
    /* 空状态 */
    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60rpx 0;
    }
	
    .empty-text {
        margin-top: 20rpx;
        font-size: 28rpx;
        color: #909399;
    }
	
    /* 统计栏 */
    .stats-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: space-around;
        background: #ffffff;
        padding: 16rpx 0;
        box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
    }
	
    .stats-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
    }
	
    .stats-value {
        font-size: 32rpx;
        color: #303133;
        font-weight: 600;
    }
	
    .stats-label {
        font-size: 20rpx;
        color: #909399;
        margin-top: 4rpx;
    }
	
    .stats-divider {
        width: 1rpx;
        height: 50rpx;
        background: #e8e8e8;
    }
</style>

 static/css/common.css

New file
@@ -0,0 +1,423 @@
/**
 * 公共样式 - 基于 agv_start.vue 抽离
 * 适用于：agv_start.vue, orderPakin2.vue, orderDetlList.vue 等页面
 */

/* ==================== 页面基础样式 ==================== */
page {
    height: 100%;
    background: #f5f7fa;
}

.page-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
    padding-bottom: 110rpx;
    box-sizing: border-box;
}

/* ==================== 表单区域样式 ==================== */
.form-section {
    background: #ffffff;
    padding: 12rpx 20rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
}

.form-item {
    display: flex;
    align-items: center;
    padding: 12rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
}

.form-item:last-child {
    border-bottom: none;
}

.form-label {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    margin-right: 16rpx;
}

.label-text {
    font-size: 26rpx;
    color: #303133;
    margin-left: 6rpx;
}

.form-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    background: #f5f7fa;
    border-radius: 6rpx;
    padding: 0 16rpx;
    height: 60rpx;
}

.form-input {
    flex: 1;
    height: 60rpx;
    font-size: 26rpx;
    color: #303133;
}

/* Picker 样式 */
.picker-full {
    flex: 1;
    width: 100%;
}

.picker-value {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60rpx;
    font-size: 26rpx;
    color: #303133;
}

.picker-value text {
    flex: 1;
}

/* ==================== 列表头部样式 ==================== */
.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 20rpx;
    background: #ffffff;
    margin-top: 12rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.header-left {
    display: flex;
    align-items: center;
}

.header-title {
    font-size: 28rpx;
    color: #303133;
    font-weight: 600;
}

.count-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16rpx;
    padding: 2rpx 12rpx;
    margin-left: 12rpx;
}

.count-text {
    font-size: 20rpx;
    color: #ffffff;
    font-weight: 500;
}

/* ==================== 商品卡片样式 ==================== */
.list-container {
    padding: 0 20rpx;
}

.mat-card {
    background: #ffffff;
    border-radius: 12rpx;
    margin-top: 12rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.card-top {
    display: flex;
    align-items: center;
    padding: 14rpx 16rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.card-index {
    width: 36rpx;
    height: 36rpx;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22rpx;
    color: #ffffff;
    font-weight: 600;
    margin-right: 12rpx;
}

.mat-code-wrap {
    flex: 1;
}

.mat-code {
    font-size: 26rpx;
    color: #ffffff;
    font-weight: 600;
}

.qty-badge {
    background: rgba(255, 255, 255, 0.3);
    padding: 4rpx 14rpx;
    border-radius: 16rpx;
}

.qty-text {
    font-size: 24rpx;
    color: #ffffff;
    font-weight: 600;
}

/* ==================== 卡片内容样式 ==================== */
.card-content {
    padding: 12rpx 16rpx;
}

.info-row {
    display: flex;
    margin-bottom: 8rpx;
}

.info-row:last-child {
    margin-bottom: 0;
}

.info-col {
    flex: 1;
}

.info-col.half {
    width: 50%;
    flex: none;
}

.info-label {
    font-size: 20rpx;
    color: #909399;
    display: block;
}

.info-value {
    font-size: 24rpx;
    color: #303133;
    display: block;
    margin-top: 2rpx;
}

.info-value.highlight {
    color: #667eea;
    font-weight: 500;
}

.info-value.qty {
    font-size: 28rpx;
    color: #303133;
    font-weight: 600;
}

/* ==================== 卡片操作按钮样式 ==================== */
.card-actions {
    display: flex;
    border-top: 1rpx solid #f0f0f0;
}

.action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14rpx 0;
}

.edit-btn {
    border-right: 1rpx solid #f0f0f0;
}

.action-text {
    font-size: 24rpx;
    color: #667eea;
    margin-left: 6rpx;
}

.delete-text {
    color: #f56c6c;
}

/* ==================== 空状态样式 ==================== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80rpx 0;
}

.empty-text {
    font-size: 26rpx;
    color: #909399;
    margin-top: 16rpx;
}

.empty-hint {
    font-size: 22rpx;
    color: #c0c4cc;
    margin-top: 8rpx;
}

.bottom-placeholder {
    height: 20rpx;
}

/* ==================== 底部操作栏样式 ==================== */
.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    padding: 16rpx 20rpx;
    background: #ffffff;
    box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
}

.btn-reset {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160rpx;
    height: 72rpx;
    background: #f5f7fa;
    border-radius: 36rpx;
    margin-right: 16rpx;
}

.btn-reset .btn-text {
    font-size: 26rpx;
    color: #909399;
    margin-left: 6rpx;
}

.btn-submit {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 36rpx;
}

.btn-submit .btn-text {
    font-size: 28rpx;
    color: #ffffff;
    font-weight: 500;
    margin-left: 6rpx;
}

.btn-disabled {
    background: #c0c4cc;
    opacity: 0.6;
}

/* ==================== 弹窗样式 ==================== */
.popup-card {
    width: 600rpx;
    background: #ffffff;
    border-radius: 16rpx;
    overflow: hidden;
}

.popup-header {
    padding: 24rpx;
    text-align: center;
    border-bottom: 1rpx solid #f0f0f0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.popup-title {
    font-size: 30rpx;
    color: #ffffff;
    font-weight: 600;
}

.popup-body {
    padding: 24rpx;
}

.popup-row {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    height: 70rpx;
}

.popup-row:last-child {
    margin-bottom: 0;
}

.popup-label {
    width: 80rpx;
    font-size: 26rpx;
    color: #606266;
    flex-shrink: 0;
}

.popup-value {
    flex: 1;
    height: 70rpx;
    background: #f5f7fa;
    border-radius: 8rpx;
    padding: 0 16rpx;
    font-size: 26rpx;
    color: #303133;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.popup-value.disabled {
    color: #909399;
    background: #f0f0f0;
}

.popup-value.input {
    padding: 0 16rpx;
}

.popup-value.number {
    justify-content: center;
    background: transparent;
    padding: 0;
}

.popup-footer {
    display: flex;
    border-top: 1rpx solid #f0f0f0;
}

.popup-btn {
    flex: 1;
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
}

.popup-btn.cancel {
    color: #909399;
    border-right: 1rpx solid #f0f0f0;
}

.popup-btn.confirm {
    color: #667eea;
    font-weight: 600;
}