manage_mobile/pages/patrolGarden/info.vue

<style lang="less" scoped>
	.container{
		min-height: 100%;
		background:#f6f6f6;
		padding:30rpx 0;
		.handle{
			&+.handle{
				margin-top:25rpx;
			}
			display: flex;
			position:relative;
			background:#EEFBF5;
			border-radius: 24rpx;
			padding:30rpx;
			&:before{
				content:"已处理";
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66.965' height='17.019' viewBox='0 0 66.965 17.019'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%2310c176;%7D%3C/style%3E%3C/defs%3E%3Cg transform='translate(-215 -495.575)'%3E%3Cpath class='a' d='M218.295,495.627s-.028,3.42,0,3.45c.036-.036,6.616,0,6.616,0s.032,3.089,0,3.059h-2.17s-.015,3.341,0,3.379c-.036-.036,3.344,0,3.344,0s-.021.044,0,3.628h-3.344s-.072,3.442,0,3.365c.071.036,59.224.085,59.224.085v-8.346a9.109,9.109,0,0,0-8.4-8.62C273.261,495.511,218.295,495.627,218.295,495.627Z'/%3E%3Ccircle class='a' cx='1.5' cy='1.5' r='1.5' transform='translate(217 502.1)'/%3E%3Cellipse class='a' cx='1.5' cy='1.725' rx='1.5' ry='1.725' transform='translate(217 495.62)'/%3E%3Cellipse class='a' cx='1.5' cy='1.7' rx='1.5' ry='1.7' transform='translate(221 509.12)'/%3E%3Cellipse class='a' cx='1.5' cy='1.705' rx='1.5' ry='1.705' transform='translate(221.4 502.1)'/%3E%3Crect class='a' width='5' height='3' rx='1.5' transform='translate(215 509)'/%3E%3C/g%3E%3C/svg%3E");
				position:absolute;
				height:34rpx;
				line-height: 34rpx;
				width:133rpx;
				text-align: center;
				color:#fff;
				top:0;
				right:0;
			}
			&.un:before{
				content:"未处理";
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66.965' height='17.019' viewBox='0 0 66.965 17.019'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%23cd0916;%7D%3C/style%3E%3C/defs%3E%3Cg transform='translate(-215 -495.575)'%3E%3Cpath class='a' d='M218.295,495.627s-.028,3.42,0,3.45c.036-.036,6.616,0,6.616,0s.032,3.089,0,3.059h-2.17s-.015,3.341,0,3.379c-.036-.036,3.344,0,3.344,0s-.021.044,0,3.628h-3.344s-.072,3.442,0,3.365c.071.036,59.224.085,59.224.085v-8.346a9.109,9.109,0,0,0-8.4-8.62C273.261,495.511,218.295,495.627,218.295,495.627Z'/%3E%3Ccircle class='a' cx='1.5' cy='1.5' r='1.5' transform='translate(217 502.1)'/%3E%3Cellipse class='a' cx='1.5' cy='1.725' rx='1.5' ry='1.725' transform='translate(217 495.62)'/%3E%3Cellipse class='a' cx='1.5' cy='1.7' rx='1.5' ry='1.7' transform='translate(221 509.12)'/%3E%3Cellipse class='a' cx='1.5' cy='1.705' rx='1.5' ry='1.705' transform='translate(221.4 502.1)'/%3E%3Crect class='a' width='5' height='3' rx='1.5' transform='translate(215 509)'/%3E%3C/g%3E%3C/svg%3E");
			}
			image{
				flex-shrink: 0;
				width:140rpx;
				height:120rpx;
				margin-right:20rpx;
			}
			.content{
				flex-grow: 1;
				width:1rpx;
				.doubleLine{
					font-size:24rpx;
				}
				.cu-btn{
					background:#FFCB69;
					border-radius: 4rpx;
					height:40rpx;
					color:#fff;
					font-size:20rpx;
					margin-top:10rpx;
				}
			}
		}
		.cu-btn.add{
			margin:20rpx auto 10rpx;
			display: flex;
			width:500rpx;
			background:#10C176;
		}
	}
</style>
<template>
	<view class="container">
		<u-form class="card inline" errorType="toast" :model="formData" :rules="rules" ref="form" labelWidth="auto">
			<d-form label="基地名称" disabled :value="formData.baseName"/>
			<d-form label="记录人" disabled v-model="formData.userName"/>
			<d-form label="巡园日期" required field="operateDate" type="calendar" v-model="formData.operateDate"/>
			<d-form label="是否异常" required type="radio" :columns="[{label:'是',value:1},{label:'否',value:0}]" v-model="formData.flagAbnormal"/>
			<u-swipe-action>
				<u-swipe-action-item v-for="(v,k) in formData.detailList" :key="k" :options="[{text:'删除',style:{backgroundColor:'#EE263A'}}]" @click="formData.detailList.splice($event.index,1)">
					<view class="handle" :class="{un:v.flagDeal==0}" v-for="(v,k) in formData.detailList" :key="k" @click="toAbnormal(k)">
						<image :src="`${host}/${(v.pic||'').split(',').filter(v=>v)[0]}`"/>
						<view class="content">
							<view class="position">详情地址：{{v.position}}</view>
							<view class="doubleLine" style="--n:3;">{{v.remark}}</view>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
			<button class="cu-btn round bg-green shadow add" v-if="formData.flagAbnormal==1" @click="toAbnormal">+{{formData.detailList.length>0?'继续':''}}添加异常</button>

			<d-form label="凭证" :required="formData.flagAbnormal==0" field="pic" type="upImg" :value="imgs" @imgs="formData.pic=$event" :num="3"/>
			<d-form label="备注" type="textarea" v-model="formData.remark"/>
		</u-form>
		<button class="cu-btn round bg-green shadow submit" @click="submit">保存</button>
	</view>
</template>
<script>
import request,{host} from '@/common/request'
export default {
	data(){
		return{
			formData:{
				baseId: this.$store.state.baseInfo.id,
				baseName: this.$store.state.baseInfo.name,
				userName: this.$store.getters['userInfo'].realname,
				operateDate:"",
				detailList:[],
				flagAbnormal:0,
				pic:'',
				remark:"",
			},
			imgs:[],
			rules:{
				pic:{required:true,message:"请上传凭证！",trigger:'blur'},
				operateDate:{required:true,message:"请选择巡园日期！",trigger:'blur'},
			},
			host:host('imgUrl'),
			eventChannel:null,
		}
	},
	watch:{
		"formData.flagAbnormal"(n){
			if(n==1){
				this.toAbnormal()
			}else{
				this.formData.detailList=[]
			}
		}
	},
	onLoad(){
		this.eventChannel=this.getOpenerEventChannel()
	},
	methods:{
		toAbnormal(index){
			uni.navigateTo({
				url:"/pages/patrolGarden/abnoReport",
				events:{update:e=>{
					if(/\d+/.test(index)){
						this.formData.detailList[index]=e
					}else{
						this.formData.detailList.push(e)
					}
				}},
				success:e=>{
					if(/\d+/.test(index)){
						e.eventChannel.emit("detail",this.formData.detailList[index])
					}
				}
			})
		},
		submit(){
			this.$refs.form.validate().then(async valid=>{
				if(valid){
					var res=await request("/api/basetour/addBaseTourInfo",{
						method:"post",
						body:this.formData
					})
					if(res.statu){
						this.eventChannel.emit('update')
						uni.navigateBack()
					}else{
						uni.showModal({
							title:"提示",
							content:res.msg||"获取保持失败！",
							showCancel:false,
						})
					}
				}
			})
		},
	}
}
</script>