main-web/src/layouts/components/personal/InfoDialog.vue

<template>
  <el-dialog title="个人信息" ref="dialog" :close-on-click-modal="false" v-model="visible" width="800px">
    <el-form ref="formRef" :model="userData" label-width="100px" label-position="right">
      <el-row :gutter="5">
        <el-col :span="12">
          <el-col :span="24">
            <div class="info-header-title">基本信息</div>
          </el-col>
          <el-col :span="24">
            <el-form-item label="登录账号：">
              <el-input v-model="userData.account" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="用户姓名：" prop="name" :rules="[required]">
              <el-input v-model="userData.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <div class="info-header-title">联系信息</div>
          </el-col>
          <el-col :span="24">
            <el-form-item label="用户邮箱：" prop="email" :rules="[required, email]">
              <el-input v-model="userData.email"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="联系方式：" prop="mobile" :rules="[required, mobile]">
              <el-input v-model="userData.mobile"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="公司名称：">
              <el-input v-model="userData.company"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="组织机构：">
              <el-input v-model="userData.departName" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :span="12">
          <div class="info-img">
            <img :src="userData.portrait" alt="" />
          </div>
          <div class="info-btn">
            <el-button @click="imageCropperShow = true">
              <template #icon>
                <el-icon><IconEpUploadFilled /></el-icon>
              </template>
              更换头像</el-button
            >
          </div>
        </el-col>
      </el-row>
    </el-form>
    <image-cropper field="files" @crop-success="imageCropSuccess" v-if="imageCropperShow" v-model="imageCropperShow" :width="size" :height="size" img-format="png"></image-cropper>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="editSubmit" :loading="loading">更新信息</el-button>
    </template>
  </el-dialog>
</template>
<script>
import { cloneDeep } from 'lodash-es'
import ImageCropper from 'components/image-cropper/index.vue'
import { modifyUser } from '@/services/manager'
import { reactive, toRefs, ref } from 'vue'
import { useStore } from 'vuex'
import { required, email, mobile } from '@/validate'
import { formSetting } from '@/config'
import { ElMessage } from 'element-plus'

export default {
  props: {
    data: {
      type: Object
    }
  },
  components: {
    ImageCropper
  },
  setup(props, context) {
    const state = reactive({
      imageCropperShow: false,
      size: 65,
      visible: false,
      userData: {}
    })
    function open() {
      const userData = cloneDeep(props.data)
      Object.keys(userData).forEach(key => {
        state.userData[key] = userData[key]
      })
      state.visible = true
    }
    function imageCropSuccess(imageDataUrl) {
      state.userData.portrait = imageDataUrl
    }
    const formRef = ref(null)
    const store = useStore()
    const loading = ref(false)
    function editSubmit() {
      try {
        loading.value = true
        const { validate } = formRef.value || context.refs.formRef
        validate(async () => {
          if (typeof state.userData.departIds == 'string') state.userData.departIds = JSON.parse(state.userData.departIds)
          const data = await modifyUser(state.userData)
          loading.value = false
          if (data.success) {
            ElMessage.success(data.message)
            state.visible = false
            store.dispatch('GetUserInfo')
          }
        })
      } catch (error) {
        loading.value = false
      }
    }
    return {
      loading,
      formSetting,
      ...toRefs(state),
      formRef,
      open,
      editSubmit,
      imageCropSuccess,
      required,
      email,
      mobile
    }
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.info-header-title {
  padding-left: 10px;
  border-left: 3px solid #2d8cf0;
  margin-bottom: 20px;
  height: 28px;
  line-height: 28px;
}

.info-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  margin: 90px 0px 20px 100px;
  border: 1px solid #d9d9d9;
  margin-top: 40px;
}

.info-img img {
  width: 100%;
  height: 100%;
}

.info-btn {
  margin: 0px 0px 0px 100px;
}
</style>