汉字题数据结构

src/views/exercise_questions/create/components/exercises/ChineseQuestion.vue

@@ -25,7 +25,39 @@
 
       <div class="content">
         <label class="title-little">题目：</label>
-        <el-input v-model="data.content" rows="3" resize="none" type="textarea" placeholder="输入汉字，用空格分开" />
+        <ul>
+          <li v-for="(item, i) in data.option_list" :key="i" class="content-item">
+            <el-input v-model="item.content" maxlength="1" placeholder="输入一个汉字" />
+            <el-input v-model="item.pinyin" placeholder="输入拼音" />
+            <UploadAudio
+              v-if="data.other.audio_generation_method === 'upload'"
+              :key="item.audio_file_id || i"
+              :file-id="item.audio_file_id"
+              :item-index="i"
+              @upload="uploads"
+              @deleteFile="deleteFiles"
+            />
+            <div v-else-if="data.other.audio_generation_method === 'auto'" class="auto-matically">
+              <AudioPlay :file-id="item.audio_file_id" theme-color="gray" />
+              <span class="auto-btn" @click="handleMatically">自动生成</span>
+            </div>
+            <SoundRecord
+              v-else
+              :wav-blob="item.audio_wav"
+              :record-time="item.audio_wav_time"
+              :item-index="i"
+              @deleteWav="deleteWav"
+              @updateWav="updateWav"
+            />
+            <el-input v-model="item.definition" placeholder="输入释义" />
+            <SvgIcon icon-class="delete" class="delete pointer" @click="deleteOption(i, item.audio_file_id)" />
+          </li>
+        </ul>
+      </div>
+      <div class="footer">
+        <span class="add-option" @click="addOption">
+          <SvgIcon icon-class="add-circle" size="14" /> <span>增加选项</span>
+        </span>
       </div>
     </template>
 
@@ -87,6 +119,16 @@
             {{ label }}
           </el-radio>
         </el-form-item>
+        <el-form-item label="音频">
+          <el-radio
+            v-for="{ value, label } in audioGenerationMethodList"
+            :key="value"
+            v-model="data.other.audio_generation_method"
+            :label="value"
+          >
+            {{ label }}
+          </el-radio>
+        </el-form-item>
       </el-form>
     </template>
   </QuestionBase>
@@ -94,21 +136,62 @@
 
 <script>
 import QuestionMixin from '../common/QuestionMixin.js';
+import UploadAudio from '../common/UploadAudio.vue';
+import SoundRecord from '../common/SoundRecord.vue';
 
 import { changeOptionType } from '@/views/exercise_questions/data/common';
-import { chineseData, learnTypeList } from '@/views/exercise_questions/data/chinese';
+import {
+  chineseData,
+  learnTypeList,
+  audioGenerationMethodList,
+  getOption,
+} from '@/views/exercise_questions/data/chinese';
 
 export default {
   name: 'ChineseQuestion',
+  components: {
+    UploadAudio,
+    SoundRecord,
+  },
   mixins: [QuestionMixin],
   data() {
     return {
       learnTypeList,
+      audioGenerationMethodList,
       changeOptionType,
       data: JSON.parse(JSON.stringify(chineseData)),
     };
   },
-  methods: {},
+  methods: {
+    addOption() {
+      this.data.option_list.push(getOption());
+    },
+    uploads(file_id, index) {
+      this.data.option_list[index].audio_file_id = file_id;
+      this.data.file_id_list.push(file_id);
+    },
+    deleteFiles(file_id, itemIndex) {
+      this.data.option_list[itemIndex].audio_file_id = '';
+      this.data.file_id_list.splice(this.data.file_id_list.indexOf(file_id), 1);
+    },
+    // 删除小题
+    deleteOption(i, file_id) {
+      this.data.option_list.splice(i, 1);
+      this.data.file_id_list.splice(this.data.file_id_list.indexOf(file_id), 1);
+    },
+    // 自动生成音频
+    handleMatically() {},
+    // 清除录音
+    deleteWav(index) {
+      this.data.option_list[index].audio_wav = '';
+      this.data.option_list[index].audio_wav_time = 0;
+    },
+    // 更新录音内容和时间
+    updateWav(index, wav, time) {
+      this.data.option_list[index].audio_wav = wav;
+      this.data.option_list[index].audio_wav_time = time;
+    },
+  },
 };
 </script>
 

src/views/exercise_questions/data/chinese.js

@@ -1,25 +1,50 @@
 import { optionTypeList, stemTypeList, scoreTypeList, questionNumberTypeList } from './common';
+import { getRandomNumber } from '@/utils/index';
 
+export function getOption(content = '') {
+  return {
+    content,
+    mark: getRandomNumber(),
+    audio_file_id: '',
+    pinyin: '',
+    definition: '',
+  };
+}
 // 汉字类型列表
 export const learnTypeList = [
-  { value: 'miao', label: '描红' },
+  { value: 'paint', label: '描红' },
   { value: 'write', label: '书写' },
   { value: 'learn', label: '笔画学习' },
 ];
 
+// 音频生成方式类型
+export const audioGenerationMethodList = [
+  {
+    value: 'upload',
+    label: '上传',
+  },
+  {
+    value: 'auto',
+    label: '自动生成',
+  },
+  {
+    value: 'record',
+    label: '录音',
+  },
+];
 // 选择题数据模板
 export const chineseData = {
   type: 'chinese', // 题型
   stem: '', // 题干
-  option_number_show_mode: optionTypeList[0].value, // 选项类型
   description: '', // 描述
-  content: '', // 题目
-  answer: { answer_list: [], score: 0, score_type: scoreTypeList[0].value }, // 答案
+  answer: { score: 0, score_type: scoreTypeList[0].value }, // 答案
+  option_list: [getOption(), getOption(), getOption()], // 选项
+  file_id_list: [],
   // 题型属性
   property: {
     stem_type: stemTypeList[0].value, // 题干类型
     question_number: 1, // 题号
-    is_enable_description: false, // 描述
+    is_enable_description: 'false', // 描述
     score: 1, // 分值
     score_type: scoreTypeList[0].value, // 分值类型
     learn_type: learnTypeList[0].value,
@@ -27,5 +52,6 @@ export const chineseData = {
   // 其他属性
   other: {
     question_number_type: questionNumberTypeList[0].value, // 题号类型
+    audio_generation_method: audioGenerationMethodList[0].value, // 音频生成方式
   },
 };