tinnitus2-mini/src/pages/sickForm/history.vue

<template>
    <view class="content">
      <view class="self-inf">
        <view class="img-title-box">
			<view class="title">病史信息</view>
			<view class="content">耳鸣情况及其他系统合并疾病情况</view>
			<view class="footer">约2分钟完成</view>
        </view>
	  </view>
			<view class="example">
				<!-- 基础表单校验 -->
				<uni-forms ref="valiForm" :rules="rules" :modelValue="baseFormData">
					<uni-forms-item label="姓名" required name="name" box-width="190rpx">
						<uni-easyinput :value="baseFormData.name" @input="baseFormData.name = $event" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="电话" required name="phone" box-width="190rpx">
						<uni-easyinput type="number" :value="baseFormData.phone" @input="baseFormData.phone = $event" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="性别" required name="sex" box-width="190rpx">
						<uni-data-checkbox v-model="baseFormData.sex" :localdata="selectData.sex" @change="change('sex',$event)" :wrap="true"/>
					</uni-forms-item>
					<uni-forms-item label="年龄" name="age" box-width="190rpx">
						<uni-easyinput type="number" :value="baseFormData.age" @input="baseFormData.age = $event" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="常住地" required name="address" box-width="190rpx">
						<uni-easyinput :value="baseFormData.address" @input="baseFormData.address = $event" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="民族" required name="nation" box-width="190rpx">
						<picker @change="change('nation',$event)" :value="pickerIndexObj.nation" :range="selectData.nation" range-key="text">
							<view class="picker-class-box">{{pickerText(selectData.nation, pickerIndexObj.nation)}}</view>
						</picker>
					</uni-forms-item>

					<uni-forms-item label="职业" required name="profession" box-width="190rpx">
						<picker @change="change('profession',$event)" :value="pickerIndexObj.profession" :range="selectData.profession" range-key="text">
							<view class="picker-class-box">{{pickerText(selectData.profession, pickerIndexObj.profession)}}</view>
						</picker>
					</uni-forms-item>

					<uni-forms-item label="工作地点" required name="work_address" box-width="190rpx">
						<uni-easyinput :value="baseFormData.work_address" @input="baseFormData.work_address = $event" placeholder="请输入" />
					</uni-forms-item>

					<uni-forms-item label="学历" required name="education" box-width="190rpx">
						<picker @change="change('education',$event)" :value="pickerIndexObj.education" :range="selectData.education" range-key="text">
							<view class="picker-class-box">{{pickerText(selectData.education, pickerIndexObj.education)}}</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="婚姻" required name="marriage" box-width="190rpx">
						<picker @change="change('marriage',$event)" :value="pickerIndexObj.marriage" :range="selectData.marriage" range-key="text">
							<view class="picker-class-box">{{pickerText(selectData.marriage, pickerIndexObj.marriage)}}</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="居住情况" required name="house" box-width="190rpx">
						<picker @change="change('house',$event)" :value="pickerIndexObj.house" :range="selectData.house" range-key="text">
							<view class="picker-class-box">{{pickerText(selectData.house, pickerIndexObj.house)}}</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="耳鸣病程" required name="days" box-width="190rpx">
						<view class="display-between">
							<uni-easyinput :value="baseFormData.days" @input="baseFormData.days = $event" placeholder="请输入" type="number" widthStyle="160rpx" />
							<uni-data-checkbox v-model="unitValue" :localdata="unitList" @change="unitChange($event)" :wrap="true"/>
						</view>
					</uni-forms-item>
					<uni-forms-item label="惯用手" required name="common_hand" box-width="190rpx">
						<uni-data-checkbox v-model="baseFormData.common_hand" :localdata="selectData.hand" @change="change('hand',$event)" :wrap="true"/>
					</uni-forms-item>
					<uni-forms-item label="就诊类型" required name="type" box-width="190rpx">
						<picker @change="change('type',$event)" :value="pickerIndexObj.type" :range="selectData.type" range-key="text">
							<view class="picker-class-box">{{pickerText(selectData.type, pickerIndexObj.type)}}</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="就诊医院" required  name="hospital_id" box-width="190rpx">
						<picker @change="change('hospital',$event)" :value="pickerIndexObj.hospital" :range="selectData.hospital" range-key="text">
							<view class="picker-class-box">{{pickerText(selectData.hospital, pickerIndexObj.hospital)}}</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="就诊医生" required  name="doctor_id" box-width="190rpx">
						<picker @change="change('doctor',$event)" :value="pickerIndexObj.doctor" :range="doctorRange" range-key="text">
							<view class="picker-class-box">{{pickerText(doctorRange, pickerIndexObj.doctor)}}</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="ID号"  name="code" box-width="190rpx">
						<uni-easyinput :value="baseFormData.code" @input="baseFormData.code = $event" placeholder="请输入"/>
					</uni-forms-item>
				</uni-forms>
				<button class="footer-btn" @click="submit('valiForm')">提交</button>
			</view>
    </view>
</template>

<script>
import { request, currentOpenId } from '@/utils/request.js'
export default {
	data() {
	const currentDate = this.getDate({
		format: true
	})
    return {
		// 校验规则
		rules: {
			name: {
				rules: [{
					required: true,
					errorMessage: '请输入姓名'
				}]
			},
			sex: {
				rules: [{
					required: true,
					errorMessage: '请选择性别'
				}]
			},
			address: {
				rules: [{
					required: true,
					errorMessage: '请输入常住地'
				}]
			},
			phone: {
				rules: [{
					required: true,
					errorMessage: '请输入电话号码'
				},
				{
					minLength: 11,
					maxLength: 11,
					errorMessage: '电话号码长度为11个数字',
				}
				]
			},
			days: {
				rules: [{
					required: true,
					errorMessage: '请输入耳鸣病程'
				}]
			},
			common_hand: {
				rules: [{
					required: true,
					errorMessage: '请选择惯用手'
				}]
			},
			work_address: {
				rules: [{
					required: true,
					errorMessage: '请输入工作地点'
				}]
			},
		},
		// 基础表单数据
		baseFormData: {
			address: "",
			age: "",
			birth_year: "0",
			birthday: "0",
			profession: 1,
			work_address: "",
			code: "",
			common_hand: 2,
			create_time: "0",
			days: "",
			doctor_id: 1,
			doctor_name: "",
			education: 1,
			hospital_id: 1,
			hospital_name: "",
			house: 1,
			id: "2",
			marriage: 1,
			name: "",
			nation: 1,
			phone: "",
			sex: 1,
			title: "0",
			type: 1,
			update_time: "1728436174",
			weixin_user_id: "1",
		},
		pickerIndexObj:{
			profession: -1,
			nation: -1,
			education: -1,
			marriage: -1,
			house: -1,
			type: -1,
			hospital: -1,
			doctor: -1,
		},
		selectData:{
			sex: [],
			hand: [],
			profession: [],
			nation: [],
			education: [],
			marriage: [],
			house: [],
			type: [],
			hospital: [],
		},
		doctorRange: [],
        isAuth: true,
		pageId:1,
        date: currentDate,
		isFinish:false,
		unitList:[{ value: "天" , text: "天" },{ value:"月", text: "月" },{ value: "年" , text: "年" }],
		unitValue:'天',
		unitSubmit:'天'
    };
  },
  computed: {
	  startDate() {
		  return this.getDate('start');
	  },
	  endDate() {
		  return this.getDate('end');
	  }
  },
  onLoad(query) {
	  this.isFinish = query.finish || false
  },
 async onShow() {
	  const scene = getApp().globalData.sceneParam
      if(scene){
		  await this.$onLaunched;
		 let codeParam = this.getQueryParams(scene)
		 this.getUserHis(codeParam.doctor_id,codeParam.hospital_id);
		 getApp().globalData.sceneParam = '';
	  }else {
		 this.getUserHis('');
	  }
  },
  methods: {
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			if (type === 'start') {
				year = year - 124;
			} else if (type === 'end') {
				year = year + 0;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
			},
		getQueryParams(str) {
			const paramsArr = str.split('&');
			const paramObj = {};
			paramsArr.forEach(param => {
			  const [key, value] = param.split('=');
			  paramObj[key] = value;
			});
			return paramObj;
	  },
	validatePikcer(){
		let pickerObj = this.pickerIndexObj , pickerArr = [];
		let language = {
			'nation':'民族',
			'profession':'职业',
			'education':'学历',
			'marriage':'婚姻',
			'house':'居住情况',
			'type':'就诊类型',
			'hospital':'就诊医院',
			'doctor':'就诊医生'
		}
		for(let k in pickerObj) {
			if(pickerObj[k] === -1){
				uni.showToast({
					title:'请选择' + language[k],
					mask:true,
					icon:"error",
					duration:2000
				})
				break;
			}
		}
		for(let k in pickerObj) {
			let obj = {
				key: k,
				value:pickerObj[k]
			}
			pickerArr.push(obj)
		}
		return pickerArr.every((item)=>{return item.value !== -1})

	},
	submit(ref) {
		let that = this;
		that.$refs[ref].validate().then(res => {
			let isPicker =  that.validatePikcer();
			if(isPicker){that.submitForm();}
		}).catch(err => {
			console.log('err', err);
		})
	},
	getPostId(type,selectIdx){
		let resultId;
		this.pickerIndexObj[type] = selectIdx;
		if(type === 'doctor'){
			this.doctorRange.filter((item,idx)=>{
				if(idx === selectIdx){
					resultId = item.value;
				}
			});
		}else {
			this.selectData[type].filter((item,idx)=>{
				if(idx === selectIdx){
					resultId = item.value;
				}
			});
		}
		return resultId;
	},
	  unitChange(e){
		 this.unitValue = e.detail.value;
		 this.unitSubmit = e.detail.value;
	  },
	  change(types,e) {
		let that = this;
		let value = e;
		let tpyeVal = types;
		switch (tpyeVal) {
			case 'sex' :
			value = e.detail.value;
			that.baseFormData.sex = value;
			break;
			case 'nation' :
			value = Number(e.detail.value);
			that.baseFormData.nation = that.getPostId(tpyeVal,value);
			break;
			case 'education' :
			value = Number(e.detail.value);
			that.baseFormData.education = that.getPostId(tpyeVal,value);
			break;
			case 'profession' :
			value = Number(e.detail.value);
			that.baseFormData.profession = that.getPostId(tpyeVal,value);
			break;
			case 'hand' :
			value = e.detail.value;
			that.baseFormData.common_hand = value;
			break;
			case 'hospital' :
			value = Number(e.detail.value);
			that.baseFormData.hospital_id = that.getPostId(tpyeVal,value)
			that.baseFormData.hospital_name = that.selectData.hospital[that.pickerIndexObj.hospital].text
			that.getDoctor(that.baseFormData.hospital_id)
			break;
			case 'doctor' :
			value = Number(e.detail.value);
			that.baseFormData.doctor_id = that.getPostId(tpyeVal,value)
			that.baseFormData.doctor_name = that.doctorRange[that.pickerIndexObj.doctor].text
			break;
			case 'house' :
			value = Number(e.detail.value);
			that.baseFormData.house = that.getPostId(tpyeVal,value);
			break;
			case 'marriage' :
			value = Number(e.detail.value);
			that.baseFormData.marriage = that.getPostId(tpyeVal,value);
			break;
			case 'type' :
			value = Number(e.detail.value);
			that.baseFormData.type = that.getPostId(tpyeVal,value);
			break;
		}
	  },
	  pickerText(arr, idx) {
		  return (arr && arr[idx]) ? arr[idx].text : ''
	  },
	  pickerEchoShow(dataArr,dataId,typeName){
		  // sex/hand 是复选组件自己处理回显；career_type（工作性质）后台会返回但表单目前没有对应字段，跳过避免污染 pickerIndexObj
		  if(typeName === 'sex' || typeName === 'hand' || typeName === 'career_type'){
			   return
		  }else {
			 let rangeArr = dataArr, selectedId = dataId;
			 this.pickerIndexObj[typeName] = rangeArr.findIndex(item => item.value === selectedId);
		  }
	  },
	  makeFromData(docId,hosId){
			if(this.baseFormData.age == '0')this.baseFormData.age = '';
			this.baseFormData.sex = Number(this.baseFormData.sex);
			if(this.baseFormData.sex == '0')this.baseFormData.sex = '';
			this.baseFormData.common_hand = Number(this.baseFormData.common_hand);
			if(this.baseFormData.common_hand == '0')this.baseFormData.common_hand = '';
			if(docId) {
				this.baseFormData.hospital_id = Number(hosId);
				this.baseFormData.hospital = this.baseFormData.hospital_id
				this.baseFormData.doctor_id = Number(docId);
				this.baseFormData.doctor = this.baseFormData.doctor_id
			}else {
				this.baseFormData.hospital_id = Number(this.baseFormData.hospital_id);
				this.baseFormData.hospital = this.baseFormData.hospital_id
				this.baseFormData.doctor_id = Number(this.baseFormData.doctor_id);
				this.baseFormData.doctor = this.baseFormData.doctor_id
			}
			this.baseFormData.profession = Number(this.baseFormData.profession);
			this.baseFormData.education = Number(this.baseFormData.education);
			this.baseFormData.marriage = Number(this.baseFormData.marriage);
			this.baseFormData.nation = Number(this.baseFormData.nation);
			this.baseFormData.type = Number(this.baseFormData.type);
			this.baseFormData.house = Number(this.baseFormData.house);
			this.getUserSelect();
	  },
	  async getUserHis(docId,hosId) {
	     const res = await request('user', 'get_case_info', { openId: currentOpenId(), doctor_id: docId || 0 })
	     if (res.code === 200) {
            this.baseFormData = res.data;
			// 后台没填过的选择类字段存的是字符串 "0"（或者字段压根不存在），跟 age/sex 是同一套"0 代表未填"的约定，
			// "0"/undefined 在 JS 里判真值容易漏判，选项列表都是从 value:1 开始编号，统一兜底成 1，否则选择器会显示空白
			['profession','nation','education','marriage','house','common_hand','type','hospital_id','doctor_id'].forEach((key)=>{
				if (!this.baseFormData[key] || this.baseFormData[key] == '0') this.baseFormData[key] = 1
			})
			// 老病历记录没有工作地点字段时后台返回 null，uni-easyinput 绑定 null 初始值会导致输入内容同步不到 baseFormData，提前归一化成空字符串
			if (this.baseFormData.work_address == null || this.baseFormData.work_address == undefined) this.baseFormData.work_address = ''
			this.unitValue = this.baseFormData.days.substr(-1);
			this.baseFormData.days = this.baseFormData.days.substr(0,(this.baseFormData.days.length-1))
	     }
		 // 不管是否已有历史病历，选项列表（民族/职业/学历...）都要加载，否则新用户第一次填表时全部选择项空白
		 this.makeFromData(docId,hosId)
	   },
	  async getUserSelect() {
		 const res = await request('user', 'get_case_select', { openId: currentOpenId() })
	     if (res.code === 200) {
			 let pickerArr = res.data;
			 for(let key in pickerArr){
				 this.pickerEchoShow(pickerArr[key],this.baseFormData[key],key)
			 }
			 this.selectData = Object.assign({}, this.selectData, pickerArr);
			 this.getDoctor(this.baseFormData.hospital_id)
	     }
	   },
	  async getDoctor(hosId) {
		 const res = await request('user', 'get_doctor_select', { hospital_id: hosId })
	     if (res.code === 200) {
			this.doctorRange = this.objToArr(res.data);
			this.pickerEchoShow(this.doctorRange,this.baseFormData.doctor_id,'doctor')
	     }
	   },
	  async submitForm() {
		 this.baseFormData.days = this.baseFormData.days + this.unitSubmit;
	     const res = await request('user', 'update_case_info', this.baseFormData)
	     if (res.code === 200) {
			uni.navigateTo({
			  url:"/pages/sickForm/blurb?finish=" + this.isFinish
			});
	     } else {
			console.error('update_case_info failed', res)
	     }
	   },
	  objToArr(obj){
		  let arr = [];
		  for(let key in obj) {
			  arr.push({ text: obj[key], value: Number(key) })
		  }
		  return arr;
	  },
  }
}
</script>

<style lang="scss" scoped>
.content {
  .self-inf {
    height: 400rpx;
    width: 100%;
    background-image: url('/static/common-header-bg.jpg');
	background-size: contain;
	background-repeat: no-repeat;
    .img-title-box {
		display: flex;
        flex-direction: column;
		padding: 40rpx;
      .title {
		font-size: 40rpx;
        color: #000;
		margin-top: 100rpx;
      }
      .content{
		font-size: 28rpx;
        color: #999999;
		margin: 20rpx 0 20rpx 0;
      }
	  .footer{
		font-size: 24rpx;
		border: 1px solid #f97631;
		color: #f97631;
		padding: 5rpx;
		width: 136rpx;
	  }
    }
  }
}
.example {
	padding: 0 20rpx 140rpx;
}
.picker-class-box {
	color: #333;
}
.footer-btn {
	width: 94%;
	height: 100rpx;
	margin-left: 3%;
	color: #fff;
	background-color: #37a7ed;
	border-radius: 10rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 36rpx;
}
</style>