yijianbao_user_uniapp/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="#2583EB" value="1" :checked="form.sex===1" style="margin-right: 16upx;" />
							<text  class="option-text">男</text>
						</label>
						<label>
							<radio @click="genderChange(2)" color="#2583EB" 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">
					<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="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/arrow_gray.png" mode=""></image>
						</view>
					</picker>
				</view>
			</view>
			<view class="form-box">
				<view class="form-item" @click="relationShow=true">
					<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="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/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="#2583EB" value="正常" :checked="form.liverUnusual==='正常'" style="margin-right: 16upx;" />
							<text  class="option-text">正常</text>
						</label>
						<label>
							<radio   color="#2583EB" 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="#2583EB" value="正常" :checked="form.renalUnusual==='正常'" style="margin-right: 16upx;" />
							<text  class="option-text">正常</text>
						</label>
						<label>
							<radio   color="#2583EB" 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="#2583EB" value="无" :checked="form.historyAllergic==='无'" style="margin-right: 16upx;" />
							<text  class="option-text">无</text>
						</label>
						<label>
							<radio   color="#2583EB" 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':'#2583EB'" :bgColor="item.checked==1?'#2583EB':'#ffffff'" :color="item.checked==1?'#ffffff':'#2583EB'" 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="#2583EB" value="无" :checked="form.selfMedHistory==='无'" style="margin-right: 16upx;" />
							<text  class="option-text">无</text>
						</label>
						<label>
							<radio   color="#2583EB" 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':'#2583EB'" :bgColor="item.checked==1?'#2583EB':'#ffffff'" :color="item.checked==1?'#ffffff':'#2583EB'" 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="#2583EB" value="无" :checked="form.familyMedHistory==='无'" style="margin-right: 16upx;" />
							<text  class="option-text">无</text>
						</label>
						<label>
							<radio   color="#2583EB" 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':'#2583EB'" :bgColor="item.checked==1?'#2583EB':'#ffffff'" :color="item.checked==1?'#ffffff':'#2583EB'" 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 {
				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:"无",  // 个人病史
				}
			};
		},
		onLoad(option) {
			this.type=option.type;
			if(this.type=='edit'){
				this.patientId=option.patientId;
				this.getPatientById();
				uni.setNavigationBarTitle({
					title: '编辑就诊人'
				});
			}
			else{
				uni.setNavigationBarTitle({
					title: '新增就诊人'
				});
			}
		},
		methods:{
			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:'none',
							 	title: res.alert || res.msg,
							 });
							 const time = res.alert&&res.alert.includes('积分') ? 1000 : 500
							 setTimeout(function() {
								 uni.$emit('refreshPatient');
								 uni.navigateBack({
									 delta: 1
								 })
							 }, time);
						}else{
							
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			// 出生日期选择
			birthdayChange: function(e) {
				this.form.birthday = e.target.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: #2583EB;
				border-radius: 44upx;
			}
		}
		
	}
	
</style>