上传代码
This commit is contained in:
222
CampusExpressDelivery/src/view/user/UserList.vue
Normal file
222
CampusExpressDelivery/src/view/user/UserList.vue
Normal file
@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<a-card>
|
||||
<!-- 搜索框 -->
|
||||
<div class="search-box">
|
||||
<a-form layout="inline">
|
||||
<a-space>
|
||||
<a-form-item label="身份">
|
||||
<a-select
|
||||
style="width: 200px;"
|
||||
placeholder="默认查询全部用户"
|
||||
allowClear
|
||||
v-model:value="searchParams.userRole"
|
||||
@change="handleChange"
|
||||
>
|
||||
<a-select-option value="user">普通用户</a-select-option>
|
||||
<a-select-option value="business">商家用户</a-select-option>
|
||||
<a-select-option value="errand">快送员</a-select-option>
|
||||
<a-select-option value="admin">管理员</a-select-option>
|
||||
<a-select-option value="ban">已封禁</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="用户昵称">
|
||||
<a-input-search
|
||||
style="width: 300px"
|
||||
placeholder="请输入用户昵称"
|
||||
enter-button
|
||||
allow-clear
|
||||
@search="onSearch"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="手机号">
|
||||
<a-input-search
|
||||
style="width: 300px"
|
||||
placeholder="请输入手机号"
|
||||
enter-button
|
||||
allow-clear
|
||||
@search="onSearchPhone"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-space>
|
||||
</a-form>
|
||||
</div>
|
||||
<!-- 数据展示部分 -->
|
||||
<a-table
|
||||
:scroll="{ x: 1500, y: 1000 }"
|
||||
:data-source="tableData"
|
||||
:columns="columns"
|
||||
:pagination=false
|
||||
:loading="loading"
|
||||
bordered
|
||||
class="data-box"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'avatarUrl'">
|
||||
<a-avatar :src="record.avatarUrl"/>
|
||||
</template>
|
||||
<template v-if="column.key === 'userRole'">
|
||||
<div v-if="record.userRole === 'boss'">
|
||||
<a-tag color="purple">Boss</a-tag>
|
||||
</div>
|
||||
<div v-else-if="record.userRole === 'admin'">
|
||||
<a-tag color="blue">管理员</a-tag>
|
||||
</div>
|
||||
<div v-else-if="record.userRole === 'user'">
|
||||
<a-tag color="green">普通用户</a-tag>
|
||||
</div>
|
||||
<div v-else-if="record.userRole === 'errand'">
|
||||
<a-tag color="yellow">快送员</a-tag>
|
||||
</div>
|
||||
<div v-else-if="record.userRole === 'business'">
|
||||
<a-tag color="orange">商家</a-tag>
|
||||
</div>
|
||||
<div v-else-if="record.userRole === 'ban'">
|
||||
<a-tag color="red">已封禁</a-tag>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === '操作'">
|
||||
<a-space>
|
||||
<a-button :disabled="validRole(record.userRole)"
|
||||
size="small" type="link" danger @click="doBan(record.id, record.userRole === 'user')">
|
||||
{{ record.userRole === 'ban' ? '解封' : '封禁' }}
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<!-- 分页部分 -->
|
||||
<div class="pagination">
|
||||
<a-pagination v-model:current="searchParams.current"
|
||||
v-model:pageSize="searchParams.pageSize"
|
||||
show-quick-jumper
|
||||
show-size-changer
|
||||
:show-total="(total: any) => `共 ${total} 人`"
|
||||
:total="total"
|
||||
@change="onChange"
|
||||
/>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {onMounted, ref} from "vue";
|
||||
import myAxios from "../../api/myAxios.ts";
|
||||
import {message} from "ant-design-vue";
|
||||
import {formatTime} from "../../utils/TableConfig.ts";
|
||||
|
||||
|
||||
const tableData: any = ref([]);
|
||||
const loading = ref(false)
|
||||
// 分页
|
||||
const total: any = ref(0);
|
||||
// 请求参数
|
||||
const searchParams: any = ref({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
userRole: null,
|
||||
})
|
||||
|
||||
const columns: any = [
|
||||
{
|
||||
title: '序号',
|
||||
width: 40,
|
||||
fixed: 'left',
|
||||
align: 'center',
|
||||
customRender: ({index}: any) => {
|
||||
return `${(searchParams.value.current - 1) * searchParams.value.pageSize + index + 1}`;
|
||||
}
|
||||
},
|
||||
{title: '用户昵称', dataIndex: 'userAccount', width: 50, key: 'userAccount', fixed: 'left', align: 'center'},
|
||||
{title: '头像', dataIndex: 'avatarUrl', key: 'avatarUrl', width: 30, align: 'center'},
|
||||
{title: '身份', dataIndex: 'userRole', key: 'userRole', width: 50, align: 'center'},
|
||||
{title: '手机号', dataIndex: 'phone', key: 'phone', width: 50, align: 'center'},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
customRender: (row: any) => {
|
||||
return formatTime(row)
|
||||
}
|
||||
},
|
||||
{title: '操作', key: '操作', fixed: 'right', width: 30, align: 'center'},
|
||||
];
|
||||
|
||||
/**
|
||||
* 页面加载时，请求数据
|
||||
*/
|
||||
onMounted(() => {
|
||||
getUserList();
|
||||
})
|
||||
|
||||
/**
|
||||
* 获取用户数据
|
||||
*/
|
||||
const getUserList = async () => {
|
||||
loading.value = true;
|
||||
const res: any = await myAxios.post("/user/list/page", {...searchParams.value})
|
||||
if (res.code === 0 && res.data) {
|
||||
console.log(res)
|
||||
tableData.value = res.data.records;
|
||||
total.value = parseInt(res.data.total);
|
||||
loading.value = false;
|
||||
} else {
|
||||
message.error(`获取数据失败：${res.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 操作
|
||||
*/
|
||||
const doBan = async (id: string, isBan: boolean) => {
|
||||
const res: any = await myAxios.post("/user/update", {id: id, userRole: isBan ? 'ban' : 'user'})
|
||||
if (res.code === 0 && res.data) {
|
||||
message.success(`操作成功`);
|
||||
await getUserList();
|
||||
} else {
|
||||
message.error(`封禁用户失败：${res.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择用户身份
|
||||
*/
|
||||
const handleChange = (userRole: string) => {
|
||||
searchParams.value.userRole = userRole;
|
||||
searchParams.value.current = 1;
|
||||
getUserList();
|
||||
};
|
||||
|
||||
/**
|
||||
* 搜索功能
|
||||
*/
|
||||
const onSearch = (data: string) => {
|
||||
searchParams.value.userAccount = data;
|
||||
searchParams.value.current = 1;
|
||||
getUserList();
|
||||
}
|
||||
const onSearchPhone = (data: string) => {
|
||||
searchParams.value.phone = data;
|
||||
searchParams.value.current = 1;
|
||||
getUserList();
|
||||
}
|
||||
|
||||
/**
|
||||
* 分页
|
||||
*/
|
||||
const onChange = (pageNumber: number) => {
|
||||
searchParams.value.current = pageNumber;
|
||||
getUserList();
|
||||
}
|
||||
|
||||
// 判断用户权限
|
||||
const validRole = (userRole: string) => {
|
||||
return !(userRole === 'user' || userRole === 'ban');
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user