hytc-customer/pages/submit_server/index.vue

<template>
	<view>
		<view class="warpbox">
			<view class="fllow_form">
				<view class="label key">{{i18n['工单编号']}}<span>*</span></view>
				<view class="form_right">
					<view :class="workorder_number ? 'valueActive' : '' " class="righttext">
						{{workorder_number ?workorder_number : ''}}</view>
				</view>
			</view>
			<view class="fllow_form">
				<view class="label key">{{i18n['工单标题']}}<span>*</span></view>
				<view class="form_right">
					<input type="text" :class="title ? 'valueActive' : '' " class="righttext" v-model="title"
						:placeholder="i18n['请填写工单标题']" />
				</view>
			</view>
			<view class="inp_warp">
				<view class="inp_title key">关联设备<span>*</span></view>
				<view class="add_in" @click="seProduct">
					<view class="iconfont icon-jiahaocu"></view>
					添加设备
				</view>
			</view>
			<view class="prolist" v-if="productList.length != 0">
				<view class="probox">
					<view class="proli" v-for="(item,index) in productList" :key="index">
						<view class="iconfont icon-jian" @click="delProduct(index)"></view>
						<view class="protext" style="text-align: center;width:160rpx">{{item.name}}
						</view>
						<view class="protext">{{item.unit}}</view>
					</view>
				</view>
			</view>
			<view class="fllow_area">
				<view class="area_head key">{{i18n['情况说明']}}<span>*</span></view>
				<textarea v-model="desc" class="textself" :placeholder="i18n['情况说明']" placeholder-style="color:#999" />
			</view>

		<!-- 	<view class="fllow_form">
				<view class="label key">{{i18n['预约时间']}}<span>*</span></view>
				<picker @change="changeTime" mode="multiSelector" :range="dateTimeArray" :value="dateTime"
					@columnchange="changeColumn">
					<view class="form_right">
						<view :class="appointment_time ? 'valueActive' : '' " class="righttext">
							{{appointment_time ? appointment_time : i18n['预约时间']}}</view>
						<view class="iconfont icon-you"></view>
					</view>
				</picker>
			</view>

			<view class="fllow_form">
				<view class="label key">{{i18n['紧急程度']}}</view>
				<picker @change="changePriori" :range="priarr" :value="priIndex">
					<view class="form_right">
						<view :class="priarr[priIndex] ? 'valueActive' : '' " class="righttext">
							{{priarr[priIndex] ? priarr[priIndex] : i18n['紧急程度']}}</view>
						<view class="iconfont icon-you"></view>
					</view>
				</picker>
			</view> -->
			<view class="inp_warp" style="margin-top:0;">
				<view class="inp_title key">{{i18n['附件']}}<span>*</span></view>
				<view class="form_right" @click="uploadFiles">
					<view class="righttext">{{i18n['上传图片']}}</view>
					<view class="iconfont icon-arrows_right"></view>
				</view>
			</view>
			
			<view class="imglist" v-if="imgList.length != 0">
				<view class="imgbox" v-for="(item,index) in imgList" :key="index">
					<image src="/static/img/close.png" class="delimg" @click="delImg(index)" ></image>
					<image :src="item.url" class="selfimg" @click.stop="toPrevie(index)"></image>
				</view>
			</view>
			<view class="fllow_form">
				<view class="label key">报修人<span>*</span></view>
				<view class="form_right">
					<input type="text" :class="linkman ? 'valueActive' : '' " class="righttext" v-model="linkman"
						:placeholder="i18n['请填写联系人']" />
				</view>
			</view>
			<view class="fllow_form" style="border-bottom:0;">
				<view class="label key">{{i18n['手机号']}}<span>*</span></view>
				<view class="form_right">
					<input type="text" :class="linkfun ? 'valueActive' : '' " class="righttext" v-model="linkfun"
						:placeholder="i18n['手机号']" />
				</view>
			</view>
			<view class="inp_warp" style="margin-top:0;">
				<view class="inp_title key">报修位置<span>*</span></view>
				<view class="form_right" @click="openmap">
					<view class="righttext">{{address}}</view>
					<view class="iconfont icon-arrows_right"></view>
				</view>
			</view>
		</view>
		<view class="button" @click="$noMultipleClicks(submitWorkOrder)">{{i18n['提交']}}</view>
		<!-- 选择产品 -->
		<select-work-product ref="workProduct" :showProduct="showProduct" @close="closePop"
			@selectList="selectProduct"></select-work-product>
	</view>
</template>

<script>
	import {
		netWorkOrderNumber,
		netAddWorkorder,
		uploadUrl
	} from '@/api/api.js'
	import selectWorkProduct from '@/components/selectWorkProduct/index.vue'
	import {
		dateTimePicker,
		getMonthDay
	} from '@/util/dateTimePicker.js'
	import {
		BASE_URL,
		SIGN_NO
	} from '@/api/http.js'

	export default {
		components: {
			selectWorkProduct
		},
		data() {
			return {
				noClick: true, //防止  重复点击
				workorder_number: '', //工单编号 自动生成
				title: '', //工单标题
				linkman: '', //联系人
				linkfun: '', //联系人手机号
				customer_product_id: '', //客户产品id 1,2,3,4
				desc: '', //情况说明
				files: '', //附件列表
				owner_staff_id: '', //指派员工
				address:'请选择位置',
				latitude:'',
				longitude:'',
				addr_name:'',
				imgList: [], //附件
				appointment_time: '', //预约时间
				priarr: [], //紧急情况
				priIndex: 0,
				showProduct: false,
				productList: [],
				dateTimeArray: [],
				dateArr: [],
				dateTime: [],
			}
		},
		computed: {
			i18n() {
				return this.$t("server")
			}
		},
		onLoad(options) {
			this.priarr = this.i18n['priarr']
			//获取工单编号
			this.getNumber()
			this.initTime()
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.i18n['提交服务']
			})
		
		},
		onUnload() {

		},
		methods: {
			openmap(){
				let self=this;
				uni.chooseLocation({
					success: function (res) {
						self.addr_name=res.name;
						self.address=res.address;
						self.latitude=res.latitude;
						self.longitude=res.longitude;
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					}
				});
			},
			withData(param) {
				return param < 10 ? '0' + param : '' + param;
			},
			initTime() {
				let date = new Date()
				let endYear = date.getFullYear()
				let mont = this.withData(date.getMonth() + 1)
				let day = this.withData(date.getDate())
				let hour = this.withData(date.getHours())
				let minu = this.withData(date.getMinutes())
				let seco = this.withData(date.getSeconds())
				// 获取完整的年月日 时分秒，以及默认显示的数组
				let obj = dateTimePicker()
				// 精确到分的处理，将数组的秒去掉
				let lastArray = obj.dateTimeArray.pop();
				let lastTime = obj.dateTime.pop();
				let lastDate = obj.dateArray.pop()
				this.dateTimeArray = obj.dateTimeArray
				this.dateArr = obj.dateArray
				this.dateTime = obj.dateTime
			},
			changeColumn(e) {
				let index = e.detail.column
				let value = e.detail.value
				if (index == 1) {
					let month = this.dateArr[index][value]
					let date = new Date();
					let endYear = date.getFullYear();
					let str = endYear + '-' + month + '-' + '01' + ' ' + '00' + ':' + '00' + ':' + '00'
					let obj = dateTimePicker()
					// 精确到分的处理，将数组的秒去掉
					let lastArray = obj.dateTimeArray.pop();
					let lastTime = obj.dateTime.pop();
					let lastDate = obj.dateArray.pop()
					this.dateTimeArray = obj.dateTimeArray
					this.dateArr = obj.dateArray
					this.dateTime = obj.dateTime
				}
			},
			//下次联系时间
			changeTime(e) {
				let arr = e.detail.value
				if (arr.includes(-1)) {
					uni.showToast({
						title: '请选择正确的时间',
						icon: 'none'
					})
					return
				}
				let str = this.handleTime(arr)
				this.appointment_time = str
			},
			handleTime(arr) {
				let year = this.dateArr[0][arr[0]]
				let month = this.dateArr[1][arr[1]]
				let day = this.dateArr[2][arr[2]]
				let hour = this.dateArr[3][arr[3]]
				let minu = this.dateArr[4][arr[4]]
				let str = year + '-' + month + '-' + day + ' ' + hour + ':' + minu
				return str
			},
			getNumber() {
				netWorkOrderNumber().then(res => {
					this.workorder_number = res.data.number
				})
			},
			//获取 客户 地址
			getCustomerInfo() {
				netCustomerAddress({
					customer_id: this.customerObj.id
				}).then(res => {
					this.address = res.data.address
					this.address_detail = res.data.address_detail
					this.lat = res.data.lat
					this.lng = res.data.lng
				})
			},
			//去选择客户 地址
			chooseAddress() {
				uni.setClipboardData({
					data: this.address + this.address_detail,
					success: (res) => {
						if (this.address_detail) {
							uni.showToast({
								title: '详细地址已复制，请粘贴搜索',
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: '正在打开地图',
								icon: 'none'
							})
						}
						setTimeout(() => {
							uni.chooseLocation({
								success: res => {
									console.log(res, '地址选择成功')

									this.lat = res.latitude
									this.lng = res.longitude
									this.address = res.address
									this.address_detail = res.name
								},
								fail: err => {
									if (err.errMsg == 'chooseLocation:fail auth deny') {
										uni.showToast({
											title: '请允许使用位置信息',
											icon: 'none'
										})
									}
								}
							})
						}, 2000)
					}
				})
			},
			//选择 产品
			seProduct() {
				this.showProduct = true
				this.$refs.workProduct.init()
			},
			closePop() {
				this.showProduct = false
			},
			selectProduct(arr) {
				this.showProduct = false
				let data = arr.concat(this.productList)
				this.productList = this.deWeight(data)
			},
			// 去重
			deWeight(arr) {
				for (var i = 0; i < arr.length - 1; i++) {
					for (var j = i + 1; j < arr.length; j++) {
						if (arr[i].id == arr[j].id) {
							arr.splice(j, 1);
							j--;
						}
					}
				}
				return arr;
			},
			delProduct(index) {
				this.productList.splice(index, 1)
			},
			//紧急程度
			changePriori(e) {
				this.priIndex = e.detail.value
			},
			//上传图片
			uploadFiles() {
				uni.chooseImage({
					count: 9,
					sizeType:['compressed'],
					success: (res) => {
						let file = res.tempFilePaths
						file.forEach(ele => {
							this.toUpload(ele)
						})
					}
				})
			},
			toUpload(file) {
				uni.uploadFile({
					url: uploadUrl,
					name: 'file',
					header: {
						'token': uni.getStorageSync('token'),
						'sign-no': SIGN_NO
					},
					filePath: file,
					success: (res) => {
						let data = JSON.parse(res.data)
						if (data.code == 1) {
							this.imgList.push(data.data)
						} else {
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							})
						}
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			delImg(index) {
				this.imgList.splice(index, 1)
			},
			//预览图片
			toPrevie(index) {
				let arr = []
				this.imgList.forEach(ele=>{
					arr.push(ele.url)
				})
				uni.previewImage({
					current:index,
					urls:arr
				})
			},
			//去选择 指派员工
			toSelectStaff() {
				uni.navigateTo({
					url: '/pages/template/relation_staff'
				})
			},
			//提交
			submitWorkOrder() {
				let {
					workorder_number, //工单编号 自动生成
					title, //工单标题
					desc, //情况说明
					imgList,
					appointment_time, //预约时间
					priarr,
					priIndex,
					productList,
					linkman,
					linkfun
				} = this
				if (!title) {
					uni.showToast({
						title: '请填写工单标题',
						icon: 'none'
					})
					return
				}
				if (productList.length == 0) {
					uni.showToast({
						title: '请选择设备',
						icon: 'none'
					})
					return
				}
				if (!desc) {
					uni.showToast({
						title: '请填写情况说明',
						icon: 'none'
					})
					return
				}
				// if (!appointment_time) {
				// 	uni.showToast({
				// 		title: '请选择预约时间',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				if (imgList.length == 0) {
					uni.showToast({
						title: '请上传附件',
						icon: 'none'
					})
					return
				}
				if (!linkman) {
					uni.showToast({
						title: '请填写报修人',
						icon: 'none'
					})
					return
				}
				if (!linkfun) {
					uni.showToast({
						title: '请填写联系人手机号',
						icon: 'none'
					})
					return
				}
				//图片
				let arr = []
				imgList.forEach(ele => {
					arr.push(ele.id)
				})
				//产品
				let proarr = []
				productList.forEach((ele) => {
					proarr.push(ele.id)
				})
				let params = {
					title,
					workorder_number,
					desc,
					file_ids: arr.join(','),
					customer_product_id: proarr.join(','),  //无用字段
					priority: priarr[priIndex],
					appointment_time,
					linkman,
					linkfun,
					lng:this.longitude,
					lat:this.latitude,
					address:this.addr_name,
					address_detail:this.address,
				}
				netAddWorkorder(params).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 2000)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warpbox {
		width: 690rpx;
		margin: 30rpx auto;
		border-radius: 20rpx;
		background: #fff;
	}

	.inp_warp {
		padding: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #EDEDED;

		.inp_title {
			font-size: 26rpx;
			color: #000;

			text {
				color: #F00;
			}
		}

		.add_in {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-size: 26rpx;
			color: #FF8A00;

			.icon-jiahaocu {
				font-size: 28rpx;
				color: #FF8A00;
				margin-right: 5rpx;
			}
		}
	}

	.fllow_form {
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #EDEDED;
		padding: 24rpx;

		.label {
			font-size: 24rpx;
			color:#666;
			text {
				color: red;
			}
		}
	}

	.form_right {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		color: #999;
		min-width: 450rpx;
		text-align: right;

		.righttext {
			font-size: 24rpx;
		}
	}

	.prolist {
		background-color: #fff;
		border-bottom: 1rpx solid #EDEDED;
		padding: 24rpx;

		.ptotitle {
			font-size: 24rpx;
			color: #333;
		}

		.probox {
			padding: 0 24rpx;

			.proli {
				padding: 24rpx 0;
				border-bottom: 1rpx dashed #f5f5f5;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&:last-child {
					border-bottom: 0;
				}

				.icon-jian {
					font-size: 42rpx;
					color: #ff7800;
				}

				.protext {
					font-size: 24rpx;
					color: #333;
					margin-bottom: 15rpx;
				}
			}
		}
	}

	.fllow_area {
		background-color: #fff;
		padding: 24rpx;
		border-bottom: 1rpx solid #EAEAEA;
		.area_head {
			font-size: 24rpx;
			margin-bottom:15rpx;
			text {
				color: #f00;
			}
		}
		.textself {
			width: 600rpx;
			height: 230rpx;
			background: rgba(202, 202, 202, 0.2);
			box-sizing: border-box;
			padding: 24rpx;
			font-size: 24rpx;
			margin: 0 auto;
			border-radius: 20rpx;
		}
	}

	.imglist {
		padding: 24rpx 34rpx;
		background: #fff;
		border-bottom: 1rpx solid #EAEAEA;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;

		.imgbox {
			width: 160rpx;
			height: 160rpx;
			margin-right: 14rpx;
			position: relative;
			margin-bottom: 24rpx;
			border: 1rpx solid #EAEAEA;

			&:nth-child(4n) {
				margin-right: 0;
			}

			.delimg {
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				position: absolute;
				right: -16rpx;
				top: -16rpx;
				background: rgba(0, 0, 0, 0.5);
				z-index: 2;
			}

			.selfimg {
				width: 160rpx;
				height: 160rpx;
			}
		}
	}
</style>