<template><div><plan title="账号列表"><!-- @selection-change="handleSelectionChange"添加这个属性就是点击可以得到你想要的value值 --><el-tablestyle="width: 100%":data="list"@selection-change="handleSelectionChange"ref="table"><el-table-column type="selection" width="55"></el-table-column><el-table-column label="日期" width="120"><template slot-scope="scope">{{ scope.row.ctime |dataFormat}}</template></el-table-column><el-table-column prop="account" label="账号" width="120"></el-table-column><el-table-column label="管理员" prop="userGroup"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button size="mini" @click="edit(scope.row)">编辑</el-button><el-button size="mini" type="danger" @click="deletes(scope.row)">删除</el-button></template></el-table-column></el-table><div style="margin-top: 20px"><el-button @click="alldel">批量删除</el-button><el-button @click="toggleSelection()">取消选择</el-button></div><el-pagination:current-page="pageinfo.currentPage4"@size-change="handleSizeChange"@current-change="handleCurrentChange":page-sizes="[10, 20, 30, 40]":page-size.sync="pageinfo.pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination><!-- 弹出框 --><el-dialog title="修改用户信息" :visible.sync="isshow" width="30%"><el-form ref="form" label-width="80px" size="mini" :model="listone"><el-form-item label="账号" prop="account"><el-input v-model="listone.account"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="isshow = false">取 消</el-button><el-button type="primary" @click="sumit">确 定</el-button></span></el-dialog></plan></div>
</template><script>
import {usersList,usersEditApi,usersBatchdelApi,usedel
} from "@/api/account.api";
export default {data() {return {pageinfo: {currentPage: 1,pageSize: 5},ruleForm: {account: "",password: "",userGroup: ""},list: [],listone: {},total: 0,isshow: false,ids: [],id: ""};},created() {this.getinfo();},methods: {// 批量删除handleSelectionChange(val) {this.ids = val.map(item => item.id);},alldel() {usersBatchdelApi(this.ids).then(res => {console.log(res);this.getinfo();});},// 获取用户信息async getinfo() {const res = await usersList(this.pageinfo);this.total = Number(res.data.total);this.list = res.data.data;},//  编辑edit(val) {this.listone = { ...val };this.isshow = true;},//  删除deletes(val) {this.id = val.id;usedel(this.id).then(res => {console.log(res);this.getinfo();});},toggleSelection() {this.$refs.table.clearSelection();},sumit() {usersEditApi(this.listone).then(res => {if (res.data.code === 0) {this.isshow = false;this.getinfo();}});},handleSizeChange(val) {this.pageinfo.pageSize = val;this.getinfo();},handleCurrentChange(val) {this.pageinfo.currentPage = val;this.getinfo();}}
};
</script><style lang="scss" scoped>
</style>