'用户列表接口联调'
This commit is contained in:
张磊
@@ -0,0 +1,27 @@
|
||||
|
||||
import request from '@/utils/request';
|
||||
import { AxiosPromise } from 'axios';
|
||||
//获取用户列表
|
||||
export function getUserList(data): AxiosPromise<any> {
|
||||
return request({
|
||||
url: '/admin/v1/user/list',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
||||
//获取用户档案接口
|
||||
export function getUserarchive(data): AxiosPromise<any> {
|
||||
return request({
|
||||
url: '/admin/v1/user/archive',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
||||
//获取用户档案详情接口
|
||||
export function getUserarchiveDetail(data): AxiosPromise<any> {
|
||||
return request({
|
||||
url: '/admin/v1/user/detail',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-card class="box-card">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item label="关键词" prop="keyword">
|
||||
<el-input v-model="queryParams.keyword" placeholder="用户名/昵称" clearable style="width: 200px"
|
||||
@keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :icon="Search" @click="handleQuery">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button :icon="Refresh" @click="resetQuery">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table v-loading="loading" :data="userList" border stripe style="width: 100%">
|
||||
<el-table-column prop="username" label="用户名" align="center" />
|
||||
<el-table-column prop="nickname" label="昵称" align="center" />
|
||||
<!--头像可点击查看大图-->
|
||||
<el-table-column prop="avatar" label="头像" align="center" width="80">
|
||||
<template #default="{ row }">
|
||||
<el-image v-if="row.avatar" :src="row.avatar" :preview-src-list="[row.avatar]"
|
||||
preview-teleported fit="cover" class="avatar-thumb" hide-on-click-modal />
|
||||
<span v-else>--</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="district_text" label="地区" align="center" />
|
||||
<el-table-column prop="gender_text" label="性别" align="center" />
|
||||
<el-table-column prop="mobile" label="手机号" align="center" />
|
||||
<el-table-column prop="birthday" label="生日" align="center" />
|
||||
<el-table-column prop="age" label="年龄" align="center" />
|
||||
<el-table-column prop="status" label="状态" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag>
|
||||
{{ statusData[row.status] }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="detection_number" label="总检测次数" align="center" />
|
||||
<el-table-column prop="created_at" label="创建时间" align="center" />
|
||||
<el-table-column label="操作" align="center" width="150">
|
||||
<template #default="{ row }">
|
||||
<el-button text @click="openArchiveDialog(row)">用户档案</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-if="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.size"
|
||||
@pagination="handleQuery" />
|
||||
</el-card>
|
||||
|
||||
<!-- 用户档案弹窗 -->
|
||||
<el-dialog v-model="archiveDialogVisible" title="用户档案" width="640px">
|
||||
<el-table v-loading="archiveLoading" :data="archiveList" border stripe style="width: 100%">
|
||||
<el-table-column label="图片" align="center" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-image v-if="row.cover" :src="row.cover" :preview-src-list="[row.cover]" preview-teleported
|
||||
fit="cover" class="archive-cover" hide-on-click-modal />
|
||||
<span v-else>--</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="create_time" label="时间" align="center" min-width="160" />
|
||||
</el-table>
|
||||
<pagination v-if="archiveTotal > 0" :total="archiveTotal" v-model:page="archiveParams.page"
|
||||
v-model:limit="archiveParams.size" @pagination="loadArchive" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, onMounted } from 'vue';
|
||||
import { getUserList, getUserarchive } from '@/api/user';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { Search, Refresh } from '@element-plus/icons-vue';
|
||||
const statusData = {
|
||||
1: '未注册',
|
||||
2: '未进行人脸识别',
|
||||
3: '未完善信息',
|
||||
4: '正常'
|
||||
}
|
||||
const loading = ref(false);
|
||||
const total = ref(0);
|
||||
const userList = ref<any[]>([]);
|
||||
const queryFormRef = ref();
|
||||
|
||||
// 档案弹窗相关
|
||||
const archiveDialogVisible = ref(false);
|
||||
const archiveLoading = ref(false);
|
||||
const archiveTotal = ref(0);
|
||||
const archiveList = ref<any[]>([]);
|
||||
const currentUserId = ref<number | null>(null);
|
||||
const archiveParams = reactive({
|
||||
page: 1,
|
||||
size: 10
|
||||
});
|
||||
|
||||
// 打开档案弹窗
|
||||
function openArchiveDialog(row: any) {
|
||||
currentUserId.value = row.id;
|
||||
archiveDialogVisible.value = true;
|
||||
archiveParams.page = 1;
|
||||
archiveParams.size = 10;
|
||||
loadArchive();
|
||||
}
|
||||
|
||||
// 加载档案列表
|
||||
function loadArchive() {
|
||||
if (!currentUserId.value) return;
|
||||
archiveLoading.value = true;
|
||||
getUserarchive({ user_id: currentUserId.value, ...archiveParams })
|
||||
.then(({ data }: any) => {
|
||||
const list = Array.isArray(data) ? data : data?.data ?? data?.list ?? [];
|
||||
archiveList.value = list;
|
||||
archiveTotal.value =
|
||||
typeof data?.total === 'number' ? data.total : Array.isArray(data) ? data.length : list.length;
|
||||
})
|
||||
.catch((err: any) => {
|
||||
ElMessage.error(err.message || '获取用户档案失败');
|
||||
})
|
||||
.finally(() => {
|
||||
archiveLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
const queryParams = reactive({
|
||||
page: 1,
|
||||
size: 10,
|
||||
keyword: ''
|
||||
});
|
||||
|
||||
function handleQuery() {
|
||||
loading.value = true;
|
||||
getUserList(queryParams)
|
||||
.then(({ data }: any) => {
|
||||
userList.value = data;
|
||||
})
|
||||
.catch((err: any) => {
|
||||
ElMessage.error(err.message || '获取用户列表失败');
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function resetQuery() {
|
||||
queryFormRef.value?.resetFields();
|
||||
queryParams.page = 1;
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
function handleSizeChange(size: number) {
|
||||
queryParams.size = size;
|
||||
queryParams.page = 1;
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
function handleCurrentChange(page: number) {
|
||||
queryParams.page = page;
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
handleQuery();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.avatar-thumb {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.archive-cover {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user