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-update-question ref="question" @updateQuestion="updateQuestion" />
    <dialog-update-answer ref="answer" @updateAnswer="updateAnswer" />
    <dialog-detail ref="detail" />
  </div>
</template>

<script>
import { UrlConfig } from '@/scripts/ConstDic';
import { listQuestionPage, deleteQuestion, updateQuestion, updateAnswer } from '@/api/questionBank.js';
import DialogUpdateQuestion from './dialog-update-question';
import DialogUpdateAnswer from './dialog-update-answer';
import DialogDetail from './dialog-detail';

export default {
    components: {
        DialogUpdateQuestion,
        DialogUpdateAnswer,
        DialogDetail
    },
    data() {
        return {
            pagerConfig: {
                pageSize: 'pageSize',
                pageIndex: 'pageNum'
            },
            queryForm: {
                reset: true,
                labelWidth: '80px',
                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: '100',
                        columnValue: (row) => { return this.answerTags(row); },
                        tagType: (row) => {
                            return '';
                        }
                    },
                    {
                        title: '分值',
                        prop: 'score',
                        width: '100'
                    },
                    {
                        title: '创建人',
                        prop: 'createUserName',
                        width: '100'
                    },
                    {
                        type: 'button',
                        title: '操 作',
                        width: '420',
                        buttons: [
                            {
                                name: '更新题目',
                                handleClick: this.doUpdateQuestion,
                                // showControl: (row) => { return row.createUserId == this.userId; },
                                type: 'success'
                            },
                            {
                                name: '更新选项',
                                handleClick: this.doupdateAnswers,
                                // showControl: (row) => { return row.createUserId == this.userId && row.type != 'judge'; },
                                type: 'success'
                            },
                            {
                                name: '更新答案',
                                handleClick: this.doUpdateAnswer,
                                // showControl: (row) => { return row.createUserId == this.userId; },
                                type: 'success'
                            },
                            {
                                name: '删 除',
                                handleClick: this.doDelete,
                                // showControl: (row) => { return row.createUserId == this.userId; },
                                type: 'danger'
                            },
                            {
                                name: '预 览',
                                handleClick: this.doDetail
                                // showControl: (row) => { return row.createUserId != this.userId; }
                            }
                        ]
                    }
                ],
                actions: [
                    { text: '添 加', handler: this.doCreate }
                ]
            }
        };
    },
    computed: {
        userId() {
            return this.$store.state.user.id;
        }
    },
    methods: {
        doCreate() {
            this.$router.push({path: `${UrlConfig.bank.questionCreate}`});
        },

        doUpdateQuestion(index, row) {
            this.$refs.question.doShow({index, row});
        },

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

        doUpdateAnswer(index, row) {
            this.$refs.answer.doShow({index, row});
        },

        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});
        },

        updateQuestion(form) {
            updateQuestion(form.id, form).then(resp => {
                this.reloadTable();
            }).catch(error => {
                this.$message.error(`修改问题失败: ${error.message}`);
            });
        },

        updateAnswer(form) {
            updateAnswer(form.questionId, form).then(resp => {
                this.reloadTable();
            }).catch(error => {
                this.$message.error(`修改答案失败: ${error.message}`);
            });
        },
        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;
                }
            });
            return answer;
        },

        reloadTable() {
            this.queryList.reload();
        }
    }
};
</script>