diff --git a/src/views/bodySideData/index.vue b/src/views/bodySideData/index.vue index 2b40ac8..31f594b 100644 --- a/src/views/bodySideData/index.vue +++ b/src/views/bodySideData/index.vue @@ -57,10 +57,11 @@ :header-cell-style="{ 'text-align': 'center', 'font-size': '12px', 'color': '#3F404A', padding: '3px', background: '#F8F8FA', height: '50px' }" :cell-style="getCellStyles" :row-style="{ height: '0px' }"> - + + @@ -71,6 +72,8 @@ + + @@ -214,13 +221,18 @@ - - -

点击上传照片

- +
+ + +

点击上传照片

+ + 支持 JPG、JPEG、PNG，不超过 2MB +
@@ -241,9 +253,11 @@ @@ -338,6 +352,7 @@ const isSchoolAdmin = Number(userInfo?.roleId) === 2; const isAdministrator = [1, 2].includes(Number(userInfo?.roleId)); const baseURL = axios.defaults.baseURL; const dialogVisiblePhoto = ref(false) +const photoUploading = ref(false) const promotionLoading = ref(false) const studentTableRef = ref(null) const batchDeleteMode = ref(false) @@ -699,49 +714,37 @@ const deleteFile3 = () => { data.value.showIcon3 = false } -const beforeImageUpload = (file) => { - console.log(file, 'fileeeee') - console.log(ruleForm.value, 'ruleForm.value') - if (!ruleForm.value.studentNo && !ruleForm.value.studentName && !ruleForm.value.gradeId && !ruleForm.value.classId) { - return ElMessage.error('请选填写信息再上传头像') +const uploadStudentPhoto = async (file, studentForm) => { + if (!studentForm.studentNo || !studentForm.studentName || !studentForm.classId?.length) { + ElMessage.error('请先填写学生姓名、年级班级和学号再上传照片') + return false + } + if (photoUploading.value) { + return false } - return new Promise((resolve, reject) => { - const reader = new FileReader(); - reader.readAsDataURL(file); - reader.onload = function () { - photoForm.append("file", file); - AddPhoto(ruleForm.value) - }; - reader.onerror = function (error) { - reject(error); - }; - reader.onloadend = function () { - resolve(ruleForm.value.photo); - }; - }) + photoUploading.value = true + photoForm.set('file', file) + try { + await AddPhoto(studentForm) + ElMessage.success('学生照片上传成功') + } catch (error) { + const message = error?.response?.data?.message || error?.message || '学生照片上传失败，请稍后重试' + ElMessage.error(message) + console.error('Failed to upload student photo:', error) + } finally { + photoForm.delete('file') + photoUploading.value = false + } + + // 照片由 AddPhoto 自定义上传，阻止 el-upload 再次发起请求。 + return false +} +const beforeImageUpload = (file) => { + return uploadStudentPhoto(file, ruleForm.value) } const beforeImageUpload1 = (file) => { - console.log(file, 'fileeeee') - console.log(ruleForm1.value, 'ruleForm.value') - if (!ruleForm1.value.studentNo && !ruleForm1.value.studentName && !ruleForm1.value.gradeId && !ruleForm1.value.classId) { - return ElMessage.error('请选填写信息再上传头像') - } - return new Promise((resolve, reject) => { - const reader = new FileReader(); - reader.readAsDataURL(file); - reader.onload = function () { - photoForm.append("file", file); - AddPhoto(ruleForm1.value) - - }; - reader.onerror = function (error) { - reject(error); - }; - reader.onloadend = function () { - resolve(ruleForm.value.photo); - }; - }) + return uploadStudentPhoto(file, ruleForm1.value) } const cancelClick1 = () => { data.value.drawerDialog.show2 = false @@ -1309,10 +1312,13 @@ async function AddStudents(val) { async function ModifyTeachers(val) { // const path = val.photo.match(/(?:\/\/[^\/]+)?\/(.*)/)[1]; // val.photo = path - val.classId = val.classId ? val.classId[1] : null + const payload = { + ...val, + classId: Array.isArray(val.classId) ? val.classId[1] : val.classId, + } // console.log(val.photo, 'val.phoito') try { - const res = await _api.ModifyStudent(val); + const res = await _api.ModifyStudent(payload); if (res.code == 200) { data.value.drawerDialog.show1 = false resetForm(ruleFormRef1.value) @@ -1440,50 +1446,34 @@ async function AddList3() { }); } async function AddPhoto(val) { - console.log(photoForm, 'photoForm') const datas = { gradeId: val.classId[0], classId: val.classId[1], studentNo: val.studentNo, + studentName: val.studentName, } - console.log(datas, 'datasssss') + const query = new URLSearchParams({ + gradeId: String(datas.gradeId), + classId: String(datas.classId), + studentNo: datas.studentNo, + studentName: datas.studentName, + }) const options = { method: 'POST', - // url: 'http://192.168.10.230:14102/api/BackStandard/Add', - url: `/api/Student/UploadPhoto?gradeId=${datas.gradeId}&classId=${datas.classId}&studentNo=${datas.studentNo}`, - headers: { - Accept: '', - 'content-type': 'multipart/form-data; boundary=---011000010111000001101001' - }, + url: `/api/Student/UploadPhoto?${query.toString()}`, data: photoForm - }; - let k = data.value as any - axios.request(options).then(function (response) { - if (response.data.code == 200) { - const newUrl = response.data.data + '?timestamp=' + new Date().getTime(); - if (data.value.isAdd) { - console.log(response.data.data, 'response.data.data123') - ruleForm.value.photo = newUrl; - console.log(ruleForm.value.photo, 'ruleForm.value.photo') - } else { - console.log(response.data.data, 'response.data.data') - ruleForm1.value.photo = newUrl; - console.log(ruleForm1.value.photo, 'ruleForm1.value.photo') - } - // k.drawerDialog.show2 = false - // k.fileList3 = {} - // k.showIcon3 = false - photoForm.delete("file") - // data.value.tableNeed.refresh = false - // ElMessage.success(response.data.data) - // initApi(data.value) - } else { - ElMessage.error(response.data.message) - photoForm.delete("file") - } - }).catch(function (error) { - console.error(error, 'errororor'); - }); + } + const response = await axios.request(options) + if (response.data.code != 200) { + throw new Error(response.data.message || '学生照片上传失败') + } + + const newUrl = response.data.data + '?timestamp=' + new Date().getTime() + if (data.value.isAdd) { + ruleForm.value.photo = newUrl + } else { + ruleForm1.value.photo = newUrl + } } function exportData(val) { axios({ @@ -1513,6 +1503,69 @@ function exportData(val) { .confirm-tip { color: red; } + +.information-manage-drawer-overlay .student-photo-upload { + position: relative; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 8px; + min-width: 220px; + min-height: 132px; + border-radius: 10px; +} + +.information-manage-drawer-overlay .student-photo-upload .el-loading-mask { + border-radius: 10px; +} + +.information-manage-drawer-overlay .student-photo-upload__hint { + color: #98a2b3; + font-size: 12px; + line-height: 18px; + white-space: nowrap; +} + +.information-manage-drawer-overlay .student-form-footer { + width: 100%; + display: flex; + align-items: center; + justify-content: flex-end; + gap: 12px; +} + +.information-manage-drawer-overlay .student-form-footer .el-button { + min-width: 104px; + height: 40px; + margin: 0; + border-radius: 8px; + font-size: 14px; + font-weight: 500; +} + +.information-manage-drawer-overlay .student-form-footer__cancel { + color: #475467; + background: #fff; + border-color: #d0d5dd; +} + +.information-manage-drawer-overlay .student-form-footer__cancel:hover { + color: #176be7; + background: #f5f9ff; + border-color: #84adff; +} + +.information-manage-drawer-overlay .student-form-footer__confirm { + color: #fff; + background: linear-gradient(135deg, #2f8dff 0%, #176be7 100%); + border-color: #176be7; + box-shadow: 0 6px 14px rgba(47, 141, 255, 0.2); +} + +.information-manage-drawer-overlay .student-form-footer__confirm:hover { + background: linear-gradient(135deg, #58a4ff 0%, #2f7df0 100%); + border-color: #2f7df0; +}