wms-antdvue/.svn/pristine/b0/b05962e3d6fc7ac1ab9f5e626a5e0e75da10d71c.svn-base

<template>
  <a-form :model="formData" ref="formRef" :label-col="{ style: { width: '85px' } }">
    <div class="flex">
      <a-form-item
        label="名称"
        name="realname"
        class="flex-1"
        :rules="{ required: true, message: '请输入名称', trigger: 'blur' }"
      >
        <a-input v-model:value="formData.realname" placeholder="请输入名称" clearable />
      </a-form-item>

      <a-form-item label="性别" name="sex" class="flex-1">
        <a-radio-group v-model:value="formData.gender" name="gender">
          <a-radio :value="1">男</a-radio>
          <a-radio :value="2">女</a-radio>
          <a-radio :value="3">保密</a-radio>
        </a-radio-group>
      </a-form-item>
    </div>
    <div class="flex">
      <a-form-item
        label="手机号码"
        name="mobile"
        class="flex-1"
        :rules="[
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: rule.validatePhone, trigger: 'blur' },
        ]"
      >
        <a-input v-model:value="formData.mobile" placeholder="请输入手机号码" clearable />
      </a-form-item>
      <a-form-item
        label="邮箱地址"
        name="email"
        class="flex-1"
        :rules="[
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确邮箱地址', trigger: 'blur' },
        ]"
      >
        <a-input v-model:value="formData.email" placeholder="请输入邮箱地址" clearable />
      </a-form-item>
    </div>
    <div class="flex">
      <a-form-item
        label="所属区域"
        class="flex-1"
        name="city"
        :rules="{ required: true, message: '请选择所属区域', trigger: 'change' }"
      >
        <chinaArea style="width: 100%" :type="4" v-model="formData.city" />
      </a-form-item>
      <a-form-item
        label="详细地址"
        class="flex-1"
        name="address"
        :rules="{ required: true, message: '请输入详细地址', trigger: 'blur' }"
      >
        <a-input v-model:value="formData.address" placeholder="请输入详细地址" clearable />
      </a-form-item>
    </div>
    <div class="flex">
      <a-form-item label="简介" name="intro" class="flex-1">
        <a-input
          v-model:value="formData.intro"
          type="textarea"
          placeholder="请输入简介"
          clearable
        />
      </a-form-item>
      <a-form-item label="备注" name="note" class="flex-1">
        <a-textarea v-model:value="formData.note" placeholder="请输入备注" clearable />
      </a-form-item>
    </div>
    <a-form-item
      label="头像"
      name="avatar"
      :rules="{ required: true, message: '请上传头像', trigger: 'blur' }"
    >
      <UploadImg
        @change-file-name="(name) => (formData.avatarName = name)"
        :fileType="['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
        name="user"
        :fileSize="200"
        v-model:image-url="formData.avatar"
      >
        <template #tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template>
      </UploadImg>
    </a-form-item>
    <a-form-item style="margin-left: 85px;">
      <a-space>
        <a-button
          :loading="subLoading"
          type="primary"
          @click="submit"
          v-perm="['sys:profile:update']"
          >更新基本信息</a-button
        >
      </a-space>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue';
  import type { FormInstance } from 'ant-design-vue';
  import { rule } from '@/utils/validate';
  import chinaArea from '@/components/ChinaArea/index.vue';
  import UploadImg from '@/components/Upload/Image.vue';
  import { message } from 'ant-design-vue';
  import { useLockFn } from '@/utils/useLockFn';
  import { getUserInfo } from '@/api/system/user';
  import { updateProfile } from '@/api/setting/profile';

  const formRef = ref<FormInstance>();

  /**
   * 定义表单参数
   */
  const formData = reactive({
    realname: '',
    gender: '',
    avatar: '',
    mobile: '',
    email: '',
    city: '',
    address: '',
    intro: '',
    note: '',
    avatarName: '',
  });

  /**
   * 执行提交表单
   */
  const handleSubmit = async () => {
    await formRef.value?.validate();
    await updateProfile(formData);
    message.success('更新成功');
  };
  const { isLock: subLoading, lockFn: submit } = useLockFn(handleSubmit);

  /**
   * 获取用户信息
   */
  const getUserDetail = async () => {
    const data = await getUserInfo();
    for (const key in formData) {
      if (data[key] != null && data[key] != undefined) {
        formData[key] = data[key];
      }
    }
  };

  /**
   * 钩子函数
   */
  onMounted(() => {
    getUserDetail();
  });
</script>