描述组增加多语言支持

src/views/descriptionGroup/DescriptionGroupManage.vue

@@ -18,8 +18,9 @@
       <el-table-column prop="name" label="名称" width="250"></el-table-column>
       <el-table-column label="描述" min-width="300">
         <template slot-scope="scope">
-          <div v-for="(description, index) in scope.row.descriptions" :key="index" class="description-item">
-            {{ description }}
+          <div v-for="(descObj, index) in scope.row.descriptions" :key="index" class="description-item">
+            <span class="description-text">{{ descObj.text }}</span>
+            <el-tag size="mini" type="info" class="language-tag">{{ getLanguageName(descObj.language) }}</el-tag>
           </div>
           <div v-if="!scope.row.descriptions || scope.row.descriptions.length === 0" class="no-descriptions">
             暂无描述
@@ -68,12 +69,13 @@
                 <el-button type="text" @click="form.descriptions = []">清空</el-button>
               </div>
               <el-tag
-                v-for="(description, index) in form.descriptions"
+                v-for="(descObj, index) in form.descriptions"
                 :key="index"
                 closable
                 @close="removeDescription(index)"
                 class="description-tag">
-                {{ description }}
+                {{ descObj.text }}
+                <span class="description-language">({{ getLanguageName(descObj.language) }})</span>
               </el-tag>
             </div>
             <el-button type="primary" size="small" @click="showDescriptionSelectorDialog">添加描述</el-button>
@@ -111,6 +113,7 @@
 <script>
 import TextTableSelecter from '@/components/TextTableSelecter'
 import { getDescriptionGroupList, createDescriptionGroup, updateDescriptionGroup, deleteDescriptionGroup } from '@/api/descriptionGroup'
+import { getLanguageName } from '@/const/language'
 
 export default {
   name: 'DescriptionGroupManage',
@@ -145,6 +148,21 @@ export default {
     this.fetchData()
   },
   methods: {
+    // 获取语言名称
+    getLanguageName,
+    
+    // 处理描述内容显示格式
+    formatDescriptionDisplay(descObj) {
+      if (typeof descObj === 'string') {
+        // 兼容旧格式：字符串
+        return { text: descObj, language: 'en' };
+      } else if (descObj && typeof descObj === 'object') {
+        // 新格式：对象
+        return descObj;
+      }
+      return null;
+    },
+    
     // 获取描述组列表
     fetchData() {
       this.loading = true
@@ -152,8 +170,18 @@ export default {
         .then(response => {
           this.loading = false
           if (response.status === 200) {
-            this.tableData = response.result.data || []
-            this.total = this.tableData.length
+            // 处理从后端返回的数据
+            const data = response.result.data || [];
+            
+            // 转换descriptions字段格式
+            data.forEach(item => {
+              if (item.descriptions && Array.isArray(item.descriptions)) {
+                item.descriptions = item.descriptions.map(this.formatDescriptionDisplay).filter(Boolean);
+              }
+            });
+            
+            this.tableData = data;
+            this.total = this.tableData.length;
           } else {
             this.$message.error('获取描述组列表失败')
           }
@@ -203,7 +231,14 @@ export default {
     handleEdit(row) {
       this.dialogTitle = '编辑描述组'
       // 深拷贝避免直接修改表格数据
-      this.form = JSON.parse(JSON.stringify(row))
+      const formData = JSON.parse(JSON.stringify(row));
+      
+      // 处理descriptions字段，确保为新格式
+      if (formData.descriptions && Array.isArray(formData.descriptions)) {
+        formData.descriptions = formData.descriptions.map(this.formatDescriptionDisplay).filter(Boolean);
+      }
+      
+      this.form = formData;
       this.dialogVisible = true
       // 重置表单验证
       this.$nextTick(() => {
@@ -246,7 +281,23 @@ export default {
       this.$refs.form.validate(valid => {
         if (valid) {
           const isEdit = !!this.form.id
-          const formData = { ...this.form }
+          // 深拷贝表单数据，避免直接修改
+          const formData = JSON.parse(JSON.stringify(this.form))
+          
+          // 确保descriptions数组中的每个对象都有text和language属性
+          if (formData.descriptions && Array.isArray(formData.descriptions)) {
+            formData.descriptions = formData.descriptions.map(description => {
+              // 如果是字符串，转换为对象格式
+              if (typeof description === 'string') {
+                return { text: description, language: 'en' };
+              }
+              // 如果已经是对象但缺少language属性
+              if (typeof description === 'object' && description.text && !description.language) {
+                return { ...description, language: 'en' };
+              }
+              return description;
+            });
+          }
           
           const apiCall = isEdit 
             ? updateDescriptionGroup(formData.id, formData)
@@ -280,13 +331,25 @@ export default {
 
     // 确认描述选择
     confirmDescriptionSelection() {
-      // 提取文本内容并添加到描述列表
-      const newDescriptions = this.selectedDescriptions.map(item => item.text)
+      // 从TextTableSelecter获取的是完整的文案对象，已包含text和language属性
+      const newDescriptions = this.selectedDescriptions.map(item => ({
+        text: item.text,
+        language: item.language || 'en' // 如果没有语言字段，默认为英语
+      }))
       
-      // 合并去重
-      const uniqueDescriptions = [...new Set([...this.form.descriptions, ...newDescriptions])]
-      this.form.descriptions = uniqueDescriptions
+      // 合并，避免重复添加相同的描述+语言组合
+      const uniqueDescriptions = [...this.form.descriptions]
       
+      newDescriptions.forEach(newDesc => {
+        const isDuplicate = uniqueDescriptions.some(
+          existingDesc => existingDesc.text === newDesc.text && existingDesc.language === newDesc.language
+        )
+        if (!isDuplicate) {
+          uniqueDescriptions.push(newDesc)
+        }
+      })
+      
+      this.form.descriptions = uniqueDescriptions
       this.descriptionSelectorDialogVisible = false
     },
 
@@ -357,4 +420,18 @@ export default {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.description-text {
+  margin-right: 5px;
+}
+
+.language-tag {
+  margin-left: 5px;
+}
+
+.description-language {
+  font-size: 0.8em;
+  color: #909399;
+  margin-left: 3px;
+}
 </style>