rt-sim-training-client/src/views/competitionManage/bankList/index.vue

<template>
  <div>
    <query-list-page ref="user" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
    <dialog-detail ref="detail" />
  </div>
</template>

<script>
import { UrlConfig } from '@/scripts/ConstDic';
import { listQuestionPage, deleteQuestion } from '@/api/questionBank.js';
import DialogDetail from './dialog-detail';
import { convertSheetToList } from '@/utils/runPlan';
import XLSX from 'xlsx';

export default {
    components: {
        DialogDetail
    },
    data() {
        return {
            pagerConfig: {
                pageSize: 'pageSize',
                pageIndex: 'pageNum'
            },
            queryForm: {
                reset: true,
                labelWidth: '80px',
                leftSpan: 17,
                queryObject: {
                    type: {
                        type: 'select',
                        label: '类 型',
                        config: {
                            data: this.$ConstSelect.QuestionTypeList
                        }
                    },
                    topic: {
                        type: 'text',
                        label: '题 目'
                    }
                }
            },
            queryList: {
                query: listQuestionPage,
                selectCheckShow: false,
                indexShow: true,
                columns: [
                    {
                        title: '题 目',
                        prop: 'topic'
                    },
                    {
                        title: '类 型',
                        prop: 'type',
                        type: 'tag',
                        width: '120',
                        columnValue: (row) => { return this.$ConstSelect.translate(row.type, 'QuestionTypeList'); },
                        tagType: (row) => {
                            return '';
                        }
                    },
                    {
                        title: '答 案',
                        prop: 'answer',
                        type: 'tagMore',
                        width: '200',
                        columnValue: (row) => { return this.answerTags(row); },
                        tagType: (row) => {
                            return '';
                        }
                    },
                    // {
                    //     title: '创建人',
                    //     prop: 'createUserName',
                    //     width: '100'
                    // },
                    {
                        type: 'button',
                        title: '操 作',
                        width: '320',
                        buttons: [
                            {
                                name: '编辑',
                                handleClick: this.edit
                            },
                            {
                                name: '删 除',
                                handleClick: this.doDelete,
                                // showControl: (row) => { return row.createUserId == this.userId; },
                                type: 'danger'
                            },
                            {
                                name: '预 览',
                                handleClick: this.doDetail
                            }
                        ]
                    }
                ],
                actions: [
                    { text: '添 加', handler: this.doCreate },
                    { text: '导 入', fileType: 'file', handler: this.importQuestionBank },
                    { text: '出题规则管理', handler: this.questionsRuleManage}
                ]
            }
        };
    },
    computed: {
        userId() {
            return this.$store.state.user.id;
        }
    },
    methods: {
        doCreate() {
            this.$router.push({path: `${UrlConfig.bank.questionCreate}`});
        },

        edit(index, row) {
            this.$router.push({path: `${UrlConfig.bank.questionUpdate}/${row.id}`});
        },

        doDelete(index, row) {
            this.$confirm('删除试题，是否继续？', '提 示', {
                confirmButtonText: '确 定',
                cancelButtonText: '取 消',
                type: 'warning'
            }).then(() => {
                deleteQuestion(row.id).then(resp => {
                    this.reloadTable();
                }).catch(error => {
                    this.$message.error(`删除试题失败: ${error.message}`);
                });
            }).catch( () => { });
        },

        doDetail(index, row) {
            this.$refs.detail.doShow({index, row});
        },

        answerTags(row) {
            const answer = [];
            row.optionList.forEach((el, i) => {
                switch (row.type) {
                case 'select':
                    if (el.correct) {
                        answer.push(this.$asc2chart(i + 65));
                    }
                    break;
                case 'judge':
                    if (el.correct) {
                        answer.push(el.content);
                    }
                    break;
                case 'multi':
                    if (el.correct) {
                        answer.push(this.$asc2chart(i + 65));
                    }
                    break;
                case 'fill':
                    answer.push(el.content);
                    break;
                case 'answer':
                    answer.push(el.content);
                    break;
                }
            });
            return answer;
        },

        reloadTable() {
            this.queryList.reload();
        },
        handleImport(file) {
            const questionTypeMap = {
                '单选': 'select',
                '多选': 'multi',
                '判断': 'judge',
                '填空': 'fill',
                '问答': 'answer'
            };
            if (file) {
                setTimeout(() => {
                    const that = this;
                    const reader = new FileReader();
                    if (reader) {
                        reader.onload = function (e) {
                            let wb;
                            const data = e.target.result;
                            if (that.rABS) {
                                wb = XLSX.read(btoa(that.fixdata(data)), { // 手动转化
                                    type: 'base64'
                                });
                            } else {
                                wb = XLSX.read(data, {
                                    type: 'binary'
                                });
                            }
                            const questionList = [];
                            if (wb && wb.Sheets) {
                                for (const index in wb.Sheets) {
                                    const dataList = convertSheetToList(wb.Sheets[index], true);
                                    let questionTypeIndex;
                                    let topicIndex;
                                    let option1Index;
                                    let option2Index;
                                    let option3Index;
                                    let option4Index;
                                    let answerIndex;
                                    dataList.forEach((item, index) => {
                                        if (item[0] === '题型') {
                                            questionTypeIndex = index;
                                        } else if (item[0] === '题目') {
                                            topicIndex = index;
                                        } else if ( item[0] === '选项' && item[1] === 'A') {
                                            option1Index = index;
                                        } else if (!item[0] && item[1] === 'B') {
                                            option2Index = index;
                                        } else if (!item[0] && item[1] === 'C') {
                                            option3Index = index;
                                        } else if (!item[0] && item[1] === 'D') {
                                            option4Index = index;
                                        } else if (item[0] === '答案') {
                                            answerIndex = index;
                                        }
                                    });
                                    if (questionTypeIndex || questionTypeIndex === 0) {
                                        dataList[questionTypeIndex].forEach((item, index) => {
                                            if (item && item !== '题型') {
                                                const param = {
                                                    type: questionTypeMap[item],
                                                    topic: dataList[topicIndex][index],
                                                    optionList: []
                                                };
                                                if (param.type === 'fill') {
                                                    const answer = dataList[answerIndex][index];
                                                    const answerList = answer.split('&&');
                                                    answerList && answerList.forEach(item => {
                                                        param.optionList.push({content: item, correct: true});
                                                    });
                                                } else if (param.type === 'answer') {
                                                    param.optionList.push({content: dataList[answerIndex][index]});
                                                } else {
                                                    param.optionList.push({ content:dataList[option1Index][index] || '正确', correct: dataList[answerIndex][index].includes('A') || dataList[answerIndex][index] == '√' });
                                                    param.optionList.push({ content:dataList[option2Index][index] || '错误', correct: dataList[answerIndex][index].includes('B') || dataList[answerIndex][index] == '×' });
                                                    if (dataList[option3Index][index]) {
                                                        param.optionList.push({content:dataList[option3Index][index], correct: dataList[answerIndex][index].includes('C')});
                                                    }
                                                    if (dataList[option4Index][index]) {
                                                        param.optionList.push({content:dataList[option4Index][index], correct: dataList[answerIndex][index].includes('D')});
                                                    }
                                                }
                                                questionList.push(param);
                                            }
                                        });
                                    }
                                }
                                that.$store.dispatch('race/setPreTheoryData', questionList).then(() => {
                                    that.$router.push({ path: `/system/preTheoryImport`});
                                }).catch((e) => {
                                    that.$message.error('导入题库失败！');
                                });
                                // importQuestionBand(questionList, 'DRTS').then(resp => {
                                //     this.$message.success('导入题库成功!');
                                // }).catch(()=>{
                                //     this.$message.error('导入题库失败！');
                                // });
                            }
                        };
                        if (that.rABS) {
                            reader.readAsArrayBuffer(file);
                        } else {
                            reader.readAsBinaryString(file);
                        }
                    }
                }, 200);
            }
        },
        importQuestionBank() {
            const obj = document.getElementById('queryFormFilesInput');
            if (!obj.files) return;
            const f = obj.files[0];
            this.handleImport(f);
        },
        questionsRuleManage() {
            this.$router.push({ path: `/system/questionsRuleManage`});
        }
    }
};
</script>