cpdm_pc/src/components/CpdmTask.vue

<script lang="ts" setup>
import CpdmMessage from '../components/CpdmMessage.vue'
import { addExtendTaskApi, querySelectTaskApi, updateTaskApi } from '@/api/plan';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { getUnread, planNumGet } from '@/utils/test';
import { userInfoStore } from '@/stores'
const userInfo = userInfoStore()
const router = useRouter()
//打开弹出框的标志
const taskVisible = ref<boolean>(false)
//打开页面--接收参数planId
const planId = ref<string>('')

const taskList = ref<any>();

const selectCheck = ref<string>('')

const cpdmMe = ref<any>()

const open = (val: string) => {
    //获取得到的参数planId
    //根据plaId查询可选的认知任务
    planId.value = val;
    taskVisible.value = true;

    //调用方法根据planId查询
    querySelectTask()
}

const querySelectTask = async () => {
    //根据任务进行查询
    const res: any = await querySelectTaskApi(planId.value)

    if (res.code == '200') {
        taskList.value = res.data

    } else {
        ElMessage({
            type: 'error',
            message: res.msg
        })
    }

}
//放弃
const giveUp = () => {
    //点击放弃则开始调用评论的插件
    // planNumGet()
    // getUnread()
    updateTaskApi(planId.value)
    cpdmMe.value.open()
}
//确定按钮
const statusLock = ref<boolean>(false)
const comFun = async () => {
    if (statusLock.value) {
        return
    }
    statusLock.value = true
    //则跳转到测试计划页面
    if (selectCheck.value == '') {
        ElMessage({
            type: 'warning',
            message: '尚未选择'
        })
        return
    }
    //新增用户可选扩展量表
    let params = {
        flag: selectCheck.value,
        planId: planId.value,
        type: '1',
        userNo: userInfo.userInfo.userNo
    }
    let res: any = await addExtendTaskApi(params)
    statusLock.value = false
    if (res.code == '200') {
        router.push({ name: 'plan' })

    } else {
        ElMessage({
            type: 'error',
            message: res.msg
        })
    }


}

defineExpose({ open })
</script>
<template>

    <div>
        <el-dialog v-model="taskVisible" style="border-radius: 5px;" width="60%" top="15vh" @closed="giveUp">
            <template #header="{ close, titleId, titleClass }">
                <div class="com_title">选做题</div>
                <div class="select_min">

                    <el-radio-group v-model="selectCheck">
                        <!-- works when >=2.6.0, recommended ✔️ not work when <2.6.0 ❌ -->
                        <el-radio-button :value="item.flag" v-for="item in taskList " size="large" border>{{ item.name
                            }}</el-radio-button>
                        <!-- works when <2.6.0, deprecated act as value when >=3.0.0 -->
                        < </el-radio-group>

                </div>

                <div class="home_mid_plan_button">
                    <div class="pub_button" @click="giveUp"> 不做了
                    </div>
                    <div class="pub_button" @click="comFun"> 确定
                    </div>
                </div>
            </template>

        </el-dialog>
        <CpdmMessage ref="cpdmMe" />
    </div>
</template>
<style lang="scss" scoped>
:deep(.el-progress-bar__outer) {
    background-color: #f3f3f3;
    border-radius: 100px;
    height: 6px;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
}

:deep(.el-radio-group) {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 0;
    flex-direction: row;
    justify-content: center;
}

:deep(.el-radio-button) {
    display: inline-block;
    outline: none;
    position: relative;
    margin: 6px;
    // width: 80% !important;
}

:deep(.el-radio-button__inner) {
    // width: 100%;
    border-radius: 4px !important;
    margin-top: 10px;
    border: 1px solid #89DF32;
    border-left: 1px solid #89DF32 !important;
    padding: 10px 10px;
    font-size: 14px;
    font-weight: 700;
    text-align: left;

}

:deep(.el-radio-button__inner:hover) {
    // width: 100%;
    border-radius: 4px !important;
    margin-top: 10px;
    border: 1px solid #89DF32;
    border-left: 1px solid #89DF32 !important;
    padding: 10px 10px;
    font-size: 14px;
    font-weight: 700;
    text-align: left;

    color: #000000;
    background-color: #00DE7E;
    color: #ffffff;

}

// :deep().el-radio-button__original-radio:checked+.el-radio-button__inner {
//     background-color: #48D68E !important;
//     border-color: #B2F2D2 !important;
//     box-shadow: 0 0 0 0 var(--el-radio-button-checked-border-color, var(--el-color-primary)) !important;
//     color: var(--el-radio-button-checked-text-color, var(--el-color-white));
// }

:deep().el-radio-button.is-active .el-radio-button__original-radio:not(:disabled)+.el-radio-button__inner {
    background-color: #48D68E !important;
    border-color: #B2F2D2 !important;
    box-shadow: 0 0 0 0 var(--el-radio-button-checked-border-color, var(--el-color-primary)) !important;
    color: var(--el-radio-button-checked-text-color, var(--el-color-white));
}

.com_title {
    text-align: center;
}

.select_min {
    text-align: center;
    margin-top: 10px;
}

.home_mid_plan_button {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 40px;

    // text-align: right;
    .pub_button {
        cursor: pointer;
        // width: 100px;
        border-radius: 4px;
        border: 1px solid #00DE7E;
        color: #ffffff;
        background-color: #000000;

        padding: 8px 30px;
        cursor: pointer;
        display: flex;
        align-items: center;
    }
}
</style>