录音

src/views/book/courseware/create/components/question/record_input/RecordInput.vue

@@ -0,0 +1,51 @@
+<template>
+  <ModuleBase :type="data.type">
+    <template #content>
+      <el-form :model="data" label-width="72px" label-position="left">
+        <el-form-item label="控件规格">
+          <el-radio-group v-model="data.size">
+            <el-radio v-for="{ value, label } in sizeList" :key="value" :label="value">
+              {{ label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="录音评分">
+          <el-radio-group v-model="data.is_enable_score">
+            <el-radio v-for="{ value, label } in switchOption" :key="value" :label="value">
+              {{ label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="输入">
+          <el-radio-group v-model="data.is_enable_input">
+            <el-radio v-for="{ value, label } in switchOption" :key="value" :label="value">
+              {{ label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+    </template>
+  </ModuleBase>
+</template>
+
+<script>
+import ModuleMixin from '../../common/ModuleMixin';
+
+import { getFillData, sizeList, switchOption } from '@/views/book/courseware/data/recordInput';
+
+export default {
+  name: 'RecordInputPage',
+  components: {},
+  mixins: [ModuleMixin],
+  data() {
+    return {
+      data: getFillData(),
+      sizeList,
+      switchOption,
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/book/courseware/create/components/question/record_input/RecordInputSetting.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <el-form :model="property" label-width="72px" label-position="left">
+      <SerailNumber :property="property" />
+    </el-form>
+  </div>
+</template>
+
+<script>
+import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
+
+import {
+  getFillProperty,
+  arrangeTypeList,
+  audioPositionList,
+  audioGenerationMethodList,
+  fillFontList,
+  switchOption,
+} from '@/views/book/courseware/data/recordInput';
+
+export default {
+  name: 'RecordInputSetting',
+  mixins: [SettingMixin],
+  data() {
+    return {
+      property: getFillProperty(),
+      arrangeTypeList,
+      audioPositionList,
+      audioGenerationMethodList,
+      fillFontList,
+      switchOption,
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/mixin.scss' as *;
+
+.el-form {
+  @include setting-base;
+}
+</style>

src/views/book/courseware/data/bookType.js

@@ -24,6 +24,8 @@ import VoiceMatrix from '../create/components/question/voice_matrix/VoiceMatrix.
 import VoiceMatrixSetting from '../create/components/question/voice_matrix/VoiceMatrixSetting.vue';
 import FillPage from '../create/components/question/fill/Fill.vue';
 import FillSetting from '../create/components/question/fill/FillSetting.vue';
+import RecordInput from '../create/components/question/record_input/RecordInput.vue';
+import RecordInputSetting from '../create/components/question/record_input/RecordInputSetting.vue';
 
 import AudioPreview from '@/views/book/courseware/preview/components/audio/AudioPreview.vue';
 import DividerPreview from '@/views/book/courseware/preview/components/divider/DividerPreview.vue';
@@ -38,6 +40,7 @@ import MatchingPreview from '@/views/book/courseware/preview/components/matching
 import SortPreview from '@/views/book/courseware/preview/components/sort/SortPreview.vue';
 import VoiceMatrixPreview from '@/views/book/courseware/preview/components/voice_matrix/VoiceMatrixPreview.vue';
 import FillPreview from '@/views/book/courseware/preview/components/fill/FillPreview.vue';
+import RecordInputPreview from '../preview/components/record_input/RecordInputPreview.vue';
 
 export const bookTypeOption = [
   {
@@ -155,6 +158,14 @@ export const bookTypeOption = [
         set: FillSetting,
         preview: FillPreview,
       },
+      {
+        value: 'record_input',
+        label: '录音组件',
+        icon: '',
+        component: RecordInput,
+        set: RecordInputSetting,
+        preview: RecordInputPreview,
+      },
     ],
   },
 ];

src/views/book/courseware/data/recordInput.js

@@ -0,0 +1,43 @@
+import {
+  displayList,
+  serialNumberTypeList,
+  serialNumberPositionList,
+  switchOption,
+} from '@/views/book/courseware/data/common';
+
+export {  switchOption };
+
+
+// 录音控件规格
+export const sizeList = [
+  { value: 'promax', label: '大' },
+  { value: 'pro', label: '中' },
+  { value: 'normal', label: '小' },
+  { value: 'mini', label: '迷你' },
+]
+
+export function getFillProperty() {
+  return {
+    serial_number: 1,
+    sn_type: serialNumberTypeList[0].value,
+    sn_position: serialNumberPositionList[0].value,
+    sn_display_mode: displayList[0].value,
+  };
+}
+
+export function getFillData() {
+  return {
+    type: 'record_input',
+    title: '录音组件',
+    property: getFillProperty(),
+    size: 'promax',
+    is_enable_score: switchOption[0].value,
+    is_enable_input: switchOption[0].value,
+    answer: {
+      answer_list: {
+        answerRecordList: [],
+        input:''
+      },
+    },
+  };
+}

src/views/book/courseware/preview/components/record_input/RecordInputPreview.vue

@@ -0,0 +1,67 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <div class="select-preview" :style="getAreaStyle()">
+    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
+
+    <div class="main">
+      <el-input
+        :class="['textarea']"
+        type="textarea"
+        v-model="answer.answer_list.input"
+        @blur="answer.answer_list.input = answer.answer_list.input.trim()"
+        placeholder=""
+        maxlength="1000"
+        :readonly="false"
+        v-if="isEnable(data.is_enable_input)"
+        :rows="5"
+      ></el-input>
+      <SoundRecord ref="record" :type="data.size" class="record-box" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { getFillData } from '@/views/book/courseware/data/fill';
+
+import PreviewMixin from '../common/PreviewMixin';
+import SoundRecord from '../../common/SoundRecord.vue';
+
+export default {
+  name: 'RecordInputPreview',
+  components: {
+    SoundRecord,
+  },
+  mixins: [PreviewMixin],
+  data() {
+    return {
+      data: getFillData(),
+    };
+  },
+  computed: {},
+  created() {
+    this.answer.answer_list = {
+      answerRecordList: [],
+      input: '',
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/mixin.scss' as *;
+
+.select-preview {
+  @include preview-base;
+
+  .record-box {
+    width: max-content;
+    padding: 6px 12px;
+    background-color: $fill-color;
+
+    :deep .record-time {
+      width: 100px;
+    }
+  }
+}
+</style>