Commit 486f879e authored by hzl's avatar hzl

feat: 模版页面,新增模版添加下拉选择框

parent 5505c443
<template> <template>
<div class="resource-group-selector"> <div class="resource-group-selector">
<el-select <el-select
v-model="selectedGroups" v-model="selectedGroup"
multiple
filterable filterable
placeholder="请选择资源组" placeholder="请选择资源组"
@change="handleChange" @change="handleChange">
style="width: 100%">
<el-option <el-option
v-for="group in resourceGroups" v-for="group in resourceGroups"
:key="group.id" :key="group.id"
:label="group.name" :label="group.name"
:value="group.id"> :value="group.id">
<span style="float: left">{{ group.name }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ group.id }}</span>
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
</template> </template>
<script> <script>
import { getAllResourceGroups } from '@/api/resourceGroup' import { getResourceGroupList } from '@/api/resourceGroup'
export default { export default {
name: 'ResourceGroupSelector', name: 'ResourceGroupSelector',
props: { props: {
value: { value: {
type: Array, type: [Number, String],
default: () => [] default: null
} }
}, },
data() { data() {
return { return {
resourceGroups: [], resourceGroups: [],
selectedGroups: [] selectedGroup: null
} }
}, },
...@@ -43,7 +39,7 @@ export default { ...@@ -43,7 +39,7 @@ export default {
value: { value: {
immediate: true, immediate: true,
handler(newVal) { handler(newVal) {
this.selectedGroups = Array.isArray(newVal) ? [...newVal] : [] this.selectedGroup = newVal
} }
} }
}, },
...@@ -55,7 +51,7 @@ export default { ...@@ -55,7 +51,7 @@ export default {
methods: { methods: {
async fetchResourceGroups() { async fetchResourceGroups() {
try { try {
const response = await getAllResourceGroups() const response = await getResourceGroupList()
if (response.status === 200 && response.result && response.result.data) { if (response.status === 200 && response.result && response.result.data) {
this.resourceGroups = response.result.data this.resourceGroups = response.result.data
} else { } else {
...@@ -68,7 +64,7 @@ export default { ...@@ -68,7 +64,7 @@ export default {
}, },
handleChange(value) { handleChange(value) {
this.selectedGroups = value this.selectedGroup = value
this.$emit('input', value) this.$emit('input', value)
this.$emit('change', value) this.$emit('change', value)
} }
...@@ -77,7 +73,5 @@ export default { ...@@ -77,7 +73,5 @@ export default {
</script> </script>
<style scoped> <style scoped>
.resource-group-selector { /* 移除固定宽度,让下拉框与其他选择器保持一致 */
width: 100%;
}
</style> </style>
...@@ -139,6 +139,14 @@ ...@@ -139,6 +139,14 @@
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="资源组" width="150">
<template slot-scope="scope">
<el-tag v-if="scope.row.resource_group_id" type="success" size="small">
{{ getResourceGroupName(scope.row.resource_group_id) }}
</el-tag>
<span v-else style="color: #999; font-size: 12px;">未选择</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center"> <el-table-column label="操作" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
...@@ -370,6 +378,10 @@ ...@@ -370,6 +378,10 @@
<el-form-item label="描述组" prop="description_groups"> <el-form-item label="描述组" prop="description_groups">
<description-group-selector v-model="form.description_groups" /> <description-group-selector v-model="form.description_groups" />
</el-form-item> </el-form-item>
<el-form-item label="资源组" prop="resource_group_id">
<resource-group-selector v-model="form.resource_group_id" />
</el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button> <el-button @click="dialogVisible = false">取 消</el-button>
...@@ -385,6 +397,7 @@ import LocationGroupSelector from '@/components/GroupSelectors/LocationGroupSele ...@@ -385,6 +397,7 @@ import LocationGroupSelector from '@/components/GroupSelectors/LocationGroupSele
import MaterialGroupSelector from '@/components/GroupSelectors/MaterialGroupSelector' import MaterialGroupSelector from '@/components/GroupSelectors/MaterialGroupSelector'
import TitleGroupSelector from '@/components/GroupSelectors/TitleGroupSelector' import TitleGroupSelector from '@/components/GroupSelectors/TitleGroupSelector'
import DescriptionGroupSelector from '@/components/GroupSelectors/DescriptionGroupSelector' import DescriptionGroupSelector from '@/components/GroupSelectors/DescriptionGroupSelector'
import ResourceGroupSelector from '@/components/GroupSelectors/ResourceGroupSelector'
import axios from 'axios' import axios from 'axios'
import { getCampaignTemplateList, createCampaignTemplate, updateCampaignTemplate, deleteCampaignTemplate } from '@/api/campaignTemplate' import { getCampaignTemplateList, createCampaignTemplate, updateCampaignTemplate, deleteCampaignTemplate } from '@/api/campaignTemplate'
...@@ -395,7 +408,8 @@ export default { ...@@ -395,7 +408,8 @@ export default {
LocationGroupSelector, LocationGroupSelector,
MaterialGroupSelector, MaterialGroupSelector,
TitleGroupSelector, TitleGroupSelector,
DescriptionGroupSelector DescriptionGroupSelector,
ResourceGroupSelector
}, },
data() { data() {
return { return {
...@@ -427,6 +441,7 @@ export default { ...@@ -427,6 +441,7 @@ export default {
material_groups: [], material_groups: [],
title_groups: [], title_groups: [],
description_groups: [], description_groups: [],
resource_group_id: null,
// 初始化tiktok_json为对象而不是null // 初始化tiktok_json为对象而不是null
tiktok_json: { tiktok_json: {
optimizationGoal: 'VALUE', optimizationGoal: 'VALUE',
...@@ -544,7 +559,8 @@ export default { ...@@ -544,7 +559,8 @@ export default {
location: new Map(), location: new Map(),
material: new Map(), material: new Map(),
title: new Map(), title: new Map(),
description: new Map() description: new Map(),
resource: new Map()
}, },
// 新增:账户相关数据 // 新增:账户相关数据
advertiserOptions: [], advertiserOptions: [],
...@@ -706,12 +722,13 @@ export default { ...@@ -706,12 +722,13 @@ export default {
async fetchGroupNames() { async fetchGroupNames() {
try { try {
const [app, location, material, title, description] = await Promise.all([ const [app, location, material, title, description, resource] = await Promise.all([
axios.get(process.env.PUTIN_API + '/app-groups'), axios.get(process.env.PUTIN_API + '/app-groups'),
axios.get(process.env.PUTIN_API + '/location-groups'), axios.get(process.env.PUTIN_API + '/location-groups'),
axios.get(process.env.PUTIN_API + '/material-groups'), axios.get(process.env.PUTIN_API + '/material-groups'),
axios.get(process.env.PUTIN_API + '/title-groups'), axios.get(process.env.PUTIN_API + '/title-groups'),
axios.get(process.env.PUTIN_API + '/description-groups') axios.get(process.env.PUTIN_API + '/description-groups'),
axios.get('http://localhost:8567/resource-groups/list')
]) ])
app.data.result.data.forEach(item => this.groupNameMaps.app.set(item.id, item.name)) app.data.result.data.forEach(item => this.groupNameMaps.app.set(item.id, item.name))
...@@ -719,6 +736,11 @@ export default { ...@@ -719,6 +736,11 @@ export default {
material.data.result.data.forEach(item => this.groupNameMaps.material.set(item.id, item.name)) material.data.result.data.forEach(item => this.groupNameMaps.material.set(item.id, item.name))
title.data.result.data.forEach(item => this.groupNameMaps.title.set(item.id, item.name)) title.data.result.data.forEach(item => this.groupNameMaps.title.set(item.id, item.name))
description.data.result.data.forEach(item => this.groupNameMaps.description.set(item.id, item.name)) description.data.result.data.forEach(item => this.groupNameMaps.description.set(item.id, item.name))
// 处理资源组数据
if (resource.data && resource.data.result && resource.data.result.data) {
resource.data.result.data.forEach(item => this.groupNameMaps.resource.set(item.id, item.name))
}
} catch (error) { } catch (error) {
console.error('获取组名称失败:', error) console.error('获取组名称失败:', error)
} }
...@@ -739,6 +761,9 @@ export default { ...@@ -739,6 +761,9 @@ export default {
getDescriptionGroupName(id) { getDescriptionGroupName(id) {
return this.groupNameMaps.description.get(id) || id return this.groupNameMaps.description.get(id) || id
}, },
getResourceGroupName(id) {
return this.groupNameMaps.resource.get(id) || id
},
// 根据平台类型获取标签类型 // 根据平台类型获取标签类型
getPlatformTagType(type) { getPlatformTagType(type) {
...@@ -794,6 +819,7 @@ export default { ...@@ -794,6 +819,7 @@ export default {
material_groups: [], material_groups: [],
title_groups: [], title_groups: [],
description_groups: [], description_groups: [],
resource_group_id: null,
// 初始化为对象而不是null // 初始化为对象而不是null
tiktok_json: { tiktok_json: {
optimizationGoal: 'VALUE', optimizationGoal: 'VALUE',
...@@ -922,7 +948,8 @@ export default { ...@@ -922,7 +948,8 @@ export default {
location_groups: Array.isArray(row.location_groups) ? [...row.location_groups] : [], location_groups: Array.isArray(row.location_groups) ? [...row.location_groups] : [],
material_groups: Array.isArray(row.material_groups) ? [...row.material_groups] : [], material_groups: Array.isArray(row.material_groups) ? [...row.material_groups] : [],
title_groups: Array.isArray(row.title_groups) ? [...row.title_groups] : [], title_groups: Array.isArray(row.title_groups) ? [...row.title_groups] : [],
description_groups: Array.isArray(row.description_groups) ? [...row.description_groups] : [] description_groups: Array.isArray(row.description_groups) ? [...row.description_groups] : [],
resource_group_id: row.resource_group_id || null
}; };
// 使用Vue.set确保响应式更新 // 使用Vue.set确保响应式更新
...@@ -972,7 +999,8 @@ export default { ...@@ -972,7 +999,8 @@ export default {
location_groups: Array.isArray(this.form.location_groups) ? [...this.form.location_groups] : [], location_groups: Array.isArray(this.form.location_groups) ? [...this.form.location_groups] : [],
material_groups: Array.isArray(this.form.material_groups) ? [...this.form.material_groups] : [], material_groups: Array.isArray(this.form.material_groups) ? [...this.form.material_groups] : [],
title_groups: Array.isArray(this.form.title_groups) ? [...this.form.title_groups] : [], title_groups: Array.isArray(this.form.title_groups) ? [...this.form.title_groups] : [],
description_groups: Array.isArray(this.form.description_groups) ? [...this.form.description_groups] : [] description_groups: Array.isArray(this.form.description_groups) ? [...this.form.description_groups] : [],
resource_group_id: this.form.resource_group_id
}; };
// 如果是TikTok平台,处理tiktok_json // 如果是TikTok平台,处理tiktok_json
......
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