格式校验

src/views/registrationGroup/components/stuDialog.vue

@@ -8,6 +8,7 @@
     width="800"
     draggable
     overflow
+    :close-on-click-modal="false"
   >
     <div class="table-box">
       <div class="search">

src/views/registrationGroup/components/stuList.vue

@@ -41,13 +41,7 @@
             <span style="margin-left: 10px">用户</span>
           </template>
           <template #default="{ row }">
-            <el-input
-              :disabled="isDisable"
-              @click="openDialog(row)"
-              v-model="row.realname"
-              placeholder="请选择"
-              :prefix-icon="ClusterOutlined"
-            />
+            <el-input v-model="row.realname" :disabled="isDisable" />
           </template>
         </el-table-column>
         <el-table-column>
@@ -213,7 +207,7 @@ const handleSelected = (row: any = {}) => {
       message: '已有该用户，不能重复选择用户!',
       type: 'error',
     })
-    return
+    tableData.pop(); // 删除最后一个元素
   }
   console.log(row, 'aqq')
   target.value.workNo = row.work_no

src/views/registrationGroup/components/teaDialog.vue

@@ -9,6 +9,7 @@
     width="1000"
     draggable
     overflow
+    :close-on-click-modal="false"
   >
     <div class="table-box">
 
@@ -61,7 +62,7 @@
               $emit('update:modelValue', false)
               $emit(
                 'selected',
-                tableData.find((o) => o.id === selectedRowId) || {},
+                tableData.find((o) => o.user_id === selectedRowId) || {},
               );
               selectedRowId = null; // 清空 selectedRowId 的值
             }

src/views/registrationGroup/components/teaList.vue

@@ -50,13 +50,7 @@
             <span style="margin-left: 10px">指导老师姓名</span>
           </template>
           <template #default="{ row }">
-            <el-input
-              :disabled="isDisable"
-              @click="openDialog(row)"
-              v-model="row.teacherName"
-              placeholder="请选择"
-              :prefix-icon="ClusterOutlined"
-            />
+            <el-input v-model="row.teacherName" placeholder="请输入指导老师姓名"   :disabled="isDisable"/>
           </template>
         </el-table-column>
         <el-table-column>
@@ -187,18 +181,18 @@ const visible = ref(false)
 
 // 像数据源中添加数据
 const handleSelected = (row: any = {}) => {
-  // 如果是空对象，删除 tableData 中最后新增的对象
-  if (Object.keys(row).length === 0) {
-    if (tableData.length > 0) {
-      tableData.pop(); // 删除最后一个元素
-    }
-  }
   if (tableData.some((o) => o.teacherid === row.user_id)) {
     ElMessage({
       message: '已有该用户，不能重复选择用户!',
       type: 'error',
     })
-    return
+    tableData.pop(); // 删除最后一个元素
+  }
+  // 如果是空对象，删除 tableData 中最后新增的对象
+  if (Object.keys(row).length === 0) {
+    if (tableData.length > 0) {
+      tableData.pop(); // 删除最后一个元素
+    }
   }
   target.value.teacherName = row.realname
   target.value.teacherXl = row.exp_title

src/views/userInfo/index.vue

@@ -105,7 +105,7 @@
     width="35%"
     :before-close="handleClose"
   >
-    <el-form :model="form" label-width="80" style="padding-right: 30px">
+    <el-form :model="form":rules="rules" ref="ruleFormRef" label-width="80" style="padding-right: 30px">
       <el-form-item label="头像">
         <el-upload
           v-model:file-list="fileList"
@@ -119,7 +119,7 @@
       <el-form-item label="姓名">
         <el-input v-model="form.name" />
       </el-form-item>
-      <el-form-item label="学号">
+      <el-form-item label="学号" prop="workno">
         <el-input v-model="form.workNo" />
       </el-form-item>
       <!-- <el-form-item label="部门">
@@ -143,10 +143,10 @@
           <el-radio :value="0" size="large">女</el-radio>
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="邮箱">
+      <el-form-item label="邮箱" prop="email">
         <el-input v-model="form.email" />
       </el-form-item>
-      <el-form-item label="手机号">
+      <el-form-item label="手机号" prop="phone">
         <el-input v-model="form.phone" type="number" />
       </el-form-item>
     </el-form>
@@ -161,6 +161,7 @@
 
 <script lang="ts" setup>
 import { nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'
+import { ElMessage } from 'element-plus'
 import { useRouter } from 'vue-router'
 import userStore from '@/store/module/user'
 import { getFaculties, uploadFile, editUserInfoApi } from '@/api/race'
@@ -172,6 +173,25 @@ console.log(useUserStore.userInfo, 'useUserStore')
 userInfo.value = useUserStore.userInfo
 const Router = useRouter()
 const dialogVisible = ref(false)
+const ruleFormRef = ref<any>()
+const rules = {
+  workno: [
+    // { required: true, message: '请输入工号/学号', trigger: 'blur' },
+    {
+      pattern: /^[a-zA-Z0-9]{1,20}$/,
+      message: '工号/学号为1-20位数字或字母',
+      trigger: 'blur',
+    },
+  ],
+  phone: [
+    // { required: true, message: '请输入手机号', trigger: 'blur' },
+    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' },
+  ],
+  email: [
+          // { required: true, message: '请输入邮箱', trigger: 'blur' },
+          { type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur'] }
+        ],
+}
 // 修改用户信息
 const editUserInfo = () => {
   form.name = useUserStore.userInfo.realname
@@ -215,30 +235,39 @@ const uploadFileEvent = async () => {
 }
 // 确认修改
 const submit = async () => {
-  if (fileList.value[0].hasOwnProperty('raw')) {
-    await uploadFileEvent()
-  }
-  const data: any = {
-    id: userInfo.value.id,
-    realname: form.name,
-    birthday: form.birthday,
-    sex: form.sex,
-    email: form.email,
-    facultiesId: form.facultiesId,
-    phone: form.phone,
-    avatar: avatar.value,
-    workNo: form.workNo
-  }
-  for (const key in data) {
-    if (data[key] === '') {
-      delete data[key]
+  // 调用表单验证
+  if (!ruleFormRef.value) return
+  await ruleFormRef.value.validate(async (valid: boolean) => {
+    if (valid) {
+      // 如果表单验证通过
+      if (fileList.value[0].hasOwnProperty('raw')) {
+        await uploadFileEvent()
+      }
+      const data: any = {
+        id: userInfo.value.id,
+        realname: form.name,
+        birthday: form.birthday,
+        sex: form.sex,
+        email: form.email,
+        facultiesId: form.facultiesId,
+        phone: form.phone,
+        avatar: avatar.value,
+        workNo: form.workNo
+      }
+      for (const key in data) {
+        if (data[key] === '') {
+          delete data[key]
+        }
+      }
+      await editUserInfoApi(data)
+      useUserStore.getUserInfo()
+      userInfo.value = useUserStore.userInfo
+      dialogVisible.value = false
+    } else {
+      // 如果表单验证失败，提示用户
+      ElMessage.error('表单信息填写有误，请检查后再试')
     }
-  }
-  await editUserInfoApi(data)
-  useUserStore.getUserInfo()
-  userInfo.value = useUserStore.userInfo
-
-  dialogVisible.value = false
+  })
 }
 onMounted(() => {})
 // 获取院系列表