hospital-accompaniment-wechat/pages/mine/patient/form.vue

<template>
	<view class="container">
		<view class="form-box">
			<u--form labelWidth="80rpx" :model="formData" :rules="rules" ref="uForm">
				<u-form-item label="姓名" prop="name" borderBottom required>
					<u--input v-model="formData.name" placeholder-class="input-placeholder" border="none"
						placeholder="必填，请输入证件上的姓名" :disabled="type == 'view'" maxlength="10" inputAlign="right"></u--input>
				</u-form-item>
				<u-form-item label="电话" prop="mobile" borderBottom required>
					<u--input v-model="formData.mobile" placeholder-class="input-placeholder" border="none" clearable
						placeholder="必填，请输入手机号码" maxlength="11" :disabled="type == 'view'" inputAlign="right"></u--input>
				</u-form-item>

				<u-form-item label="性别" prop="gender" borderBottom  @click="showSex = true">
					<u-input :border="none" disabled v-model="formData.genderName" disabledColor="#ffffff"
						placeholder="请选择" inputAlign="right" />
					<u-icon slot="right" name="arrow-right" color="#999999"></u-icon>
				</u-form-item>
				<u-form-item label="年龄" prop="age" borderBottom >
					<u--input v-model="formData.age" placeholder-class="input-placeholder" border="none" clearable
						placeholder="请输入年龄" :disabled="type == 'view'" inputAlign="right"></u--input>
				</u-form-item>
				<u-form-item label="关系" prop="relationship" borderBottom  @click="showShip = true">
					<u-input :border="none" disabled v-model="formData.relationshipName" disabledColor="#ffffff"
						placeholder="请选择" inputAlign="right" />
					<u-icon slot="right" name="arrow-right" color="#999999"></u-icon>
				</u-form-item>

			</u--form>
		</view>
		<u-action-sheet :show="showSex" :actions="sexList" title="请选择性别" @close="showSex = false" @select="sexSelect"
			safeAreaInsetBottom>
		</u-action-sheet>
		<u-action-sheet :show="showShip" :actions="relationshipList" title="请选择关系" @close="showShip = false"
			@select="shipSelect" safeAreaInsetBottom>
		</u-action-sheet>
		<!-- 底部按钮 -->
		<view class="footer-box" v-if="type != 'view'">
			<view class="btn-box">
				<view class="submit-btn" @click="submitForm">保存</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		dictData
	} from "@/api/home.js"
	import {
		addPatient,
		editPatient,
		getPatientDetail
	} from "@/api/user.js"
	export default {
		components: {},
		data() {
			return {
				showSex: false,
				sexList: [{
						name: '未知',
						value: 0
					},
					{
						name: '男',
						value: 1
					},
					{
						name: '女',
						value: 2
					},
				],
				showShip: false,
				relationshipList: [],

				formData: {
					name: '',
					mobile: '',
					gender: '',
					age: '',
					relationship: '',
				},
				isDefault: [],
				selectData: [],
				rules: {
					name: [{
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change'],
					}, ],
					mobile: [{
						required: true,
						message: '请填写电话',
						trigger: ['blur', 'change'],
					}, {
						pattern: /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
						message: '请输入正确的电话',
						trigger: 'blur',
					}],
					gender: [{
						required: true,
						message: '请选择性别',
						type: 'number',
						trigger: ['blur', 'change'],
					}, ],
					age: [{
						required: true,
						message: '请填写年龄,必须为数字',
						type: 'number',
						trigger: ['blur', 'change'],
					}, ],
					relationship: [{
						required: true,
						message: '请填写关系',
						trigger: ['blur', 'change'],
					}, ],
				},
				type: 'add',
				InfoId: '',
				isRegionUser: false,
				regionName: '',
				listData: [],
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(option) {
			if (option.id) {
				//编辑
				console.log("option", option);
				this.type = option.type || 'add';
				this.InfoId = option.id || '';
				this.getInfo();
			} else if (option.type == 'view') {
				//查看
				this.type = option.type;
				this.formData = JSON.parse(option.item)
			} else {
				//新增
				this.getSexList()
				this.getRelationshipList()
			}

		},

		methods: {
			//获取性别字典
			getSexList() {
				let that = this;
				dictData('sys_user_sex').then(res => {
					let data = res.data;
					data.forEach(item => {
						item.name = item.dictLabel
					})
					that.sexList = data;
					if (that.InfoId) {
						that.formData.genderName = that.sexList.find(item => item.dictValue == that.formData
							.gender).name
					}
				}, err => {
					console.log(err);
				}).finally(() => {

				});
			},
			//获取关系字典
			getRelationshipList() {
				let that = this;
				dictData('patient_relationship').then(res => {
					let data = res.data;
					data.forEach(item => {
						item.name = item.dictLabel
					})
					this.relationshipList = data;
					if (that.InfoId) {
						this.formData.relationshipName = this.relationshipList.find(item => item.dictValue == this
							.formData.relationship).name
					}
				}, err => {
					console.log(err);
				}).finally(() => {

				});
			},
			sexSelect(e) {
				this.formData.gender = e.dictValue
				this.formData.genderName = e.name
				this.$refs.uForm.validateField('gender')
			},
			shipSelect(e) {
				this.formData.relationship = e.dictValue
				this.formData.relationshipName = e.name
				this.$refs.uForm.validateField('relationship')
			},
			// 显示选择器
			showPicker() {
				if (this.type == 'view') return
				this.$refs.treePicker._show();
			},
			//监听选择（ids为数组）
			selectChange(ids, names) {
				console.log(ids, names)
				this.formData.deliveryAreaId = ids[2]
				this.formData.deliveryCityId = ids[1]
				this.formData.deliveryProvinceId = ids[0]
				this.formData.regionName = names[0] + '/' + names[1] + '/' + names[2]
			},

			handleSelect(e) {
				console.log("e", e);
				// this.formData.defaultStatus = 
				if (e[0] == 1) {
					this.formData.defaultStatus = 1
				} else {

					this.formData.defaultStatus = 0
				}
			},
			submitForm() {
				console.log("formData", this.formData);
				this.$refs.uForm.validate().then((res) => {
						if (res) {
							if (this.type == 'add') {
								addPatient(this.formData).then(res => {
									uni.$u.toast('新增成功');
									setTimeout(() => {
										uni.navigateBack({
											delta: 1,
										});
									}, 1000)
								}, err => {
									console.log(err);
								}).finally(() => {

								});

							} else {
								editPatient(this.formData).then(res => {
									uni.$u.toast('修改成功');
									setTimeout(() => {
										uni.$emit('returnAddress', this.formData);
										uni.navigateBack({
											delta: 1,
										});
									}, 1000)
								}, err => {
									console.log(err);
								}).finally(() => {

								});

							}

						}
					})
					.catch((errors) => {
						console.log(",errors", errors);
						uni.$u.toast('校验失败');
					});
			},

			getInfo() {
				let that = this;
				getPatientDetail(that.InfoId).then((res) => {
						let data = res.data;
						that.formData = data;
						this.getSexList()
						this.getRelationshipList()
					})
					.catch((err) => {
						console.log(err);
					})

			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		background-color: #fff;

		.form-box {
			margin: 20rpx;
			padding: 20rpx;
		}

		.region-info {
			display: flex;
			align-items: center;
		}

		.region-txt {
			height: 72rpx;
			line-height: 1;
			width: 500rpx;
			padding: 22rpx 18rpx;
			border: 1rpx solid #dadbde;
			box-sizing: border-box;
			border-radius: 8rpx;
		}

		.region-btn {
			margin-left: 10rpx;
			padding: 18rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			background-color: #026EB7;
			color: #fff;
		}

		.footer-box {
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: 35rpx 30rpx 50rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			background-color: #fff;
			box-shadow: 0 -2rpx 30rpx #c5c5c53a;

			.btn-box {
				width: 100%;

				.submit-btn {
					display: block;
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					color: #fff;
					background-color: #026EB7;
					border-radius: 50rpx;
				}
			}
		}
	}

	::v-deep .input-placeholder {
		font-size: 26rpx;
	}
</style>