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'
                @keyup.enter.native='pageChanged(1)'
                @blur='pageChanged(1)'
                prefix-icon='el-icon-search'
                v-model='sbjc'
                clearable
                style='width:192px;margin-right:12px'
            ></el-input>
            <el-input
                placeholder='搜索品牌型号'
                size='small'
                clearable
                @keyup.enter.native='pageChanged(1)'
                @blur='pageChanged(1)'
                prefix-icon='el-icon-search'
                v-model='keyword'
                style='width:192px;margin-right:12px'
            ></el-input>
            <Select
                @change='pageChanged(1)'
                @cancel='pageChanged(1)'
                v-model='floor'
                style='margin-right:12px;'
                width='160'
                tipPlace='top'
                caption='楼层 ：'
                :selectdata='floorAllSelect'
            ></Select>
            <el-input
                clearable
                placeholder='搜索生产厂商'
                size='small'
                @keyup.enter.native='pageChanged(1)'
                @blur='pageChanged(1)'
                prefix-icon='el-icon-search'
                v-model='manufacturer'
                style='width:192px;'
            ></el-input>
        </div>
        <div ref='tableBox'>
            <el-table :data='tableData' :border='true' style='width: 100%' @row-click='rowHandle'>
                <el-table-column type='index' label='序号' width='60' :index='indexMethod'></el-table-column>
                <el-table-column prop label='设备名称' show-overflow-tooltip resizable min-width='300'>
                    <template slot-scope='{row}'>{{row.type_name || '--'}}</template>
                </el-table-column>
                <!-- sbjc -->
                <el-table-column prop='sl' label='数量' width='60'>
                    <template slot-scope='{row}'>{{row.sl>=0?row.sl:'--'}}</template>
                </el-table-column>
                <el-table-column prop='brand' label='品牌' width='300'>
                    <template slot-scope='{row}'>{{row.brand || '--'}}</template>
                </el-table-column>
                <el-table-column prop='sbxh' label='型号' show-overflow-tooltip resizable min-width='300'>
                    <template slot-scope='{row}'>{{row.sbxh || '--'}}</template>
                </el-table-column>
                <el-table-column prop='floor' label='楼层' width='60' show-overflow-tooltip resizable>
                    <template slot-scope='{row}'>{{row.floorcode || '--'}}</template>
                </el-table-column>
                <el-table-column prop='manufacturer' label='生产厂商' show-overflow-tooltip resizable min-width='300'>
                    <template slot-scope='{row}'>{{row.manufacturer || '--'}}</template>
                </el-table-column>
            </el-table>
        </div>
        <div class='foot'>
            <el-pagination
                background
                layout='prev, pager, next'
                :total='total'
                :page-size='size'
                :current-page='currentPage'
                @prev-click='pageChanged'
                @next-click='pageChanged'
                @current-change='pageChanged'
            ></el-pagination>
        </div>
        <!-- 标准表格详情钻取表 -->
        <!-- <el-dialog width='90%' style='height:900px;overflow: hidden;' :title='`${InfoName}-${type_name}`' :visible.sync='innerVisible' append-to-body>
            <eq-detail ref='qdDialog' :row='row' :major='major' :smsxt='smsxt' :diff='diff' :sign='sign'></eq-detail>
        </el-dialog>-->
        <!-- 标准表格详情钻取表,使用全屏弹窗 -->
        <!-- 弹窗添加class -->
        <el-dialog
            custom-class='stand-dialog'
            width='100%'
            :title='`${type_name}设备清单`'
            :visible.sync='innerVisible'
            append-to-body
            :fullscreen='true'
        >
            <eq-detail :key='`eqDetail${key}`' ref='qdDialog' :row='row' :major='major' :smsxt='smsxt' :diff='diff' :sign='sign'></eq-detail>
        </el-dialog>
    </div>
</template>
<script>
import { queryEquipmentList } from '@/api/equipmentList.js'
// import EqDetail from './eqDetaileDialog'
import EqDetail from './eqDetaileDialog'
import { mapGetters } from 'vuex'
import { Select } from 'meri-design'
import store from '../../../store/index'
export default {
    data() {
        return {
            innerVisible: false,
            tableData: [],
            total: 0,
            currentPage: 1,
            size: 10,
            keyword: '',
            floor: '1',
            row: {},
            sbjc: '',
            manufacturer: '',
            type_name: '',
            floorAllSelect: [],
            sign: 1,
            key: 1,
        }
    },
    props: ['major', 'param', 'InfoName', 'smsxt', 'diff'],
    components: { EqDetail, Select },
    computed: {
        ...mapGetters(['floorSelect']),
    },
    methods: {
        indexMethod(index) {
            return (this.currentPage - 1) * this.size + index + 1
        },
        rowHandle(row) {
            this.type_name = row.type_name
            this.row = row
            this.sign = 1
            this.$nextTick(() => {
                this.key++
                this.innerVisible = true
            })
        },
        pageChanged(page) {
            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.smsxt != '1008') {
                data.onlyMainAsset = true
            }
            //下拉
            if (this.floor && this.floor != 1) {
                postParams.gname = this.floor
            }
            //输入框搜索
            data.keyword = ''
            if (this.keyword) {
                data.keyword += `${this.keyword}:brand,sbxh;`
            }
            if (this.sbjc) {
                data.keyword += `${this.sbjc}:type_name;`
            }
            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
            })
        },
        getFloorAllSelect() {
            this.floorAllSelect = []
            this.floorAllSelect.push({
                name: '全部',
                id: '1',
            })
            this.floorSelect.forEach((el) => {
                this.floorAllSelect.push(el)
            })
            console.log(this.floorAllSelect)
        },
    },
    watch: {
        param(newV, oldV) {
            if (newV !== oldV) {
                this.getList()
                this.getFloorAllSelect()
            }
        },
        /* floor(newV, oldV) {
            this.getList()
        }, */
        // 监听 vuex 中currentFloor的变化,切换楼层后,更新下拉菜单
        '$store.state.currentFloor': {
            handler(newV, oldV) {
                if (newV.gcname !== oldV.gcname) {
                    this.floor = newV.gcname
                    this.getList()
                }
            },
            deep: true,
        },
    },
    mounted() {
        // this.floor = this.$cookie.get('floorMapId')
        this.getList()
        this.getFloorAllSelect()
    },
}
</script>
<style lang="less" scoped>
.stand-list {
    height: 100%;
    .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;
    }
}
/deep/ .el-dialog__body {
    padding: 0;
}
@media screen and (max-width: 1600px) {
    /deep/ .el-dialog__body {
        padding: 0;
    }
    /deep/ .el-table td {
        padding: 4px 0;
    }
    /deep/ .el-dialog {
        // margin-top: 5vh !important;
        margin-top: 0 !important;
    }
}
</style>
<style lang="less">
.stand-list {
    /deep/.el-table td {
        cursor: pointer;
    }
}

.stand-dialog {
    // 弹窗头部样式修改
    .el-dialog__header {
        padding: 16px 24px;
        background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
    }
    .el-dialog__headerbtn .el-dialog__close {
        color: #fff;
    }

    .el-dialog__title {
        font-size: 16px;
        padding-right: 6px;
        padding-left: 24px;
        font-weight: bold;
        color: #fff;
        font-weight: normal;
    }
}
</style>