<template> <div> <div class="leakage-top"> <div style="color: #666666"></div> <div class="operate-btn"> <el-button :type="multipleSelection.length ? 'primary' : 'info'" :disabled="!multipleSelection.length" @click="delData" >删除</el-button > <el-button type="primary" @click="refresh">刷新</el-button> <el-button type="primary" @click="query">查询</el-button> <el-button type="primary" @click="exportData">导出</el-button> </div> </div> <el-table ref="multipleTable" class="statistics-table" :data="tableData" tooltip-effect="dark" style="width: 100%" :row-class-name="tableRowClassName" :row-style="{ height: '50px' }" :header-cell-style="{ background: '#eaf1fe', color: '#000', fontWeight: 700, height: '50px', }" @selection-change="handleSelectionChange" > <el-table-column type="selection" width="55" align="center" /> <el-table-column prop="wayId" label="站点所属铁路线" align="center" /> <el-table-column prop="equipCode" label="设备身份编号" align="center" /> <el-table-column prop="equipFactory" label="设备厂商" show-overflow-tooltip align="center" /> <el-table-column prop="equipMode" label="设备型号" show-overflow-tooltip align="center" /> <el-table-column prop="equipName" label="设备名" show-overflow-tooltip align="center" /> <el-table-column prop="equipSerialNumber" label="设备生产序列号" show-overflow-tooltip align="center" /> <el-table-column prop="equipType" label="设备类别" show-overflow-tooltip align="center" /> <el-table-column prop="installDate" label="安装日期" show-overflow-tooltip align="center" /> <el-table-column prop="kmSign" label="设备所在铁路公里标" show-overflow-tooltip align="center" /> <el-table-column prop="repairDate" label="维护日期" show-overflow-tooltip align="center" /> <el-table-column prop="action" label="详细信息" show-overflow-tooltip align="center" > <template slot-scope="{ row }"> <el-link type="primary" :underline="false" @click="handleView(row)" >查看</el-link > </template> </el-table-column> </el-table> <pagination :limit="params.pageSize" :page="params.pageNum" :total="total" class="pagination" @pagination="handlePageChange" /> </div> </template> <script> import Pagination from "@/components/Pagination"; import { monitorEquiplist, monitorEquipbatchDelete, monitorEquipdetail, } from "../../api"; import { successAlert,warningAlert } from "@/utils/alert"; export default { props: [], components: { Pagination }, data() { return { tableData: [], params: { pageNum: 1, pageSize: 10, }, total: 10, multipleSelection: [], ids: [], }; }, computed: {}, methods: { tableRowClassName({ row, rowIndex }) { return rowIndex % 2 === 0 ? "" : "single-row"; }, changeType(item) { this.activeName = item.key; }, delData() { let ids = this.ids; monitorEquipbatchDelete({ ids }).then((res) => { if (res.code==200) { successAlert("删除成功"); this.getTableData(); }else{ warningAlert("删除失败") } }); }, refresh() { this.getTableData(); }, query() {}, exportData() {}, handleSelectionChange(val) { this.multipleSelection = val; this.ids = this.multipleSelection.map((i) => i.id); }, handleView(row) { let id = row.id; monitorEquipdetail({ id }).then((res) => { }); }, handlePageChange(pageData) { this.params.pageSize = pageData.size; this.params.pageNum = pageData.page; this.getTableData(); }, getTableData() { // this.tableData2 = this.tableData.slice(( this.params.pageNum - 1) * this.params.pageSize, // this.params.pageNum * this.params.pageSize // ); // this.total = this.tableData.length let params = { current: this.params.pageNum, size: this.params.pageSize, }; monitorEquiplist(params).then((res) => { console.log(res.records); let list = res.records || []; this.tableData = list; this.total = res.total; }); }, }, mounted() { this.getTableData(); }, }; </script> <style lang="scss" scoped> .leakage-cable { .leakage-top { margin-bottom: 20px; display: flex; align-items: flex-end; justify-content: space-between; } & ::v-deep .cell { color: #333333; } & ::v-deep .stripe { background-color: #eaf1fe; } & ::v-deep .red { background-color: #f00; } & ::v-deep .green { background-color: green; } .page { display: flex; align-items: center; justify-content: center; margin: 20px 0; .pageNum { margin: 0 20px; } } } </style> <style lang="scss"> .statistics-table { .single-row { background: #f1f6ff; } td { padding: 5px !important; } } </style>