vue3.2/Vite/Ts78: 完成添加新账号的业务
·
Yin灏
目录结构
└─src
├─api
│ └─acl
│ └─user
│ └─index.ts
└─views
└─acl
└─user
└─index.vue
处理新增账号的接口
src/api/acl/user/index.ts
import type { User } from "./type";
//...
enum API {
//...
ADDUSER_URL = "/admin/acl/user/save",
UPDATEUSER_URL = "/admin/acl/user/update",
}
export const reqAddOrUpdateUser = (data: User) => {
if (data.id) {
request.put<any, any>(API.UPDATEUSER_URL, data);
} else {
request.post<any, any>(API.ADDUSER_URL, data);
}
};
//..
处理新用户添加
src/views/acl/user/index.vue
<template>
<el-card>
<el-form :inline="true" class="form">
<el-form-item label="用户名">
<el-input palceholder="输入搜索的用户名"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primay">搜索</el-button>
<el-button type="primay">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card>
<el-button type="primay" @click="addUser">添加用户</el-button>
<el-button type="primay">批量删除</el-button>
<el-table border :data="userArr">
<el-table-column type="selection" align="center"></el-table-column>
<el-table-column type="index" label="#" align="center"></el-table-column>
<el-table-column label="id" align="center" prop="id"></el-table-column>
<el-table-column
label="用户名字"
align="center"
prop="username"
></el-table-column>
<el-table-column
label="用户名称"
align="center"
prop="name"
></el-table-column>
<el-table-column
label="用户角色"
align="center"
prop="roleName"
></el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
></el-table-column>
<el-table-column
label="更新时间"
align="center"
prop="updateTime"
></el-table-column>
<el-table-column label="操作" width="300px" align="center">
<template #="{row}">
<el-button type="primary" size="small" icon="User"
>分配角色</el-button
>
<el-button
type="primary"
size="small"
icon="Edit"
@click="updateUser(row)"
>编辑</el-button
>
<el-button type="primary" size="small" icon="Delete">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页器 -->
<el-pagination
v-model:current-page="pageNo"
v-model:page-size="pageSize"
:page-sizes="[5, 7, 9]"
:background="true"
layout="prev, pager, next, jumper, -> , sizes, total"
:total="total"
@current-change="handler"
@size-change=""
></el-pagination>
</el-card>
<!-- 添加和修改抽屉 -->
<el-drawer v-model="drawer">
<template #header>
<h4>添加用户</h4>
</template>
<template #default>
<el-form>
<el-form-item label="用户姓名">
<el-input
placeholder="请输入用户姓名"
v-model="userParams.username"
></el-input>
</el-form-item>
<el-form-item label="用户昵称">
<el-input
placeholder="请输入用户昵称"
v-model="userParams.name"
></el-input>
</el-form-item>
<el-form-item label="用户密码">
<el-input
placeholder="请输入用户密码"
v-model="userParams.password"
></el-input>
</el-form-item>
</el-form>
</template>
<template #footer>
<el-button type="primary" @click="cancel">取消</el-button>
<el-button type="primary" @click="save">确定</el-button>
</template>
</el-drawer>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { reqUserInfo, reqAddOrUpdateUser } from "@/api/acl/user";
import type { UserResponseData, Records, User } from "@/api/acl/user/type";
let pageNo = ref<number>(1);
let pageSize = ref<number>(5);
let userArr = ref<Records>([]);
let drawer = ref<boolean>(false);
let userParams = reactive<User>({
username: "",
name: "",
password: "",
});
const addUser = () => {
drawer.value = true;
userParams.value = {
username: "",
name: "",
password: "",
};
};
const updateUser = (row: User) => {
drawer.value = true;
};
const getHasUser = async (pager = 1) => {
pageNo.value = pager;
const result: UserResponseData = await getHasUser(
pageNo.value,
pageSize.value
);
if (result.code === 200) {
total.value = result.data.total;
userArr.value = result.data.records;
}
};
const handler = async () => {
getHasUser();
};
onMounted(() => {
getHasUser();
});
const save = async () => {
const result: any = await reqAddOrUpdateUser(userParams);
if (result.code === 200) {
drawer.value = false;
ElMessage({
type: "success",
message: userParams.id ? "更新成功" : "新增成功",
});
getHasUser();
} else {
drawer.value = false;
ElMessage({
type: "error",
message: userParams.id ? "更新失败" : "新增失败",
});
}
};
const cancel = () => {
drawer.value = false;
userParams.value = {
username: "",
name: "",
password: "",
};
}
</script>
<style scoped lang="scss">
.form {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>