You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
223 lines
6.8 KiB
223 lines
6.8 KiB
<template> |
|
<Dialog v-model="dialogVisible" :title="dialogTitle"> |
|
<el-form |
|
ref="formRef" |
|
v-loading="formLoading" |
|
:model="formData" |
|
:rules="formRules" |
|
label-width="80px" |
|
> |
|
<el-row> |
|
<el-col :span="12"> |
|
<el-form-item label="用户昵称" prop="nickname"> |
|
<el-input v-model="formData.nickname" placeholder="请输入用户昵称" /> |
|
</el-form-item> |
|
<el-form-item label="真实姓名" prop="realName"> |
|
<el-input v-model="formData.realName" placeholder="请输入真实姓名" /> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="12"> |
|
<el-form-item label="归属部门" prop="deptId"> |
|
<el-tree-select |
|
v-model="formData.deptId" |
|
:data="deptList" |
|
:props="defaultProps" |
|
check-strictly |
|
node-key="id" |
|
placeholder="请选择归属部门" |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
<el-row> |
|
<el-col :span="12"> |
|
<el-form-item label="手机号码" prop="mobile"> |
|
<el-input v-model="formData.mobile" maxlength="11" placeholder="请输入手机号码" /> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="12"> |
|
<el-form-item label="邮箱" prop="email"> |
|
<el-input v-model="formData.email" maxlength="50" placeholder="请输入邮箱" /> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
<el-row> |
|
<el-col :span="12"> |
|
<el-form-item v-if="formData.id === undefined" label="用户名称" prop="username"> |
|
<el-input v-model="formData.username" placeholder="请输入用户名称" /> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="12"> |
|
<el-form-item v-if="formData.id === undefined" label="用户密码" prop="password"> |
|
<el-input |
|
v-model="formData.password" |
|
placeholder="请输入用户密码" |
|
show-password |
|
type="password" |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
<el-row> |
|
<el-col :span="12"> |
|
<el-form-item label="用户性别"> |
|
<el-select v-model="formData.sex" placeholder="请选择"> |
|
<el-option |
|
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)" |
|
:key="dict.value" |
|
:label="dict.label" |
|
:value="dict.value" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="12"> |
|
<el-form-item label="岗位"> |
|
<el-select v-model="formData.postIds" multiple placeholder="请选择"> |
|
<el-option |
|
v-for="item in postList" |
|
:key="item.id" |
|
:label="item.name" |
|
:value="item.id!" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
<el-row> |
|
<el-col :span="24"> |
|
<el-form-item label="备注"> |
|
<el-input v-model="formData.remark" placeholder="请输入内容" type="textarea" /> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
</el-form> |
|
<template #footer> |
|
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button> |
|
<el-button @click="dialogVisible = false">取 消</el-button> |
|
</template> |
|
</Dialog> |
|
</template> |
|
<script lang="ts" setup> |
|
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' |
|
import { CommonStatusEnum } from '@/utils/constants' |
|
import { defaultProps, handleTree } from '@/utils/tree' |
|
import * as PostApi from '@/api/system/post' |
|
import * as DeptApi from '@/api/system/dept' |
|
import * as UserApi from '@/api/system/user' |
|
import { FormRules } from 'element-plus' |
|
|
|
defineOptions({ name: 'SystemUserForm' }) |
|
|
|
const { t } = useI18n() // 国际化 |
|
const message = useMessage() // 消息弹窗 |
|
|
|
const dialogVisible = ref(false) // 弹窗的是否展示 |
|
const dialogTitle = ref('') // 弹窗的标题 |
|
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 |
|
const formType = ref('') // 表单的类型：create - 新增；update - 修改 |
|
const formData = ref({ |
|
nickname: '', |
|
realName: '', |
|
deptId: '', |
|
mobile: '', |
|
email: '', |
|
id: undefined, |
|
username: '', |
|
password: '', |
|
sex: undefined, |
|
postIds: [], |
|
remark: '', |
|
status: CommonStatusEnum.ENABLE, |
|
roleIds: [] |
|
}) |
|
const formRules = reactive<FormRules>({ |
|
username: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }], |
|
nickname: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }], |
|
password: [{ required: true, message: '用户密码不能为空', trigger: 'blur' }], |
|
email: [ |
|
{ |
|
type: 'email', |
|
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}$/, |
|
message: '请输入正确的手机号码', |
|
trigger: 'blur' |
|
} |
|
] |
|
}) |
|
const formRef = ref() // 表单 Ref |
|
const deptList = ref<Tree[]>([]) // 树形结构 |
|
const postList = ref([] as PostApi.PostVO[]) // 岗位列表 |
|
|
|
/** 打开弹窗 */ |
|
const open = async (type: string, id?: number) => { |
|
dialogVisible.value = true |
|
dialogTitle.value = t('action.' + type) |
|
formType.value = type |
|
resetForm() |
|
// 修改时，设置数据 |
|
if (id) { |
|
formLoading.value = true |
|
try { |
|
formData.value = await UserApi.getUser(id) |
|
} finally { |
|
formLoading.value = false |
|
} |
|
} |
|
// 加载部门树 |
|
deptList.value = handleTree(await DeptApi.getSimpleDeptList()) |
|
// 加载岗位列表 |
|
postList.value = await PostApi.getSimplePostList() |
|
} |
|
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
|
|
|
/** 提交表单 */ |
|
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 |
|
const submitForm = async () => { |
|
// 校验表单 |
|
if (!formRef) return |
|
const valid = await formRef.value.validate() |
|
if (!valid) return |
|
// 提交请求 |
|
formLoading.value = true |
|
try { |
|
const data = formData.value as unknown as UserApi.UserVO |
|
if (formType.value === 'create') { |
|
await UserApi.createUser(data) |
|
message.success(t('common.createSuccess')) |
|
} else { |
|
await UserApi.updateUser(data) |
|
message.success(t('common.updateSuccess')) |
|
} |
|
dialogVisible.value = false |
|
// 发送操作成功的事件 |
|
emit('success') |
|
} finally { |
|
formLoading.value = false |
|
} |
|
} |
|
|
|
/** 重置表单 */ |
|
const resetForm = () => { |
|
formData.value = { |
|
nickname: '', |
|
deptId: '', |
|
mobile: '', |
|
email: '', |
|
id: undefined, |
|
username: '', |
|
password: '', |
|
sex: undefined, |
|
postIds: [], |
|
remark: '', |
|
status: CommonStatusEnum.ENABLE, |
|
roleIds: [] |
|
} |
|
formRef.value?.resetFields() |
|
} |
|
</script>
|
|
|