TuBaoSoft-Ui-Zd/pages/home/patrolInspection/patrolDetails.vue

<template>
	<view>
		<view
			style="box-shadow: 0px 0px 8px 0px rgba(165, 189, 251, 0.4);width: 96%;border-top-right-radius: 10rpx;margin: 10rpx auto;padding-top: 10rpx;">
			<span
				style="width: 10rpx;height: 40rpx;background-color: #2979ff;display: block;float: left;margin-top: 20rpx;"></span>
			<!-- <h4 style="width: 140rpx;border-radius: 200rpx;text-align: center;color: #2979ff;border: 2rpx solid #1785FF;float: right;margin-right: 10rpx;margin-top: 10rpx;">2222222</h4> -->
			<view style="width: 92%;margin: 0 auto;margin: 0 auto;">
				<view
					style="display: flex;justify-content: space-between;height: 80rpx;line-height: 80rpx;border-bottom: 1rpx solid #eff4ff;">
					<h3>基本信息</h3>
				</view>
				<view>
					<view style="width: 100%;height: 60rpx;line-height: 60rpx;">
						<view style="float: left;">仓库</view>
						<view style="float: right;">{{form.fWarehouseName}}</view>
					</view>
					<view style="width: 100%;height: 60rpx;line-height: 60rpx;">
						<view style="float: left;">计划日期</view>
						<view style="float: right;">{{form.fInspectionDatetime}}</view>
					</view>
					<view style="width: 100%;height: 60rpx;line-height: 60rpx;">
						<view style="float: left;">最新巡查日期</view>
						<view style="float: right;">{{form.fUpdateTime}}</view>
					</view>
					<view style="width: 100%;height: 60rpx;line-height: 60rpx;">
						<view style="float: left;">巡检员</view>
						<view style="float: right;">{{form.fInspectorName}}</view>
					</view>
					<view style="width: 100%;">
						<u-form-item label="备注" style="margin: 0;padding: 0;">
							<u-input v-model="form.fRemark" :disabled="true" height="70rpx" type="textarea"
								placeholder="" />
						</u-form-item>
					</view>
				</view>
				<!-- <view style="width: 100%;margin: 0 auto;height: 80rpx;margin: 0 auto;line-height: 80rpx;border-top: 1rpx solid #eff4ff;" @click="expenseDetails(item)">
					<view style="float: left;"><h3>立即巡检</h3></view>
					<view style="float: right;"><u-icon name="arrow-right"></u-icon></view>
				</view> -->
			</view>
		</view>
		<view
			style="box-shadow: 0px 0px 8px 0px rgba(165, 189, 251, 0.4);width: 96%;border-top-right-radius: 10rpx;margin: 10rpx auto;padding-top: 10rpx;">
			<span
				style="width: 10rpx;height: 40rpx;background-color: #2979ff;display: block;float: left;margin-top: 20rpx;"></span>
			<!-- <h4 style="width: 140rpx;border-radius: 200rpx;text-align: center;color: #2979ff;border: 2rpx solid #1785FF;float: right;margin-right: 10rpx;margin-top: 10rpx;">2222222</h4> -->
			<view style="width: 92%;margin: 0 auto;margin: 0 auto;">
				<view
					style="display: flex;justify-content: space-between;height: 80rpx;line-height: 80rpx;border-bottom: 1rpx solid #eff4ff;">
					<h3>{{deptName == '外部用户'?fileList.length == 0?'暂无附件':'附件':'上传附件'}}</h3>
				</view>
				<view>
					<u-upload style="width: 100%;" :action="action" @on-success="success" @on-remove="remove"
						:file-list="fileList" :header="headers" :deletable="deptName == '外部用户'?false:true"
						:max-count="deptName == '外部用户'?fileList.length:99" :before-upload="beforeUpload"></u-upload>
				</view>
			</view>
		</view>
		<view
			style="width: 100%;position:fixed; bottom:0;background-color: #FFFFFF;padding-left: 20px;padding-right: 20px;padding-bottom: 30rpx;z-index: 9999;">
			<u-button type="primary" @click="submit" v-if="deptName != '外部用户'">确认保存</u-button>
		</view>
		<view style="position: absolute;top: -999999px;">
			<view>
				<canvas style="width: 1000px;height: 1000px;" canvas-id="firstCanvas"></canvas>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: this.$u.http.config.baseUrl + '/common/upload',
				headers: {
					Authorization: 'Bearer ' + this.$store.state.vuex_token
				},
				form: {},
				deptName: '',
				fileList: [],
				pictureEist: [],
				twarehousecheckdetailList: {}
			}
		},
		onLoad(option) {
			this.deptName = uni.getStorageSync('deptName')
			this.form = JSON.parse(option.form)
			let scope = {
				row: JSON.parse(option.form)
			}

			this.$u.get(this.deptName != '外部用户' ? '/warehouse/checkitemsdetails/list' :
				'/warehouse/checkitemsdetails/appList', {
					fItemFid: this.form.fId
				}).then(res => {
				console.log(res)
				let data = res.rows
				if (data.length === 0) {
					this.twarehousecheckdetailList = {
						fCheckFid: scope.row.fCheckFid,
						fItemFid: scope.row.fId,
						fWarehouseid: scope.row.fWarehouseFid, //仓库名称
						fCreateTime: '',
						fInspectorid: '',
						fRemark: '',
						fPhotoUrl: []
					}
				} else {
					this.twarehousecheckdetailList = res.rows[0]
					this.twarehousecheckdetailList.fWarehouseid = scope.row.fWarehouseFid
					this.fileList = []
					for (let item in JSON.parse(res.rows[0].fPhotoUrl)) {
						this.fileList.push(JSON.parse(res.rows[0].fPhotoUrl)[item])
					}
					this.pictureEist = this.fileList
				}
			})
		},
		created() {},
		methods: {
			submit() {
				// console.log(this.twarehousecheckdetailList)
				// console.log(this.fileList)
				// console.log(this.pictureEist)
				this.twarehousecheckdetailList.fPhotoUrl = []
				for (let item in this.pictureEist) {
					if (this.pictureEist[item].response) {
						this.twarehousecheckdetailList.fPhotoUrl.push({
							url: this.pictureEist[item].response.url
						})
					} else {
						this.twarehousecheckdetailList.fPhotoUrl.push({
							url: this.pictureEist[item].url
						})
					}
				}
				this.twarehousecheckdetailList.fPhotoUrl = JSON.stringify(this.twarehousecheckdetailList.fPhotoUrl)
				if (!this.twarehousecheckdetailList.fId) {
					this.$u.post('warehouse/checkitemsdetails', this.twarehousecheckdetailList).then(res => {
						uni.showToast({
							icon: 'none',
							title: '保存成功',
							position: "bottom"
						})
					})
				} else {
					this.$u.put('warehouse/checkitemsdetails', this.twarehousecheckdetailList).then(res => {
						uni.showToast({
							icon: 'none',
							title: '保存成功',
							position: "bottom"
						})
					})
				}
			},
			success(data, index, lists, name) {
				// console.log(lists)
				this.pictureEist = lists
			},
			remove(index, lists, name) {
				// console.log(lists)
				this.pictureEist = lists
			},
			// 上传照片
			async beforeUpload(index, list) {
				uni.showLoading({
					title: '上传中...',
				})
				var data = await this.getWatermark(index, list);
				uni.hideLoading()
				return data;
			},
			//照片添加水印
			getWatermark(index, list) {
				return new Promise((resolve, reject) => {
					var that = this;
					uni.getImageInfo({
						src: list[index].url,
						success: (ress) => {
							let ctx = uni.createCanvasContext('firstCanvas'); //创建画布
							//将图片src放到cancas内，宽高为图片大小
							ctx.drawImage(list[index].url, 0, 0, ress.width / 3, ress.height / 3)
							ctx.setFillStyle('#FFFFFF') //字体颜色
							let textToWidth = ress.width / 3 * 0.3; //字体宽度
							let textToHeight = ress.height / 3; //字体高度
							let address = ''
							//获取当前时间
							let dataTime = new Date().getFullYear() + '-' + Number(new Date()
								.getMonth() + 1) + '-' + new Date().getDate() + ' ' + new Date()
								.getHours() + ':' + new Date().getMinutes() + ':' + new Date()
								.getSeconds()
							// 获取地理位置
							uni.getLocation({
								type: 'gcj02',
								geocode: true,
								success: function(res) {
									address = res.address.province + res.address.city + res.address.district + res.address.street + res.address.streetNum
									if (uni.getSystemInfoSync().platform == 'ios') {
										ctx.setFontSize(34) //字体大小
										ctx.fillText("时间：" + dataTime, textToWidth * 0.2, textToHeight *
											0.7) // 设置字体
										ctx.fillText("地址："+address, textToWidth * 0.2,
											textToHeight * 0.7 + 34) // 设置字体
									} else {
										ctx.setFontSize(12) //字体大小
										ctx.fillText("时间：" + dataTime, textToWidth * 0.2, textToHeight *
											0.95) // 设置字体
										ctx.fillText("地址："+address, textToWidth * 0.2,
											textToHeight * 0.95 + 12) // 设置字体
									}
									ctx.draw(false, () => {
										setTimeout(() => { //使用定时是因为制作水印需要时间，设置定时才不会出bug
											uni.canvasToTempFilePath({ //将画布中内容转成图片，即水印与图片合成
												width: ress.width / 3, // 画布宽
												height: ress.height / 3, // 画布高
												canvasId: 'firstCanvas',
												success: (res) => {
													list[index].url = res
														.tempFilePath
													uni.saveImageToPhotosAlbum({ //保存到手机
														filePath: res
															.tempFilePath,
														success: (re) => {
															resolve(true);
														}
													})
												}
											})
										}, 500)
									});
								},
								fail: function(e) {
									uni.showToast({
										icon: 'none',
										title: '获取地址失败, 请检查是否开启定位权限',
										duration: 5000,
										position:'bottom'
									})
									if (uni.getSystemInfoSync().platform == 'ios') {
										ctx.setFontSize(34) //字体大小
										ctx.fillText("时间：" + dataTime, textToWidth * 0.2, textToHeight *
											0.7) // 设置字体
										ctx.fillText("地址："+address, textToWidth * 0.2,
											textToHeight * 0.7 + 34) // 设置字体
									} else {
										ctx.setFontSize(12) //字体大小
										ctx.fillText("时间：" + dataTime, textToWidth * 0.2, textToHeight *
											0.95) // 设置字体
										ctx.fillText("地址："+address, textToWidth * 0.2,
											textToHeight * 0.95 + 12) // 设置字体
									}
									ctx.draw(false, () => {
										setTimeout(() => { //使用定时是因为制作水印需要时间，设置定时才不会出bug
											uni.canvasToTempFilePath({ //将画布中内容转成图片，即水印与图片合成
												width: ress.width / 3, // 画布宽
												height: ress.height / 3, // 画布高
												canvasId: 'firstCanvas',
												success: (res) => {
													list[index].url = res
														.tempFilePath
													uni.saveImageToPhotosAlbum({ //保存到手机
														filePath: res
															.tempFilePath,
														success: (re) => {
															resolve(true);
														}
													})
												}
											})
										}, 500)
									});
								}
							});
						}
					})
				})
			}
		}
	}
</script>

<style>

</style>