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

<!-- 综合事项记录 -->
<template>
    <div class='zhsx-box'>
        <div class='zhsx-top'>
            <div>
                <el-tabs v-model='activeName' @tab-click='handleClick'>
                    <el-tab-pane v-for='(item,index) in everySystem' :key='index' :label='`${item.label}`' :name='`${item.type}`'>
                        <!-- 综合记录事项 -->
                        <div v-if='item.type==1'>
                            <zhsx-other-table1 ref='tableZhsx1'></zhsx-other-table1>
                        </div>
                        <!-- 第三方检测事项 -->
                        <div v-if='item.type==2'>
                            <zhsx-other-table2 ref='tableZhsx2'></zhsx-other-table2>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div class='zhsx-img' @click='zhsxLog'>
                <img src='../../assets/imgs/zy1.png' alt />
            </div>
        </div>
        <zhsx-dialog ref='Dialog' :tableData='tableData'></zhsx-dialog>
    </div>
</template>
<script>
import moment from 'moment'
import { Select } from 'meri-design'
// import Select from '@/components/Select/Select.vue'
import ZhsxDialog from './zhsxDialog'
import zhsxOtherTable1 from './zhsxOtherTable1'
import zhsxOtherTable2 from './zhsxOtherTable2'
import { queryZhsxjl } from '@/api/other.js'
export default {
    data() {
        return {
            activeName: '1',
            tableData: []
        }
    },
    props: ['everySystem'],
    components: { ZhsxDialog, Select, zhsxOtherTable1, zhsxOtherTable2 },
    methods: {
        zhsxLog() {
            let params = {
                getParams: {}
            }
            queryZhsxjl(params).then(res => {
                let arr = []
                //console.log('综合事项弹框', res)
                this.tableData = res.data || []
                // 将tableData中的第三项都设置为相同的数据
                this.tableData.map(item => {
                    arr.push(item.jlsx)
                })
                arr = [...new Set(arr)]
                this.tableData.map(item => {
                    item.jlsx = arr.join('\n\r')
                })
                console.log(' this.tableData', this.tableData)
            })
            this.$refs.Dialog.open()
        },
        handleClick(tab) {
            if (tab.index == '0') {
                this.$refs.tableZhsx1[0].getZhjl()
            } else if (tab.index == '1') {
                this.$refs.tableZhsx2[0].dsfjc()
            }
        }
    },
    mounted() {
        this.$refs.tableZhsx1[0].getZhjl()
    }
}
</script>
<style lang="less" scoped>
.zhsx-box {
    height: 100%;
    padding: 66px 50px 38px 50px;
    .zhsx-top {
        position: relative;
        .zhsx-img {
            position: absolute;
            width: 16px;
            height: 16px;
            left: 260px;
            top: 3px;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .tab-top {
            display: flex;
            align-items: center;
        }
    }

    .zhsx-bottom {
        margin-top: 12px;
        background: #ffffff;
        position: relative;
        padding-bottom: 73px;
        .footer {
            height: 32px;
            display: flex;
            justify-content: flex-end;
            margin-top: 28px;
        }
    }
}
</style>
<style lang="less">
.zhsx-box {
    .el-dialog__header {
        padding: 16px 50px;
    }
    .el-dialog__title {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        line-height: 24px;
    }
    .el-dialog__body {
        padding: 0 24px;
        height: 90%;
    }
    .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__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);
        background: #fff;
    }
    /deep/.el-tabs__item:nth-child(2) {
        border-radius: 4px 0 0 4px;
    }
    /deep/.el-tabs__item:last-child {
        border-radius: 0 4px 4px 0;
    }
    .el-tabs,
    .el-tabs__content {
        height: 94%;
    }
    .el-tabs__active-bar {
        background-color: transparent !important;
    }
    .is-active {
        color: #025baa;
        border-color: #025baa;
        border-radius: 4px;
    }
    .el-tabs__header {
        margin: 0 0 12px;
    }
    .el-table td,
    .el-table th {
        padding: 8px 0;
    }
    .el-input--suffix .el-input__inner {
        padding-right: 20px;
    }
    @media screen and (max-width: 1366px) {
        /deep/ .el-table td {
            padding: 3px 0;
        }
    }
}
</style>