v1.9 员工头像不对问题

This commit is contained in:
wuxw 2025-08-07 19:12:48 +08:00
parent 084d379c90
commit 69e184721c
6 changed files with 51 additions and 38 deletions

View File

@ -197,10 +197,10 @@ export default {
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
this.$message.error(this.$t('listOwner.upload.jpgOnly'))
this.$message.error(this.$t('common.jpgOnly'))
}
if (!isLt2M) {
this.$message.error(this.$t('listOwner.upload.sizeLimit'))
this.$message.error(this.$t('common.sizeLimit'))
}
return isJPG && isLt2M
},

View File

@ -208,10 +208,10 @@ export default {
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
this.$message.error(this.$t('listOwner.upload.jpgOnly'))
this.$message.error(this.$t('common.jpgOnly'))
}
if (!isLt2M) {
this.$message.error(this.$t('listOwner.upload.sizeLimit'))
this.$message.error(this.$t('common.sizeLimit'))
}
return isJPG && isLt2M
},

View File

@ -30,16 +30,13 @@
</el-form-item>
</el-col>
<el-col :span="12" style="text-align: center">
<el-image style="width: 200px; height: 200px" :src="editStaffInfo.photoUrl" fit="cover">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
<div style="margin-top: 20px">
<el-upload action="" :auto-upload="false" :show-file-list="false" :on-change="handlePhotoChange">
<el-button type="primary">{{ $t('staff.uploadPhoto') }}</el-button>
</el-upload>
</div>
<el-image style="width: 200px; height: 150px; border: 1px dashed #ccc;"
:src="editStaffInfo.photoUrl || '/img/noPhoto.jpg'" fit="cover" />
<el-upload class="mt-10" :show-file-list="false" :before-upload="beforeUpload" :http-request="uploadImage" action="">
<el-button size="small" type="primary">
{{ $t('common.upload') }}
</el-button>
</el-upload>
</el-col>
</el-row>
</el-form>
@ -53,6 +50,8 @@
<script>
import { modifyStaff } from '@/api/staff/staffApi'
import { getDict } from '../../api/community/communityApi'
import { uploadImage } from '@/api/owner/ownerApi'
export default {
name: 'EditStaff',
@ -95,7 +94,6 @@ export default {
this.editStaffInfo = {
...val,
username: val.name,
photoUrl: val.faceUrl || '/img/noPhoto.jpg'
}
}
}
@ -103,11 +101,17 @@ export default {
},
methods: {
open(row) {
let _url = '/img/noPhoto.jpg'
if(row.urls && row.urls.length > 0){
_url = row.urls[0]
}
this.editStaffInfo = {
...row,
username: row.name,
photoUrl: row.faceUrl || '/img/noPhoto.jpg'
photo: _url
}
this.editStaffInfo.photoUrl = row.photoUrl || '/img/noPhoto.jpg'
console.log(this.editStaffInfo.photoUrl)
this.getRelCd()
this.visible = true
@ -120,21 +124,6 @@ export default {
handleClose() {
this.visible = false
},
handlePhotoChange(file) {
if (file.size > 2 * 1024 * 1024) {
this.$message.error(this.$t('staff.photoSizeLimit'))
return false
}
const reader = new FileReader()
reader.onload = (e) => {
this.editStaffInfo.photoUrl = e.target.result
// Here you would typically upload the file to server
// and set editStaffInfo.photo to the returned file ID
this.editStaffInfo.photo = file.uid // Temporary, replace with actual file ID
}
reader.readAsDataURL(file.raw)
},
validateForm() {
if (!this.editStaffInfo.username) {
this.$message.error(this.$t('staff.requiredName'))
@ -175,7 +164,29 @@ export default {
} finally {
this.loading = false
}
}
},
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
this.$message.error(this.$t('common.jpgOnly'))
}
if (!isLt2M) {
this.$message.error(this.$t('common.sizeLimit'))
}
return isJPG && isLt2M
},
async uploadImage({ file }) {
try {
const res = await uploadImage({ file })
this.editStaffInfo.photo = res.fileId
this.editStaffInfo.photoUrl = res.url
this.$forceUpdate()
} catch (error) {
this.$message.error(this.$t('listOwner.upload.failed'))
}
},
}
}
</script>

View File

@ -65,7 +65,8 @@ export const messages = {
viewDetail:'View Detail',
yuan:'yuan',
process:'Process',
jpgOnly:'Only JPG files are allowed',
sizeLimit:'File size must be less than 2MB',
}
},
zh: {
@ -134,7 +135,8 @@ export const messages = {
viewDetail:'查看详情',
yuan:'元',
process:'处理',
jpgOnly:'只允许上传JPG文件',
sizeLimit:'文件大小必须小于2MB',
}
}
}

View File

@ -29,7 +29,7 @@
<el-table-column prop="address" :label="$t('org.address')" align="center" />
<el-table-column prop="sex" :label="$t('org.gender')" align="center">
<template #default="{ row }">
{{ row.sex === 0 ? '男' : '女' }}
{{ row.sex == 0 ? '男' : '女' }}
</template>
</el-table-column>
<el-table-column :label="$t('org.operation')" align="center">

View File

@ -12,7 +12,7 @@
<div class="staff-info">
<el-row :gutter="20">
<el-col :span="4">
<el-image style="width: 120px; height: 140px; border-radius: 4px;" :src="staffDetailInfo.photo"
<el-image style="width: 120px; height: 140px; border-radius: 4px;" :src="staffDetailInfo.photoUrl"
fit="cover" @error="errorLoadImg">
</el-image>
</el-col>
@ -143,7 +143,7 @@ export default {
this.$router.go(-1)
},
errorLoadImg() {
this.staffDetailInfo.photo = "/img/noPhoto.jpg"
this.staffDetailInfo.photoUrl = "/img/noPhoto.jpg"
},
async loadStaffDetail() {
try {
@ -155,7 +155,7 @@ export default {
const res = await getStaffDetail(params)
if ( res.staffs.length > 0) {
Object.assign(this.staffDetailInfo, res.staffs[0])
this.staffDetailInfo.photo = res.staffs[0].faceUrl
this.staffDetailInfo.photoUrl = res.staffs[0].photoUrl
}
} catch (error) {
this.$message.error(this.$t('staffDetailInfo.fetchError'))