标题组增加标题对应的语言信息

src/components/TextTableSelecter/index.vue

@@ -70,6 +70,7 @@
       style="width: 100%;"
       v-loading="loading"
       row-key="id"
+      :row-class-name="rowClassName"
       @selection-change="handleSelectionChange">
       <el-table-column
         type="selection"
@@ -78,13 +79,13 @@
       <el-table-column prop="id" label="ID" width="80"></el-table-column>
       <el-table-column prop="text" label="文案内容" min-width="350">
         <template slot-scope="scope">
-          <div class="text-content">{{ scope.row.text }}</div>
+          <div class="text-content">{{ scope.row.text || '无内容' }}</div>
         </template>
       </el-table-column>
       <el-table-column prop="type" label="文案类型" width="120">
         <template slot-scope="scope">
-          <el-tag :type="scope.row.type === 1 ? 'primary' : 'success'">
-            {{ scope.row.type === 1 ? '标题' : '描述' }}
+          <el-tag :type="scope.row.type == 1 ? 'primary' : 'success'">
+            {{ scope.row.type == 1 ? '标题' : '描述' }}
           </el-tag>
         </template>
       </el-table-column>
@@ -119,7 +120,7 @@ import {
   getSelectApps
 } from "@/api/cloud";
 import AppCategorySelector from "@/components/Selectors/AppCategorySelector";
-import { languageOptions, getLanguageName } from "@/const/language";
+import { languageOptions } from "@/const/language";
 
 export default {
   name: 'TextTableSelecter',
@@ -235,8 +236,21 @@ export default {
     }
   },
   created() {
-    this.fetchApps();
+    // 初始化默认条件
+    if (this.type) {
+      this.condition.type = this.type;
+    }
+    
+    // 设置默认排序
+    this.condition.sortField = 'datadate';
+    this.condition.sortOrder = 'desc';
+    
+    console.log('初始化条件:', this.condition);
+    
+    // 先获取应用列表，然后获取文案数据
+    this.fetchApps().then(() => {
       this.fetchData();
+    });
     
     // 确保初始化时选中状态正确
     if (Array.isArray(this.value) && this.value.length > 0) {
@@ -265,8 +279,9 @@ export default {
           platformId: 5,
           menuCode: "game.Overview,android",
         };
+        console.log('获取应用列表参数:', params);
         const response = await getSelectApps(params);
-        console.log("相应", response)
+        console.log("应用列表响应:", response);
         if (response.status === 200) {
           this.selectApps = response.result.data || [];
         }
@@ -280,6 +295,7 @@ export default {
     async fetchData() {
       this.loading = true;
       try {
+        // 构造请求参数
         const params = {
           page: this.currentPage,
           size: this.pageSize,
@@ -288,20 +304,82 @@ export default {
           startDate: this.condition.startDate || '',
           endDate: this.condition.endDate || '',
           category: this.condition.category || '',
-          language: this.condition.language || ''
+          language: this.condition.language || '',
+          sortField: this.condition.sortField || 'datadate',
+          sortOrder: this.condition.sortOrder || 'desc'
         };
         
+        // 移除空字符串参数，避免后端处理问题
+        Object.keys(params).forEach(key => {
+          if (params[key] === '') {
+            delete params[key];
+          }
+        });
+        
+        console.log('文案列表请求参数:', params);
+        
         const response = await getBusinText(params);
+        console.log('API响应:', response);
         
         if (response && response.result) {
-          this.tableData = response.result.data.content || [];
+          console.log('响应结果结构:', response.result);
+          
+          // 尝试不同的数据解析路径
+          if (response.result.data && response.result.data.content) {
+            // 标准分页格式：data.content
+            this.tableData = response.result.data.content;
             this.total = response.result.data.total || 0;
+          } else if (response.result.data && Array.isArray(response.result.data)) {
+            // 数组格式：data是数组
+            this.tableData = response.result.data;
+            this.total = response.result.data.length;
+          } else if (response.result.data && response.result.data.value) {
+            // value格式：data.value是数组
+            this.tableData = response.result.data.value;
+            this.total = response.result.data.total || response.result.count || this.tableData.length;
+          } else if (Array.isArray(response.result)) {
+            // 直接result是数组
+            this.tableData = response.result;
+            this.total = response.result.length;
+          } else {
+            console.error('无法识别响应数据结构', response.result);
+            this.tableData = [];
+            this.total = 0;
+          }
+          
+          console.log('解析后的表格数据:', this.tableData);
+          console.log('总数:', this.total);
+
+          // 确保表格数据中每个项都有必要的属性
+          this.tableData = this.tableData.map(item => {
+            const processedItem = {...item};
+            
+            // 确保有language属性
+            if (!processedItem.language) {
+              processedItem.language = 'en';
+            }
+            
+            // 确保type属性格式正确
+            if (processedItem.type && typeof processedItem.type === 'string') {
+              processedItem.type = parseInt(processedItem.type, 10) || 1;
+            }
+            
+            // 确保文本内容存在
+            if (!processedItem.text && processedItem.content) {
+              processedItem.text = processedItem.content;
+            }
+            
+            return processedItem;
+          });
 
           // 更新表格选中状态
           this.$nextTick(() => {
             this.updateTableSelection();
           });
-        
+        } else {
+          console.error('响应没有result字段', response);
+          this.tableData = [];
+          this.total = 0;
         }
       } catch (error) {
         console.error("获取文案列表失败:", error);
@@ -329,6 +407,10 @@ export default {
       
       // 更新当前页的选中状态到映射中
       rows.forEach(row => {
+        // 确保每个选中的行对象都有language属性
+        if (!row.language) {
+          row.language = 'en'; // 默认为英语
+        }
         this.selectedRowMap[row.id] = row;
       });
       
@@ -375,7 +457,29 @@ export default {
       this.$emit('input', []);
       this.$emit('change', []);
       console.log('Selection cleared');
+    },
+    
+    // 行样式
+    rowClassName({row, rowIndex}) {
+      // 这个方法用于调试，在表格行上添加一个类名，使其可见
+      return 'text-table-row';
+    },
     
+    // 根据语言代码获取语言名称
+    getLanguageName(code) {
+      const languageNames = {
+        en: "英语",
+        zh: "中文",
+        ja: "日语",
+        ko: "韩语",
+        fr: "法语",
+        de: "德语",
+        es: "西班牙语",
+        pt: "葡萄牙语",
+        ru: "俄语",
+        hi: "印地语"
+      };
+      return languageNames[code] || code;
     }
   }
 };
@@ -420,4 +524,25 @@ export default {
   margin-top: 15px;
   text-align: right;
 }
+
+/* 确保表格行可见 */
+.text-table-row {
+  background-color: #ffffff; /* 白色背景 */
+}
+
+/* 确保表格内容文本可见 */
+.el-table {
+  color: #333;
+}
+
+.el-table--border th, .el-table--border td {
+  border: 1px solid #ebeef5;
+}
+
+/* 增强表格样式 */
+.el-table th {
+  background-color: #f5f7fa;
+  color: #606266;
+  font-weight: 600;
+}
 </style>

src/views/titleGroup/TitleGroupManage.vue

@@ -18,19 +18,15 @@
       <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="(title, index) in scope.row.titles" :key="index" class="title-item">
-            {{ title }}
+          <div v-for="(titleObj, index) in scope.row.titles" :key="index" class="title-item">
+            <span class="title-text">{{ titleObj.text }}</span>
+            <el-tag size="mini" type="info" class="language-tag">{{ getLanguageName(titleObj.language) }}</el-tag>
           </div>
           <div v-if="!scope.row.titles || scope.row.titles.length === 0" class="no-titles">
             暂无标题
           </div>
         </template>
       </el-table-column>
-      <!-- <el-table-column prop="createdAt" label="创建时间" width="180">
-        <template slot-scope="scope">
-          {{ formatDate(scope.row.createdAt) }}
-        </template> -->
-      </el-table-column>
       <el-table-column label="操作" align="center" width="180">
         <template slot-scope="scope">
           <el-button
@@ -73,12 +69,13 @@
                 <el-button type="text" @click="form.titles = []">清空</el-button>
               </div>
               <el-tag
-                v-for="(title, index) in form.titles"
+                v-for="(titleObj, index) in form.titles"
                 :key="index"
                 closable
                 @close="removeTitle(index)"
                 class="title-tag">
-                {{ title }}
+                {{ titleObj.text }}
+                <span class="title-language">({{ getLanguageName(titleObj.language) }})</span>
               </el-tag>
             </div>
             <el-button type="primary" size="small" @click="showTitleSelectorDialog">添加标题</el-button>
@@ -116,6 +113,7 @@
 <script>
 import TextTableSelecter from '@/components/TextTableSelecter'
 import { getTitleGroupList, createTitleGroup, updateTitleGroup, deleteTitleGroup } from '@/api/titleGroup'
+import { getLanguageName } from '@/const/language'
 
 export default {
   name: 'TitleGroupManage',
@@ -150,6 +148,9 @@ export default {
     this.fetchData()
   },
   methods: {
+    // 获取语言名称
+    getLanguageName,
+    
     // 获取标题组列表
     fetchData() {
       this.loading = true
@@ -157,8 +158,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 || [];
+            
+            // 转换titles字段格式
+            data.forEach(item => {
+              if (item.titles && Array.isArray(item.titles)) {
+                item.titles = item.titles.map(this.formatTitleDisplay).filter(Boolean);
+              }
+            });
+            
+            this.tableData = data;
+            this.total = this.tableData.length;
           } else {
             this.$message.error('获取标题组列表失败')
           }
@@ -188,6 +199,18 @@ export default {
       this.fetchData()
     },
 
+    // 处理表格中显示的标题内容
+    formatTitleDisplay(titleObj) {
+      if (typeof titleObj === 'string') {
+        // 兼容旧格式：字符串
+        return { text: titleObj, language: 'en' };
+      } else if (titleObj && typeof titleObj === 'object') {
+        // 新格式：对象
+        return titleObj;
+      }
+      return null;
+    },
+
     // 显示新增对话框
     showAddDialog() {
       this.dialogTitle = '新增标题组'
@@ -208,7 +231,14 @@ export default {
     handleEdit(row) {
       this.dialogTitle = '编辑标题组'
       // 深拷贝避免直接修改表格数据
-      this.form = JSON.parse(JSON.stringify(row))
+      const formData = JSON.parse(JSON.stringify(row));
+      
+      // 处理titles字段，确保为新格式
+      if (formData.titles && Array.isArray(formData.titles)) {
+        formData.titles = formData.titles.map(this.formatTitleDisplay).filter(Boolean);
+      }
+      
+      this.form = formData;
       this.dialogVisible = true
       // 重置表单验证
       this.$nextTick(() => {
@@ -251,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))
+          
+          // 确保titles数组中的每个对象都有text和language属性
+          if (formData.titles && Array.isArray(formData.titles)) {
+            formData.titles = formData.titles.map(title => {
+              // 如果是字符串，转换为对象格式
+              if (typeof title === 'string') {
+                return { text: title, language: 'en' };
+              }
+              // 如果已经是对象但缺少language属性
+              if (typeof title === 'object' && title.text && !title.language) {
+                return { ...title, language: 'en' };
+              }
+              return title;
+            });
+          }
           
           const apiCall = isEdit 
             ? updateTitleGroup(formData.id, formData)
@@ -285,13 +331,25 @@ export default {
 
     // 确认标题选择
     confirmTitleSelection() {
-      // 提取文本内容并添加到标题列表
-      const newTitles = this.selectedTitles.map(item => item.text)
+      // 从TextTableSelecter获取的是完整的文案对象，已包含text和language属性
+      const newTitles = this.selectedTitles.map(item => ({
+        text: item.text,
+        language: item.language || 'en' // 如果没有语言字段，默认为英语
+      }))
+      
+      // 合并，避免重复添加相同的标题+语言组合
+      const uniqueTitles = [...this.form.titles]
+      
+      newTitles.forEach(newTitle => {
+        const isDuplicate = uniqueTitles.some(
+          existingTitle => existingTitle.text === newTitle.text && existingTitle.language === newTitle.language
+        )
+        if (!isDuplicate) {
+          uniqueTitles.push(newTitle)
+        }
+      })
       
-      // 合并去重
-      const uniqueTitles = [...new Set([...this.form.titles, ...newTitles])]
       this.form.titles = uniqueTitles
-      
       this.titleSelectorDialogVisible = false
     },
 
@@ -358,4 +416,17 @@ export default {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.title-text {
+  margin-right: 5px;
+}
+
+.language-tag {
+  margin-left: 5px;
+}
+
+.title-language {
+  font-size: 0.8em;
+  color: #909399;
+}
 </style>