1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<template>
<div class="user">
<el-form ref="searchFrom" :model="searchFrom" label-width="80px">
<el-row>
<el-col :span="4">
<el-form-item label="昵称">
<el-input v-model="searchFrom.nickName"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="电话">
<el-input v-model="searchFrom.mobile"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="等级">
<el-input v-model="searchFrom.level"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item>
<el-button type="primary" plain>搜索</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-table
:data="userList"
style="width: 100%">
<el-table-column
prop="user_id"
label="账号ID">
</el-table-column>
<el-table-column
prop="nickname"
label="用户名">
</el-table-column>
<el-table-column
prop="mobile"
label="手机号">
</el-table-column>
<el-table-column
prop="level"
label="等级">
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button size="mini" plain type="primary" @click="detail(scope.row)">
查看详情
</el-button>
</template>
</el-table-column>
</el-table>
<page :total="total" v-model="nowPage"/>
<detail v-model="showDetail" :showId="showId" />
</div>
</template>
<script>
import {getUserListApi} from "../../service/api";
import page from '../framework/page'
import detail from './detail'
export default {
name: "index",
data(){
return {
searchFrom:{
nickName:'',
mobile:'',
level:''
},
userList:[],
total:0,
nowPage:0,
showDetail:false,
showId:''
}
},
components:{
page,
detail
},
mounted(){
this.getUser()
},
methods:{
getUser(){
getUserListApi(this.searchFrom).then(res=>{
this.userList = res.list;
this.total = res.total
})
},
detail(data){
this.showId = data.user_id;
this.showDetail = true
},
changeShow(data){
this.showDetail=data
}
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.user{
height: 100%;
overflow: auto;
padding: 20px;
.btn-content{
text-align: center;
}
}
</style>