ieplus/back-ui/src/views/dz/papers/components/paper-question-hand.vue

<template>
    <div class="text-main mb-3">
        当前查询知识点（从左侧选择）：<el-text type="primary font-bold">{{ knowledgeNode?.name }}</el-text>
    </div>
    <div class="flex flex-row items-center gap-3">
        <el-input v-model="keywordLocal" clearable prefix-icon="search" placeholder="输入题目关键字-回车触发搜索"
                  style="width: 250px" @keydown.enter="confirmKeyword" @clear="confirmKeyword"/>
        <el-select v-model="qtpye" clearable style="width: 220px">
            <el-option v-for="t in qTypes" :value="t.dictValue" :label="t.dictLabel"></el-option>
        </el-select>
        <el-popover width="250">
            <span v-if="currentSubject" class="text-sm font-bold">科目：{{ currentSubject.subjectName }}</span>
            <div v-for="g in groupedQuestions" class="flex flex-col">
                <el-divider style="margin: 10px 0"/>
                <span>{{ g.qtpye }}：{{ g.questions.length }}道</span>
                <el-link type="danger" plain icon="delete" class="self-end" @click="removeQuestionGroup(g.qtpye)">清除
                </el-link>
            </div>
            <el-divider style="margin: 10px 0"/>
            <div class="flex items-center justify-between">
                <el-link type="danger" plain icon="delete" @click="clearCart">全部清除</el-link>
                <el-button type="primary">生成试卷</el-button>
            </div>
            <template #reference>
                <el-button type="primary" size="large" icon="shopping-cart" class="ml-auto">试题篮（{{
                        cart.length
                    }}）
                </el-button>
            </template>
        </el-popover>
    </div>
    <el-divider/>
    <el-empty v-if="total==0"/>
    <template v-else v-for="q in questionList">
        <question-content :question="q" @parse="showParseQuestion=q,showParse=true">
            <el-button v-if="!hasQuestion(q)" type="primary" icon="plus" class="ml-auto" @click="addQuestion(q)">
                加入试题篮
            </el-button>
            <el-button v-else type="danger" plain icon="delete" class="ml-auto" @click="removeQuestion(q)">移出试题篮
            </el-button>
        </question-content>
        <el-divider/>
    </template>
    <pagination v-show="total>0" :total="total" v-model:page="pageNum" v-model:limit="pageSize"
                @pagination="getQuestionList"/>

    <el-dialog v-model="showParse" append-to-body show-close @close="showParse=false">
        <template #title>ID:{{ showParseQuestion.id }} 试题解析</template>
        <div v-if="showParseQuestion.answer0" v-html="`【正确答案】` + showParseQuestion.answer0"/>
        <div v-if="showParseQuestion.parse" v-html="`【解析】` + showParseQuestion.parse" class="mt-5"></div>
        <div v-if="showParseQuestion.parse0" v-html="`【解析】` + showParseQuestion.parse0" class="mt-5"></div>
        <template #footer>
            <el-button type="primary" @click="showParse=false">确 定</el-button>
        </template>
    </el-dialog>
</template>

<script setup name="PaperQuestionHand">

import {useProvidePaperQuestionCondition} from "@/views/dz/papers/hooks/usePaperQuestionCondition.js";
import {useInjectPaperExactCondition} from "@/views/dz/papers/hooks/usePaperExactCondition.js";
import {useInjectPaperFullCondition} from "@/views/dz/papers/hooks/usePaperFullCondition.js";
import QuestionContent from "@/views/components/question-content.vue";

const props = defineProps({
    allowMultiple: Boolean,
    exactMode: Boolean
})

const showParse = ref(false)
const showParseQuestion = ref(null)

const {knowledgeNode} = props.exactMode ? useInjectPaperExactCondition() : useInjectPaperFullCondition()
const {
    keyword,
    qtpye,
    qTypes,
    pageNum,
    pageSize,
    total,
    questionList,
    getQuestionList,
    cart,
    groupedQuestions,
    currentSubject,
    hasQuestion,
    addQuestion,
    removeQuestion,
    removeQuestionGroup,
    clearCart
} = useProvidePaperQuestionCondition(props.exactMode, props.allowMultiple)

const keywordLocal = ref('')
const confirmKeyword = (val) => keyword.value = keywordLocal.value
</script>

<style scoped>

</style>