<%@ 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>
|
