a

src/views/recruit/recruitstudentsignup/update.vue

@@ -46,57 +46,57 @@
         <el-col :span="8">
           <el-form-item label="成绩单" prop="scorePhoto">
             <el-upload
-              action="/recruit/file/uploadAttachment"
+              :action="uploadUrl"
-              list-type="picture-card"
+              class="avatar-uploader"
               name="file"
               :headers="headers"
-              :limit="1"
               :data="uploadData"
-              :file-list="fileList"
+              :show-file-list="false"
               :before-upload="beforeUpload"
-              :on-preview="handlePictureCardPreview"
-              :on-remove="removeHandler"
               :http-request="httpRequest"
               :on-success="uploadSuccess">
-              <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
+              <div v-if="dataForm.scorePhoto" class="avatar-wrapper">
+                <img :src="dataForm.scorePhoto" class="avatar"/>
+              </div>
+              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
             </el-upload>
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="毕业证" prop="graPic">
             <el-upload
-              action="/recruit/file/uploadAttachment"
+              :action="uploadUrl"
-              list-type="picture-card"
+              class="avatar-uploader"
               name="file"
               :headers="headers"
-              :limit="1"
               :data="uploadData"
-              :file-list="graPicList"
+              :show-file-list="false"
               :before-upload="beforeUpload"
-              :on-preview="handlePictureCardPreview"
-              :on-remove="remove2Handler"
               :http-request="httpRequest"
               :on-success="upload2Success">
-              <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
+              <div v-if="dataForm.graPic" class="avatar-wrapper">
+                <img :src="dataForm.graPic" class="avatar"/>
+              </div>
+              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
             </el-upload>
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="在常营业执照" prop="yyPic">
             <el-upload
-              action="/recruit/file/uploadAttachment"
+              :action="uploadUrl"
-              list-type="picture-card"
+              class="avatar-uploader"
               name="file"
               :headers="headers"
-              :limit="1"
               :data="uploadData"
-              :file-list="yyPicList"
+              :show-file-list="false"
               :before-upload="beforeUpload"
-              :on-preview="handlePictureCardPreview"
-              :on-remove="remove3Handler"
               :http-request="httpRequest"
               :on-success="upload3Success">
-              <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
+              <div v-if="dataForm.yyPic" class="avatar-wrapper">
+                <img :src="dataForm.yyPic" class="avatar" @click="handlePictureCardPreview({ url: dataForm.yyPic })" />
+              </div>
+              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
             </el-upload>
           </el-form-item>
         </el-col>
@@ -105,26 +105,26 @@
         <el-col :span="8">
           <el-form-item label="在常就业社保证明" prop="sbPic">
             <el-upload
-              action="/recruit/file/uploadAttachment"
+              :action="uploadUrl"
-              list-type="picture-card"
+              class="avatar-uploader"
               name="file"
               :headers="headers"
-              :limit="1"
               :data="uploadData"
-              :file-list="sbPicList"
+              :show-file-list="false"
               :before-upload="beforeUpload"
-              :on-preview="handlePictureCardPreview"
-              :on-remove="remove5Handler"
               :http-request="httpRequest"
               :on-success="upload5Success">
-              <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
+              <div v-if="dataForm.sbPic" class="avatar-wrapper">
+                <img :src="dataForm.sbPic" class="avatar"/>
+              </div>
+              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
             </el-upload>
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="在常租赁合同/房产证明" prop="housePic">
             <el-upload
-              action="/recruit/file/uploadAttachment"
+              :action="uploadUrl"
               list-type="picture-card"
               name="file"
               :headers="headers"
@@ -144,7 +144,7 @@
         <el-col :span="8">
           <el-form-item label="户口本" prop="householdPic">
             <el-upload
-              action="/recruit/file/uploadAttachment"
+              :action="uploadUrl"
               list-type="picture-card"
               name="file"
               :headers="headers"
@@ -186,19 +186,25 @@
 
 <script setup lang="ts">
 import { ref, reactive, nextTick, computed, onMounted } from 'vue'
-import { Plus } from '@element-plus/icons-vue'
+import { Plus, Delete } from '@element-plus/icons-vue'
-import { ElNotification } from 'element-plus'
 import { storeToRefs } from 'pinia'
 import { useUserInfo } from '/@/stores/userInfo'
+import { useMessage } from '/@/hooks/message'
 import { Session } from '/@/utils/storage'
 import axios from 'axios'
 import { getObj, materialExam } from '/@/api/recruit/recruitstudentsignup'
 import { getList } from '/@/api/recruit/recruitstudentplangroup'
 import { queryAllTeacher } from '/@/api/professional/professionaluser/teacherbase'
+import { AUDIT_STATUS_LIST, getStatusConfig } from '/@/config/global'
+
+const auditStatusList = AUDIT_STATUS_LIST
+// 消息提示 hooks
+const message = useMessage()
 
 // 使用 Pinia store
 const userInfoStore = useUserInfo()
 const { userInfos } = storeToRefs(userInfoStore)
+const uploadUrl = import.meta.env.VITE_API_URL + '/recruit/file/uploadAttachment'
 
 // 创建权限对象
 const permissions = computed(() => {
@@ -243,11 +249,7 @@ const form = reactive({
   hkPic: ""
 })
 
-const fileList = ref<any[]>([])
-const graPicList = ref<any[]>([])
-const yyPicList = ref<any[]>([])
 const houseList = ref<any[]>([])
-const sbPicList = ref<any[]>([])
 const hkPicList = ref<any[]>([])
 
 const fileReader = ref<FileReader | null>(null)
@@ -348,7 +350,7 @@ const dataRule = {
 // 初始化 FileReader
 onMounted(() => {
   if (!window.FileReader) {
-    console.error('Your browser does not support FileReader API!')
+    message.error('您的浏览器不支持 FileReader API!')
   } else {
     fileReader.value = new FileReader()
   }
@@ -358,10 +360,7 @@ onMounted(() => {
 const beforeUpload = (file: File) => {
   const isLt5M = file.size < 10 * 1024 * 1024
   if (!isLt5M) {
-    ElNotification.error({
+    message.error('文件大小不能超过10M')
-      title: '错误',
-      message: '文件大小不能超过10M'
-    })
     return false
   }
   return true
@@ -373,68 +372,38 @@ const handlePictureCardPreview = (file: any) => {
   dialogUploadVisible.value = true
 }
 
-// 移除文件处理
+// 删除 avatar 模式的图片
-const removeHandler = (file: any) => {
+const handleRemoveAvatar = (field: string) => {
-  const index = fileList.value.findIndex((item: any) => item.url === file.url)
+  const formObj = form as any
-  if (index > -1) {
+  const dataFormObj = dataForm as any
-    fileList.value.splice(index, 1)
+  if (field === 'scorePhoto') {
+    formObj.attachment = ""
+  } else {
+    formObj[field] = ""
   }
-  form.attachment = ""
+  dataFormObj[field] = ""
-  dataForm.scorePhoto = ""
 }
 
-const remove2Handler = (file: any) => {
+// 通用移除文件处理（多文件）
-  const index = graPicList.value.findIndex((item: any) => item.url === file.url)
+const handleRemoveMultiple = (fileList: any[], dataFormField: string) => {
-  if (index > -1) {
+  return (file: any) => {
-    graPicList.value.splice(index, 1)
-  }
-  form.graPic = ""
-  dataForm.graPic = ""
-}
-
-const remove3Handler = (file: any) => {
-  const index = yyPicList.value.findIndex((item: any) => item.url === file.url)
-  if (index > -1) {
-    yyPicList.value.splice(index, 1)
-  }
-  form.yyPic = ""
-  dataForm.yyPic = ""
-}
-
-const remove4Handler = (file: any) => {
     const arr: any[] = []
     const strArr: string[] = []
-  houseList.value.forEach((e: any) => {
+    const dataFormObj = dataForm as any
+    fileList.forEach((e: any) => {
       if (e.url != file.url) {
         arr.push(e)
         strArr.push(e.url)
       }
     })
-  houseList.value = arr
+    fileList.splice(0, fileList.length, ...arr)
-  dataForm.housePic = strArr.join(",")
+    dataFormObj[dataFormField] = strArr.join(",")
+  }
 }
 
-const remove5Handler = (file: any) => {
+// 移除文件处理（多图上传）
-  const index = sbPicList.value.findIndex((item: any) => item.url === file.url)
+const remove4Handler = handleRemoveMultiple(houseList.value, 'housePic')
-  if (index > -1) {
+const remove6Handler = handleRemoveMultiple(hkPicList.value, 'householdPic')
-    sbPicList.value.splice(index, 1)
-  }
-  form.sbPic = ""
-  dataForm.sbPic = ""
-}
-
-const remove6Handler = (file: any) => {
-  const arr: any[] = []
-  const strArr: string[] = []
-  hkPicList.value.forEach((e: any) => {
-    if (e.url != file.url) {
-      arr.push(e)
-      strArr.push(e.url)
-    }
-  })
-  hkPicList.value = arr
-  dataForm.householdPic = strArr.join(",")
-}
 
 // 自定义上传请求
 const httpRequest = (options: any) => {
@@ -444,8 +413,9 @@ const httpRequest = (options: any) => {
     fileReader.value.onload = () => {
       const base64Str = fileReader.value?.result as string
       const config = {
-        url: '/recruit/file/uploadAttachment',
+        url: uploadUrl,
         method: 'post',
+        headers: headers.value,
         data: {
           base64Str: base64Str.split(',')[1]
         },
@@ -466,66 +436,40 @@ const httpRequest = (options: any) => {
   }
 }
 
+// 通用上传成功回调（单文件 - avatar模式）
+const handleUploadSuccess = (formField: string, dataFormField: string) => {
+  return (res: any) => {
+    const fileUrl = res.data.fileUrl
+    const formObj = form as any
+    const dataFormObj = dataForm as any
+    formObj[formField] = fileUrl
+    dataFormObj[dataFormField] = fileUrl
+  }
+}
+
+// 通用上传成功回调（多文件）
+const handleUploadSuccessMultiple = (fileList: any[], formField: string, dataFormField: string) => {
+  return (res: any) => {
+    const fileUrl = res.data.fileUrl
+    const formObj = form as any
+    const dataFormObj = dataForm as any
+    formObj[formField] = fileUrl
+    fileList.push({ url: fileUrl })
+    const arr: string[] = []
+    fileList.forEach((e: any) => {
+      arr.push(e.url)
+    })
+    dataFormObj[dataFormField] = arr.join(",")
+  }
+}
+
 // 上传成功回调
-const uploadSuccess = (res: any, file: any) => {
+const uploadSuccess = handleUploadSuccess('attachment', 'scorePhoto')
-  form.attachment = res.data.fileUrl
+const upload2Success = handleUploadSuccess('graPic', 'graPic')
-  if (fileList.value.length > 0) {
+const upload3Success = handleUploadSuccess('yyPic', 'yyPic')
-    fileList.value[0] = { url: form.attachment, name: "" }
+const upload4Success = handleUploadSuccessMultiple(houseList.value, 'housePic', 'housePic')
-  } else {
+const upload5Success = handleUploadSuccess('sbPic', 'sbPic')
-    fileList.value.push({ url: form.attachment, name: "" })
+const upload6Success = handleUploadSuccessMultiple(hkPicList.value, 'hkPic', 'householdPic')
-  }
-  dataForm.scorePhoto = form.attachment
-}
-
-const upload2Success = (res: any, file: any) => {
-  form.graPic = res.data.fileUrl
-  if (graPicList.value.length > 0) {
-    graPicList.value[0] = { url: form.graPic, name: "" }
-  } else {
-    graPicList.value.push({ url: form.graPic, name: "" })
-  }
-  dataForm.graPic = form.graPic
-}
-
-const upload3Success = (res: any, file: any) => {
-  form.yyPic = res.data.fileUrl
-  if (yyPicList.value.length > 0) {
-    yyPicList.value[0] = { url: form.yyPic, name: "" }
-  } else {
-    yyPicList.value.push({ url: form.yyPic, name: "" })
-  }
-  dataForm.yyPic = form.yyPic
-}
-
-const upload4Success = (res: any, file: any) => {
-  form.housePic = res.data.fileUrl
-  houseList.value.push({ url: form.housePic })
-  const arr: string[] = []
-  houseList.value.forEach((e: any) => {
-    arr.push(e.url)
-  })
-  dataForm.housePic = arr.join(",")
-}
-
-const upload5Success = (res: any, file: any) => {
-  form.sbPic = res.data.fileUrl
-  if (sbPicList.value.length > 0) {
-    sbPicList.value[0] = { url: form.sbPic, name: "" }
-  } else {
-    sbPicList.value.push({ url: form.sbPic, name: "" })
-  }
-  dataForm.sbPic = form.sbPic
-}
-
-const upload6Success = (res: any, file: any) => {
-  form.hkPic = res.data.fileUrl
-  hkPicList.value.push({ url: form.hkPic })
-  const arr: string[] = []
-  hkPicList.value.forEach((e: any) => {
-    arr.push(e.url)
-  })
-  dataForm.householdPic = arr.join(",")
-}
 
 // 初始化数据
 const initData = () => {
@@ -540,20 +484,14 @@ const initData = () => {
 
 // 表单提交
 const dataFormSubmit = (submitType: string) => {
-  if (dataForm.zlshRemark == '' && submitType == '3') {
+  if ((dataForm.zlshRemark == '' || !dataForm.zlshRemark) && submitType == '3') {
-    ElNotification.error({
+    message.error('请填写驳回理由')
-      title: '错误',
-      message: '请填写驳回理由'
-    })
     return
   }
   dataForm.zlsh = submitType
   canSubmit.value = false
   materialExam(dataForm).then(() => {
-    ElNotification.success({
+    message.success('操作成功')
-      title: '成功',
-      message: '操作成功'
-    })
     visible.value = false
     emit('refreshDataList')
   }).catch(() => {
@@ -563,7 +501,7 @@ const dataFormSubmit = (submitType: string) => {
 
 // 初始化方法
 const init = (id: string | null) => {
-  dataForm.id = id || null
+  dataForm.id = id || ""
   visible.value = true
   canSubmit.value = true
   initData()
@@ -571,32 +509,19 @@ const init = (id: string | null) => {
     dataFormRef.value?.resetFields()
     if (dataForm.id) {
       getObj(dataForm.id).then((response: any) => {
-        fileList.value = []
+        // 清空多图上传的列表
-        graPicList.value = []
-        yyPicList.value = []
         houseList.value = []
-        sbPicList.value = []
         hkPicList.value = []
         Object.assign(dataForm, response.data)
         title.value = dataForm.serialNumber
-        if (dataForm.scorePhoto != '') {
+        // avatar 模式直接使用 dataForm 中的字段，不需要 fileList
-          fileList.value.push({ url: dataForm.scorePhoto, name: "" })
+        // 多图上传需要初始化列表
-        }
-        if (dataForm.graPic != '') {
-          graPicList.value.push({ url: dataForm.graPic, name: "" })
-        }
-        if (dataForm.yyPic != '') {
-          yyPicList.value.push({ url: dataForm.yyPic, name: "" })
-        }
         if (dataForm.housePic != '') {
           const arr = dataForm.housePic.split(",")
           arr.forEach((e: string) => {
             houseList.value.push({ url: e })
           })
         }
-        if (dataForm.sbPic != '') {
-          sbPicList.value.push({ url: dataForm.sbPic, name: "" })
-        }
         if (dataForm.householdPic != '') {
           const arr2 = dataForm.householdPic.split(",")
           arr2.forEach((e: string) => {
@@ -604,22 +529,23 @@ const init = (id: string | null) => {
           })
         }
 
-        if ("1" == String(dataForm.degreeOfEducation)) {
+        const educationPrefixMap: Record<string, string> = {
-          title.value = "C" + title.value
+          '1': 'C',  // 初中
-        } else if ("2" == String(dataForm.degreeOfEducation)) {
+          '2': 'G',  // 高中
-          title.value = "G" + title.value
+          '3': 'J'   // 技职校
-        } else if ("3" == String(dataForm.degreeOfEducation)) {
+        }
-          title.value = "J" + title.value
+        const prefix = educationPrefixMap[String(dataForm.degreeOfEducation)]
+        if (prefix) {
+          title.value = prefix + title.value
         }
         contactNameflag.value = false
-        if ("-20" == String(dataForm.auditStatus)) {
+        const auditStatusConfig = getStatusConfig(auditStatusList, dataForm.auditStatus)
-          title.value = "未录取 " + title.value
+        if (auditStatusConfig) {
-        } else if ("0" == String(dataForm.auditStatus)) {
+          title.value = auditStatusConfig.label + " " + title.value
-          title.value = "待审核 " + title.value
+          if (auditStatusConfig.value == '20') {
-        } else if ("20" == String(dataForm.auditStatus)) {
-          title.value = "已录取 " + title.value
             contactNameflag.value = true
           }
+        }
       })
     }
   })
@@ -637,16 +563,47 @@ defineExpose({
       margin-bottom:18px!important;
     }
   }
-.avatar-uploader-icon {
+  
+  .avatar-uploader {
+    :deep(.el-upload) {
+      border: 1px dashed var(--el-border-color);
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+      transition: var(--el-transition-duration-fast);
+      width: 178px;
+      height: 178px;
+      
+      &:hover {
+        border-color: var(--el-color-primary);
+      }
+    }
+  }
+
+  .avatar-uploader-icon {
     font-size: 28px;
     color: #8c939d;
-  width: 100px;
+    width: 178px;
-  height: 100px;
+    height: 178px;
-  line-height: 100px;
+    line-height: 178px;
     text-align: center;
-}
+  }
 
-.dialog-footer {
+  .avatar-wrapper {
+    width: 178px;
+    height: 178px;
+    
+    .avatar {
+      width: 178px;
+      height: 178px;
+      display: block;
+      object-fit: cover;
+      cursor: pointer;
+    }
+  }
+
+  .dialog-footer {
     text-align: right;
-}
+  }
 </style>