<template> <div class="user"> <el-form ref="searchFrom" :model="searchFrom" label-width="80px" inline> <el-form-item label="用户ID"> <el-input v-model="searchFrom.old_user_id"></el-input> </el-form-item> <el-form-item label="课程名称"> <el-input v-model="searchFrom.course_title"></el-input> </el-form-item> <el-form-item label="手机号"> <el-input v-model="searchFrom.mobile"></el-input> </el-form-item> <el-form-item> <el-button type="primary" plain @click="getUser">搜索</el-button> </el-form-item> </el-form> <el-table :data="userList" style="width: 100%"> <el-table-column className="f-c" label="用户"> <template slot-scope="scope"> <img class="avatar" :src="scope.row.headimgurl">{{scope.row.nickname}}(ID:{{scope.row.old_user_id}}) </template> </el-table-column> <el-table-column prop="mobile" label="手机号"> </el-table-column> <el-table-column prop="course_title" label="课程名字"> </el-table-column> <el-table-column prop="start_time" label="开课时间"> </el-table-column> <el-table-column label="操作" v-if="!$store.state.readonly"> <template slot-scope="scope"> <el-button size="mini" plain v-if="$store.state.deletePermission" type="danger" @click="deleteOption(scope.row.id)"> 删除 </el-button> </template> </el-table-column> </el-table> <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/> </div> </template> <script> import {getOldListApi,delOldUseApi} from "../../service/api"; import page from '../framework/page' export default { name: "index", data(){ return { searchFrom:{ mobile:'', old_user_id:"", course_title:"" }, userList:[], total:0, nowPage:1, limit: 10, showDetail:false } }, components:{ page, }, mounted(){ this.getUser() }, methods:{ onPageChange(val){ this.nowPage = val this.getUser() }, onSizeChange(val){ this.limit = val; this.nowPage = 1; this.getUser() }, getUser(){ let json = { page: this.nowPage, limit: this.limit } if (this.searchFrom.old_user_id) { json.old_user_id = this.searchFrom.old_user_id } if (this.searchFrom.course_title) { json.course_title = this.searchFrom.course_title } if (this.searchFrom.mobile) { json.mobile = this.searchFrom.mobile } getOldListApi(json).then(res=>{ this.userList = res.list; this.total = res.total }) }, deleteOption(id){ this.$confirm('确定删除?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(()=>{ delOldUseApi(id).then(res=>{ this.$message({ type: 'success', message: '删除成功' }); this.getUser(); }); }); }, } } </script> <style scoped lang="less"> @import "../../util/public"; .avatar { width: 50px; margin-right: 5px; border-radius: 50%; height: 50px; } .user{ /*height: 100%;*/ overflow: auto; padding: 20px 0; .btn-content{ text-align: center; } } </style> <style> .f-c > div { display: flex !important; flex-flow: row; justify-content: flex-start; align-items: center; } </style>