校验格式

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

@@ -1,32 +1,14 @@
 <template>
   <div>
-    <el-button
-      type="primary"
-      icon="Plus"
-      @click="add"
-      class="btn"
-      :disabled="isDisable"
-    >
+    <el-button type="primary" icon="Plus" @click="add" class="btn" :disabled="isDisable">
       新增
     </el-button>
-    <el-button
-      type="danger"
-      icon="Delete"
-      @click="del"
-      class="btn"
-      :disabled="isDisable"
-    >
+    <el-button type="danger" icon="Delete" @click="del" class="btn" :disabled="isDisable">
       删除
     </el-button>
     <div class="table-box">
-      <el-table
-        ref="multipleTableRef"
-        @select="(selection: any[]) => (isSele = !!selection.length)"
-        border
-        :data="tableData"
-        class="table"
-        height="276px"
-      >
+      <el-table ref="multipleTableRef" @select="(selection: any[]) => (isSele = !!selection.length)" border
+        :data="tableData" class="table" height="276px">
         <el-table-column type="selection" width="55" />
         <el-table-column label="#" width="55">
           <template #default="{ $index }">
@@ -41,13 +23,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>
@@ -60,10 +36,17 @@
           <template #default="{ row }">
             <el-cascader
               :modelValue="row.captain"
-              @update:modelValue="(arr: any[]) => (row.captain = arr[0])"
+              @update:modelValue="(arr: any[]) => {row.captain = arr[0];console.log(arr);
+              }"
               :options="options"
               :disabled="isDisable"
             />
+            <!-- <el-cascader
+              :modelValue="row.captain"
+              @update:modelValue="checkUniqueness(row)"
+              :options="options"
+              :disabled="isDisable"
+            /> -->
           </template>
         </el-table-column>
         <el-table-column>
@@ -117,7 +100,7 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref, onMounted, watch } from 'vue'
+import { reactive, ref, onMounted, nextTick } from 'vue'
 import stuDialog from './stuDialog.vue'
 import { ClusterOutlined } from '@ant-design/icons-vue'
 import { ElMessage } from 'element-plus'
@@ -141,6 +124,27 @@ const options = [
   },
 ]
 
+// 检查队长的唯一性
+// const checkUniqueness = async(row:any) => {
+//   const currentCaptain = row.captain;
+//   const isUnique = tableData.every ((r) => {
+//     // console.log(tableData,'table');
+//     console.log(row.captain,'row');
+//     console.log(r.captain,'r.captain');
+
+//     return r.captain !== currentCaptain || r.userId == row.userId; // 排除当前行自身
+//   });
+
+//   if (!isUnique) {
+//     ElMessage({
+//       message: '已有队长人选!',
+//       type: 'error',
+//     })
+//     // row.captain = '1';
+    
+//   } 
+// };
+
 // 数据
 const tableData = reactive<any[]>([])
 onMounted(() => {
@@ -203,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>
@@ -103,7 +97,7 @@
             <el-input v-model="row.teacherYjfx" placeholder="请输入研究方向"   :disabled="isDisable"/>
           </template>
         </el-table-column>
-        <el-table-column>
+        <el-table-column >
           <template #header>
             <el-icon>
               <Edit />
@@ -111,7 +105,7 @@
             <span style="margin-left: 10px">手机号</span>
           </template>
           <template #default="{ row }">
-            <el-input v-model="row.teacherPhone" placeholder="请输入手机号"   :disabled="isDisable"/>
+            <el-input v-model="row.teacherPhone" @blur="validatePhoneInput(row)" placeholder="请输入手机号"   :disabled="isDisable"/>
           </template>
         </el-table-column>
       </el-table>
@@ -143,6 +137,13 @@ const options = [
   },
 ]
 
+
+
+// 手机号格式校验函数
+const validatePhone = (teacherPhone: string) => {
+  const pattern = /^1[3-9]\d{9}$/;
+  return pattern.test(teacherPhone);
+};
 // 数据
 const tableData = reactive<any[]>([])
 onMounted(async() => {
@@ -187,8 +188,11 @@ const visible = ref(false)
 
 // 像数据源中添加数据
 const handleSelected = (row: any = {}) => {
+  console.log(row,'row');
+  
   // 如果是空对象，删除 tableData 中最后新增的对象
   if (Object.keys(row).length === 0) {
+    console.log(Object)
     if (tableData.length > 0) {
       tableData.pop(); // 删除最后一个元素
     }
@@ -198,8 +202,10 @@ const handleSelected = (row: any = {}) => {
       message: '已有该用户，不能重复选择用户!',
       type: 'error',
     })
-    return
+    tableData.pop(); // 删除最后一个元素
   }
+  console.log(row,'row')
+
   target.value.teacherName = row.realname
   target.value.teacherXl = row.exp_title
   target.value.teacherZc = row.exp_zc
@@ -207,6 +213,7 @@ const handleSelected = (row: any = {}) => {
   target.value.teacherYjfx = row.exp_yjfx
   target.value.teacherPhone = row.phone
   target.value.teacherid = row.user_id
+  
 }
 
 // 提交

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(() => {})
 // 获取院系列表