Skip to content

梁建民 / wmsApp

Go to a project
Commit 1d5f4265 by liangjianmin
Options

feat(transfer): 添加移位照片上传功能 

- 新增移位照片上传区域，支持最多{{ maxNum }}张图片上传
- 实现图片选择、预览和删除功能，提升用户体验
- 更新样式以适应新功能，确保界面美观和一致性
- 添加图片上传逻辑，支持压缩和上传至服务器
parent 91f0f1bc
Inline Side-by-side
Showing with 169 additions and 17 deletions
assets/css/transfer/task.scss
......@@ -255,6 +255,24 @@
font-weight: bold;
}
.input-title-desc {
font-size: 14rpx;
color: #919399;
font-weight: normal;
}
.num {
.t1 {
font-size: 14rpx;
color: #1969f9;
}
.t2 {
font-size: 14rpx;
color: #919399;
}
}
.arrow {
color: #1969f9;
font-size: 16rpx;
......@@ -262,6 +280,49 @@
}
}
.pic-list {
flex-wrap: wrap;
margin-bottom: 18rpx;
.pic-default {
width: 120rpx;
height: 120rpx;
background: #f5f5f7;
border-radius: 10rpx;
margin-right: 15rpx;
.iconfont {
font-size: 60rpx;
color: #c6c7cc;
}
}
.pic-box {
position: relative;
width: 120rpx;
height: 120rpx;
background: #f5f5f7;
border-radius: 10rpx;
margin-right: 15rpx;
margin-bottom: 15rpx;
image {
width: 120rpx;
height: 120rpx;
border-radius: 10rpx;
}
.iconfont {
position: absolute;
right: 0;
top: 0;
font-size: 30rpx;
color: #ff3700;
z-index: 9;
}
}
}
.input-box {
.uni-input {
height: 55rpx;
......
pages/transfer/task.vue
......@@ -206,17 +206,28 @@
<text class="iconfont icon-a-juxing11" v-if="input_flag_position_code" @click="clearInput(3)"></text>
</view>
</view>
<!-- 移位照片上传区域 -->
<view class="form-input">
<view class="input-title">
<text class="arrow"></text>
<text class="input-title-t1">目标容器：</text>
<view class="input-title row bothSide verCenter">
<view>
<text class="input-title-t1">移位照片：</text>
<text class="input-title-desc">最多只支持{{ maxNum }}张图</text>
</view>
<view class="num">
<text class="t1">{{ image_list.length }}</text>
<text class="t2">/{{ maxNum }}</text>
</view>
</view>
<view class="input-box-search row bothSide verCenter">
<view class="row verCenter">
<text class="iconfont icon-juxing1"></text>
<input class="uni-input" placeholder="请扫描或输入目标容器" placeholder-style="color:#919399" v-model="formParams.container_sn" @input="handleInput(4, formParams.container_sn)" />
<view class="pic-list row">
<template v-if="image_list.length > 0">
<view class="pic-box" v-for="(item, i) in image_list" :key="i">
<image :src="item" mode="aspectFill" @click="previewChange(image_list, i)"></image>
<text class="iconfont icon-a-juxing11" @click="deletePic(i)"></text>
</view>
</template>
<view class="pic-default row rowCenter verCenter" @click="chooseImageChange()" v-if="image_list.length < maxNum">
<text class="iconfont icon-a-juxing3"></text>
</view>
<text class="iconfont icon-a-juxing11" v-if="input_flag_container_sn" @click="clearInput(4)"></text>
</view>
</view>
<view class="btn row verCenter bothSide">
......@@ -241,7 +252,10 @@
input_flag_origin_pos_code: false,
input_flag_stock_in_batch_sn: false,
input_flag_position_code: false,
input_flag_container_sn: false,
img_upload_url: uni.getStorageSync('img_upload_url') || 'http://image.liexindev.net', // oss系统
image_list: [], // 本地图片路径列表
server_image_list: [], // 服务器图片ID列表
maxNum: 10, // 最大上传图片数量
page: 1,
limit: 1000,
index: 0,
......@@ -259,7 +273,7 @@
transfer_item_id: '',
transfer_qty: '',
position_code: '',
container_sn: ''
pic_ids: '' // 移位照片ID集合，逗号分割
}
};
},
......@@ -282,10 +296,20 @@
onShow() {
this.getData();
},
watch: {
// 监听服务器图片ID列表变化，自动更新pic_ids
server_image_list(arr) {
this.formParams.pic_ids = arr.length > 0 ? arr.join(',') : '';
}
},
methods: {
showDrawer(val) {
this.detail = val;
this.formParams.transfer_item_id = val.transfer_item_id;
// 重置图片相关数据
this.image_list = [];
this.server_image_list = [];
this.formParams.pic_ids = '';
this.$refs.showRight.open();
},
closeDrawer() {
......@@ -361,9 +385,6 @@
} else if (type == 3) {
this.formParams.position_code = '';
this.input_flag_position_code = false;
} else if (type == 4) {
this.formParams.container_sn = '';
this.input_flag_container_sn = false;
}
},
/**
......@@ -380,8 +401,6 @@
this.getData();
} else if (type == 3) {
this.input_flag_position_code = true;
} else if (type == 4) {
this.input_flag_container_sn = true;
}
} else {
if (type == 1) {
......@@ -390,8 +409,6 @@
this.input_flag_stock_in_batch_sn = false;
} else if (type == 3) {
this.input_flag_position_code = false;
} else if (type == 4) {
this.input_flag_container_sn = false;
}
}
}, 500),
......@@ -419,6 +436,80 @@
});
}
});
},
/**
* 选择图片
*/
chooseImageChange() {
uni.chooseImage({
count: this.maxNum - this.image_list.length,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: chooseImageRes => {
uni.showLoading({ title: '上传中...' });
var imagePaths = chooseImageRes.tempFilePaths;
// 判断选择的图片数量是否超过最大限制
var totalNum = imagePaths.length + this.image_list.length;
if (totalNum > this.maxNum) {
uni.hideLoading();
uni.showToast({ title: `图片不超过${this.maxNum}张`, icon: 'none' });
return false;
}
// 遍历图片路径，压缩并上传
imagePaths.forEach(imagePath => {
uni.compressImage({
src: imagePath,
quality: 60,
success: compressedRes => {
var compressedImagePath = compressedRes.tempFilePath;
uni.uploadFile({
url: `${this.img_upload_url}/uploadImage?sys_type=4`,
filePath: compressedImagePath,
name: 'file',
timeout: 10000,
header: { 'Content-Type': 'multipart/form-data' },
success: uploadFileRes => {
this.image_list.push(compressedImagePath);
uni.hideLoading();
var data = JSON.parse(uploadFileRes.data);
if (data.code === 0) {
this.server_image_list.push(data.data.oss_image_id);
} else {
uni.showToast({ title: data.msg, icon: 'none' });
}
},
fail: () => {
uni.showToast({ title: '上传图片失败', icon: 'none' });
uni.hideLoading();
}
});
},
fail: err => {
console.log('压缩图片失败：', err);
}
});
});
}
});
},
/**
* 删除图片
* @param {Number} index 图片索引
*/
deletePic(index) {
this.image_list.splice(index, 1);
this.server_image_list.splice(index, 1);
},
/**
* 预览图片
* @param {Array} imgs 图片列表
* @param {Number} index 当前索引
*/
previewChange(imgs, index) {
uni.previewImage({
current: index,
urls: imgs
});
}
}
};
......
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