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

<!-- 设备清单的有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' 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'></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 '@/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 {
            tableData: [],
            total: 0,
            currentPage: 1,
            size: 11,
            innerVisible: false, //详情弹框
            keyword: '',
            manufacturer: '',
            sbjc: '',
            row: {},
            floor: ''
        }
    },
    computed: {
        ...mapGetters(['floorSelect'])
    },
    props: ['param', 'major'],
    methods: {
        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) {
                console.log(this.floor)
                postParams.gname = this.floor
            }
            console.log(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()
            }
        }
    },
    mounted() {
        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>