<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-select v-model="listQuery.filter.user_type" :placeholder="'用户身份'" clearable class="filter-item" style="width: 110px"> <el-option v-for="item in UserTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/> </el-select> <!--<el-select v-model="listQuery.filter.group_type" :placeholder="'组内身份'" clearable class="filter-item" style="width: 110px">--> <!--<el-option v-for="item in IdentifyTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>--> <!--</el-select>--> <el-select v-model="listQuery.filter.is_recommend" :placeholder="'推荐'" clearable class="filter-item" style="width: 100px"> <el-option v-for="item in ReBooleanTypeOptions" :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('recommend')">推荐 </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"> <span>{{ scope.row.id }}</span> </template> </el-table-column> <el-table-column align="center" label="用户ID " width="80"> <template slot-scope="scope"> <router-link :to="'/user/edit/'+scope.row.user_id" class="link-type"> <span>{{ scope.row.user_id }}</span> </router-link> </template> </el-table-column> <el-table-column align="center" label="用户名"> <template slot-scope="scope"> <span>{{ scope.row.nick_name }}</span> </template> </el-table-column> <el-table-column align="center" label="联系电话"> <template slot-scope="scope"> <span>{{ scope.row.phone }}</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"> <router-link :to="{path: '/group/list/', query: {user_id: scope.row.user_id}}" class="link-type"> <span>{{ scope.row.group_nums }}</span> </router-link> </template> </el-table-column> <el-table-column align="center" label="帖子数"> <template slot-scope="scope"> <router-link :to="{path: '/topic/list/', query: {user_id: scope.row.user_id}}" class="link-type"> <span>{{ scope.row.topic_nums }}</span> </router-link> </template> </el-table-column> <!--<el-table-column width="150px" align="center" label="组内身份">--> <!--<template slot-scope="scope">--> <!--<span>{{ scope.row.group_identify }}</span>--> <!--</template>--> <!--</el-table-column>--> <el-table-column align="center" label="用户身份"> <template slot-scope="scope"> <span>{{ scope.row.user_identify }}</span> </template> </el-table-column> <el-table-column align="center" label="是否推荐"> <template slot-scope="scope"> <el-tag :type="scope.row.is_recommend | isOnlineFilter">{{ scope.row.is_recommend==1 ? '是' : '否' }}</el-tag> </template> </el-table-column> is_recommend </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} from '@/api/user' import Pagination from '@/components/Pagination' // Secondary package based on el-pagination import waves from '@/directive/waves' import { mapGetters } from 'vuex' export default { name: 'UserList', components: {Pagination}, filters: { isOnlineFilter(status) { const statusMap = { 1: 'success', 0: 'info', } return statusMap[status] }, genderFilter(status) { const statusMap = { '男': 'success', '女': 'info', '全部': 'danger' } return statusMap[status] }, }, directives: {waves}, data() { return { adminRole: true, list: null, total: 0, listLoading: true, multipleSelection: [], del_list: [], listQuery: { page: 1, limit: 10, filter: { value: '', key: '', is_online: '', is_recommend: '', }, }, ReBooleanTypeOptions: [ {'key': '1', 'display_name': '是'}, {'key': '0', 'display_name': '否'} ], IdentifyTypeOptions: [ {'key': 1, 'display_name': '组长'}, {'key': 2, 'display_name': '管理员'}, {'key': 3, 'display_name': '长老'}, {'key': 4, 'display_name': '普通群员'}, ], UserTypeOptions: [ {'key': '0', 'display_name': '普通用户'}, {'key': '1', 'display_name': '马甲用户'} ], SearchTypeOptions: [ {'key': 'id', 'display_name': 'ID'}, {'key': 'user_id', 'display_name': '用户ID'}, {'key': 'nick_name', 'display_name': '用户名'}, {'key': 'phone_num', 'display_name': '联系电话'}, ] } }, created() { this.getList() }, computed: { ...mapGetters([ 'roles' ]) }, methods: { getList() { this.listLoading = true this.listQuery.group_id = this.$route.query.group_id 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() }, handleOfflineOrOnline(val) { const length = this.multipleSelection.length; var ids = []; 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 if (val === 'recommend') { this.multipleSelection[i].is_recommend = 0 } else { this.multipleSelection[i].is_online = 1 } ids.push(this.multipleSelection[i].user_id) } OffLineOrOnLine({type: val, ids: JSON.stringify(ids)}).then(response => { this.multipleSelection = []; this.$message.success(response.data.data.message); setTimeout(() => { this.$router.go(0) }, 1500) }) }, handleFilter() { this.listQuery.page = 1 this.getList() }, handleCreate() { this.$router.push('/user/create') } } } </script> <style scoped> .edit-input { padding-right: 100px; } .cancel-btn { position: absolute; right: 15px; top: 10px; } </style>