ybxf-security-uniapp/pagesA/fire/personnel_permissions/editUser/editUser.vue

<template>
	<view class="  uni-container  ">
		<view class="u-demo-block">
			<view class="u-demo-block__content">
				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<u--form label-position="top" :model="user" ref="form1" label-width='100'>
					<u-form-item label-position="top" label="用户昵称" prop="nickname">
						<u--input v-model="user.nickname" border="none" placeholder="请输入用户昵称"></u--input>
					</u-form-item>
					<u-form-item label-position="top" label="手机号码" prop="mobile">
						<u--input v-model="user.mobile" border="none" placeholder="请输入手机号码"></u--input>
					</u-form-item>
					<u-form-item label-position="top" label="邮箱" prop="email">
						<u--input v-model="user.email" border="none" placeholder="请输入邮箱"></u--input>
					</u-form-item>
					<u-form-item label-position="top" label="用户性别" prop="sexname"
						@click="showSex = true; hideKeyboard()">
						<u-input v-model="user.sexname" disabled disabledColor="#ffffff" placeholder="请选择性别"
							border="none"></u-input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label-position="top" label="备注" prop="remark">
						<u--input v-model="user.remark" type="textarea" border="none" placeholder="请输入内容"></u--input>
					</u-form-item>
				</u--form>
				<u-button type="primary" text="提交"
					customStyle="height: 72rpx;width: 340rpx;margin-top: 100rpx;display: flex;align-items: center;justify-content: center;border-radius: 60rpx;background: #4CB2B6;"
					@click="submit"></u-button>
				<!-- description="如果选择保密会报错"  放在u-action-sheet中的 -->
				<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false"
					@select="sexSelect">
				</u-action-sheet>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		updateUser // 修改用户
	} from '@/api/personnel_permissions';
	import {
		DICT_TYPE,
		getDictDatas
	} from "@/utils/dict";
	let that = null;
	export default {
		data() {
			return {
				user: {
					id: undefined,
					deptId: undefined,
					username: undefined,
					nickname: undefined,
					password: undefined,
					mobile: undefined,
					email: undefined,
					sex: undefined,
					status: "0",
					remark: undefined,
				},
				showSex: false,
				actions: getDictDatas(DICT_TYPE.SYSTEM_USER_SEX),
				rules: {
					'username': {
						// type: 'string',
						required: true,
						message: '用户名称不能为空',
						trigger: ['blur']
					},
					'nickname': {
						// type: 'string',
						required: true,
						message: '用户昵称不能为空',
						trigger: ['blur']
					},
					'password': {
						// type: 'string',
						required: true,
						message: '用户密码不能为空',
						trigger: ['blur']
					},
					'sex': {
						// type: 'number',
						required: true,
						message: '请选择男或女',
						trigger: ['change']
					},
					'email': {
						type: 'email',
						// required: true,
						message: "'请输入正确的邮箱地址",
						trigger: ["blur", "change"]
					},
					'mobile': {
						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}$/,
						// type: 'string',
						// required: true,
						message: '请输入正确的手机号码',
						trigger: ['blur']
					},
				},
			}
		},
		onLoad(option) {
			that = this
			let str = decodeURIComponent(option.val)
			this.actions.map(i => i.name = i.label)
			if (str != "undefined") {
				that.user = JSON.parse(str);
				this.user.sexname = this.sexTrans(this.user.sex)
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		methods: {
			sexTrans(val) {
				let eduStr = ''
				this.actions.map(i => {
					if (i.value == val) {
						eduStr = i.name
					}
				})
				return eduStr
			},
			getUser() {
				getUserProfile().then(response => {
					this.user = response.data
					this.user.sexname = this.sexTrans(this.user.sex)
				})
			},
			sexSelect(e) {
				this.user.sexname = e.name
				this.user.sex = e.value
				this.$refs.form1.validateField('userInfo.sex')
			},
			submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form1.validate().then(res => {
					delete this.user.dept
					updateUser(this.user).then(response => {
						this.$modal.msgSuccess('修改成功')
						this.$tab.navigateBack('/pagesA/fire/personnel_permissions/index')
					})
				}).catch(errors => {
					// uni.$u.toast('校验失败')/
				})
			},
			hideKeyboard() {
				uni.hideKeyboard()
			}
		}
	}
</script>
<style lang="scss" scoped>
	.uni-container {
		height: 100%;
		padding: 20px;
		background: #f5f7f9;
	}

	/deep/.u-form-item__body__left__content[data-v-5e7216f1],
	/deep/.u-form-item__body__left__content.data-v-5e7216f1,
	/deep/.u-form-item__body__left__content {
		padding-right: 0;
	}

	page {
		height: 100%;
		background-color: #f5f7f9;
		position: relative;
	}

	/deep/ .u-input[data-v-fdbb9fe6],
	/deep/ .u-input.data-v-fdbb9fe6 {
		background-color: #fff;
		border: 1px solid #E2E4E6;
		height: 100rpx;
	}

	/deep/ .uni-input-wrapper {
		margin-left: 20rpx;
	}

	/deep/ .item__body__right__content__icon {
		position: absolute;
		right: 50rpx;
	}
</style>