modified

src/views/campaignTask/CampaignTaskManage.vue

@@ -197,18 +197,22 @@
             <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>
+              <div class="group-detail-title">
+                应用组中的应用列表
+                <el-button type="primary" size="mini" @click="showAddAppDialog" icon="el-icon-plus" style="float: right;">添加应用</el-button>
+              </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="包名"></el-table-column>
-                <el-table-column prop="platform" label="平台">
+                
+                <el-table-column label="计划数" width="200" align="center">
                   <template slot-scope="scope">
-                    {{ scope.row.platform === 2 ? 'iOS' : (scope.row.platform === 3 ? 'Android' : '其他') }}
+                    <el-input-number v-model="scope.row.campaignCount" :min="1" @change="updateAppCampaignCount(scope.row, $event)" size="mini"></el-input-number>
                   </template>
                 </el-table-column>
-                <el-table-column label="计划数" width="200" align="center">
+                <el-table-column label="操作" width="80" align="center">
                   <template slot-scope="scope">
-                    <el-input-number v-model="scope.row.campaignCount" :min="1" @change="updateAppCampaignCount(scope.row, $event)" size="mini"></el-input-number>
+                    <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="removeApp(scope.row)"></el-button>
                   </template>
                 </el-table-column>
               </el-table>
@@ -491,6 +495,38 @@
       </span>
     </el-dialog>
 
+    <!-- 添加应用对话框 -->
+    <el-dialog
+      title="选择应用"
+      :visible.sync="addAppDialogVisible"
+      width="50%"
+    >
+      <div class="app-selector-container">
+        <el-form label-width="120px">
+          <el-form-item label="关联应用">
+            <el-select
+              v-model="selectedAppId"
+              filterable
+              placeholder="请选择关联应用"
+              style="width: 100%"
+            >
+              <el-option
+                v-for="item in selectApps"
+                :key="item.id"
+                :label="item.label"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="addAppDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="confirmAddApp" :disabled="!selectedAppId">确定</el-button>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -506,7 +542,9 @@ import { getCampaignTaskList, createCampaignTask, updateCampaignTask, deleteCamp
 import { getCampaignTemplateById } from '@/api/campaignTemplate'
 import axios from 'axios'
 import moment from 'moment'
-
+import {
+  getSelectApps
+} from "@/api/cloud";
 
 // 设置moment语言为中文
 moment.locale('zh-cn')
@@ -608,6 +646,11 @@ export default {
       descriptionGroupOptions: [],
       appListData: [],
       selectedLocationGroups: [],
+      selectedLocationGroupId: null,
+      addAppDialogVisible: false,
+      selectedAppId: '',
+      selectApps: [],
+      appsLoading: false,
     }
   },
   created() {
@@ -1075,13 +1118,13 @@ 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);
             }
@@ -1183,16 +1226,15 @@ export default {
         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,
@@ -1220,7 +1262,7 @@ export default {
         }
         return;
       }
-      
+
       // 更新计划数
       const index = this.appListData.findIndex(item => item.appId === app.appId);
       if (index !== -1) {
@@ -1241,17 +1283,17 @@ export default {
       try {
         // 打印地域组选项，便于调试
         console.log('地域组选项:', this.locationGroupOptions);
-        
-      
-        
+
+
+
         this.selectedLocationGroups = locationGroupIds.map(id => {
           // 确保ID为数字类型进行比较
           const numId = Number(id);
           // 尝试在选项中找到对应的地域组
           const group = this.locationGroupOptions.find(item => Number(item.id) === numId);
-          
+
           console.log(`查找地域组ID: ${id}, 找到: ${group}`);
-          
+
           if (group) {
             return {
               id: group.id,
@@ -1260,15 +1302,15 @@ export default {
               countryCodes: group.countryCodes || []
             };
           } else {
-            return { 
-              id: id, 
+            return {
+              id: id,
               name: `地域组 ${id}`,
               campaignCount: 1,
               countryCodes: []
             };
           }
         });
-        
+
         // 打印选中的地域组，便于调试
         console.log('选中的地域组:', this.selectedLocationGroups);
       } catch (error) {
@@ -1289,7 +1331,7 @@ export default {
         }
         return;
       }
-      
+
       // 更新计划数
       const index = this.selectedLocationGroups.findIndex(item => item.id === group.id);
       if (index !== -1) {
@@ -1311,12 +1353,21 @@ export default {
     },
 
     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);
-      }
+      this.$confirm(`确定要移除地域组 "${group.name}" 吗?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const index = this.form.location_groups.indexOf(Number(group.id));
+        if (index !== -1) {
+          this.form.location_groups.splice(index, 1);
+          // 更新地域组列表
+          this.handleLocationGroupsChange(this.form.location_groups);
+          this.$message.success('已移除地域组');
+        }
+      }).catch(() => {
+        // 取消操作
+      });
     },
 
     getLocationGroupCountries(group) {
@@ -1330,6 +1381,84 @@ export default {
       this.$message.info(`已选择针对应用: ${app.name} (${app.appId})`);
       // 这里可以实现实际的过滤逻辑
     },
+
+    showAddAppDialog() {
+      // 显示一个带有应用选择列表的弹窗，而不是简单的输入框
+      this.addAppDialogVisible = true;
+      // 如果还没有加载应用列表，则加载
+      if (!this.selectApps || this.selectApps.length === 0) {
+        this.fetchAppsForSelector();
+      }
+    },
+
+    async fetchAppsForSelector() {
+      try {
+        const params = {
+          platformId: 5,
+          menuCode: "game.Overview,android",
+        };
+        const response = await getSelectApps(params);
+        if (response.status === 200) {
+          this.selectApps = response.result.data || [];
+        }
+      } catch (error) {
+        console.error("获取应用列表失败:", error);
+        this.$message.error("获取应用列表失败");
+      }
+    },
+
+    
+    removeApp(app) {
+      this.$confirm(`确定要移除应用 "${app.name}" 吗?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const index = this.appListData.findIndex(item => item.appId === app.appId);
+        if (index !== -1) {
+          this.appListData.splice(index, 1);
+          this.$message.success('已移除应用');
+        }
+      }).catch(() => {
+        // 取消操作
+      });
+    },
+
+    // 确认添加选中的应用
+    confirmAddApp() {
+      if (!this.selectedAppId) {
+        this.$message.warning('请先选择一个应用');
+        return;
+      }
+
+      // 查找选中的应用信息
+      const appInfo = this.selectApps.find(app => app.id === this.selectedAppId);
+      if (!appInfo) {
+        this.$message.error('无法获取应用信息');
+        return;
+      }
+
+      // 检查是否已经存在
+      const exists = this.appListData.some(item => item.appId === appInfo.pkg || item.id === appInfo.id);
+      if (exists) {
+        this.$message.warning('该应用已经在列表中');
+        return;
+      }
+
+      // 添加到应用列表
+      this.appListData.push({
+        name: appInfo.label || appInfo.appName,  // 显示名称
+        appId: appInfo.value,                      // 包名
+        id: appInfo.id,                          // 应用ID
+        description: appInfo.description || '',  // 描述（如果有）
+        operateType: appInfo.operateType || '',  // 操作类型（如果有）
+        campaignCount: 1                         // 默认计划数为1
+      });
+
+      this.$message.success('添加应用成功');
+      this.addAppDialogVisible = false;
+      this.selectedAppId = '';
+    },
   }
 }
 </script>
@@ -1687,4 +1816,13 @@ export default {
   font-weight: bold;
   margin-bottom: 10px;
 }
+
+/* 应用选择器样式 */
+.app-selector-container {
+  padding: 10px;
+}
+
+.app-selector-container .el-select {
+  width: 100%;
+}
 </style>