增加计划模板管理页面

src/api/campaignTemplate.js

+import request from '@/utils/request'
+
+export function getCampaignTemplateList() {
+  return request({
+    url: process.env.PUTIN_API + '/campaign-templates',
+    method: 'get'
+  })
+}
+
+export function getCampaignTemplateById(id) {
+  return request({
+    url: process.env.PUTIN_API + `/campaign-templates/${id}`,
+    method: 'get'
+  })
+}
+
+export function createCampaignTemplate(data) {
+  return request({
+    url: process.env.PUTIN_API + '/campaign-templates',
+    method: 'post',
+    data
+  })
+}
+
+export function updateCampaignTemplate(data) {
+  return request({
+    url: process.env.PUTIN_API + '/campaign-templates',
+    method: 'put',
+    data
+  })
+}
+
+export function deleteCampaignTemplate(id) {
+  return request({
+    url: process.env.PUTIN_API + `/campaign-templates/${id}`,
+    method: 'delete'
+  })
+}

src/components/GroupSelectors/AppGroupSelector.vue

+<template>
+  <el-select
+    v-model="selectedValues"
+    multiple
+    filterable
+    clearable
+    placeholder="请选择应用组"
+    @change="handleChange"
+  >
+    <el-option
+      v-for="item in options"
+      :key="item.id"
+      :label="item.name"
+      :value="item.id"
+    />
+  </el-select>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'AppGroupSelector',
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      options: [],
+      selectedValues: []
+    }
+  },
+  watch: {
+    value: {
+      handler(newVal) {
+        this.selectedValues = newVal
+      },
+      immediate: true
+    }
+  },
+  created() {
+    this.fetchOptions()
+  },
+  methods: {
+    async fetchOptions() {
+      try {
+        const response = await axios.get(process.env.PUTIN_API + '/app-groups')
+        this.options = response.data
+      } catch (error) {
+        console.error('Failed to fetch app groups:', error)
+      }
+    },
+    handleChange(values) {
+      this.$emit('input', values)
+      this.$emit('change', values)
+    }
+  }
+}
+</script>

src/components/GroupSelectors/DescriptionGroupSelector.vue

+<template>
+  <el-select
+    v-model="selectedValues"
+    multiple
+    filterable
+    clearable
+    placeholder="请选择描述组"
+    @change="handleChange"
+  >
+    <el-option
+      v-for="item in options"
+      :key="item.id"
+      :label="item.name"
+      :value="item.id"
+    />
+  </el-select>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'DescriptionGroupSelector',
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      options: [],
+      selectedValues: []
+    }
+  },
+  watch: {
+    value: {
+      handler(newVal) {
+        this.selectedValues = newVal
+      },
+      immediate: true
+    }
+  },
+  created() {
+    this.fetchOptions()
+  },
+  methods: {
+    async fetchOptions() {
+      try {
+        const response = await axios.get('http://localhost:8567/description-groups')
+        this.options = response.data
+      } catch (error) {
+        console.error('Failed to fetch description groups:', error)
+      }
+    },
+    handleChange(values) {
+      this.$emit('input', values)
+      this.$emit('change', values)
+    }
+  }
+}
+</script>

src/components/GroupSelectors/LocationGroupSelector.vue

+<template>
+  <el-select
+    v-model="selectedValues"
+    multiple
+    filterable
+    clearable
+    placeholder="请选择地域组"
+    @change="handleChange"
+  >
+    <el-option
+      v-for="item in options"
+      :key="item.id"
+      :label="item.name"
+      :value="item.id"
+    />
+  </el-select>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'LocationGroupSelector',
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      options: [],
+      selectedValues: []
+    }
+  },
+  watch: {
+    value: {
+      handler(newVal) {
+        this.selectedValues = newVal
+      },
+      immediate: true
+    }
+  },
+  created() {
+    this.fetchOptions()
+  },
+  methods: {
+    async fetchOptions() {
+      try {
+        const response = await axios.get('http://localhost:8567/location-groups')
+        this.options = response.data
+      } catch (error) {
+        console.error('Failed to fetch location groups:', error)
+      }
+    },
+    handleChange(values) {
+      this.$emit('input', values)
+      this.$emit('change', values)
+    }
+  }
+}
+</script>

src/components/GroupSelectors/MaterialGroupSelector.vue

+<template>
+  <el-select
+    v-model="selectedValues"
+    multiple
+    filterable
+    clearable
+    placeholder="请选择素材组"
+    @change="handleChange"
+  >
+    <el-option
+      v-for="item in options"
+      :key="item.id"
+      :label="item.name"
+      :value="item.id"
+    />
+  </el-select>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'MaterialGroupSelector',
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      options: [],
+      selectedValues: []
+    }
+  },
+  watch: {
+    value: {
+      handler(newVal) {
+        this.selectedValues = newVal
+      },
+      immediate: true
+    }
+  },
+  created() {
+    this.fetchOptions()
+  },
+  methods: {
+    async fetchOptions() {
+      try {
+        const response = await axios.get(process.env.PUTIN_API + '/material-groups')
+        this.options = response.data
+      } catch (error) {
+        console.error('Failed to fetch material groups:', error)
+      }
+    },
+    handleChange(values) {
+      this.$emit('input', values)
+      this.$emit('change', values)
+    }
+  }
+}
+</script>

src/components/GroupSelectors/TitleGroupSelector.vue

+<template>
+  <el-select
+    v-model="selectedValues"
+    multiple
+    filterable
+    clearable
+    placeholder="请选择标题组"
+    @change="handleChange"
+  >
+    <el-option
+      v-for="item in options"
+      :key="item.id"
+      :label="item.name"
+      :value="item.id"
+    />
+  </el-select>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'TitleGroupSelector',
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      options: [],
+      selectedValues: []
+    }
+  },
+  watch: {
+    value: {
+      handler(newVal) {
+        this.selectedValues = newVal
+      },
+      immediate: true
+    }
+  },
+  created() {
+    this.fetchOptions()
+  },
+  methods: {
+    async fetchOptions() {
+      try {
+        const response = await axios.get(process.env.PUTIN_API + '/title-groups')
+        this.options = response.data
+      } catch (error) {
+        console.error('Failed to fetch title groups:', error)
+      }
+    },
+    handleChange(values) {
+      this.$emit('input', values)
+      this.$emit('change', values)
+    }
+  }
+}
+</script>

src/router/index.js

@@ -69,6 +69,13 @@ export const constantRouterMap = [
         component: () => import("@/views/createDelivery"),
         meta: { title: "创意投放", icon: "chart" }
       },
+
+      {
+        path: '/intelligentDelivery/campaign-template',
+        name: "intelligentDelivery.campaign-template",
+        component: () => import('@/views/campaignTemplate/CampaignTemplateManage'),
+        meta: { title: '计划模板管理' }
+      }
     ]
   },
   {
@@ -102,7 +109,8 @@ export const constantRouterMap = [
         name: "assetManagement.YoutubeVideoManage",
         component: () => import("@/views/uploadYoutube/YoutubeVideoManage"),
         meta: { title: "Youtube视频管理", icon: "chart" }
-      }
+      },
+      
     ]
   },
 

src/views/layout/Layout.vue

@@ -19,6 +19,7 @@
         <el-submenu index="2">
           <template slot="title">推广管理</template>
           <el-menu-item index="/intelligentDelivery/createDelivery">创建计划</el-menu-item>
+          <el-menu-item index="/intelligentDelivery/campaign-template">计划模板</el-menu-item>
         </el-submenu>
 
         <el-submenu index="3">