wanda-bm-guide/src/views/other/gcfzDialog.vue

<template>
    <div class='dialog-container'>
        <el-dialog v-if='Object.keys(dialogInfo).length>0' :title='`${systemName}-${dialogInfo.label}`' :visible.sync='visible' :fullscreen='true'>
            <div v-if='dialogInfo.type==1' class='table-1'>
                <gcfz-table1 v-if='hztjTable.length>=0' :loading='loading' :hztjTable='hztjTable'></gcfz-table1>
                <p class='table1-p'>注：详细位置可在辅助用房管理平面图中查询</p>
            </div>
            <div v-if='dialogInfo.type==2' class='table-2'>
                <gcfz-table2
                    v-if='bgjlTable.length>=0'
                    :loading='loading'
                    :total='total'
                    :page='page'
                    :size='size'
                    :bgjlTable='bgjlTable'
                    @queryChange='queryChange'
                    @changeEmit='changeEmit'
                ></gcfz-table2>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import moment from 'moment'
// import Select from '@/components/Select/Select.vue'
import { Select } from 'meri-design'
import gcfzTable1 from './gcfz1'
import gcfzTable2 from './gcfz2'
import { querygcfzyfhz, queryfzyfchange } from '@/api/other.js'

export default {
    props: ['systemName'],
    data() {
        return {
            visible: false,
            dialogInfo: {},
            loading: true,
            hztjTable: [],
            total: 0,
            page: 1,
            size: 10,
            floor: '',
            bgjlTable: [],
            floors: '',
            searVal: '',
            dateVal: '',
        }
    },
    mounted() {
        this.floor = this.$cookie.get('floorNow') || '1F'
    },
    components: { Select, gcfzTable1, gcfzTable2 },
    methods: {
        // 辅助用房管理-汇总统计报
        query() {
            let getParams = {
                plazaId: this.$store.state.plazaId,
                orderBy: 'floor,1',
            }

            querygcfzyfhz({ getParams }).then((res) => {
                if (res.result == 'success') {
                    //console.log('汇总统计报', res)
                    this.loading = false
                    this.hztjTable = res.data ? res.data : []
                }
            })
        },
        changeEmit(val) {
            console.log(val)
            if (val.floors) {
                this.floors = val.floors
            }
            if (val.searVal) {
                this.searVal = val.searVal
            }
            if (val.dateVal) {
                this.dateVal = val.dateVal
            } else {
                this.dateVal = []
            }
            this.queryChange()
        },
        // 变更记录
        queryChange() {
            let getParams = {
                plazaId: this.$store.state.plazaId,
                page: this.page,
                size: this.size,
            }
            if (this.floors !== '全部') {
                getParams.floor = this.floors
            }
            if (this.searVal) {
                getParams.keyword = `${this.searVal}:region`
            }
            if (this.dateVal.length > 0) {
                getParams.recordtimeStartDate = this.dateVal[0] + '000000'
                // getParams.recordtimeEndDate = this.dateVal[1] + '000000'
                getParams.recordtimeStartDate = moment(this.dateVal[1]).format('YYYYMMDD235959')
            }
            queryfzyfchange({ getParams }).then((res) => {
                if (res.result == 'success') {
                    //console.log('变更记录', res)
                    this.total = res.count
                    this.loading = false
                    this.bgjlTable = res.data ? res.data : []
                }
            })
        },
        showModal(item) {
            this.visible = true
            this.dialogInfo = item
            if (this.dialogInfo.type == 1) {
                this.query()
            } else {
                this.queryChange()
            }
        },
    },
}
</script>
<style lang="less" scoped>
.table-1 {
    padding: 16px 24px 24px 24px;
    .table1-p {
        height: 48px;
        font-size: 14px;
        font-family: MicrosoftYaHei;
        color: rgba(31, 36, 41, 1);
        line-height: 48px;
        margin-top: 8px;
    }
}
.table-2 {
    position: relative;
    padding: 12px 12px 52px 12px;
}
</style>
<style lang="less">
.dialog-container {
    .el-table td,
    .el-table th {
        padding: 8px 0;
    }
    .el-input--suffix .el-input__inner {
        padding-right: 20px;
    }
    .el-dialog__title {
        color: #ffffff;
    }
}
.el-dialog__wrapper {
    transition-duration: 0.3s;
}
.dialog-fade-enter-active {
    animation: none !important;
}
.dialog-fade-leave-active {
    transition-duration: 0.15s !important;
    animation: none !important;
}

.dialog-fade-enter-active .el-dialog,
.dialog-fade-leave-active .el-dialog {
    animation-fill-mode: forwards;
}

.dialog-fade-enter-active .el-dialog {
    animation-duration: 0.3s;
    animation-name: anim-open;
    animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
}

.dialog-fade-leave-active .el-dialog {
    animation-duration: 0.3s;
    animation-name: anim-close;
}

@keyframes anim-open {
    0% {
        opacity: 0;
        transform: scale3d(0, 0, 1);
    }
    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

@keyframes anim-close {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale3d(0.5, 0.5, 1);
    }
}
</style>