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

<template>
    <div class="text-main mb-3">
        当前查询知识点（从左侧选择）：
        <el-text size="large" type="primary" class="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="subjectStat.length" class="text-lg font-bold">
                科目：{{subjectStat.map(ss => `${ss.subjectName}(${ss.count})`).join('、')}}
            </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" @click="buildPaper">生成试卷</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/>
    <div v-loading="questionLoading" element-loading-text="加载试题中...">
        <el-empty v-if="total==0"/>
        <div v-else class="flex flex-col gap-5">
            <question-content v-for="q in questionList" :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>
        </div>
        <pagination v-show="total>0" :total="total" v-model:page="pageNum" v-model:limit="pageSize"
                    @pagination="getQuestionList"/>
    </div>

    <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="QuestionHand">
import {ElMessage} from "element-plus";
import {useProvidePaperQuestionCondition} from "@/views/dz/papers/hooks/usePaperQuestionCondition.js";
import {useInjectPaperBatchCondition} from "@/views/dz/papers/hooks/usePaperBatchCondition.js";
import {useInjectPaperKnowledgeCondition} from "@/views/dz/papers/hooks/usePaperKnowledgeCondition.js";
import {useInjectGlobalLoading} from "@/views/hooks/useGlobalLoading.js";
import QuestionContent from "@/views/components/question-content.vue";

const props = defineProps({
    allowMultiple: Boolean,
    exactMode: Boolean
})
const emits = defineEmits(['submit'])

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

const {batchId} = useInjectPaperBatchCondition()
const {knowledgeNode} = useInjectPaperKnowledgeCondition()
const {loading: globalLoading} = useInjectGlobalLoading()
const {
    keyword,
    qtpye,
    qTypes,
    pageNum,
    pageSize,
    total,
    questionList,
    getQuestionList,
    cart,
    groupedQuestions,
    currentSubject,
    subjectStat,
    hasQuestion,
    addQuestion,
    removeQuestion,
    removeQuestionGroup,
    clearCart
} = useProvidePaperQuestionCondition(props.exactMode, true)

// 试题列表加载状态
const questionLoading = computed(() => globalLoading.value)

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

const buildPaper = function () {
    // validation
    if (!cart.value.length) return ElMessage.error('请将试题加入试题篮')
    emits('submit', cart.value)
    // const paper = {...paperArgs.value, questions: cart.value}
    // usePaperStorage(paper)
    // router.push({name: 'PaperDetail'})
}
</script>

<style scoped>

</style>