property/property_ui/service/pages/service/patroladd.vue

<template>
	<view class="check">
		<uni-forms ref="form" :model="datainfo">
			<view class="cbox">
				<view class="patlist">
					<view class="pattop flexc">
						<image :src="home" class="imgs"></image>
						<view class="tit">{{datainfo.checkAddress}}</view>
						<view class="flex1"></view>
					</view>
					<view class="patlistr">
						<view class="clist"><view class="tit">巡检类型</view>：{{kaType(datainfo.checkType)}}</view>
						<view class="clist"><view class="tit">巡检时间</view>：{{datainfo.checkResultTime}}</view>
						<view class="clist"><view class="tit">巡检路线</view>：{{datainfo.checkAddress}}</view>
					</view>
				</view>
			</view>
			<view class="cbox" style="padding-bottom: 98rpx;">
				<view class="chmain">
					<uni-forms-item label="巡检结果" name="phonenumber">
						<!-- <picker range-key='dictLabel' :value="xgjgidx" :range="xgjgList"   @change='bindDateChange'>
							<view class="flexc">
								<view class="flex1 txr f13" :class="datainfo.iszc?'co27':'coa'">{{datainfo.iszc?'是':'请选择是否正常'}}</view>
								<view class="rimg"><image :src="rimg"></image></view>
							</view>
						</picker> -->
						<picker range-key='dictLabel' :disabled="isdisabled" :value="xgjgidx" :range="xgjgList"   @change='bindDateChange'>
							<view class="flexc">
								<view class="flex1 txr f13 co27" v-if="datainfo.checkResult&&!xgjg">{{statusFormats(datainfo.checkResult,xgjgList,'xgjg')}}</view>
								<view class="flex1 txr f13" v-else :class="xgjg?'co27':'coa'">{{xgjg||"请选择巡更结果"}}</view>
								<view class="rimg"><image :src="rimg"></image></view>
							</view>
						</picker>
					</uni-forms-item>
					<uni-easyinput maxlength='-1' type="textarea" autoHeight v-model="datainfo.checkResultDetails" :inputBorder='false' placeholder="可详细描述巡检结果…" />
					<view class="voice mb20">
						<view class="flexc">
							<image :src="voice"></image>
							语音输入
						</view>
					</view>
					<!-- 图片 -->
					<view class="imgs">
						<block v-if="phofile&&phofile.length">
							<view class="img" v-for="(ite,idx) in phofile" :key="idx" @click="getPreview(idx,phofile)">
								<image :src="baseUrl+ite" class="pico"></image>
								<image :src="del" class="del" @click.stop="getDelFn(idx)"></image>
							</view>
						</block>
						<view class="addbox" @click="getaddImage">
							<image :src="photo" class="pico"></image>
							<view>添加图片</view>
						</view>
					</view>
				</view>
				<view class="pdlr12 mt63">
					<view class="rhbtn" @click="getSubmit">提交信息</view>
				</view>
			</view>
		</uni-forms>
		

		<loading></loading>
	</view>
</template>

<script>
	import config from '@/config'
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
	import {uploadmore} from '@/utils/common.js'
	import {getDictionaryFn} from "@/api/system/user.js"
	import {xgdjlDet,xgdjlPut} from "@/api/work/service.js"
	import {selectDictValue,selectValueKey} from "@/utils/common.js"
	export default {
		components: {},
		data() {
			return {
				voice: require('@/service/static/service/voice.png'),
				home:require("@/service/static/service/home.png"),
				photo:require("@/service/static/service/photo.png"),
				del:require('@/car/static/car/del.png'),
				rimg: require('@/people/static/people/rimg.png'),
				baseUrl: config.baseUrl,
				checkflag:true,
				datainfo: {
					"checkType":"",//巡更类型
					"checkTime":"",//巡更时间
					"checkAddress":"",//巡更路线
					"checkUserName":"",//巡更人姓名
					"checkUseId":"",//巡更人id
					"checkResult":"",//巡更结果 1：正常 2：损坏
					"checkResultDetails":"",//巡更结果详情
					"checkResultPhoto":"",//巡更结果照片
					// "checkResultTime":""//巡更结果时间
				},
				ptype:'add',
				id:2,
				isdisabled:false,
				xgjg:'',
				xgjgidx:'',
				xglxList:[],
				xgjgList:[],
				phofile:[]
			}
		},
		onLoad: function(e) {
			this.init();
			this.ptype='edit';
			this.id=e.id;
			this.getDetail()
		},
		methods: {
			checkPermi,
			checkRole,
			init(){
				// 巡更类型
				getDictionaryFn('patrol_type').then(res=>{
					if(res.code==200){
						this.xglxList = res.data.map(v => {
							return {
								dictLabel: v.dictLabel,
								dictValue: v.dictValue
							}
						})
					}
				})
				//巡更结果
				getDictionaryFn('check_result').then(res=>{
					if(res.code==200){
						this.xgjgList = res.data.map(v => {
							return {
								dictLabel: v.dictLabel,
								dictValue: v.dictValue
							}
						})
					}
				})
			},
			time() {
				var date = new Date();
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				var d = date.getDate();
				var h = date.getHours();
				var min = date.getMinutes();
				var s = date.getSeconds();
				var yearStr = y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d)
				var timeStr = (h < 10 ? ('0' + h) : h) + ':' + (min < 10 ? ('0' + min) : min) + ':' + (s < 10 ? (
					'0' + s) : s);
				var kaTime = yearStr + ' ' + timeStr;
				return kaTime
			},
			kaType(data){
				return selectDictValue(this.xglxList, data);
			},
			statusFormats(data, list,type) {
				var aite=selectValueKey(list, data);
				if(type=='xgjg'){
					this.xgjgidx=aite.key
				}
				return aite.actions;
			},
			bindDateChange(e){
				var val=e.detail.value;
				this.datainfo.checkResult=this.xgjgList[val].dictValue;
				this.xgjg=this.xgjgList[val].dictLabel;
			},
			getPreview(idx,arr) {
				var newArr=[];
				arr.forEach(ite=>{
					var ds=this.baseUrl+ite
					newArr.push(ds)
				})
				uni.previewImage({
					urls: newArr,
					current:idx,
					success: function(data) {},
					fail: function(err) {}
				});
			},
			getDelFn(idx){
				var that=this;
				uni.showModal({
					title: '确认删除',
					content: "是否确认删除",
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							that.phofile.splice(idx,1)
						} else if (res.cancel) {
						}
					}
				});
			},
			getaddImage(e){
				let that = this;
				let file =[],count=9
				uni.chooseImage({
					// count: 1,
					success:function(res){
						let img= res.tempFilePaths;
						if(img.length + file.length > count){
							uni.showToast({
								title: '最多上传'+count+'张图片',
								icon: 'none',
								duration: 2000
							})
						}else{
							let imglen = res.tempFilePaths.length;
							var fuwufile = [];
							uploadmore('/common/upload',img,0,0,0,imglen,fuwufile,function(rs){
								that.phofile = that.phofile.concat(rs);
							})	
						}
					}
				});
			},
			getDetail(){
				xgdjlDet(this.id).then(res=>{
					if(res.code==200){
						this.datainfo=res.data;
						if(res.data&&res.data.checkResultPhoto){
							this.phofile=res.data.checkResultPhoto.split(',')
						}
					}
				})
			},
			getSubmit(){
				var that=this;
				var params=JSON.parse(JSON.stringify(this.datainfo))
				var phofile=JSON.parse(JSON.stringify(this.phofile))
				if(phofile&&phofile.length){
					params.checkResultPhoto=this.phofile.join(',');
				}
				if(!params.checkResult){
					this.$toast("请选择巡更结果")
					return
				}
				params.checkResultTime=this.time();
				params.checkStatus='2';
				xgdjlPut(params).then(res=>{
					if(res.code==200){
						this.$toast("操作成功")
						setTimeout(function(){
							uni.$emit("refCarPark")
							uni.navigateBack({
								delta:1
							})
						},1500)
					}
				})
			}
		}
	}
</script>
<style>
	page{background: #F3F3F0;}
</style>
<style lang="scss" scoped>
.check /deep/ .uni-forms-item{min-height: 106rpx;box-sizing: border-box;display: flex;align-items: center;margin-bottom: 0;border-bottom: 2rpx solid #E6E6E6;padding:10rpx 0;}
.check .cbox /deep/ .uni-forms-item:last-child{border: none;}
.check /deep/ .uni-forms-item__label{font-weight: bold;font-size: 26rpx;color: #222327;flex: 0 0 auto;width: auto !important;}
.check /deep/ .uni-easyinput{flex: 1;text-align: left;font-size: 26rpx;color: #222327;padding-left: 12rpx;min-height: 200rpx;}
.check /deep/ .uni-easyinput__content-textarea{min-height: 40rpx;font-size: 26rpx;}
.check /deep/ .uni-easyinput__placeholder-class{font-size: 26rpx;color: #AAAAAA;}
.check /deep/ .uni-input-input{font-size: 26rpx;}
.check /deep/ .uni-textarea-textarea{font-size: 26rpx;}
.check /deep/ .is-disabled{color: #222327;background-color: #ffffff !important;}
.check /deep/ .uni-data-checklist .checklist-group .checklist-box{margin:10rpx 8rpx 10rpx 16rpx;}
.check /deep/ .uni-data-checklist{flex: 0 0 auto;}
.check{min-height: 100vh;padding: 20rpx 18rpx 24rpx;box-sizing: border-box;}
.cbox{background: #FFFFFF;border-radius: 20rpx;flex: 1;margin-bottom: 24rpx;
	.chmain{padding: 0 32rpx;
		.rimg{width: 16rpx;height: 28rpx;flex: 0 0 auto;margin-left: 20rpx;
			image{width: 100%;height: 100%;}
		}
	}
	.voice{font-weight: 500;display: flex;justify-content:flex-end;align-items: center;margin-top: 40rpx;
font-size: 24rpx;
color: #45CB99;
		image{width: 24rpx;height: 24rpx;margin-right: 8rpx;}
	}
	.imgs{display: flex;align-items: center;flex-wrap: wrap;
		.img{width: 142rpx;height:142rpx;border-radius: 20rpx;margin: 0 26rpx 20rpx 0;position: relative;
		&:nth-of-type(4n){margin-right: 0;}
		}
		.pico{width: 100%;height: 100%;border-radius: 20rpx;}
		.del{width: 24rpx;height: 24rpx;position: absolute;right: 0;top: 0;}
		.addbox{background: #F0F0F0;border-radius: 20rpx;display: flex;align-items: center;flex-direction: column;width: 142rpx;height:142rpx;justify-content: center;margin-bottom: 20rpx;
			image{width: 48rpx;height: 42rpx;margin-bottom: 12rpx;}
			view{font-weight: 500;font-size: 24rpx;color: #666666;}
		}
	}
}
.patlist{background: #FFFFFF;border-radius: 20rpx;margin-bottom: 24rpx;padding: 0 24rpx 30rpx;
	.pattop{padding:22rpx 30rpx;margin-bottom: 2rpx;
		.imgs{width: 28rpx;height: 28rpx;margin-right: 12rpx;}
		.tit{font-size: 30rpx;color: #272727;font-weight: bold;margin-right: 14rpx;}
		.txt{font-weight: 500;font-size:24rpx;
			&.ca{color: #3565ED;}
			&.cb{color: #FE5A0E;}	
			&.cc{color: #28C529;}	
			&.cd{color: #FF6969;}	
		}
	}
	.patlistr{background: #EFF4FF;border-radius: 20rpx;padding: 20rpx 32rpx;
		.clist{font-weight: 500;font-size: 26rpx;color: #272727;display: flex;line-height: 50rpx;
			.tit{font-size: 26rpx;flex: 0 0 auto;min-width: 108rpx;text-align-last: justify;font-weight: bold;}
		}
	}
}
</style>