Skip to content

梁建民 / wmsMin

Go to a project
Commit 70d34472 by LJM
Options

移动端APP--入库理货--增加页面：理货记录

parent d12543f9
Inline Side-by-side
Showing with 670 additions and 9 deletions
assets/css/tally/record.scss 0 → 100644
.page-box {
padding: 15rpx 22rpx;
.time-interval {
margin-bottom: 15rpx;
.time-interval-box {
width: 48%;
height: 60rpx;
background: #ffffff;
border-radius: 10rpx;
padding-left: 17rpx;
padding-right: 10rpx;
box-sizing: border-box;
.iconfont {
font-size: 30rpx;
color: #919399;
}
.uni-input {
margin-left: 13rpx;
font-size: 24rpx;
}
}
}
.search-box {
height: 60rpx;
background: #ffffff;
border-radius: 10rpx;
padding: 0 18rpx 0 0;
.sn {
width: 164rpx;
height: 35rpx;
border-right: 1px solid #f0f0f2;
.uni-input {
font-size: 28rpx;
color: #292b33;
font-weight: bold;
}
.uni-arrow {
width: 14rpx;
height: 9rpx;
background: url('https://img.ichunt.com/images/ichunt/202304/10/e4c72319ad41ce1425f71cc6ec35f111.png') no-repeat center;
background-size: contain;
margin-left: 12rpx;
}
}
.search-bar {
width: calc(100% - 164rpx);
.icon-juxing11 {
font-size: 30rpx;
color: #919399;
margin-left: 17rpx;
margin-right: 13rpx;
}
.uni-input {
font-size: 28rpx;
color: #484b59;
}
.icon-a-juxing111 {
font-size: 30rpx;
color: #c6c7cc;
}
}
}
.total-text {
margin-top: 15rpx;
font-size: 28rpx;
color: #919399;
text-align: right;
text {
padding: 0 5rpx;
color: #1969f9;
}
}
.list {
margin-top: 15rpx;
padding-bottom: 100rpx;
.box {
position: relative;
padding: 15px 17rpx 18rpx 17rpx;
background: #ffffff;
box-shadow: 0px 3rpx 3rpx 0px rgba(198, 199, 204, 0.3);
border-radius: 10rpx;
margin-bottom: 15rpx;
flex-wrap: wrap;
border: 1px solid transparent;
.check-box-icon {
position: absolute;
right: 18rpx;
top: 17rpx;
width: 20rpx;
height: 20rpx;
background: url('https://img.ichunt.com/images/ichunt/202304/11/0bf30da3e8ce6c476c210173b5f13d51.png') no-repeat center;
background-size: contain;
display: block;
}
&.curr {
border: 1px solid #1969f9;
.check-box-icon {
background: url('https://img.ichunt.com/images/ichunt/202304/11/71a74e52e94bcf2e89f8df9817d494c6.png') no-repeat center;
background-size: contain;
}
}
.input-box {
margin-bottom: 18rpx;
flex: 0 0 50%;
.bor {
height: 1px;
background-color: #f0f0f2;
color: #f0f0f2;
margin-bottom: 10rpx;
}
.label {
width: 132rpx;
font-size: 28rpx;
color: #919399;
white-space: nowrap;
}
.text {
font-size: 28rpx;
color: #484b59;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.desc {
font-size: 28rpx;
color: #484b59;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.tt {
font-size: 28rpx;
color: #1969f9;
}
.pick_img_list {
flex-wrap: wrap;
.default {
width: 120rpx;
height: 120rpx;
background: #f5f5f7;
border-radius: 10rpx;
margin-right: 15rpx;
.iconfont {
font-size: 60rpx;
color: #c6c7cc;
}
}
.img_list {
position: relative;
width: 120rpx;
height: 120rpx;
background: #f5f5f7;
border-radius: 10rpx;
margin-right: 15rpx;
margin-bottom: 15rpx;
image {
width: 120rpx;
height: 120rpx;
}
.iconfont {
position: absolute;
right: 0;
top: 0;
font-size: 30rpx;
color: #ff3700;
z-index: 9;
}
}
}
}
.pick_img_list {
flex-wrap: wrap;
.default {
width: 120rpx;
height: 120rpx;
background: #f5f5f7;
border-radius: 10rpx;
margin-right: 15rpx;
.iconfont {
font-size: 60rpx;
color: #c6c7cc;
}
}
.img_list {
position: relative;
width: 120rpx;
height: 120rpx;
background: #f5f5f7;
border-radius: 10rpx;
margin-right: 15rpx;
margin-bottom: 15rpx;
image {
width: 120rpx;
height: 120rpx;
}
.iconfont {
position: absolute;
right: 0;
top: 0;
font-size: 30rpx;
color: #ff3700;
z-index: 9;
}
}
}
.btn-box {
position: absolute;
right: 17rpx;
bottom: 13rpx;
.btn1 {
width: 144rpx;
height: 48rpx;
background: #fff;
border-radius: 4rpx;
font-size: 24rpx;
color: #999;
border: 1px solid #999;
}
.btn2 {
width: 100rpx;
height: 60rpx;
background: #1969f9;
border-radius: 8rpx;
font-size: 25rpx;
color: #ffffff;
}
}
.status-box {
position: absolute;
right: 10rpx;
top: 5rpx;
.staus_type_val {
font-size: 28rpx;
color: #1969f9;
border: 1px solid #f0f0f2;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
margin-right: 10rpx;
}
}
}
}
.fix-btn {
position: fixed;
bottom: 0;
width: 100%;
left: 0;
z-index: 999;
.btn1 {
width: 128rpx;
height: 75rpx;
background: #ffffff;
border-right: 1px solid #f0f0f2;
.check-box-icon {
width: 20rpx;
height: 20rpx;
background: url('https://img.ichunt.com/images/ichunt/202304/11/0bf30da3e8ce6c476c210173b5f13d51.png') no-repeat center;
background-size: contain;
display: block;
&.curr {
background: url('https://img.ichunt.com/images/ichunt/202304/11/71a74e52e94bcf2e89f8df9817d494c6.png') no-repeat center;
background-size: contain;
}
}
.text {
margin-left: 10rpx;
font-size: 20rpx;
color: #484b59;
}
}
.btn2 {
width: 300rpx;
height: 75rpx;
background: #02a7f0;
font-size: 23rpx;
color: #ffffff;
}
.btn3 {
width: calc(100% - 428rpx);
height: 75rpx;
background: #1969f9;
font-size: 23rpx;
color: #ffffff;
}
}
}
.no-date {
padding: 30rpx 0;
.iconfont {
font-size: 180rpx;
color: #c6c7cc;
margin-bottom: 30rpx;
}
.text {
font-size: 20rpx;
color: #484b59;
}
}
::v-deep .uni-drawer__content {
width: 85% !important;
}
pages.json
......@@ -192,7 +192,19 @@
}, {
"path": "pages/tally/index",
"style": {
"navigationBarTitleText": "入库理货"
"navigationBarTitleText": "入库理货",
"app-plus": {
"titleNView": {
"buttons": [{
"index": "0",
"text": "理货记录",
"fontSize": "15px",
"color": "#1969F9",
"float": "right",
"width": "120px"
}]
}
}
}
}, {
"path": "pages/tally/fixBox",
......@@ -229,6 +241,11 @@
"style": {
"navigationBarTitleText": "封箱确认"
}
}, {
"path": "pages/tally/record",
"style": {
"navigationBarTitleText": "理货记录"
}
}],
"globalStyle": {
"navigationBarTextStyle": "black",
......
pages/tally/index.vue
......@@ -374,6 +374,13 @@
deep: true // 深度监听
}
},
onNavigationBarButtonTap(e) {
if (e.index == 0) {
uni.navigateTo({
url: '/pages/tally/record'
});
}
},
methods: {
/**
* 点击遮罩层触发
......
pages/tally/record.vue 0 → 100644
<template>
<view class="page-box">
<!-- 时间筛选 -->
<view class="time-interval row bothSide verCenter">
<view class="time-interval-box row verCenter bothSide">
<view class="row verCenter">
<text class="iconfont icon-riqi1"></text>
<picker mode="date" @change="bindTimeChange(1, $event)">
<input type="text" class="uni-input" placeholder="请选择起始时间" placeholder-style="color:#919399" v-model="searchParams.create_time_begin" />
</picker>
</view>
<text class="iconfont icon-a-juxing111" @click="clearInput('start')" v-if="searchParams.create_time_begin != ''"></text>
</view>
<view class="time-interval-box row verCenter bothSide">
<view class="row verCenter">
<text class="iconfont icon-riqi1"></text>
<picker mode="date" @change="bindTimeChange(2, $event)">
<input type="text" class="uni-input" placeholder="请选择结束时间" placeholder-style="color:#919399" v-model="searchParams.create_time_end" />
</picker>
</view>
<text class="iconfont icon-a-juxing111" @click="clearInput('end')" v-if="searchParams.create_time_end != ''"></text>
</view>
</view>
<!-- 搜索参数 -->
<view class="search-box row bothSide verCenter">
<view class="sn row rowCenter verCenter">
<picker @change="bindPickerChange($event,1)" :value="index" :range="array">
<view class="row verCenter">
<view class="uni-input">{{ array[index] }}</view>
<view class="uni-arrow"></view>
</view>
</picker>
</view>
<view class="search-bar row bothSide verCenter">
<view class="row verCenter" style="width: 100%;">
<text class="iconfont icon-juxing11"></text>
<input class="uni-input" placeholder="输入型号或入仓号或箱号查询" placeholder-style="color:#919399" :focus="is_focus" v-model="searchParams.all_search" @input="handleInput" style="width: 100%;" />
</view>
<text class="iconfont icon-a-juxing111" @click="clearInput()" v-if="input_flag"></text>
</view>
</view>
<view class="total-text" v-if="list.length > 0">共<text>{{total}}</text>条数据</view>
<!-- 列表区 -->
<view class="list" v-if="list.length > 0">
<view class="box row" v-for="(item, index) in list" :key="index">
<view class="status-box row">
<template v-if="item.box_type == 0">
<view class="staus_type_val row rowCenter verCenter">{{item.box_type_cn}}</view>
</template>
<template v-else>
<view class="staus_type_val row rowCenter verCenter" style="border: 1px solid red;color: red;">{{item.box_type_cn}}</view>
</template>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="tt" style="color: #000;font-weight: bold;">{{ item.box_sn }}</text>
<text class="text" v-if="item.sub_box_qty > 1">（{{ item.sub_box_qty }})</text>
<text class="tt" style="margin-left: 50px;width: 100rpx;">{{item.tally_status_cn}}</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">物料名称：</text>
<text class="text">二极管</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">型号：</text>
<text class="text">XSADAS5DA5SD</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">品牌：</text>
<text class="text">NEXPERIA牌</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">订单备注：</text>
<text class="text">你好吗你好吗马号码</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">入库数量：</text>
<text class="text">400</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">原产地：</text>
<text class="text">美国</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">净重：</text>
<text class="text">2kg</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">理货备注：</text>
<text class="text">你好吗你好吗</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">理货人：</text>
<text class="text">张三</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">理货时间：</text>
<text class="text">2024-01-01  12：00：00</text>
</view>
<view class="input-box row" style="flex: 0 0 100%;">
<text class="label">理货照片：</text>
<view class="pick_img_list row">
<template v-if="item.precheck_images">
<view class="img_list" v-for="(v, i) in item.precheck_images.split(',')" :key="i">
<image :src="v" mode="aspectFill" @click="previewChange(item.precheck_images.split(','),i)"></image>
</view>
</template>
</view>
</view>
<view class="btn-box row">
<view class="btn1 row rowCenter verCenter" @click="cancelTallyDetail(item)">取消理货</view>
</view>
</view>
</view>
<!-- 无数据展示 -->
<view class="no-date column rowCenter verCenter" v-else>
<text class="iconfont icon-a-juxing21"></text>
<text class="text">查不到当前数据</text>
</view>
</view>
</template>
<script>
import { API } from '@/util/api.js';
import debounce from 'lodash/debounce';
export default {
data() {
return {
page: 1,
limit: 30,
list: [],
index: 0,
array: ['全量搜索'],
detail: {}, //详情
input_flag: false,
total: 0,
is_focus: true, //获取焦点动态化
hasMoreData: true, //是否分页加载
searchParams: {
create_time_begin: '', //起始日期
create_time_end: '', //结束日期
all_search: ''
}
};
},
onReachBottom() {
if (!this.hasMoreData) {
return;
}
this.page++;
this.getData();
},
onShow() {
this.getData();
},
methods: {
/**
* 时间选择
*/
bindTimeChange(type, e) {
this.resetChange();
if (type == 1) {
this.searchParams.create_time_begin = e.detail.value;
} else if (type == 2) {
this.searchParams.create_time_end = e.detail.value;
}
var timeA = new Date(this.searchParams.create_time_begin).getTime();
var timeB = new Date(this.searchParams.create_time_end).getTime();
if (timeB < timeA) {
uni.showToast({
title: '不能小于开始时间',
icon: 'none'
});
this.searchParams.create_time_end = this.searchParams.create_time_begin;
return false;
}
this.getData();
},
getData() {
this.request(API.getTallyData, 'GET', { page: this.page, limit: this.limit, ...this.searchParams }, true).then(res => {
if (res.err_code === 0) {
this.total = res.data.total;
if (res.data.data.length > 0) {
this.hasMoreData = true;
this.list = this.list.concat(res.data.data);
} else {
this.hasMoreData = false;
}
} else {
uni.showToast({
title: res.err_msg,
icon: 'none'
});
}
});
},
/**
* 预览图片
* @param {Object} img
* @param {Object} index
*/
previewChange(arr, index) {
this.noexebshowFalg = false;
uni.previewImage({
current: index,
urls: arr
});
},
/**
* 理货明细撤销（取消理货）
*/
cancelTallyDetail(item) {
//根据理货明细获取箱数
this.request(API.getBoxNumByDetailId, 'POST', { wstydl_id: item.wstydl_id }, true).then(json => {
if (json.err_code === 0) {
if (json.data > 1) {
let text = `${item.erp_order_sn}货物分部在${item.box_sn}的${json.data}个子箱，请确认是否全部取消`;
uni.showModal({
title: '提示',
content: text,
success: (res) => {
if (res.confirm) {
this.request(API.cancelTallyDetail, 'POST', { wstydl_id: item.wstydl_id, wsty_id: item.wsty_id }, true).then(res => {
if (res.err_code === 0) {
this.getData();
} else {
uni.showToast({
title: res.err_msg,
icon: 'none'
});
}
});
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
} else {
uni.showModal({
title: '提示',
content: '确定取消该商品理货吗？',
success: (res) => {
if (res.confirm) {
this.request(API.cancelTallyDetail, 'POST', { wstydl_id: item.wstydl_id, wsty_id: item.wsty_id }, true).then(res => {
if (res.err_code === 0) {
this.getData();
} else {
uni.showToast({
title: res.err_msg,
icon: 'none'
});
}
});
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
}
} else {
uni.showToast({
title: json.err_msg,
icon: 'none'
});
}
});
},
/**
* 全量搜索
* @param {Object} event
*/
handleInput: debounce(function(event) {
this.resetChange();
var val = event.target.value;
this.searchParams.all_search = '';
if (val) {
this.searchParams.all_search = val;
this.input_flag = true;
this.getData();
} else {
this.input_flag = false;
}
}, 500),
/**
* 清空数据
*/
clearInput(type) {
this.resetChange();
if (type == 'start') {
//清除起始时间
this.searchParams.create_time_begin = '';
this.getData();
} else if (type == 'end') {
//清除结束时间
this.searchParams.create_time_end = '';
this.getData();
} else {
this.searchParams.all_search = '';
this.input_flag = false;
this.clearInputAndFocus();
this.getData();
}
},
/**
* 重置
*/
resetChange() {
this.list = [];
this.page = 1;
},
/**
* 再次获取焦点
*/
clearInputAndFocus() {
this.input_flag = false; //关闭叉叉
this.is_focus = false;
setTimeout(() => {
this.is_focus = true;
}, 200);
},
}
};
</script>
<style scoped lang="scss">
@import '@/assets/css/tally/record.scss';
</style>
\ No newline at end of file
util/api.js
const API_BASE = 'https://api.ichunt.com';
const API_BASE_OSS = 'https://image.ichunt.net'; //oss系统
const API_BASE_OSS_HK = 'http://hk.image.semour.com'; //oss系统 HK
const API_BASE_WMS = 'https://wms.ichunt.net'; //WMS系统
// const API_BASE = 'https://api.ichunt.com';
// const API_BASE_OSS = 'https://image.ichunt.net'; //oss系统
// const API_BASE_OSS_HK = 'http://hk.image.semour.com'; //oss系统 HK
// const API_BASE_WMS = 'https://wms.ichunt.net'; //WMS系统
// const API_BASE = 'http://api.liexin.com';
// const API_BASE_OSS = 'http://image.liexindev.net';
// const API_BASE_OSS_HK = 'http://image.liexindev.net'; //oss系统 HK
// const API_BASE_WMS = 'http://wms.liexindev.net'; //WMS系统
const API_BASE = 'http://api.liexin.com';
const API_BASE_OSS = 'http://image.liexindev.net';
const API_BASE_OSS_HK = 'http://image.liexindev.net'; //oss系统 HK
const API_BASE_WMS = 'http://wms.liexindev.net'; //WMS系统
const API = {
......
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