2020-06-17 10:04:40 +00:00
|
|
|
<template>
|
2020-06-18 02:33:42 +00:00
|
|
|
<div>
|
|
|
|
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
|
|
|
|
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|
|
|
|
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
|
|
|
|
|
<el-breadcrumb-item>用户列表</el-breadcrumb-item>
|
|
|
|
|
|
|
|
|
|
</el-breadcrumb>
|
|
|
|
|
<!--卡片-->
|
|
|
|
|
<el-card class="box-card">
|
|
|
|
|
<el-row :gutter="10">
|
|
|
|
|
<el-col :span="7">
|
|
|
|
|
<el-input placeholder="请输入内容" >
|
|
|
|
|
<el-button slot="append" icon="el-icon-search"></el-button>
|
|
|
|
|
</el-input>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="4">
|
|
|
|
|
<el-button type="primary">添加用户</el-button>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
2020-06-18 03:11:35 +00:00
|
|
|
|
|
|
|
|
<!--列表table-->
|
|
|
|
|
<el-table border stripe :data="userList" style="width: 100%">
|
|
|
|
|
<el-table-column label="#" type="index"></el-table-column>
|
|
|
|
|
<el-table-column prop="username" label="姓名" width="180"></el-table-column>
|
|
|
|
|
<el-table-column prop="email" label="邮箱" width="180"></el-table-column>
|
|
|
|
|
<el-table-column prop="mobile" label="电话" width="100"></el-table-column>
|
|
|
|
|
<el-table-column prop="role_name" label="角色" width="100"></el-table-column>
|
|
|
|
|
<el-table-column width="100" label="状态" >
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-switch
|
|
|
|
|
v-model="scope.row.mg_state" @change="changeState">
|
|
|
|
|
</el-switch>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="操作" >
|
|
|
|
|
<template >
|
|
|
|
|
<el-button size="mini" type="primary" icon="el-icon-edit"></el-button>
|
|
|
|
|
<el-button size="mini" type="danger" icon="el-icon-delete"></el-button>
|
|
|
|
|
<el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
|
|
|
|
|
<el-button size="mini" type="warning" icon="el-icon-setting"></el-button>
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
2020-06-18 02:33:42 +00:00
|
|
|
</el-card>
|
2020-06-18 03:11:35 +00:00
|
|
|
|
2020-06-18 02:33:42 +00:00
|
|
|
</div>
|
|
|
|
|
|
2020-06-17 10:04:40 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
2020-06-18 03:11:35 +00:00
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
queryInfo: {
|
|
|
|
|
query: '',
|
|
|
|
|
pagenum: 1,
|
|
|
|
|
pagesize: 10
|
|
|
|
|
},
|
|
|
|
|
userList: [],
|
|
|
|
|
total: 0
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
changeState (state) {
|
|
|
|
|
console.log(state)
|
|
|
|
|
},
|
|
|
|
|
async getUserList () {
|
|
|
|
|
const { data: res } = await this.$http.get('users', {
|
|
|
|
|
params: this.queryInfo
|
|
|
|
|
})
|
|
|
|
|
if (res.meta.status !== 200) {
|
|
|
|
|
return this.$message.error(res.meta.msg)
|
|
|
|
|
}
|
|
|
|
|
this.userList = res.data.users
|
|
|
|
|
this.total = res.data.total
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created () {
|
|
|
|
|
this.getUserList()
|
|
|
|
|
}
|
2020-06-17 10:04:40 +00:00
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped></style>
|
