|
|
@@ -1,6 +1,30 @@
|
|
|
<template>
|
|
|
<ModuleBase :type="data.type">
|
|
|
<template #content>
|
|
|
+ <div class="fun-type">
|
|
|
+ <a
|
|
|
+ v-for="{ value, label } in modelList"
|
|
|
+ :key="value"
|
|
|
+ :class="[data.property.model === value ? 'active' : '']"
|
|
|
+ @click="data.property.model = value"
|
|
|
+ >{{ label }}</a
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="content-box" v-for="(item, index) in data.option_list" :key="index">
|
|
|
+ <div class="content-item">
|
|
|
+ <el-input
|
|
|
+ v-model="item.content"
|
|
|
+ maxlength="10"
|
|
|
+ show-word-limit
|
|
|
+ placeholder="输入汉字,@:代表图片"
|
|
|
+ @blur="handleMindMap"
|
|
|
+ ></el-input>
|
|
|
+ <el-button @click="identify(item)">识别</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="content-items" v-for="(items, indexs) in item.content_list" :key="indexs">
|
|
|
+ <template v-if="items"> <label>内容:</label>{{ items.con }} </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<el-button icon="el-icon-plus" style="margin: 24px 0" @click="addElement">增加一个</el-button>
|
|
|
</template>
|
|
|
</ModuleBase>
|
|
|
@@ -9,7 +33,13 @@
|
|
|
<script>
|
|
|
import ModuleMixin from '../../common/ModuleMixin';
|
|
|
|
|
|
-import { getNewWordTemplateData } from '@/views/book/courseware/data/newWordTemplate';
|
|
|
+import {
|
|
|
+ getNewWordTemplateData,
|
|
|
+ modelList,
|
|
|
+ answer_list,
|
|
|
+ getOption,
|
|
|
+} from '@/views/book/courseware/data/newWordTemplate';
|
|
|
+import { GetStaticResources } from '@/api/app';
|
|
|
|
|
|
export default {
|
|
|
name: 'NewWordTemplatePage',
|
|
|
@@ -18,44 +48,104 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
data: getNewWordTemplateData(),
|
|
|
+ modelList,
|
|
|
+ answer_list,
|
|
|
+ getOption,
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
// 'data.option': 'handleMindMap',
|
|
|
},
|
|
|
methods: {
|
|
|
- // 删除行
|
|
|
- handleDelete(index) {
|
|
|
- this.data.option.splice(index, 1);
|
|
|
- },
|
|
|
- // 上移下移
|
|
|
- moveElement(dItem, index, type) {
|
|
|
- let obj = JSON.parse(JSON.stringify(dItem));
|
|
|
- if (type == 'up' && index > 0) {
|
|
|
- this.data.option.splice(index - 1, 0, obj);
|
|
|
- this.data.option.splice(index + 1, 1);
|
|
|
- }
|
|
|
- if (type == 'down' && index < this.data.option.length - 1) {
|
|
|
- this.data.option[index] = this.data.option.splice(index + 1, 1, this.data.option[index])[0];
|
|
|
- }
|
|
|
- },
|
|
|
// 增加
|
|
|
addElement() {
|
|
|
- this.data.option.push(getOption());
|
|
|
+ this.data.option_list.push(getOption());
|
|
|
},
|
|
|
handleMindMap() {
|
|
|
// 思维导图数据
|
|
|
let node_list = [];
|
|
|
- this.data.option.forEach((item) => {
|
|
|
+ this.data.option_list.forEach((item) => {
|
|
|
node_list.push({
|
|
|
- name: item.con.replace(/<[^>]*>?/gm, ''),
|
|
|
+ name: item.content.replace(/<[^>]*>?/gm, ''),
|
|
|
id: Math.random().toString(36).substring(2, 12),
|
|
|
});
|
|
|
});
|
|
|
this.data.mind_map.node_list = node_list;
|
|
|
},
|
|
|
- handleBlurCon() {
|
|
|
- this.handleMindMap();
|
|
|
+ // 识别
|
|
|
+ async identify(items) {
|
|
|
+ let con = items.content.trim();
|
|
|
+ if (con) {
|
|
|
+ items.content_list = [];
|
|
|
+ let arr = con.split('');
|
|
|
+ const regex = /[\u4E00-\u9FFF]/;
|
|
|
+ let str = '';
|
|
|
+ arr.forEach((item) => {
|
|
|
+ if (regex.test(item)) {
|
|
|
+ str += item;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ let MethodName = 'hz_resource_manager-GetMultHZStrokesContent';
|
|
|
+ let data = {
|
|
|
+ hz_str: str,
|
|
|
+ };
|
|
|
+
|
|
|
+ await GetStaticResources(MethodName, data)
|
|
|
+ .then((res) => {
|
|
|
+ for (let key in res) {
|
|
|
+ if (key != 'status' && key != ',' && res[key]) {
|
|
|
+ res[key] = JSON.parse(res[key]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let hzDetailList = res;
|
|
|
+ arr.forEach((item, index) => {
|
|
|
+ let objs = {};
|
|
|
+ if (item === '@') {
|
|
|
+ // 图片
|
|
|
+ objs = {
|
|
|
+ con: item,
|
|
|
+ type: 'img',
|
|
|
+ file_list: [],
|
|
|
+ file_id_list: [],
|
|
|
+ };
|
|
|
+ } else if (item === '#') {
|
|
|
+ // 书写
|
|
|
+ objs = {
|
|
|
+ con: item,
|
|
|
+ type: 'write',
|
|
|
+ img: '',
|
|
|
+ base64: '',
|
|
|
+ };
|
|
|
+ } else if (regex.test(item)) {
|
|
|
+ // 汉字
|
|
|
+ let hz_list = [];
|
|
|
+ let res = JSON.parse(JSON.stringify(hzDetailList[item]));
|
|
|
+ let obj = {
|
|
|
+ con: item,
|
|
|
+ hzDetail: {
|
|
|
+ hz_json: res,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ hz_list.push(obj);
|
|
|
+ objs = {
|
|
|
+ con: item,
|
|
|
+ type: 'hanzi',
|
|
|
+ hz_info: hz_list,
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ // 连字符
|
|
|
+ objs = {
|
|
|
+ con: item,
|
|
|
+ type: 'lian',
|
|
|
+ };
|
|
|
+ }
|
|
|
+ this.$set(items.content_list, index, objs);
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ } else {
|
|
|
+ this.$message.warning('请先输入内容');
|
|
|
+ }
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
@@ -89,9 +179,41 @@ export default {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
-<style lang="scss">
|
|
|
-.tox .tox-editor-header {
|
|
|
- z-index: 3 !important;
|
|
|
+
|
|
|
+.fun-type {
|
|
|
+ display: flex;
|
|
|
+ gap: 5px;
|
|
|
+ width: 100%;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ border-bottom: 1px solid #e5e6eb;
|
|
|
+
|
|
|
+ a {
|
|
|
+ padding: 5px 10px;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #1d2129;
|
|
|
+ cursor: pointer;
|
|
|
+ background: #f2f3f5;
|
|
|
+ border: 1px solid #f2f3f5;
|
|
|
+ border-radius: 2px;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ color: #165dff;
|
|
|
+ background: #e7eeff;
|
|
|
+ border-color: #165dff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.content-box {
|
|
|
+ margin: 10px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.content-item {
|
|
|
+ display: flex;
|
|
|
+ gap: 16px;
|
|
|
+
|
|
|
+ .el-input {
|
|
|
+ max-width: 400px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|