<!-- 设备清单的有tab的表格 --> <template> <div class='eq-list'> <div class='eq-list-top'> <el-input placeholder='请输入设备简称、品牌、型号、生产厂商搜索' size='small' @change='getList' prefix-icon='el-icon-search' v-model='keyword' style='width:310px;margin-right:12px' ></el-input> <Select @change='getList' width='120' tipPlace='top' caption='楼层 :' :selectdata='floorSelect'></Select> </div> <el-table :data='tableData' style='width: 100%' @row-click='innerVisible = true'> <el-table-column prop='sbxh' label='序号' width='120'></el-table-column> <el-table-column prop='sbjbm' label='设备编号' width='160'></el-table-column> <el-table-column prop='sl' label='数量'></el-table-column> <el-table-column prop='brand' label='品牌'></el-table-column> <el-table-column prop='sbxh' label='型号'></el-table-column> <el-table-column prop='floor' label='楼层'></el-table-column> <el-table-column prop='wzjc' label='安装位置' width='240'></el-table-column> <el-table-column prop='manufacturer' label='生产厂商' width='240'></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='1200px' style='height:80%' title='设备清单' :visible.sync='innerVisible' append-to-body> <eq-detail ref='qdDialog'></eq-detail> </el-dialog> </div> </template> <script> import Select from '@/components/Select/Select.vue' import EqDetail from './eqDetaileDialog' import { queryEquipmentList } from '@/api/equipmentList.js' import { mapGetters } from 'vuex' export default { components: { Select, EqDetail }, data() { return { dataSelect2: [ { id: 'test1', name: '选择项' }, { id: 'test2', name: '单平米' }, { id: 'test3', name: '下级分项' }, { id: 'test4', name: '滑动平均滑动平均' } ], tableData: [], total: 0, currentPage: 1, size: 10, floorSelect: [], innerVisible: false, //详情弹框 keyword: '' } }, computed: { ...mapGetters(['floorsArr']) }, props: ['param', 'major'], methods: { pageChanged(page) { this.currentPage = page this.getList() }, init() { this.floorSelect = [] if (this.floorsArr.length > 0) { this.floorsArr.forEach(e => { let obj = { id: e, name: e } this.floorSelect.push(obj) }) } }, getList() { let postParams = { tab_code: this.param } let data = { page: this.currentPage, size: this.size, plazaId: this.$store.state.plazaId, major: this.major, keyword: this.keyword } queryEquipmentList({ data, postParams }).then(res => { console.log(res) this.tableData = res.data.data this.total = res.data.count }) } }, watch: { param(newV, oldV) { if (newV !== oldV) { this.getList() } } }, mounted() { this.init() this.getList() } } </script> <style lang="less" scoped> .eq-list { .eq-list-top { display: flex; } .foot { position: absolute; height: 32px; right: 26px; bottom: 20px; } td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } </style>