rt-sim-training-client/src/views/competitionManage/theoryQuestion.vue

<template>
  <el-dialog :visible.sync="dialogVisible" :before-close="handleClose" title="理论试题" width="80%">
    <query-list-page ref="user" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
  </el-dialog>

</template>

<script>
import { listQuestionPage } from '@/api/questionBank.js';
export default {
    mixins: [
        // WindowResizeHandler
    ],
    props: {
        theoryIndexList: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {
            index: 0,
            height: 0,
            loading: false,
            dialogVisible: false,
            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,
                afterQuery: this.afterQuery,
                columns: [
                    {
                        title: '类 型',
                        prop: 'type',
                        type: 'tag',
                        width: '120',
                        columnValue: (row) => { return this.$ConstSelect.translate(row.type, 'QuestionTypeList'); },
                        tagType: (row) => {
                            return '';
                        }
                    },
                    {
                        title: '题 目',
                        prop: 'topic'
                    },
                    {
                        title: '答 案',
                        prop: 'answer',
                        type: 'tagMore',
                        width: '100',
                        columnValue: (row) => { return this.answerTags(row); },
                        tagType: (row) => {
                            return '';
                        }
                    },
                    {
                        title: '创建人',
                        prop: 'createUserName',
                        width: '100'
                    },
                    {
                        type: 'button',
                        title: '操 作',
                        width: '100',
                        buttons: [
                            {
                                name: '添加',
                                handleClick: this.addQuestion,
                                showControl: (row) => { return !row.paper; },
                                type: 'success'
                            },
                            {
                                name: '移出',
                                handleClick: this.removeQuestion,
                                showControl: (row) => { return row.paper; },
                                type: 'warning'
                            }
                        ]
                    }
                ]
            }
        };
    },
    computed: {
    },
    watch: {

    },
    methods: {
        loadInitData() {
            this.$nextTick(() => {
                this.queryList.reload();
            });
        },
        doShow() {
            this.dialogVisible = true;
            this.loadInitData();
        },
        handleClose() {
            this.dialogVisible = false;
        },
        addQuestion(index, row) {
            this.$set(row, 'paper', true);
            row.score = 0;
            this.$emit('addQuestion', row);
        },
        afterQuery(data) {
            if (data && data.list) {
                const that = this;
                const list = data.list;
                if (list) {
                    list.map(elem => {
                        this.$set(elem, 'paper', that.theoryIndexList.includes(elem.id));
                    });
                }
            }
            return data;
        },
        removeQuestion(index, row) {
            this.$set(row, 'paper', false);
            this.$emit('removeQuestion', 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;
                }
            });
            return answer;
        }
    }
};

</script>
<style lang="scss" scoped>
	.layer-center {
		width: 900px;
		height: 100%;
		margin: auto;
		background: #fff;
	}

	.quiz {
		background: #eee;
		height: 100%;

		&::-webkit-scrollbar {
			display:none
		}

		&__card {
			height: 100%;
			.dir-item {
				padding-left: 25px;
			}

			.dir-caption {
				padding-left: 10px;
				line-height: 26px;
				background: #f1f1f1;
			}

		}

		&__container {
			height: 100%;

			&-header {
				height: auto !important;

				.title {
					font-size: 24px;
					line-height: 60px;
					font-weight: bold;
					text-align: center;
				}

				.notes {
					color:#606266;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin:  0 20px;
				}
			}

			&-main {
				.section {
					padding: 5px 20px;
					.caption {
						line-height: 26px;
					}
					.context {
					}
				}
			}

			&-footer {
				text-align: right;
				position: sticky;
				bottom: 0px;
				padding: 40px ;
				.buttons {
					position: relative;
					bottom: 20px;
				}
			}
		}
	}
</style>