cpdm_pc/src/components/CpmdQuestionnaire.vue

<script lang="ts" setup>
import { queryQuestionApi, sqveQuesQuestionApi, userPlanDetailApi } from '@/api/home';
import { userInfoStore } from '@/stores';
import Plan from '@/views/Plan.vue';
import { Model } from 'echarts';
import { ElMessage } from 'element-plus';
import { format } from 'date-fns/format';
import { ref, defineExpose, reactive, defineEmits } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const userInfo = userInfoStore()
const dialogVisible = ref<boolean>(false)

//设置防止重复点击的事件
const isLock = ref<boolean>(false)

const ruleForm = reactive<any>({
    //是否是少数民族
    isMinority: false,
    //出生年月
    birthday: '',
    //是否是独生子女
    isOnlyChild: false,
    //父母婚姻状况
    matrimony: 1,
    //异常体质
    abnormal: '',
    //吸烟程度
    smoking: '',
    //饮酒程度
    drink: '',
    //您在成长过程中是否有过被寄养在别人家的经历
    isFoster: false,
    //您在成长过程中是否有过超过六个月的留守经历
    isLeftBehind: false,
    //有无经济压力
    economy: false,
    //有无学业压力
    schoolWork: false,
    //有无就业压力
    job: false,
    //是否迷茫
    confused: false

})
//子组件调用父组件的方法
const emit = defineEmits(['continueFun'])

const visible = ref<boolean>(false)
const questionList = ref<any>()
//调用接口  查询问卷调查项的接口
const queryQuestion = async (planId: string) => {
    //
    questionList.value = [];
    let paramsNum = ''
    if (userInfo.userInfo.roleType == '2') {
        paramsNum = '1'
    }
    if (userInfo.userInfo.roleType == '1') {
        paramsNum = '0'
    }
    //查询当前用户登录类型
    let list: any = await queryQuestionApi(paramsNum)
    for (let i = 0; i < list.data.length; i++) {
        let obj = {
            quesId: list.data[i].id,
            optionValue: "",//问题已选的答案
            idMandatory: list.data[i].idMandatory,
            mulValue: list.data[i].optionValue.split('；'),//全部备选答案
            orgNo: userInfo.userInfo.orgNo,//组织编号
            planId: planId,//计划ID
            quesName: list.data[i].name,//计划问题
            quesType: list.data[i].quesType,//问题类型
            sortValue: list.data[i].sortValue,//排序值
            topicType: list.data[i].topicType,//本题类型
            userName: userInfo.userInfo.userName,//用户姓名
            userNo: userInfo.userInfo.userNo,//用户编号
        }
        questionList.value.push(obj)
    }

    //从此得到返回列表
}

//提交答案时校验
const submitQuestion = () => {
    //如果已经上锁---则直接退出
    if (isLock.value) {
        return
    }
    isLock.value = true;
    for (let i = 0; i < questionList.value.length; i++) {
        if (questionList.value[i].topicType == '3' && questionList.value[i].optionValue != '') {
            //格式化时间格式
            questionList.value[i].optionValue = format(questionList.value[i].optionValue, "yyyy-MM-dd");
        }
        if (questionList.value[i].idMandatory == '1') {
            if (questionList.value[i].optionValue == '') {
                ElMessage({
                    message: `请完成必选项:${questionList.value[i].quesName}`,
                    type: 'error'
                })
                isLock.value = false;
                return
            }
        }
    }
    //调用保存的接口
    //保存接口
    saveQuesQuestion()


}
const comT = () => {
    if (transmitType.value == '0') {
        //跳转到测试计划页面
        router.push({ name: 'plan' })
    } else if (transmitType.value == '1') {
        //调用父组件接口
        emit('continueFun')
    } else {
        //跳转到测试计划页面
        router.push({ name: 'plan' })
    }

}
//保存问卷接口
//设置一个防止重复调用的接口

const saveQuesQuestion = async () => {
    let res: any = await sqveQuesQuestionApi(questionList.value)
    if (res.code == 200) {
        //跳转到测试计划
        ElMessage({
            type: 'success',
            message: '提交完成'
        })
        dialogVisible.value = false
        visible.value = true
    }

    //当前的标志是---为0时   需要
    // if (transmitType.value == '0') {
    //     //都需要弹出--弹出框

    // }



    //提交完成后、弹出框提示是进入测试计划页面----还是直接开始测试页面


    //弹出框进行提示
    //是否跳转到测试计划页面

    //是否弹出测试计划页面

    //是否弹出开始测试弹出框
    isLock.value = false;
}

const disbledData = (time: any) => {
    return time.getTime() >= Date.now()
}

const transmitType = ref('')
const open = (planId: string, type: string) => {
    dialogVisible.value = true

    transmitType.value = type

    //拿到登录用户的信息

    queryQuestion(planId)
}
//
defineExpose({ open })
</script>
<template>
    <el-dialog v-model="dialogVisible" title="" width="600px" top="15vh">
        <template #header>
            <p style="text-align: center;font-weight: 700;">问卷填写</p>
        </template>

        <span style="height: 60vh;display: flex;overflow-y: auto;padding:0px 20px">
            <div v-if="questionList.length > 0">
                <div v-for="item, index in questionList" :key="item.id" class="question_out">
                    <div class="title_out">{{ index + 1 }}:
                        <span class="xing">{{ item.idMandatory == '1' ? '*' : '' }}</span><span>{{
                            item.quesName }}</span>
                    </div>

                    <el-radio-group v-model="item.optionValue" v-if="item.topicType == '1'" class="question_radio">
                        <el-radio :label="ch" v-for="ch in item.mulValue" :key="ch"></el-radio>
                        <!-- <el-radio label="线下场地免费"></el-radio> -->
                    </el-radio-group>
                    <el-date-picker v-model="item.optionValue" type="date" placeholder="选择出生年月" class="question_radio"
                        v-if="item.topicType == '3'" :disabled-date="disbledData" />
                </div>
            </div>
        </span>
        <template #footer>
            <div class="footer_cus">
                <div class="start_button_out_close">
                    <div class="start_button_self_close" @click="dialogVisible = false">
                        <span>关闭</span>
                    </div>
                </div>
                <!-- <el-button type="primary" @click="submitQuestion">
                    提交
                </el-button> -->
                <div class="start_button_out">
                    <div class="start_button_self" @click="submitQuestion">
                        <span>提交</span>
                    </div>
                </div>
                <!-- <div>
                    提交
                </div> -->
            </div>
        </template>
    </el-dialog>
    <!-- //另一个框 弹出确认是否跳转 -->
    <el-dialog v-model="visible" :show-close="true" width="500" style="border-radius: 20px;">
        <template #header>
            <div class="my-header" style="text-align: center;">
                <div class="exit_login_title">提示</div>
                <div class="exit_login_info" v-if="transmitType == '0'">是否跳转到测试计划页面?</div>
                <div class="exit_login_info" v-if="transmitType == '1'">是否直接开始测试计划?</div>
                <div class="start_button_out" style="margin-top:20px;display: flex;justify-content: space-around;">
                    <div class="start_button_self_close" @click="visible = false">
                        取消
                    </div>
                    <div class="start_button_self" @click="comT">
                        确定
                    </div>
                </div>

            </div>
        </template>

    </el-dialog>


</template>
<style lang="scss">
.el-dialog {
    border-radius: 20px;
}

.footer_cus {
    display: flex;
    justify-content: space-around;
}

.exit_login_title {
    text-align: center;
    color: #222222;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 3px;
}

.exit_login_info {
    text-align: center;
    letter-spacing: 3px;
    font-size: 18px;
    margin-top: 20px;
}


.start_button_out {
    // margin-top: 40px;
    // margin-bottom: 40px;
    display: flex;
    flex-direction: row;
    justify-content: end;

    .start_button_self_close {
        cursor: pointer;
        // width: 100px;
        border-radius: 12px;
        border: 1px solid #dddddd;
        color: #000000;
        background-color: #ffffff;
        margin-right: 20px;
        padding: 8px 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
    }

    .start_button_self {
        cursor: pointer;
        // width: 100px;
        border-radius: 12px;
        border: 3px solid #48D68E;
        color: #ffffff;
        background-color: #000000;
        margin-right: 20px;
        padding: 8px 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
    }
}

.start_button_out_close {
    // margin-top: 40px;
    // margin-bottom: 40px;
    display: flex;
    flex-direction: row;
    justify-content: end;

    .start_button_self_close {
        cursor: pointer;
        // width: 100px;
        border-radius: 12px;
        border: 1px solid #dddddd;
        color: #000000;
        background-color: #ffffff;
        margin-right: 20px;
        padding: 8px 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
    }
}


.question_out {
    display: flex;
    flex-direction: column;

    .title_out {
        display: flex;

        .xing {
            width: 10px;
            text-align: right;
            color: red;
        }
    }

    .question_radio {
        margin-top: 5px;
        margin-bottom: 10px;
        margin-left: 10px;
    }
}
</style>