portal/src/components/client/QuestionsForCuoti/ShortAnswerQuestion.vue

<template>
    <div class="mta-short-answer-question" v-if="pageData.name">
        <el-row class="mta-first-row" type="flex">
            <el-col>
                <span class="wrap-shitiIndex" v-if="!!shitiIndex">
                    <span v-if="isYueDu">({{shitiIndex}})</span>
                    <span v-else>{{shitiIndex}}.</span>
                </span>
                <!-- 试题题目 -->
                <div class="mta-SC-title" v-html="pageData.name">
                </div>
                <span class="mta-SC-score" v-if="getShowScore && !isYueDu">（{{pageData.score}}分）</span>
            </el-col>
        </el-row>
        <el-row class="mta-two-row" type="flex" v-if='audioOptions'>
            <mta-bus-audio-player :options="audioOptions"
                                  :checktimes="false"></mta-bus-audio-player>
        </el-row>
        <el-row class="mta-two-row" type="flex">
            <el-col>
                <!-- 试题内容区域 -->
                <!--<el-input
                        @change="inputChange"
                        type="textarea"
                        :rows="2"
                        :readonly="typeCase=== 'yulan' || typeCase=== 'geren'"
                        placeholder="请输入简答题答案"
                        v-model="textarea">
                </el-input>-->

                <mta-st-quill-editor
                        ref="editorQuill"
                        :value="textarea"
                        :quillEditorRef="quillEditorRef"
                        flg="1"
                        @syncValue="syncValue">
                </mta-st-quill-editor>
            </el-col>
        </el-row>
        <!--答案-->
        <mta-answer-area
                v-if="typeCase === 'geren' || typeCase === 'cuoti2' || typeCase === 'cuoti3' || typeCase === 'yulan'"
                :data="{
                    showAnswer:showAnswer,
                    analysis: pageData.answer
                }"
        ></mta-answer-area>
        <el-row class="mta-three-row ShortAnswer-btn-box" type="flex">
            <el-col>
                <el-button type="primary" v-if="filesArray&&filesArray.length>0" @click="downloadDialog=true"
                           class="response-btn">
                    下载附件
                </el-button>
                <el-button @click="yulanDialog=true" class="ShortAnswer-yl-btn"  type="primary" v-if="imgArray&&imgArray.length>0">
                    预览图片
                   <!-- <el-image :src="imgArray[0]" :preview-src-list="imgArray" class="ShortAnswer-image-btn"></el-image>-->
                </el-button>
            </el-col>

        </el-row>
        <el-dialog title="下载附件" :append-to-body="true" :visible.sync="downloadDialog" class="ShortAnswer-fj-dialog"
                   width="30%">
            <div v-for="(item,index) in filesArray" class="fj-box">
                <div @click="downloadFile(item)">附件{{index+1}}</div>
            </div>
        </el-dialog>
        <el-dialog title="图片"
                   :visible.sync="yulanDialog"
                   width="50%"
                   center
                   class="yulanDl"
                   :close-on-click-modal="false"
                   :append-to-body="true"
                   @close="yulanDialogClose"
                   @open="yulanDialogOpen"
        >
            <Perfect-scrollbar>
                <div v-if="imgArray&&imgArray.length>0"
                     style="display: flex;justify-content: flex-start; flex-wrap: wrap; height: 300px" >
                    <el-image
                            v-for="(item,index) in imgArray"
                            :key="index"
                            style="width: 100px; height: 100px; margin-left: 10px; margin-bottom: 6px"
                            :src="item"
                            :preview-src-list="[...item]">
                        <div slot="error" class="image-slot">
                            <!--  图片请求异常时的异常处理   -->
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                </div>
            </Perfect-scrollbar>
            <div slot="footer" class="dialog-footer">
                <el-button @click="yulanDialog = false">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { mapGetters }       from 'vuex';
    import { getStringByHtml2 } from '@/utils/common.js';
    import MtaAnswerArea        from '@/components/client/QuestionsForCuoti/AnswerArea.vue';
    import MtaBusAudioPlayer    from '@/components/custom/MtaBusAudioPlayer.vue';
    import MtaStQuillEditor     from '@/components/management/QuillEditor.vue';
    import { PerfectScrollbar } from 'vue2-perfect-scrollbar';
    export default {
        name:       'ShortAnswerQuestion',
        props:      {
            questionData: { // 简答题数据
                require: true,
                type:    Object,
            },
            shitiIndex:   {
                type:    Number,
                default: 0,
            },
            isYueDu:      {
                type:    Boolean,
                default: false,
            },
            yuduIndex:    {
                type: Number,
            },
            // 组件接环状态， kaoshi,geren,yulan,cuoti2
            typeCase:     {
                type:    String,
                default: 'kaoshi',
            },
            getShowModel: {
                type:    Boolean,
                default: true,
            },
        },
        components: {
            MtaAnswerArea,
            MtaBusAudioPlayer,
            MtaStQuillEditor,
            PerfectScrollbar
        },
        watch:      {
            questionData: {
                handler(newVal, oldVal) {
                    switch (this.typeCase) {
                        case `kaoshi`:
                            this.pageData = newVal;
                            this.textarea = newVal.reply === `null` ? '' : newVal.reply;
                            break;
                        case `geren`:
                            this.pageData = newVal;
                            // 答案
                            this.textarea = newVal.reply === `null` ? '' : newVal.reply;
                            // 解析答案
                            this.showAnswer = getStringByHtml2(newVal.result);
                            // 解析
                            this.analysis = getStringByHtml2(newVal.answer);
                            break;
                        case `cuoti`:
                            this.pageData = newVal;
                            // 答案
                            this.textarea = newVal.reply === `null` ? '' : newVal.reply;
                            break;
                        case `yulan`:
                            this.pageData = newVal;
                            // 答案
                            // this.textarea = getStringByHtml(newVal.result === `null` ? '' : newVal.result);
                            this.textarea = '';
                            // 解析答案
                            this.showAnswer = getStringByHtml2(newVal.result);
                            // 解析
                            this.analysis = getStringByHtml2(newVal.answer);

                            break;
                        case `cuoti2`:
                            this.pageData = newVal;
                            // 答案
                            this.textarea = newVal.reply === `null` ? '' : newVal.reply;
                            // 解析答案
                            this.showAnswer = getStringByHtml2(newVal.result);
                            // 解析
                            this.analysis = getStringByHtml2(newVal.answer);
                            break;
                        case `cuoti3`:
                            this.pageData = newVal;
                            // 答案
                            this.textarea = newVal.reply === `null` ? '' : newVal.reply;
                            // 解析答案
                            this.showAnswer = getStringByHtml2(newVal.result);
                            // 解析
                            this.analysis = getStringByHtml2(newVal.answer);
                            break;
                    }

                    let data = this.questionData;
                    if (data.adjunct) {
                        let arrItem = JSON.parse(data.adjunct);
                        for (const item of arrItem) {
                            if (item.type === 'audio') {
                                this.audioOptions = {};
                                this.audioOptions.src = item.src;
                                this.audioOptions.title = item.oriname.split('.')[0];
                                this.audioOptions.autoplay = false;
                                this.audioOptions.dragable = item.dragable;

                                this.audioOptions.playtimes = item.playtimes;
                            }
                        }
                    }
                    if (data.files) {
                        let allFiles = JSON.parse(data.files);
                        let imgArray = [];
                        let filesArray = [];
                        let imageType = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'];
                        for (let name of allFiles) {
                            var index1 = name.lastIndexOf('.');
                            var index2 = name.length;
                            var suffix = name.substring(index1 + 1, index2);
                            if (imageType.indexOf(suffix) != -1) {
                                imgArray.push(name);  // 如果为图片
                            } else {
                                filesArray.push(name);
                            }
                        }
                        this.imgArray = imgArray;
                        this.filesArray = filesArray;
                    }
                },
                immediate: true,
                deep:      true,
            },
        },
        computed:   {
            ...mapGetters(['getShowScore']),
        },
        data() {
            return {
                // 页面渲染必须数据
                pageData:       null,
                // 答案
                textarea:       null,
                // 显示答案
                showAnswer:     null,
                // 解析
                analysis:       null,
                audioOptions:   '',
                imgArray:       [],
                filesArray:     [],
                downloadDialog: false,
                quillEditorRef: '',
                yulanDialog: false,
            };
        },
        methods:    {
            yulanDialogClose(){

            },
            yulanDialogOpen(){

            },
            downloadFile(data) {
                window.location.href = data;
            },
            inputChange(val) {
                // this.$emit('reply', [1, this.questionData.stId, val]);
                if (this.isYueDu) {
                    this.$emit('reply', {
                        paragraph: this.questionData.paragraph,
                        type:      'jianda',
                        stId:      this.questionData.stId,
                        data:      val,
                        number:    this.yuduIndex,
                    });
                } else {
                    this.$emit('reply', {
                        paragraph: this.questionData.paragraph,
                        stId:      this.questionData.stId,
                        data:      val,
                        number:    this.shitiIndex - 1,
                    });
                }

            },
            syncValue(flg, content) {
                this.content = content;
                this.textarea = content;
                if (this.isYueDu) {
                    this.$emit('reply', {
                        paragraph: this.questionData.paragraph,
                        type:      'jianda',
                        stId:      this.questionData.stId,
                        files:     this.questionData.files,
                        data:      content,
                        number:    this.yuduIndex,
                    });
                } else {
                    this.$emit('reply', {
                        paragraph: this.questionData.paragraph,
                        stId:      this.questionData.stId,
                        files:     this.questionData.files,
                        data:      content,
                        number:    this.shitiIndex - 1,
                    });
                }


            },
        },
        created() {
            this.quillEditorRef = 'quillEditorRef' + Math.floor(Math.random() * 100000);
        },
    };
</script>