|
@@ -1,13 +1,22 @@
|
|
<!-- eslint-disable vue/no-v-html -->
|
|
<!-- eslint-disable vue/no-v-html -->
|
|
<template>
|
|
<template>
|
|
- <div class="repeat-preview">
|
|
|
|
|
|
+ <div class="replace-preview">
|
|
<div class="stem">
|
|
<div class="stem">
|
|
<span class="question-number">{{ data.property.question_number }}.</span>
|
|
<span class="question-number">{{ data.property.question_number }}.</span>
|
|
<span v-html="sanitizeHTML(data.stem)"></span>
|
|
<span v-html="sanitizeHTML(data.stem)"></span>
|
|
</div>
|
|
</div>
|
|
<div v-if="isEnable(data.property.is_enable_description)" class="description">{{ data.description }}</div>
|
|
<div v-if="isEnable(data.property.is_enable_description)" class="description">{{ data.description }}</div>
|
|
<div class="option-list">
|
|
<div class="option-list">
|
|
- <li v-for="(item, i) in answer_list" :key="i" :class="['option-item']"></li>
|
|
|
|
|
|
+ <div v-for="(item, i) in option_list" :key="i" :class="['option-item']">
|
|
|
|
+ <template v-if="item.length > 1">
|
|
|
|
+ <el-select v-model="answer.answer_list[0].select_mark[i]" placeholder="请选择">
|
|
|
|
+ <el-option v-for="items in item" :key="items.content" :label="items.content" :value="items.content">
|
|
|
|
+ </el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </template>
|
|
|
|
+ <span v-else>{{ item[0].content }}</span>
|
|
|
|
+ </div>
|
|
|
|
+ <SoundRecordPreview :wav-blob.sync="answer.answer_list[0].voice_file_id" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
@@ -26,23 +35,45 @@ export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
computeOptionMethods,
|
|
computeOptionMethods,
|
|
- answer_list: [],
|
|
|
|
|
|
+ answer: {
|
|
|
|
+ answer_list: [
|
|
|
|
+ {
|
|
|
|
+ voice_file_id: '',
|
|
|
|
+ select_mark: [],
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ option_list: [],
|
|
|
|
+ },
|
|
};
|
|
};
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
console.log(this.data);
|
|
console.log(this.data);
|
|
this.handleData();
|
|
this.handleData();
|
|
},
|
|
},
|
|
|
|
+ mounted() {},
|
|
methods: {
|
|
methods: {
|
|
// 初始化数据
|
|
// 初始化数据
|
|
handleData() {
|
|
handleData() {
|
|
- this.answer_list = [];
|
|
|
|
|
|
+ this.option_list = [];
|
|
|
|
+ this.answer.answer_list = [
|
|
|
|
+ {
|
|
|
|
+ voice_file_id: '',
|
|
|
|
+ select_mark: [],
|
|
|
|
+ },
|
|
|
|
+ ];
|
|
|
|
+ let option_lists = [[], [], [], []];
|
|
this.data.option_list.forEach((item) => {
|
|
this.data.option_list.forEach((item) => {
|
|
- let obj = {
|
|
|
|
- mark: item.mark,
|
|
|
|
- audio_file_id: '',
|
|
|
|
- };
|
|
|
|
- this.answer_list.push(obj);
|
|
|
|
|
|
+ item.forEach((items, indexs) => {
|
|
|
|
+ if (items.content) {
|
|
|
|
+ option_lists[indexs].push(items);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ option_lists.forEach((option_item) => {
|
|
|
|
+ if (option_item.length > 0) {
|
|
|
|
+ this.option_list.push(option_item);
|
|
|
|
+ this.answer.answer_list[0].select_mark.push('');
|
|
|
|
+ }
|
|
});
|
|
});
|
|
},
|
|
},
|
|
},
|
|
},
|
|
@@ -52,37 +83,20 @@ export default {
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
@use '@/styles/mixin.scss' as *;
|
|
@use '@/styles/mixin.scss' as *;
|
|
|
|
|
|
-.repeat-preview {
|
|
|
|
|
|
+.replace-preview {
|
|
@include preview;
|
|
@include preview;
|
|
|
|
|
|
.option-list {
|
|
.option-list {
|
|
- // display: flex;
|
|
|
|
- // flex-wrap: wrap;
|
|
|
|
- // row-gap: 16px;
|
|
|
|
-
|
|
|
|
- .option-item {
|
|
|
|
- display: flex;
|
|
|
|
- column-gap: 16px;
|
|
|
|
- align-items: center;
|
|
|
|
- width: 90%;
|
|
|
|
- margin-bottom: 16px;
|
|
|
|
-
|
|
|
|
- .option-content {
|
|
|
|
- flex: 1;
|
|
|
|
|
|
+ }
|
|
|
|
|
|
- // max-width: 306px;
|
|
|
|
- padding: 8px 16px;
|
|
|
|
- color: #706f78;
|
|
|
|
- background-color: $content-color;
|
|
|
|
- border-radius: 40px;
|
|
|
|
- }
|
|
|
|
|
|
+ .slider {
|
|
|
|
+ display: flex;
|
|
|
|
+ }
|
|
|
|
|
|
- .sound-box {
|
|
|
|
- padding: 4px;
|
|
|
|
- background: $content-color;
|
|
|
|
- border-radius: 40px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ .slider-item {
|
|
|
|
+ flex: 1;
|
|
|
|
+ height: 100px;
|
|
|
|
+ border: 1px solid #ccc;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|