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'>
                <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'></el-table-column>
                    <el-table-column prop='sbjc' label='设备名称' show-overflow-tooltip resizable min-width='150'>
                        <template slot-scope='{row}'>{{row.sbjc || '--'}}</template>
                    </el-table-column>
                    <el-table-column prop='assetnum' label='设备内码' show-overflow-tooltip resizable width='80'>
                        <template slot-scope='{row}'>{{row.assetnum || '--'}}</template>
                    </el-table-column>
                    <el-table-column prop='sbglgs' label='管理归属' show-overflow-tooltip resizable>
                        <template slot-scope='{row}'>{{row.sbglgs || '--'}}</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>
                    </el-table-column>
                    <el-table-column prop='brand' label='品牌' show-overflow-tooltip resizable width='80'>
                        <template slot-scope='{row}'>{{row.brand || '--'}}</template>
                    </el-table-column>
                    <el-table-column prop='sbxh' label='型号' show-overflow-tooltip resizable width='80'>
                        <template slot-scope='{row}'>{{row.sbxh || '--'}}</template>
                    </el-table-column>
                    <el-table-column prop='floor' sortable label='楼层' width='70' show-overflow-tooltip resizable>
                        <template slot-scope='{row}'>{{row.floorcode || '--'}}</template>
                    </el-table-column>
                    <el-table-column prop='wzjc' label='安装位置' show-overflow-tooltip resizable min-width='150'>
                        <template slot-scope='{row}'>{{row.wzjc || '--'}}</template>
                    </el-table-column>
                    <el-table-column prop='manufacturer' label='生产厂商' show-overflow-tooltip resizable min-width='150'>
                        <template slot-scope='{row}'>{{row.manufacturer || '--'}}</template>
                    </el-table-column>
                    <el-table-column prop='fws' label='服务商' show-overflow-tooltip resizable min-width='150'>
                        <template slot-scope='{row}'>{{row.fws || '--'}}</template>
                    </el-table-column>
                    <el-table-column prop label='相关资料' show-overflow-tooltip resizable min-width='150'>
                        <template slot-scope='{row}'>{{'--'}}</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='5'
                ></component>
            </div>
        </div>
    </div>
</template>
<script>
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: '日常维保',
            },
        }
    },
    components: {
        Select,
        inputDialog,
        rcwbTable,
        wbTable,
        rcwxTable,
        wxTable,
    },
    computed: {
        ...mapGetters(['floorSelect']),
    },
    props: ['row', 'major', 'sign', 'smsxt', 'diff'],
    mounted() {
        this.assetnum = this.row.assetnum
        this.changeTab(0)
        this.queryTableList()
        this.tabFind()
        this.getFloorAllSelect()
    },
    methods: {
        tabClick(item) {
            this.activeId = item
        },
        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}`)
            }
        },
        //多余输入框监听
        confirm(fws, manufacturer) {
            //console.log(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) => {
                //console.log(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() {
            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) => {
                console.log(res)
                this.tableData = res.data.data
                this.total = res.data.count
                this.key++
            })
        },
        getFloorAllSelect() {
            this.floorAllSelect = []
            this.floorAllSelect.push({
                id: '1',
                name: '全部',
            })
            this.floorSelect.forEach((el) => {
                this.floorAllSelect.push(el)
            })
            console.log(this.floorAllSelect)
        },
        changePageEvent() {
            if (this.sign == 1) {
                this.page = 1
            }
        },
        // 更改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) {
                this.changePageEvent()
                this.queryTableList()
                this.getFloorAllSelect()
                this.tabFind()
            },
            deep: true,
        },
        sbglgs() {
            this.changePageEvent()
            this.queryTableList()
        },
        status() {
            this.changePageEvent()
            this.queryTableList()
        },
        floor() {
            this.changePageEvent()
            this.queryTableList()
        },
    },
}
</script>
<style lang="less" scoped>
.gdqd-dialog {
    display: flex;
    flex-direction: column;
    height: 90vh;
    .gdqd-top {
        .gdqd-dialog-bottom {
            overflow: auto;
            max-height: 20vh;
            margin-top: 20px;
        }
    }
    .qdxq-bottom {
        flex: 1;
        .wb-title {
            display: flex;
            height: 48px;
            line-height: 48px;
            background: #f5f6f7;
            margin: 20px 0;
            padding-left: 20px;
        }
    }
}
@media screen and (max-width: 1600px) {
    .gdqd-dialog td {
        padding: 4px 0;
    }
}
</style>
<style lang="less">
.gdqd-dialog {
    /deep/.el-table 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;
    }
    .qdxq-bottom {
        .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
        .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
        .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
        .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
            padding-left: 16px;
        }
        .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
        .el-tabs--bottom .el-tabs__item.is-top:last-child,
        .el-tabs--top .el-tabs__item.is-bottom:last-child,
        .el-tabs--top .el-tabs__item.is-top:last-child {
            padding-right: 16px;
        }
        .el-tabs__nav-wrap::after {
            height: 0;
        }
        .el-tabs {
            // height: 95vh;
        }
        .el-tabs__content {
            /deep/ .el-tab-pane > div {
                height: 100% !important;
            }
        }
        .is-active {
            color: #025baa !important;
            border-color: #025baa !important;
        }
        .el-tabs__item {
            padding: 5px 16px;
            height: 30px;
            line-height: 22px;
            font-size: 14px;
            font-family: MicrosoftYaHei;
            color: rgba(31, 36, 41, 1);
            border: 1px solid rgba(195, 199, 203, 1);
        }

        /deep/ .el-tabs__item:last-child {
            border-radius: 0px 4px 4px 0px;
        }
        /deep/ .el-tabs__item:nth-child(2) {
            border-radius: 4px 0px 0px 4px;
        }
        .el-tab-pane {
            height: 100% !important;
        }
        .el-tabs__active-bar {
            background-color: transparent !important;
        }
    }
    // 底部表格
    .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;
        }
    }
}
</style>