ChuangHeng_new/src/views/modules/agent/report.vue

<template>
    <div class="page">
        <div class="top adfacjb">
            <div class="t_l">
                <p>报告管理</p>
                <p class="tip">访问和分析PERILL评估报告</p>
            </div>
            <div class="t_r">
                <el-button type="primary" icon="el-icon-upload2">导出报告</el-button>
            </div>
        </div>
        <div class="tabs adfac">
            <div class="t_pre" :class="{'active':tidx===1}" @click="handleChangeTab(1)">团队报告</div>
            <div class="t_pre" :class="{'active':tidx===2}" @click="handleChangeTab(2)">个人报告</div>
        </div>
        <div class="query adfacjb">
            <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="queryParams.name" style="width: calc(100% - 448px);"></el-input>
            <el-select v-model="queryParams.team" placeholder="所有团队" style="width: 200px;"></el-select>
            <el-select v-model="queryParams.sort" placeholder="排序方式" style="width: 200px;"></el-select>
        </div>
        <template v-if="tidx===1">
            <div class="list">
                <reportList :item="item" :reportList="item.reportList" :showMore="item.showMore"
                    v-for="(item, index) in teamList" :key="index"
                    @toggleReport="e=>toggleReportTeam(e,index)">
                </reportList>
            </div>
        </template>
        <template v-else-if="tidx===2">
            <div class="list">
                <reportList :item="item" :reportList="item.reportList" :showMore="item.showMore" :isTeam="false"
                    v-for="(item, index) in personList" :key="index"
                    @toggleReport="e=>toggleReportPerson(e,index)">
                </reportList>
            </div>
        </template>
    </div>
</template>

<script setup name="">
    import reportList from '@/components/reportList/index.vue'
    import { ref, getCurrentInstance } from 'vue'
    const { proxy } = getCurrentInstance();
    
    const tidx = ref(1)
    const queryParams = ref({
        name: '',
        team: '',
        sort: ''
    })
    const teamList = ref([
        {
            companyName:'甜梦巧克力工厂',
            wjName:'问卷名称问卷名称问卷名称问卷名称问卷名称',
            teamType:'市场部',
            jzDatetime:'2025-06-18 12:00:30',
            zdPersons:20,
            tdPersons:99,
            showMore:false,
            reportList:[]
        },
        {
            companyName:'甜梦巧克力工厂',
            wjName:'问卷名称问卷名称问卷名称问卷名称问卷名称',
            teamType:'市场部',
            jzDatetime:'2025-06-18 12:00:30',
            zdPersons:20,
            tdPersons:99,
            showMore:false,
            reportList:[]
        },
        {
            companyName:'甜梦巧克力工厂',
            wjName:'问卷名称问卷名称问卷名称问卷名称问卷名称',
            teamType:'市场部',
            jzDatetime:'2025-06-18 12:00:30',
            zdPersons:20,
            tdPersons:99,
            showMore:false,
            reportList:[]
        }
    ])

    const personList = ref([
        {
            companyName:'甜梦巧克力工厂',
            wjName:'问卷名称问卷名称问卷名称问卷名称问卷名称',
            userName:'刘俊',
            teamType:'市场部',
            jzDatetime:'2025-06-18 12:00:30',
            showMore:false,
            reportList:[]
        },
        {
            companyName:'甜梦巧克力工厂',
            wjName:'问卷名称问卷名称问卷名称问卷名称问卷名称',
            userName:'刘俊',
            teamType:'市场部',
            jzDatetime:'2025-06-18 12:00:30',
            showMore:false,
            reportList:[]
        },
        {
            companyName:'甜梦巧克力工厂',
            wjName:'问卷名称问卷名称问卷名称问卷名称问卷名称',
            userName:'刘俊',
            teamType:'市场部',
            jzDatetime:'2025-06-18 12:00:30',
            showMore:false,
            reportList:[]
        }
    ])

    const handleChangeTab = (idx) => {
        tidx.value = idx
    }

    const toggleReportTeam = (e,idx) => {
        teamList.value[idx].showMore = !teamList.value[idx].showMore;
        if(teamList.value[idx].showMore){
            teamList.value[idx].reportList = [
                {reportName:'报告名称报告名称报告名称报告名称',reprtTime:'2025-06-18 12:00:30',status:1},
                {reportName:'报告名称报告名称报告名称报告名称',reprtTime:'2025-06-18 12:00:30',status:3},
                {reportName:'报告名称报告名称报告名称报告名称',reprtTime:'2025-06-18 12:00:30',status:0},
                {reportName:'报告名称报告名称报告名称报告名称',reprtTime:'2025-06-18 12:00:30',status:2}
            ];
        }else teamList.value[idx].reportList = [];
    }
    const toggleReportPerson = (e,idx) => {
        personList.value[idx].showMore = !personList.value[idx].showMore;
        if(personList.value[idx].showMore){
            personList.value[idx].reportList = [
                {reportName:'报告名称报告名称报告名称报告名称',reprtTime:'2025-06-18 12:00:30',status:1},
                {reportName:'报告名称报告名称报告名称报告名称',reprtTime:'2025-06-18 12:00:30',status:3},
                {reportName:'报告名称报告名称报告名称报告名称',reprtTime:'2025-06-18 12:00:30',status:0},
                {reportName:'报告名称报告名称报告名称报告名称',reprtTime:'2025-06-18 12:00:30',status:2}
            ];
        }else personList.value[idx].reportList = [];
    }
</script>

<style scoped lang="scss">
    .page{
        padding: 28px 20px;
        background: #FAFAFA;

        .top{
            .t_l{
                p{
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: bold;
                    font-size: 16px;
                    color: #252525;
                    line-height: 16px;
                    &.tip{
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 14px;
                        color: #6B7280;
                        line-height: 14px;
                        margin-top: 16px;
                    }

                }
            }
        }

        .tabs{
            width: 100%;
            margin-top: 28px;
            border-bottom: 1px solid #E5E7EB;
            .t_pre{
                width: 116px;
                padding-bottom: 18px;
                position: relative;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #252525;
                line-height: 16px;
                text-align: center;
                cursor: pointer;
                &.active{
                    font-weight: bold;
                    color: #761E6A;
                    &::after{
                        content: '';
                        width: 116px;
                        height: 2px;
                        background: #761E6A;
                        position: absolute;
                        left: 0;
                        bottom: 0;
                    }

                }
            }
        }

        .query{
            width: 100%;
            padding: 16px 20px;
            box-sizing: border-box;
            background: #FFFFFF;
            border-radius: 6px;
            border: 1px solid #F3F4F6;
            margin-top: 31px;
        }

        .list{
            .l_item{
                margin-top: 10px;
                width: 100%;
                padding: 24px;
                box-sizing: border-box;
                background: #FFFFFF;
                border-radius: 6px;
                border: 1px solid #F3F4F6;
                .li_l{
                    .li_pre{
                        width: 335px;
                        .lit_text{
                            font-family: PingFang-SC, PingFang-SC;
                            font-weight: bold;
                            font-size: 14px;
                            color: #252525;
                            line-height: 14px;
                            text-align: left;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        .lit_tip{
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            font-size: 14px;
                            color: #6B7280;
                            line-height: 14px;
                            text-align: left;
                            margin-top: 16px;
                        }
                    }
                }
            }
        }
    }
</style>