wireguard-dashboard/web-src/src/layout/components/lay-navbar/component/user.vue

<script setup lang="ts">
import { ref } from "vue";
import { FormInstance } from "element-plus";
import { generateAvatar } from "@/api/user";

// 声明 props 类型
export interface FormProps {
  formInline: {
    id: string;
    avatar: string;
    name: string;
    account: string;
    email: string;
    isAdmin: number;
    status: number;
  };
}

// 声明 props 默认值
// 推荐阅读：https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: "",
    avatar: "",
    name: "",
    account: "",
    email: "",
    isAdmin: 0,
    status: 1
  })
});

// vue 规定所有的 prop 都遵循着单向绑定原则，直接修改 prop 时，Vue 会抛出警告。此处的写法仅仅是为了消除警告。
// 因为对一个 reactive 对象执行 ref，返回 Ref 对象的 value 值仍为传入的 reactive 对象，
// 即 newFormInline === props.formInline 为 true，所以此处代码的实际效果，仍是直接修改 props.formInline。
// 但该写法仅适用于 props.formInline 是一个对象类型的情况，原始类型需抛出事件
// 推荐阅读：https://cn.vuejs.org/guide/components/props.html#one-way-data-flow
const userEditForm = ref(props.formInline);
const userEditFormRef = ref<FormInstance>();

function getUserEditFormRef() {
  return userEditFormRef.value;
}

// 切换头像
const changeAvatar = () => {
  generateAvatar().then(res => {
    if (res.code === 200) {
      userEditForm.value.avatar = res.data;
    }
  });
};

defineExpose({ getUserEditFormRef });
</script>

<template>
  <el-form ref="userEditFormRef" :model="userEditForm" label-width="20%">
    <el-form-item prop="avatar">
      <el-avatar
        style="cursor: pointer; margin-left: 25%"
        size="large"
        fit="cover"
        :src="userEditForm.avatar"
        @click="changeAvatar()"
      />
    </el-form-item>
    <el-form-item
      prop="name"
      label="名称"
      :rules="[{ required: true, message: '名称不能为空', trigger: 'blur' }]"
    >
      <el-input
        v-model="userEditForm.name"
        class="!w-[220px]"
        placeholder="名称"
      />
    </el-form-item>
    <el-form-item
      prop="account"
      label="账号"
      :rules="[{ required: true, message: '账号不能为空', trigger: 'blur' }]"
    >
      <el-input
        v-model="userEditForm.account"
        disabled
        class="!w-[220px]"
        placeholder="账号"
      />
    </el-form-item>
    <el-form-item prop="email" label="邮箱">
      <el-input
        v-model="userEditForm.email"
        class="!w-[220px]"
        placeholder="邮箱"
      />
    </el-form-item>
    <el-form-item
      prop="isAdmin"
      label="超管"
      :rules="[
        { required: true, message: '是否为超管不能为空', trigger: 'blur' }
      ]"
    >
      <el-select v-model="userEditForm.isAdmin" disabled class="!w-[220px]">
        <el-option label="否" :value="0" />
        <el-option label="是" :value="1" />
      </el-select>
    </el-form-item>
    <el-form-item
      prop="status"
      label="状态"
      :rules="[{ required: true, message: '状态不能为空', trigger: 'blur' }]"
    >
      <el-select v-model="userEditForm.status" disabled class="!w-[220px]">
        <el-option label="禁用" :value="0" />
        <el-option label="启用" :value="1" />
      </el-select>
    </el-form-item>
  </el-form>
</template>