SForm.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. <template>
  2. <Dialog v-model="dialogVisible" :title="dialogTitle">
  3. <el-form
  4. ref="formRef"
  5. v-loading="formLoading"
  6. :model="formData"
  7. :rules="formRules"
  8. label-width="85px"
  9. >
  10. <el-row>
  11. <el-col :span="12">
  12. <el-form-item label="姓名" prop="nickname">
  13. <el-input disabled v-model="formData.nickname" placeholder="请输入姓名" />
  14. </el-form-item>
  15. </el-col>
  16. <el-col :span="12">
  17. <el-form-item label="工作间" prop="dept">
  18. <el-input disabled v-model="formData.dept"/>
  19. <!-- <el-tree-select
  20. v-model="formData.deptId"
  21. :data="deptList"
  22. :props="defaultProps"
  23. check-strictly
  24. node-key="id"
  25. placeholder="请选择归属工作间"
  26. /> -->
  27. </el-form-item>
  28. </el-col>
  29. </el-row>
  30. <el-row>
  31. <el-col :span="12">
  32. <el-form-item label="手机号码" prop="mobile">
  33. <el-input v-model="formData.mobile" maxlength="11" placeholder="请输入手机号码" />
  34. </el-form-item>
  35. </el-col>
  36. <el-col :span="12">
  37. <el-form-item label="邮箱" prop="email">
  38. <el-input v-model="formData.email" maxlength="50" placeholder="请输入邮箱" />
  39. </el-form-item>
  40. </el-col>
  41. </el-row>
  42. <el-row>
  43. <el-col :span="12">
  44. <el-form-item label="用户类型" prop="userType">
  45. <el-select v-model="formData.userType" placeholder="请选择用户类型" disabled="true">
  46. <el-option
  47. v-for="option in userTypes"
  48. :key="option.value"
  49. :label="option.label"
  50. :value="option.value"
  51. />
  52. </el-select>
  53. </el-form-item>
  54. </el-col>
  55. <el-col :span="12">
  56. <el-form-item label="学号" prop="userNumber">
  57. <el-input disabled v-model="formData.userNumber" placeholder="请输入工号" />
  58. </el-form-item>
  59. </el-col>
  60. </el-row>
  61. <el-row>
  62. <el-col :span="24">
  63. <el-form-item label="简介" prop="remark">
  64. <Editor v-model="formData.remark" ref="editorRef"/>
  65. </el-form-item>
  66. </el-col>
  67. </el-row>
  68. </el-form>
  69. <template #footer>
  70. <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
  71. <el-button @click="dialogVisible = false">取 消</el-button>
  72. </template>
  73. </Dialog>
  74. </template>
  75. <script lang="ts" setup>
  76. import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
  77. import { CommonStatusEnum } from '@/utils/constants'
  78. import { defaultProps, handleTree } from '@/utils/tree'
  79. import * as DeptApi from '@/api/system/dept'
  80. import * as PostApi from '@/api/system/post'
  81. import { FormRules } from 'element-plus'
  82. import {
  83. getUserProfile,
  84. updateUserProfile,
  85. UserProfileUpdateReqVO
  86. } from '@/api/system/user/profile'
  87. defineOptions({ name: 'SystemUserForm' })
  88. const props = defineProps({
  89. form: Object,
  90. });
  91. const { t } = useI18n() // 国际化
  92. const message = useMessage() // 消息弹窗
  93. const userTypeSt = ref('1')
  94. const dialogVisible = ref(false) // 弹窗的是否展示
  95. const dialogTitle = ref('') // 弹窗的标题
  96. const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
  97. const formData = ref({
  98. mobile: '',
  99. email: '',
  100. nickname: '',
  101. password: '',
  102. sex: undefined,
  103. // remark: '',
  104. userType: undefined,
  105. userNumber: '',
  106. dept: undefined,
  107. deptId: undefined,
  108. })
  109. const formRules = reactive<FormRules>({
  110. username: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
  111. nickname: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
  112. email: [
  113. { required: true, message: '邮箱不能为空', trigger: 'blur' }, // 确保这是必填
  114. {
  115. type: 'email',
  116. message: '请输入正确的邮箱地址',
  117. trigger: ['blur', 'change']
  118. }
  119. ],
  120. mobile: [
  121. { required: true, message: '手机号码不能为空', trigger: 'blur' },
  122. {
  123. 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}$/,
  124. message: '请输入正确的手机号码',
  125. trigger: 'blur'
  126. }
  127. ],
  128. userNumber: [{ required: true, message: '学号不能为空', trigger: 'blur' }],
  129. userType: [{ required: true, message: '用户类型不能为空', trigger: 'blur' }],
  130. })
  131. const formRef = ref() // 表单 Ref
  132. const deptList = ref<Tree[]>([]) // 树形结构
  133. const postList = ref([] as PostApi.PostVO[]) // 岗位列表
  134. //用户类型
  135. const userTypes = [
  136. { value: '1', label: '学生' },
  137. ]
  138. /** 打开弹窗 */
  139. const open = async (id?: number) => {
  140. dialogVisible.value = true
  141. resetForm()
  142. // 修改时,设置数据
  143. if (id) {
  144. formLoading.value = true
  145. try {
  146. const data = await getUserProfile()
  147. console.log(data,'打开弹窗数据');
  148. formData.value = {
  149. ...data,
  150. deptId: data.dept.id,
  151. dept: data.dept.name
  152. }
  153. }
  154. catch (error) {
  155. console.error('获取用户资料失败:', error); // 添加错误日志
  156. }finally {
  157. formLoading.value = false
  158. }
  159. }
  160. formData.value = {
  161. ...props.form,
  162. deptId: props.form.dept ? props.form.dept.id : undefined,
  163. dept: props.form.dept ? props.form.dept.name : ''
  164. };
  165. }
  166. defineExpose({ open }) // 提供 open 方法,用于打开弹窗
  167. /** 提交表单 */
  168. const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
  169. const submitForm = async () => {
  170. // 校验表单
  171. console.log(formData.value,'提交的表单');
  172. if (!formRef) return
  173. const valid = await formRef.value.validate()
  174. if (!valid) return
  175. // 提交请求
  176. formLoading.value = true
  177. try {
  178. const data = formData.value as unknown as UserProfileUpdateReqVO
  179. await updateUserProfile(data)
  180. dialogVisible.value = false
  181. // 发送操作成功的事件
  182. emit('success')
  183. } finally {
  184. formLoading.value = false
  185. }
  186. }
  187. /** 重置表单 */
  188. const resetForm = () => {
  189. formData.value = {
  190. mobile: '',
  191. email: '',
  192. nickname: '',
  193. password: '',
  194. sex: undefined,
  195. // remark: '',
  196. userType: undefined,
  197. userNumber: '',
  198. dept: undefined,
  199. deptId: undefined,
  200. }
  201. formRef.value?.resetFields()
  202. }
  203. </script>