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

<template>
    <!-- 详情页面 -->
    <div class='gdqd-dialog'>
        <div class='top'></div>
        <div class='gdqd-top'>
            <div class='gdqd-dialog-top'>
                <el-input
                    placeholder='搜索设备简称编号'
                    style='width:192px;margin-right:12px'
                    size='small'
                    prefix-icon='el-icon-search'
                    v-model='sbjc'
                    clearable
                    @keyup.enter.native='queryTableList'
                    @blur='queryTableList'
                ></el-input>
                <Select v-model='sbglgs' width='180' tipPlace='top' caption='管理归属：' size='small' :selectdata='sbglgsOption' @change='queryTableList'></Select>
                <Select
                    width='160'
                    style='margin: 0 12px;'
                    v-model='status'
                    tipPlace='top'
                    caption='设备状态：'
                    size='small'
                    :selectdata='statusOption'
                    @change='queryTableList'
                ></Select>
                <el-input
                    placeholder='搜索品牌、型号'
                    style='width:180px;margin-right:12px'
                    size='small'
                    clearable
                    prefix-icon='el-icon-search'
                    v-model='brand'
                    @keyup.enter.native='queryTableList'
                    @blur='queryTableList'
                ></el-input>
                <Select
                    width='150'
                    style='margin-right:12px;'
                    v-model='floor'
                    tipPlace='top'
                    caption='楼层：'
                    size='small'
                    :selectdata='floorAllSelect'
                    @change='queryTableList'
                ></Select>
                <el-input
                    placeholder='搜索安装位置'
                    @keyup.enter.native='queryTableList'
                    @blur='queryTableList'
                    clearable
                    style='width:180px;margin-right:12px'
                    size='small'
                    prefix-icon='el-icon-search'
                    v-model='wzjc'
                ></el-input>
                <!-- 多余的筛选 -->
                <input-dialog :type='1' @confirm='confirm'></input-dialog>
            </div>
            <div class='gdqd-dialog-bottom' ref='table-container-1'>
                <el-table @row-click='innerTable' :data='tableData' :key='key' :border='true' style='width: 100%' :highlight-current-row='true'>
                    <el-table-column type='index' label='序号' width='60'>
                        <template slot-scope='{row,$index}'>
                            <div v-if='!row.assetuid'>{{$index + 1}}</div>
                            <el-popover v-else placement='top' width='100' trigger='click' popper-class='m-popover'>
                                <el-button type='text' @click='goToGC(row.assetuid)'>跳转工程信息化</el-button>
                                <div slot='reference'>{{$index + 1}}</div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop='sbjc' label='设备名称' show-overflow-tooltip resizable min-width='338'>
                        <!-- <template slot-scope='{row}'>{{row.sbjc || '--'}}</template> -->
                        <template slot-scope='{row}'>
                            <div v-if='!row.assetuid'>{{row.sbjc || '--'}}</div>
                            <el-popover v-else placement='top' width='100' trigger='click' popper-class='m-popover'>
                                <el-button type='text' @click='goToGC(row.assetuid)'>跳转工程信息化</el-button>
                                <div slot='reference'>{{row.sbjc || '--'}}</div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop='assetnum' label='设备内码' show-overflow-tooltip resizable width='80'>
                        <!-- <template slot-scope='{row}'>{{row.assetnum || '--'}}</template> -->
                        <template slot-scope='{row}'>
                            <div v-if='!row.assetuid'>{{row.assetnum || '--'}}</div>
                            <el-popover v-else placement='top' width='100' trigger='click' popper-class='m-popover'>
                                <el-button type='text' @click='goToGC(row.assetuid)'>跳转工程信息化</el-button>
                                <div slot='reference'>{{row.assetnum || '--'}}</div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop='sbglgs' label='管理归属' show-overflow-tooltip resizable>
                        <!-- <template slot-scope='{row}'>{{row.sbglgs || '--'}}</template> -->
                        <template slot-scope='{row}'>
                            <div v-if='!row.assetuid'>{{row.sbglgs || '--'}}</div>
                            <el-popover v-else placement='top' width='100' trigger='click' popper-class='m-popover'>
                                <el-button type='text' @click='goToGC(row.assetuid)'>跳转工程信息化</el-button>
                                <div slot='reference'>{{row.sbglgs || '--'}}</div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop='sb_status' label='设备状态' width='80' show-overflow-tooltip resizable>
                        <!-- <template slot-scope='{row}'>{{row.sb_status || '--'}}</template> -->
                        <template slot-scope='{row}'>
                            <div v-if='!row.assetuid'>{{row.sb_status || '--'}}</div>
                            <el-popover v-else placement='top' width='100' trigger='click' popper-class='m-popover'>
                                <el-button type='text' @click='goToGC(row.assetuid)'>跳转工程信息化</el-button>
                                <div slot='reference'>{{row.sb_status || '--'}}</div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop='brand' label='品牌' show-overflow-tooltip resizable width='80'>
                        <!-- <template slot-scope='{row}'>{{row.brand || '--'}}</template> -->
                        <template slot-scope='{row}'>
                            <div v-if='!row.assetuid'>{{row.brand || '--'}}</div>
                            <el-popover v-else placement='top' width='100' trigger='click' popper-class='m-popover'>
                                <el-button type='text' @click='goToGC(row.assetuid)'>跳转工程信息化</el-button>
                                <div slot='reference'>{{row.brand || '--'}}</div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop='sbxh' label='型号' show-overflow-tooltip resizable width='100'>
                        <!-- <template slot-scope='{row}'>{{row.sbxh || '--'}}</template> -->
                        <template slot-scope='{row}'>
                            <div v-if='!row.assetuid'>{{row.sbxh || '--'}}</div>
                            <el-popover v-else placement='top' width='100' trigger='click' popper-class='m-popover'>
                                <el-button type='text' @click='goToGC(row.assetuid)'>跳转工程信息化</el-button>
                                <div slot='reference'>{{row.sbxh || '--'}}</div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop='floor' sortable label='楼层' width='70' show-overflow-tooltip resizable>
                        <!-- <template slot-scope='{row}'>{{row.floorcode || '--'}}</template> -->
                        <template slot-scope='{row}'>
                            <div v-if='!row.assetuid'>{{row.floorcode || '--'}}</div>
                            <el-popover v-else placement='top' width='100' trigger='click' popper-class='m-popover'>
                                <el-button type='text' @click='goToGC(row.assetuid)'>跳转工程信息化</el-button>
                                <div slot='reference'>{{row.floorcode || '--'}}</div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop='wzjc' label='安装位置' show-overflow-tooltip resizable min-width='250'>
                        <!-- <template slot-scope='{row}'>{{row.wzjc || '--'}}</template> -->
                        <template slot-scope='{row}'>
                            <div v-if='!row.assetuid'>{{row.wzjc || '--'}}</div>
                            <el-popover v-else placement='top' width='100' trigger='click' popper-class='m-popover'>
                                <el-button type='text' @click='goToGC(row.assetuid)'>跳转工程信息化</el-button>
                                <div slot='reference'>{{row.wzjc || '--'}}</div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop='manufacturer' label='生产厂商' show-overflow-tooltip resizable min-width='300'>
                        <!-- <template slot-scope='{row}'>{{row.manufacturer || '--'}}</template> -->
                        <template slot-scope='{row}'>
                            <div v-if='!row.assetuid'>{{row.manufacturer || '--'}}</div>
                            <el-popover v-else placement='top' width='100' trigger='click' popper-class='m-popover'>
                                <el-button type='text' @click='goToGC(row.assetuid)'>跳转工程信息化</el-button>
                                <div slot='reference'>{{row.manufacturer || '--'}}</div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop='fws' label='服务商' show-overflow-tooltip resizable min-width='300'>
                        <!-- <template slot-scope='{row}'>{{row.fws || '--'}}</template> -->
                        <template slot-scope='{row}'>
                            <div v-if='!row.assetuid'>{{row.fws || '--'}}</div>
                            <el-popover v-else placement='top' width='100' trigger='click' popper-class='m-popover'>
                                <el-button type='text' @click='goToGC(row.assetuid)'>跳转工程信息化</el-button>
                                <div slot='reference'>{{row.fws || '--'}}</div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop label='相关资料' show-overflow-tooltip resizable min-width='150'>
                        <!-- <template slot-scope='{row}'>{{'--'}}</template> -->
                        <template slot-scope='{row}'>
                            <div v-if='!row.assetuid'>--</div>
                            <el-popover v-else placement='top' width='100' trigger='click' popper-class='m-popover'>
                                <el-button type='text' @click='goToGC(row.assetuid)'>跳转工程信息化</el-button>
                                <div slot='reference'>--</div>
                            </el-popover>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 底部表格 -->
        <div class='table-bottom'>
            <!-- 页签切换 -->
            <div class='title'>
                <div class='text'>维保:</div>
                <div class='d-tab d-tab-left' :class='{active:currentTab === 0}' @click='changeTab(0)'>重要维保</div>
                <div class='d-tab d-tab-right' :class='{active:currentTab === 1}' @click='changeTab(1)'>日常维保</div>
                <div class='text text-r'>维修:</div>
                <div class='d-tab d-tab-left' :class='{active:currentTab === 2}' @click='changeTab(2)'>重要维修</div>
                <div class='d-tab d-tab-right' :class='{active:currentTab === 3}' @click='changeTab(3)'>日常维修</div>
            </div>
            <!--  动态显示各个表格组件 : 'wbTable', 'rcwbTable', 'wxTable', 'rcwxTable'  -->
            <div class='table2-container'>
                <component
                    v-if='Object.keys(this.row).length>0'
                    :is='currentComponent'
                    :ref='currentComponent'
                    :smsxt='smsxt'
                    :tabLabel='tabLabel[currentComponent]'
                    :diff='diff'
                    :assetnum='assetnum'
                    :size='size'
                ></component>
            </div>
        </div>
    </div>
</template>
<script>
/**
 * @author yunxing
 * @date 2020年08月18日18:01
 * @description 上部表格添加popover,点击后,如果有assetuid,显示popover,可以进行跳转工程信息化
 */
import { Select } from 'meri-design'
import { mapGetters } from 'vuex'
import { queryAsset } from '@/api/equipmentList.js'
import { querySelect } from '@/api/public.js'
import inputDialog from './inputDIalog'
import rcwbTable from './rcwbTable'
import wbTable from './wbTable'
import rcwxTable from './rcwxTable'
import wxTable from './wxTable'
export default {
    data() {
        return {
            tableData: [],
            sbjc: '',
            brand: '',
            wzjc: '',
            floor: '1',
            status: '1',
            manufacturer: '',
            fws: '',
            sbglgs: '1',
            sbglgsOption: [],
            statusOption: [],
            floorAllSelect: [],
            activeId: '1',
            activeName1: 'wb1',
            activeName2: '',
            visible: false,
            key: 0,
            assetnum: '', //区分设备的维修和维保关键
            currentTab: 0, //选中页签,默认重要维保
            currentComponent: 'wbTable', //选中的组件,默认 重要维保
            componentArr: ['wbTable', 'rcwbTable', 'wxTable', 'rcwxTable'], //下部表格组件列表
            tabLabel: {
                //下部表格组件列表使用label
                wbTable: '重要维保',
                rcwbTable: '日常维保',
                wxTable: '重要维修',
                rcwxTable: '日常维保',
            },
            size: 5, //分页条数
        }
    },
    components: {
        Select,
        inputDialog,
        rcwbTable,
        wbTable,
        rcwxTable,
        wxTable,
    },
    computed: {
        ...mapGetters(['floorSelect']),
    },
    mounted() {
        this.queryTableList()
        this.getFloorAllSelect()
        this.tabFind()
        if (document.body.clientWidth >= 1920) {
            this.size = 9
        }
        // 滚动时,隐藏上部表格的popover
        window.addEventListener('scroll', this.handleScroll, true)
        this.$once('hook:beforeDestroy', () => {
            window.removeEventListener('scroll', this.handleScroll)
        })
    },
    props: ['row', 'major', 'sign', 'smsxt', 'diff'],
    methods: {
        // 页面
        handleScroll(e) {
            // let popoverArr = Array.from(document.querySelectorAll('body>.m-popover'))
            // if (popoverArr.length) {
            //     popoverArr.map((item) => (item.style.display = 'none'))
            // }
            // 滚动时,如果是上部表格,隐藏上部表格的popover
            this.$nextTick(() => {
                if (this.$refs['table-container-1'].contains(e.target)) {
                    document.body.click()
                    document.dispatchEvent(new CustomEvent('mousedown'))
                    document.dispatchEvent(new CustomEvent('mouseup'))
                }
            })
        },
        innerTable(row) {
            this.assetnum = row.assetnum
            this.changeTab(0)
            // this.$refs.wbTable.startMethods()
            // if (row.assetuid) {
            //     window.open(`http://gcgl.wanda.cn/maximo/ui/?event=loadapp&value=assetdevic&uniqueid=${row.assetuid}`)
            // }
        },
        // 跳转工程信息化
        goToGC(assetuid) {
            window.open(`http://gcgl.wanda.cn/maximo/ui/?event=loadapp&value=assetdevic&uniqueid=${assetuid}`)
        },
        //多余输入框监听
        confirm(fws, manufacturer) {
            this.fws = fws
            this.manufacturer = manufacturer
            this.queryTableList()
        },
        //下拉框查询
        tabFind() {
            let postParams = [
                {
                    columnName: { sbglgs: 'sbglgs', sb_status: 'sb_status' },
                    params: {
                        type_code: this.row.type_code,
                    },
                    tableName: 'sms_asset', //视图名称
                },
            ]
            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 = '燃气'
            } else {
                major = this.major
            }
            let data = {
                major: major,
                plazaId: this.$store.state.plazaId,
            }
            if (major != '土建') {
                data.onlyMainAsset = true
            }
            querySelect({ data, postParams }).then((res) => {
                let sb_status = res.data.data.sms_asset.sb_status
                let sbglgs = res.data.data.sms_asset.sbglgs
                this.sbglgsOption = []
                this.sbglgsOption.push({
                    name: '全部',
                    id: '1',
                })
                this.statusOption = []
                this.statusOption.push({
                    name: '全部',
                    id: '1',
                })
                sb_status.forEach((el) => {
                    this.statusOption.push({
                        name: el.value,
                        id: el.key,
                    })
                })
                sbglgs.forEach((el) => {
                    this.sbglgsOption.push({
                        name: el.value,
                        id: el.key,
                    })
                })
            })
        },
        queryTableList() {
            console.log('queryTableList')
            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 = '燃气'
            } else {
                major = this.major
            }
            let data = {
                major: major,
                plazaId: this.$store.state.plazaId,
            }
            //区分主要设备
            if (this.major != '土建') {
                data.onlyMainAsset = true
            }
            //输入框搜索
            data.keyword = ''
            if (this.sbjc) {
                data.keyword += `${this.sbjc}:sbjc,assetnum;`
            }
            if (this.brand) {
                data.keyword += `${this.brand}:brand,sbxh;`
            }
            if (this.wzjc) {
                data.keyword += `${this.wzjc}:wzjc;`
            }
            if (this.manufacturer) {
                data.keyword += `${this.manufacturer}:manufacturer;`
            }
            if (this.fws) {
                data.keyword += `${this.fws}:fws;`
            }
            if (data.keyword == '') {
                delete data.keyword
            }
            let postParams = {
                classstructureid: this.row.classstructureid,
                type_code: this.row.type_code,
                manufacturer: this.row.manufacturer || '--',
                sbxh: this.row.sbxh || '--',
                brand: this.row.brand || '--',
            }
            //下拉筛选
            if (this.floor && this.floor != 1) {
                postParams.gname = this.floor
            }
            if (this.sbglgs && this.sbglgs != 1) {
                postParams.sbglgs = this.sbglgs
            }
            if (this.status && this.status != 1) {
                postParams.status = this.status
            }
            queryAsset({ data, postParams }).then((res) => {
                this.tableData = res.data.data
                this.total = res.data.count
                this.key++
                if (this.tableData.length > 0) {
                    this.assetnum = this.tableData[0].assetnum
                    this.changeTab(0)
                }
            })
        },
        getFloorAllSelect() {
            this.floorAllSelect = []
            this.floorAllSelect.push({
                id: '1',
                name: '全部',
            })
            this.floorSelect.forEach((el) => {
                this.floorAllSelect.push(el)
            })
        },
        // 更改tab页签,切换组件
        changeTab(index) {
            this.currentTab = index
            this.currentComponent = this.componentArr[index]
            // --- 不需要执行,动态组件会自动执行
            //如果有组件,执行表格组件的内部方法
            // this.$nextTick(() => {
            //     this.$refs[this.currentComponent] && this.$refs[this.currentComponent].startMethods()
            // })
        },
    },
    watch: {
        row: {
            handler(newV, oldV) {
                // console.log('handler', newV, oldV)
                // 数据改变,重置表格,tab数据
                if (JSON.stringify(newV) !== JSON.stringify(oldV)) {
                    this.tableData = []
                    this.currentTab = 0
                    this.currentComponent = 'wbTable'
                }
                this.queryTableList()
                this.getFloorAllSelect()
                this.tabFind()
            },
            deep: true,
        },
        sbglgs() {
            this.queryTableList()
        },
        status() {
            this.queryTableList()
        },
        floor() {
            this.queryTableList()
        },
    },
}
</script>
<style lang="less" scoped>
.gdqd-dialog {
    display: flex;
    flex-direction: column;
    height: 90vh;
    .gdqd-top {
        .gdqd-dialog-bottom {
            margin-top: 20px;
            // 表格主体(数据列,不含表头),高度
            /deep/.el-table__body-wrapper {
                overflow: auto;
                max-height: 13.6vh;
            }
        }
    }
    // 底部表格
    .table-bottom {
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        // tab 样式
        .title {
            display: flex;
            height: 70px;
            line-height: 30px;
            align-items: center;
            padding: 15px 0;
            // 维修维保文本
            .text {
                width: 50px;
            }
            .text-r {
                margin-left: 100px;
            }
            // tab页签
            .d-tab {
                padding: 5px 16px;
                height: 30px;
                line-height: 22px;
                font-size: 14px;
                font-family: MicrosoftYaHei;
                font-weight: 500;
                color: #1f2429;
                text-align: center;
                border: 1px solid #c3c7cb;
                cursor: pointer;
            }
            .d-tab-left {
                border-radius: 4px 0 0 4px;
            }
            .d-tab-right {
                border-radius: 0 4px 4px 0;
            }
            // 当前选中页签
            .active {
                color: #025baa !important;
                border-color: #025baa !important;
            }
        }
        //筛选+表格
        .table2-container {
            width: 100%;
            flex: 1;
            position: relative;
        }
    }
}
@media screen and (max-width: 1600px) {
    .gdqd-dialog td {
        padding: 4px 0;
    }
}
@media screen and (max-width: 1366px) {
    .gdqd-dialog {
        padding: 12px 24px 24px;
        /deep/ .el-table td {
            padding: 1px 0 !important;
        }
        .gdqd-dialog-bottom {
            margin-top: 10px !important;
        }
        .table-bottom {
            .title {
                height: 60px !important;
            }
        }
        // 底部表格的分页位置修改
        /deep/ .rcwb-list .foot {
            margin-top: 10px !important;
        }
    }
}
</style>
<style lang="less">
.gdqd-dialog {
    /deep/.el-table__body-wrapper td {
        cursor: pointer;
    }
    .el-dialog__header {
        padding: 16px 24px;
        color: #fff;
        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;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #fff;
        line-height: 24px;
    }
}
// 弹出弹窗样式修改
.m-popover {
    padding: 0 !important;
    text-align: center !important;
}
</style>