|
|
@@ -10,204 +10,211 @@
|
|
|
>{{ label }}</a
|
|
|
>
|
|
|
</div> -->
|
|
|
- <div class="table-rich-toolbar">
|
|
|
- <el-select
|
|
|
- v-model="data.styles.fontFamily"
|
|
|
- placeholder="请选择"
|
|
|
- style="width: 130px"
|
|
|
- @change="BatchSetFormat('fontFamily', data.styles.fontFamily)"
|
|
|
- >
|
|
|
- <el-option v-for="{ value, label } in fontFamilyList" :key="value" :label="label" :value="value" />
|
|
|
- </el-select>
|
|
|
- <el-select
|
|
|
- v-model="data.styles.fontSize"
|
|
|
- placeholder="请选择"
|
|
|
- style="width: 130px"
|
|
|
- @change="BatchSetFormat('fontSize', data.styles.fontSize)"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="(value, index) in 16"
|
|
|
- :key="index"
|
|
|
- :label="6 + value * 2 + 'pt'"
|
|
|
- :value="6 + value * 2 + 'pt'"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- <el-form :model="property" inline>
|
|
|
- <el-form-item label="文字颜色">
|
|
|
- <el-color-picker v-model="data.styles.fontColor" @change="BatchSetFormat('color', data.styles.fontColor)" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="背景色">
|
|
|
- <el-color-picker v-model="data.styles.bgColor" />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <span
|
|
|
- :class="[data.styles.isUnderline ? 'active' : '']"
|
|
|
- @click="
|
|
|
- data.styles.isUnderline = !data.styles.isUnderline;
|
|
|
- BatchSetFormat('underline');
|
|
|
- "
|
|
|
- >
|
|
|
- <SvgIcon icon-class="underline" size="20" />
|
|
|
- </span>
|
|
|
- <span
|
|
|
- :class="[data.styles.isBold ? 'active' : '']"
|
|
|
- @click="
|
|
|
- data.styles.isBold = !data.styles.isBold;
|
|
|
- BatchSetFormat('bold');
|
|
|
- "
|
|
|
- >
|
|
|
- <SvgIcon icon-class="font-bold" size="20" />
|
|
|
- </span>
|
|
|
- <span
|
|
|
- :class="[data.styles.isItalic ? 'active' : '']"
|
|
|
- @click="
|
|
|
- data.styles.isItalic = !data.styles.isItalic;
|
|
|
- BatchSetFormat('italic');
|
|
|
- "
|
|
|
- >
|
|
|
- <SvgIcon icon-class="font-italic" size="20" />
|
|
|
- </span>
|
|
|
- <span
|
|
|
- :class="[data.styles.isStrikethrough ? 'active' : '']"
|
|
|
- @click="
|
|
|
- data.styles.isStrikethrough = !data.styles.isStrikethrough;
|
|
|
- BatchSetFormat('strikethrough');
|
|
|
- "
|
|
|
- >
|
|
|
- <SvgIcon icon-class="strikethrough" size="20" />
|
|
|
- </span>
|
|
|
- <span
|
|
|
- :class="[data.styles.textAlign === 'LEFT' ? 'active' : '']"
|
|
|
- @click="
|
|
|
- data.styles.textAlign = 'LEFT';
|
|
|
- BatchSetFormat('align', 'LEFT');
|
|
|
- "
|
|
|
- >
|
|
|
- <SvgIcon icon-class="align-left" size="20" />
|
|
|
- </span>
|
|
|
- <span
|
|
|
- :class="[data.styles.textAlign === 'MIDDLE' ? 'active' : '']"
|
|
|
- @click="
|
|
|
- data.styles.textAlign = 'MIDDLE';
|
|
|
- BatchSetFormat('align', 'MIDDLE');
|
|
|
- "
|
|
|
- >
|
|
|
- <SvgIcon icon-class="align-center" size="20" />
|
|
|
- </span>
|
|
|
- <span
|
|
|
- :class="[data.styles.textAlign === 'RIGHT' ? 'active' : '']"
|
|
|
- @click="
|
|
|
- data.styles.textAlign = 'RIGHT';
|
|
|
- BatchSetFormat('align', 'RIGHT');
|
|
|
- "
|
|
|
- >
|
|
|
- <SvgIcon icon-class="align-right" size="20" />
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="option-list">
|
|
|
- <div v-for="(item, i) in data.option_list" :key="i" class="table-node">
|
|
|
- <el-color-picker v-model="data.rows_bg_list[i]" />
|
|
|
- <div v-for="(li, j) in item" :key="li.mark" class="table-item">
|
|
|
- <!-- eslint-disable max-len -->
|
|
|
- <RichText
|
|
|
- v-if="property.isGetContent"
|
|
|
- ref="richText"
|
|
|
- v-model="li.content"
|
|
|
- :font-size="data?.unified_attrib?.font_size"
|
|
|
- :font-family="data?.unified_attrib?.font"
|
|
|
- :font-color="data?.unified_attrib?.text_color"
|
|
|
- :inline="true"
|
|
|
- :item-index="i + '#' + j"
|
|
|
- toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright image media link"
|
|
|
- @handleRichTextBlur="handleBlurCon"
|
|
|
+ <div v-loading="loading">
|
|
|
+ <div class="table-rich-toolbar">
|
|
|
+ <el-select
|
|
|
+ v-model="data.styles.fontFamily"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 130px"
|
|
|
+ @change="BatchSetFormat('fontFamily', data.styles.fontFamily)"
|
|
|
+ >
|
|
|
+ <el-option v-for="{ value, label } in fontFamilyList" :key="value" :label="label" :value="value" />
|
|
|
+ </el-select>
|
|
|
+ <el-select
|
|
|
+ v-model="data.styles.fontSize"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 130px"
|
|
|
+ @change="BatchSetFormat('fontSize', data.styles.fontSize)"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(value, index) in 16"
|
|
|
+ :key="index"
|
|
|
+ :label="6 + value * 2 + 'pt'"
|
|
|
+ :value="6 + value * 2 + 'pt'"
|
|
|
/>
|
|
|
- <el-input v-else v-model="li.content" @blur="handleBlurCon" />
|
|
|
- <el-button size="mini" @click="editCell(li.cell)">设置</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="table-node">
|
|
|
- <div style="flex-shrink: 0; width: 32px"></div>
|
|
|
- <div v-for="(value, index) in data.col_width" :key="index" class="table-item table-items">
|
|
|
- <el-color-picker v-model="data.cols_bg_list[index]" />
|
|
|
- <el-input v-model="value.value">
|
|
|
- <template slot="prepend">列宽</template><template slot="append">%</template></el-input
|
|
|
- >
|
|
|
- </div>
|
|
|
+ </el-select>
|
|
|
+ <el-form :model="property" inline>
|
|
|
+ <el-form-item label="文字颜色">
|
|
|
+ <el-color-picker
|
|
|
+ v-model="data.styles.fontColor"
|
|
|
+ @change="BatchSetFormat('color', data.styles.fontColor)"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="背景色">
|
|
|
+ <el-color-picker v-model="data.styles.bgColor" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <span
|
|
|
+ :class="[data.styles.isUnderline ? 'active' : '']"
|
|
|
+ @click="
|
|
|
+ data.styles.isUnderline = !data.styles.isUnderline;
|
|
|
+ BatchSetFormat('underline');
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <SvgIcon icon-class="underline" size="20" />
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ :class="[data.styles.isBold ? 'active' : '']"
|
|
|
+ @click="
|
|
|
+ data.styles.isBold = !data.styles.isBold;
|
|
|
+ BatchSetFormat('bold');
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <SvgIcon icon-class="font-bold" size="20" />
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ :class="[data.styles.isItalic ? 'active' : '']"
|
|
|
+ @click="
|
|
|
+ data.styles.isItalic = !data.styles.isItalic;
|
|
|
+ BatchSetFormat('italic');
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <SvgIcon icon-class="font-italic" size="20" />
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ :class="[data.styles.isStrikethrough ? 'active' : '']"
|
|
|
+ @click="
|
|
|
+ data.styles.isStrikethrough = !data.styles.isStrikethrough;
|
|
|
+ BatchSetFormat('strikethrough');
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <SvgIcon icon-class="strikethrough" size="20" />
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ :class="[data.styles.textAlign === 'LEFT' ? 'active' : '']"
|
|
|
+ @click="
|
|
|
+ data.styles.textAlign = 'LEFT';
|
|
|
+ BatchSetFormat('align', 'LEFT');
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <SvgIcon icon-class="align-left" size="20" />
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ :class="[data.styles.textAlign === 'MIDDLE' ? 'active' : '']"
|
|
|
+ @click="
|
|
|
+ data.styles.textAlign = 'MIDDLE';
|
|
|
+ BatchSetFormat('align', 'MIDDLE');
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <SvgIcon icon-class="align-center" size="20" />
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ :class="[data.styles.textAlign === 'RIGHT' ? 'active' : '']"
|
|
|
+ @click="
|
|
|
+ data.styles.textAlign = 'RIGHT';
|
|
|
+ BatchSetFormat('align', 'RIGHT');
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <SvgIcon icon-class="align-right" size="20" />
|
|
|
+ </span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <el-input
|
|
|
- v-if="data.property.fill_type === fillTypeList[1].value"
|
|
|
- v-model="data.vocabulary"
|
|
|
- type="textarea"
|
|
|
- :autosize="{ minRows: 2, maxRows: 4 }"
|
|
|
- resize="none"
|
|
|
- placeholder="请输入词汇，用于选词填空"
|
|
|
- />
|
|
|
- <p class="tips">在需要作答的单元格内输入三个以上下划线“___”</p>
|
|
|
- <el-button @click="identifyText()">识别</el-button>
|
|
|
- <el-button @click="handleMultilingual">多语言</el-button>
|
|
|
- <template v-if="isEnable(data.has_identify)">
|
|
|
- <p class="tips">在需要作答的单元格内录入标准答案，多个填空答案用换行录入，同一个填空有多个答案用斜线“/”隔开</p>
|
|
|
<div class="option-list">
|
|
|
- <div v-for="(item, i) in data.answer_lists" :key="i" class="table-node">
|
|
|
- <div v-for="(li, j) in item" :key="i + 'col' + j" class="table-item">
|
|
|
- <el-input v-model="li.answer" type="textarea" :readonly="!data.option_list[i][j].hasInput" />
|
|
|
- <span
|
|
|
- v-if="data.option_list[i][j].cell.isCross"
|
|
|
- style="display: flex; align-items: center; font-size: 14px"
|
|
|
- >勾叉答案<i
|
|
|
- :class="[
|
|
|
- { 'el-icon-check': li.crossAnswer === statusList[1] },
|
|
|
- { 'el-icon-close': li.crossAnswer === statusList[2] },
|
|
|
- ]"
|
|
|
- style="display: block; width: 14px; height: 14px; border: 1px solid #000"
|
|
|
- @click="toggle(li)"
|
|
|
- ></i
|
|
|
- ></span>
|
|
|
+ <div v-for="(item, i) in data.option_list" :key="i" class="table-node">
|
|
|
+ <el-color-picker v-model="data.rows_bg_list[i]" />
|
|
|
+ <div v-for="(li, j) in item" :key="li.mark" class="table-item">
|
|
|
+ <!-- eslint-disable max-len -->
|
|
|
+ <RichText
|
|
|
+ v-if="property.isGetContent"
|
|
|
+ ref="richText"
|
|
|
+ v-model="li.content"
|
|
|
+ :font-size="data?.unified_attrib?.font_size"
|
|
|
+ :font-family="data?.unified_attrib?.font"
|
|
|
+ :font-color="data?.unified_attrib?.text_color"
|
|
|
+ :inline="true"
|
|
|
+ :item-index="i + '#' + j"
|
|
|
+ toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright image media link"
|
|
|
+ @handleRichTextBlur="handleBlurCon"
|
|
|
+ />
|
|
|
+ <el-input v-else v-model="li.content" @blur="handleBlurCon" />
|
|
|
+ <el-button size="mini" @click="editCell(li.cell)">设置</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="table-node">
|
|
|
+ <div style="flex-shrink: 0; width: 32px"></div>
|
|
|
+ <div v-for="(value, index) in data.col_width" :key="index" class="table-item table-items">
|
|
|
+ <el-color-picker v-model="data.cols_bg_list[index]" />
|
|
|
+ <el-input v-model="value.value">
|
|
|
+ <template slot="prepend">列宽</template><template slot="append">%</template></el-input
|
|
|
+ >
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
- <AnswerAnalysisList
|
|
|
- v-if="data.answer_list?.length > 0 || data.analysis_list?.length > 0"
|
|
|
- :answer-list="data.answer_list"
|
|
|
- :analysis-list="data.analysis_list"
|
|
|
- :unified-attrib="data.unified_attrib"
|
|
|
- @updateAnswerAnalysisFileList="updateAnswerAnalysisFileList"
|
|
|
- @deleteAnswerAnalysis="deleteAnswerAnalysis"
|
|
|
- />
|
|
|
- <MultilingualFill
|
|
|
- :visible.sync="multilingualVisible"
|
|
|
- :text="multilingualText"
|
|
|
- :translations="data.multilingual"
|
|
|
- @SubmitTranslation="handleMultilingualTranslation"
|
|
|
- />
|
|
|
- <el-divider v-if="isEnable(data.property.view_pinyin)" content-position="left">
|
|
|
- 拼音效果
|
|
|
- <el-button
|
|
|
- v-show="isEnable(data.property.view_pinyin)"
|
|
|
- type="text"
|
|
|
- icon="el-icon-refresh"
|
|
|
- title="刷新"
|
|
|
- class="refresh-pinyin-btn"
|
|
|
- @click.native="identifyText()"
|
|
|
- /></el-divider>
|
|
|
- <template v-if="isEnable(data.property.view_pinyin)">
|
|
|
- <template v-for="(item, index) in data.option_list">
|
|
|
- <PinyinText
|
|
|
- v-for="(items, indexs) in item"
|
|
|
- :id="'table_pinyin_text_' + index + '_' + indexs"
|
|
|
- :key="index + '_' + indexs"
|
|
|
- ref="PinyinText"
|
|
|
- :rich-text-list="items.rich_text_list"
|
|
|
- :pinyin-position="data.property.pinyin_position"
|
|
|
- :pinyin-size="data?.unified_attrib?.pinyin_size"
|
|
|
- :font-size="data?.unified_attrib?.font_size"
|
|
|
- :font-family="data?.unified_attrib?.font"
|
|
|
- @fillCorrectPinyin="fillCorrectPinyin"
|
|
|
- />
|
|
|
+ <el-input
|
|
|
+ v-if="data.property.fill_type === fillTypeList[1].value"
|
|
|
+ v-model="data.vocabulary"
|
|
|
+ type="textarea"
|
|
|
+ :autosize="{ minRows: 2, maxRows: 4 }"
|
|
|
+ resize="none"
|
|
|
+ placeholder="请输入词汇，用于选词填空"
|
|
|
+ />
|
|
|
+ <p class="tips">在需要作答的单元格内输入三个以上下划线“___”</p>
|
|
|
+ <el-button @click="identifyText()">识别</el-button>
|
|
|
+ <el-button @click="handleMultilingual">多语言</el-button>
|
|
|
+ <template v-if="isEnable(data.has_identify)">
|
|
|
+ <p class="tips">
|
|
|
+ 在需要作答的单元格内录入标准答案，多个填空答案用换行录入，同一个填空有多个答案用斜线“/”隔开
|
|
|
+ </p>
|
|
|
+ <div class="option-list">
|
|
|
+ <div v-for="(item, i) in data.answer_lists" :key="i" class="table-node">
|
|
|
+ <div v-for="(li, j) in item" :key="i + 'col' + j" class="table-item">
|
|
|
+ <el-input v-model="li.answer" type="textarea" :readonly="!data.option_list[i][j].hasInput" />
|
|
|
+ <span
|
|
|
+ v-if="data.option_list[i][j].cell.isCross"
|
|
|
+ style="display: flex; align-items: center; font-size: 14px"
|
|
|
+ >勾叉答案<i
|
|
|
+ :class="[
|
|
|
+ { 'el-icon-check': li.crossAnswer === statusList[1] },
|
|
|
+ { 'el-icon-close': li.crossAnswer === statusList[2] },
|
|
|
+ ]"
|
|
|
+ style="display: block; width: 14px; height: 14px; border: 1px solid #000"
|
|
|
+ @click="toggle(li)"
|
|
|
+ ></i
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
- </template>
|
|
|
+ <AnswerAnalysisList
|
|
|
+ v-if="data.answer_list?.length > 0 || data.analysis_list?.length > 0"
|
|
|
+ :answer-list="data.answer_list"
|
|
|
+ :analysis-list="data.analysis_list"
|
|
|
+ :unified-attrib="data.unified_attrib"
|
|
|
+ @updateAnswerAnalysisFileList="updateAnswerAnalysisFileList"
|
|
|
+ @deleteAnswerAnalysis="deleteAnswerAnalysis"
|
|
|
+ />
|
|
|
+ <MultilingualFill
|
|
|
+ :visible.sync="multilingualVisible"
|
|
|
+ :text="multilingualText"
|
|
|
+ :translations="data.multilingual"
|
|
|
+ @SubmitTranslation="handleMultilingualTranslation"
|
|
|
+ />
|
|
|
+ <el-divider v-if="isEnable(data.property.view_pinyin)" content-position="left">
|
|
|
+ 拼音效果
|
|
|
+ <el-button
|
|
|
+ v-show="isEnable(data.property.view_pinyin)"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-refresh"
|
|
|
+ title="刷新"
|
|
|
+ class="refresh-pinyin-btn"
|
|
|
+ @click.native="identifyText()"
|
|
|
+ /></el-divider>
|
|
|
+ <template v-if="isEnable(data.property.view_pinyin)">
|
|
|
+ <template v-for="(item, index) in data.option_list">
|
|
|
+ <PinyinText
|
|
|
+ v-for="(items, indexs) in item"
|
|
|
+ :id="'table_pinyin_text_' + index + '_' + indexs"
|
|
|
+ :key="index + '_' + indexs"
|
|
|
+ ref="PinyinText"
|
|
|
+ :rich-text-list="items.rich_text_list"
|
|
|
+ :pinyin-position="data.property.pinyin_position"
|
|
|
+ :pinyin-size="data?.unified_attrib?.pinyin_size"
|
|
|
+ :font-size="data?.unified_attrib?.font_size"
|
|
|
+ :font-family="data?.unified_attrib?.font"
|
|
|
+ @fillCorrectPinyin="fillCorrectPinyin"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
<el-dialog
|
|
|
v-if="editCellFlag"
|
|
|
title="设置单元格"
|
|
|
@@ -276,6 +283,7 @@ export default {
|
|
|
editCellFlag: false,
|
|
|
statusList: ['normal', 'tick', 'cross'],
|
|
|
editContentIndex: '', // 编辑内容的单元格索引
|
|
|
+ loading: false,
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -470,14 +478,14 @@ export default {
|
|
|
} else {
|
|
|
this.data.option_list.forEach((item, index) => {
|
|
|
item.forEach((items, indexs) => {
|
|
|
- this.createParsedTextInfoPinyin(items.content, `${index}#${indexs}`);
|
|
|
+ this.createParsedTextInfoPinyin(items.content, `${index}#${indexs}`, true);
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
// 获取拼音解析文本
|
|
|
- createParsedTextInfoPinyin(text, editIndex) {
|
|
|
+ createParsedTextInfoPinyin(text, editIndex, flag) {
|
|
|
if (text === '') {
|
|
|
this.data.paragraph_list_parameter.pinyin_proofread_word_list = [];
|
|
|
return;
|
|
|
@@ -487,7 +495,11 @@ export default {
|
|
|
this.data.paragraph_list_parameter.is_first_sentence_first_hz_pinyin_first_char_upper_case =
|
|
|
this.data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case;
|
|
|
this.data.paragraph_list_parameter.is_rich_text = 'true';
|
|
|
+ if (flag) this.loading = true;
|
|
|
PinyinBuild_OldFormat(this.data.paragraph_list_parameter).then((res) => {
|
|
|
+ if (flag) {
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
if (res.parsed_text) {
|
|
|
const mergedData = res.parsed_text.paragraph_list.map((outerArr, i) =>
|
|
|
outerArr.map((innerArr, j) =>
|
|
|
@@ -568,7 +580,6 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
- console.log(this.data);
|
|
|
},
|
|
|
// 填充校对后的拼音
|
|
|
fillCorrectPinyin({ selectContent: { text, pinyin, activeTextStyle }, i, j, k }) {
|
