Commit 486f879e authored by hzl's avatar hzl

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

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