siyu_app/pages/user/addEditPatient.vue

<template>
	<view class="content">
		<view class="inner">
			<u-alert title="国家卫健委要求，就医行为必须实名登记" type = "info"  ></u-alert>
			<view class="form-box">
				<view class="form-item">
					<text class="label">姓名</text>
					<input class="input-width" type="text" v-model="form.patientName" placeholder="请输入真实姓名" placeholder-class="form-input" />
				</view>
				<view class="form-item">
					<text class="label">性别</text>
					<radio-group style="display: flex;align-items: center;">
						<label style="margin-right:30rpx;">
							<radio @click="genderChange(1)" color="#FF5C03" value="1" :checked="form.sex===1" style="margin-right: 16upx;" />
							<text  class="option-text">男</text>
						</label>
						<label>
							<radio @click="genderChange(2)" color="#FF5C03" value="2" :checked="form.sex===2" style="margin-right: 16upx;" />
							<text class="option-text">女</text>
						</label>
					</radio-group>
				</view>
				<view class="form-item">
					<text class="label">联系方式</text>
					<input class="input-width" type="phone" v-model="form.mobile" placeholder="请输入联系方式" placeholder-class="form-input" />
				</view>
				<view class="form-item">
					<text class="label">身份证号</text>
					<input class="input-width" type="idcard" @blur="idcardChange()" v-model="form.idCard" placeholder="请输入身份证号" placeholder-class="form-input" />
				</view>
				<view class="form-item" @click="dblclick">
					<text class="label">出生年月</text>
					<!-- <picker :value="form.birthday" start="1900-01-01" class="birth-picker" mode="date" @change="birthdayChange"> -->
						<view class="right-box">
							<view class="input-box">
								<input type="text" :value="form.birthday" placeholder="请选择出生年月" placeholder-class="form-input" disabled="disabled" />
							</view>
							<image class="arrow" src="../../static/images/arrow_gray.png" mode=""></image>
						</view>
					<!-- </picker> -->
				</view>
				<uni-popup ref="popup" type="bottom" background-color="#fff">
					<view class="popup-header x-bc">
						<text style="color: #888;" @click="colse">取消</text>
						<text style="color: #007aff;" @click="confirm">完成</text>
					</view>
					<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
						<picker-view-column>
							<view class="x-c" v-for="(item,index) in years" :key="index">{{item}}年</view>
						</picker-view-column>
						<picker-view-column>
							<view class="x-c" v-for="(item,index) in months" :key="index">{{item}}月</view>
						</picker-view-column>
						<picker-view-column>
							<view class="x-c" v-for="(item,index) in days" :key="index">{{item}}日</view>
						</picker-view-column>
					</picker-view>
				</uni-popup>
			</view>
			<view class="form-box" @click="relationShow=true">
				<view class="form-item" >
					<text class="label">与本人关系</text>
					<view class="right-box" >
						<view class="input-box">
							<input type="text" :value="form.relation" placeholder="请选择" placeholder-class="form-input" disabled="disabled" />
						</view>
						<image class="arrow" src="../../static/images/arrow_gray.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="form-box">
				<view class="form-item">
					<text class="label">肝功能</text>
					<radio-group  @change="liverUnusualChange" style="display: flex;align-items: center;">
						<label style="margin-right:30rpx;">
							<radio   color="#FF5C03" value="正常" :checked="form.liverUnusual==='正常'" style="margin-right: 16upx;" />
							<text  class="option-text">正常</text>
						</label>
						<label>
							<radio   color="#FF5C03" value="异常" :checked="form.liverUnusual==='异常'" style="margin-right: 16upx;" />
							<text class="option-text">异常</text>
						</label>
					</radio-group>
				</view>
				<view class="form-item">
					<text class="label">肾功能</text>
					<radio-group @change="renalUnusualChange" style="display: flex;align-items: center;">
						<label style="margin-right:30rpx;">
							<radio   color="#FF5C03" value="正常" :checked="form.renalUnusual==='正常'" style="margin-right: 16upx;" />
							<text  class="option-text">正常</text>
						</label>
						<label>
							<radio   color="#FF5C03" value="异常" :checked="form.renalUnusual==='异常'" style="margin-right: 16upx;" />
							<text class="option-text">异常</text>
						</label>
					</radio-group>
				</view>
				<view class="form-item">
					<text class="label">过敏史</text>
					<radio-group @change="historyAllergicChange" style="display: flex;align-items: center;justify-content: flex-end;margin: 5rpx 0rpx;">
						<label style="margin-right:30rpx;">
							<radio    color="#FF5C03" value="无" :checked="form.historyAllergic==='无'" style="margin-right: 16upx;" />
							<text  class="option-text">无</text>
						</label>
						<label>
							<radio   color="#FF5C03" value="有" :checked="form.historyAllergic==='有'" style="margin-right: 16upx;" />
							<text class="option-text">有</text>
						</label>
					</radio-group>
					
				</view>
				<view class="form-item" v-if="form.historyAllergic=='有'" >
					<view class="option-box"  style="margin: 5rpx 0rpx;"  >
						<view class="option" v-for="(item,index) in historyAllergics" >
							<u-tag @click="historyAllergicOptionChange(item)" :borderColor="item.checked==1?'#ffffff':'#FF5C03'" :bgColor="item.checked==1?'#FF5C03':'#ffffff'" :color="item.checked==1?'#ffffff':'#FF5C03'" shape="circle" :text="item.name"></u-tag>
						</view>
					</view>
				</view>
				<view class="form-item">
					<text class="label">个人病史</text>
					<radio-group @change="selfMedHistoryChange" style="display: flex;align-items: center;">
						<label style="margin-right:30rpx;">
							<radio   color="#FF5C03" value="无" :checked="form.selfMedHistory==='无'" style="margin-right: 16upx;" />
							<text  class="option-text">无</text>
						</label>
						<label>
							<radio   color="#FF5C03" value="有" :checked="form.selfMedHistory==='有'" style="margin-right: 16upx;" />
							<text class="option-text">有</text>
						</label>
					</radio-group>
				</view>
				<view class="form-item" v-if="form.selfMedHistory=='有'" >
					<view class="option-box"  style="margin: 5rpx 0rpx;"  >
						<view class="option" v-for="(item,index) in selfMedHistorys" >
							<u-tag @click="selfMedHistoryOptionChange(item)" :borderColor="item.checked==1?'#ffffff':'#FF5C03'" :bgColor="item.checked==1?'#FF5C03':'#ffffff'" :color="item.checked==1?'#ffffff':'#FF5C03'" shape="circle" :text="item.name"></u-tag>
						</view>
					</view>
				</view>
				<view class="form-item">
					<text class="label">家庭病史</text>
					<radio-group @change="familyMedHistoryChange" style="display: flex;align-items: center;">
						<label style="margin-right:30rpx;">
							<radio   color="#FF5C03" value="无" :checked="form.familyMedHistory==='无'" style="margin-right: 16upx;" />
							<text  class="option-text">无</text>
						</label>
						<label>
							<radio   color="#FF5C03" value="有" :checked="form.familyMedHistory==='有'" style="margin-right: 16upx;" />
							<text class="option-text">有</text>
						</label>
					</radio-group>
				</view>
				<view class="form-item" v-if="form.familyMedHistory=='有'" >
					<view class="option-box"  style="margin: 5rpx 0rpx;"  >
						<view class="option" v-for="(item,index) in familyMedHistorys" >
							<u-tag @click="familyMedHistoryOptionChange(item)" :borderColor="item.checked==1?'#ffffff':'#FF5C03'" :bgColor="item.checked==1?'#FF5C03':'#ffffff'" :color="item.checked==1?'#ffffff':'#FF5C03'" shape="circle" :text="item.name"></u-tag>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn-box">
			<view class="sub-btn" @click="submit()">保存就诊人</view>
		</view>
		<u-action-sheet
				:show="relationShow"
				:actions="relations"
				title="请选择"
				@close="relationShow = false"
				@select="relationSelect"
		>
		</u-action-sheet>
	</view>
</template>

<script>
import {getPatientById,addPatient,editPatient} from '@/api/patient'
	export default {
		data() {
			return {
				years: [],
				year: new Date().getFullYear(),
				months: [],
				month: new Date().getMonth() + 1,
				days: [],
				day: new Date().getDate(),
				value: [],
				visible: true,
				indicatorStyle: `height: 34px;`,
				relationShow:false,
				relations: [
					{
						name: '本人',
					},
					{
						name: '配偶',
					},
					{
						name: '父母',
					},
					{
						name: '子女',
					},
					{
						name: '朋友',
					},
					{
						name: '亲戚',
					},
					{
						name: '其他',
					},
				],
				historyAllergics: [
					{
						name: '阿司匹林',
						checked: 0,
					},
					{
						name: '磺胺类',
						checked: 0,
					},
					{
						name: '头孢类',
						checked: 0,
					},
					{
						name: '青毒素类',
						checked: 0,
					},
					{
						name: '奶制品',
						checked: 0,
					},
					{
						name: '其他',
						checked: 0,
					},
				],
				selfMedHistorys: [
					{
						name: '糖尿病',
						checked: 0,
					},
					{
						name: '哮喘',
						checked: 0,
					},
					{
						name: '恶性肿瘤',
						checked: 0,
					},
					{
						name: '高血压',
						checked: 0,
					},
					{
						name: '其他',
						checked: 0,
					},
				],
				familyMedHistorys: [
					{
						name: '糖尿病',
						checked: 0,
					},
					{
						name: '哮喘',
						checked: 0,
					},
					{
						name: '恶性肿瘤',
						checked: 0,
					},
					{
						name: '高血压',
						checked: 0,
					},
					{
						name: '其他',
						checked: 0,
					},
				],
				type:null,
				patientId:null,
				form: {
					sex: 1,
					birthday: '',
					idCard:"",
					relation:"",  // 与本人关系
					liverUnusual:"正常",  // 肝功能是否异常
					renalUnusual:"正常",  // 肾功能是否异常
					historyAllergic:"无", // 过敏史
					familyMedHistory:"无",  // 家族病史
					selfMedHistory:"无",  // 个人病史
				},
				birthdayDisabled: true,
				lastTapTime: 0, // 上一次点击的时间戳
				lastTapTimeoutFunc: null // 单击事件的延时函数
			};
		},
		onLoad(option) {
			this.type=option.type;
			this.resetDay()
			if(this.type=='edit'){
				this.patientId=option.patientId;
				this.getPatientById();
				uni.setNavigationBarTitle({
					title: '编辑就诊人'
				});
			}
			else{
				uni.setNavigationBarTitle({
					title: '新增就诊人'
				});
			}
		},
		methods:{
			resetDay() {
				const date = new Date()
				const year = date.getFullYear();
				const month = date.getMonth(); 
				const daysInMonth = new Date(year, month + 1, 0).getDate();

				for (let i = 1875; i <= date.getFullYear(); i++) {
					this.years.push(i)
				}
				for (let i = 1; i <= 12; i++) {
					this.months.push((i < 10 ? '0' : '') + i)
				}
				for (let i = 1; i <= daysInMonth; i++) {
					this.days.push((i < 10 ? '0' : '') + i)
				}
			},
			dblclick(e) {
			    // 当前点击的时间戳
			    const currentTime = e.timeStamp;
			    const lastTapTime = this.lastTapTime;
			
			    // 更新最后一次点击时间
			    this.lastTapTime = currentTime;
			
			    // 如果两次点击时间在300毫秒内，则认为是双击事件
			    if (currentTime - lastTapTime < 400) {
			        // 成功触发双击事件时，取消单击事件的执行
			        clearTimeout(this.lastTapTimeoutFunc);
			        // 在这里处理双击事件的逻辑
					if(!this.form.birthday) {
						const date = new Date()			
						this.year = date.getFullYear()			
						const month = date.getMonth() + 1
						const day = date.getDate()
						this.value = [this.years.length-1, month - 1, day - 1]
						this.month = month < 10 ? '0'+month : month
						this.day = day < 10 ? '0'+day : day
					} else {
						const birthdayArry = this.form.birthday.split('-')
						this.year = birthdayArry[0]
						this.month = birthdayArry[1]
						this.day = birthdayArry[2]
						const y = this.years.indexOf(Number(this.year))
						this.value = [y, Number(this.month) - 1, Number(this.day) - 1]
					}
					this.$refs.popup.open()
			    } else {
			        // 如果不是双击事件，则设置一个延时函数，用于判断是否触发单击事件
			        this.lastTapTimeoutFunc = setTimeout(() => {
			          // 在这里处理单击事件的逻辑
					}, 400);
			    }
			},
			bindChange(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
			},
			confirm() {
				this.form.birthday = `${this.year}-${this.month}-${this.day}`
				this.colse()
			},
			colse() {
				this.$refs.popup.close()
			},
			liverUnusualChange(item){
				console.log(item)
				this.form.liverUnusual=item.detail.value;
			},
			renalUnusualChange(item){
				console.log(item)
				this.form.renalUnusual=item.detail.value;
			},
			historyAllergicOptionChange(item){
				item.checked=item.checked==1?0:1
			},
			selfMedHistoryOptionChange(item){
				item.checked=item.checked==1?0:1
			},
			familyMedHistoryOptionChange(item){
				item.checked=item.checked==1?0:1
			},
			historyAllergicChange(item){
				console.log(item)
				this.form.historyAllergic=item.detail.value;
			},
			selfMedHistoryChange(item){
				console.log(item)
				this.form.selfMedHistory=item.detail.value;
			},
			familyMedHistoryChange(item){
				console.log(item)
				this.form.familyMedHistory=item.detail.value;
			},
			relationSelect(e){
				this.form.relation = e.name
			},
			idcardChange(){
				if(this.form.idCard.length==18){
					var json=this.$parseIDCardInfo(this.form.idCard)
					this.form.birthday=json.birthday
					console.log(json)
				}
				
			},
			genderChange(type){
				this.form.sex=type
			},
			getPatientById(){
				var data={patientId:this.patientId};
				getPatientById(data).then(
					res => {
						if(res.code==200){
							this.form=res.data;
							this.date=this.form.birthday;
							if(this.form.historyAllergic!=null&&this.form.historyAllergic!="无"){
								var options=this.form.historyAllergic.split(',');
							  	this.historyAllergics.forEach(item =>{
									for(var i=0;i<options.length;i++){
										if(item.name==options[i]){
											item.checked=1;
										}
									}
							  		
							  	})
							  	this.form.historyAllergic="有";
							}
							if(this.form.selfMedHistory!=null&&this.form.selfMedHistory!="无"){
							  	var options=this.form.selfMedHistory.split(',');
							  	this.selfMedHistorys.forEach(item =>{
									for(var i=0;i<options.length;i++){
										if(item.name==options[i]){
											item.checked=1;
										}
									}
							  		
							  	})
							  	this.form.selfMedHistory="有";
							}
							if(this.form.familyMedHistory!=null&&this.form.familyMedHistory!="无"){
							   	var options=this.form.familyMedHistory.split(',');
							   	this.familyMedHistorys.forEach(item =>{
									for(var i=0;i<options.length;i++){
										if(item.name==options[i]){
											item.checked=1;
										}
									}
							   		
							   	})
							   	this.form.familyMedHistory="有";
							}
							  
						}else{
							uni.showToast({
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			submit(){
				if(this.type=="add"){
					this.addPatient()
				}
				else if(this.type=="edit"){
					this.editPatient()
				}
				
			},
			editPatient(){
				var data={
					patientId:this.patientId,
					patientName:this.form.patientName,
					mobile:this.form.mobile,
					sex: this.form.sex,
					birthday: this.form.birthday,
					idCard:this.form.idCard,
					relation:this.form.relation,  // 与本人关系
					liverUnusual:this.form.liverUnusual,  // 肝功能是否异常
					renalUnusual:this.form.renalUnusual,  // 肾功能是否异常
				}
				if(this.form.historyAllergic=="有"){
					var options=[];
					this.historyAllergics.forEach(item =>{
						if(item.checked==1){
							options.push(item.name);
						}
					})
					data.historyAllergic=options.toString();
				}
				else{
					data.historyAllergic=this.form.historyAllergic;
				}
				if(this.form.selfMedHistory=="有"){
					var options=[];
					this.selfMedHistorys.forEach(item =>{
						if(item.checked==1){
							options.push(item.name);
						}
					})
					data.selfMedHistory=options.toString();
				}
				else{
					data.selfMedHistory=this.form.selfMedHistory;
				}
				if(this.form.familyMedHistory=="有"){
					var options=[];
					this.familyMedHistorys.forEach(item =>{
						if(item.checked==1){
							options.push(item.name);
						}
					})
					data.familyMedHistory=options.toString();
				}
				else{
					data.familyMedHistory=this.form.familyMedHistory;
				}
				editPatient(data).then(
					res => {
						if(res.code==200){
							 uni.showToast({
							 	icon:'success',
							 	title: "操作成功",
							 });
							 setTimeout(function() {
								 uni.$emit('refreshPatient');
								 uni.navigateBack({
									 delta: 1
								 })
							 }, 500);
						}else{
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			addPatient(){
				var data={
					patientName:this.form.patientName,
					mobile:this.form.mobile,
					sex: this.form.sex,
					birthday: this.form.birthday,
					idCard:this.form.idCard,
					relation:this.form.relation,  // 与本人关系
					liverUnusual:this.form.liverUnusual,  // 肝功能是否异常
					renalUnusual:this.form.renalUnusual,  // 肾功能是否异常
				}
				if(this.form.historyAllergic=="有"){
					var options=[];
					this.historyAllergics.forEach(item =>{
						if(item.checked==1){
							options.push(item.name);
						}
					})
					data.historyAllergic=options.toString();
				}
				else{
					data.historyAllergic=this.form.historyAllergic;
				}
				if(this.form.selfMedHistory=="有"){
					var options=[];
					this.selfMedHistorys.forEach(item =>{
						if(item.checked==1){
							options.push(item.name);
						}
					})
					data.selfMedHistory=options.toString();
				}
				else{
					data.selfMedHistory=this.form.selfMedHistory;
				}
				if(this.form.familyMedHistory=="有"){
					var options=[];
					this.familyMedHistorys.forEach(item =>{
						if(item.checked==1){
							options.push(item.name);
						}
					})
					data.familyMedHistory=options.toString();
				}
				else{
					data.familyMedHistory=this.form.familyMedHistory;
				}
				
				addPatient(data).then(
					res => {
						if(res.code==200){
							 uni.showToast({
							 	icon:'success',
							 	title: "操作成功",
							 });
							 setTimeout(function() {
								 uni.$emit('refreshPatient');
								 uni.navigateBack({
									 delta: 1
								 })
							 }, 500);
						}else{
							
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			// 出生日期选择
			birthdayChange(e) {
				this.form.birthday = e.detail.value
			},
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.content{
		height: 100%;
		.inner{
			padding: 20upx 20rpx 200rpx;
			.form-box{
				margin-bottom: 15rpx;
				padding: 0upx 30upx;
				background: #FFFFFF;
				border-radius: 16upx;
				.form-item{
					min-height: 103upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #F1F1F1;
					&:last-child{
						border-bottom: none;
					}
					.label{
						min-width: 200upx;
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #222222;
					}
					.option-box{
						display: flex;
						flex-wrap: wrap;
						align-items: flex-start;
						justify-content: flex-start;
						.option{
							margin: 5rpx;
						}
					}
					.input-width{
						width: calc(100% - 200upx);
						text-align: right;
					}
					.form-input{
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						text-align: right;
					}
					.option-text{
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #111111;
						line-height: 30upx;
					}
					.right-box{
						display: flex;
						align-items: center;
						.input-box{
							width: 400upx;
							display: flex;
							align-items: center;
							justify-content: flex-end;
							input{
								text-align: right;
							}
						}
						.arrow{
							width: 13upx;
							height: 23upx;
							margin-left: 20upx;
						}
					}
					.birth-picker {
						display: flex;
						align-items: center;
						.right-box{
							display: flex;
							align-items: center;
							.input-box{
								width: 400upx;
								display: flex;
								align-items: center;
								justify-content: flex-end;
								input{
									text-align: right;
								}
							}
							.arrow{
								width: 13upx;
								height: 23upx;
								margin-left: 20upx;
							}
						}
					}
				}
			}
		}
		.btn-box{
			position: fixed;
			bottom: 0rpx;
			left:0rpx;
			width: 100%;
			height: 120upx;
			padding: 0 30upx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #FFFFFF;
			.sub-btn{
				width: 100%;
				height: 88upx;
				line-height: 88upx;
				text-align: center;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				background: #FF5C03;
				border-radius: 44upx;
			}
		}
		
	}
	.popup-header {
		width: 100%;
		text-align: center;
		width: 100%;
		height: 45px;
		padding: 0 28rpx;
		box-sizing: border-box;
		font-size: 34rpx;
		position: relative;
		&::after {
			content: '';
			position: absolute;
			left: 0;
			bottom: 0;
			right: 0;
			height: 1px;
			clear: both;
			border-bottom: 1px solid #e5e5e5;
			color: #e5e5e5;
			transform-origin: 0 100%;
			transform: scaleY(0.5);
		}
	}
	.picker-view {
		width: 100%;
		height: 476rpx;
	}
</style>