Skip to content

梁建民 / wmsApp

Go to a project
Commit 8421f127 by LJM
Options

拣货图片优化

parent 43461798
Inline Side-by-side
Showing with 439 additions and 63 deletions
assets/css/picking/record.scss
...@@ -107,13 +107,37 @@ ...@@ -107,13 +107,37 @@
} }
.pick_img_list { .pick_img_list {
flex-wrap: wrap; flex-wrap: wrap;
.img_list { .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;
margin-bottom: 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;
}
} }
} }
} }
......
assets/css/stockRecheck/record.scss
...@@ -90,15 +90,39 @@ ...@@ -90,15 +90,39 @@
color: #1969f9; color: #1969f9;
} }
.pick_img_list { .pick_img_list {
flex-wrap: wrap; flex-wrap: wrap;
.img_list { .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; width: 120rpx;
height: 120rpx; height: 120rpx;
background: #f5f5f7;
border-radius: 10rpx;
margin-right: 15rpx;
margin-bottom: 15rpx;
} }
.iconfont {
position: absolute;
right: 0;
top: 0;
font-size: 30rpx;
color: #ff3700;
z-index: 9;
}
}
} }
} }
} }
......
pages/arrivalRegister/index.vue
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
<input class="uni-input" placeholder="请输入入仓号" placeholder-style="color:#919399" focus v-model="searchParams.stock_in_with_stock_in_items_inhouse" @input="handleInput(2, $event)" :maxlength="maxInputLength" /> <input class="uni-input" placeholder="请输入入仓号" placeholder-style="color:#919399" focus v-model="searchParams.stock_in_with_stock_in_items_inhouse" @input="handleInput(2, $event)" :maxlength="maxInputLength" />
</template> </template>
<template v-else-if="index == 2"> <template v-else-if="index == 2">
<input class="uni-input" placeholder="请输入FedEx" placeholder-style="color:#919399" focus v-model="searchParams.tracking_no" @input="handleInput(3, $event)" style="width: 400rpx;" /> <input class="uni-input" placeholder="请输入FedEx" placeholder-style="color:#919399" focus v-model="searchParams.tracking_no" @input="handleInput(3, $event)" />
</template> </template>
<text class="iconfont icon-a-juxing11" @click="clearInput()" v-if="input_flag"></text> <text class="iconfont icon-a-juxing11" @click="clearInput()" v-if="input_flag"></text>
</view> </view>
...@@ -752,6 +752,7 @@ ...@@ -752,6 +752,7 @@
this.searchParams.stock_in_with_stock_in_items_inhouse = ''; this.searchParams.stock_in_with_stock_in_items_inhouse = '';
if (val) { if (val) {
if (type == 1) { if (type == 1) {
//全量搜索
this.searchParams.mobile_register_all_search = val; this.searchParams.mobile_register_all_search = val;
} else if (type == 2) { } else if (type == 2) {
//入仓号 //入仓号
...@@ -762,8 +763,13 @@ ...@@ -762,8 +763,13 @@
this.searchParams.stock_in_with_stock_in_items_inhouse = str.slice(0, -1); this.searchParams.stock_in_with_stock_in_items_inhouse = str.slice(0, -1);
} }
} else if (type == 3) { } else if (type == 3) {
var last12 = val.slice(22); // 截取后12位 //FedEx
this.searchParams.tracking_no = last12; if (val.length > 22) {
let last22 = val.slice(22); // 截取后22位
this.searchParams.tracking_no = last22;
} else {
this.searchParams.tracking_no = val;
}
} }
this.input_flag = true; this.input_flag = true;
} else { } else {
......
pages/picking/record.vue
<template> <template>
<view class="picking-record"> <view class="picking-record">
<!-- 搜索参数 -->
<view class="search-box row bothSide verCenter"> <view class="search-box row bothSide verCenter">
<view class="sn row rowCenter verCenter"> <view class="sn row rowCenter verCenter">
<picker @change="bindPickerChange" :value="index" :range="array"> <picker @change="bindPickerChange" :value="index" :range="array">
...@@ -22,6 +23,7 @@ ...@@ -22,6 +23,7 @@
<text class="iconfont icon-a-juxing11" @click="clearInput()" v-if="input_flag"></text> <text class="iconfont icon-a-juxing11" @click="clearInput()" v-if="input_flag"></text>
</view> </view>
</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" :class="{ curr: filter_list[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="check-box-icon" @click="filterChange(index)"></view>
...@@ -79,17 +81,9 @@ ...@@ -79,17 +81,9 @@
<text class="text">{{ item.position_name }}</text> <text class="text">{{ item.position_name }}</text>
</view> </view>
<view class="input-box row verCenter"> <view class="input-box row verCenter">
<text class="label">拣 货 员：</text>
<text class="text">{{ item.create_name }}</text>
</view>
<view class="input-box row verCenter">
<text class="label">销 售 员：</text> <text class="label">销 售 员：</text>
<text class="text">{{ item.sale_name }}</text> <text class="text">{{ item.sale_name }}</text>
</view> </view>
<view class="input-box row verCenter">
<text class="label">拣货时间：</text>
<text class="text">{{ item.create_time }}</text>
</view>
<view class="input-box row"> <view class="input-box row">
<text class="label">主单仓库备注：</text> <text class="label">主单仓库备注：</text>
<text class="desc">{{ item.upstream_remark }}</text> <text class="desc">{{ item.upstream_remark }}</text>
...@@ -102,10 +96,24 @@ ...@@ -102,10 +96,24 @@
<text class="label">客户物料编码：</text> <text class="label">客户物料编码：</text>
<text class="text">{{ item.customer_material_number }}</text> <text class="text">{{ item.customer_material_number }}</text>
</view> </view>
<view class="input-box row verCenter">
<text class="label">拣 货 员：</text>
<text class="text">{{ item.create_name }}</text>
</view>
<view class="input-box row verCenter">
<text class="label">拣货时间：</text>
<text class="text">{{ item.create_time }}</text>
</view>
<view class="input-box row" style="flex: 0 0 100%;"> <view class="input-box row" style="flex: 0 0 100%;">
<text class="label">拣货照片：</text> <text class="label">拣货照片：</text>
<view class="pick_img_list row"> <view class="pick_img_list row">
<image :lazy-load="true" @click="previewChange(item.pick_img_list, i)" class="img_list" :src="v.small_image_url" v-for="(v, i) in item.pick_img_list" :key="i" mode="aspectFill"></image> <template v-if="item.pick_img_list.length > 0">
<view class="img_list" v-for="(v, i) in item.pick_img_list" :key="i">
<image :src="v.small_image_url" mode="aspectFill" @click="previewChange(item.pick_img_list, i)"></image>
<text class="iconfont icon-a-juxing11" @click="deletePic(index,i)"></text>
</view>
</template>
<view class="default row rowCenter verCenter" @click="chooseImageChange(index)" v-if="item.pick_img_list.length < maxNum"><text class="iconfont icon-a-juxing3"></text></view>
</view> </view>
</view> </view>
</view> </view>
...@@ -115,6 +123,7 @@ ...@@ -115,6 +123,7 @@
<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"> <view class="fix-btn row verCenter">
<view class="btn1 row rowCenter verCenter" @click="allChnage()"> <view class="btn1 row rowCenter verCenter" @click="allChnage()">
<text class="check-box-icon" :class="{ curr: filter_list.length > 0 && filter_list.length == filter_id.length }"></text> <text class="check-box-icon" :class="{ curr: filter_list.length > 0 && filter_list.length == filter_id.length }"></text>
...@@ -144,6 +153,7 @@ ...@@ -144,6 +153,7 @@
list: [], list: [],
filter_list: [], //筛选已选中的列表 filter_list: [], //筛选已选中的列表
filter_id: [], //过滤id filter_id: [], //过滤id
maxNum: 10, //最大上传图片数量
searchParams: { searchParams: {
stock_out_sn: '', stock_out_sn: '',
all_search_keyword: '' all_search_keyword: ''
...@@ -233,21 +243,6 @@ ...@@ -233,21 +243,6 @@
this.getData(); this.getData();
}, 500), }, 500),
/** /**
* 预览图片
* @param {Object} img
* @param {Object} index
*/
previewChange(arr, index) {
var data = arr.map(item => {
return item.big_image_url;
});
this.noexebshowFalg = false;
uni.previewImage({
current: index,
urls: data
});
},
/**
* 取消拣货 * 取消拣货
*/ */
cancelPicking() { cancelPicking() {
...@@ -313,6 +308,169 @@ ...@@ -313,6 +308,169 @@
}); });
}, },
/** /**
* 选择图片
*/
chooseImageChange(index) {
this.noexebshowFalg = false;
// 使用 chooseImage选择图片
uni.chooseImage({
count: this.maxNum,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: chooseImageRes => {
console.log('选择图片成功：', chooseImageRes);
// 显示loading
uni.showLoading({
title: '上传中...'
});
// 获取选择的图片路径数组
const imagePaths = chooseImageRes.tempFilePaths;
// 判断选择的图片数量是否超过最大限制数量
let maxNum = Number(imagePaths.length) + Number(this.list[index].pick_img_list.length); //当前上传的+已经上传的
if (maxNum > this.maxNum) {
uni.hideLoading();
uni.showToast({
title: '图片不超过' + this.maxNum + '张',
icon: 'none'
});
return false;
}
// 遍历图片路径数组，对每张图片进行压缩
imagePaths.forEach(imagePath => {
// 使用compressImage 压缩图片
uni.compressImage({
src: imagePath,
quality: 50, //压缩质量，范围0～100，数值越小，质量越低，压缩率越高
success: compressedRes => {
console.log('压缩图片成功：', compressedRes);
// 获取压缩后的图片路径
const compressedImagePath = compressedRes.tempFilePath;
// 在这里处理压缩后的图片，上传到服务器
uni.uploadFile({
url: API.upload + '?sys_type=4',
filePath: compressedImagePath,
name: 'file',
header: {
'Content-Type': 'multipart/form-data'
},
success: uploadFileRes => {
console.log('服务器上传图片成功：', uploadFileRes);
uni.hideLoading();
let data = JSON.parse(uploadFileRes.data);
if (data.code === 0) {
// 根据参数index更新list里的数组pick_img_list
let itemToUpdate = this.list[index];
itemToUpdate.pick_img_list.push({
pic_id: data.data.oss_image_id,
small_image_url: data.data.small_image_url,
big_image_url: data.data.big_image_url
});
// 更新整个list数组
this.list = [...this.list];
// 获取特定索引位置的pick_img_list
let pickImgList = this.list[index].pick_img_list;
// 使用flatMap获取所有的pic_id并拼接成字符串
let pic_ids = pickImgList.flatMap(item => item.pic_id).join(',');
//拣货图片更新
this.updatePickPics(this.list[index].id, pic_ids)
} else {
uni.showToast({
title: data.msg,
icon: 'none'
});
}
},
fail: error => {
console.log('上传图片失败：', error);
uni.hideLoading();
}
});
},
fail: err => {
console.log('压缩图片失败：', err);
}
});
});
}
});
},
/**
* 删除图片
* @param {Object} index 主索引index
* @param {Object} i 图片索引
*/
deletePic(index, i) {
const isValidIndex = index;
const isValidImageIndex = i;
uni.showModal({
title: '确认删除',
content: '确定要删除这张图片吗？',
success: (res) => {
if (res.confirm) {
// 用户点击确定
this.list[index].pick_img_list.splice(i, 1);
this.list = [...this.list];
// 获取特定索引位置的pick_img_list
let pickImgList = this.list[index].pick_img_list;
// 使用flatMap获取所有的pic_id并拼接成字符串
let pic_ids = pickImgList.flatMap(item => item.pic_id).join(',');
// 拣货图片更新
this.updatePickPics(this.list[index].id, pic_ids);
} else if (res.cancel) {
// 用户点击取消
console.log('用户点击取消');
}
}
});
},
/**
* 预览图片
* @param {Object} img
* @param {Object} index
*/
previewChange(arr, index) {
var data = arr.map(item => {
return item.big_image_url;
});
this.noexebshowFalg = false;
uni.previewImage({
current: index,
urls: data
});
},
/**
* 拣货图片更新
* @param {Object} pick_id
* @param {Object} pic_ids
*/
updatePickPics(pick_id, pic_ids) {
this.request(API.updatePickPics, 'POST', { pick_id: pick_id, pic_ids: pic_ids }, true).then(res => {
if (res.code === 0) {
} else {
uni.showToast({
title: res.msg,
icon: 'none'
});
}
});
},
/**
* 重置 * 重置
*/ */
resetChange() { resetChange() {
......
pages/stockRecheck/record.vue
...@@ -81,32 +81,39 @@ ...@@ -81,32 +81,39 @@
<text class="label">打包箱号：</text> <text class="label">打包箱号：</text>
<text class="text">{{ item.box_name }}</text> <text class="text">{{ item.box_name }}</text>
</view> </view>
<view class="input-box row verCenter">
<text class="label">销 售 员：</text>
<text class="text">{{ item.sale_name }}</text>
</view>
<view class="input-box row" style="flex: 0 0 100%;">
<text class="label">主单仓库备注：</text>
<text class="text" style="width: 530rpx;">{{ item.upstream_remark }}</text>
</view>
<view class="input-box row" style="flex: 0 0 100%;">
<text class="label">仓库备注：</text>
<text class="text" style="width: 530rpx;">{{ item.remark }}</text>
</view>
<view class="input-box row verCenter"> <view class="input-box row verCenter">
<text class="label">复 核 人：</text> <text class="label">复 核 人：</text>
<text class="text">{{ item.create_name }}</text> <text class="text">{{ item.create_name }}</text>
</view> </view>
<view class="input-box row verCenter"> <view class="input-box row verCenter">
<text class="label">销 售 员：</text>
<text class="text">{{ item.sale_name }}</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">复核时间：</text> <text class="label">复核时间：</text>
<text class="text">{{ item.create_time }}</text> <text class="text">{{ item.create_time }}</text>
</view> </view>
<view class="input-box row" style="flex: 0 0 100%;"> <view class="input-box row" style="flex: 0 0 100%;">
<text class="label">复核照片：</text> <text class="label">复核照片：</text>
<view class="pick_img_list row"> <view class="pick_img_list row">
<image @click="previewChange(item.recheck_img_list, i)" class="img_list" :src="v.small_image_url" v-for="(v, i) in item.recheck_img_list" :key="i" mode="aspectFill"></image> <template v-if="item.recheck_img_list.length > 0">
<view class="img_list" v-for="(v, i) in item.recheck_img_list" :key="i">
<image :src="v.small_image_url" mode="aspectFill" @click="previewChange(item.recheck_img_list, i)"></image>
<text class="iconfont icon-a-juxing11" @click="deletePic(index,i)"></text>
</view>
</template>
<view class="default row rowCenter verCenter" @click="chooseImageChange(index)" v-if="item.recheck_img_list.length < maxNum"><text class="iconfont icon-a-juxing3"></text></view>
</view> </view>
</view> </view>
<view class="input-box row" style="flex: 0 0 100%;">
<text class="label">主单仓库备注：</text>
<text class="text" style="width: 530rpx;">{{ item.upstream_remark }}</text>
</view>
<view class="input-box row" style="flex: 0 0 100%;">
<text class="label">仓库备注：</text>
<text class="text" style="width: 530rpx;">{{ item.remark }}</text>
</view>
</view> </view>
</view> </view>
<!-- 无数据展示 --> <!-- 无数据展示 -->
...@@ -142,6 +149,7 @@ ...@@ -142,6 +149,7 @@
hasMoreData: true, //是否分页加载 hasMoreData: true, //是否分页加载
filter_list: [], //筛选已选中的列表 filter_list: [], //筛选已选中的列表
filter_id: [], //过滤处理的id filter_id: [], //过滤处理的id
maxNum: 10, //最大上传图片数量
searchParams: { searchParams: {
stock_out_sn: '', stock_out_sn: '',
all_search_keyword: '' all_search_keyword: ''
...@@ -238,21 +246,6 @@ ...@@ -238,21 +246,6 @@
} }
}, },
/** /**
* 预览图片
* @param {Object} img
* @param {Object} index
*/
previewChange(arr, index) {
var data = arr.map(item => {
return item.big_image_url;
});
this.noexebshowFalg = false;
uni.previewImage({
current: index,
urls: data
});
},
/**
* 获取列表数据 * 获取列表数据
*/ */
getData() { getData() {
...@@ -317,6 +310,169 @@ ...@@ -317,6 +310,169 @@
}); });
}, },
/** /**
* 选择图片
*/
chooseImageChange(index) {
this.noexebshowFalg = false;
// 使用 chooseImage选择图片
uni.chooseImage({
count: this.maxNum,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: chooseImageRes => {
console.log('选择图片成功：', chooseImageRes);
// 显示loading
uni.showLoading({
title: '上传中...'
});
// 获取选择的图片路径数组
const imagePaths = chooseImageRes.tempFilePaths;
// 判断选择的图片数量是否超过最大限制数量
let maxNum = Number(imagePaths.length) + Number(this.list[index].recheck_img_list.length); //当前上传的+已经上传的
if (maxNum > this.maxNum) {
uni.hideLoading();
uni.showToast({
title: '图片不超过' + this.maxNum + '张',
icon: 'none'
});
return false;
}
// 遍历图片路径数组，对每张图片进行压缩
imagePaths.forEach(imagePath => {
// 使用compressImage 压缩图片
uni.compressImage({
src: imagePath,
quality: 50, //压缩质量，范围0～100，数值越小，质量越低，压缩率越高
success: compressedRes => {
console.log('压缩图片成功：', compressedRes);
// 获取压缩后的图片路径
const compressedImagePath = compressedRes.tempFilePath;
// 在这里处理压缩后的图片，上传到服务器
uni.uploadFile({
url: API.upload + '?sys_type=4',
filePath: compressedImagePath,
name: 'file',
header: {
'Content-Type': 'multipart/form-data'
},
success: uploadFileRes => {
console.log('服务器上传图片成功：', uploadFileRes);
uni.hideLoading();
let data = JSON.parse(uploadFileRes.data);
if (data.code === 0) {
// 根据参数index更新list里的数组recheck_img_list
let itemToUpdate = this.list[index];
itemToUpdate.recheck_img_list.push({
pic_id: data.data.oss_image_id,
small_image_url: data.data.small_image_url,
big_image_url: data.data.big_image_url
});
// 更新整个list数组
this.list = [...this.list];
// 获取特定索引位置的recheck_img_list
let pickImgList = this.list[index].recheck_img_list;
// 使用flatMap获取所有的pic_id并拼接成字符串
let pic_ids = pickImgList.flatMap(item => item.pic_id).join(',');
//拣货图片更新
this.updateCheckedPics(this.list[index].recheck_item_id, pic_ids)
} else {
uni.showToast({
title: data.msg,
icon: 'none'
});
}
},
fail: error => {
console.log('上传图片失败：', error);
uni.hideLoading();
}
});
},
fail: err => {
console.log('压缩图片失败：', err);
}
});
});
}
});
},
/**
* 删除图片
* @param {Object} index 主索引index
* @param {Object} i 图片索引
*/
deletePic(index, i) {
const isValidIndex = index;
const isValidImageIndex = i;
uni.showModal({
title: '确认删除',
content: '确定要删除这张图片吗？',
success: (res) => {
if (res.confirm) {
// 用户点击确定
this.list[index].recheck_img_list.splice(i, 1);
this.list = [...this.list];
// 获取特定索引位置的recheck_img_list
let pickImgList = this.list[index].recheck_img_list;
// 使用flatMap获取所有的pic_id并拼接成字符串
let pic_ids = pickImgList.flatMap(item => item.pic_id).join(',');
// 复核图片更新
this.updateCheckedPics(this.list[index].recheck_item_id, pic_ids);
} else if (res.cancel) {
// 用户点击取消
console.log('用户点击取消');
}
}
});
},
/**
* 预览图片
* @param {Object} img
* @param {Object} index
*/
previewChange(arr, index) {
var data = arr.map(item => {
return item.big_image_url;
});
this.noexebshowFalg = false;
uni.previewImage({
current: index,
urls: data
});
},
/**
* 复核图片更新
* @param {Object} checked_id
* @param {Object} pic_ids
*/
updateCheckedPics(checked_id, pic_ids) {
this.request(API.updateCheckedPics, 'POST', { checked_id: checked_id, pic_ids: pic_ids }, true).then(res => {
if (res.code === 0) {
} else {
uni.showToast({
title: res.msg,
icon: 'none'
});
}
});
},
/**
* 重置 * 重置
*/ */
resetChange() { resetChange() {
......
util/api.js
...@@ -140,6 +140,14 @@ const API = { ...@@ -140,6 +140,14 @@ const API = {
* */ * */
getAllPickedList: API_BASE + '/api/stockOut/getAllPickedList', getAllPickedList: API_BASE + '/api/stockOut/getAllPickedList',
/** /**
* 拣货图片更新
* */
updatePickPics: API_BASE + '/api/stockOut/updatePickPics',
/**
* 复核图片更新
* */
updateCheckedPics: API_BASE + '/api/stockRecheck/updateCheckedPics',
/**
* 取消拣货 * 取消拣货
* */ * */
cancelPicking: API_BASE + '/api/stockOut/cancelPicking', cancelPicking: API_BASE + '/api/stockOut/cancelPicking',
......
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