src/components/staff/editStaff.vue

<!-- components/staff/editStaff.vue -->
<template>
  <el-dialog
    :title="$t('staff.modifyStaff')"
    :visible.sync="visible"
    width="50%"
    @close="handleClose"
  >
    <el-form ref="form" :model="editStaffInfo" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="$t('staff.name')" prop="username">
            <el-input
              v-model="editStaffInfo.username"
              :placeholder="$t('staff.requiredName')"
            />
          </el-form-item>
          <el-form-item :label="$t('email')" prop="email">
            <el-input
              v-model="editStaffInfo.email"
              :placeholder="$t('staff.optionalEmail')"
            />
          </el-form-item>
          <el-form-item :label="$t('staff.phone')" prop="tel">
            <el-input
              v-model="editStaffInfo.tel"
              :placeholder="$t('staff.requiredPhone')"
            />
          </el-form-item>
          <el-form-item :label="$t('staff.gender')" prop="sex">
            <el-select
              v-model="editStaffInfo.sex"
              :placeholder="$t('staff.requiredGender')"
              style="width: 100%"
            >
              <el-option :value="0" :label="$t('staff.male')" />
              <el-option :value="1" :label="$t('staff.female')" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('staff.address')" prop="address">
            <el-input
              v-model="editStaffInfo.address"
              :placeholder="$t('staff.requiredAddress')"
            />
          </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-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">{{ $t('staff.cancel') }}</el-button>
      <el-button type="primary" @click="editStaffSubmit">{{ $t('staff.edit') }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { modifyStaff } from '@/api/staff/staffApi'
export default {
  name: 'EditStaff',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    staffInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      loading: false,
      editStaffInfo: {
        userId: '',
        username: '',
        email: '',
        tel: '',
        sex: '',
        address: '',
        photo: '',
        photoUrl: '',
        relCd: '',
        relCds: [],
        branchOrgs: [],
        departmentOrgs: [],
        parentOrgId: '',
        parentOrgName: '',
        parentTwoOrgId: '',
        orgNewName: '',
        orgId: ''
      }
    }
  },
  watch: {
    staffInfo: {
      immediate: true,
      handler(val) {
        if (val) {
          this.editStaffInfo = {
            ...val,
            username: val.name,
            photoUrl: val.faceUrl || '/img/noPhoto.jpg'
          }
        }
      }
    }
  },
  methods: {
    open(row){
      this.editStaffInfo = {
            ...row,
            username: row.name,
            photoUrl: row.faceUrl || '/img/noPhoto.jpg'
          }
      this.visible = true
    },
    handleClose() {
      this.$emit('update: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'))
        return false
      }
      if (!this.editStaffInfo.tel) {
        this.$message.error(this.$t('staff.requiredPhone'))
        return false
      }
      if (this.editStaffInfo.sex === '') {
        this.$message.error(this.$t('staff.requiredGender'))
        return false
      }
      if (!this.editStaffInfo.address) {
        this.$message.error(this.$t('staff.requiredAddress'))
        return false
      }
      return true
    },
    async editStaffSubmit() {
      if (!this.validateForm()) return
      
      try {
        this.loading = true
        const data = {
          ...this.editStaffInfo,
          name: this.editStaffInfo.username,
          staffId: this.editStaffInfo.userId
        }
        
        await modifyStaff(data)
        this.visible =false
        this.$message.success(this.$t('staff.modifySuccess'))
        this.$emit('success')
        this.handleClose()
      } catch (error) {
        this.$message.error(error.message)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>