ChuangHeng/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>
        <template v-if="tidx===1">
            <div class="query adfacjb">
                <el-select v-model="queryParams.questionnaireId" placeholder="问卷" style="width: 100%" @change="getTeamList(callback)" clearable>
                    <el-option v-for="item in useAgentStore().questionnaireList" :key="item.id" :label="item.title" :value="item.id"/>
                </el-select>
            </div>
            <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)" 
                    @deleteReport="e=>deleteTeamReport(e,index,item)"
                    @sendReport="e=>sendReportTeam(e,index,item)"
                    @reCreateReport="e=>reCreateReportTeam(e,index,item)"
                    @refreshReportList="e=>refreshReportTeamList(e,index)">
                </reportList>
                <el-row style="display: flex;justify-content: center;">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryParams.page"
                        :page-sizes="[2, 5, 10]"
                        :page-size="2"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        v-show="total > 0">
                    </el-pagination>
                </el-row>
            </div>
        </template>
        <template v-else-if="tidx===2">
            <div class="query adfacjb">
                <el-select v-model="queryParams.questionnaireId" placeholder="问卷" style="width: 100%" @change="getTeamList(callback)" clearable>
                    <el-option v-for="item in useAgentStore().questionnaireList" :key="item.id" :label="item.title" :value="item.id"/>
                </el-select>
            </div>
            <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)" 
                    @deleteReport="e=>deletePersonReport(e,index,item)"
                    @sendReport="e=>sendReportPerson(e,index,item)"
                    @reCreateReport="e=>reCreateReportPerson(e,index,item)"
                    @refreshReportList="e=>refreshReportPersonList(e,index)">
                </reportList>
                <el-row style="display: flex;justify-content: center;">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryParams.page"
                        :page-sizes="[2, 5, 10]"
                        :page-size="2"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        v-show="total > 0">
                    </el-pagination>
                </el-row>
            </div>
        </template>
    </div>
</template>

<script setup name="">
    import reportList from '@/components/reportList/index.vue'
    import { ref, getCurrentInstance, onMounted, provide } from 'vue'
    const { proxy } = getCurrentInstance();
    import { 
        getTeamQuestionnaireList,
        getTeamReportWjList,
        getPersonReportWjList,
        deleteTeamReportWj,
        sendReportById,
        sendReportUserById,
        reCreateReport,
        getPersonQueList 
     } from "@/api/agent/index.js";
    import {useAgentStore} from "@/store_v3/modules/agent";
    import useCommonStore from "@/store_v3/modules/common";
    useAgentStore().getQuestionnaireData();
    useAgentStore().getTeamData();
    
    const tidx = ref(1)
    const queryParams = ref({
        page:1,
        limit:2,
        questionnaireId: '',
        status: '',
    })
    const queryParams2 = ref({
        name: '',
        teamId: '',
    })
    const total = ref(0)
    const teamList = ref([])
    const personList = ref([])

    const handleChangeTab = (idx) => {
        tidx.value = idx;
        queryParams.value = {
            page:1,
            limit:2,
            questionnaireId: '',
            status: '',
        }
        if(idx===1) getTeamList()
        else if(idx===2) getPersonList()
    }

    const toggleReportTeam = (e,idx) => {
        useCommonStore().$state.teamIndex = idx;
        teamList.value[idx].showMore = !teamList.value[idx].showMore;
        if(teamList.value[idx].showMore){
            getTeamReportWjList(e.id).then(res=>{
                if(res.code!==0) return proxy.$message.error(res.msg)
                teamList.value[idx].reportList = res.data;
            })
        }else teamList.value[idx].reportList = [];
    }
    const toggleReportPerson = (e,idx) => {
        useCommonStore().$state.personIndex = idx;
        personList.value[idx].showMore = !personList.value[idx].showMore;
        if(personList.value[idx].showMore){
            getPersonReportWjList(e.id).then(res=>{
                if(res.code!==0) return proxy.$message.error(res.msg)
                personList.value[idx].reportList = res.data;
            })
        }else personList.value[idx].reportList = [];
    }

    const getTeamList = (callback) => {
        teamList.value = [];
        // total.value = 0;
        getTeamQuestionnaireList(queryParams.value).then(res=>{
            if(res.code!==0) return proxy.$message.error(res.msg)
            teamList.value = res.data.list;
            total.value = res.data.total;
            teamList.value = teamList.value.map(item=>{
                return {
                    ...item,
                    showMore:false,
                    reportList:[]
                };
            })
            callback && callback()
        })
    }
    const handleSizeChange = e =>{
        queryParams.value.limit = e;
        if(tidx.value===1) getTeamList()
        else if(tidx.value===2) getPersonList()
    }
    const handleCurrentChange = e =>{
        queryParams.value.page = e;
        if(tidx.value===1) getTeamList()
        else if(tidx.value===2) getPersonList()
    }
    const getPersonList = (callback) => {
        personList.value = [];
        getTeamQuestionnaireList(queryParams.value).then(res=>{
            if(res.code!==0) return proxy.$message.error(res.msg)
            personList.value = res.data.list;
            total.value = res.data.total;
            personList.value = personList.value.map(item=>{
                return {
                    ...item,
                    showMore:false,
                    reportList:[]
                };
            })
            callback && callback()
        })
    }

    const deleteTeamReport = (e,idx,item) => {
        proxy.$modal.confirm('确认删除该报告吗？如确认会立即执行！').then(async function () {
        let res = await deleteTeamReportWj([e]);
        if(res.code===0){
            proxy.$message.success('删除成功！');
            getTeamReportWjData(useCommonStore().$state.relationId,idx)
        } else proxy.$message.error(res.msg)
        }).then(() => {}).finally(() => {});
    }
    const deletePersonReport = (e,idx,item) => {
        proxy.$modal.confirm('确认删除该报告吗？如确认会立即执行！').then(async function () {
        let res = await deleteTeamReportWj([e]);
        if(res.code===0){
            proxy.$message.success('删除成功！');
            getPersonReportWjData(useCommonStore().$state.teamQuestionnaireId,idx)
        } else proxy.$message.error(res.msg)
        }).then(() => {}).finally(() => {});
    }

    const sendReportTeam = (e,idx,item) => {
        sendReportById(e).then(res=>{
            if(res.code!==0) return proxy.$message.error(res.msg)
            proxy.$message.success('发送成功！')
            getTeamReportWjData(useCommonStore().$state.relationId,idx)
        })
    }
    const sendReportPerson = (e,idx,item) => {
        sendReportUserById(e,useCommonStore().$state.reportUserId).then(res=>{
            if(res.code!==0) return proxy.$message.error(res.msg)
            proxy.$message.success('发送成功！')
            getPersonReportWjData(useCommonStore().$state.teamQuestionnaireId,idx)
        })
    }
    const reCreateReportTeam = (e,idx,item) => {
        reCreateReport(e).then(res=>{
            if(res.code!==0) return proxy.$message.error(res.msg)
            proxy.$message.success('重新生成成功！')
            getTeamReportWjData(useCommonStore().$state.relationId,idx)
        })
    }
    const reCreateReportPerson = (e,idx,item) => {
        reCreateReport(e).then(res=>{
            if(res.code!==0) return proxy.$message.error(res.msg)
            proxy.$message.success('重新生成成功！')
            getPersonReportWjData(useCommonStore().$state.teamQuestionnaireId,idx)
        })
    }
    const refreshReportTeamList = (e,idx) => {
        getTeamReportWjData(e,idx)
    }
    const refreshReportPersonList = (e,idx) => {
        getPersonReportWjData(e,idx)
    }
    provide('refreshTeamList', refreshReportTeamList)
    provide('refreshPersonList', refreshReportPersonList)
    const getTeamReportWjData = (id,idx) => {
        getTeamReportWjList(id).then(res=>{
            if(res.code!==0) return proxy.$message.error(res.msg)
            teamList.value[idx].reportList = res.data;
        })
    }
    const getPersonReportWjData = (id,idx) => {
        getPersonReportWjList(id).then(res=>{
            if(res.code!==0) return proxy.$message.error(res.msg)
            personList.value[idx].reportList = res.data;
        })
    }

    onMounted(async ()=>{
        let type = proxy.$route.query?.type;
        let relationId = proxy.$route.query?.relationId;
        if(!type) return getTeamList()
        if(type==1){
            getTeamList(()=>{
                let idx = teamList.value.findIndex(item=>item.id==relationId)
                if(idx>-1) toggleReportTeam(teamList.value[idx],idx)
            })
        }else if(type==2){
            tidx.value = 2;
            getPersonList(()=>{
                let idx = personList.value.findIndex(item=>item.id==relationId)
                if(idx>-1) toggleReportPerson(personList.value[idx],idx)
            })
        }
    })
</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: 156px;
                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: 156px;
                        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>