|
|
@@ -0,0 +1,414 @@
|
|
|
+<template>
|
|
|
+ <QuestionBase>
|
|
|
+ <template #content>
|
|
|
+ <div class="stem">
|
|
|
+ <el-input
|
|
|
+ v-if="data.property.stem_type === stemTypeList[0].value"
|
|
|
+ v-model="data.stem"
|
|
|
+ rows="3"
|
|
|
+ resize="none"
|
|
|
+ type="textarea"
|
|
|
+ placeholder="输入题干"
|
|
|
+ />
|
|
|
+
|
|
|
+ <RichText v-if="data.property.stem_type === stemTypeList[1].value" v-model="data.stem" placeholder="输入题干" />
|
|
|
+
|
|
|
+ <el-input
|
|
|
+ v-show="isEnable(data.property.is_enable_description)"
|
|
|
+ v-model="data.description"
|
|
|
+ rows="3"
|
|
|
+ resize="none"
|
|
|
+ type="textarea"
|
|
|
+ placeholder="输入描述"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="content">
|
|
|
+ <label class="title-little">字词：</label>
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item, i) in data.option_list" :key="i" class="content-word-card">
|
|
|
+ <div class="item-left" v-if="item.picture_file_id">
|
|
|
+ <el-image
|
|
|
+ style="width: 72px; height: 72px"
|
|
|
+ :src="pic_list[item.picture_file_id]"
|
|
|
+ :preview-src-list="[pic_list[item.picture_file_id]]"
|
|
|
+ fit="contain"
|
|
|
+ />
|
|
|
+ <el-button size="small" class="delete-btn" @click="delectOptions(i, item.picture_file_id)">
|
|
|
+ <i class="el-icon-delete"></i>删除
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <UploadDrag
|
|
|
+ v-else
|
|
|
+ @fileUploadSuccess="fileUploadSuccess"
|
|
|
+ :itemIndex="i"
|
|
|
+ :limit="1"
|
|
|
+ ref="uploadDrag"
|
|
|
+ ></UploadDrag>
|
|
|
+ <div class="word-card-item">
|
|
|
+ <div class="word-card">
|
|
|
+ <el-input v-model="item.content" :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"
|
|
|
+ :show-upload="!item.audio_file_id"
|
|
|
+ @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" v-if="item.audio_file_id" />
|
|
|
+ <span class="auto-btn" @click="handleMatically(item)">自动生成</span>
|
|
|
+ </div>
|
|
|
+ <SoundRecord v-else :wav-blob.sync="item.audio_file_id" />
|
|
|
+ <span class="rate-box"><el-rate v-model="item.rate"></el-rate></span>
|
|
|
+ <el-input v-model="item.definition" placeholder="输入释义" type="textarea" :rows="1" />
|
|
|
+ </div>
|
|
|
+ <SvgIcon
|
|
|
+ icon-class="delete"
|
|
|
+ class="delete pointer"
|
|
|
+ @click="deleteOption(i, item.audio_file_id, item.picture_file_id)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="example-sentence-box">
|
|
|
+ <div class="example-sentence" v-for="(items, indexs) in item.example_sentence" :key="indexs">
|
|
|
+ <span class="question-number" @dblclick="changeOptionType(data)" title="双击切换序号类型">
|
|
|
+ {{ computedQuestionNumber(indexs, data.option_number_show_mode) }}
|
|
|
+ </span>
|
|
|
+ <el-input v-model="item.example_sentence[indexs]" placeholder="输入例句" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="footer">
|
|
|
+ <span class="add-option" @click="addOption">
|
|
|
+ <SvgIcon icon-class="add-circle" size="14" /> <span>增加字词</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #property>
|
|
|
+ <el-form :model="data.property">
|
|
|
+ <el-form-item label="题干">
|
|
|
+ <el-radio
|
|
|
+ v-for="{ value, label } in stemTypeList"
|
|
|
+ :key="value"
|
|
|
+ v-model="data.property.stem_type"
|
|
|
+ :label="value"
|
|
|
+ >
|
|
|
+ {{ label }}
|
|
|
+ </el-radio>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="题号">
|
|
|
+ <el-input v-model="data.property.question_number" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label-width="45px">
|
|
|
+ <el-radio
|
|
|
+ v-for="{ value, label } in questionNumberTypeList"
|
|
|
+ :key="value"
|
|
|
+ v-model="data.other.question_number_type"
|
|
|
+ :label="value"
|
|
|
+ >
|
|
|
+ {{ label }}
|
|
|
+ </el-radio>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="描述">
|
|
|
+ <el-radio
|
|
|
+ v-for="{ value, label } in switchOption"
|
|
|
+ :key="value"
|
|
|
+ v-model="data.property.is_enable_description"
|
|
|
+ :label="value"
|
|
|
+ >
|
|
|
+ {{ label }}
|
|
|
+ </el-radio>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="分值">
|
|
|
+ <el-radio
|
|
|
+ v-for="{ value, label } in scoreTypeList"
|
|
|
+ :key="value"
|
|
|
+ v-model="data.property.score_type"
|
|
|
+ :label="value"
|
|
|
+ >
|
|
|
+ {{ label }}
|
|
|
+ </el-radio>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label-width="45px">
|
|
|
+ <el-input-number
|
|
|
+ v-model="data.property.score"
|
|
|
+ :min="0"
|
|
|
+ :step="data.property.score_type === scoreTypeList[0].value ? 1 : 0.1"
|
|
|
+ />
|
|
|
+ </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>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import QuestionMixin from '../common/QuestionMixin.js';
|
|
|
+import UploadAudio from '../common/UploadAudio.vue';
|
|
|
+import SoundRecord from '../common/SoundRecord.vue';
|
|
|
+import { GetStaticResources } from '@/api/app';
|
|
|
+import { GetFileStoreInfo } from '@/api/app';
|
|
|
+import { changeOptionType, handleInputNumber } from '@/views/exercise_questions/data/common';
|
|
|
+import UploadDrag from '../common/UploadDrag.vue';
|
|
|
+
|
|
|
+import {
|
|
|
+ wordCardData,
|
|
|
+ learnTypeList,
|
|
|
+ audioGenerationMethodList,
|
|
|
+ getOption,
|
|
|
+} from '@/views/exercise_questions/data/wordCard';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'WordCardQuestion',
|
|
|
+ components: {
|
|
|
+ UploadAudio,
|
|
|
+ SoundRecord,
|
|
|
+ UploadDrag,
|
|
|
+ },
|
|
|
+ mixins: [QuestionMixin],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ learnTypeList,
|
|
|
+ audioGenerationMethodList,
|
|
|
+ data: JSON.parse(JSON.stringify(wordCardData)),
|
|
|
+ changeOptionType,
|
|
|
+ handleInputNumber,
|
|
|
+ pic_list: {},
|
|
|
+ is_first: true,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ 'data.file_id_list': {
|
|
|
+ handler() {
|
|
|
+ if (this.is_first) {
|
|
|
+ this.handleData();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 初始化数据
|
|
|
+ handleData() {
|
|
|
+ this.data.file_id_list.forEach((item) => {
|
|
|
+ GetFileStoreInfo({ file_id: item }).then(({ file_id, file_url }) => {
|
|
|
+ this.$set(this.pic_list, file_id, file_url);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.is_first = false;
|
|
|
+ },
|
|
|
+ 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, pic_id) {
|
|
|
+ this.$confirm('是否删除？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ }).then(() => {
|
|
|
+ this.data.option_list.splice(i, 1);
|
|
|
+ this.data.file_id_list.splice(this.data.file_id_list.indexOf(file_id), 1);
|
|
|
+ this.data.file_id_list.splice(this.data.file_id_list.indexOf(pic_id), 1);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 删除
|
|
|
+ delectOptions(i, id) {
|
|
|
+ this.$confirm('是否删除？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ delete this.pic_list[id];
|
|
|
+ this.data.file_id_list.splice(this.data.file_id_list.indexOf(id), 1);
|
|
|
+ this.data.option_list[i].picture_file_id = '';
|
|
|
+ this.$refs.uploadDrag.clearFiles();
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ },
|
|
|
+ // 自动生成音频
|
|
|
+ handleMatically(item) {
|
|
|
+ if (item.pinyin.trim()) {
|
|
|
+ let MethodName = 'tool-PinyinToVoiceFile';
|
|
|
+ let data = {
|
|
|
+ pinyin: item.pinyin.trim().split(' ').join(','),
|
|
|
+ };
|
|
|
+ GetStaticResources(MethodName, data).then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.data.file_id_list.splice(this.data.file_id_list.indexOf(item.file_id), 1);
|
|
|
+ item.audio_file_id = res.file_id;
|
|
|
+ this.data.file_id_list.push(res.file_id);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fileUploadSuccess(file_id, file_url, index) {
|
|
|
+ this.data.file_id_list.push(file_id);
|
|
|
+ this.data.option_list[index].picture_file_id = file_id;
|
|
|
+ this.$set(this.pic_list, file_id, file_url);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ :deep .el-upload {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ &-dragger {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 90px;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ :first-child {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ :last-child {
|
|
|
+ color: $text-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-word-card {
|
|
|
+ .item-left {
|
|
|
+ display: flex;
|
|
|
+ column-gap: 8px;
|
|
|
+ align-items: flex-end;
|
|
|
+ }
|
|
|
+
|
|
|
+ .word-card-item {
|
|
|
+ display: flex;
|
|
|
+ column-gap: 8px;
|
|
|
+ margin: 16px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .word-card {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 8px 4px;
|
|
|
+
|
|
|
+ .el-input {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rate-box {
|
|
|
+ width: 128px;
|
|
|
+ height: 32px;
|
|
|
+ padding: 6px 0;
|
|
|
+ text-align: center;
|
|
|
+ background: #f2f3f5;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .example-sentence-box {
|
|
|
+ .example-sentence {
|
|
|
+ display: flex;
|
|
|
+ column-gap: 8px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+
|
|
|
+ .question-number {
|
|
|
+ min-width: 40px;
|
|
|
+ height: 32px;
|
|
|
+ padding: 4px 0;
|
|
|
+ color: $text-color;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: $fill-color;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-wrapper {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep .file-name {
|
|
|
+ width: 205px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .auto-matically {
|
|
|
+ display: flex;
|
|
|
+ flex-shrink: 0;
|
|
|
+ align-items: center;
|
|
|
+ width: 233px;
|
|
|
+ padding: 5px 12px;
|
|
|
+ background-color: $fill-color;
|
|
|
+ border-radius: 2px;
|
|
|
+
|
|
|
+ .audio-wrapper {
|
|
|
+ margin-right: 12px;
|
|
|
+
|
|
|
+ :deep .audio-play {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ color: #000;
|
|
|
+ background-color: initial;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep .audio-play.not-url {
|
|
|
+ color: #a1a1a1;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep .voice-play {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .auto-btn {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #1d2129;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .delete {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
natasha