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

<template>
  <el-dialog :visible.sync="dialogVisible" :before-close="handleClose" title="试卷导出" width="500px">
    <el-form ref="form" :model="form" label-width="150px" :rules="rules">
      <el-form-item label="理论竞赛时长:" prop="theoryExamTime">
        <el-input-number v-model="form.theoryExamTime" controls-position :min="1" /><span>&nbsp&nbsp分</span>
      </el-form-item>
      <el-form-item label="实操竞赛时长:" prop="operateExamTime">
        <el-input-number v-model="form.operateExamTime" controls-position :min="1" /><span>&nbsp&nbsp分</span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleExport">导出</el-button>
        <el-button @click="handleClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</template>

<script>
import { getRaceById } from '@/api/competition';
export default {
    mixins: [
        // WindowResizeHandler
    ],
    props: {
        operateQuestionList: {
            type: Array,
            default() {
                return [];
            }
        },
        theoryQuestionList: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {
            index: 0,
            height: 0,
            loading: false,
            dialogVisible: false,
            form: {
                theoryExamTime: 1,
                operateExamTime: 1
            },
            rules: {
                theoryExamTime: [
                    { required: true, message: '请输入理论竞赛时长', trigger: 'blur' }
                ],
                operateExamTime: [
                    { required: true, message: '请输入实操竞赛时长', trigger: 'blur' }
                ]
            }
        };
    },
    computed: {
    },
    watch: {

    },
    methods: {
        doShow() {
            this.dialogVisible = true;
        },
        handleClose() {
            this.dialogVisible = false;
        },
        handleExport() {
            getRaceById(this.$route.query.raceId).then(resp => {
                const exportData = {
                    practicalQuestions: this.operateQuestionList,
                    theoryQuestions: this.theoryQuestionList,
                    competitionId: this.$route.query.raceId,
                    theoryExamTime: this.form.theoryExamTime,
                    practicalExamTime: this.form.operateExamTime
                };
                const content = new Blob([JSON.stringify(exportData)]);
                const urlObject = window.URL || window.webkitURL || window;
                const url = urlObject.createObjectURL(content);
                const el = document.createElement('a');
                el.href = url;
                el.download = `${resp.data.name}试卷.json`;
                el.click();
                urlObject.revokeObjectURL(url);
                this.dialogVisible = false;
            }).catch(()=> {
                this.$message.error('查询竞赛详情失败！');
            });
        }
    }
};

</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>