NN2025081602/addons/admin/src/views/exam/component/TopicManager.vue

<template>
    <div>
        <el-dialog :close-on-click-modal="false" :visible="visible" :title="'试题管理 - 试卷ID: ' + paperId" width="90%"
            top="5vh" @close="closeDialog" custom-class="topic-manager-dialog">
            <div class="topic-manager-container">
                <!-- 试题列表 -->
                <div class="topic-list-container">
                    <div class="topic-list-header">
                        <h3>试题列表</h3>
                        <el-button type="primary" icon="el-icon-plus" size="small" @click="showAddForm()">
                            添加试题
                        </el-button>
                    </div>

                    <el-table :data="topics" row-key="id" height="600" v-loading="loading" :border="true"
                        :stripe="true">
                        <el-table-column label="排序" width="80">
                            <template slot-scope="{}">
                                <i class="el-icon-sort"></i>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column label="ID" prop="id" width="60" /> -->
                        <el-table-column label="题目内容" min-width="200">
                            <template slot-scope="{ row }">
                                <div v-if="row.show_type === 1" class="topic-content clickable"
                                    @click="showContentDialog('题目内容', row.topic_name)">
                                    {{ row.topic_name }}
                                </div>
                                <div v-else class="topic-content clickable"
                                    @click="showImageDialog('题目内容', row.topic_name)">
                                    <image-preview size="xs" :images="[row.topic_name]" />
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="题型" width="80">
                            <template slot-scope="{ row }">
                                <el-tag :type="getTopicTypeTag(row.topic_type)">
                                    {{ row.topic_type }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="分数" prop="score" width="60" align="center" />
                        <el-table-column label="正确答案" width="120">
                            <template slot-scope="{ row }">
                                <div v-if="row.show_type === 1" class="topic-content clickable"
                                    @click="showContentDialog('正确答案', row.correct_answer)">
                                    <text-ellipsis :text="row.correct_answer" :max-length="10" />
                                </div>
                                <div v-else class="topic-content clickable"
                                    @click="showImageDialog('正确答案', row.correct_answer)">
                                    <image-preview size="xs" :images="[row.correct_answer]" />
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="解析" width="120">
                            <template slot-scope="{ row }">
                                <div v-if="row.show_type === 1" class="topic-content clickable"
                                    @click="showContentDialog('解析', row.topic_analysis)">
                                    <text-ellipsis :text="row.topic_analysis" :max-length="10" />
                                </div>
                                <div v-else class="topic-content clickable"
                                    @click="showImageDialog('解析', row.topic_analysis)">
                                    <image-preview size="xs" :images="[row.topic_analysis]" />
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="180" align="center" fixed="right">
                            <template slot-scope="{ row, $index }">
                                <el-button size="mini" type="primary" plain @click="editTopic(row)">编辑</el-button>
                                <el-button size="mini" type="danger" plain
                                    @click="deleteTopic(row, $index)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!-- 拖拽排序提示 -->
                    <div class="drag-tips">
                        <i class="el-icon-info"></i>
                        提示：可以通过拖拽行来调整试题顺序
                    </div>
                </div>

            </div>
        </el-dialog>

        <!-- 添加/编辑试题弹窗 -->
        <el-dialog :visible.sync="showForm" :title="isEdit ? '编辑试题' : '添加试题'" width="800px"
            :close-on-click-modal="false">
            <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
                <el-form-item label="题目类型" prop="topic_type">
                    <el-select v-model="form.topic_type" placeholder="请选择题型" @change="changeTopicType">
                        <el-option v-for="type in topicTypes" :key="type.value" :label="type.label" :value="type.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="显示方式" prop="show_type">
                    <el-radio-group v-model="form.show_type">
                        <el-radio :label="1">文本</el-radio>
                        <el-radio :label="2">图片</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="题目内容" prop="topic_name" v-if="form.show_type === 1">
                    <el-input type="textarea" :rows="3" v-model="form.topic_name" placeholder="请输入题目内容"></el-input>
                </el-form-item>

                <el-form-item label="题目图片" prop="topic_name" v-else>
                    <uploadImage :limit="1" v-model="form.topic_name"></uploadImage>
                </el-form-item>

                <el-form-item label="分数" prop="score">
                    <el-input-number v-model="form.score" :min="1" :max="100"></el-input-number>
                </el-form-item>

                <el-form-item label="图片选项/答案" prop="answer_type" v-if="form.show_type === 2">
                    <el-radio-group v-model="form.answer_type">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="2">否</el-radio>
                    </el-radio-group>
                </el-form-item>

                <!-- 单选题、多选题 -->
                <div v-if="['单选题', '多选题'].includes(form.topic_type)">
                    <template v-if="form.answer_type == 1">
                        <!-- 选项：图片方式 -->
                        <el-form-item v-for="(option, index) in options" :key="index"
                            :label="'选项 ' + String.fromCharCode(65 + index)"
                            :prop="'answer_' + String.fromCharCode(65 + index)">
                            <uploadImage :limit="1" v-model="options[index]" />
                        </el-form-item>

                        <!-- 正确答案：选择对应选项 -->
                        <el-form-item label="正确答案" prop="correct_answer">
                            <el-select v-model="form.correct_answer" placeholder="请选择正确答案" multiple
                                v-if="form.topic_type === '多选题'">
                                <el-option v-for="(option, index) in options" :key="index"
                                    :label="'选项 ' + String.fromCharCode(65 + index)"
                                    :value="String.fromCharCode(65 + index)" />
                            </el-select>
                            <el-select v-model="form.correct_answer" placeholder="请选择正确答案" v-else>
                                <el-option v-for="(option, index) in options" :key="index"
                                    :label="'选项 ' + String.fromCharCode(65 + index)"
                                    :value="String.fromCharCode(65 + index)" />
                            </el-select>
                        </el-form-item>
                    </template>

                    <template v-else>
                        <!-- 选项：文本方式 -->
                        <el-form-item v-for="(option, index) in options" :key="index"
                            :label="'选项 ' + String.fromCharCode(65 + index)"
                            :prop="'answer_' + String.fromCharCode(65 + index)">
                            <el-input v-model="options[index]"
                                :placeholder="'请输入选项' + String.fromCharCode(65 + index) + '的内容'" />
                        </el-form-item>

                        <!-- 正确答案：选择对应选项 -->
                        <el-form-item label="正确答案" prop="correct_answer">
                            <el-select v-model="form.correct_answer" placeholder="请选择正确答案" multiple
                                v-if="form.topic_type === '多选题'">
                                <el-option v-for="(option, index) in options" :key="index"
                                    :label="String.fromCharCode(65 + index)" :value="String.fromCharCode(65 + index)" />
                            </el-select>
                            <el-select v-model="form.correct_answer" placeholder="请选择正确答案" v-else>
                                <el-option v-for="(option, index) in options" :key="index"
                                    :label="String.fromCharCode(65 + index)" :value="String.fromCharCode(65 + index)" />
                            </el-select>
                        </el-form-item>
                    </template>
                </div>


                <div v-else-if="form.topic_type === '判断题'">
                    <el-form-item label="正确答案" prop="correct_answer">
                        <el-radio-group v-model="form.correct_answer">
                            <el-radio label="正确">正确</el-radio>
                            <el-radio label="错误">错误</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>

                <!-- 填空题，简答题 -->
                <div v-else>
                    <div v-if="form.answer_type === 1">
                        <el-form-item label="正确答案" prop="correct_answer">
                            <uploadImage :limit="1" v-model="form.correct_answer"></uploadImage>
                        </el-form-item>
                    </div>
                    <div v-else>
                        <el-form-item label="正确答案" prop="correct_answer">
                            <el-input type="textarea" :rows="2" v-model="form.correct_answer"
                                placeholder="请输入正确答案"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <el-form-item label="答案解析" prop="topic_analysis" class="mt-16">
                    <div v-if="form.show_type === 1">
                        <el-input type="textarea" :rows="3" v-model="form.topic_analysis"
                            placeholder="请输入题目解析"></el-input>
                    </div>
                    <div v-else>
                        <uploadImage :limit="1" v-model="form.topic_analysis"></uploadImage>
                    </div>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelForm">取消</el-button>
                <el-button type="primary" @click="submitForm">保存</el-button>
            </div>
        </el-dialog>

        <!-- 内容查看弹窗 -->
        <el-dialog :visible.sync="contentDialogVisible" :title="contentDialogTitle" width="600px">
            <div class="content-display">
                <pre>{{ contentDialogContent }}</pre>
            </div>
        </el-dialog>

        <!-- 图片查看弹窗 -->
        <el-dialog :visible.sync="imageDialogVisible" :title="imageDialogTitle" width="800px">
            <div class="image-display">
                <image-preview size="lg" :images="[imageDialogImage]" />
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Sortable from 'sortablejs';
import uploadImage from '../../../components/uploadImage'

export default {
    components: {
        uploadImage
    },
    name: 'TopicManager',
    props: {
        visible: Boolean,
        paperId: Number,
        defaultSceneType: { type: Number, default: null },
        defaultType: { type: Number, default: null },
    },
    data() {
        return {
            loading: false,
            topics: [],
            topicTypes: [], // 题目类型列表
            showForm: false,
            isEdit: false,
            editingIndex: -1,
            form: {
                id: null,
                paper_id: null,
                topic_name: '',
                show_type: 1,
                answer_type: 2,
                topic_type: '单选题',
                score: 5,
                sort: 0,
                topic_analysis: '',
                correct_answer: '',
                answer_A: '',
                answer_B: '',
                answer_C: '',
                answer_D: '',
                answer_E: '',
                answer_F: ''
            },
            rules: {
                topic_name: [
                    { required: true, message: '请输入题目内容', trigger: 'blur' }
                ],
                topic_type: [
                    { required: true, message: '请选择题型', trigger: 'change' }
                ],
                score: [
                    { required: true, message: '请输入分数', trigger: 'blur' }
                ],
                correct_answer: [
                    { required: true, message: '请选择或输入正确答案', trigger: 'blur' }
                ]
            },
            options: ['', '', '', '', '', ''],
            currentTopic: null,
            // 内容查看弹窗
            contentDialogVisible: false,
            contentDialogTitle: '',
            contentDialogContent: '',
            // 图片查看弹窗
            imageDialogVisible: false,
            imageDialogTitle: '',
            imageDialogImage: ''
        };
    },
    mounted() {
        this.loadTopicTypes();
    },
    watch: {
        visible(val) {
            if (val) {
                this.loadTopics();
            } else {
                this.resetForm();
            }
        },
    },
    methods: {
        async loadTopicTypes() {
            try {
                const res = await this.$http.get('/topics/topicTypes');
                if (res.data.code === 0) {
                    this.topicTypes = res.data.data;
                } else {
                    this.$message.error(res.data.msg);
                }
            } catch (error) {
                this.$message.error('加载题目类型失败');
                console.error(error);
            }
        },
        async loadTopics() {
            this.loading = true;
            try {
                const res = await this.$http.get('/topics/index', {
                    params: { paper_id: this.paperId, limit: 999 }
                });

                if (res.data.code === 0) {
                    this.topics = res.data.data;
                    this.initSortable();
                } else {
                    this.$message.error(res.data.msg);
                }
            } catch (error) {
                this.$message.error('加载试题失败');
                console.error(error);
            } finally {
                this.loading = false;
            }
        },

        initSortable() {
            const table = document.querySelector('.topic-list-container .el-table__body-wrapper tbody');
            if (table) {
                Sortable.create(table, {
                    animation: 150,
                    handle: '.el-icon-sort',
                    onEnd: async (evt) => {
                        const { oldIndex, newIndex } = evt;
                        const movedItem = this.topics.splice(oldIndex, 1)[0];
                        this.topics.splice(newIndex, 0, movedItem);

                        // 生成排序数据：倒序（index 大的排前面）
                        const sortData = this.topics.map((item, index) => ({
                            id: item.id,
                            sort: this.topics.length - index
                        }));

                        try {
                            const res = await this.$http.post('/topics/sort', {
                                paper_id: this.paperId,
                                sort_data: sortData
                            });

                            if (res.data.code === 0) {
                                this.$message.success('排序已保存');
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        } catch (error) {
                            this.$message.error('保存排序失败');
                            console.error(error);
                        }
                    }
                });
            }
        },

        showAddForm() {
            this.isEdit = false;
            this.resetForm();
            this.form.paper_id = this.paperId;
            this.showForm = true;
        },

        editTopic(topic) {
            this.isEdit = true;
            this.currentTopic = { ...topic };

            // 先处理判断题答案，再整体赋值
            let correctAnswer = topic.correct_answer;

            // 专门处理判断题答案
            if (topic.topic_type === '判断题') {
                correctAnswer = this.formatJudgmentAnswer(topic.correct_answer);
                console.log('判断题答案处理:', topic.correct_answer, '->', correctAnswer);
            } else if (topic.topic_type === '多选题' && typeof topic.correct_answer === 'string') {
                correctAnswer = topic.correct_answer.split(',');
            }

            // 整体赋值form
            this.form = {
                ...topic,
                correct_answer: correctAnswer
            };

            this.editingIndex = this.topics.findIndex(item => item.id === topic.id);

            // 设置选项
            this.options = [
                topic.answer_A || '',
                topic.answer_B || '',
                topic.answer_C || '',
                topic.answer_D || '',
                topic.answer_E || '',
                topic.answer_F || '',
            ];

            console.log('编辑后form数据:', this.form);
            console.log('correct_answer值:', this.form.correct_answer);

            this.showForm = true;
        },
        // 添加判断题答案格式化方法
        formatJudgmentAnswer(value) {
            console.log('格式化判断题答案，输入值:', value, '类型:', typeof value);

            if (value === '正确' || value === '错误') {
                return value; // 已经是正确格式，直接返回
            }

            // 处理各种可能的数据格式
            const mapping = {
                '正确': '正确',
                '错误': '错误',
                'true': '正确',
                'false': '错误',
                '1': '正确',
                '0': '错误',
                '对的': '正确',
                '错的': '错误',
                '对': '正确',
                '错': '错误'
            };

            const result = mapping[value] || '正确'; // 默认值
            console.log('格式化结果:', result);
            return result;
        },
        async deleteTopic(topic, index) {
            try {
                await this.$confirm('确定要删除这道试题吗？', '提示', {
                    type: 'warning'
                });

                const res = await this.$http.post('/topics/delete', {
                    id: topic.id
                });

                if (res.data.code === 0) {
                    this.$message.success('删除成功');
                    this.topics.splice(index, 1);
                } else {
                    this.$message.error(res.data.msg);
                }
            } catch (error) {
                if (error !== 'cancel') {
                    this.$message.error('删除失败');
                    console.error(error);
                }
            }
        },
        changeTopicType(value) {
            console.log(value)
            if (this.form.topic_type === '多选题') {
                this.form.correct_answer = []
            } else {
                this.form.correct_answer = ''
            }
            this.form.topic_type = value
        },
        async submitForm() {
            this.$refs.formRef.validate(async (valid) => {
                if (!valid) return;

                try {
                    // 保存选项
                    ['A', 'B', 'C', 'D', 'E', 'F'].forEach((letter, index) => {
                        this.form[`answer_${letter}`] = this.options[index] || '';
                    });

                    // 处理多选题答案
                    let correctAnswer = this.form.correct_answer;
                    if (this.form.topic_type === '多选题' && Array.isArray(correctAnswer)) {
                        correctAnswer = correctAnswer.join(',');
                    }

                    const formData = {
                        ...this.form,
                        correct_answer: correctAnswer,
                        paper_id: this.paperId
                    };

                    const res = await this.$http.post("/topics/edit", formData);

                    if (res.data.code === 0) {
                        this.$message.success(this.isEdit ? '更新成功' : '添加成功');
                        this.loadTopics();
                        this.cancelForm();
                        this.$emit('saved');
                    } else {
                        this.$message.error(res.data.msg);
                    }
                } catch (error) {
                    this.$message.error(this.isEdit ? '更新失败' : '添加失败');
                    console.error(error);
                }
            });
        },

        cancelForm() {
            this.showForm = false;
            this.resetForm();
        },

        resetForm() {
            this.form = {
                id: null,
                paper_id: this.paperId,
                topic_name: '',
                show_type: 1,
                answer_type: 2,
                topic_type: '单选题',
                score: 5,
                sort: 0,
                topic_analysis: '',
                correct_answer: '',
                answer_A: '',
                answer_B: '',
                answer_C: '',
                answer_D: '',
                answer_E: '',
                answer_F: ''
            };
            this.options = ['', '', '', '', '', ''];
            this.editingIndex = -1;

            if (this.$refs.formRef) {
                this.$refs.formRef.clearValidate();
            }
        },

        handleImageSuccess(res) {
            if (res.code === 0) {
                this.form.topic_name = res.data.url;
            } else {
                this.$message.error(res.msg);
            }
        },

        beforeImageUpload(file) {
            const isJPGOrPNG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPGOrPNG) {
                this.$message.error('上传图片只能是 JPG/PNG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!');
            }

            return isJPGOrPNG && isLt2M;
        },

        getTopicTypeTag(type) {
            const typeMap = {
                '单选题': 'primary',
                '多选题': 'success',
                '判断题': 'warning',
                '填空题': 'info',
                '简答题': 'danger'
            };
            return typeMap[type] || 'default';
        },

        // 显示文本内容弹窗
        showContentDialog(title, content) {
            this.contentDialogTitle = title;
            this.contentDialogContent = content;
            this.contentDialogVisible = true;
        },

        // 显示图片内容弹窗
        showImageDialog(title, image) {
            this.imageDialogTitle = title;
            this.imageDialogImage = image;
            this.imageDialogVisible = true;
        },

        closeDialog() {
            this.$emit('update:visible', false);
        }
    }
};
</script>

<style scoped>
.topic-manager-container {
    height: 70vh;
}

.topic-list-container {
    width: 100%;
}

.topic-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.topic-content {
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.topic-content.clickable {
    cursor: pointer;
    transition: all 0.3s ease;
}

.topic-content.clickable:hover {
    background-color: #f5f7fa;
    border-radius: 4px;
    padding: 4px;
}

.content-display {
    max-height: 400px;
    overflow-y: auto;
}

.content-display pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: inherit;
    margin: 0;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 4px;
}

.image-display {
    text-align: center;
}

.drag-tips {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #f4f4f5;
    color: #909399;
    border-radius: 4px;
    font-size: 12px;
}
</style>