Skip to content

梁建民 / wmsApp

Go to a project
Commit c69eb413 by liangjianmin
Options

feat(stockRecheck): 增加出库单多选及打印标签功能 

- 列表项添加多选框及选中样式支持
- 新增筛选选中出库单ID数组filter_id管理选中状态
- 实现筛选选中/取消选择逻辑及辅助函数
- 添加底部固定打印按钮，只在列表存在时显示
- 实现打印物流标签功能，支持批量打印已选中出库单
- 列表分页加载时同步初始化筛选状态数组
- 重置操作时清空选中状态及筛选结果
- 样式调整，新增多选框icon及固定底部按钮样式
- 优化无数据页面底部间距，增强页面显示美观性
parent f537a0ca
Inline Side-by-side
Showing with 177 additions and 2 deletions
assets/css/stockRecheck/print.scss
.stockRecheck-print { .stockRecheck-print {
padding: 15rpx 22rpx; padding: 15rpx 22rpx;
.radio-search-box { .radio-search-box {
height: 57rpx; height: 57rpx;
} }
.search-box { .search-box {
height: 60rpx; height: 60rpx;
background: #ffffff; background: #ffffff;
border-radius: 10rpx; border-radius: 10rpx;
padding: 0 18rpx 0 0; padding: 0 18rpx 0 0;
.sn { .sn {
width: 164rpx; width: 164rpx;
height: 35rpx; height: 35rpx;
border-right: 1px solid #f0f0f2; border-right: 1px solid #f0f0f2;
.uni-input { .uni-input {
font-size: 18rpx; font-size: 18rpx;
color: #292b33; color: #292b33;
font-weight: bold; font-weight: bold;
} }
.uni-arrow { .uni-arrow {
width: 14rpx; width: 14rpx;
height: 9rpx; height: 9rpx;
...@@ -25,26 +30,33 @@ ...@@ -25,26 +30,33 @@
margin-left: 12rpx; margin-left: 12rpx;
} }
} }
.search-bar { .search-bar {
width: calc(100% - 164rpx); width: calc(100% - 164rpx);
.icon-juxing1 { .icon-juxing1 {
font-size: 30rpx; font-size: 30rpx;
color: #919399; color: #919399;
margin-left: 17rpx; margin-left: 17rpx;
margin-right: 13rpx; margin-right: 13rpx;
} }
.uni-input { .uni-input {
font-size: 18rpx; font-size: 18rpx;
color: #484b59; color: #484b59;
} }
.icon-a-juxing11 { .icon-a-juxing11 {
font-size: 30rpx; font-size: 30rpx;
color: #c6c7cc; color: #c6c7cc;
} }
} }
} }
.list { .list {
margin-top: 15rpx; margin-top: 15rpx;
padding-bottom: 150rpx;
.box { .box {
position: relative; position: relative;
padding: 15px 17rpx 20rpx 17rpx; padding: 15px 17rpx 20rpx 17rpx;
...@@ -53,47 +65,77 @@ ...@@ -53,47 +65,77 @@
border-radius: 10rpx; border-radius: 10rpx;
margin-bottom: 15rpx; margin-bottom: 15rpx;
flex-wrap: wrap; 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;
}
}
.bor { .bor {
height: 1px; height: 1px;
background-color: #f0f0f2; background-color: #f0f0f2;
color: #f0f0f2; color: #f0f0f2;
margin-bottom: 10rpx; margin-bottom: 10rpx;
} }
.input-box { .input-box {
margin-bottom: 11rpx; margin-bottom: 11rpx;
flex: 0 0 50%; flex: 0 0 50%;
.label { .label {
width: 110rpx; width: 110rpx;
font-size: 17rpx; font-size: 17rpx;
color: #919399; color: #919399;
white-space: nowrap; white-space: nowrap;
} }
.text { .text {
font-size: 17rpx; font-size: 17rpx;
color: #484b59; color: #484b59;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
} }
.tt { .tt {
font-size: 17rpx; font-size: 17rpx;
color: #1969f9; color: #1969f9;
} }
} }
.pick_img_list { .pick_img_list {
flex-wrap: wrap; flex-wrap: wrap;
.default { .default {
width: 120rpx; width: 120rpx;
height: 120rpx; height: 120rpx;
background: #f5f5f7; background: #f5f5f7;
border-radius: 10rpx; border-radius: 10rpx;
margin-right: 15rpx; margin-right: 15rpx;
.iconfont { .iconfont {
font-size: 60rpx; font-size: 60rpx;
color: #c6c7cc; color: #c6c7cc;
} }
} }
.img_list { .img_list {
position: relative; position: relative;
width: 120rpx; width: 120rpx;
...@@ -102,10 +144,12 @@ ...@@ -102,10 +144,12 @@
border-radius: 10rpx; border-radius: 10rpx;
margin-right: 15rpx; margin-right: 15rpx;
margin-bottom: 15rpx; margin-bottom: 15rpx;
image { image {
width: 120rpx; width: 120rpx;
height: 120rpx; height: 120rpx;
} }
.iconfont { .iconfont {
position: absolute; position: absolute;
right: 0; right: 0;
...@@ -116,6 +160,7 @@ ...@@ -116,6 +160,7 @@
} }
} }
} }
.btn { .btn {
width: 68rpx; width: 68rpx;
height: 30rpx; height: 30rpx;
...@@ -139,8 +184,10 @@ ...@@ -139,8 +184,10 @@
background-color: #ffffff; background-color: #ffffff;
padding: 22rpx 22rpx 10rpx 22rpx; padding: 22rpx 22rpx 10rpx 22rpx;
box-sizing: border-box; box-sizing: border-box;
.title { .title {
position: relative; position: relative;
.iconfont { .iconfont {
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -148,22 +195,27 @@ ...@@ -148,22 +195,27 @@
font-size: 30rpx; font-size: 30rpx;
color: #292b33; color: #292b33;
} }
.text { .text {
font-size: 23rpx; font-size: 23rpx;
color: #292b33; color: #292b33;
font-weight: bold; font-weight: bold;
} }
} }
.field-item { .field-item {
flex-wrap: wrap; flex-wrap: wrap;
.item { .item {
flex: 0 0 50%; flex: 0 0 50%;
margin-bottom: 8rpx; margin-bottom: 8rpx;
.label { .label {
width: 120rpx; width: 120rpx;
font-size: 16rpx; font-size: 16rpx;
color: #919399; color: #919399;
} }
.text { .text {
font-size: 16rpx; font-size: 16rpx;
color: #1969f9; color: #1969f9;
...@@ -173,6 +225,7 @@ ...@@ -173,6 +225,7 @@
overflow: hidden; overflow: hidden;
max-width: 176rpx; max-width: 176rpx;
} }
.tt { .tt {
font-size: 16rpx; font-size: 16rpx;
color: #484b59; color: #484b59;
...@@ -184,20 +237,24 @@ ...@@ -184,20 +237,24 @@
} }
} }
} }
.form-input { .form-input {
.input-title { .input-title {
margin-bottom: 10rpx; margin-bottom: 10rpx;
.input-title-t1 { .input-title-t1 {
font-size: 16rpx; font-size: 16rpx;
color: #1969f9; color: #1969f9;
font-weight: bold; font-weight: bold;
} }
.input-title-t2 { .input-title-t2 {
font-size: 16rpx; font-size: 16rpx;
color: #484b59; color: #484b59;
font-weight: bold; font-weight: bold;
} }
} }
.input-box { .input-box {
.uni-input { .uni-input {
height: 40rpx; height: 40rpx;
...@@ -209,19 +266,23 @@ ...@@ -209,19 +266,23 @@
} }
} }
} }
.select-box { .select-box {
background: #ffffff; background: #ffffff;
border-radius: 10rpx; border-radius: 10rpx;
border: 1px solid #1969f9; border: 1px solid #1969f9;
.wrap { .wrap {
padding-left: 15rpx; padding-left: 15rpx;
padding-right: 25rpx; padding-right: 25rpx;
height: 40rpx; height: 40rpx;
} }
.uni-input { .uni-input {
font-size: 17rpx; font-size: 17rpx;
color: #484b59; color: #484b59;
} }
.uni-arrow { .uni-arrow {
width: 14rpx; width: 14rpx;
height: 9rpx; height: 9rpx;
...@@ -230,19 +291,23 @@ ...@@ -230,19 +291,23 @@
margin-left: 12rpx; margin-left: 12rpx;
} }
} }
.item-tit { .item-tit {
font-size: 20rpx; font-size: 20rpx;
color: #292b33; color: #292b33;
font-weight: bold; font-weight: bold;
margin-bottom: 18rpx; margin-bottom: 18rpx;
.text { .text {
font-weight: normal; font-weight: normal;
margin-right: 160rpx; margin-right: 160rpx;
.label { .label {
width: 82rpx; width: 82rpx;
font-size: 16rpx; font-size: 16rpx;
color: #919399; color: #919399;
} }
.tt { .tt {
font-size: 16rpx; font-size: 16rpx;
color: #484b59; color: #484b59;
...@@ -254,33 +319,40 @@ ...@@ -254,33 +319,40 @@
} }
} }
} }
.print { .print {
margin-top: 16rpx; margin-top: 16rpx;
margin-bottom: 27rpx; margin-bottom: 27rpx;
.check-box-icon { .check-box-icon {
width: 20rpx; width: 20rpx;
height: 20rpx; height: 20rpx;
background: url('https://img.ichunt.com/images/ichunt/202304/11/0bf30da3e8ce6c476c210173b5f13d51.png') no-repeat center; background: url('https://img.ichunt.com/images/ichunt/202304/11/0bf30da3e8ce6c476c210173b5f13d51.png') no-repeat center;
background-size: contain; background-size: contain;
display: block; display: block;
&.curr { &.curr {
background: url('https://img.ichunt.com/images/ichunt/202304/11/71a74e52e94bcf2e89f8df9817d494c6.png') no-repeat center; background: url('https://img.ichunt.com/images/ichunt/202304/11/71a74e52e94bcf2e89f8df9817d494c6.png') no-repeat center;
background-size: contain; background-size: contain;
} }
} }
.tt { .tt {
font-size: 17rpx; font-size: 17rpx;
color: #484b59; color: #484b59;
margin-left: 10rpx; margin-left: 10rpx;
} }
} }
.bor { .bor {
height: 1px; height: 1px;
background-color: #f0f0f2; background-color: #f0f0f2;
margin-bottom: 17rpx; margin-bottom: 17rpx;
} }
.btn { .btn {
margin: 26rpx auto 0; margin: 26rpx auto 0;
.btn1 { .btn1 {
width: 100%; width: 100%;
height: 75rpx; height: 75rpx;
...@@ -289,6 +361,7 @@ ...@@ -289,6 +361,7 @@
color: #ffffff; color: #ffffff;
font-weight: bold; font-weight: bold;
} }
.btn2 { .btn2 {
width: 100%; width: 100%;
height: 75rpx; height: 75rpx;
...@@ -299,3 +372,25 @@ ...@@ -299,3 +372,25 @@
} }
} }
} }
// 底部按钮样式
.fix-btn {
position: fixed;
bottom: 0;
width: 100%;
left: 0;
z-index: 999;
.btn-print {
width: 100%;
height: 75rpx;
background: #1969f9;
font-size: 23rpx;
color: #ffffff;
}
}
// 无数据页面底部间距
.no-date {
padding-bottom: 150rpx;
}
\ No newline at end of file
pages/stockRecheck/shipOut.vue
...@@ -60,7 +60,8 @@ ...@@ -60,7 +60,8 @@
</view> </view>
<!-- 列表 --> <!-- 列表 -->
<view class="list" v-if="list.length > 0"> <view class="list" v-if="list.length > 0">
<view class="box row" v-for="(item, index) in list" :key="index"> <view class="box row" v-for="(item, index) in list" :key="index" :class="{ curr: filter_list[index] }">
<view class="check-box-icon" @click="filterChange(index)"></view>
<view class="input-box row verCenter"> <view class="input-box row verCenter">
<text class="label">出库单号：</text> <text class="label">出库单号：</text>
<text class="tt">{{ item.stock_out_sn }}</text> <text class="tt">{{ item.stock_out_sn }}</text>
...@@ -164,6 +165,12 @@ ...@@ -164,6 +165,12 @@
<text class="iconfont icon-a-juxing21"></text> <text class="iconfont icon-a-juxing21"></text>
<text class="text">查不到当前数据</text> <text class="text">查不到当前数据</text>
</view> </view>
<!-- 底部按钮 -->
<view class="fix-btn row verCenter" v-if="list.length > 0">
<view class="btn-print row rowCenter verCenter" @click="printLogisticsLabels()">
打印物流标签<text v-if="filter_id.length > 0">({{ filter_id.length }})</text>
</view>
</view>
<!-- 打快递单弹窗 --> <!-- 打快递单弹窗 -->
<uni-drawer ref="showRight" mode="right"> <uni-drawer ref="showRight" mode="right">
<view class="uni-drawer-picking" v-if="detail.stock_out_info" style="height: 100%;"> <view class="uni-drawer-picking" v-if="detail.stock_out_info" style="height: 100%;">
...@@ -393,6 +400,8 @@ ...@@ -393,6 +400,8 @@
limit: 30, limit: 30,
is_focus: true, is_focus: true,
list: [], list: [],
filter_list: [], // 筛选已选中的列表
filter_id: [], // 选中的出库单ID
index: 0, index: 0,
array: ['出库单号', '物流单号', '回单号', '货品名称'], array: ['出库单号', '物流单号', '回单号', '货品名称'],
detail: {}, detail: {},
...@@ -666,6 +675,40 @@ ...@@ -666,6 +675,40 @@
return result; return result;
}, },
/** /**
* 筛选过滤出选中的元素
*/
filterChange(index) {
this.$set(this.filter_list, index, (this.filter_list[index] = !this.filter_list[index]));
var filter_arr = this.findIndexBoolean(this.filter_list, true);
this.filter_id = filter_arr.map(i => this.list[i].stock_out_id);
},
/**
* 找出布尔值对应的下标
* @param {Object} arr
* @param {Object} target
*/
findIndexBoolean(arr, target) {
const result = [];
arr.map((item, index) => {
if (item === target) {
result.push(index);
}
});
return result;
},
/**
* 创建数组
* @param {Object} length
* @param {Object} value
*/
createArray(length, value) {
var arr = [];
for (var i = 0; i < length; i++) {
arr.push(value);
}
return arr;
},
/**
* 单号搜索 * 单号搜索
* @param {Object} event * @param {Object} event
*/ */
...@@ -791,7 +834,14 @@ ...@@ -791,7 +834,14 @@
if (res.code === 0) { if (res.code === 0) {
if (res.data.list.length > 0) { if (res.data.list.length > 0) {
this.hasMoreData = true; this.hasMoreData = true;
this.list = this.list.concat(res.data.list); // 第一页直接赋值，分页时使用concat
if (this.page === 1) {
this.list = res.data.list;
this.filter_list = this.createArray(this.list.length, false);
} else {
this.list = this.list.concat(res.data.list);
this.filter_list = this.createArray(this.list.length, false);
}
} else { } else {
this.hasMoreData = false; this.hasMoreData = false;
} }
...@@ -928,6 +978,7 @@ ...@@ -928,6 +978,7 @@
* 重置 * 重置
*/ */
resetChange() { resetChange() {
this.filter_id = []; // 清空选中状态
this.list = []; this.list = [];
this.page = 1; this.page = 1;
}, },
...@@ -1183,6 +1234,34 @@ ...@@ -1183,6 +1234,34 @@
} }
} }
}); });
},
/**
* 打印物流标签
*/
printLogisticsLabels() {
if (this.filter_id.length === 0) {
uni.showToast({
title: '请选择要打印的出库单',
icon: 'none'
});
return;
}
this.request(API.printLogisticsLabels, 'POST', {
stock_out_ids: this.filter_id.join(',')
}, true).then(response => {
if (response.code === 0) {
uni.showToast({
title: '打印任务已发送，请查看打印机',
icon: 'success'
});
} else {
uni.showToast({
title: response.msg || '打印失败',
icon: 'none'
});
}
});
} }
} }
}; };
......
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