1、外仓扫码

kyy

2025-11-19 8dd9211e7ea619eff9bbd254730f94c3d6bb80dc

1、外仓扫码

 H5/Js/WCSM.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,214 @@
var vm = new Vue({
    el: '#app',
    data: function () {
        return {
            // åŠ è½½çŠ¶æ€
            isLoading: false,
            
            // ç”¨æˆ·ä¿¡æ¯
            userInfo: {
                loginGuid: '',
                loginAccount: '',
            },

            // åº“位相关
            sectionCode: "",        // åº“位编码
            depotData: {            // ä»“库数据
                depotName: "",
                depotCode: ""
            },

            // è¡¨å•æ•°æ®
            formData: {
                barcode: "",        // ç‰©æ–™æ¡ç 
                itemNo: "",         // ç‰©æ–™ç¼–码
                itemName: "",       // ç‰©æ–™åç§°
                itemModel: "",      // ç‰©æ–™è§„æ ¼
                sumQuantity: 0,     // å·²å…¥æ€»æ•°
                quantity: 0,        // åˆ°è´§å•æ•°é‡
                cbillNo: "",        // åˆ°è´§å•å·
                paperBillNo:"",     // åˆ°è´§å•å· +送货单号
                dhdQty: 0,          // åˆ°è´§å•æ•°é‡
                tmsyQty: 0          // å‰©ä½™æœªæ‰«æ¡ç å¼ æ•°
  
            },
            // æ ‡ç­¾é¡µæ•°æ® - å‰©ä½™æœªæ‰«
            unscannedList: [],           
            // æ ‡ç­¾é¡µæ•°æ® - å‰©ä½™æœªæ‰«ï¼ˆå…¶ä»–物料汇总）
            otherUnscannedList: [],           
            // æ ‡ç­¾é¡µæ•°æ® - åˆ°è´§å•æ‰«ç è¿›åº¦
            scanProgressList: []
        }
    },
    
    mounted() {
        var that = this;
        // èŽ·å–登录信息
        this.userInfo = {
            loginGuid: this.GetLoginInfor().loginGuid,
            loginAccount: this.GetLoginInfor().loginAccount,
        };
    },
    
    methods: {
        /**
         * èŽ·å–库位信息
         * è§¦å‘时机：扫描库位编码后按回车键
         */
        getModel() {
            var that = this;
            
            that.$refs.barcode.focus();
        },
        
        /**
         * æ‰«æç‰©æ–™æ¡ç å…¥åº“
         * è§¦å‘时机：扫描物料条码后按回车键
         */
        getScan() {
            var that = this;
            
            // è¾“入验证
            if (!that.formData.barcode || that.formData.barcode.trim() === "") {
                that.$toast.fail("物料条码不能为空！");
                that.$playSound('error');
                that.$refs.barcode.focus();
                return;
            }
            
            // if (!that.sectionCode || that.sectionCode.trim() === "") {
            //     that.$toast.fail("库位编码不能为空！");
            //     that.$playSound('error');
            //     that.$refs.sectionCode.focus();
            //     return;
            // }
            
            that.isLoading = true;
            
            that.AxiosHttp("post", 'MesInvItemInCDetails/WcsmBar', {
                sectionCode: that.sectionCode.trim(),
                userName: that.userInfo.loginAccount,
                barcode: that.formData.barcode.trim(),
            }, false)
            .then(function (res) {
                var json = res;
                if (json.status == 0) {                  
                    // æ¸…空条码输入框

                    var dab001 = that.formData.barcode
                    that.formData.barcode = "";
                    
                    // é‡æ–°èšç„¦åˆ°æ¡ç è¾“入框（支持连续扫码）
                    that.$refs.barcode.focus();
         
                    // æç¤ºæˆåŠŸ
                    that.$notify({ type: 'success', message: json.message || '扫描成功' });
                    that.$playSound('success');

                    //根据条码获取信息
                    that.selectByBarcode(dab001);
                }
                else {
                    // å¤±è´¥å¤„理
                    that.$toast.fail(json.message || "扫描失败！");
                    that.$playSound('error');
                    
                    // æ¸…空条码输入框
                    that.formData.barcode = "";
                    
                    // é‡æ–°èšç„¦åˆ°æ¡ç è¾“入框
                    that.$refs.barcode.focus();
                }
                that.isLoading = false;
            })
            .catch(function (error) {
                // å¼‚常处理
                that.isLoading = false;
                that.$toast.fail("网络错误，请重试！");
                that.$playSound('error');
                console.error("getScan error:", error);
                
                // æ¸…空条码输入框
                that.formData.barcode = "";
                
                // é‡æ–°èšç„¦åˆ°æ¡ç è¾“入框
                that.$refs.barcode.focus();
            });
        },
        
         /**
          * æ¸…除库位编码
          */
         clearSectionCode() {
             this.sectionCode = "";
             this.depotData = {
                 depotName: "",
                 depotCode: ""
             };
             this.$refs.sectionCode.focus();
         },

         /// <summary>
         /// æ ¹æ®æ¡ç æŸ¥è¯¢ç›¸å…³ä¿¡æ¯
         /// </summary>
         selectByBarcode(dab001) {
             var that = this;

             if (!dab001 || dab001.length <= 0) {
                 that.$toast.fail("条码不能为空！");
                 that.$playSound('error');
                 that.$refs.barcode.focus();
                 return;
             }

             that.isLoading = true;
             that.AxiosHttp("post", 'MesInvItemInCDetails/WcsmDetail', {
                 barcode: dab001
             }, false)
                 .then(function (res) {
                     var json = res;
                     if (json.status == 0) {
                         // æ ‡ç­¾é¡µæ•°æ®èµ‹å€¼
                         that.unscannedList = json.data.tbBillList.unscannedList;
                         that.otherUnscannedList = json.data.tbBillList.otherUnscannedList;
                         that.scanProgressList = json.data.tbBillList.scanProgressList;
                                         
                         // è¡¨å•æ•°æ®èµ‹å€¼ï¼ˆä»ŽdaaInfo获取）
                         var daaInfo = json.data.tbBillList.daaInfo;
                         if (daaInfo && daaInfo.length > 0) {
                             var info = daaInfo[0];
                             that.formData.itemNo = info.itemNo || '';              // ç‰©æ–™ç¼–码
                             that.formData.itemName = info.itemName || '';              // ç‰©æ–™ç¼–码
                             that.formData.itemModel = info.itemModel || '';              // ç‰©æ–™ç¼–码
                             that.formData.cbillNo = info.cbillNo || '';            // åˆ°è´§å•å·
                             that.formData.paperBillNo = info.paperBillNo || '';    // åˆ°è´§å•å·+送货单号
                             that.formData.quantity = info.quantity || 0;           // å½“前条码数量
                             that.formData.dhdQty = info.dhdQty || 0;               // åˆ°è´§å•æ•°é‡
                             that.formData.sumQuantity = info.sumQuantity || 0;     // å·²å…¥æ€»æ•°
                             that.formData.tmsyQty = info.tmsyQty || 0;             // å‰©ä½™æœªæ‰«æ¡ç å¼ æ•°
                         }
                                         
                         that.$refs.barcode.focus();
                     }
                     else {
                         that.$toast.fail(json.message);
                         that.$playSound('error');
                         that.$refs.barcode.focus();
                     }
                     that.isLoading = false;
                 })
                 .catch(function (error) {
                     that.isLoading = false;
                     that.$toast.fail("网络错误，请重试！");
                     that.$playSound('error');
                 });
         },
         
         /**
          * è¿”回上一页
          */
         GoBack() {
             window.history.back();
         }
     }
 });

 H5/WCSM.aspx

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,513 @@
<%@ Page Title="外仓人员扫码"  
         Language="C#" 
         AutoEventWireup="true" 
         MasterPageFile="~/Mst.master" 
         CodeFile="WCSM.aspx.cs" 
         Inherits="H5_WCSM" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <style>
        /* å…¨å±€æ ·å¼ */
        #app {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 0;
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        /* å¡ç‰‡å¼å®¹å™¨æ ·å¼ */
        .card-container {
            margin: 4px 16px 4px;
            border-radius: 16px;
            background-color: #fff;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .card-container:hover {
            box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
            transform: translateY(-2px);
        }

        /* å¡ç‰‡å¤´éƒ¨å’Œæ ‡é¢˜æ ·å¼ */
        .card-header {
            padding: 16px 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
        }
        
        .card-title {
            margin: 0;
            font-size: 18px;
            font-weight: 700;
            letter-spacing: 0.5px;
        }
        
        /* å¡ç‰‡å†…容区样式 */
        .card-body {
            padding: 10px 18px;
        }
        
        /* æ‰«ç åŒºåŸŸå­—段样式 */
        .scan-field {
            margin-bottom: 10px;
            border-radius: 8px;
            overflow: hidden;
        }
        
        /* æ•°æ®å±•ç¤ºç½‘格布局 */
        .data-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 6px;
        }
        
        .data-field {
            border-radius: 8px;
            overflow: hidden;
        }
        
        /* å¯¼èˆªæ æ ·å¼ä¼˜åŒ– */
        .van-nav-bar {
            background: linear-gradient(135deg, #5568d3 0%, #6b46c1 100%);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .van-nav-bar__title {
            font-size: 17px;
            font-weight: 700;
            letter-spacing: 0.5px;
        }

        /* è¡¨å•å­—段样式 */
        .van-field {
            padding: 8px 10px;
            border-bottom: 1px solid #ebedf0;
            transition: background-color 0.2s ease;
        }

        .van-field:last-child {
            border-bottom: none;
        }

        /* è¾“入框聚焦样式 */
        .van-field--focused {
            background-color: #fafafa;
            border-left: 3px solid #0283EF;
        }

        /* è¾“入框样式 */
        .van-cell__value {
            font-size: 14px;
            color: #323233;
            line-height: 1.5;
        }

        /* æ ‡ç­¾æ ·å¼ */
        .van-cell__title {
            font-size: 14px;
            color: #323233;
            font-weight: 500;
        }

        /* åªè¯»å­—段样式 */
        .van-field--disabled {
            background-color: #fafafa;
        }

        .van-field--disabled .van-cell__title,
        .van-field--disabled .van-cell__value {
            font-weight: bold;
            color: #323233;
        }

        .van-field--disabled .van-cell__value {
            background-color: #e8ebed;
            border-radius: 6px;
            padding: 6px 10px;
        }

        /* æ ‡ç­¾é¡µæ ·å¼ */
        .van-tabs {
            margin: 8px 16px;
            background-color: #fff;
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        /* æ ‡ç­¾é¡µå¤´éƒ¨æ ·å¼ */
        .van-tabs__nav {
            border-bottom: 2px solid #f0f2f5;
            padding: 0 16px;
            background: #fafbfc;
        }

        /* æ ‡ç­¾æ ·å¼ */
        .van-tab {
            font-size: 14px;
            color: #4e4e4e;
            padding: 12px 16px 10px;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        /* æ¿€æ´»æ ‡ç­¾æ ·å¼ */
        .van-tab--active {
            font-weight: 700;
            color: #667eea;
        }

        /* æ¿€æ´»æ ‡ç­¾ä¸‹åˆ’线样式 */
        .van-tabs__line {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            height: 3px;
            bottom: 0;
            transform: translateY(0);
        }

        /* è¡¨æ ¼è¡Œæ ·å¼ */
        .bg-info {
            background-color: #fff;
        }

        .van-row {
            padding: 10px 12px;
            border-bottom: 1px solid #ebedf0;
            transition: all 0.3s ease;
        }

        .van-row:last-child {
            border-bottom: none;
        }

        /* è¡¨æ ¼è¡Œæ‚¬åœæ ·å¼ */
        .van-row:hover {
            background-color: #f0f4ff;
            transform: translateX(4px);
        }

        /* è¡¨æ ¼å¤´éƒ¨æ ·å¼ */
        .van-row:nth-child(1) {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            font-weight: 700;
            color: #fff;
        }

        /* äº¤æ›¿è¡Œæ ·å¼ */
        .van-row:nth-child(even) {
            background-color: #fafbfc;
        }

        /* å•å…ƒæ ¼æ ·å¼ */
        .van-col {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: #323233;
            line-height: 1.6;
        }

        /* å·¦å¯¹é½å•å…ƒæ ¼ */
        .text-left {
            justify-content: flex-start;
        }

        /* å†…边距 */
        .padding-left {
            padding-left: 12px;
        }

        /* è¾“入框占位符样式 */
        ::placeholder {
            color: #c8c9cc;
        }

        /* å¼ºåˆ¶æ–‡æœ¬æ¢è¡Œ */
        .van-cell__value {
            word-wrap: break-word;
            word-break: break-all;
        }

        /* å°å±å¹•é€‚配 */
        @media (max-width: 480px) {
            .card-container {
                margin: 8px;
            }
            
            .card-body {
                padding: 16px 20px;
            }
            
            .data-grid {
                grid-template-columns: 1fr;
            }
            
            .van-tabs {
                margin: 8px;
            }
            
            .van-row {
                padding: 12px 14px;
            }
            
            .van-col {
                font-size: 13px;
            }
        }

        /* å¯¼èˆªæ æ–‡æœ¬æ ·å¼ */
        .van-nav-bar__text {
            color: #fff;
            font-weight: 500;
        }
        
        /* åŠ è½½ç»„件样式 */
        comloading {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 60px 20px;
            font-size: 14px;
            color: #4e4e4e;
        }
        
        /* è¾“入框样式优化 */
        .van-field__control {
            border-radius: 6px;
            transition: all 0.3s ease;
        }
        
        .van-field__control:focus {
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        
        /* æŒ‰é’®æ ·å¼ä¼˜åŒ– */
        .van-button {
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .van-button--primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
        }
        
        .van-button--primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
        }

        /* åŠ è½½ç»„件样式 */
        comloading {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 60px 20px;
            font-size: 14px;
            color: #4e4e4e;
        }
    </style>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
    <div id="app">
        <!-- å¯¼èˆªæ  -->
        <van-nav-bar
            title="外仓人员扫码"
            left-text="返回"
            left-arrow
            @click-left="GoBack()"
        ></van-nav-bar>

        <!-- æ‰«ç æ ¸å¿ƒåŒº -->
        <div class="card-container scan-core">
            <div class="card-header">
                <h2 class="card-title">扫码核心区</h2>
            </div>
            <div class="card-body">
                <!-- åº“位编码输入 -->
                <van-field
                    ref="sectionCode"
                    v-model="sectionCode"
                    label="库位编码"
                    clearable
                    placeholder="请扫描库位条码"
                    :right-icon-size="19"
                    v-focus.noKeyboard
                    @keyup.enter.native="getModel"
                    autofocus="true"
                    class="scan-field"
                ></van-field>

                <!-- ç‰©æ–™æ¡ç è¾“å…¥ -->
                <van-field
                    ref="barcode"
                    v-model="formData.barcode"
                    label="物料条码"
                    clearable
                    placeholder="请扫描物料条码"
                    :right-icon-size="19"
                    v-focus.noKeyboard
                    @keyup.enter.native="getScan"
                    class="scan-field"
                ></van-field>
            </div>
        </div>

        <!-- æ•°æ®å±•ç¤ºåŒº -->
        <div class="card-container data-display">
            <div class="card-header">
                <h2 class="card-title">物料信息</h2>
            </div>
            <div class="card-body">
                <div class="data-grid">
                    <!-- ç‰©æ–™ç¼–码（只读） -->
                    <van-field
                        v-model="formData.itemNo"
                        label="物料编码"
                        disabled
                        class="data-field"
                    ></van-field>
                    
                    <!-- ç‰©æ–™åç§°ï¼ˆåªè¯»ï¼‰ -->
                    <van-field
                        v-model="formData.itemName"
                        label="物料名称"
                        disabled
                        class="data-field"
                    ></van-field>
                    
                    <!-- ç‰©æ–™è§„格（只读） -->
                    <van-field
                        v-model="formData.itemModel"
                        label="物料规格"
                        disabled
                        class="data-field"
                    ></van-field>

                   <!-- æ‰«ç æ•°é‡ï¼ˆåªè¯»ï¼‰ -->
                    <van-field
                    v-model="formData.quantity"
                    label="扫码数量"
                    disabled
                    class="data-field"
                    ></van-field>
                    <!-- åˆ°è´§å•å·+送货单号（只读） -->
                    <van-field
                        v-model="formData.paperBillNo"
                        label="到货单号"
                        disabled
                        class="data-field"
                    ></van-field>

                    <!-- åˆ°è´§å•æ•°é‡ï¼ˆåªè¯»ï¼‰ -->
                    <van-field
                        v-model="formData.dhdQty"
                        label="到货单数量"
                        disabled
                        class="data-field"
                    ></van-field>

                    <!-- å·²å…¥æ€»æ•°ï¼ˆåªè¯»ï¼‰ -->
                    <van-field
                        v-model="formData.sumQuantity"
                        label="已入总数"
                        disabled
                        class="data-field"
                    ></van-field>

                    <!-- å‰©ä½™æœªæ‰«æ¡ç å¼ æ•°ï¼ˆåªè¯»ï¼‰ -->
                    <van-field
                        v-model="formData.tmsyQty"
                        label="剩余未扫张数"
                        disabled
                        class="data-field"
                    ></van-field>
                </div>
            </div>
        </div>

        <!-- æ ‡ç­¾é¡µåŒºåŸŸ -->
        <van-tabs>
            <!-- ç¬¬ä¸€ä¸ªæ ‡ç­¾é¡µï¼šå‰©ä½™æœªæ‰« -->
            <van-tab title="剩余未扫">
                <van-row class="bg-info">
                    <van-col span="8" class="text-left padding-left">序号</van-col>
                    <van-col span="8" class="text-left padding-left">条码</van-col>
                    <van-col span="8">数量</van-col>
                </van-row>
                <van-row v-for="(itm, index) in unscannedList" :key="index" class="bg-info">
                    <van-col span="8" class="text-left padding-left">
                        <div>{{index + 1}}</div>
                    </van-col>
                    <van-col span="8" class="text-left padding-left">
                        <div>{{itm.barcode}}</div>
                    </van-col>
                    <van-col span="8">
                        <div>{{itm.fQty}}</div>
                    </van-col>
                </van-row>
            </van-tab>

            <!-- ç¬¬äºŒä¸ªæ ‡ç­¾é¡µï¼šå‰©ä½™æœªæ‰«ï¼ˆå…¶ä»–物料汇总） -->
            <van-tab title="其余未扫">
                <van-row class="bg-info">
                    <van-col span="8" class="text-left padding-left">序号</van-col>
                    <van-col span="8" class="text-left padding-left">条码</van-col>
                    <van-col span="8">数量</van-col>
                </van-row>
                <van-row v-for="(itm, index) in otherUnscannedList" :key="index" class="bg-info">
                    <van-col span="8" class="text-left padding-left">
                        <div>{{index + 1}}</div>
                    </van-col>
                    <van-col span="8" class="text-left padding-left">
                        <div>{{itm.barcode}}</div>
                    </van-col>
                    <van-col span="8">
                        <div>{{itm.fQty}}</div>
                    </van-col>
                </van-row>
            </van-tab>

            <!-- ç¬¬ä¸‰ä¸ªæ ‡ç­¾é¡µï¼šåˆ°è´§å•æ‰«ç è¿›åº¦ -->
            <van-tab title="到货单进度">
                <van-row class="bg-info">
                    <van-col span="4" class="text-left padding-left">序号</van-col>
                    <van-col span="6" class="text-left padding-left">物料编码</van-col>
                    <van-col span="6" class="text-left padding-left">需求跟踪号</van-col>
                    <van-col span="4">到货数量</van-col>
                    <van-col span="4">扫码数量</van-col>
                </van-row>
                <van-row v-for="(itm, index) in scanProgressList" :key="index" class="bg-info">
                    <van-col span="4" class="text-left padding-left">
                        <div>{{index + 1}}</div>
                    </van-col>
                    <van-col span="6" class="text-left padding-left">
                        <div>{{itm.itemNo}}</div>
                    </van-col>
                    <van-col span="6" class="text-left padding-left">
                        <div>{{itm.planTrackingNo}}</div>
                    </van-col>
                    <van-col span="4">
                        <div>{{itm.arrivalQty}}</div>
                    </van-col>
                    <van-col span="4">
                        <div>{{itm.scannedQty}}</div>
                    </van-col>
                </van-row>
            </van-tab>
        </van-tabs>
    </div>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder3" runat="server">
    <comloading v-if="isLoading"></comloading>
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder4" runat="server">
    <script src="Js/WCSM.js?=20251118"></script>
</asp:Content>

 H5/WCSM.aspx.cs

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,19 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

/// <summary>
/// å¤–仓人员扫码页面
/// åŠŸèƒ½ï¼šåº“位扫码验证 + ç‰©æ–™æ¡ç å…¥åº“
/// åˆ›å»ºæ—¥æœŸï¼š2025-11-18
/// </summary>
public partial class H5_WCSM : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // é¡µé¢åŠ è½½é€»è¾‘（如需要可在此添加）
    }
}