Skip to content

梁建民 / wmsApp

Go to a project
Commit be1a7be9 by liangjianmin
Options

feat(shipOut): 更新出库单图片管理功能，支持不同类型图片的上传与删除，优化图片数组初始化与数量检查逻辑

parent 539658d4
Inline Side-by-side
Showing with 112 additions and 12 deletions
pages/stockRecheck/shipOut.vue
......@@ -124,7 +124,7 @@
<template v-if="item.receipt_img_list.length > 0">
<view class="img_list" v-for="(v, i) in item.receipt_img_list" :key="i">
<image :src="v.small_image_url" mode="aspectFill" @click="previewChange(item.receipt_img_list, i)"></image>
<text class="iconfont icon-a-juxing11" @click="deletePic(index, i)" v-if="v.id_del"></text>
<text class="iconfont icon-a-juxing11" @click="deletePic(index, i, 2)" v-if="v.id_del"></text>
</view>
</template>
<view class="default row rowCenter verCenter" @click="chooseImageChange(index, 2)" v-if="item.receipt_img_list.length < maxNum"><text class="iconfont icon-a-juxing3"></text></view>
......@@ -136,7 +136,7 @@
<template v-if="item.customer_take_img_list.length > 0">
<view class="img_list" v-for="(v, i) in item.customer_take_img_list" :key="i">
<image :src="v.small_image_url" mode="aspectFill" @click="previewChange(item.customer_take_img_list, i)"></image>
<text class="iconfont icon-a-juxing11" @click="deletePic(index, i)" v-if="v.id_del"></text>
<text class="iconfont icon-a-juxing11" @click="deletePic(index, i, 3)" v-if="v.id_del"></text>
</view>
</template>
<view class="default row rowCenter verCenter" @click="chooseImageChange(index, 3)" v-if="item.customer_take_img_list.length < maxNum"><text class="iconfont icon-a-juxing3"></text></view>
......@@ -148,7 +148,7 @@
<template v-if="item.sign_img_list.length > 0">
<view class="img_list" v-for="(v, i) in item.sign_img_list" :key="i">
<image :src="v.small_image_url" mode="aspectFill" @click="previewChange(item.sign_img_list, i)"></image>
<text class="iconfont icon-a-juxing11" @click="deletePic(index, i)" v-if="v.id_del"></text>
<text class="iconfont icon-a-juxing11" @click="deletePic(index, i, 1)" v-if="v.id_del"></text>
</view>
</template>
<view class="default row rowCenter verCenter" @click="chooseImageChange(index, 1)" v-if="item.sign_img_list.length < maxNum"><text class="iconfont icon-a-juxing3"></text></view>
......@@ -961,6 +961,21 @@
*/
chooseImageChange(index, pic_type) {
this.noexebshowFalg = false;
// 初始化图片数组，防止报错
if (!this.list[index].sign_pic_ids) {
this.list[index].sign_pic_ids = [];
}
if (pic_type === 1 && !this.list[index].sign_img_list) {
this.list[index].sign_img_list = [];
}
if (pic_type === 2 && !this.list[index].receipt_img_list) {
this.list[index].receipt_img_list = [];
}
if (pic_type === 3 && !this.list[index].customer_take_img_list) {
this.list[index].customer_take_img_list = [];
}
// 使用 chooseImage选择图片
uni.chooseImage({
count: this.maxNum,
......@@ -978,8 +993,22 @@
const imagePaths = chooseImageRes.tempFilePaths;
// 判断选择的图片数量是否超过最大限制数量
let maxNum = Number(imagePaths.length) + Number(this.list[index].sign_pic_ids.length); //当前上传的+已经上传的
if (maxNum > this.maxNum) {
let currentImgCount = 0;
// 根据pic_type获取对应的图片列表长度
if (pic_type === 1) {
// 签收图片
currentImgCount = this.list[index].sign_img_list ? this.list[index].sign_img_list.length : 0;
} else if (pic_type === 2) {
// 回单图片
currentImgCount = this.list[index].receipt_img_list ? this.list[index].receipt_img_list.length : 0;
} else if (pic_type === 3) {
// 客户收货图片
currentImgCount = this.list[index].customer_take_img_list ? this.list[index].customer_take_img_list.length : 0;
}
// 检查是否超过最大数量限制
if (Number(imagePaths.length) + Number(currentImgCount) > this.maxNum) {
uni.hideLoading();
uni.showToast({
title: '图片不超过' + this.maxNum + '张',
......@@ -1016,22 +1045,65 @@
// 根据参数index更新list里的数组sign_pic_ids
let itemToUpdate = this.list[index];
itemToUpdate.sign_pic_ids.push({
// 根据pic_type类型，将图片添加到对应的图片列表中
if (pic_type === 1) {
// 签收图片
if (!itemToUpdate.sign_img_list) {
itemToUpdate.sign_img_list = [];
}
itemToUpdate.sign_img_list.push({
img_id: data.data.oss_image_id,
small_image_url: data.data.small_image_url,
big_image_url: data.data.big_image_url,
url: data.data.oss_image_url,
id_del: 1
});
} else if (pic_type === 2) {
// 回单图片
if (!itemToUpdate.receipt_img_list) {
itemToUpdate.receipt_img_list = [];
}
itemToUpdate.receipt_img_list.push({
img_id: data.data.oss_image_id,
small_image_url: data.data.small_image_url,
big_image_url: data.data.big_image_url,
url: data.data.oss_image_url,
id_del: 1
});
} else if (pic_type === 3) {
// 客户收货图片
if (!itemToUpdate.customer_take_img_list) {
itemToUpdate.customer_take_img_list = [];
}
itemToUpdate.customer_take_img_list.push({
img_id: data.data.oss_image_id,
small_image_url: data.data.small_image_url,
big_image_url: data.data.big_image_url,
url: data.data.oss_image_url,
id_del: 1
});
}
// 更新整个list数组
this.list = [...this.list];
// 只传新上传图片的 img_id
let img_id = data.data.oss_image_id;
//对应pic_ids的集合，根据pic_type获取对应的图片列表
let pic_ids = '';
if (pic_type === 1) {
// 签收图片
pic_ids = this.list[index].sign_img_list ? this.list[index].sign_img_list.map(item => item.img_id).join(',') : '';
} else if (pic_type === 2) {
// 回单图片
pic_ids = this.list[index].receipt_img_list ? this.list[index].receipt_img_list.map(item => item.img_id).join(',') : '';
} else if (pic_type === 3) {
// 客户收货图片
pic_ids = this.list[index].customer_take_img_list ? this.list[index].customer_take_img_list.map(item => item.img_id).join(',') : '';
}
//签约图片更新
this.setStockoutPics(this.list[index].stock_out_id, img_id, pic_type);
this.setStockoutPics(this.list[index].stock_out_id, pic_ids, pic_type);
} else {
uni.showToast({
......@@ -1059,7 +1131,7 @@
},
/** 保存出库单图片
* @param {number} stock_out_id - 出库单ID
* @param {string} img_id - 图片ID,多个以逗号分隔
* @param {string} pic_ids - 图片ID,多个以逗号分隔
* @param {number} pic_type - 1 签收图 2回单图 3客户收货图
*/
setStockoutPics(stock_out_id, pic_ids, pic_type, callback) {
......@@ -1090,16 +1162,44 @@
* 删除图片
* @param {Object} index 主索引index
* @param {Object} i 图片索引
* @param {Number} pic_type 图片类型 1签收图 2回单图 3客户收货图
*/
deletePic(index, i) {
deletePic(index, i, pic_type) {
uni.showModal({
title: '确认删除',
content: '确定要删除这张图片吗？',
success: (res) => {
if (res.confirm) {
//签约图片删除
// 根据pic_type类型，从对应的图片列表中删除图片
let itemToUpdate = this.list[index];
let imgList;
if (pic_type === 1) {
// 签收图片
imgList = itemToUpdate.sign_img_list;
if (imgList && imgList.length > i) {
imgList.splice(i, 1);
}
} else if (pic_type === 2) {
// 回单图片
imgList = itemToUpdate.receipt_img_list;
if (imgList && imgList.length > i) {
imgList.splice(i, 1);
}
} else if (pic_type === 3) {
// 客户收货图片
imgList = itemToUpdate.customer_take_img_list;
if (imgList && imgList.length > i) {
imgList.splice(i, 1);
}
}
// 更新整个list数组
this.list = [...this.list];
// 更新到服务器
let pic_ids = imgList ? imgList.map(item => item.img_id).join(',') : '';
this.setStockoutPics(this.list[index].stock_out_id, pic_ids, pic_type);
} else if (res.cancel) {
// 用户点击取消
console.log('用户点击取消');
......
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