v1.9 员工头像不对问题

wuxw
1 parent 084d379c
Showing 6 changed files with 51 additions and 38 deletions
src/components/owner/addOwner.vue
src/components/owner/editOwner.vue
src/components/staff/editStaff.vue
src/i18n/commonLang.js
src/views/org/orgList.vue
src/views/staff/staffDetailList.vue
@@ -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
     },
@@ -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
     },
@@ -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>
@@ -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',
       }
     }
   } 
 \ No newline at end of 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">
@@ -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'))