rax-medical/src/views/permissions-manage/form/doctor-form.vue

<template>
	<el-form ref="formRef" :model="formData" :rules="rules" label-width="80">
		<el-row>
			<el-col :span="12">
				<el-form-item label="用户名" prop="username">
					<el-input v-model="formData.username" placeholder="请输入用户名"
										:disabled="type === 'edit'"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="姓名" prop="name">
					<el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="12">
				<el-form-item label="角色" prop="role">
					<el-select v-model="formData.role" placeholder="请选择角色" multiple>
						<el-option v-for="item in roleOption" :key="item.roleId" :label="item.roleName"
											 :value="item.roleId"/>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="formData.email" placeholder="请输入邮箱"></el-input>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="12">
				<el-form-item label="电话" prop="phone">
					<el-input v-model="formData.phone" placeholder="请输入电话"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12" v-if="type != 'edit'">
				<el-form-item label="锁定" prop="lockFlag">
					<el-radio-group v-model="formData.lockFlag">
						<el-radio :label="'0'" border>解锁</el-radio>
						<el-radio :label="'1'" border>锁定</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row v-if="type != 'edit'">
			<el-col :span="12">
				<el-form-item label="密码" prop="password">
					<el-input v-model="formData.password" placeholder="请输入密码"
										:disabled="type === 'edit'"></el-input>
				</el-form-item>
			</el-col>
		</el-row>

		<div style="text-align: right;padding-top: 80px;">
			<el-button class="f18" @click="close">取消</el-button>
			<el-button class="f18" type="primary" @click="saveData">确认</el-button>
		</div>
	</el-form>
</template>

<script lang='ts' setup>
import {onMounted, reactive, ref, toRefs, watch} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {getRoleList} from "@/api/role";
import {addUser, updateUI} from "@/api/user";

const emit = defineEmits(['close', 'save'])

const props = defineProps({
	type: String
})

const roleOption = ref<any>([])

const validatorPhone = (rule: any, value: any, callback: any) => {
	var isPhone = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;


	if (value.indexOf('****') >= 0) {
		return callback().trim();
	}
	if (!isPhone.test(value)) {
		callback(new Error('请输入合法手机号'));
	} else {
		callback();
	}

}

const rules = reactive({
	username: [
		{required: true, message: '请输入用户名', trigger: ['blur', 'change']},
	],
	name: [
		{required: true, message: '请输入姓名', trigger: ['blur', 'change']},
	],
	role: [
		{required: true, message: '请选择角色', trigger: ['blur', 'change']},
	],
	phone: [
		{required: true, validator: validatorPhone, trigger: ['blur', 'change']},
	],
	password: [
		{required: true, message: '请输入密码', trigger: ['blur', 'change']},
	]
})

const formRef = ref()
const formData = ref({
	id: '',
	username: '',
	name: '',
	role: [],
	email: '',
	phone: '',
	password: '',
	lockFlag: '0',
} as any)

onMounted(() => {
	resetData()
})

getRoleList().then((res: any) => {
	if (res && res.code == 0) {
		roleOption.value = res.data
	} else {
		ElMessage.error('角色列表获取失败')
	}
})

defineExpose({
	formData,
	resetData,
})

function close() {
	emit('close')
}

function resetData() {
	getRoleList()
	formRef.value.resetFields()
	formData.value = {
		id: '',
		username: '',
		name: '',
		role: [],
		email: '',
		phone: '',
		password: '',
		lockFlag: '0',
	}
}

const saveData = async () => {
	await formRef.value.validate((valid: any, fields: any) => {
		if (valid) {
			if (props.type == "add") {
				addUser(formData.value).then((data: any) => {
					if (data.code == 0) {
						ElMessage.success('保存成功！')
						emit('save', formData.value, props.type)
						close()
					} else {
						ElMessage.error("保存失败")
					}
				})
			} else {
				updateUI({
					userId: formData.value.userId,
					username: formData.value.username,
					name: formData.value.name,
					role: formData.value.role,
					email: formData.value.email,
					phone: formData.value.phone
				}).then((data: any) => {
					if (data.code == 0) {
						ElMessage.success('修改成功！')
						emit('save', formData.value, props.type)
						close()
					} else {
						ElMessage.error("修改失败")
					}
				})
			}
		}
	})
}
</script>

<style lang='scss' scoped>
:deep(.el-form-item) {
	.el-form-item__label {
		display: block;
		text-align: justify;
		text-align-last: justify;
		padding: 0 10px 0 20px;

		&:before {
			display: none;
		}
	}
}
</style>