Skip to content

Z
zxn-adputin
Commit b09cceb3 authored by hzl's avatar hzl
Browse files
Options

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

parent dd18a2ca
Hide whitespace changes
Inline Side-by-side
Showing with 238 additions and 31 deletions
src/api/tiktokDevice.js 0 → 100644
View file @ b09cceb3
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/campaignTask/CampaignTaskManage.vue
View file @ b09cceb3
......@@ -187,6 +187,7 @@
<el-select
v-model="form.tiktok_json.advertiserId"
placeholder="请选择账户"
filterable
:loading="advertiserLoading"
@change="handleAdvertiserChange">
<el-option
......@@ -194,6 +195,8 @@
:key="item.advertiserId"
:label="item.advertiserName"
:value="item.advertiserId">
<span style="float: left">{{ item.advertiserName }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.advertiserId }}</span>
</el-option>
</el-select>
</el-form-item>
......@@ -272,17 +275,17 @@
</el-form-item>
<template v-if="!form.tiktok_json.isNewCampaign">
<el-form-item
label="选择已有计划"
prop="tiktok_json.campaignIdList"
v-if="form.tiktok_json.advertiserId">
<el-select
v-model="form.tiktok_json.campaignIdList"
multiple
filterable
placeholder="请输入计划名称搜索"
:loading="campaignListLoading"
style="width: 100%">
<el-form-item
label="选择已有计划"
prop="tiktok_json.campaignIdList"
v-if="form.tiktok_json.advertiserId">
<el-select
v-model="form.tiktok_json.campaignIdList"
multiple
filterable
placeholder="请输入计划名称搜索"
:loading="campaignListLoading"
style="width: 100%">
<el-option
v-for="item in campaignOptions"
:key="item.campaignId"
......@@ -294,6 +297,28 @@
</el-select>
</el-form-item>
</template>
<el-form-item
label="设备机型"
prop="tiktok_json.deviceModels"
v-if="form.tiktok_json.advertiserId">
<el-select
v-model="form.tiktok_json.deviceModels"
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="campaign_type">
......@@ -679,6 +704,7 @@ import DescriptionGroupSelector from '@/components/GroupSelectors/DescriptionGro
import ResourceGroupSelector from '@/components/GroupSelectors/ResourceGroupSelector'
import { getCampaignTaskList, createCampaignTask, updateCampaignTask, deleteCampaignTask, startCampaignTask } from '@/api/campaignTask'
import { getCampaignTemplateById } from '@/api/campaignTemplate'
import { getTikTokDeviceModels } from '@/api/tiktokDevice'
import axios from 'axios'
import moment from 'moment'
import {
......@@ -745,7 +771,8 @@ export default {
isSmart: false, // 添加isSmart字段,默认为false
isNewCampaign: true, // 是否新建计划
advertiserId: '', // 选中的广告主ID
campaignIdList: [] // 计划ID列表
campaignIdList: [], // 计划ID列表
deviceModels: [] // 设备机型列表
}
},
selectedTemplate: null,
......@@ -903,6 +930,9 @@ export default {
selectApps: [],
appsLoading: false,
campaignListLoading: false,
// 设备机型相关数据
deviceModelOptions: [],
deviceModelLoading: false,
campaignOptions: [], // 改为存储包含id和name的对象数组
// 新增：账户相关数据
advertiserOptions: [],
......@@ -1050,7 +1080,8 @@ export default {
isSmart: false, // 添加isSmart字段,默认为false
isNewCampaign: true, // 是否新建计划
advertiserId: '', // 选中的广告主ID
campaignIdList: [] // 计划ID列表
campaignIdList: [], // 计划ID列表
deviceModels: [] // 设备机型列表
}
}
......@@ -1099,7 +1130,8 @@ export default {
isSmart: false, // 添加isSmart字段,默认为false
isNewCampaign: true, // 是否新建计划
advertiserId: '', // 选中的广告主ID
campaignIdList: [] // 计划ID列表
campaignIdList: [], // 计划ID列表
deviceModels: [] // 设备机型列表
}
}
......@@ -1387,7 +1419,8 @@ export default {
isSmart: false,
isNewCampaign: true,
advertiserId: '',
campaignIdList: []
campaignIdList: [],
deviceModels: []
};
}
......@@ -1403,10 +1436,13 @@ export default {
isSmart: tiktokData.isSmart || false,
isNewCampaign: tiktokData.isNewCampaign !== undefined ? tiktokData.isNewCampaign : true,
advertiserId: tiktokData.advertiserId || '',
campaignIdList: Array.isArray(tiktokData.campaignIdList) ? tiktokData.campaignIdList : []
campaignIdList: Array.isArray(tiktokData.campaignIdList) ? tiktokData.campaignIdList : [],
deviceModels: Array.isArray(tiktokData.deviceModels) ? tiktokData.deviceModels : []
};
console.log('设置TikTok配置:', this.form.tiktok_json);
console.log('模板中的deviceModels:', tiktokData.deviceModels);
console.log('设置后的deviceModels:', this.form.tiktok_json.deviceModels);
} catch (error) {
console.error('解析TikTok配置失败:', error);
this.$message.warning('TikTok配置解析失败,使用默认值');
......@@ -1422,13 +1458,29 @@ export default {
isSmart: false,
isNewCampaign: true,
advertiserId: '',
campaignIdList: []
campaignIdList: [],
deviceModels: []
};
}
// 如果是TikTok平台，获取广告主列表
if (template.platform === 2) {
await this.fetchAdvertiserList();
// 在模板回显时不设置默认账户，保持模板中的账户设置
await this.fetchAdvertiserList(false);
// 如果模板中有advertiserId，需要确保账户列表加载完成后再设置
if (this.form.tiktok_json.advertiserId) {
// 等待账户列表加载完成，然后设置对应的账户
this.$nextTick(() => {
const selectedAdvertiser = this.advertiserOptions.find(
item => item.advertiserId === this.form.tiktok_json.advertiserId
);
if (selectedAdvertiser) {
// 触发账户变化，加载对应的计划列表和设备机型列表，但保留设备机型数据
this.handleAdvertiserChange(this.form.tiktok_json.advertiserId, true);
}
});
}
}
// 主动触发应用列表和地域组列表的查询
......@@ -1449,18 +1501,19 @@ export default {
},
// 获取广告主列表
async fetchAdvertiserList() {
async fetchAdvertiserList(shouldSetDefault = true) {
this.advertiserLoading = true;
try {
const response = await axios.get(process.env.PUTIN_API + '/campaign-tasks/getTiktokAdvertiserId');
if (response.data && response.data.status === 200) {
this.advertiserOptions = response.data.result.data || [];
// 如果有账户列表，默认选择第一个
if (this.advertiserOptions.length > 0) {
// 只有在需要设置默认值且当前没有选择账户时才设置第一个
if (shouldSetDefault && this.advertiserOptions.length > 0 && !this.form.tiktok_json.advertiserId) {
this.form.tiktok_json.advertiserId = this.advertiserOptions[0].advertiserId;
// 异步调用第一个账户的计划列表，不等待完成
// 异步调用第一个账户的计划列表和设备机型列表，不等待完成
this.fetchCampaignList(this.advertiserOptions[0].advertiserId);
this.fetchDeviceModelList(this.advertiserOptions[0].advertiserId);
}
} else {
this.$message.error(response.data.msg || '获取账户列表失败');
......@@ -1474,14 +1527,22 @@ export default {
},
// 处理广告主变化
async handleAdvertiserChange(advertiserId) {
async handleAdvertiserChange(advertiserId, preserveDeviceModels = false) {
if (!advertiserId) {
this.campaignOptions = [];
this.form.tiktok_json.campaignIdList = [];
this.deviceModelOptions = [];
this.form.tiktok_json.deviceModels = [];
return;
}
// 只有在不保留设备机型的情况下才清空（用户主动切换账户时）
if (!preserveDeviceModels) {
this.form.tiktok_json.deviceModels = [];
}
await this.fetchCampaignList(advertiserId);
await this.fetchDeviceModelList(advertiserId);
},
// 修改搜索处理方法
......@@ -1521,6 +1582,29 @@ export default {
}
},
// 获取设备机型列表
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);
} else {
this.$message.error(response.msg || '获取设备机型列表失败');
}
} catch (error) {
console.error('获取设备机型列表失败:', error);
this.$message.error('获取设备机型列表失败');
} finally {
this.deviceModelLoading = false;
}
},
// 处理平台变化
async handlePlatformChange(value) {
// 当平台改变时，重新验证日预算字段
......@@ -1534,7 +1618,7 @@ export default {
this.form.tiktok_json.advertiserId = '';
this.form.tiktok_json.campaignIdList = [];
// 获取广告主列表
await this.fetchAdvertiserList();
await this.fetchAdvertiserList(true);
}
},
......
src/views/campaignTemplate/CampaignTemplateManage.vue
View file @ b09cceb3
......@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment