uniapp-dp/dp-workshop-manage/pages/user/add.vue

<template>
	<view style="padding: 20rpx;">
		<view style="padding: 30rpx;background-color: white;border-radius:50rpx">
			<u--form labelPosition="left" :model="userInfo" ref="uForm" labelWidth='120'>
				<u-form-item label="用户账号:" prop="account" borderBottom ref="uItem" :required="true">
					<u--input v-model="userInfo.account" clearable border="none" placeholder="请输入用户账号"></u--input>
				</u-form-item>
				<u-form-item label="用户密码:" prop="password" borderBottom ref="uItem" :required="true">
					<u--input v-model="userInfo.password" clearable password border="none" placeholder="请输入用户密码">
					</u--input>
				</u-form-item>
				<u-form-item label="用户名称:" prop="name" borderBottom ref="uItem" :required="true">
					<u--input v-model="userInfo.name" border="none" placeholder="请输入用户名称"></u--input>
				</u-form-item>
				<u-form-item label="联系电话:" prop="phone" borderBottom ref="uItem">
					<u-input v-model="userInfo.phone" border="none" placeholder="请输入联系电话"></u-input>
				</u-form-item>
				<u-form-item label="是否管理员:" prop="adminType" borderBottom ref="uItem">
					<u-switch v-model="userInfo.adminType"></u-switch>
				</u-form-item>
				<u-tag text="默认密码:123456" style="margin-left:auto;width: 40%;"></u-tag>
				<u-button type="primary" text="提交" customStyle="margin-top: 50px" @click="submit"></u-button>
				<u-button type="error" text="重置" customStyle="margin-top: 10px" @click="reset"></u-button>
			</u--form>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		add,
		checkUserAccountExist
	} from '@/api/system/user.js'
	export default {
		data() {
			return {
				userInfo: {
					account: null,
					password: '123456',
					name: null,
					phone: null,
					adminType: false
				},
				rules: {
					'account': [{
						type: 'string',
						required: true,
						message: '请填写用户账号',
						trigger: ['blur', 'change']
					}, {
						asyncValidator: (rule, value, callback) => {
							checkUserAccountExist(value).then(res => {
								if (res.success && res.data) {
									// 如果校验通过，也要执行callback()回调
									callback();
								} else {
									// 如果验证不通过，需要在callback()抛出new Error('错误提示信息')
									callback(true);
								}
							})
						},
						message: '用户名已存在',
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ["blur"],
					}],
					'password': {
						type: 'string',
						required: true,
						message: '请填写用户密码',
						trigger: ['blur', 'change']
					},
					'name': {
						type: 'string',
						required: true,
						message: '请填写用户名称',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(val => {
					add(this.userInfo).then(res => {
						if (res.success) {
							this.$refs.uToast.show({
								type: 'success',
								message: "新增成功",
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
							})
							this.reset()
						} else {
							this.$refs.uToast.show({
								type: 'error',
								message: res.message,
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
							})
						}
					})
				}).catch(errors => {
					console.log(errors)
					this.$refs.uToast.show({
						type: 'error',
						message: "校验失败",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
					})
				})
			},
			reset() {
				this.userInfo = {
					account: null,
					password: '123456',
					name: null,
					phone: null,
					adminType: false
				}
				const validateList = ['userInfo.account', 'userInfo.name']
				setTimeout(() => {
					this.$refs.uForm.clearValidate()
				}, 100)
			},
			checkUserAccount(value) {
				checkUserAccountExist(value).then(res => {
					if (res.success) {
						return res.data
					}
				})
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		}
	}
</script>

<style>
</style>