122 lines
3.4 KiB
Vue
122 lines
3.4 KiB
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>
|