<template> <div> <div class="leakage-top"> <div style="color: #666666"></div> <div class="operate-btn"> <delids :multipleSelection2="multipleSelection" @del="del()" >删除</delids > <el-button type="primary" @click="refresh">刷新</el-button> <el-button type="primary" @click="block = !block">查询</el-button> <el-button type="primary" @click="exportData">导出</el-button> </div> </div> <el-form class="search-div" v-if="block" :model="leakyCableForm" :inline="true" size="mini" > <el-form-item label="漏缆描述:"> <el-input placeholder="请输入漏缆描述" v-model="leakyCableForm.leakyCableDescribe" clearable > </el-input> </el-form-item> <el-form-item label="漏缆编号:"> <el-input placeholder="请输入漏缆编号" v-model="leakyCableForm.leakyCableCode" clearable > </el-input> </el-form-item> <el-form-item label="漏缆型号:"> <el-select placeholder="请选择漏缆型号" v-model="leakyCableForm.leakyCableMode" clearable > <el-option v-for="item in equipTypeList" :key="item.leakyCableMode" :label="item.leakyCableMode" :value="item.leakyCableMode" ></el-option> </el-select> </el-form-item> <el-form-item label="所在铁路线:"> <el-select placeholder="请选择所在铁路线" v-model="leakyCableForm.wayId" clearable @change="changerailWay()" > <el-option v-for="item in railWaySelect" :key="item.id" :label="item.name" :value="item.id" ></el-option> </el-select> </el-form-item> <el-form-item label="所在站点:"> <el-select placeholder="请选择所在站点" v-model="leakyCableForm.siteId" @change="changesite()" clearable > <el-option v-for="item in stationSelect2" :key="item.id" :label="item.siteName" :value="item.id" ></el-option> </el-select> </el-form-item> <el-form-item label="所在FSU:"> <el-select placeholder="请选择所在FSU" v-model="leakyCableForm.fsuId" @change="changefsu()" clearable > <el-option v-for="item in fsuSelect2" :key="item.id" :label="item.equipName" :value="item.id" ></el-option> </el-select> </el-form-item> <el-form-item label="所在监测设备:"> <el-select placeholder="请选择所在监测设备" v-model="leakyCableForm.monitor" clearable > <el-option v-for="item in monitor2" :key="item.id" :label="item.equipName" :value="item.id" ></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="success" @click="searchQuery()">查询</el-button> <el-button type="primary" @click="reset">重置</el-button> </el-form-item> </el-form> <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="leakyCableDescribe" label="漏缆描述" show-overflow-tooltip align="center" /> <el-table-column prop="leakyCableCode" label="漏缆编号" show-overflow-tooltip align="center" /> <el-table-column prop="leakyCableMode" label="漏缆型号" show-overflow-tooltip align="center" /> <el-table-column prop="railWayName" label="所在铁路线" align="center" /> <el-table-column prop="siteName" label="所在站点" align="center" /> <el-table-column prop="fsuName" label="所在FSU" align="center" /> <el-table-column prop="equipName" label="所在监测设备" 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> <el-link type="primary" :underline="false" @click="toEdit(row)">编辑</el-link> </template> </el-table-column> </el-table> <Pagination :limit="leakyCableForm.size" :page="leakyCableForm.current" :total="total" class="pagination" @pagination="handlePageChange" /> <el-dialog title="编辑-漏缆" :visible.sync="visible" width="40%" :close-on-click-modal="false" > <leakyCable :curInfo="curInfo" :isEdit="1" @update="update" /> </el-dialog> </div> </template> <script> import leakyCable from '@/views/setting/add/comp/leakyCable.vue' import { leakyCablelist, leakyCablebatchDelete, railWaylist, selectForSite, selectForFsu, selectForEquip, } from "../../api"; import { cableTypeEnum } from "../../../maintain/api"; import { successAlert, warningAlert } from "@/utils/alert"; import download from "@/utils/download"; import { exportLeaky } from "@/api/export"; export default { components: {leakyCable}, data() { return { railWaySelect: [], stationSelect2: [], fsuSelect2: [], equipTypeList: [], monitor2: [], leakyCableForm: formInit(), tableData: [], params: { current: 1, size: 10, }, total: 10, multipleSelection: [], ids: [], block: 0, istrue: 0, exids: [], curInfo: {}, visible: false }; }, methods: { toEdit(row) { this.visible = true this.curInfo = row }, update(data) { this.visible = false if(data) { this.getTableData() } }, changerailWay() { selectForSite({ wayId: this.leakyCableForm.wayId }).then((res) => { this.stationSelect2 = res; }); }, changesite() { selectForFsu({ siteId: this.leakyCableForm.siteId }).then((res) => { this.fsuSelect2 = res; }); }, changefsu() { selectForEquip({ fsuId: this.leakyCableForm.fsuId }).then((res) => { this.monitor2 = res; }); }, tableRowClassName({ row, rowIndex }) { return rowIndex % 2 === 0 ? "" : "single-row"; }, changeType(item) { this.activeName = item.key; }, del() { let ids = this.ids; leakyCablebatchDelete({ ids }).then((res) => { if (res.code == 200) { successAlert("删除成功"); this.getTableData(); } else { warningAlert("删除失败"); } }); }, refresh() { this.reset(); }, searchQuery() { this.istrue = 1; this.getTableData(); }, reset() { this.leakyCableForm = formInit(); this.searchQuery(); }, exportData() { if (this.exids.length == 0) { this.$message.warning("暂无数据"); return false; } else { exportLeaky({ ids: this.exids }).then((res) => { download(res, "vnd.ms-excel", `漏缆表.xls`); }); } }, handleSelectionChange(val) { this.multipleSelection = val; this.ids = this.multipleSelection.map((i) => i.id); }, handleView(row) { this.$router.push({ path: "/detail", query: { id: row.id, type: 5, name: row.leakyCableDescribe }, }); }, handlePageChange(pageData) { this.leakyCableForm.size = pageData.size; this.leakyCableForm.current = pageData.page; this.getTableData(); }, getTableData() { leakyCablelist(this.leakyCableForm).then((res) => { let list = res.records || []; this.tableData = list; this.total = res.total; this.exids = list.map((i) => i.id); if (this.istrue == 1) { if (this.tableData.length) { successAlert("操作成功"); } else { warningAlert("查询结果为空"); } this.istrue = 0; } }); }, getAllWay() { railWaylist(this.params).then((res) => { this.railWaySelect = res.records; if (res.total > this.params.size) { this.params.size = res.total; this.getAllWay(); } }); }, getLeakyCablel() { cableTypeEnum().then((res) => { let list = res || []; this.equipTypeList = list; }); }, }, created() { var that = this; document.onkeydown = function (e) { var key = window.event.keyCode; if (key == 13) { that.searchQuery(); } }; }, mounted() { this.getTableData(); this.getLeakyCablel(); this.getAllWay(); }, }; function formInit(data = {}) { return { wayId: "", parentId: "", siteId: "", fsuId: "", monitor: "", leakyCableCode: "", leakyCableDescribe: "", siteName: "", leakyCableMode: "", current: 1, size: 10, ...data, }; } </script> <style lang="scss" scoped> .el-link { margin-right: 20px; } .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>