123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214 |
- <template>
- <Dialog v-model="dialogVisible" :title="dialogTitle">
- <el-form
- ref="formRef"
- v-loading="formLoading"
- :model="formData"
- :rules="formRules"
- label-width="85px"
- >
- <el-row>
- <el-col :span="12">
- <el-form-item label="姓名" prop="nickname">
- <el-input disabled v-model="formData.nickname" placeholder="请输入姓名" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="工作间" prop="dept">
- <el-input disabled v-model="formData.dept"/>
- <!-- <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 label="用户类型" prop="userType">
- <el-select v-model="formData.userType" placeholder="请选择用户类型" disabled="true">
- <el-option
- v-for="option in userTypes"
- :key="option.value"
- :label="option.label"
- :value="option.value"
- />
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="学号" prop="userNumber">
- <el-input disabled v-model="formData.userNumber" placeholder="请输入工号" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="24">
- <el-form-item label="简介" prop="remark">
- <Editor v-model="formData.remark" ref="editorRef"/>
- </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 DeptApi from '@/api/system/dept'
- import * as PostApi from '@/api/system/post'
- import { FormRules } from 'element-plus'
- import {
- getUserProfile,
- updateUserProfile,
- UserProfileUpdateReqVO
- } from '@/api/system/user/profile'
- defineOptions({ name: 'SystemUserForm' })
- const props = defineProps({
- form: Object,
- });
- const { t } = useI18n() // 国际化
- const message = useMessage() // 消息弹窗
- const userTypeSt = ref('1')
- const dialogVisible = ref(false) // 弹窗的是否展示
- const dialogTitle = ref('') // 弹窗的标题
- const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
- const formData = ref({
- mobile: '',
- email: '',
- nickname: '',
- password: '',
- sex: undefined,
- // remark: '',
- userType: undefined,
- userNumber: '',
- dept: undefined,
- deptId: undefined,
- })
- const formRules = reactive<FormRules>({
- username: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
- nickname: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
- email: [
- { required: true, message: '邮箱不能为空', trigger: 'blur' }, // 确保这是必填
- {
- type: 'email',
- message: '请输入正确的邮箱地址',
- trigger: ['blur', 'change']
- }
- ],
- mobile: [
- { required: true, message: '手机号码不能为空', trigger: 'blur' },
- {
- 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'
- }
- ],
- userNumber: [{ required: true, message: '学号不能为空', trigger: 'blur' }],
- userType: [{ required: true, message: '用户类型不能为空', trigger: 'blur' }],
- })
- const formRef = ref() // 表单 Ref
- const deptList = ref<Tree[]>([]) // 树形结构
- const postList = ref([] as PostApi.PostVO[]) // 岗位列表
- //用户类型
- const userTypes = [
- { value: '1', label: '学生' },
- ]
- /** 打开弹窗 */
- const open = async (id?: number) => {
- dialogVisible.value = true
- resetForm()
- // 修改时,设置数据
- if (id) {
- formLoading.value = true
- try {
- const data = await getUserProfile()
- console.log(data,'打开弹窗数据');
- formData.value = {
- ...data,
- deptId: data.dept.id,
- dept: data.dept.name
- }
- }
- catch (error) {
- console.error('获取用户资料失败:', error); // 添加错误日志
- }finally {
- formLoading.value = false
- }
- }
- formData.value = {
- ...props.form,
- deptId: props.form.dept ? props.form.dept.id : undefined,
- dept: props.form.dept ? props.form.dept.name : ''
- };
- }
- defineExpose({ open }) // 提供 open 方法,用于打开弹窗
- /** 提交表单 */
- const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
- const submitForm = async () => {
- // 校验表单
- console.log(formData.value,'提交的表单');
- if (!formRef) return
- const valid = await formRef.value.validate()
- if (!valid) return
- // 提交请求
- formLoading.value = true
- try {
- const data = formData.value as unknown as UserProfileUpdateReqVO
- await updateUserProfile(data)
- dialogVisible.value = false
- // 发送操作成功的事件
- emit('success')
- } finally {
- formLoading.value = false
- }
- }
- /** 重置表单 */
- const resetForm = () => {
- formData.value = {
- mobile: '',
- email: '',
- nickname: '',
- password: '',
- sex: undefined,
- // remark: '',
- userType: undefined,
- userNumber: '',
- dept: undefined,
- deptId: undefined,
- }
- formRef.value?.resetFields()
- }
- </script>
|