aiot-app/pages/maintenanceWorkorder/submitted_ministry/submitted_ministry.vue

<template>
	<view>
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="维修工单报工" @clickLeft="goBack">
			<!-- <view class="nav-right" slot="right">
				<view class="text-box" @click="goRegister" style="width: 150rpx">备件使用登记</view>
			</view> -->
		</uni-nav-bar>
		<view class="content">
			<view class="fixed-top-bar">
				<view class="item">
					{{ worksheetInfo.deviceName }}
				</view>
				<view class="item">
					{{ worksheetInfo.workOrderCode }}
				</view>
			</view>
			<view class="bxjlbh-wrap">
				<view class="item">
					<view class="label">工单编号</view>
					<view class="value-wrap text">
						{{ worksheetInfo.code }}
					</view>
				</view>
			</view>
			<view class="clsm">
				<view class="title">处理说明</view>
				<textarea class="textarea" v-model="form.repairReportExplain"></textarea>
			</view>
			<view class="sc-wrap">
				<view class="title">附件</view>
				<fileMain v-model="form.attachments"></fileMain>
				<!-- <uni-file-picker :limit="4" v-model="FileImgList" fileMediatype="image" mode="grid" @select="handlImageSelect" @delete="handlImagDeletee" /> -->
			</view>
			<view class="sc-wrap" style="margin-top: 38rpx;">
				<view class="photo_btn" @click="chooseImage">拍照</view>
				<view class="photo_list">
					<PreviewPhoto type="edit" @imagedelete="imagedelete" :imageList="form.photoList" />
				</view>
			</view>
			<view class="bpbj" v-if="form.stockOutApplyPartList.length > 0">
				<view class="title">备件使用登记</view>
				<view class="detail-content">
					<view class="col" v-for="(item, index) in form.stockOutApplyPartList" :key="index">
						{{ item.name }}（{{ item.code + '/' + item.model }}
						<u-number-box v-model="item.usedNum" :step="1" :min="0" :max="item.max"
							:disabledInput="true"></u-number-box>
					</view>
				</view>
			</view>
		</view>
		<view class="fixed-bottom-bar">
			<view class="item s1" @click="submit">提交</view>
			<view class="item s2" @click="goBack">返回</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import PreviewPhoto from '@/pages/maintenance/check/components/PreviewPhoto.vue'
	import {
		getWorkOrderDetail,
		getDeviceList,
		startExecuting,
		signingWork,
		devicestatistics
	} from '@/api/myTicket/index.js'
	import {
		get,
		postJ,
		post
	} from '@/utils/api.js'
	import fileMain from "@/pages/doc/index.vue"
	export default {
		components: {
			fileMain,
			PreviewPhoto
		},
		data() {
			return {
				form: {
					// 图片
					workOrderImg: [],
					// 说明
					repairReportExplain: '',
					// 工单id
					workOrderId: '',
					// 备品备件
					stockOutApplyPartList: [],
					attachments: [],
					// 拍照列表
					photoList: []
				},
				workOrderCode: '',
				// 选择的图片
				FileImgList: [],
				// 工单信息
				worksheetInfo: {},
				equiCode: ''
			}
		},
		async onLoad(options) {
			this.worksheetInfo = options
			// this.equiCode = options.equiCode
			// await this.getInfo()
			// this.getbpbj()
		},
		onShow() {},
		methods: {
			// 请求信息
			getInfo() {
				return get(this.apiUrl + '/repair/info/getWorkOrderDetail/' + this.workOrderCode).then(res => {
					if (res.success) {
						this.worksheetInfo = res.data
					}
				})
			},
			// 图片删除
			imagedelete(index) {
				this.form.photoList.splice(index, 1);
			},
			// *** 新增拍照功能
			chooseImage() {
				const _this = this
				if (_this.form.photoList.length >= 9) {
					_this.$refs.uToast.show({
						type: "warning",
						message: "最多上传9张照片",
					})
					return
				}
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从相册选择
					success: function(res) {
						uni.showLoading({
							title: '加载中'
						})

						_this.uploadFile(res.tempFilePaths).then(res => {
							res.forEach(item => {
								let fileNames = item.storePath.split('/')
								let url = _this.apiUrl +
									'/main/file/getFile?objectName=' + item.storePath +
									'&fullfilename=' + fileNames[fileNames.length -
										1]

								let photoList = _this.form.photoList;
								// 不能存储超过 9 张
								if (photoList.length < 9) {
									_this.form.photoList.push(url);
								}
							})
							uni.hideLoading()

						})
					}
				});
			},
			uploadFile(list) {
				let PromiseAll = []
				const apiUrl = this.apiUrl
				const token = uni.getStorageSync("token"); //取存本地的token
				list.forEach(item => {
					PromiseAll.push(
						new Promise((resolve, reject) => {
							uni.uploadFile({
								url: apiUrl + '/main/file/upload',
								filePath: item,
								name: 'multiPartFile',
								header: {
									authorization: token
								},
								success: (uploadFileRes) => {
									let data = JSON.parse(uploadFileRes.data)
									resolve(data.data)
								}
							});
						}),
					)
				})
				return Promise.all(PromiseAll)
			},

			// 返回
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 选择图片
			async handlImageSelect(e) {
				let element = e.tempFiles[0]
				let url = await this.uploadFiles(element.path)
				if (url) {
					// element.url = url
					this.form.workOrderImg.push(url)
				}
			},
			// 图片删除
			handlImagDeletee(e) {
				let index = this.form.workOrderImg.findIndex(n => {
					return n.uuid == e.tempFile.uuid
				})
				if (index !== -1) {
					this.form.workOrderImg.splice(index, 1)
				}
			},
			// 文件上传
			uploadFiles(tempFilePaths) {
				let that = this
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: this.apiUrl + '/main/file/upload', //后端用于处理图片并返回图片地址的接口
						filePath: tempFilePaths,
						name: 'multiPartFile',
						header: {
							Authorization: wx.getStorageSync('token')
						},
						formData: {
							module: 'eam'
						},
						success: res => {
							console.log(res)
							let data = JSON.parse(res.data) //返回的是字符串，需要转成对象格式
							console.log('res-----------')
							console.log(data)
							resolve(data.data.storePath)
						},
						fail: err => {
							reject(null)
							uni.showToast({
								title: '图片上传失败',
								icon: 'none'
							})
						}
					})
				})
			},
			// 提交
			async submit() {
				let workOrderImg = JSON.stringify(this.form.photoList);
				signingWork({
					id: this.worksheetInfo.id,
					remark: this.form.repairReportExplain,
					attachments: this.form.attachments,
					// workOrderImg: this.form.workOrderImg.join(',')
					workOrderImg: workOrderImg
				}).then(() => {
					uni.showToast({
						title: '报工成功',
						icon: 'success',
						duration: 2000
					})
					this.back()
				})
				// let par = JSON.parse(JSON.stringify(this.form))
				// par.stockOutApplyPartList = par.stockOutApplyPartList.map(n => {
				// 	delete n.max
				// 	return n
				// })
				// par.workOrderId = this.worksheetInfo.workOrderId

				// let workOrderImg = par.workOrderImg.map(n => {
				// 	return n.url
				// })

				// par.workOrderImg = workOrderImg.join(',')

				// postJ(this.apiUrl + '/workOrder/repairReportWork', par).then(res => {
				// 	if (res.success) {
				// 		uni.showToast({
				// 			title: '报工成功',
				// 			icon: 'success',
				// 			duration: 2000
				// 		})
				// 		this.back()
				// 	}
				// })
			},
			// 获取备品备件
			getbpbj() {
				post(this.apiUrl + '/stockOutApply/getApplyEquiPartList', {
					workOrderId: this.worksheetInfo.workOrderId
				}).then(res => {
					if (res.success) {
						this.form.stockOutApplyPartList = res.data.map(n => {
							n.max = n.usedNum
							n.usedNum = 0
							delete n.id
							delete n.createTime
							delete n.updateTime
							return n
						})
					}
				})
			},
			// 返回
			back() {
				uni.navigateBack({
					delta: 1
				})
			},

			// 跳转到备品备件使用登记页面
			goRegister() {
				uni.navigateTo({
					url: `/pages/maintenance/check/register?workOrderCode=${this.workOrderCode}&equipmentCode=${this.equiCode}&from=maintain_service`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.photo_btn {
		background-color: #157a2c;
		width: 140rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		color: #fff;
		text-align: center;
		border-radius: 8rpx;
		margin-bottom: 12rpx;
		display: inline-block;
	}
	
	.fixed-top-bar {
		display: flex;
		background: #fff;
		width: 100%;
		height: 80rpx;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;

		.item {
			font-size: 28rpx;
			color: #333333;
			font-weight: bold;
		}
	}

	.content {
		margin: 0 0 81rpx 0;
		padding: 0 20rpx;
		position: relative;
	}

	.bxjlbh-wrap {
		margin-top: 30rpx;

		.item {
			height: 30px;
			display: flex;
			border: 1px solid #d7d7d7;

			&+.item {
				margin-top: 3px;
			}

			.label {
				width: 100px;
				height: 100%;
				line-height: 30px;
				text-align: center;
				background: #d7d7d7;
				font-size: 32rpx;
				color: rgb(62, 62, 62);
			}

			.value-wrap {
				flex: 1;
				display: flex;
				align-items: center;
				padding-left: 10px;

				&.text {
					background: #f2f2f2;
					font-size: 32rpx;
				}

				.picker {
					width: 100%;
					color: rgb(153, 153, 153);
					font-size: 32rpx;
				}
			}
		}
	}

	.clsm {
		margin-top: 20rpx;

		.textarea {
			width: 100%;
			border: 1px solid #f2f2f2;
			margin-top: 10rpx;
			box-sizing: border-box;
		}
	}

	.sc-wrap {
		margin-top: 20rpx;

		.title {
			margin-bottom: 7px;
		}
	}

	.bpbj {
		margin-top: 20rpx;

		.title {
			margin-bottom: 7px;
		}

		.detail-content {
			border: 1rpx solid rgba(242, 242, 242, 1);

			.col {
				font-size: 28rpx;
				border-bottom: 1rpx solid rgba(242, 242, 242, 1);
				display: flex;
				padding: 10rpx;
				align-items: center;
				justify-content: space-between;
				background-color: rgba(242, 242, 242, 0.372549019607843);
			}

			.plus {
				width: 40rpx;
				height: 40rpx;
				line-height: 38rpx;
				text-align: center;
				background-color: $j-primary-border-green;
				color: #fff;
				margin: 16rpx 0 0 16rpx;
			}
		}

		/deep/.u-number-box {
			.u-number-box__minus,
			.u-number-box__plus,
			.u-number-box__input {
				font-size: 30rpx;
				height: 1.6em !important;
			}

			.u-number-box__input {
				width: 2em !important;
			}

			.u-number-box__minus,
			.u-number-box__plus {
				background-color: $j-primary-border-green !important;

				.u-icon__icon {
					color: #fff !important;
				}
			}
		}
	}

	.fixed-bottom-bar {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 80rpx;
		box-sizing: border-box;
		border-top: 1px solid #f2f2f2;

		.item {
			flex: 1;
			height: 100%;
			line-height: 80rpx;
			text-align: center;

			&.s1 {
				background-color: #157a2c;
				color: #fff;
			}
		}
	}
</style>