ChuangHeng/src/views/modules/agent/questionnaire.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-plus">发送问卷</el-button> -->
            </div>
        </div>
        <div class="query adfacjb">
            <el-select v-model="queryParams.questionnaireId" placeholder="问卷" style="width: calc(100% - 324px);" @change="getList" clearable>
                <el-option v-for="item in useAgentStore().questionnaireList" :key="item.id" :label="item.title" :value="item.id"/>
            </el-select>
            <el-select v-model="queryParams.status" placeholder="全部状态" style="width: 300px;" @change="getList" clearable>
                <el-option label="进行中" :value="0"></el-option>
                <el-option label="已完成" :value="1"></el-option>
            </el-select>
        </div>
        <div class="list">
            <div class="l_item" v-for="(item, index) in dataList" :key="index">
                <div class="li_top adfacjb">
                    <div class="lt_l">项目名称：{{ item.programName }}</div>
                    <div class="lt_r adfac">
                        <div class="lr_pre adfac" v-hasPermi="['core:questionnaire:info']" @click="handleSchedule(item)">
                            <img src="@/assets/images/agent/send_mini.png">
                            <span>查看进度</span>
                        </div>
                        <div class="lr_pre adfac" v-hasPermi="['core:questionnaire:info']" @click="handleSchedule(item)">
                            <img src="@/assets/images/agent/report_mini.png">
                            <span>生成报告</span>
                        </div>
                        <div class="lr_status" :class="{'jxz':item.status===0,'ywc':item.status===1}">{{ item.status===0?'进行中':(item.status===1?'已完成':'未知') }}</div>
                    </div>
                </div>
                <div class="li_team">公司名称：{{ item.enterpriseName }}</div>
                <div class="li_team">团队名称：{{ item.teamName }}</div>
                <div class="li_wj">问卷名称：{{ item.title }}</div>
                <div class="li_time_person adf">
                    <div class="ltp">发布时间：{{ item.startTime }}</div>
                    <div class="ltp">截止时间：{{ item.endTime }}</div>
                    <div class="ltp">团队成员：<span>{{ item.finishNum||0 }}/{{item.userNum||0}}</span>完成</div>
                    <div class="ltp">发送人：{{ item.creatorName }}</div>
                </div>
                <div class="li_jd">
                    <div class="lj" :style="{'width':(item.finishNum/item.userNum*100)+'%'}"></div>
                </div>
                <div class="li_text adfacjb">
                    <span>完成情况</span>
                    <span>{{ ((item.finishNum/item.userNum)*100).toFixed(0) }}%</span>
                </div>
            </div>
            <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>
    </div>
</template>

<script setup name="">
    import { ref, getCurrentInstance, onMounted } from 'vue'
    import {useAgentStore} from "@/store_v3/modules/agent";
    import { getTeamQuestionnaireList } from "@/api/agent/index.js";
    const { proxy } = getCurrentInstance();
    useAgentStore().getQuestionnaireData();
    
    const queryParams = ref({
        page:1,
        limit:2,
        questionnaireId: '',
        status: '',
    })
    const total = ref(0)
    const dataList = ref([])

    const handleSchedule = (item) => {
        proxy.$router.push({
            path: '/agentQuestionnaireSchedule',
            query:{
                id: item.id,
                questionnaireName: item.title,
                enterpriseName: item.enterpriseName,
                programName: item.programName,
                teamName: item.teamName,
                startTime: item.startTime,
                endTime: item.endTime,
                userNum: item.userNum,
                finishNum: item.finishNum
            }
        })
    }

    const getList = () => {
        let query = {...queryParams.value};
        getTeamQuestionnaireList(query).then(res=>{
            if(res.code!==0) return proxy.$message.error(res.msg)
            dataList.value = res.data.list;
            total.value = res.data.total;
        })
    }

    const handleSizeChange = (e)=>{
        queryParams.value.limit = e;
        getList();
    }
    const handleCurrentChange = (e)=>{
        queryParams.value.page = e;
        getList();
    }

    onMounted(()=>{
        getList()
    })
</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;
                    }

                }
            }
        }

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

        .list{
            width: 100%;
            height: calc(100vh - 196px);
            overflow-y: auto;
            margin-top: 4px;
            .l_item{
                width: 100%;
                padding: 20px 24px;
                box-sizing: border-box;
                margin-top: 16px;
                background: #FFFFFF;
                border-radius: 6px;
                border: 1px solid #F3F4F6;
                .li_top{
                    .lt_l{
                        font-family: PingFang-SC, PingFang-SC;
                        font-weight: bold;
                        font-size: 14px;
                        color: #252525;
                        line-height: 14px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    .lt_r{
                        .lr_pre{
                            cursor: pointer;
                            margin-right: 36px;
                            img{
                                width: 20px;
                                height: 20px;
                            }
                            span{
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 400;
                                font-size: 14px;
                                color: #6B7280;
                                line-height: 20px;
                                margin-left: 8px;
                            }
                        }
                        .lr_status{
                            width: 76px;
                            height: 24px;
                            border-radius: 12px;
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            font-size: 14px;
                            line-height: 24px;
                            text-align: center;
                            &.jxz{
                                background: #FCECB6;
                                color: #864F10;
                            }
                            &.ywc{
                                background: rgba(0,145,145,0.1);
                                color: #009191;
                            }
                        }
                    }
                }
                .li_team{
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                    color: #6B7280;
                    line-height: 14px;
                    margin-top: 16px;
                }
                .li_wj{
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: bold;
                    font-size: 14px;
                    color: #252525;
                    line-height: 16px;
                    margin-top: 24px;
                }
                .li_time_person{
                    margin-top: 16px;
                    .ltp{
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 14px;
                        color: #6B7280;
                        line-height: 14px;
                        margin-right: 142px;
                        span{
                            font-weight: bold;
                            font-size: 16px;
                            color: #761E6A;
                        }
                    }
                }
                .li_jd{
                    width: 100%;
                    height: 8px;
                    background: #F3F4F6;
                    border-radius: 4px;
                    position: relative;
                    margin-top: 20px;
                    .lj{
                        height: 100%;
                        background: linear-gradient( 270deg, #9D5F94 0%, #761E6A 100%);
                        border-radius: 4px;
                        position: absolute;
                        left: 0;
                        top: 0;
                    }
                }
                .li_text{
                    margin-top: 10px;
                    span{
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 14px;
                        color: #646464;
                        line-height: 14px;
                    }
                }
            }
        }
    }
</style>