Browse Source

feat(国际化): 添加"全部年级"翻译并优化班级选择逻辑

- 在cn/hk/en.json中添加"allGrades"翻译字段
- 修改addCourse3.vue使用国际化字段代替硬编码
- 重构selectTag3.vue的选择逻辑,支持"全部班级"自动选择/取消功能
- 优化count-node元素的垂直居中样式
lsc 4 months ago
parent
commit
580e6187e7

+ 2 - 1
src/App.vue

@@ -553,7 +553,8 @@ html::-webkit-scrollbar-thumb {
 
 .count-node {
   position: absolute;
-  top: 2px;
+  top: 50%;
+  transform: translateY(-50%);
   display: none;
   height: 24px;
   padding: 0 8px;

+ 1 - 1
src/components/pages/pptEasy/addCourse3.vue

@@ -1353,7 +1353,7 @@ export default {
       
       // 初始化年级选项,添加全部班级选项
       this.gradeOptions = [
-        { id: '', name: '全部班级' }
+        { id: '', name: this.lang.allGrades }
       ].concat(this.gradeArray.map(item => ({
         id: item.id,
         name: item.name

+ 43 - 22
src/components/pages/pptEasy/dialog/selectTag3.vue

@@ -1,23 +1,9 @@
 <template>
   <main>
-    <el-select
-      ref="select"
-      v-model="values"
-      multiple
-      style="width:100%"
-      :placeholder=lang.pleaseSelect3
-      @change="handleChange"
-      @remove-tag="removeTag"
-      class="tagS"
-    >
-      <el-option
-        class="tagOption"
-        v-for="item in options"
-        :key="item.id"
-        :disabled="disabled && item.id === Number(judgingCondition)"
-        :label="item.name"
-        :value="item.id"
-      />
+    <el-select ref="select" v-model="values" multiple style="width:100%" :placeholder=lang.pleaseSelect3
+      @change="handleChange" @remove-tag="removeTag" class="tagS">
+      <el-option class="tagOption" v-for="item in options" :key="item.id"
+        :disabled="disabled && item.id === Number(judgingCondition)" :label="item.name" :value="item.id" />
     </el-select>
   </main>
 </template>
@@ -59,7 +45,7 @@ export default {
   },
   computed: {
     /**
-     * @description 获取当前选中的值
+     * @description 获取当前选中的值(过滤掉"全部班级",不显示在标签中)
     */
     values: {
       get() {
@@ -94,7 +80,7 @@ export default {
       const callback = mutationsList => {
         mutationsList.forEach(item => {
           console.log(item);
-          
+
           if (item.type === 'childList') {
             const tagList = item.target.childNodes;
             let tagWidth = 0;
@@ -137,7 +123,42 @@ export default {
     /**
      * @description 选择框改变
      */
-    handleChange() {
+    handleChange(val) {
+      const hasallGrades = this.options.some(item => item.id === '');
+      if (hasallGrades) {
+        // 获取所有班级的id(不包括"全部班级")
+        const allGradesIds = this.options.filter(item => item.id || item.name === this.lang.allGrades).map(item => item.id);
+        const allGradesIds2 = this.options.filter(item => item.id).map(item => item.id);
+        const allGradesIndex = val.indexOf('');
+
+        // 检查当前是否已经是全选状态
+        const isAllSelected = allGradesIds2.every(id => val.includes(id));
+
+        const diff = val.filter(id => !this.value.includes(id)).concat(this.value.filter(id => !val.includes(id)));
+
+        if (allGradesIndex !== -1) {
+          if (isAllSelected) {
+            // 如果已经是全选状态,再点击"全部班级"则取消全选
+            this.values = [];
+          } else if (!isAllSelected && diff.length > 0 && !diff.includes('')) {
+            this.values = val.filter(id => id !== '');
+          } else {
+            // 如果选择了"全部班级"且不是全选状态,则自动选中所有班级
+            this.values = allGradesIds;
+          }
+        } else if (diff.includes('') && isAllSelected) {
+          // 如果是全选状态,则自动取消"全部班级"选中
+          this.values = [];
+        } else {
+          // 检查是否所有班级都被选中
+          const allSelected = allGradesIds2.every(id => val.includes(id));
+          if (allSelected && allGradesIds2.length > 0) {
+            // 如果所有班级都被选中,自动选中"全部班级"
+            this.values = ['', ...allGradesIds2];
+          }
+        }
+      }
+
       this.$emit('change', this.value);
     },
     /**
@@ -151,7 +172,7 @@ export default {
 };
 </script>
 <style scoped>
-.tagS >>> .el-input__inner:focus {
+.tagS>>>.el-input__inner:focus {
   border-color: #ef9e28;
 }
 </style>

+ 2 - 1
src/lang/cn.json

@@ -2047,5 +2047,6 @@
   "ssSelectedCourse":"已选择 * 个课程",
   "ssSelectedApp":"已选择 * 个应用",
   "ssSyncImportClassInfo":"提示: 如需同步导入班级信息,请于此处下载导入模板,并于【班级】列准确输入年级+班级名称作为学生班级(兴趣班不支持导入学生)。",
-  "ssNoSettingAnswer":"未设置正确答案"
+  "ssNoSettingAnswer":"未设置正确答案",
+  "allGrades": "全部年级"
 }

+ 2 - 3
src/lang/en.json

@@ -2046,7 +2046,6 @@
   "ssSelectedCourse":"Selected * courses",
   "ssSelectedApp":"Selected * apps",
   "ssNoSettingAnswer":"No correct answer set",
-  "ssSyncImportClassInfo":"Tip: If you need to synchronize import class information, please download the import template here, and accurately enter the grade + class name as the student class in the [Class] column (interest classes do not support importing students)."
-
-
+  "ssSyncImportClassInfo":"Tip: If you need to synchronize import class information, please download the import template here, and accurately enter the grade + class name as the student class in the [Class] column (interest classes do not support importing students).",
+  "allGrades": "All Grades"
 }

+ 2 - 1
src/lang/hk.json

@@ -2047,5 +2047,6 @@
   "ssSelectedApp":"已選擇 * 個應用",
   "ssCocoNoteUpdateTips":"協同建構不支持修改基本信息,只支持加入分組。",
   "ssNoSettingAnswer":"未設置正確答案",
-  "ssSyncImportClassInfo":"提示: 如需同步導入班級信息,請於此處下載導入模板,並於【班級】列準確輸入年級+班級名稱作為學生班級(興趣班不支持導入學生)。"
+  "ssSyncImportClassInfo":"提示: 如需同步導入班級信息,請於此處下載導入模板,並於【班級】列準確輸入年級+班級名稱作為學生班級(興趣班不支持導入學生)。",
+  "allGrades": "全部年級"
 }