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

<!-- 设备清单的有select的表格 无tab的标准设备表格 -->
<template>
    <div class='stand-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'
                clearable
                @blur='getList'
                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
                clearable
                placeholder='搜索生产厂商'
                size='small'
                @blur='getList'
                prefix-icon='el-icon-search'
                v-model='manufacturer'
                style='width:192px;'
            ></el-input>
        </div>
        <el-table :data='tableData' :border='true' style='width: 100%' @row-click='rowHandle'>
            <el-table-column type='index' label='序号' width='60'></el-table-column>
            <el-table-column prop label='设备名称' show-overflow-tooltip resizable width='300'>
                <template slot-scope='{row}'>{{row.type_name || '--'}}</template>
            </el-table-column>
            <!-- sbjc -->
            <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='200'>
                <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='floor' label='楼层' width='100'>
                <template slot-scope='{row}'>{{row.floorcode || '--'}}</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='90%' style='height:900px;overflow: hidden;' title='标准设备展开清单' :visible.sync='innerVisible' append-to-body>
            <eq-detail ref='qdDialog' :row='row' :major='major'></eq-detail>
        </el-dialog>
    </div>
</template>
<script>
import { queryEquipmentList } from '@/api/equipmentList.js'
import EqDetail from './eqDetaileDialog'

import { mapGetters } from 'vuex'
import { Select } from 'meri-design'
export default {
    data() {
        return {
            innerVisible: false,
            pageSize: 10,
            tableData: [],
            total: 0,
            currentPage: 1,
            size: 13,
            keyword: '',
            floor: '',
            row: {},
            sbjc: '',
            manufacturer: ''
        }
    },
    props: ['major', 'param'],
    components: { EqDetail, Select },
    computed: {
        ...mapGetters(['floorSelect'])
    },
    methods: {
        rowHandle(row) {
            console.log(row)
            this.innerVisible = true
            this.row = row
        },
        pageChanged(page, size) {
            this.currentPage = page
            this.getList()
        },
        getList() {
            let postParams = {
                tab_code: this.param
            }
            let major
            if (this.major.slice(0, 2) == 'GD') {
                major = '供电'
            } else if (this.major.slice(0, 2) == 'XF') {
                major = '消防'
            } else if (this.major.slice(0, 2) == 'GPS') {
                major = '给排水'
            } else if (this.major.slice(0, 2) == 'DT') {
                major = '电梯'
            } else if (this.major.slice(0, 2) == 'RQ') {
                major = '燃气'
            }
            let data = {
                page: this.currentPage,
                size: this.size,
                plazaId: this.$store.state.plazaId,
                major: major
                // floor:this.floor
            }
            //下拉
            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 => {
                this.tableData = res.data.data
                this.total = res.data.count
            })
        }
    },
    watch: {
        param(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()
    }
}
</script>
<style lang="less" scoped>
.stand-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>