Skip to content

梁建民 / wmsApp

Go to a project
Commit e4d2d88e by liangjianmin
Options

feat(picking): 优化拣货详情弹窗布局 

- 将拣货详情弹窗内容包裹在scroll-view中，提升用户体验
- 调整样式以支持更好的信息展示，确保内容可滚动
- 保持信息一致性，更新部分字段的显示逻辑
parent bdfa457f
Inline Side-by-side
Showing with 193 additions and 191 deletions
pages/picking/sort.vue
......@@ -213,216 +213,218 @@
</view>
<!-- 按货品拣货详情弹窗 -->
<uni-drawer ref="showRight" mode="right">
<view class="uni-drawer-picking" v-if="detail">
<view class="uni-drawer-picking" v-if="detail" style="display:flex;flex-direction:column;height:100%;">
<view class="title row rowCenter verCenter">
<text class="iconfont icon-juxing2" @click="closeDrawer()"></text>
<text class="text">{{ stock_out_sn }}</text>
</view>
<view class="field-item row" style="margin-top: 30rpx;">
<view class="item row verCenter">
<text class="label">入库批次号：</text>
<text class="text">{{ detail.stock_in_batch_sn }}</text>
</view>
<view class="item row verCenter">
<text class="label">库 位：</text>
<text class="text">{{ detail.position_name }}</text>
</view>
</view>
<view class="bor" style="margin-bottom: 4rpx;"></view>
<view class="item-tit row bothSide" style="margin-bottom: 0;">
<view>货品详情</view>
<text class="pick_type_val row rowCenter verCenter" v-if="detail.pick_type_val">{{ detail.pick_type_val }}</text>
</view>
<view class="field-item row">
<view class="item row verCenter">
<text class="label">货品编码：</text>
<text class="tt" style="max-width: 100%;">{{ detail.goods_sn }}</text>
</view>
<view class="item row verCenter" v-if="detail.sku_id > 0">
<text class="label">自营货品ID：</text>
<text class="tt" style="max-width: 100%;">{{ detail.sku_id }}</text>
</view>
<view class="item row verCenter">
<text class="label">货品名称：</text>
<text class="tt" style="max-width: 100%;">{{ detail.goods_name }}</text>
</view>
<view class="item row verCenter">
<text class="label">标准品牌：</text>
<text class="tt" style="max-width: 100%;">{{ detail.brand_name }}</text>
</view>
<view class="item row verCenter">
<text class="label">D / C：</text>
<text class="tt">{{ detail.date_code }}</text>
</view>
<view class="item row verCenter">
<text class="label">COO：</text>
<text class="tt">{{ detail.coo }}</text>
</view>
<view class="item row verCenter">
<text class="label">COD：</text>
<text class="tt">{{ detail.cod }}</text>
</view>
<view class="item row verCenter">
<text class="label">货品品质：</text>
<text class="tt">{{ detail.quality_val }}</text>
</view>
<view class="item row verCenter">
<text class="label">入 仓 号：</text>
<text class="tt">{{ detail.inhouse }}</text>
</view>
<view class="item row verCenter">
<text class="label">标准包装数量：</text>
<text class="tt">{{ detail.mpq }}</text>
</view>
<view class="item row verCenter">
<text class="label">客户物料编码：</text>
<text class="tt">{{ detail.customer_material_number }}</text>
</view>
<view class="item row" style="flex: 0 0 100%;">
<text class="label">主单仓库备注：</text>
<text class="desc" style="max-width: 429rpx;color: #f00;">{{ detail.upstream_remark }}</text>
</view>
<view class="item row" style="flex: 0 0 100%;margin-bottom: 8rpx;">
<text class="label">仓库备注：</text>
<text class="desc" style="max-width: 429rpx;color: #f00;">{{ detail.remark }}</text>
</view>
</view>
<view class="bor"></view>
<view class="field-item row">
<view class="item row verCenter">
<text class="label">包装方式：</text>
<text class="text">{{ detail.packing_val }}</text>
</view>
<view class="item row verCenter">
<text class="label">标准包装量：</text>
<text class="text">{{ detail.mpq }}</text>
</view>
<view class="item row verCenter" style="flex: 0 0 100%;">
<text class="label">单 位：</text>
<text class="tt">{{ detail.goods_unit }}</text>
</view>
<view class="item row verCenter">
<text class="label">应拣数量：</text>
<text class="text">{{ picked_num }}&nbsp;&nbsp;</text>
<text class="text">({{ detail.pick_num_with_packing_val }})</text>
<scroll-view scroll-y="true" style="flex:1;overflow-y:auto;padding-bottom:100rpx;">
<view class="field-item row" style="margin-top: 30rpx;">
<view class="item row verCenter">
<text class="label">入库批次号：</text>
<text class="text">{{ detail.stock_in_batch_sn }}</text>
</view>
<view class="item row verCenter">
<text class="label">库 位：</text>
<text class="text">{{ detail.position_name }}</text>
</view>
</view>
<view class="item row verCenter">
<text class="label">拣货方式：</text>
<text class="text">{{ detail.picking_mode_union_val }}</text>
<view class="bor" style="margin-bottom: 4rpx;"></view>
<view class="item-tit row bothSide" style="margin-bottom: 0;">
<view>货品详情</view>
<text class="pick_type_val row rowCenter verCenter" v-if="detail.pick_type_val">{{ detail.pick_type_val }}</text>
</view>
</view>
<view class="form-input" style="margin-bottom: 0;">
<view class="input-title"><text class="input-title-t1">拣货数量：</text></view>
<view class="input-box">
<input type="number" class="uni-input" placeholder-style="color:#919399" placeholder="请输入拣货数量" v-model="formParams.pick_qty" @input="handleInputNumber($event, detail.lock_qty - detail.pick_qty)" />
<view class="field-item row">
<view class="item row verCenter">
<text class="label">货品编码：</text>
<text class="tt" style="max-width: 100%;">{{ detail.goods_sn }}</text>
</view>
<view class="item row verCenter" v-if="detail.sku_id > 0">
<text class="label">自营货品ID：</text>
<text class="tt" style="max-width: 100%;">{{ detail.sku_id }}</text>
</view>
<view class="item row verCenter">
<text class="label">货品名称：</text>
<text class="tt" style="max-width: 100%;">{{ detail.goods_name }}</text>
</view>
<view class="item row verCenter">
<text class="label">标准品牌：</text>
<text class="tt" style="max-width: 100%;">{{ detail.brand_name }}</text>
</view>
<view class="item row verCenter">
<text class="label">D / C：</text>
<text class="tt">{{ detail.date_code }}</text>
</view>
<view class="item row verCenter">
<text class="label">COO：</text>
<text class="tt">{{ detail.coo }}</text>
</view>
<view class="item row verCenter">
<text class="label">COD：</text>
<text class="tt">{{ detail.cod }}</text>
</view>
<view class="item row verCenter">
<text class="label">货品品质：</text>
<text class="tt">{{ detail.quality_val }}</text>
</view>
<view class="item row verCenter">
<text class="label">入 仓 号：</text>
<text class="tt">{{ detail.inhouse }}</text>
</view>
<view class="item row verCenter">
<text class="label">标准包装数量：</text>
<text class="tt">{{ detail.mpq }}</text>
</view>
<view class="item row verCenter">
<text class="label">客户物料编码：</text>
<text class="tt">{{ detail.customer_material_number }}</text>
</view>
<view class="item row" style="flex: 0 0 100%;">
<text class="label">主单仓库备注：</text>
<text class="desc" style="max-width: 429rpx;color: #f00;">{{ detail.upstream_remark }}</text>
</view>
<view class="item row" style="flex: 0 0 100%;margin-bottom: 8rpx;">
<text class="label">仓库备注：</text>
<text class="desc" style="max-width: 429rpx;color: #f00;">{{ detail.remark }}</text>
</view>
</view>
</view>
<view class="form-input">
<view class="input-title"><text class="input-title-t1">拣货备注：</text></view>
<view class="input-box"><input type="text" class="uni-input" placeholder-style="color:#919399" placeholder="请输入拣货备注" v-model="formParams.pick_remark" /></view>
</view>
<view class="bor"></view>
<view class="field-item row">
<view class="item row verCenter">
<text class="label">销 售 员：</text>
<text class="tt">{{ detail.sale_name }}</text>
<view class="bor"></view>
<view class="field-item row">
<view class="item row verCenter">
<text class="label">包装方式：</text>
<text class="text">{{ detail.packing_val }}</text>
</view>
<view class="item row verCenter">
<text class="label">标准包装量：</text>
<text class="text">{{ detail.mpq }}</text>
</view>
<view class="item row verCenter" style="flex: 0 0 100%;">
<text class="label">单 位：</text>
<text class="tt">{{ detail.goods_unit }}</text>
</view>
<view class="item row verCenter">
<text class="label">应拣数量：</text>
<text class="text">{{ picked_num }}&nbsp;&nbsp;</text>
<text class="text">({{ detail.pick_num_with_packing_val }})</text>
</view>
<view class="item row verCenter">
<text class="label">拣货方式：</text>
<text class="text">{{ detail.picking_mode_union_val }}</text>
</view>
</view>
<view class="item row verCenter">
<text class="label">采 购 员：</text>
<text class="tt">{{ detail.pur_user_name }}</text>
<view class="form-input" style="margin-bottom: 0;">
<view class="input-title"><text class="input-title-t1">拣货数量：</text></view>
<view class="input-box">
<input type="number" class="uni-input" placeholder-style="color:#919399" placeholder="请输入拣货数量" v-model="formParams.pick_qty" @input="handleInputNumber($event, detail.lock_qty - detail.pick_qty)" />
</view>
</view>
<view class="item row verCenter" style="flex: 0 0 100%;margin-bottom: 0;">
<text class="label">收货客户：</text>
<text class="tt" style="max-width: 100%;">{{ detail.customer_name }}</text>
<view class="form-input">
<view class="input-title"><text class="input-title-t1">拣货备注：</text></view>
<view class="input-box"><input type="text" class="uni-input" placeholder-style="color:#919399" placeholder="请输入拣货备注" v-model="formParams.pick_remark" /></view>
</view>
</view>
<!-- 图片过多的时候滚动 -->
<scroll-view style="max-height:168px" scroll-y="true">
<view class="h2 row bothSide verCenter" style="margin-top: 25rpx;">
<view>
<text>拣货图片：</text>
<text class="tt">最多只支持{{ maxNum }}张图</text>
<view class="bor"></view>
<view class="field-item row">
<view class="item row verCenter">
<text class="label">销 售 员：</text>
<text class="tt">{{ detail.sale_name }}</text>
</view>
<view class="num">
<text class="t1">{{ image_list.length }}</text>
<text class="t2">/10</text>
<view class="item row verCenter">
<text class="label">采 购 员：</text>
<text class="tt">{{ detail.pur_user_name }}</text>
</view>
<view class="item row verCenter" style="flex: 0 0 100%;margin-bottom: 0;">
<text class="label">收货客户：</text>
<text class="tt" style="max-width: 100%;">{{ detail.customer_name }}</text>
</view>
</view>
<!-- 拣货图片列表 -->
<view class="pic-list row">
<template v-if="image_list.length > 0">
<view class="box" v-for="(item, index) in image_list" :key="index">
<image :src="item" mode="aspectFill" @click="previewChange(image_list, index)"></image>
<text class="iconfont icon-a-juxing11" @click="deletePic(index)"></text>
<!-- 图片过多的时候滚动 -->
<scroll-view style="max-height:168px" scroll-y="true">
<view class="h2 row bothSide verCenter" style="margin-top: 25rpx;">
<view>
<text>拣货图片：</text>
<text class="tt">最多只支持{{ maxNum }}张图</text>
</view>
</template>
<view class="default row rowCenter verCenter" @click="chooseImageChange()" v-if="image_list.length < maxNum"><text class="iconfont icon-a-juxing3"></text></view>
</view>
</scroll-view>
<!-- 尾数打印标签-->
<view class="print row verCenter bothSide">
<view class="row verCenter">
<checkbox-group @change="onCheckboxChangeMantissa">
<label>
<checkbox value="1" color="#1969f9" style="transform:scale(0.7)" :checked="is_print_mantissa" />
</label>
</checkbox-group>
<text class="t1">尾数打印标签</text>
<view class="print-type-box row rowCenter verCenter">
<!-- 深圳自营仓 -->
<template v-if="warehouse_id == 9">
<picker @change="bindPickerChange($event)" :value="print_style_index" :range="print_style" class="row rowCenter verCenter">
<view class="row rowCenter verCenter">
<view class="uni-input">{{ print_style[print_style_index] }}</view>
<view class="uni-arrow"></view>
</view>
</picker>
</template>
<!-- 非自营仓 -->
<template v-else>
<picker @change="bindPickerChange($event, 1)" :value="print_language_index" :range="print_language" class="row rowCenter verCenter">
<view class="row rowCenter verCenter">
<view class="uni-input">{{ print_language[print_language_index] }}</view>
<view class="uni-arrow"></view>
</view>
</picker>
<view class="num">
<text class="t1">{{ image_list.length }}</text>
<text class="t2">/10</text>
</view>
</view>
<!-- 拣货图片列表 -->
<view class="pic-list row">
<template v-if="image_list.length > 0">
<view class="box" v-for="(item, index) in image_list" :key="index">
<image :src="item" mode="aspectFill" @click="previewChange(image_list, index)"></image>
<text class="iconfont icon-a-juxing11" @click="deletePic(index)"></text>
</view>
</template>
<view class="default row rowCenter verCenter" @click="chooseImageChange()" v-if="image_list.length < maxNum"><text class="iconfont icon-a-juxing3"></text></view>
</view>
</scroll-view>
<!-- 尾数打印标签-->
<view class="print row verCenter bothSide">
<view class="row verCenter">
<checkbox-group @change="onCheckboxChangeMantissa">
<label>
<checkbox value="1" color="#1969f9" style="transform:scale(0.7)" :checked="is_print_mantissa" />
</label>
</checkbox-group>
<text class="t1">尾数打印标签</text>
<view class="print-type-box row rowCenter verCenter">
<!-- 深圳自营仓 -->
<template v-if="warehouse_id == 9">
<picker @change="bindPickerChange($event)" :value="print_style_index" :range="print_style" class="row rowCenter verCenter">
<view class="row rowCenter verCenter">
<view class="uni-input">{{ print_style[print_style_index] }}</view>
<view class="uni-arrow"></view>
</view>
</picker>
</template>
<!-- 非自营仓 -->
<template v-else>
<picker @change="bindPickerChange($event, 1)" :value="print_language_index" :range="print_language" class="row rowCenter verCenter">
<view class="row rowCenter verCenter">
<view class="uni-input">{{ print_language[print_language_index] }}</view>
<view class="uni-arrow"></view>
</view>
</picker>
</template>
</view>
</view>
<view style="font-size: 18rpx;color: #F98119;">该货品尾数、标准包装-尾数 的标签</view>
</view>
<view style="font-size: 18rpx;color: #F98119;">该货品尾数、标准包装-尾数 的标签</view>
</view>
<!-- 拆货打印标签-->
<view class="print row verCenter bothSide">
<view class="row verCenter">
<checkbox-group @change="onCheckboxChange">
<label>
<checkbox value="1" color="#1969f9" style="transform:scale(0.7)" :checked="is_print" />
</label>
</checkbox-group>
<text class="t1">拆货打印标签</text>
<view class="print-type-box row rowCenter verCenter">
<!-- 深圳自营仓 -->
<template v-if="warehouse_id == 9">
<picker @change="bindPickerChange($event)" :value="print_style_index" :range="print_style" class="row rowCenter verCenter">
<view class="row rowCenter verCenter">
<view class="uni-input">{{ print_style[print_style_index] }}</view>
<view class="uni-arrow"></view>
</view>
</picker>
</template>
<!-- 非自营仓 -->
<template v-else>
<picker @change="bindPickerChange($event, 1)" :value="print_language_index" :range="print_language" class="row rowCenter verCenter">
<view class="row rowCenter verCenter">
<view class="uni-input">{{ print_language[print_language_index] }}</view>
<view class="uni-arrow"></view>
</view>
</picker>
</template>
<!-- 拆货打印标签-->
<view class="print row verCenter bothSide">
<view class="row verCenter">
<checkbox-group @change="onCheckboxChange">
<label>
<checkbox value="1" color="#1969f9" style="transform:scale(0.7)" :checked="is_print" />
</label>
</checkbox-group>
<text class="t1">拆货打印标签</text>
<view class="print-type-box row rowCenter verCenter">
<!-- 深圳自营仓 -->
<template v-if="warehouse_id == 9">
<picker @change="bindPickerChange($event)" :value="print_style_index" :range="print_style" class="row rowCenter verCenter">
<view class="row rowCenter verCenter">
<view class="uni-input">{{ print_style[print_style_index] }}</view>
<view class="uni-arrow"></view>
</view>
</picker>
</template>
<!-- 非自营仓 -->
<template v-else>
<picker @change="bindPickerChange($event, 1)" :value="print_language_index" :range="print_language" class="row rowCenter verCenter">
<view class="row rowCenter verCenter">
<view class="uni-input">{{ print_language[print_language_index] }}</view>
<view class="uni-arrow"></view>
</view>
</picker>
</template>
</view>
</view>
<view style="font-size: 18rpx;color: #F98119;" v-if="detail.pick_type_val == '散'">该货品需拆出部分拣货并重贴标签</view>
</view>
<view style="font-size: 18rpx;color: #F98119;" v-if="detail.pick_type_val == '散'">该货品需拆出部分拣货并重贴标签</view>
</view>
</scroll-view>
<view class="btn row verCenter bothSide">
<view class="btn1 row rowCenter verCenter" @click="pick(detail.lock_id, formParams.pick_qty, detail.stock_out_item_id)">拣 货</view>
</view>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment