wanda-bm-guide/src/views/room/detail.vue

<template>
    <div class='gdqd-dialog'>
        <div class='top'></div>
        <div class='gdqd-dialog-top'>
            <Select
                width='146'
                style='margin-right:12px'
                tipPlace='top'
                caption='楼层：'
                size='small'
                @change='changeFloorStr'
                v-model='floorStr'
                :selectdata='floorSelect'
            ></Select>
            <Select
                width='146'
                v-model='sbglgsStr'
                style='margin-right:12px'
                v-if='sbglgs.length>0'
                tipPlace='top'
                caption='管理归属'
                @change='changeSbglgsStr'
                size='small'
                :selectdata='sbglgs'
            ></Select>
            <Select
                width='146'
                style='margin-right:12px'
                v-if='sb_status.length>0'
                tipPlace='top'
                caption='设备状态'
                size='small'
                @change='changeSb_status'
                v-model='statusStr'
                :selectdata='sb_status'
            ></Select>
            <el-input placeholder='搜索设备简称' style='width:196px;margin-right:12px' size='small' prefix-icon='el-icon-search' v-model='input'></el-input>
            <el-input placeholder='搜索设备编号' style='width:196px;margin-right:12px' size='small' prefix-icon='el-icon-search' v-model='input'></el-input>
            <el-input placeholder='搜索品牌' style='width:196px;margin-right:12px' size='small' prefix-icon='el-icon-search' v-model='input'></el-input>

            <input-dialog :keyword='keyword' @confirm='confirm'></input-dialog>
        </div>
        <el-table
            v-loading='loadingDetail'
            :data='detailData'
            style='width:100%;margin-top:12px'
            :header-cell-style='{background:"rgba(245,246,247,1)",fontFamily:"MicrosoftYaHei",color:"rgba(100,108,115,1)",lineHeight:"16px",fontSize:"12px"}'
        >
            <el-table-column type='index' label='序号' width='50'></el-table-column>
            <el-table-column prop='sbjc' label='设备简称' :show-overflow-tooltip='true'>
                <template slot-scope='{row}'>{{row.sbjc||'--'}}</template>
            </el-table-column>
            <el-table-column prop='sbbh' label='设备编号'>
                <template slot-scope='{row}'>{{row.sbbh||'--'}}</template>
            </el-table-column>
            <el-table-column prop='sl' label='数量'>
                <template slot-scope='{row}'>{{row.sl||'--'}}</template>
            </el-table-column>
            <el-table-column prop='sbglgs' label='管理归属'>
                <template slot-scope='{row}'>{{row.sbglgs||'--'}}</template>
            </el-table-column>
            <el-table-column prop='sbstatus' label='设备状态'>
                <template slot-scope='{row}'>{{row.sbstatus||'--'}}</template>
            </el-table-column>
            <el-table-column prop='brand' label='品牌'>
                <template slot-scope='{row}'>{{row.brand||'--'}}</template>
            </el-table-column>
            <el-table-column prop='sbxh' label='型号'>
                <template slot-scope='{row}'>{{row.sbxh||'--'}}</template>
            </el-table-column>
            <el-table-column prop='floor' label='楼层'>
                <template slot-scope='{row}'>{{row.floor||'--'}}</template>
            </el-table-column>
            <el-table-column prop='wzqy' label='安装位置'>
                <template slot-scope='{row}'>{{row.wzqy||'--'}}</template>
            </el-table-column>
            <el-table-column prop='manufacturer' label='生产厂商' :show-overflow-tooltip='true'>
                <template slot-scope='{row}'>{{row.manufacturer||'--'}}</template>
            </el-table-column>
            <el-table-column prop='fws' label='服务商' :show-overflow-tooltip='true'>
                <template slot-scope='{row}'>{{row.fws||'--'}}</template>
            </el-table-column>
        </el-table>
        <div class='foot'>
            <el-pagination
                background
                layout='prev, pager, next'
                :total='totalDetail'
                :page-size='sizeDetail'
                @prev-click='pageChanged'
                @next-click='pageChanged'
                @current-change='pageChanged'
            ></el-pagination>
        </div>
    </div>
</template>
<script>
import Select from '@/components/Select/Select.vue'
import { querySelect } from '@/api/public.js'
import { mapGetters } from 'vuex'
import { queryHxsbDetail } from '@/api/room.js'
import InputDialog from './inputDialog'

export default {
    props: ['type_code'],
    data() {
        return {
            sb_status: [],
            sbglgs: [],
            input: '',
            floorStr: '',
            sbglgsStr: '',
            statusStr: '',
            loadingDetail: true,
            totalDetail: 0,
            pageDetail: 1,
            sizeDetail: 10,
            detailData: [],
            keyword: ''
        }
    },
    components: {
        Select,
        InputDialog
    },
    computed: {
        ...mapGetters(['floorSelect'])
    },
    mounted() {
        if (this.type_code) {
            this.queryDetail()
            this.query()
        }
    },
    methods: {
        // 改变楼层
        changeFloorStr() {
            this.queryDetail()
        },
        // 改变管理归属
        changeSbglgsStr() {
            this.queryDetail()
        },
        // 改变设备状态
        changeSb_status() {
            this.queryDetail()
        },
        // 点击分页
        pageChanged(page) {
            this.pageDetail = page
            this.queryDetail()
        },
        // 设备详情
        queryDetail() {
            this.detailData = []
            let postParams = {
                type_code: this.type_code //自定义分类内码 主要设备清单必传
            }
            if (this.floorStr) {
                postParams.floor = this.floorStr
            }
            if (this.sbglgsStr) {
                postParams.sbglgs = this.sbglgsStr
            }
            if (this.statusStr) {
                postParams.sb_status = this.statusStr
            }

            let data = {
                plazaId: this.$store.state.plazaId,
                page: this.pageDetail,
                size: this.sizeDetail
            }
            queryHxsbDetail({ data, postParams }).then(res => {
                console.log('钻取表', res)
                this.loadingDetail = false
                this.detailData = res.data.data ? res.data.data : []
                this.totalDetail = res.data.count
            })
        },
        // 下拉框数据
        query() {
            let postParams = [
                {
                    columnName: { sbglgs: 'sbglgs', sb_status: 'sb_status' },
                    params: {
                        type_code: this.type_code
                    },
                    tableName: 'glsms_asset'
                }
            ]
            let data = {
                plazaId: this.$store.state.plazaId
            }
            querySelect({ data, postParams }).then(res => {
                console.log('管理归属', res)
                if (res.data.data) {
                    let sb_status = [],
                        sbglgs = []
                    sb_status = res.data.data.glsms_asset.sb_status ? res.data.data.glsms_asset.sb_status : []
                    sbglgs = res.data.data.glsms_asset.sbglgs ? res.data.data.glsms_asset.sbglgs : []
                    if (sb_status.length > 0) {
                        sb_status.forEach(el => {
                            let obj = {
                                id: el.key,
                                name: el.value
                            }
                            this.sb_status.push(obj)
                        })
                    }
                    if (sbglgs.length > 0) {
                        sbglgs.forEach(el => {
                            let obj = {
                                id: el.key,
                                name: el.value
                            }
                            this.sbglgs.push(obj)
                        })
                    }
                }
            })
        },
        confirm() {}
    }
}
</script>
<style lang="less" scoped>
.gdqd-dialog {
    .gdqd-dialog-top {
        display: flex;
    }
    .foot {
        height: 32px;
        display: flex;
        justify-content: flex-end;
        margin-top: 28px;
    }
}
</style>
<style lang="less">
.gdqd-dialog {
    padding: 16px 24px 24px;
    .el-table td,
    .el-table th {
        padding: 8px 0;
    }
}
</style>