jp-xpgj-GA-file/src/projects/business/views/Master/Health/WorkerReport.vue

<template>
	<div>
		<common @asynCallBack="asynCallBack"></common>
		<top-header :pageTitle="pageTitle"></top-header>

		<div class="mui-content vongi-qingjiadt">
			<div class="mui-content-padded">
				<h5>身份信息</h5>
			</div>
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>姓名</label>
					<span>{{person_data.name}}</span>
				</div>
				<div class="mui-input-row">
					<label>手机号</label>
					<span>{{person_data.phone}}</span>
				</div>
				<div class="mui-input-row">
					<label>身份证号</label>
					<span>{{person_data.idCard}}</span>
				</div>
				<div class="mui-input-row">
					<label>所属单位</label>
					<span>{{person_data.position1}}</span>
				</div>
				<div class="mui-input-row">
					<label>所属部门</label>
					<span>{{person_data.position2}}</span>
				</div>
				<div class="mui-input-row">
					<label>岗位</label>
					<span>{{person_data.position3}}</span>
				</div>
			</form>
			<div class="mui-content-padded">
				<h5>健康状态</h5>
			</div>
			<form class="mui-input-group vongi-editme">
				<div class="mui-input-row">
					<label style="width:50%">自身健康情况<i class="colorfe616c"  v-if="!curDateIsUpload" >*</i></label>
					<span v-if="curDateIsUpload" style="width:50%"
						  v-html="report.healthStatusN">其他</span>

					<button class="mui-btn mui-btn-block mui-navigate-right"
							v-if="!curDateIsUpload"
							@click="selectHealthStatus"
							type='button' style="width:50%">
						{{report.healthStatusN}}
					</button>
				</div>
				<div class="mui-input-row">
					<label>今日体温<i class="colorfe616c"  v-if="!curDateIsUpload" >*</i></label>
					<span v-if="curDateIsUpload"
						  style="width:50%" v-html="report.temperature"></span>

					<input type="text" class="mui-input-clear"
						   v-if="!curDateIsUpload"
						   v-model="report.temperature" placeholder="请输入体温度数  ">
				</div>
				<div class="mui-input-row">
					<label>其他情况</label>
					<span v-if="curDateIsUpload"
						  style="width:50%" v-html="report.healthRemark"></span>
					<input type="text" class="mui-input-clear"
						   v-if="!curDateIsUpload"
						   v-model="report.healthRemark" placeholder="请填写具体情况  ">



				</div>
				<div class="mui-input-row">
					<label style="width:70%">家庭成员身体健康情况<i class="colorfe616c"  v-if="!curDateIsUpload" >*</i></label>
					<span v-if="curDateIsUpload"   style="width:30%" v-html="report.familyStatusN">其他</span>

					<button  v-if="!curDateIsUpload"
							 @click="selectFamilyHealthStatus"
							 class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:30%">
						{{report.familyStatusN}}
					</button>
				</div>
				<div class="mui-input-row vongi-wordcard vongi-input-up">
					<div class="mui-media-body">上传家庭成员健康码</div>
					<div class="fyy-upphoto">
						<div class="mui-col-xs-3 fyy-upphoto-close" v-for="(picture,index) in report.pictures" :key="index"  >
							<img :src="picture + '?x-oss-process=image/resize,m_fill,w_128,h_128'" />
							<a class="mui-icon mui-icon-closeempty" v-if="!curDateIsUpload" @click="delImg(index)" ></a>
						</div>
						<div class="mui-col-xs-3"  v-if="!curDateIsUpload"   @click="changeImg" >
							<a><i class="mui-icon mui-icon-plusempty"></i></a>
						</div>
					</div>
				</div>
				<div class="mui-input-row " :class="!curDateIsUpload?'vongi-pad':''">
					<div class="mui-media-body" v-if="!curDateIsUpload">假期是否曾前往重点疫区<i class="colorfe616c"   >*</i></div>
					<label v-if="curDateIsUpload"  style="width:70%;">假期是否曾前往重点疫区</label>
					<span v-if="curDateIsUpload"   style="width:30%" v-html="report.isGoto ? '是' : '否'">是</span>

					<div class="mui-input-group flew" v-if="!curDateIsUpload" >

						<div class="mui-radio mui-left mui-col-xs-6">
							<label>是</label>
							<input     v-model="report.isGoto" name="isGoto" value="true" type="radio">
						</div>
						<div class="mui-radio mui-left mui-col-xs-6">
							<label>否</label>
							<input     v-model="report.isGoto" name="isGoto" value="false" type="radio">
						</div>

					</div>
				</div>
				<div class="mui-input-row " :class="!curDateIsUpload?'vongi-pad':''">
					<div class="mui-media-body" v-if="!curDateIsUpload">是否接触重点疫区高危人群<i class="colorfe616c"   >*</i></div>

					<label v-if="curDateIsUpload"  style="width:70%;">是否接触重点疫区高危人群</label>

					<span v-if="curDateIsUpload"   style="width:30%" v-html="report.isTouch ? '是' : '否'">是</span>

					<div class="mui-input-group flew" v-if="!curDateIsUpload" >

						<div class="mui-radio mui-left mui-col-xs-6">
							<label>是</label>
							<input     v-model="report.isTouch" name="isTouch" value="true" type="radio">
						</div>
						<div class="mui-radio mui-left mui-col-xs-6">
							<label>否</label>
							<input     v-model="report.isTouch" name="isTouch" value="false" type="radio">
						</div>

					</div>
				</div>
			</form>
			<div class="vongi-btn vongi-login-btn" v-if="!curDateIsUpload&&!send">
				<button class="mui-btn mui-btn-primary " @click="submitReport()" >
					提交
				</button>
			</div>
			<div class="fyy-popup-button" v-if="curDateIsUpload&&!send" >
				<div class="mui-col-xs-6">
					<button class="mui-btn mui-btn-primary " @click="sendReport()" >
						确认提交
					</button>
				</div>
				<div class="mui-col-xs-6">
					<button class="mui-btn mui-btn-warning " @click="noSubmitReport()" >
						撤回编辑
					</button>
				</div>

			</div>

		</div>
		<loading :visible="isLoading"></loading>

	</div>
</template>


<script>
	require('$project/assets/js/mui.picker.min.js');
	import * as API_Health from '@/apis/Master/health'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'

	import * as WxJsApi from '$project/utils/wxJsApi'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		currentTimeStamp,
		parseUnixTime
	} from '$project/utils'
	export default {
		name: 'MasterHealthWorkerReport',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				pageTitle: '健康打卡',
				id: '',
				student: {},
				report: {
					healthStatus: "",
					healthStatusN: "请选择",
					healthRemark: "",
					familyStatus: "",
					familyStatusN: "请选择",
					pictures: [],
					isGoto: false,
					isTouch: false
				},
				curDateIsUpload:false,
				send:false,
				isLoading: false,
				max:37.3,
				healthStatusList:[],
			}
		},
		created() {
			this.id = this.$route.query.id;
			this.getStatus();
			API_Health.curDateIsUpload().then(data => {
				this.curDateIsUpload=data;
				this.send=data;

				if (data) {
					API_Health.getDetail(this.id,'1').then(response => {
						this.isLoading = false;
						this.student = response;

						if(response.personHealthLedger!=null){
							this.report.healthStatusN=response.personHealthLedger.healthStatusN;
							this.report.healthRemark=response.personHealthLedger.healthRemark;
							this.report.familyStatusN=response.personHealthLedger.familyStatusN;
							this.report.isGoto=response.personHealthLedger.isGoto;
							this.report.isTouch=response.personHealthLedger.isTouch;
							this.report.pictures=response.personHealthLedger.familyGreenCode.split(',');
							this.report.temperature=response.personHealthLedger.temperature;

						}

					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
					})

				} else {
					API_Health.getPersonInfo('1').then(response => {
						this.student = response;
						if(response.personHealthLedger!=null){
							this.report.healthRemark=response.personHealthLedger.healthRemark;
							//this.report.temperature=response.personHealthLedger.temperature;

							this.report.healthStatusN=response.personHealthLedger.healthStatusN;
							this.report.familyStatusN=response.personHealthLedger.familyStatusN;

							this.report.healthStatus=response.personHealthLedger.healthStatus;
							this.report.familyStatus=response.personHealthLedger.familyStatus;

							this.report.isGoto=response.personHealthLedger.isGoto;
							this.report.isTouch=response.personHealthLedger.isTouch;
							//this.report.pictures=response.personHealthLedger.familyGreenCode.split(',');
						}
						this.id=response.id;




					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
					})
				}
			}).catch(error => {
				this.isLoading = false;
				mui.toast(error);
			})

		},
		methods: {
			asynCallBack(){},
			delImg(index){

				this.report.pictures.splice(index, 1);
			},
			changeImg() {
				if(this.report.pictures.length >= 3){
					mui.toast("只能上传3张家庭成员健康码");
					return;
				}
				var _this = this;

				WxJsApi.chooseImage().then(res => {
					var localData = res.localData;

					if (localData.indexOf('data:image') != 0) {
						//判断是否有这样的头部
						localData = 'data:image/jpeg;base64,' + localData
					}
					localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
					this.imgBase64 = localData;
					//显示裁剪图片
					//_this.showCropper(field);
					this.uploadpic();
				}).catch(error => {
					mui.toast(error);
				})


			},
			//上传图片
			uploadpic() {
				this.isLoading = true;

				WxJsApi.uploadPic(this.imgBase64).then(response => {
					this.isLoading = false;
					this.report.pictures.push(response);
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			selectHealthStatus() {
				var picker = new mui.PopPicker();
				picker.setData(this.healthStatusList);

				picker.show((selectItems) => {
					this.report.healthStatusN = selectItems[0].text;
					this.report.healthStatus = selectItems[0].value;
				});
			},
			selectFamilyHealthStatus() {
				var picker = new mui.PopPicker();
				picker.setData(this.healthStatusList);

				picker.show((selectItems) => {
					this.report.familyStatusN = selectItems[0].text;
					this.report.familyStatus = selectItems[0].value;
				});

			},
			uploadPicture(event) {
				if(this.report.pictures.length >= 3){
					mui.toast("只能上传3张家庭成员健康码");
					return;
				}
				var fileData = event.target.files[0];

				this.isLoading = true;

				API_Health.uploadPicture(fileData).then(data => {
					this.report.pictures.push(data);

					this.isLoading = false;
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			fatherMethod(idCard){
				this.student.idCard=idCard
			},
			selectGoto() {
				var picker = new mui.PopPicker();

				picker.setData([{
					text: "是",
					value: true
				},
					{
						text: "否",
						value: false
					}
				]);

				picker.show((selectItems) => {
					this.report.isGoto = selectItems[0].value;
				});
			},
			selectTouch() {
				var picker = new mui.PopPicker();

				picker.setData([{
					text: "是",
					value: true
				},
					{
						text: "否",
						value: false
					}
				]);

				picker.show((selectItems) => {
					this.report.isTouch = selectItems[0].value;
				});
			},
			sendReport(){
				this.isLoading = true;
				API_Health.save({
					...this.report,
					personId: this.student.id,
					familyGreenCode: this.report.pictures.join(",")
				}).then(data => {
					mui.toast("已提交");
					this.send=false;
					this.isLoading = false;

				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			} 	,noSubmitReport(){
				this.curDateIsUpload=false;
			},
			submitReport() {

				if (this.report.healthStatus.length == 0) {
					mui.toast("请选择自身健康情况!");
					return;
				}

				if (this.report.familyStatus.length == 0) {
					mui.toast("请选择家庭成员身体健康情况!");
					return;
				}
				if (!this.report.temperature) {
					mui.toast('请输入体温度数');
					return ;
				}
				var reg = new RegExp("^((3\\d)|(3\\d\\.\\d|40|40.0))$");

				if (!reg.test(this.report.temperature)) {
					mui.toast('请输入正确的数字[30.0-40.0]');
					return ;
				}
				if(this.report.isGoto=="true"||this.report.isGoto==true){
					this.report.isGoto=true;
				}else{
					this.report.isGoto=false;
				}
				if(this.report.isTouch=="true"||this.report.isTouch==true){
					this.report.isTouch=true;
				}else{
					this.report.isTouch=false;
				}
				// if (this.report.pictures.length == 0) {
				// 	mui.toast("请上传家庭成员健康码!");
				// 	return;
				// }
				this.curDateIsUpload=true;

				if(this.report.temperature>this.max){
					//	mui.alert("提交温度大于等于<span style='color: red'>37.2°</span><br/>需要点击下方【确认提交】<br/>确认后不能修改！");
					//	mui.alert("提交温度大于等于<span style='color: red'>37.2°</span><br/><ul><li>1、过高体温将会上报至平台管理人员</li><li>2、过高体温将会上报至学校领导</li></ul><br/>需要点击下方【确认提交】<br/>确认后不能修改！");
					mui.alert("提交体温<span style='color: red'>"+this.report.temperature+"℃</span>为异常体温，系统会将异常数据通报公司相关负责人。<br>如体温属实请点击下方【确认提交】按钮，确认后无法修改！");
				}else{
					mui.alert("需要点击下方【确认提交】<br/>确认后不能修改！");
				}
				//mui.alert("需要点击下方确认提交，确认后不能修改！");


			},
			getStatus(){

				API_Health.getHealthStatusList().then(data => {
					var arr = data.map(item => {
						return {
							value: item.value,
							text: item.name
						};
					});
					this.healthStatusList=arr


				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//获取详情
			getDetail() {
				this.isLoading = true;

				API_Health.getDetail(this.id, '3').then(response => {
					this.isLoading = false;

					this.detail = response;
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			asynCallBack() {},
		},
		mounted() {
			WxJsApi.getWxConfig();
		},
		destroyed() {

		},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
			})
		}
	}
</script>
<style src="$project/assets/css/mui.picker.min.css"></style>
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style scoped>
	.fyy-popup-button{
		display: flex;
		padding:10px
	}
	.fyy-popup-button .mui-col-xs-6{
		padding:0 5px
	}
	.fyy-popup-button button{
		width:100%
	}
</style>