<template> <div class="app-container"> <div class="filter-container"> <el-input :placeholder="'搜素'" v-model="listQuery.filter.value" style="width: 180px;" class="filter-item" @keyup.enter.native="handleFilter"/> <el-select v-model="listQuery.filter.key" :placeholder="'搜索字段'" clearable class="filter-item" style="width: 110px"> <el-option v-for="item in SearchTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/> </el-select> <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button> <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">创建 </el-button> <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleOfflineOrOnline('offline')">下线 </el-button> <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleOfflineOrOnline('online')">上线 </el-button> </div> <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange"> <el-table-column type="selection" align="center"></el-table-column> <el-table-column align="center" label="账号ID"> <template slot-scope="scope"> <router-link :to="'/account/edit/'+scope.row.id" class="link-type"> <span>{{ scope.row.id }}</span> </router-link> </template> </el-table-column> <el-table-column align="center" label="用户名"> <template slot-scope="scope"> <span>{{ scope.row.username }}</span> </template> </el-table-column> <el-table-column align="center" label="邮箱"> <template slot-scope="scope"> <span>{{ scope.row.email }}</span> </template> </el-table-column> <el-table-column align="center" label="是否在线"> <template slot-scope="scope"> <el-tag :type="scope.row.is_online | isOnlineFilter">{{ scope.row.is_online==1 ? '是' : '否' }}</el-tag> </template> </el-table-column> <el-table-column align="center" label="操作"> <template slot-scope="scope"> <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="reset(scope.row)">重置密码</el-button> </template> </el-table-column> </el-table> <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" style="margin-left: 250px;" @pagination="getList"/> </div> </template> <script> import {fetchList, OffLineOrOnLine, resetPassword} from '@/api/account' import Pagination from '@/components/Pagination' // Secondary package based on el-pagination import waves from '@/directive/waves' export default { name: 'UserList', components: {Pagination}, directives: {waves}, filters: { isOnlineFilter(status) { const statusMap = { 1: 'success', 0: 'info', } return statusMap[status] } }, data() { return { list: null, total: 0, listLoading: true, multipleSelection: [], del_list: [], listQuery: { page: 0, limit: 10, filter: { value: '', key: '', is_online: '', }, }, BooleanTypeOptions: [ {'key': 1, 'display_name': '是'}, {'key': 0, 'display_name': '否'} ], SearchTypeOptions: [ {'key': 'user__username', 'display_name': '用户名'}, ] } }, created() { this.getList() }, methods: { getList() { this.listLoading = true fetchList(this.listQuery).then(response => { this.list = response.data.data.data this.total = response.data.data.total this.listLoading = false }) }, handleSelectionChange(val) { this.multipleSelection = val; }, handleSizeChange(val) { this.listQuery.limit = val this.getList() }, handleCurrentChange(val) { this.listQuery.page = val this.getList() }, handleFilter() { this.listQuery.page = 1 this.getList() }, handleCreate() { this.$router.push('/account/create') }, handleOfflineOrOnline(val) { const length = this.multipleSelection.length; let str = ''; this.del_list = this.del_list.concat(this.multipleSelection); for (let i = 0; i < length; i++) { if (val === 'offline') { this.multipleSelection[i].is_online = 0 } else { this.multipleSelection[i].is_online = 1 } str += this.multipleSelection[i].id + ' '; } OffLineOrOnLine({type: val, ids: str}).then(response => { this.multipleSelection = []; this.$message.success(response.data.data.message); this.$router.go(0) }) }, reset(data){ resetPassword(data).then(response =>{ this.$message.success('重置成功') }) } } } </script> <style scoped> .edit-input { padding-right: 100px; } .cancel-btn { position: absolute; right: 15px; top: 10px; } </style>