admin1/jiangchengfeiyi-Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

用户列表分页渲染

Browse Source
This commit is contained in:
yuanteng 2024-10-29 10:51:27 +08:00
parent fb5f6d9ea7
commit 0f50d47844
5 changed files with 159 additions and 147 deletions

119
src/layout/components/Header.vue
View File

@ -83,78 +83,83 @@
<!--</style>-->
<template>
<div style=" height: 70px; width: 1248px; display: flex;
<div style=" height: 70px; width: 1248px; display: flex;
justify-content: space-between; align-items: center;">
<div style=" display: flex; justify-content: center;
<div style=" display: flex; justify-content: center;
align-items: center; margin-left: 10px">
<el-icon @click="changeState" v-show="showLog" size="20px" style="margin-right: 10px"><Expand/></el-icon>
<el-icon @click="changeState" v-show="!showLog" size="20px" style="margin-right: 10px"><Fold /></el-icon>
<el-icon @click="changeState" v-show="showLog" size="20px" style="margin-right: 10px">
<Expand />
</el-icon>
<el-icon @click="changeState" v-show="!showLog" size="20px" style="margin-right: 10px">
<Fold />
</el-icon>
<el-breadcrumb separator="/">
<a-breadcrumb-item>{{route.name}}</a-breadcrumb-item>
</el-breadcrumb>
</div>
<el-breadcrumb separator="/">
<a-breadcrumb-item>{{ route.name }}</a-breadcrumb-item>
</el-breadcrumb>
</div>
<div :style="{display: 'flex', justifyContent:'center', alignItems: 'center', marginRight: offset + 'px'}">
<el-avatar style="margin-right: 10px">
<img src="../../assets/admin.jpg" alt="">
</el-avatar>
<div :style="{ display: 'flex', justifyContent: 'center', alignItems: 'center', marginRight: offset + 'px' }">
<el-avatar style="margin-right: 10px">
<img :src="store.loginUser.userAvatar" alt="">
</el-avatar>
<el-dropdown style="cursor: pointer;" size="default">
<span class="el-dropdown-link" style="font-size: 16px; font-weight: bold;">
<span>用户名称</span><el-icon class="el-icon--right"><arrow-down /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="$router.push('/PersonalCenter')">个人信息</el-dropdown-item>
<el-dropdown-item @click="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
<el-dropdown style="cursor: pointer;" size="default">
<span class="el-dropdown-link" style="font-size: 16px; font-weight: bold;">
<span>{{ store.loginUser.userName }}</span><el-icon class="el-icon--right"><arrow-down /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="$router.push('/PersonalCenter')">个人信息</el-dropdown-item>
<el-dropdown-item @click="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import emitter from '@/utils/emitter'
import {useRoute, useRouter} from "vue-router";
import myAxios from '@/api/myAxios';
import { userStore } from '@/store/userStore';
import { ElMessage } from 'element-plus';
import { ref } from 'vue'
import emitter from '@/utils/emitter'
import { useRoute, useRouter } from "vue-router";
import myAxios from '@/api/myAxios';
import { userStore } from '@/store/userStore';
import { ElMessage } from 'element-plus';
const router = useRouter();
const route = useRoute();
const offset = ref(20)
const showLog = ref(false)
const store = userStore()
const router = useRouter();
const route = useRoute();
const offset = ref(20)
const showLog = ref(false)
const store = userStore()
const logout = async () => {
const res: any = await myAxios.post("/user/logout",{})
if(res.data.code == 1 && res.data) {
store.$reset()
await router.replace('/')
ElMessage({
type: 'info',
message: '登出成功',
})
}
const logout = async () => {
const res: any = await myAxios.post("/user/logout", {})
if (res.data.code == 1 && res.data) {
store.$reset()
await router.replace('/')
ElMessage({
type: 'info',
message: '登出成功',
})
}
const changeState = () => {
showLog.value = !showLog.value
emitter.emit('Aside', showLog.value)
if(showLog.value){
offset.value = -116
}else{
offset.value = 20
}
}
const changeState = () => {
showLog.value = !showLog.value
emitter.emit('Aside', showLog.value)
if (showLog.value) {
offset.value = -116
} else {
offset.value = 20
}
}
</script>
<style scoped>
:deep(.el-tooltip__trigger:focus-visible) {
outline: unset;
}
:deep(.el-tooltip__trigger:focus-visible) {
outline: unset;
}
</style>

34
src/utils/request.js
View File

@ -1,34 +0,0 @@
import axios from 'axios'
const instance = axios.create({
baseURL: 'http://localhost:9090'
})
instance.interceptors.request.use(
config =>{ // 拦截器成功函数
if(config.methods == "post"){
config.data = querystring.stringify(config.data)
}
// config:包含着网络请求的所有信息
return config;
},
error =>{ // 拦截器失败函数
// 返回错误信息
return Promise.reject(error)
}
)
// 拦截器----获取数据之前
instance.interceptors.response.use(
response =>{ // 拦截器成功函数
return response.status == 200 ? Promise.resolve(response):Promise.reject(response)
},
error =>{ // 拦截器失败函数
const { response } = error;
errorHandle(response.status,response.info)
}
)
export default instance

1
src/views/Commodity/MerchandiseCenter.vue
View File

@ -247,7 +247,6 @@
</template>
<script setup lang="ts">
import instance from '@/utils/request';
import { ElMessage } from 'element-plus';
import { ref, onMounted } from 'vue';
const pageNum = ref(0);

59
src/views/Commodity/TypeManagement.vue
View File

@ -51,7 +51,7 @@
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button @click="cancel" >取消</el-button>
<el-button type="primary" @click="dialogVisible = false">
提交
</el-button>
@ -75,22 +75,16 @@
</template>
</el-table-column>
</el-table>
<button @click="pri">aaa</button>
</template>
<script setup lang="ts">
import { ref , reactive} from 'vue'
import { ElMessageBox } from 'element-plus'
import { ElMessage } from 'element-plus'
import type { UploadFile } from 'element-plus';
import { ref } from 'vue'
import { userStore } from '../../store/userStore';
const store = userStore()
const dialogImageUrl = ref('');
const disabled = ref(false);
const uploadedFiles = ref<UploadFile[]>([]);//商品图片数组
const uploadedDescription = ref<UploadFile[]>([]);//商品图文描述数组
const imageUrl = ref('')
const selectedItems = ref([])
const dialogVisible = ref(false)
@ -99,31 +93,37 @@ const form = ref({
type_name: '',
tips: ''
})
const pri =()=>{
console.log(store.loginUser);
}
const handleSelectionChange = (row: any) => {
selectedItems.value = JSON.parse(JSON.stringify(row))
}
const Add_type =()=>{
dialogVisible.value = true;
form.value = {
img: '',
type_name: '',
tips: ''
}
}
const tableData = [
const tableData = ref([
{
img: 'https://s21.ax1x.com/2024/10/24/pAdzjZ6.png',
type_name: '材料包',
tips: '提供用户自定义DIY',
}
]
])
const Add_type =()=>{
dialogVisible.value = true;
if(form.value.type_name) {
form.value = {
img: '',
type_name: '',
tips: ''
}
}
tableData.value.push(form.value)
}
const cancel = () => {
dialogVisible.value = false
resetForm();
}
const resetForm = () => {
form.value = {
img: '',
type_name: '',
tips: ''
}
};
// const handleClose = (done: () => void) => {
// ElMessageBox.confirm('确定不添加商品类别吗?')
@ -134,6 +134,9 @@ const tableData = [
// // catch error
// })
// }
const handleSelectionChange = (row: any) => {
selectedItems.value = JSON.parse(JSON.stringify(row))
}
const handleFileUpload = (event: Event) => {
const target = event.target as HTMLInputElement;

93
src/views/User/UserManagement.vue
View File

@ -3,7 +3,7 @@
<div style="margin: 10px 0">
<el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入用户名" v-model="username"></el-input>
<el-button class="ml-5" type="primary" @click="load" style="height: 25px;">搜索</el-button>
<el-button class="ml-5" type="primary" @click="onSearch(username)" style="height: 25px;">搜索</el-button>
<el-button type="warning" @click="reset" style="height:25px">重置</el-button>
</div>
<!-- <div style="margin: 15px 0">-->
@ -28,13 +28,13 @@
@selection-change="handleSelectionChange" :header-cell-style="{'text-align': 'center'}">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="id" label="序号" width="50"></el-table-column>
<el-table-column prop="username" label="用户昵称" ></el-table-column>
<el-table-column prop="avatar" label="头像"></el-table-column>
<el-table-column prop="identity" label="身份"></el-table-column>
<el-table-column prop="userName" label="用户昵称" ></el-table-column>
<el-table-column prop="userAvatar" label="头像"></el-table-column>
<el-table-column prop="userRole" label="身份"></el-table-column>
<el-table-column prop="phone" label="手机号"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
<!-- <template slot-scope="scope">
<el-button type="success" @click="detail(scope.row)">详情 <i class="el-icon-edit"></i></el-button>
<el-popconfirm
class="ml-5"
@ -45,22 +45,22 @@
title="您确定删除吗？"
@confirm="del(scope.row.id)"
>
<el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
<el-button type="danger" slot="reference">封禁 <i class="el-icon-remove-outline"></i></el-button>
</el-popconfirm>
</template>
</template> -->
</el-table-column>
</el-table>
<!-- 分页查询 -->
<div style="padding: 10px 0">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-size="pageSize"
:current-page="searchParams.current"
:page-size="searchParams.pageSize"
:page-sizes="[2, 5, 10, 20]"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:small="null"
:disabled="null"
:background="null"
background
layout="total, sizes, prev, pager, next, jumper"
:total="total"
/>
@ -69,29 +69,68 @@
</template>
<script setup lang="ts">
import instance from '@/utils/request';
import { ElMessage } from 'element-plus';
import myAxios from '@/api/myAxios';
import {ref, onMounted} from 'vue'
import { da } from 'element-plus/es/locales.mjs';
//获取的所有数据
const tableData = ref([])
const pageNum = ref(0)
const pageSize = ref(0)
//筛选条数
const total = ref(0)
//请求参数
const searchParams: any = ref({
//当前页码
current: 1,
//每页显示条数
pageSize: 5
})
onMounted(() => {
load()
getUserList()
})
const username = ref('')
const reset =()=>{
username.value = ''
onSearch(username.value)
getUserList()
}
const load = async () => {
await instance.get('/admin/findAllUsers').then(res => {
console.log(res.data.data)
res.data.data.foreach((item:any) => {
console.log(item)
})
tableData.value = res.data.data
})
//用户信息列表
const getUserList = async () => {
//为什么要用展开表达式({...})，因为是POST请求，如果直接对象.value,传的是Object类型
const res = await myAxios.post('/user/list/page/vo',{...searchParams.value})
if(res.data.code === 1) {
//给前端表格赋值 字段名一定要对应
tableData.value = res.data.data.records
//筛选条数
total.value = parseInt(res.data.data.total)
}else {
ElMessage({
type: 'info',
message: '查询失败',
})
}
}
const handleSelectionChange = (val:any)=>{
console.log(val)
}
// 处理页大小变化
const handleSizeChange = (newSize:any) => {
searchParams.value.pageSize = newSize //新的页面条数
getUserList() //重新发起请求
};
// 处理当前页变化
const handleCurrentChange = (Current:any) => {
searchParams.value.current = Current //新的当前页面
getUserList() //重新发起请求
};
//搜索按钮方法
const onSearch = (data : String)=>{
console.log(data)
searchParams.value.userName = data
searchParams.value.current = 1
getUserList()
}
</script>