feat: 处理选择多选机型逻辑

src/api/tiktokDevice.js

+import request from '@/utils/request'
+
+// 获取TikTok设备机型列表
+export function getTikTokDeviceModels(advertiserId) {
+  return request({
+    // url: '/tiktok/device/models',
+    url: `${process.env.PUTIN_API}/tiktok/device/models`,
+    method: 'get',
+    params: {
+      advertiserId: advertiserId
+    }
+  })
+}

src/views/campaignTemplate/CampaignTemplateManage.vue

@@ -372,6 +372,28 @@
                </el-option>
              </el-select>
            </el-form-item>
+
+           <el-form-item
+             label="设备机型"
+             prop="tiktok_json.deviceModels"
+             v-if="tiktokAdvertiserId">
+             <el-select
+               v-model="tiktokDeviceModels"
+               multiple
+               filterable
+               placeholder="请选择设备机型"
+               :loading="deviceModelLoading"
+               style="width: 100%">
+               <el-option
+                 v-for="item in deviceModelOptions"
+                 :key="item.device_model_id"
+                 :label="item.device_model_name"
+                 :value="item.device_model_id">
+                 <span style="float: left">{{ item.device_model_name }}</span>
+                 <span style="float: right; color: #8492a6; font-size: 13px">{{ item.device_model_id }}</span>
+               </el-option>
+             </el-select>
+           </el-form-item>
          </template>
 
         <el-form-item label="应用组" prop="app_groups">
@@ -415,6 +437,7 @@ import DescriptionGroupSelector from '@/components/GroupSelectors/DescriptionGro
 import ResourceGroupSelector from '@/components/GroupSelectors/ResourceGroupSelector'
 import axios from 'axios'
 import { getCampaignTemplateList, createCampaignTemplate, updateCampaignTemplate, deleteCampaignTemplate } from '@/api/campaignTemplate'
+import { getTikTokDeviceModels } from '@/api/tiktokDevice'
 
 export default {
   name: 'CampaignTemplateManage',
@@ -469,7 +492,8 @@ export default {
            isSmart: false,
            isNewCampaign: true,
            advertiserId: '',
-           campaignIdList: []
+           campaignIdList: [],
+           deviceModels: []
          }
       },
       rules: {
@@ -581,7 +605,10 @@ export default {
        advertiserOptions: [],
        advertiserLoading: false,
        campaignOptions: [],
-       campaignListLoading: false
+       campaignListLoading: false,
+       // 设备机型相关数据
+       deviceModelOptions: [],
+       deviceModelLoading: false
     }
   },
   computed: {
@@ -706,6 +733,17 @@ export default {
         }
         this.form.tiktok_json.campaignIdList = value
       }
+    },
+    tiktokDeviceModels: {
+      get() {
+        return this.form.tiktok_json ? this.form.tiktok_json.deviceModels : []
+      },
+      set(value) {
+        if (!this.form.tiktok_json) {
+          this.form.tiktok_json = {}
+        }
+        this.form.tiktok_json.deviceModels = value
+      }
     }
   },
   created() {
@@ -847,7 +885,8 @@ export default {
            isSmart: false,
            isNewCampaign: true,
            advertiserId: '',
-           campaignIdList: []
+           campaignIdList: [],
+           deviceModels: []
          }
              }
        this.dialogVisible = true
@@ -919,7 +958,8 @@ export default {
          isSmart: false,
          isNewCampaign: true,
          advertiserId: '',
-         campaignIdList: []
+         campaignIdList: [],
+         deviceModels: []
        };
 
       if (row.platform === 2) {
@@ -945,7 +985,8 @@ export default {
                isSmart: typeof parsedData.isSmart === 'boolean' ? parsedData.isSmart : false,
                isNewCampaign: typeof parsedData.isNewCampaign === 'boolean' ? parsedData.isNewCampaign : true,
                advertiserId: parsedData.advertiserId || '',
-               campaignIdList: Array.isArray(parsedData.campaignIdList) ? [...parsedData.campaignIdList] : []
+               campaignIdList: Array.isArray(parsedData.campaignIdList) ? [...parsedData.campaignIdList] : [],
+               deviceModels: Array.isArray(parsedData.deviceModels) ? [...parsedData.deviceModels] : []
              };
           }
         } catch (error) {
@@ -1029,7 +1070,8 @@ export default {
                isSmart: this.tiktokIsSmart,
                isNewCampaign: this.tiktokIsNewCampaign,
                advertiserId: this.tiktokAdvertiserId,
-               campaignIdList: Array.isArray(this.tiktokCampaignIdList) ? [...this.tiktokCampaignIdList] : []
+               campaignIdList: Array.isArray(this.tiktokCampaignIdList) ? [...this.tiktokCampaignIdList] : [],
+               deviceModels: Array.isArray(this.tiktokDeviceModels) ? [...this.tiktokDeviceModels] : []
              };
             
             console.log('提交前的TikTok数据:', tiktokData);
@@ -1115,8 +1157,9 @@ export default {
            // 如果有账户列表，默认选择第一个
            if (this.advertiserOptions.length > 0) {
              this.tiktokAdvertiserId = this.advertiserOptions[0].advertiserId;
-             // 异步调用第一个账户的计划列表，不等待完成
+             // 异步调用第一个账户的计划列表和设备机型列表，不等待完成
              this.fetchCampaignList(this.advertiserOptions[0].advertiserId);
+             this.fetchDeviceModelList(this.advertiserOptions[0].advertiserId);
            }
          } else {
            this.$message.error(response.data.msg || '获取账户列表失败');
@@ -1134,10 +1177,21 @@ export default {
        if (!advertiserId) {
          this.campaignOptions = [];
          this.tiktokCampaignIdList = [];
+         this.deviceModelOptions = [];
+         this.tiktokDeviceModels = [];
          return;
        }
 
+       // 切换账户时清空之前选择的设备机型
+       this.tiktokDeviceModels = [];
+
        await this.fetchCampaignList(advertiserId);
+       await this.fetchDeviceModelList(advertiserId);
+       
+       // 如果是新增模板，在获取设备机型列表后设置默认值
+       if (!this.form.id) {
+         this.setDefaultDeviceModels();
+       }
      },
 
      // 获取计划列表
@@ -1164,6 +1218,62 @@ export default {
          this.campaignListLoading = false;
        }
      },
+
+     // 获取设备机型列表
+     async fetchDeviceModelList(advertiserId) {
+       if (!advertiserId) return;
+
+       this.deviceModelLoading = true;
+       try {
+         const response = await getTikTokDeviceModels(advertiserId);
+         console.log('设备机型接口响应:', response);
+         if (response.status === 200) {
+           // 根据实际返回的数据结构，数据在 response.result.data.data.device_models 中
+           this.deviceModelOptions = (response.result && response.result.data && response.result.data.data && response.result.data.data.device_models) || [];
+           console.log('设备机型列表:', this.deviceModelOptions);
+           
+           // 如果是新增模板（没有ID），设置默认选中的设备机型
+           if (!this.form.id) {
+             this.setDefaultDeviceModels();
+           }
+         } else {
+           this.$message.error(response.msg || '获取设备机型列表失败');
+         }
+       } catch (error) {
+         console.error('获取设备机型列表失败:', error);
+         this.$message.error('获取设备机型列表失败');
+       } finally {
+         this.deviceModelLoading = false;
+       }
+     },
+
+     // 设置默认设备机型
+     setDefaultDeviceModels() {
+       // 默认选中的设备机型ID列表
+       const defaultDeviceModelIds = [
+         '298', // Discovery
+         '177', // Google
+         '203', // ITEL
+         '145', // Motorola
+         '172', // Nokia
+         '181', // RealMe
+         '109', // Samsung
+         '114', // TECNO
+         '125', // Zen Admire Unity
+         '130'  // ZTE
+       ];
+       
+       // 检查哪些默认机型在当前可选项中存在
+       const availableDefaultIds = defaultDeviceModelIds.filter(id => 
+         this.deviceModelOptions.some(device => device.device_model_id === id)
+       );
+       
+       // 设置默认选中的设备机型
+       if (availableDefaultIds.length > 0) {
+         this.tiktokDeviceModels = availableDefaultIds;
+         console.log('设置默认设备机型:', availableDefaultIds);
+       }
+     },
   }
 }
 </script>