vue-vben-admin/apps/web-antd/src/views/person/modules/basic-form.vue

68 lines
1.5 KiB
Vue

<script setup lang="ts">
import { toRefs } from 'vue';
import { Button, Form, Input, notification } from 'ant-design-vue';
import { selfUpdate } from '#/api';
const props = defineProps({
// 这里可以定义父组件传递的属性
userInfo: {
type: Object,
default: () => ({
username: '',
email: '',
phone: '',
address: '',
}),
},
});
const { userInfo } = toRefs(props);
// 表单提交方法
const handleSubmit = async () => {
const res = await selfUpdate({
name: userInfo.value.name,
phone: userInfo.value.phone,
email: userInfo.value.email,
address: userInfo.value.address,
});
if (res.code === 200) {
notification.success({
message: '修改成功',
description: '用户信息已更新',
duration: 3,
});
} else {
notification.error({
message: '修改失败',
description: res.msg,
});
}
};
</script>
<template>
<Form
:model="userInfo"
layout="vertical"
@finish="handleSubmit"
class="p-4"
style="max-width: 500px; margin: 0 auto"
>
<Form.Item label="用户名">
<Input v-model:value="userInfo.name" />
</Form.Item>
<Form.Item label="邮箱" name="email">
<Input v-model:value="userInfo.email" />
</Form.Item>
<Form.Item label="联系电话">
<Input v-model:value="userInfo.phone" />
</Form.Item>
<Form.Item label="地址">
<Input v-model:value="userInfo.address" />
</Form.Item>
<Button type="primary" html-type="submit">保存修改</Button>
</Form>
</template>