完成教师端，页面顶部展示

luohairen

2024-11-08 cce9b105726750f1b76eef2fa250680ebf36d06c

 src/views/exam/question/edit/audio.vue

@@ -1,21 +1,23 @@
<template>
  <div class="app-container">
    <el-form :model="form" ref="form" label-width="100px" v-loading="formLoading" :rules="rules">
      <el-form-item label="学科：" prop="subjectId" required>
      <el-form-item label="学科：" prop="subjectId">
        <el-select v-model="form.subjectId" placeholder="学科">
          <el-option v-for="item in subjects" :key="item.id" :value="item.id" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题干：" prop="title" required>
      <el-form-item label="题干：" prop="title">
        <el-input v-model="form.title" @focus="inputClick(form, 'title')" />
      </el-form-item>
      <el-form-item label="语音：" prop="audioFile" required>
      <el-form-item label="语音：" prop="audioFile">
        <el-upload v-model="form.audioFile" :action="uploadUrl" :limit="1" accept="audio/*" :on-success="uploadSuccess"
          :file-list="audioList">
          :on-remove="handleRemove" :file-list="audioList">
          <el-button size="small" type="primary">点击上传</el-button>
          <el-button v-if="form.audioFile" size="small" type="primary" @click.stop="audioPlay(form.audioFile)">{{
      audioInstance ? '停止' : '播放' }}</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="选项：" required>
      <el-form-item label="选项：">
        <el-form-item :label="item.prefix" :key="item.prefix" v-for="(item, index) in form.items" label-width="50px"
          class="question-item-label">
          <el-input v-model="item.prefix" style="width:50px;" />
@@ -24,13 +26,13 @@
            @click="questionItemRemove(index)"></el-button>
        </el-form-item>
      </el-form-item>
      <el-form-item label="解析：" prop="analyze" required>
      <el-form-item label="解析：" prop="analyze">
        <el-input v-model="form.analyze" @focus="inputClick(form, 'analyze')" />
      </el-form-item>
      <el-form-item label="难度：" required>
      <el-form-item label="难度：">
        <el-rate v-model="form.difficult" class="question-item-rate"></el-rate>
      </el-form-item>
      <el-form-item label="正确答案：" prop="correct" required>
      <el-form-item label="正确答案：" prop="correct">
        <el-radio-group v-model="form.correct">
          <el-radio v-for="item in form.items" :key="item.prefix" :label="item.prefix">{{ item.prefix }}</el-radio>
        </el-radio-group>
@@ -125,7 +127,8 @@
        dialog: false,
        question: null,
        loading: false
      }
      },
      audioInstance: null
    }
  },
  created() {
@@ -144,6 +147,18 @@
    }
  },
  methods: {
    handleRemove() {
      this.form.audioFile = ''
    },
    audioPlay(url) {
      if (this.audioInstance) {
        this.audioInstance.pause();
        this.audioInstance = null;
      } else {
        this.audioInstance = new Audio('/api/files/' + url);
        this.audioInstance.play();
      }
    },
    uploadSuccess(response) {
      this.form.audioFile = response.data.url;
      this.form.originalFile = response.data.name;