107 lines
2.9 KiB
Vue
107 lines
2.9 KiB
Vue
<template>
|
|
<div class="user-edit">
|
|
<a-card :bordered="false">
|
|
<a-form layout="vertical" :model="userForm" @submit="handleSave">
|
|
<a-form-item label="用户名">
|
|
<a-input
|
|
v-model:value="userForm.username"
|
|
placeholder="请输入用户名"
|
|
allow-clear
|
|
style="max-width: 400px"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="昵称">
|
|
<a-input
|
|
v-model:value="userForm.nickname"
|
|
placeholder="请输入昵称"
|
|
allow-clear
|
|
style="max-width: 400px"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="手机号">
|
|
<a-input
|
|
v-model:value="userForm.phone"
|
|
placeholder="请输入手机号"
|
|
allow-clear
|
|
style="max-width: 400px"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="邮箱">
|
|
<a-input
|
|
v-model:value="userForm.email"
|
|
placeholder="请输入邮箱"
|
|
allow-clear
|
|
style="max-width: 400px"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="状态">
|
|
<a-select v-model:value="userForm.status" style="max-width: 400px">
|
|
<a-select-option :value="1">启用</a-select-option>
|
|
<a-select-option :value="0">禁用</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item>
|
|
<a-space>
|
|
<a-button type="primary" html-type="submit">保存</a-button>
|
|
<a-button @click="goBack">取消</a-button>
|
|
</a-space>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
import { message } from 'ant-design-vue';
|
|
import { useTabsViewStore } from '@/store/modules/tabsView';
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const { closeCurrentTab } = useTabsViewStore();
|
|
|
|
// 用户信息表单数据
|
|
const userForm = ref({
|
|
username: '',
|
|
nickname: '',
|
|
phone: '',
|
|
email: '',
|
|
status: 1,
|
|
});
|
|
|
|
// 保存用户信息
|
|
const handleSave = async () => {
|
|
// TODO: 调用保存接口
|
|
message.success('保存成功');
|
|
goBack();
|
|
};
|
|
|
|
// 取消编辑
|
|
const goBack = () => {
|
|
router.back(); // 假设返回用户列表页面
|
|
closeCurrentTab(route); // 关闭当前标签页
|
|
};
|
|
|
|
// 初始化用户信息（可以通过接口获取）
|
|
const initUserData = async (userId: string) => {
|
|
// TODO: 调用接口获取用户信息
|
|
// const res = await getUserInfo(userId);
|
|
|
|
// 添加 mock 数据
|
|
userForm.value = {
|
|
username: 'mockUser',
|
|
nickname: 'mockNickname',
|
|
phone: '1234567890',
|
|
email: 'mock@example.com',
|
|
status: 1,
|
|
};
|
|
};
|
|
|
|
// 获取用户ID并初始化数据
|
|
const userId = route.params.id; // 假设路由中有用户ID
|
|
if (userId) {
|
|
initUserData(userId);
|
|
}
|
|
</script>
|