parent
8160c594ad
commit
949c725cb1
@ -0,0 +1,318 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="tableTop">
|
||||
<div>
|
||||
<el-input @input="handleSearch" suffix-icon="el-icon-search" style="width: 300px" placeholder="请输入搜索关键字" v-model="input" clearable></el-input>
|
||||
</div>
|
||||
<div>
|
||||
<el-button @click="handleDeleteMul" type="danger">批量删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="tableData"
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="60"></el-table-column>
|
||||
<el-table-column prop="user_id" label="id" width="100"></el-table-column>
|
||||
<el-table-column prop="user_name" label="用户名" width="120"></el-table-column>
|
||||
<el-table-column prop="user_phone" label="联系电话" width="180"></el-table-column>
|
||||
<el-table-column prop="user_role" label="身份" width="150"
|
||||
:filters="[{ text: '普通用户', value: 0 }, { text: '会员', value:1 }]"
|
||||
:filter-method="filterRole">
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
:type="scope.row.user_role === 0 ? 'primary' : 'success'"
|
||||
disable-transitions>
|
||||
<span v-show="scope.row.user_role===0">普通用户</span>
|
||||
<span v-show="scope.row.user_role===1">会员</span>
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="member_time" label="会员截止日期" width="180"></el-table-column>
|
||||
<el-table-column prop="user_state" label="账号状态" width="220"
|
||||
:filters="[{ text: '禁用', value: 0 }, { text: '正常', value:1 }]"
|
||||
:filter-method="filterState">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
@change="handleStateChange(scope.row)"
|
||||
v-model="scope.row.user_state===1"
|
||||
active-text="正常"
|
||||
inactive-text="禁用">
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="user_pic" label="用户头像" width="180">
|
||||
<template slot-scope="scope">
|
||||
<img :src="require('/Users/zhangjiadi/IdeaProjects/毕业设计/picFiles'+scope.row.user_pic)" style="height: 60px;width: 60px" alt="">
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleDelete(scope.row)" type="danger" size="small" plain>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
:current-page="currentPage"
|
||||
:page-size="pageSize"
|
||||
layout="total, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
:page-count="page_number"
|
||||
style="margin-top: 30px"
|
||||
@current-change="handleCurrentChange">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Cookie from "js-cookie";
|
||||
import {http} from "@/js/http";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
user_id: 1,
|
||||
user_name: '',
|
||||
user_pwd: '',
|
||||
user_phone:'',
|
||||
user_state:1,
|
||||
user_role:1,
|
||||
user_pic:'/10001/20240307170114539.jpg',
|
||||
member_time:''
|
||||
}],
|
||||
multipleSelection: [],
|
||||
input: '',
|
||||
|
||||
currentPage:1,
|
||||
pageSize:8,
|
||||
page_number:1,//总页数
|
||||
total:10,//总条数
|
||||
//图片相关
|
||||
// request:http+'/upload',
|
||||
// headers:{ Authorization: Cookie.get('token') },
|
||||
// fileList: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.currentPage=1;
|
||||
this.fetchData();
|
||||
},
|
||||
methods: {
|
||||
fetchData(){
|
||||
//页面首次加载时获取所有用户信息
|
||||
const _this=this;
|
||||
try {
|
||||
axios({
|
||||
method: 'post',
|
||||
url: 'http://localhost:8181/user/list',
|
||||
headers: {
|
||||
Authorization: Cookie.get('token'),
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
data:{
|
||||
page:_this.currentPage,
|
||||
page_size:_this.pageSize
|
||||
}
|
||||
}).then(function (response){
|
||||
if (response.data.code===200){
|
||||
//查询所有用户信息成功
|
||||
_this.tableData=response.data.data.users;
|
||||
_this.page_number=response.data.data.page_number;
|
||||
_this.total=response.data.data.total;
|
||||
}
|
||||
if (response.data.code===401){
|
||||
_this.$message.warning('身份验证失败,请重新登录!')
|
||||
}
|
||||
if (response.data.code===403){
|
||||
const message = response.data.msg;
|
||||
this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
|
||||
confirmButtonText: '确定'
|
||||
})
|
||||
}
|
||||
});
|
||||
}catch (error){
|
||||
this.$message.warning('页面加载出错,请重试!')
|
||||
}
|
||||
},
|
||||
handleCurrentChange(page) {
|
||||
this.currentPage = page;
|
||||
this.fetchData();
|
||||
},
|
||||
//多选
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = val;
|
||||
},
|
||||
//修改
|
||||
handleStateChange(row){
|
||||
const _this = this
|
||||
axios({
|
||||
method: 'post',
|
||||
url: 'http://localhost:8181/user/modifyState',
|
||||
headers: {
|
||||
Authorization: Cookie.get('token'),
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
data:{
|
||||
user_id:row.user_id
|
||||
}
|
||||
}).then(function (response){
|
||||
if (response.data.code===200) {
|
||||
//修改用户状态信息成功
|
||||
_this.handleSearch()
|
||||
}
|
||||
if (response.data.code===401){
|
||||
_this.$message.warning('身份验证失败,请重新登录!')
|
||||
}
|
||||
if (response.data.code===403){
|
||||
const message = response.data.msg;
|
||||
this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
|
||||
confirmButtonText: '确定'
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
//搜索
|
||||
handleSearch(){
|
||||
const _this = this
|
||||
try {
|
||||
axios({
|
||||
method: 'post',
|
||||
url: 'http://localhost:8181/user/query',
|
||||
headers: {
|
||||
Authorization: Cookie.get('token'),
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
data:{
|
||||
page:_this.currentPage,
|
||||
page_size:_this.pageSize,
|
||||
user_name:_this.input
|
||||
}
|
||||
}).then(function (response){
|
||||
if (response.data.code===200){
|
||||
//查询用户信息成功
|
||||
_this.tableData=response.data.data.users;
|
||||
_this.page_number=response.data.data.page_number;
|
||||
_this.total=response.data.data.total;
|
||||
}
|
||||
if (response.data.code===401){
|
||||
_this.$message.warning('身份验证失败,请重新登录!')
|
||||
}
|
||||
if (response.data.code===403){
|
||||
const message = response.data.msg;
|
||||
this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
|
||||
confirmButtonText: '确定'
|
||||
})
|
||||
}
|
||||
});
|
||||
}catch (error){
|
||||
this.$message.warning('页面加载出错,请重试!')
|
||||
}
|
||||
},
|
||||
//表格筛选相关
|
||||
filterRole(value, row) {
|
||||
return row.user_role === value;
|
||||
},
|
||||
filterState(value, row) {
|
||||
return row.user_state === value;
|
||||
},
|
||||
//删除
|
||||
handleDelete(row){
|
||||
const _this = this
|
||||
this.$confirm('此操作将永久删除该用户信息, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
//确认删除
|
||||
axios({
|
||||
method: 'post',
|
||||
url: 'http://localhost:8181/user/deletePer',
|
||||
headers: {
|
||||
Authorization: Cookie.get('token'),
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
data:{
|
||||
user_id:row.user_id
|
||||
}
|
||||
}).then(function (response){
|
||||
if (response.data.code===200){
|
||||
//删除用户成功
|
||||
_this.handleSearch()
|
||||
}
|
||||
if (response.data.code===401){
|
||||
_this.$message.warning('身份验证失败,请重新登录!')
|
||||
}
|
||||
if (response.data.code===403){
|
||||
const message = response.data.msg;
|
||||
this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
|
||||
confirmButtonText: '确定'
|
||||
})
|
||||
}
|
||||
});
|
||||
this.$message({type: 'success', message: '删除成功!'});
|
||||
}).catch(() => {
|
||||
this.$message({type: 'info', message: '已取消删除'});
|
||||
});
|
||||
},
|
||||
handleDeleteMul(){
|
||||
const _this = this
|
||||
if(_this.multipleSelection.length===0)
|
||||
this.$message({type: 'warning', message: '请选择用户'});
|
||||
else{
|
||||
let ids = []
|
||||
for (let i=0; i<_this.multipleSelection.length; i++){
|
||||
ids[i] = _this.multipleSelection[i].user_id
|
||||
}
|
||||
|
||||
this.$confirm('此操作将永久删除用户信息, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
//确认删除
|
||||
axios({
|
||||
method: 'post',
|
||||
url: 'http://localhost:8181/user/deleteMul',
|
||||
headers: {
|
||||
Authorization: Cookie.get('token'),
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
data:{
|
||||
user_ids:ids
|
||||
}
|
||||
}).then(function (response){
|
||||
if (response.data.code===200) {
|
||||
//删除用户成功
|
||||
_this.handleSearch()
|
||||
}
|
||||
if (response.data.code===401){
|
||||
_this.$message.warning('身份验证失败,请重新登录!')
|
||||
}
|
||||
if (response.data.code===403){
|
||||
const message = response.data.msg;
|
||||
this.$alert("任务出错,具体原因如下:\n"+message, '页面加载失败', {
|
||||
confirmButtonText: '确定'
|
||||
})
|
||||
}
|
||||
});
|
||||
this.$message({type: 'success', message: '批量删除成功!'});
|
||||
}).catch(() => {
|
||||
this.$message({type: 'info', message: '已取消删除'});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.tableTop{
|
||||
width: 1200px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 10px 0 20px 50px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue