应用列表和地域列表ok

src/views/campaignTask/CampaignTaskManage.vue

@@ -194,11 +194,49 @@
           </el-form-item>
 
           <el-form-item label="应用组" prop="app_groups">
-            <app-group-selector v-model="form.app_groups" />
+            <app-group-selector v-model="form.app_groups" @change="handleAppGroupsChange" />
+            <!-- 展示应用组下的所有应用 -->
+            <div v-if="form.app_groups && form.app_groups.length > 0" class="group-detail-container">
+              <div class="group-detail-title">应用组中的应用列表</div>
+              <el-table :data="appListData" size="mini" border style="width: 100%">
+                <el-table-column prop="name" label="应用名称"></el-table-column>
+                <el-table-column prop="appId" label="应用ID"></el-table-column>
+                <el-table-column prop="platform" label="平台">
+                  <template slot-scope="scope">
+                    {{ scope.row.platform === 2 ? 'iOS' : (scope.row.platform === 3 ? 'Android' : '其他') }}
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" width="150" align="center">
+                  <template slot-scope="scope">
+                    <el-button type="text" size="small" @click="handleAppFilter(scope.row)">针对此应用</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
           </el-form-item>
 
           <el-form-item label="地域组" prop="location_groups">
-            <location-group-selector v-model="form.location_groups" />
+            <location-group-selector v-model="form.location_groups" @change="handleLocationGroupsChange" />
+            <!-- 展示已选地域组列表 -->
+            <div v-if="form.location_groups && form.location_groups.length > 0" class="group-detail-container">
+              <div class="group-detail-title">已选地域组列表</div>
+              <el-table :data="selectedLocationGroups" size="mini" border style="width: 100%">
+                <el-table-column prop="name" label="地域组名称"></el-table-column>
+                <el-table-column prop="id" label="地域组ID"></el-table-column>
+                <el-table-column label="国家数量">
+                  <template slot-scope="scope">
+                    {{ getLocationGroupCountries(scope.row).length }} 个国家
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" width="200" align="center">
+                  <template slot-scope="scope">
+                    <el-button type="text" size="small" @click="viewLocationGroup(scope.row)">查看</el-button>
+                    <el-button type="text" size="small" @click="editLocationGroup(scope.row)">修改</el-button>
+                    <el-button type="text" size="small" @click="removeLocationGroup(scope.row)">移除</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
           </el-form-item>
 
           <el-form-item label="素材组" prop="material_groups">
@@ -252,11 +290,11 @@
           </el-form-item>
 
           <el-form-item label="应用组" prop="app_groups">
-            <app-group-selector v-model="form.app_groups" />
+            <app-group-selector v-model="form.app_groups" @change="handleAppGroupsChange" />
           </el-form-item>
 
           <el-form-item label="地域组" prop="location_groups">
-            <location-group-selector v-model="form.location_groups" />
+            <location-group-selector v-model="form.location_groups" @change="handleLocationGroupsChange" />
           </el-form-item>
 
           <el-form-item label="素材组" prop="material_groups">
@@ -570,6 +608,8 @@ export default {
       materialGroupOptions: [],
       titleGroupOptions: [],
       descriptionGroupOptions: [],
+      appListData: [],
+      selectedLocationGroups: [],
     }
   },
   created() {
@@ -1037,6 +1077,17 @@ export default {
           this.form.material_groups = [...(template.material_groups || [])]
           this.form.title_groups = [...(template.title_groups || [])]
           this.form.description_groups = [...(template.description_groups || [])]
+          
+          // 主动触发应用列表和地域组列表的查询
+          this.$nextTick(() => {
+            if (this.form.app_groups && this.form.app_groups.length > 0) {
+              this.handleAppGroupsChange(this.form.app_groups);
+            }
+            
+            if (this.form.location_groups && this.form.location_groups.length > 0) {
+              this.handleLocationGroupsChange(this.form.location_groups);
+            }
+          });
         }
       } catch (error) {
         console.error('获取模板详情失败:', error)
@@ -1118,6 +1169,100 @@ export default {
         this.$message.warning('获取组选项数据失败，部分组信息可能无法正确显示')
       }
     },
+
+    handleAppGroupsChange(value) {
+      // 处理应用组变化后的逻辑
+      if (value && value.length > 0) {
+        this.fetchAppListData(value);
+      } else {
+        this.appListData = [];
+      }
+    },
+
+    async fetchAppListData(appGroupIds) {
+      try {
+        // 使用新接口直接获取应用组对应的应用列表
+        const response = await axios.post(process.env.PUTIN_API + '/apps/by-app-groups', {
+          appGroupIds: appGroupIds
+        });
+        
+        if (response.data && response.data.status === 200 && response.data.result && response.data.result.data) {
+          // 处理返回的应用数据
+          const apps = response.data.result.data;
+          
+          // 转换为组件需要的格式
+          this.appListData = apps.map(app => ({
+            name: app.appName,
+            appId: app.pkg,
+            platform: app.pkg.toLowerCase().includes('.ios') ? 2 : 3,
+            id: app.id,
+            description: app.description,
+            operateType: app.operateType
+          }));
+        } else {
+          console.error('获取应用组应用列表失败:', response);
+          this.$message.error('获取应用组应用列表失败');
+        }
+      } catch (error) {
+        console.error('获取应用组应用列表失败:', error);
+        this.$message.error('获取应用组应用列表失败');
+      }
+    },
+
+    handleLocationGroupsChange(value) {
+      // 处理地域组变化后的逻辑
+      if (value && value.length > 0) {
+        this.fetchSelectedLocationGroups(value);
+      } else {
+        this.selectedLocationGroups = [];
+      }
+    },
+
+    async fetchSelectedLocationGroups(locationGroupIds) {
+      try {
+        this.selectedLocationGroups = locationGroupIds.map(id => {
+          const group = this.locationGroupOptions.find(item => item.id === id);
+          return group || { id: id, name: `地域组 ${id}` };
+        });
+      } catch (error) {
+        console.error('获取地域组数据失败:', error);
+        this.$message.error('获取地域组数据失败');
+      }
+    },
+
+    viewLocationGroup(group) {
+      // 实现查看地域组详情逻辑
+      this.$alert(`地域组 "${group.name}" 详情`, '地域组详情', {
+        dangerouslyUseHTMLString: true,
+        customClass: 'location-group-detail-dialog'
+      });
+    },
+
+    editLocationGroup(group) {
+      // 实现编辑地域组逻辑
+      this.$router.push(`/location-group/edit/${group.id}`);
+    },
+
+    removeLocationGroup(group) {
+      // 实现从选中列表中移除地域组
+      const index = this.form.location_groups.indexOf(group.id);
+      if (index !== -1) {
+        this.form.location_groups.splice(index, 1);
+        this.handleLocationGroupsChange(this.form.location_groups);
+      }
+    },
+
+    getLocationGroupCountries(group) {
+      // 获取地域组国家列表
+      // 由于我们没有完整的API，这里返回一个模拟数据
+      return group.countries || [];
+    },
+
+    handleAppFilter(app) {
+      // 实现针对特定应用的过滤逻辑
+      this.$message.info(`已选择针对应用: ${app.name} (${app.appId})`);
+      // 这里可以实现实际的过滤逻辑
+    },
   }
 }
 </script>
@@ -1461,4 +1606,18 @@ export default {
     }
   }
 }
+
+.group-detail-container {
+  margin-top: 10px;
+  padding: 10px;
+  background-color: #fff;
+  border: 1px solid #EBEEF5;
+  border-radius: 4px;
+}
+
+.group-detail-title {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
 </style>