Merge branch 'master' of http://60.205.254.193:3000/GCLS/eep_page

src/api/project.js

@@ -271,6 +271,14 @@ export function AddLabel(data) {
 }
 
 /**
+ * @description 修改标签
+ * @param {object} data
+ */
+export function UpdateLabel(data) {
+  return http.post(`${process.env.VUE_APP_EepServer}?MethodName=project_resource_manager-UpdateLabel`, data);
+}
+
+/**
  * @description 删除标签
  * @param {object} data
  */

src/icons/svg/lang.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1755247006124" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10088" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M916.48 977.92l-35.84-102.4h-168.96l-35.84 102.4h-107.52l163.84-430.08h122.88l163.84 430.08h-102.4z m-117.76-337.92l-61.44 158.72h122.88l-61.44-158.72zM527.36 798.72l46.08-107.52c-15.36-10.24-30.72-20.48-40.96-30.72 76.8-87.04 138.24-194.56 184.32-322.56h138.24v-102.4H465.92l76.8-25.6c-10.24-35.84-35.84-92.16-61.44-138.24l-112.64 35.84c20.48 40.96 40.96 92.16 51.2 128H40.96v102.4h143.36c46.08 128 112.64 235.52 189.44 322.56C281.6 732.16 163.84 783.36 25.6 819.2c20.48 25.6 51.2 76.8 66.56 102.4 143.36-40.96 266.24-102.4 363.52-184.32 20.48 20.48 46.08 40.96 71.68 61.44z m-235.52-460.8h307.2c-35.84 97.28-87.04 179.2-148.48 250.88-66.56-71.68-122.88-153.6-158.72-250.88z" p-id="10089"></path></svg>

src/views/book/courseware/create/components/base/label/Label.vue

@@ -32,11 +32,25 @@
         <div class="tag-manager-box">
           <div class="left-area">
             <span class="tag-manager-title">常用标签 </span>
-            <span class="tag-manager-text" @click="editCommonTags()">
+            <span class="tag-manager-text" :style="{ color: closable ? '#165dff' : '' }" @click="editCommonTags()">
               <SvgIcon icon-class="setup" size="14" />管理
             </span>
+            <span
+              class="tag-manager-text"
+              :style="{ color: editLanguage ? '#165dff' : '' }"
+              @click="editCommonTagsLanguage"
+            >
+              <SvgIcon icon-class="lang" size="14" />设置多语言
+            </span>
           </div>
           <div class="right-area">
+            <MultilingualFill
+              v-if="multilingualVisible"
+              :visible.sync="multilingualVisible"
+              :text="editMultilingualTags.name"
+              :translations="editMultilingualTags.mult_language_list"
+              @SubmitTranslation="handleMultilingualTranslation"
+            />
             <el-upload
               class=""
               action="no"
@@ -60,7 +74,7 @@
             effect="plain"
             size="medium"
             :closable="closable"
-            style="cursor: pointer"
+            :style="{ cursor: 'pointer', 'background-color': editLanguage ? '#F2F3F3' : '' }"
             @close="handleCloseCommonTag(tag.id)"
             @click="viewToDynamicTags(i)"
           >
@@ -89,7 +103,7 @@
 <script>
 import { fileUpload } from '@/api/app';
 import { getLabelData, labelColorList } from '@/views/book/courseware/data/label';
-import { AddLabel, DeleteLabel, PageQueryLabelList, ImportLabel } from '@/api/project.js';
+import { AddLabel, DeleteLabel, PageQueryLabelList, ImportLabel, UpdateLabel } from '@/api/project.js';
 import ModuleMixin from '../../common/ModuleMixin';
 export default {
   name: 'LabelPage',
@@ -107,6 +121,8 @@ export default {
       total_count: 0,
       loading: false,
       labelName: '',
+      editLanguage: false, // 编辑多语言
+      editMultilingualTags: {},
     };
   },
   created() {
@@ -125,6 +141,11 @@ export default {
     // 显示编辑标签图标
     editCommonTags() {
       this.closable = !this.closable;
+      this.editLanguage = false;
+    },
+    editCommonTagsLanguage() {
+      this.editLanguage = !this.editLanguage;
+      this.closable = false;
     },
     // 删除常用标签
     handleCloseCommonTag(id) {
@@ -135,6 +156,7 @@ export default {
       })
         .then(() => {
           DeleteLabel({ id }).then(() => {
+            this.data.dynamicTags = this.data.dynamicTags.filter((p) => p.id !== id);
             this.getLabelList();
             this.$message.success('删除成功!');
           });
@@ -157,16 +179,16 @@ export default {
       if (label_color === 'random') label_color = this.getRandomColor();
       let dynamicTags = this.data.dynamicTags;
       if (inputValue) {
-        // 检查是否已存在相同标签（不区分大小写）
+        // 检查是否已存在相同标签
         const existingTag = dynamicTags.find((tag) => tag.name === inputValue);
         if (existingTag) {
           this.$message.warning('常用标签已包含该标签，无需重复添加');
         } else {
-          dynamicTags.push({
-            name: inputValue,
-            color: label_color,
-          });
-          this.addLabel(inputValue);
+          // dynamicTags.push({
+          //   name: inputValue,
+          //   color: label_color,
+          // });
+          this.addLabel(inputValue, label_color);
         }
       }
       this.inputVisible = false;
@@ -174,22 +196,29 @@ export default {
     },
     // 点击常用标签显示到动态标签里
     viewToDynamicTags(index) {
+      let commonTagId = this.commonTags[index].id;
+      let commonTagName = this.commonTags[index].name;
+      if (this.closable) return;
+      if (this.editLanguage) {
+        this.openDialogLanguage(commonTagId);
+        return;
+      }
       if (this.data.dynamicTags.length >= 16) {
         this.$message.warning('最多添加16个标签!');
         return false;
       }
       // 检查是否已存在相同标签（不区分大小写）
-      let dynamicTags = this.data.dynamicTags;
-      let commonTag = this.commonTags[index].name;
-      const existingTag = dynamicTags.find((tag) => tag.name === commonTag);
+      const existingTag = this.data.dynamicTags.find((tag) => tag.name === commonTagName);
       if (existingTag) {
         this.$message.warning('组件标签已包含该标签，无需重复加入');
       } else {
         let label_color = this.data.property.label_color;
         if (label_color === 'random') label_color = this.getRandomColor();
         this.data.dynamicTags.push({
-          name: commonTag,
+          name: commonTagName,
           color: label_color,
+          id: commonTagId,
+          mult_language_list: this.commonTags[index].mult_language_list || [],
         });
       }
     },
@@ -222,11 +251,19 @@ export default {
       this.getLabelList();
     },
     // 存储标签到系统
-    addLabel(name) {
+    addLabel(name, color) {
       AddLabel({ name })
-        .then(() => {
+        .then((res) => {
           this.cur_page = 1;
           this.getLabelList();
+          if (color) {
+            this.data.dynamicTags.push({
+              name: name,
+              color: color,
+              id: res.id,
+              mult_language_list: [],
+            });
+          }
         })
         .catch((e) => {
           console.error(e);
@@ -265,6 +302,39 @@ export default {
         }
       });
     },
+    // 多语言弹窗
+    openDialogLanguage(commonTagId) {
+      this.multilingualVisible = true;
+      let en = { mult_language_list: [] };
+      if (this.commonTags.some((p) => p.id === commonTagId)) {
+        en = this.commonTags.find((p) => p.id === commonTagId);
+        en.mult_language_list.map((p) => (p.translation = p.name));
+      }
+      this.editMultilingualTags = en;
+    },
+    // 提交多语言译文
+    handleMultilingualTranslation(translations) {
+      let data = this.editMultilingualTags;
+      if (!translations.some((p) => p.type === 'ZH')) {
+        translations.push({ translation: data.name, type: 'ZH' });
+      }
+      data['mult_language_list'] = translations.map((p) => {
+        return { name: p.translation, type: p.type };
+      });
+      UpdateLabel(data)
+        .then(() => {
+          this.$message.success('设置成功!');
+          this.cur_page = 1;
+          let _index = this.data.dynamicTags.findIndex((p) => p.id === data.id);
+          if (_index > -1) {
+            this.$set(this.data.dynamicTags, _index, data);
+          }
+          this.getLabelList();
+        })
+        .catch((e) => {
+          console.error(e);
+        });
+    },
   },
 };
 </script>

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

@@ -74,6 +74,7 @@ export function getArticleProperty() {
     is_enable_pinyin: true,
     pinyin_position: positionList[0].value,
     is_enable_sentence_case: true,
+    multilingualPosition: multilingualList[1].value,
   };
 }
 
@@ -190,7 +191,6 @@ export function getArticleData() {
         { name: '课文组件' }
       ], // 思维导图数据
     },
-    multilingualPosition: multilingualList[1].value,
     multilingual: [], // 多语言
   };
 }

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

@@ -94,7 +94,9 @@ export function getArticleProperty() {
     pinyin_position: positionList[0].value,
     is_enable_sentence_case: true,
     role_img_type: 'word',
-    role_list: [getRole(0),getRole(1)]
+    role_list: [getRole(0), getRole(1)],
+    
+    multilingualPosition: multilingualList[1].value,
   };
 }
 
@@ -220,7 +222,6 @@ export function getArticleData() {
     },
     sentence_list_mp: [], //句子+分词数组
     pinyin_type: 'pinyin', // 拼音类型
-    multilingualPosition: multilingualList[1].value,
     multilingual: [], // 多语言
   };
 }

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

@@ -23,8 +23,9 @@ export function getLabelData() {
     type: 'label',
     title: '标签',
     dynamicTags: [], // 标签内容 {text:'标准',color:'#F53F3F'}
-    commonTags: [], // 常用标签{text:'标准',color:'#F53F3F'}（目前存储在本地缓存）
+    commonTags: [], // 常用标签{text:'标准',color:'#F53F3F'}（存储到后台）
     property: getLabelProperty(),
+    multilingual: [], // 多语言
   };
 }
 

src/views/book/courseware/preview/components/label/LabelPreview.vue

@@ -3,7 +3,8 @@
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
     <div class="main">
       <el-tag v-for="(tag, i) in data.dynamicTags" :key="i" :style="{ color: tag.color }">
-        {{ tag.name }}
+        <!-- {{ tag.name }} -->
+        {{ tag.mult_language_list?.find((item) => item.type === getLang())?.name }}
       </el-tag>
     </div>
   </div>

src/views/book/courseware/preview/components/table/TablePreview.vue

@@ -64,6 +64,15 @@
                     </template>
                   </p>
                 </div>
+                <span class="multilingual" v-if="showLang">
+                  {{
+                    multilingualTextList[getLang()] &&
+                    multilingualTextList[getLang()][i] &&
+                    multilingualTextList[getLang()][i][j]
+                      ? multilingualTextList[getLang()][i][j]
+                      : ''
+                  }}
+                </span>
               </td>
             </template>
           </tr>
@@ -86,6 +95,7 @@ export default {
     return {
       data: getTableData(),
       table_width: 0,
+      multilingualTextList: {}, // 多语言对应的切割后的翻译
     };
   },
   computed: {
@@ -107,7 +117,13 @@ export default {
       return obj;
     },
   },
-  watch: {},
+  watch: {
+    'data.col_width': {
+      handler(val) {
+        this.handleData();
+      },
+    },
+  },
   created() {
     this.handleData();
   },
@@ -119,6 +135,22 @@ export default {
       this.data.col_width.forEach((item) => {
         this.table_width += Number(item.value);
       });
+      if (this.showLang) {
+        this.data.multilingual.forEach((item) => {
+          let trans_arr = item.translation.split('\n');
+          let chunkSize = this.data.property.column_count;
+          let chunkedArr = trans_arr.reduce((acc, curr, index) => {
+            // 当索引是chunkSize的倍数时，开始一个新的子数组
+            if (index % chunkSize === 0) {
+              acc.push([curr]); // 开始新的子数组并添加当前元素
+            } else {
+              acc[acc.length - 1].push(curr); // 将当前元素添加到最后一个子数组中
+            }
+            return acc;
+          }, []);
+          this.$set(this.multilingualTextList, item.type, chunkedArr);
+        });
+      }
     },
     computedAnswerText(mark) {
       if (!this.isShowRightAnswer) return '';
@@ -216,6 +248,10 @@ $border-color: #e6e6e6;
         }
       }
     }
+
+    .multilingual {
+      word-break: break-word;
+    }
   }
 }
 </style>

src/views/book/courseware/preview/components/upload_preview/UploadPreviewPreview.vue

@@ -33,14 +33,16 @@
             <div class="file-name">
               <span>
                 <SvgIcon :icon-class="icon_list[active_index]" size="16" />
-                <span
-                  >{{ data.file_info[file.file_id].xuhao + data.file_info[file.file_id].file_name }}
-                  <!-- {{
-                    multilingualTextList[getLang()] && multilingualTextList[getLang()][i]
-                      ? ' ' + multilingualTextList[getLang()][i]
-                      : ''
-                  }} -->
-                </span>
+                <p>
+                  <span>{{ data.file_info[file.file_id].xuhao + data.file_info[file.file_id].file_name }} </span
+                  ><span
+                    >{{
+                      multilingualTextList[getLang()] && multilingualTextList[getLang()][i]
+                        ? ' ' + multilingualTextList[getLang()][i]
+                        : ''
+                    }}
+                  </span>
+                </p>
               </span>
               <SvgIcon v-show="file.file_id" icon-class="uploadPreview" size="16" @click="viewDialog(file)" />
               <img
@@ -124,13 +126,12 @@ export default {
           this.source_list[2].push(item);
         }
       });
-      // if (this.showLang) {
-      this.data.multilingual.forEach((item) => {
-        let trans_arr = item.translation.split('\n');
-        this.$set(this.multilingualTextList, item.code, trans_arr);
-      });
-      console.log(this.multilingualTextList);
-      // }
+      if (this.showLang) {
+        this.data.multilingual.forEach((item) => {
+          let trans_arr = item.translation.split('\n');
+          this.$set(this.multilingualTextList, item.type, trans_arr);
+        });
+      }
     },
     //   下载表格
     downLoad(file) {
@@ -234,6 +235,10 @@ export default {
         color: #1d2129;
         background-color: #f7f8fa;
 
+        p {
+          margin: 0;
+        }
+
         span {
           display: flex;
           column-gap: 14px;