<!-- 设备清单的有tab的表格 --> <template> <div class='eq-list'> <div class='eq-list-top'> <el-input placeholder='搜索设备名称' size='small' @blur='getList' prefix-icon='el-icon-search' v-model='sbjc' clearable style='width:192px;margin-right:12px' ></el-input> <el-input placeholder='搜索品牌型号' size='small' @blur='getList' clearable prefix-icon='el-icon-search' v-model='keyword' style='width:192px;margin-right:12px' ></el-input> <Select @change='getList' @cancel='getList' v-model='floor' style='margin-right:12px;' width='120' tipPlace='top' caption='楼层 :' :selectdata='floorSelect' ></Select> <el-input placeholder='搜索生产厂商' clearable size='small' @blur='getList' prefix-icon='el-icon-search' v-model='manufacturer' style='width:192px;' ></el-input> </div> <el-table :data='tableData' style='width: 100%' :border='true' @row-click='rowHandle'> <el-table-column type='index' label='序号' width='60' :index='indexMethod'></el-table-column> <el-table-column prop='type_name' label='设备名称' show-overflow-tooltip resizable width='250'> <template slot-scope='{row}'>{{row.type_name || '--'}}</template> </el-table-column> <el-table-column prop='sl' label='数量' width='100'> <template slot-scope='{row}'>{{row.sl>=0?row.sl:'--'}}</template> </el-table-column> <el-table-column prop='brand' label='品牌' width='120'> <template slot-scope='{row}'>{{row.brand || '--'}}</template> </el-table-column> <el-table-column prop='sbxh' label='型号' show-overflow-tooltip resizable width='150'> <template slot-scope='{row}'>{{row.sbxh || '--'}}</template> </el-table-column> <el-table-column prop='floorcode' label='楼层' width='100'> <template slot-scope='{row}'>{{row.floorcode || '--'}}</template> </el-table-column> <el-table-column prop='wzjc' label='安装位置' show-overflow-tooltip resizable> <template slot-scope='{row}'>{{row.wzjc || '--'}}</template> </el-table-column> <el-table-column prop='manufacturer' label='生产厂商' show-overflow-tooltip resizable> <template slot-scope='{row}'>{{row.manufacturer || '--'}}</template> </el-table-column> </el-table> <div class='foot'> <el-pagination background layout='prev, pager, next' :total='total' :page-size='size' @prev-click='pageChanged' @next-click='pageChanged' @current-change='pageChanged' ></el-pagination> </div> <!-- 标准表格详情钻取表 --> <el-dialog width='1260px' title='标准设备展开清单' style='height:900px!important;overflow: hidden;' :visible.sync='innerVisible' append-to-body> <eq-detail ref='qdDialog' :row='row' :major='major'></eq-detail> </el-dialog> </div> </template> <script> import { Select } from 'meri-design' import EqDetail from './eqDetaileDialog' import { queryEquipmentList } from '@/api/equipmentList.js' import { mapGetters } from 'vuex' export default { components: { Select, EqDetail }, data() { return { tableData: [], total: 0, currentPage: 1, size: 11, innerVisible: false, //详情弹框 keyword: '', manufacturer: '', sbjc: '', row: {}, floor: '' } }, computed: { ...mapGetters(['floorSelect']) }, props: ['param', 'major'], methods: { indexMethod(index) { return (this.currentPage - 1) * this.size + index + 1 }, rowHandle(row) { //console.log(row) this.innerVisible = true this.row = row }, pageChanged(page) { this.currentPage = page this.getList() }, getList() { let postParams = { tab_code: this.param } let data = { page: this.currentPage, size: this.size, plazaId: this.$store.state.plazaId, major: this.major } //下拉 if (this.floor) { postParams.gname = this.floor } //输入框搜索 data.keyword = '' if (this.keyword) { data.keyword += `${this.keyword}:brand,sbxh;` } if (this.sbjc) { data.keyword += `${this.sbjc}:sbjc;` } if (this.manufacturer) { data.keyword += `${this.manufacturer}:manufacturer;` } if (data.keyword == '') { delete data.keyword } queryEquipmentList({ data, postParams }).then(res => { //console.log(res) this.tableData = res.data.data this.total = res.data.count }) } }, watch: { param(newV, oldV) { console.log(newV, oldV) if (newV !== oldV) { this.getList() } }, floor(newV, oldV) { console.log(newV, oldV) this.getList() } }, mounted() { this.floor = this.$cookie.get('floorMapId') this.getList() console.log(this.param) } } </script> <style lang="less" scoped> .eq-list { .eq-list-top { display: flex; margin-bottom: 12px; } td { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .foot { height: 32px; display: flex; justify-content: flex-end; margin-top: 28px; } } </style>