uniapp-yzcj-zlfk/pages/detail/detail.vue

<template>
	<view>
		<!-- 单据明细 -->
		<view class="margin-top">
			<scroll-view :scroll-y="true" :show-scrollbar="true">
				<view class="scroll-list">
					<view class="list-item">
						<text class="text-gray item-title">工作中心</text>
						<text class="item-content">{{billDetail.workCenterGuid||''}}</text>
					</view>
					<view class="list-item">
						<text class="text-gray item-title">客户合同号</text>
						<text class="item-content">{{billDetail.khhth}}</text>
					</view>
					<view class="list-item">
						<text class="text-gray item-title">客户名称</text>
						<text class="item-content">{{billDetail.khmc}}</text>
					</view>
					<view class="list-item">
						<text class="text-gray item-title">加工指导书编号</text>
						<text class="item-content">{{billDetail.jgzdsbh}}</text>
					</view>
					<view class="list-item">
						<text class="text-gray item-title">销售物流号</text>
						<text class="item-content">{{billDetail.xswlh}}</text>
					</view>
					<view class="list-item">
						<text class="text-gray item-title">面料编码</text>
						<text class="item-content">{{billDetail.ynDyeFabCode}}</text>
					</view>
					<view class="list-item">
						<text class="text-gray item-title">合同交期</text>
						<text class="item-content">{{billDetail.htjq}}</text>
					</view>
					<view class="list-item">
						<text class="text-gray item-title">合同数量</text>
						<text class="item-content">{{billDetail.htsl}}</text>
					</view>
					<view class="list-item">
						<text class="text-gray item-title">计量单位</text>
						<text class="item-content">{{billDetail.jldw}}</text>
					</view>
					<view class="list-item">
						<text class="text-gray item-title">反馈初始结论</text>
						<text class="item-content">{{billDetail.fkcsjl||''}}</text>
					</view>
					<view class="list-item">
						<text class="text-gray item-title">反馈人</text>
						<text class="item-content">{{billDetail.fkr}}</text>
					</view>
					<view class="list-item">
						<text class="text-gray item-title">反馈时间</text>
						<text class="item-content">{{billDetail.fksj}}</text>
					</view>
					<view class="list-item">
						<text class="text-gray item-title">反馈次数</text>
						<text class="item-content">{{billDetail.fkcs}}</text>
					</view>
					<view class="list-item">
						<text class="text-gray item-title">反馈原因</text>
						<text class="item-content">{{billDetail.fkyy}}</text>
					</view>
					<view class="list-item">
						<text class="text-gray item-title">验装工厂处理结论</text>
						<text class="item-content">{{billDetail.yzgccljl||''}}</text>
					</view>
					<view class="list-item">
						<text class="text-gray item-title">验装工厂处理意见</text>
						<text class="item-content">{{billDetail.yzgcclyj||''}}</text>
					</view>
					<view class="list-item">
						<text class="text-gray item-title">验装工厂处理人</text>
						<text class="item-content">{{billDetail.yzgcclr||''}}</text>
					</view>
					<view class="list-item">
						<text class="text-gray item-title">验装工厂处理时间</text>
						<text class="item-content">{{billDetail.yzgcclsj||''}}</text>
					</view>
					<view class="list-item">
						<text class="text-gray item-title">验装工厂备注</text>
						<text class="item-content">{{billDetail.yzgcbz||''}}</text>
					</view>
					<view class="list-item">
						<text class="text-gray item-title">品管部最终处理结论</text>
						<text class="item-content">{{billDetail.pgbzzcljl||''}}</text>
					</view>
					<view class="list-item">
						<text class="text-gray item-title">品管部最终处理意见</text>
						<text class="item-content">{{billDetail.pgbzzclyj||''}}</text>
					</view>
					<view class="list-item">
						<text class="text-gray item-title">品管部最终处理人</text>
						<text class="item-content">{{billDetail.pgbzzclr||''}}</text>
					</view>
					<view class="list-item">
						<text class="text-gray item-title">品管部最终处理时间</text>
						<text class="item-content">{{billDetail.pgbzzclsj||''}}</text>
					</view>
					<view class="list-item">
						<text class="text-gray item-title">返工部门</text>
						<text class="item-content">{{billDetail.fgbm||''}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 图片上传 -->
		<view class="margin-top">
			<view class="cu-bar bg-white">
				<view class="action">
					图片上传
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" @tap="ViewImage" :data-url="item.url">
						<image :src="item.url" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length<9">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
		</view>
		<!-- 保存 -->
		<view class="padding margin-tb-sm text-center" v-show="isAllowEdit=='true'">
			<button class="cu-btn block round bg-blue lg" @click="upload">保存</button>
		</view>

		<mx-compress ref="mxCompress" />
	</view>
</template>

<script>
	//导入图片压缩组件
	import mxCompress from '../../components/mx-compress/mx-compress.vue';

	export default {
		components: {
			mxCompress //注册组件
		},
		data() {
			return {
				billDetail: {}, //单据明细
				isAllowEdit: '', //是否允许保存
				paramData: '', //单据列表页面获取数据参数
				imgList: [] //反馈图片列表
			}
		},
		onLoad(param) {
			//若加载页面时未提供参数值，则直接返回
			if (Object.keys(param).length == 0) return
			//给明细界面赋值、设置提交按钮是否可用以及记录单据列表页面是否查询全部单据
			this.billDetail = JSON.parse(decodeURIComponent(param.billData)) //数据中可能包括?、&这些特殊符号，需要通过decodeURIComponent解码
			this.isAllowEdit = param.isAllowEdit
			this.paramData = param.paramData

			//添加请求拦截器
			var vm = this
			uni.getStorage({
				key: 'token',
				success: function(res) {
					//请求拦截器
					uni.addInterceptor('request', {
						invoke(args) {
							args.header = {
								'token': res.data
							}
						}
					})

					//获取已经上传的图片
					uni.request({
						url: 'https://api.lttc.cn/mes/yzcj/qualityFeedback/getImgList',
						data: {
							orgFrameGuid: vm.billDetail.orgFrameGuid,
							jgzdsbh: vm.billDetail.jgzdsbh,
							xswlh: vm.billDetail.xswlh,
							fkcs: vm.billDetail.fkcs,
						},
						success: (res) => {
							if (res.data.code == 0) {
								//根据图片src链接显示已上传的图片
								vm.imgList = res.data.data;
							} else if (res.data.code == 101) { //未登录
								//清空token缓存
								uni.removeStorage({
									key: 'token',
									success: function(res) {
										//从redis缓存中未获取到token失败时跳转登录界面
										uni.navigateTo({
											url: '../login/login?isback=1'
										})
									},
									fail() {
										//从清空token缓存失败时提示
										uni.showToast({
											title: '登录已过期时，清空token缓存失败！',
											icon: 'none'
										})
									}
								});
							} else {
								uni.showToast({
									title: '获取反馈图片列表失败！原因是：' + res.data.msg,
									icon: 'none'
								})
							}
						},
						fail: (res) => {
							uni.showToast({
								title: '访问网络获取反馈图片列表失败！原因是：' + res.errMsg,
								icon: 'none'
							})
						}
					})
				},
				fail() {
					//从缓存中未获取到token失败时跳转登录界面
					uni.navigateTo({
						url: '../login/login?isback=1'
					})
				}
			});
		},
		onBackPress(e) {
			//返回上一页面，即单据列表页
			uni.navigateTo({
				url: '../billlist/billlist?paramData=' + this.paramData
			})
			//返回值为 true 时，才表示不执行默认的返回，自行处理此时的业务逻辑
			return true
		},
		methods: {
			ChooseImage() {
				uni.chooseImage({
					count: 9, //最大选择张数
					sizeType: ['original', 'compressed'], //缩略图及原图
					sourceType: ['camera', 'album'], //选择图片模式：相机、相册
					success: async (res) => {
						try {
							// 调用组件的compress方法开始压缩，返回值是压缩的结果，结果为数组，每一项是一个对象
							// {
							// 	file:'在H5中为File格式的图片数据，在小程序中为图片临时路径',
							// 	base64:'在H5和小程序中都是base64格式数据，只有当指定base64为true时才有'
							// }
							let result = await this.$refs.mxCompress.compress(res, {
								base64: true, // 是否也返回base64格式，默认false，既不返回base64格式图片数据，反之亦然
								maxLongSize: 1920, //最长尺寸
								quality: 0.8, // 压缩质量（0-1），默认为0.8，值越小压缩质量越大
								showLoading: true, // 是否显示loading提示，也可以传入一个字符串（相当于loading时的title），默认为true，
								mask: true // 当showLoading为true时，是否显示遮罩层，默认为true
							});

							//循环添加压缩后的图片
							for (let item of result) {
								//H5端：根据压缩后图片的base64格式数据来上传图片					
								//#ifdef H5
								let imgSrc = item.base64;
								//#endif
								//小程序端：根据压缩后图片的临时路径来上传图片
								//#ifdef MP-WEIXIN
								let imgSrc = item.file;
								//#endif

								this.imgList.push({
									"url": imgSrc,
									"status": 0
								})
							}

						} catch (error) {
							uni.showToast({
								title: '图片压缩出现异常！原因是：' + error,
								icon: 'none'
							})
						}
					}
				});
			},
			ViewImage(e) {
				//获取当前单据上传的所有图片的url地址
				var imgUrls = []
				for (let item of this.imgList) {
					imgUrls.push(item.url)
				}

				//预览图片
				uni.previewImage({
					urls: imgUrls,
					current: e.currentTarget.dataset.url,
				});
			},
			DelImg(e) {
				//根据图片状态删除图片，若未上传至服务器，则直接删除，否则需删除服务器的图片
				var img = this.imgList[e.currentTarget.dataset.index]
				if (img.status == 0) {
					//界面删除图片
					this.imgList.splice(e.currentTarget.dataset.index, 1)
				} else {
					//图片已上传至服务器，询问用户是否确定删除
					uni.showModal({
						title: '提示',
						content: '此图片已上传至服务器，确定要删除这张面料图片吗？',
						cancelText: '保留',
						confirmText: '删除',
						success: result => {
							if (result.confirm) {
								//访问网络删除已上传的图片
								uni.request({
									url: 'https://api.lttc.cn/mes/yzcj/qualityFeedback/deleteImg',
									data: {
										"imgId": img.id
									},
									success: (res) => {
										if (res.data.code == 0) {
											//数据库删除图片记录成功后，界面删除图片
											this.imgList.splice(e.currentTarget.dataset.index, 1);
										} else if (res.data.code == 101) { //未登录
											//清空token缓存
											uni.removeStorage({
												key: 'token',
												success: function(res) {
													//从redis缓存中未获取到token失败时跳转登录界面
													uni.navigateTo({
														url: '../login/login?isback=1'
													})
												},
												fail() {
													//从清空token缓存失败时提示
													uni.showToast({
														title: '登录已过期时，清空token缓存失败！',
														icon: 'none'
													})
												}
											});
										} else {
											uni.showToast({
												title: '删除反馈图片失败！原因是：' + res.data.msg,
												icon: 'none'
											})
										}
									},
									fail: (res) => {
										uni.showToast({
											title: '访问网络删除图片失败！原因是：' + res.errMsg,
											icon: 'none'
										})
									}
								})
							}
						}
					})
				}
			},
			upload() {
				//获取需要上传到服务器的图片列表
				var uploadImgs = this.imgList.filter(function(item) {
					return item.status == 0
				})

				//若没有需要上传的图片，则直接返回
				if (uploadImgs.length == 0) return

				//循环上传图片
				for (let file of uploadImgs) {
					//访问网络上传图片
					uni.uploadFile({
						url: 'https://api.lttc.cn/mes/yzcj/qualityFeedback/uploadFile',
						name: "file",
						filePath: file.url,
						formData: {
							"orgFrameGuid": this.billDetail.orgFrameGuid,
							"jgzdsbh": this.billDetail.jgzdsbh,
							"xswlh": this.billDetail.xswlh,
							"fkcs": this.billDetail.fkcs
						},
						success: (res) => {
							let jsonData = JSON.parse(res.data);
							if (jsonData.code == 0) {
								//上传图片成功后，更新图片Id和状态
								file.id = jsonData.data.guid;
								file.status = 1;

								//提示保存成功
								uni.showToast({
									title: '保存成功',
									icon: 'success'
								})
							} else {
								//上传图片失败，弹框提示
								uni.showToast({
									title: '上传反馈图片失败！原因是：' + jsonData.msg,
									icon: 'none'
								})
							}
						},
						fail: (res) => {
							uni.showToast({
								title: '访问网络上传反馈图片失败！原因是：' + res.errMsg,
								icon: 'none'
							})
						}
					});
				}
			}
		}
	}
</script>

<style>
	.scroll-list {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: stretch;
		height: 750rpx;
	}

	.list-item {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		min-height: max-content;
		background-color: #FFFFFF;
		font-size: 30upx;
		line-height: 80upx;
	}

	.list-item+.list-item {
		border-top: 1upx solid #8799a3;
	}

	.item-title {
		padding-inline-start: 3%;
		width: 40%;
		text-align: start;
	}

	.item-content {
		text-align: justify;
		word-break: break-all;
		width: 60%;
		line-height: 50upx;
	}
</style>