<template> <div class="app-container"> <!--查询结果Table显示--> <div> <el-row class="table-title"> <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>分组列表</div></el-col> <el-col :span="12" :offset="6" class="edit_btns"> <el-button v-if="hasPerm('/group/add')" class="edit_btn" size="small" @click="add">新增</el-button> </el-col> </el-row> <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange"> <el-table-column :index="indexMethod" align="center" type="index" /> <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip> <template slot-scope="scope"> <span>{{ scope.row[column.value] }}</span> </template> </el-table-column> <el-table-column label="操作" align="center"> <template slot-scope="scope"> <el-button v-if="hasPerm('/group/edit')" type="text" @click="edit(scope.row)">编辑</el-button> <el-button v-if="hasPerm('/group/delete')" type="text" @click="del(scope.row)">删除</el-button> </template> </el-table-column> </el-table> </div> <!--分页--> <div class="pagination-container"> <el-pagination :current-page="listQuery.offset" :page-sizes="[20,30,50]" :page-size="listQuery.limit" :total="total" align="center" layout="total, sizes, prev, pager, next" @size-change="handleSizeChange" @current-change="handleCurrentChange"/> </div> <add-group ref="addgroup" @watchChild="fetchData"/> </div> </template> <script> import { getGroupList, delGroup, batchExportGroup } from '@/api/group' import AddGroup from './addGroup' export default { name: 'ListGroup', components: { AddGroup }, data() { return { listQuery: { maxLength: '5', offset: 1, limit: 20, sort: '', order: '' }, // 筛选条件 columns: [ { text: '分组名称', value: 'groupName', align: 'center' }, { text: '组内井', value: 'wellNameList', align: 'center' }, { text: '接收人员', value: 'userNameList', align: 'center' } ], // 显示列 multipleSelection: [], // 多选选中项 list: [], // 列表数据 total: 0, // 数据总数 listLoading: true, // 加载动画 fullscreenLoading: false // 全屏加载动画 } }, created() { this.fetchData(true) }, methods: { // 新增组 add() { this.$refs.addgroup.initDialog() }, // 编辑组信息 edit(row) { const query = { id: row.id, groupName: row.groupName, deptid: row.deptid } // 跳转到编辑组页面 this.$router.push({ path: '/group/editGroup', query: { ...query }}) }, // 删除组 del(row) { this.$confirm( '确定要删除该组吗?', '确认操作', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' } ).then(() => { const params = { id: row.id } delGroup(params).then(response => { if (response.code === 200) { this.$message.success('删除成功') this.fetchData() } }) }) }, // 批量导出 batchExport() { // 全屏加载动画 const loading = this.$loading({ lock: true, text: '数据处理中,请稍后...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }) batchExportGroup(this.listQuery).then(res => { loading.close() // 关闭加载动画 const blob = new Blob([res.data]) const downloadElement = document.createElement('a') const href = window.URL.createObjectURL(blob) // 创建下载的链接 downloadElement.href = href downloadElement.download = `分组列表.xlsx` // 下载后文件名 document.body.appendChild(downloadElement) downloadElement.click() // 点击下载 document.body.removeChild(downloadElement) // 下载完成移除元素 window.URL.revokeObjectURL(href) // 释放blob对象 }).catch((res) => { loading.close() this.$message.error(res.message) }) }, // 查询数据 search() { this.fetchData(false) }, // 获取组列表 fetchData(isNowPage = true) { this.listLoading = true if (!isNowPage) { // 是否显示当前页,否则跳转第一页 this.listQuery.offset = 1 } getGroupList(this.listQuery).then(response => { if (response.code === 200) { this.list = response.data.rows this.total = parseInt(response.data.total) this.listLoading = false } }) }, indexMethod(index) { return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1 }, // 改变页容量 handleSizeChange(val) { this.listQuery.limit = val this.fetchData() }, // 改变当前页 handleCurrentChange(val) { this.listQuery.offset = val this.fetchData() }, // 多选触发方法 handleSelectionChange(val) { this.multipleSelection = val } } } </script> <style rel="stylesheet/scss" lang="scss" scoped> $tableTitleHeight:46px; .table{ margin-bottom: 20px; } .pagination-container{ margin-bottom: 50px; } .table-title{ background-color:rgba(243, 243, 243, 1); height: $tableTitleHeight; .title-header{ line-height:$tableTitleHeight; color: #606266; font-size: 15px; i{ margin-left: 5px; margin-right: 5px; } } } .edit_btns{ .edit_btn{ float:right; margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2 } } </style>