medical/pages/addHandle/index.vue

<template>
	<view>
		<!-- 基本信息 -->
		<template>
			<view class="content">
				<u-cell isLink @click="show=true">
					<view slot="title" class="u-slot-title">
						<text class="u-cell-text">
							<RedDot text="班级" :required="true"></RedDot>
						</text>
					</view>
					<view slot="right-icon" isLink class="cell-right">{{classCheck.label || '请选择'}}</view>
				</u-cell>
				<u-picker v-if="type != 2" :closeOnClickOverlay="true" @close="show=false" :show="show" :columns="classData"
					keyName="label" @cancel="show=false" @confirm="choiceUser"></u-picker>
			</view>

			<view class="content">
				<u-cell isLink @click="nameshow">
					<view slot="title" class="u-slot-title">
						<text class="u-cell-text">
							<RedDot text="姓名" :required="true"></RedDot>
						</text>
					</view>
					<view slot="right-icon" isLink class="cell-right">{{nameCheck.label || '请选择'}}</view>
				</u-cell>

				<u-popup v-if="type != 2" @close="nameShow=false" :closeOnClickOverlay="true" @cancel="nameShow=false" :overlay="false"
					:show="nameShow">
					<view style="height: 500rpx; position: relative; display: flex; justify-content: center;">
						<view style="position: absolute; top: 20rpx; z-index: 999999;">
							<input class="inp" confirm-type="search" v-model="key" @input="serName"
								placeholder="学生姓名" />
							<u-icon class="inp-img" name="search" color="#8C8C8C" size="49rpx"></u-icon>
						</view>
						<u-picker :closeOnClickOverlay="true" @close="nameShow=false" :show="nameShow"
							:columns="nameData" keyName="label" @cancel="nameShow=false" @confirm="choiceName">
						</u-picker>
					</view>
				</u-popup>
			</view>

			<view class="content">
				<u-cell>
					<view slot="title" class="u-slot-title">
						<text class="u-cell-text">
							性别
						</text>
					</view>
					<view slot="right-icon" style="padding-right: 40rpx; color: rgba(0,0,0,0.30);">
						{{formData.sex == 1 ? '男' : formData.sex == 2 ? '女' : '自动获取'}}
					</view>
				</u-cell>
			</view>
		</template>

		<!-- 症状及体征 -->
		<view class="symptom">
			<text class="u-cell-text">
				<RedDot text="症状及体征" :required="true"></RedDot>
			</text>

			<u--textarea border="none" style="margin: 32rpx 0 72rpx 0; padding: 0;" v-model="formData.symptom"
				placeholder="请输入" autoHeight></u--textarea>

			<text class="u-cell-text">
				症状体征照片
			</text>

			<upImage :img="imgOne" @addImg="addImg"></upImage>
		</view>

		<!-- 处理措施 -->
		<view class="symptom">
			<view v-for="item in formData.disposeRecords">
				<RedDot text="处理措施" :required="true"></RedDot>
				<u--textarea border="none" style="margin: 32rpx 0 72rpx 0; padding: 0;" v-model="item.text"
					placeholder="请输入" autoHeight></u--textarea>
			</view>

			<text class="u-cell-text">
				应急处置后照片
			</text>

			<upImage :img="imgTwo" @addImg="addImg1"></upImage>
		</view>

		<!-- 备注 -->
		<!-- <view class="remarks"> -->
		<!-- 备注 -->
		<!-- <u-icon name="edit-pen" color="#8C8C8C" size="49rpx"></u-icon> -->
		<!-- 功能不明确 -->
		<!-- </view> -->

		<view class="symptom">
			<!-- <RedDot text="备注"></RedDot> -->
			<text class="u-cell-text">
				备注
			</text>
			<u--textarea border="none" style="margin: 32rpx 0 72rpx 0; padding: 0;" v-model="formData.remark"
				placeholder="请输入" autoHeight></u--textarea>
		</view>

		<!-- 结论多选 -->
		<view class="choice">
			<template>
				<u-checkbox-group v-model="checkboxValue1" placement="row" class="radio">
					<u-checkbox :customStyle="{marginBottom: '8px'}" shape="square" activeColor="#6241D5" label="需要观察"
						name="需要观察">
					</u-checkbox>

					<u-checkbox :customStyle="{marginBottom: '8px'}" shape="square" activeColor="#6241D5" label="通知家长"
						name="通知家长">
					</u-checkbox>
				</u-checkbox-group>
			</template>
		</view>

		<!-- 提交按钮 -->
		<view class="submit">
			<u-button shape="circle" type="primary" text="提交" color="#7B5DF0" style="width: 550rpx;" @click="add">
			</u-button>
		</view>

	</view>

</template>

<script>
	import RedDot from '../../conponents/red-dot.vue'
	import upImage from '../../conponents/upload/upImage.vue'

	export default {
		components: {
			RedDot,
			upImage,
		},
		data() {
			return {
				show: false,
				nameShow: false,
				
				type: '', // 是否编辑

				formData: {
					symptom: "", // 症状文本
					disposeRecords: [{
						text: '',
						studentId: '',
					}], // 处理措施
					remark: '', // 备注
					isWatch: 0, // 是否需要观察
					isNoticeParent: 1, // 是否通知家长
					sex: '自动生成',
				},
				checkboxValue1: ['通知家长'],

				id: '',
				detailsData: '',

				classData: [], // 班级列表
				nameData: [], // 姓名列表

				radiolist1: [{
						name: '需要观察',
						disabled: false
					},
					{
						name: '通知家长',
						disabled: true
					}
				],

				classCheck: {
					label: ''
				}, // 选中班级
				nameCheck: {
					label: ''
				}, // 选中姓名

				imgOne: [],
				imgTwo: [],
				emergencyImgs: [], // 应急处置照片
				symptomImgs: [], // 症状体征照片

				key: '', // 学生姓名
				setTime: null,
				nameDataTwo: [], // 临时存储学生信息
			}
		},

		onLoad(e) {
			console.log(e)
			if (e.type == 2) {
				this.type = 2
				uni.setNavigationBarTitle({
					title: '编辑'
				})

				this.id = e.id
				this.getData()
			}
			if (e.idt) {
				this.getBasics(e.idt)
			}

			this.getClass(e.id)
		},

		methods: {
			choiceUser(e) {
				if (e.value[0] != undefined) {
					this.show = false;
					this.classCheck = e.value[0];
				}
			},

			choiceName(e) {
				if (e.value[0] != undefined) {
					this.nameShow = false;
					this.nameCheck = e.value[0];
					for (let item of this.formData.disposeRecords) {
						item.studentId = e.value[0].value;
					}
					this.formData.sex = e.value[0].sex
				}
			},

			// 编辑时调用获取学生信息
			getData() {
				this.$request({
					url: this.$api.index.emergencyDetail,
					data: {
						id: this.id,
					},
				}).then(res => {
					for (let item of res.data.detail.disposeRecords) {
						item.createTime = item.createTime.replace('T', ' ')
					}
					this.formData = res.data.detail

					this.classCheck = {
						label: this.formData.className,
						value: this.formData.classId,
					}

					this.nameCheck = {
						label: this.formData.name,
						value: this.formData.studentId,
					}

					// emergencyImgs, // 应急处置照片
					// symptomImgs, // 症状体征照片

					this.symptomImgs = this.formData.symptomImgs.split(',')
					this.emergencyImgs = this.formData.emergencyImgs.split(',')

					let arr = this.formData.symptomImgs.split(',')
					let arr1 = this.formData.emergencyImgs.split(',')


					// console.log(this.formData)
					if (this.formData.symptomImgs != '') {
						for (let item of arr) {
							this.imgOne.push({
								url: item
							})
						}
					}

					if (this.formData.emergencyImgs != '') {
						for (let item of arr1) {
							this.imgTwo.push({
								url: item
							})
						}
					}

					this.checkboxValue1 = []

					this.formData.isWatch ? this.checkboxValue1.push('需要观察') : ''
					this.formData.isNoticeParent ? this.checkboxValue1.push('通知家长') : ''

				})
			},

			// 人脸识别成功获取基础信息
			getBasics(id) {
				this.$request({
					url: this.$api.addHandle.student,
					data: {
						id: id,
					},
				}).then(res => {
					console.log(res)
					this.getClass(res.data.classId)
					this.classCheck.label = res.data.className
					this.nameCheck.label = res.data.name
					this.formData.sex = res.data.sex

					for (let item of this.formData.disposeRecords) {
						item.studentId = res.data.studentId
					}
				})
			},

			// 获取班级信息
			getClass(id) {
				this.$request({
					url: this.$api.addHandle.getClassSelectVos,
					data: {
						id: id,
					},
				}).then(res => {
					this.classData = []
					this.classData.push(res.data)
				})
			},

			nameshow() {
				if (this.classCheck.label == "") {
					this.$u.toast('请先选择班级')
				} else {
					this.getName()
					this.nameShow = true
				}
				// this.nameShow = true
			},

			// 请求姓名信息
			getName() {
				this.$request({
					url: this.$api.addHandle.getNameSelectVos,
					data: {
						classId: this.classCheck.value,
					},
				}).then(res => {
					this.nameData = []
					this.nameData.push(res.data)
					this.nameDataTwo.push(res.data)
				})
			},

			// 学生搜索框
			serName() {
				// 防抖
				this.nameData = this.nameDataTwo
				if (this.setTime !== null) {
					clearTimeout(this.setTime);
				}
				this.setTime = setTimeout(() => {
					// if (this.key == '') {
					// 	this.nameData = this.nameDataTwo
					// 	return
					// }
					let arr = []
					for (let item of this.nameData[0]) {
						if (item.label.search(this.key) == 0) {
							arr.push(item)
						}
					}
					this.nameData = [arr]
				}, 1000)

			},

			// 关闭遮罩层
			close() {
				this.key = '';
				this.show = false
				this.nameShow = false
				this.nameData = this.nameDataTwo
			},

			addImg(img) {
				console.log('img', img)
			},

			// 提交
			add() {
				console.log(this.checkboxValue1)
				if (this.classCheck.label == '') {
					this.$u.toast('未选择班级')
					return
				} else if (this.nameCheck.label == '') {
					this.$u.toast('未选择学生')
					return
				} else if (this.formData.symptom == '') {
					this.$u.toast('症状体征未填写')
					return
				} else if (this.formData.disposeRecords[0].text == '') {
					this.$u.toast('处理措施未填写')
					return
				} 
				// else if (this.formData.remark == '') {
				// 	this.$u.toast('备注未填写')
				// 	return
				// }

				this.checkboxValue1.indexOf("需要观察") != -1 ? this.formData.isWatch = 1 : this.formData.isWatch = 0
				this.checkboxValue1.indexOf("通知家长") != -1 ? this.formData.isNoticeParent = 1 : this.formData
					.isNoticeParent = 0

				for (let item of this.formData.disposeRecords) {
					item.disposeText = item.text
				}

				let add = []
				for (let item of this.formData.disposeRecords) {
					add.push({
						disposeText: item.disposeText,
						studentId: item.studentId,
						text: item.text,
						id: item.id
					})
				}

				this.formData.disposeRecords = add

				var arr = {
					...this.formData,
					className: this.classCheck.label,
					classId: this.classCheck.value,
					name: this.nameCheck.label,
					studentId: this.nameCheck.value,
					emergencyImgs: this.emergencyImgs.join(','), // 应急处置照片
					symptomImgs: this.symptomImgs.join(','), // 症状体征照片
					id: this.id,
				}
				console.log(arr, this.id)

				if (this.id) {
					// 判断是否编辑
					console.log('编辑')
					this.$request({
						url: this.$api.index.modifyAppEmergency,
						data: arr,
						header: {
							contentType: "application/json"
						},
						method: 'POST',
					}).then(res => {
						console.log(res)
						if (res.code == 200) {
							this.$u.toast('编辑成功')
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								});
							}, 2000)
						}
					})
				} else {
					console.log('新增')
					arr.disposeText = this.formData.disposeRecords[0].text,
						this.$request({
							url: this.$api.index.addAppEmergency,
							data: arr,
							header: {
								contentType: "application/json"
							},
							method: 'POST',
						}).then(res => {
							console.log(res)
							if (res.code == 200) {
								this.$u.toast('添加成功')
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/index/index'
									});
								}, 2000)
							}
						}).catch(err => {
							this.$u.toast(err.msg)
						})
				}

			},

			addImg(img) {
				// 症状体征图片
				let arr = []
				this.symptomImgs = []
				for (let item of img) {
					arr.push(item.url)
				}
				this.symptomImgs = arr
				console.log(img)
			},

			addImg1(img) {
				// 应急处置图片
				let arr = []
				this.emergencyImgs = []
				for (let item of img) {
					arr.push(item.url)
				}
				this.emergencyImgs = arr
				console.log(img)
			},

		}
	}
</script>

<style lang="scss" scoped>
	page {
		/* background-color: #D9D9D9; */
		background-color: #F5F5F5 !important;
	}

	.inp {
		height: 72rpx;
		border: 2rpx solid #D9D9D9;
		border-radius: 50px;
		box-sizing: border-box;
		padding-left: 60rpx;
	}

	.inp-img {
		position: absolute;
		top: 10rpx;
		left: 10rpx;
	}

	.u-cell {
		background-color: #fff;
		height: 112rpx;
		line-height: 73rpx;
	}

	.u-cell-text {
		font-size: 32rpx;
	}

	.u-cell-text image {
		width: 10rpx;
		height: 28rpx;
		margin-left: 15rpx;
	}

	.symptom {
		margin-top: 20rpx;
		padding: 32rpx 32rpx;
		box-sizing: border-box;
		background-color: #fff;
	}

	.upImage {
		width: 160rpx;
		height: 160rpx;
		border-radius: 16rpx;
		border: 2rpx solid #d9d9d9;
		display: flex;
		justify-content: center;
	}

	.remarks {
		height: 80rpx;
		margin-top: 20rpx;
		font-size: 32rpx;
		color: rgba(0, 0, 0, 0.60);
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.choice {
		height: 178rpx;
		background-color: #fff;
		margin-top: 20rpx;
		padding-top: 36rpx;
		box-sizing: border-box;
	}

	.radio {
		display: flex;
		justify-content: space-evenly;
	}

	.submit {
		height: 240rpx;
		padding-top: 49rpx;
		box-sizing: border-box;
	}

	.cell-right {
		padding-right: 50rpx;
		background-image: url(@/static/chevron_right.svg);
		background-repeat: no-repeat;
		background-position: 100% 12px;
		color: rgba(0, 0, 0, 0.30);
	}
</style>