wanda-bm-guide/src/views/equipment/table/djspTable.vue

<!-- 电井商铺 -->
<template>
    <div class='djsp-list'>
        <div class='eq-list-top'>
            <el-input
                placeholder='搜索电井间'
                size='small'
                @keyup.enter.native='getList'
                prefix-icon='el-icon-search'
                v-model='welldes'
                clearable
                style='width:192px;margin-right:12px'
            ></el-input>
            <el-input
                placeholder='搜索商铺编号'
                size='small'
                @keyup.enter.native='getList'
                prefix-icon='el-icon-search'
                v-model='shopsnum'
                clearable
                style='width:192px;margin-right:12px'
            ></el-input>
            <Select @change='getList' v-model='floor' width='180' tipPlace='top' caption='楼层 ：' :selectdata='floorSelect'></Select>
        </div>
        <el-table :data='tableData' :span-method='objectSpanMethod' :border='true' style='width: 100%' @row-click='innerVisible = true'>
            <el-table-column prop='floor' label='楼层' width='50'>
                <template slot-scope='{row}'>{{row.floor || '--'}}</template>
            </el-table-column>
            <el-table-column prop='welldes' label='电井间' width='120'>
                <template slot-scope='{row}'>{{row.welldes || '--'}}</template>
            </el-table-column>
            <el-table-column prop='meterbox' label='商铺电表数' width='200'>
                <template slot-scope='{row}'>{{row.meterbox || '--'}}</template>
            </el-table-column>
            <el-table-column prop='shopsnum' label='商铺编号'>
                <template slot-scope='{row}'>{{row.shopsnumList || '--'}}</template>
            </el-table-column>
        </el-table>
        <div class='foot'></div>
    </div>
</template>
<script>
import { Select } from 'meri-design'
import EqDetail from './eqDetaileDialog'
import { queryShops } from '@/api/equipmentList.js'
import { mapGetters } from 'vuex'
import store from '../../../store/index'
export default {
    components: { Select, EqDetail },
    data() {
        return {
            tableData: [],
            floor: '',
            innerVisible: false, //详情弹框
            shopsnum: '',
            welldes: ''
        }
    },
    computed: {
        ...mapGetters(['floorSelect', 'plazaId'])
    },
    props: ['param'],
    methods: {
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                if (row.col0count > 0) {
                    return {
                        rowspan: row.col0count,
                        colspan: 1
                    }
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    }
                }
            }
        },
        pageChanged(page) {
            this.currentPage = page
            this.getList()
        },
        getList() {
            let getParams = {
                orderBy: `floor,0;welldesm,1;meterbox,1;`,
                plazaId: this.plazaId
            }
            if (this.floor) {
                getParams.floor = this.floor
            }
            getParams.keyword = ''
            if (this.welldes) {
                getParams.keyword += `${this.welldes}:welldes;`
            }
            if (this.shopsnum) {
                getParams.keyword += `${this.shopsnum}:shopsnum;`
            }
            if (getParams.keyword == '') {
                delete getParams.keyword
            }
            queryShops({ getParams }).then(res => {
                console.log(res)
                this.tableData = []
                let floor = {}
                res.data &&
                    res.data.forEach(i => {
                        console.log(i)
                        Object.keys(i).forEach(key => (floor[key] = 0)) // 初始化每一楼层个数为0
                        Object.values(i).forEach(j => {
                            Object.values(j).forEach(k => {
                                console.log(k)
                                this.tableData.push(k)
                            })
                        })
                    })

                this.tableData.map(n => {
                    if (floor[n.floor] === 0) {
                        const count = this.tableData.filter(m => m.floor === n.floor).length
                        floor[n.floor] = count
                        n.col0count = count
                    } else {
                        n.col0count = 0
                    }
                    return n
                })
            })
        }
    },
    watch: {
        param(newV, oldV) {
            if (newV !== oldV) {
                this.getList()
            }
        },
        /* floor() {
            console.log('watch floor')
            this.getList()
        }, */
        // 监听 vuex 中currentFloor的变化,切换楼层后,更新下拉菜单
        '$store.state.currentFloor': {
            handler(newV, oldV) {
                if (newV.gname !== oldV.gname) {
                    this.floor = newV.gname
                    this.getList()
                }
            },
            deep: true
        }
    },
    mounted() {
        console.log('商铺电表数 mounted')
        this.floor = this.$cookie.get('floorMapId')
        console.log(this.floor)
        this.getList()
    }
}
</script>
<style lang="less" scoped>
.djsp-list {
    .eq-list-top {
        display: flex;
        margin-bottom: 12px;
    }
    td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .foot {
        height: 32px;
        display: flex;
        justify-content: flex-end;
        margin-top: 28px;
    }
}
</style>