增加产品组管理

src/api/appGroup.js

+import request from '@/utils/request'
+
+const baseUrl = '/app-groups'
+
+// 获取所有产品组
+export function getAppGroupList(params) {
+  return request({
+    url: process.env.PUTIN_API + baseUrl,
+    method: 'get',
+    params
+  })
+}
+
+// 根据ID获取产品组
+export function getAppGroupById(id) {
+  return request({
+    url: process.env.PUTIN_API + `${baseUrl}/${id}`,
+    method: 'get'
+  })
+}
+
+// 创建产品组
+export function createAppGroup(data) {
+  return request({
+    url: process.env.PUTIN_API + baseUrl,
+    method: 'post',
+    data
+  })
+}
+
+// 更新产品组
+export function updateAppGroup(data) {
+  return request({
+    url: process.env.PUTIN_API + `${baseUrl}/${data.id}`,
+    method: 'put',
+    data
+  })
+}
+
+// 删除产品组
+export function deleteAppGroup(id) {
+  return request({
+    url: process.env.PUTIN_API + `${baseUrl}/${id}`,
+    method: 'delete'
+  })
+}
+
+// 获取所有APP列表
+export function getAllApps() {
+  return request({
+    url: process.env.PUTIN_API + '/apps',
+    method: 'get'
+  })
+}

src/components/AppTransfer/index.vue

+<template>
+  <div class="app-transfer">
+    <el-transfer
+      v-model="selectedApps"
+      :data="appOptions"
+      :titles="['可选产品', '已选产品']"
+      :props="{
+        key: 'pkg',
+        label: 'appName'
+      }"
+      filterable
+      filter-placeholder="请输入产品名称"
+      @change="handleChange"
+    ></el-transfer>
+  </div>
+</template>
+
+<script>
+import { getAllApps } from '@/api/appGroup'
+
+export default {
+  name: 'AppTransfer',
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      appOptions: [],
+      selectedApps: []
+    }
+  },
+  watch: {
+    value: {
+      handler(newVal) {
+        this.selectedApps = newVal || []
+      },
+      immediate: true
+    }
+  },
+  created() {
+    this.fetchApps()
+  },
+  methods: {
+    async fetchApps() {
+      try {
+        const response = await getAllApps()
+        console.log('AppTransfer获取产品列表响应:', response)
+        
+        if (response.status === 200 && response.result && response.result.data) {
+          // 确保数据格式正确
+          this.appOptions = response.result.data.map(app => ({
+            pkg: app.pkg,
+            appName: app.appName
+          }))
+          console.log('AppTransfer处理后的产品列表:', this.appOptions)
+        } else {
+          console.error('获取产品列表失败:', response)
+        }
+      } catch (error) {
+        console.error('获取产品列表失败:', error)
+      }
+    },
+    handleChange(value) {
+      this.$emit('input', value)
+      this.$emit('change', value)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-transfer {
+  margin: 10px 0;
+}
+
+.el-transfer {
+  width: 100%;
+}
+
+.el-transfer-panel {
+  width: 45%;
+}
+</style>

src/router/index.js

@@ -82,7 +82,8 @@ export const constantRouterMap = [
         name: "intelligentDelivery.campaign-template",
         component: () => import('@/views/campaignTemplate/CampaignTemplateManage'),
         meta: { title: '计划模板管理' }
-      }
+      },
+      
     ]
   },
   {
@@ -100,6 +101,14 @@ export const constantRouterMap = [
         component: () => import("@/views/createMaterial"),
         meta: { title: "创意素材", icon: "chart" }
       },
+
+      {
+        path: '/assetManagement/app-group',
+        name: "assetManagement.app-group",
+        component: () => import('@/views/appGroup/AppGroupManage'),
+        meta: { title: '产品组管理' }
+      },
+
       {
         path: "/tools/googleOauthYoutube",
         name: "tools.youtubeacountrights",

src/views/appGroup/AppGroupManage.vue

+<template>
+  <div class="app-group-container">
+    <!-- 过滤器部分 -->
+    <!-- <div class="filter-section">
+      <el-form :inline="true" :model="condition" class="filter-form">
+        <el-form-item label="产品组名称">
+          <el-input
+            v-model="condition.name"
+            placeholder="请输入产品组名称"
+            class="filter-input"
+            @change="fetchData">
+          </el-input>
+        </el-form-item>
+      </el-form>
+    </div> -->
+
+    <!-- <el-divider></el-divider> -->
+
+    <!-- 表格头部操作 -->
+    <div class="header-actions">
+      <el-button type="primary" @click="showAddDialog">新增产品组</el-button>
+      <div class="header-right">
+        <el-button icon="el-icon-refresh" @click="fetchData">刷新</el-button>
+      </div>
+    </div>
+
+    <!-- 主表格 -->
+    <el-table
+      :data="tableData"
+      border
+      style="width: 100%;"
+      v-loading="loading">
+      <el-table-column prop="id" label="ID" width="80"></el-table-column>
+      <el-table-column prop="name" label="名称" width="250"></el-table-column>
+      <el-table-column label="产品" min-width="300">
+        <template slot-scope="scope">
+          <div v-for="(pkg, index) in scope.row.pkgs || []" :key="index" class="app-item">
+            {{ getAppName(pkg) }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" label="创建时间" width="180">
+        <template slot-scope="scope">
+          {{ formatDate(scope.row.createdAt) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="180">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="primary"
+            @click="handleEdit(scope.row)">编辑</el-button>
+          <el-button
+            size="mini"
+            type="danger"
+            @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <div class="pagination-container">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        :total="total"
+        layout="total, prev, pager, next, sizes">
+      </el-pagination>
+    </div>
+
+    <!-- 新增/编辑对话框 -->
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%">
+      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
+        <el-form-item label="产品组名称" prop="name">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+
+        <el-form-item label="选择产品" prop="pkgs">
+          <app-transfer v-model="form.pkgs" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import AppTransfer from '@/components/AppTransfer'
+import { getAppGroupList, createAppGroup, updateAppGroup, deleteAppGroup, getAllApps } from '@/api/appGroup'
+
+export default {
+  name: 'AppGroupManage',
+  components: {
+    AppTransfer
+  },
+  data() {
+    return {
+      condition: {
+        name: ''
+      },
+      loading: false,
+      tableData: [],
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      dialogVisible: false,
+      dialogTitle: '',
+      form: {
+        name: '',
+        pkgs: []
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入产品组名称', trigger: 'blur' }
+        ],
+        pkgs: [
+          { type: 'array', required: true, message: '请至少选择一个产品', trigger: 'change' }
+        ]
+      },
+      appMap: new Map() // 存储包名和产品名称的映射
+    }
+  },
+  created() {
+    this.fetchData()
+    this.fetchApps()
+  },
+  methods: {
+    async fetchData() {
+      this.loading = true
+      try {
+        const response = await getAppGroupList({
+          page: this.currentPage,
+          size: this.pageSize,
+          name: this.condition.name
+        })
+        
+        if (response && Array.isArray(response)) {
+          this.tableData = response
+          this.total = response.length
+        } else if (response && response.status === 200 && response.result) {
+          this.tableData = response.result.data || []
+          this.total = response.result.total || 0
+        } else {
+          this.$message.error('获取数据失败')
+        }
+      } catch (error) {
+        console.error('获取数据失败:', error)
+        this.$message.error('获取数据失败')
+      }
+      this.loading = false
+    },
+
+    async fetchApps() {
+      try {
+        const response = await getAllApps()
+        console.log('产品列表响应:', response)
+        
+        if (response.status === 200 && response.result && response.result.data) {
+          const apps = response.result.data
+          console.log('产品列表:', apps)
+          
+          // 清空当前映射
+          this.appMap.clear()
+          
+          // 遍历数组并正确存储每个产品的包名和名称
+          apps.forEach(app => {
+            if (app && app.pkg && app.appName) {
+              console.log('添加产品映射:', app.pkg, app.appName)
+              this.appMap.set(app.pkg, app.appName)
+            }
+          })
+        }
+      } catch (error) {
+        console.error('获取产品列表失败:', error)
+      }
+    },
+
+    getAppName(pkg) {
+      return this.appMap.get(pkg) || pkg
+    },
+
+    formatDate(timestamp) {
+      if (!timestamp) return ''
+      const date = new Date(timestamp)
+      
+      // u683cu5f0fu5316u4e3a YYYY-MM-DD HH:MM:SS
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      const hours = String(date.getHours()).padStart(2, '0')
+      const minutes = String(date.getMinutes()).padStart(2, '0')
+      const seconds = String(date.getSeconds()).padStart(2, '0')
+      
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+    },
+
+    handleSizeChange(val) {
+      this.pageSize = val
+      this.currentPage = 1
+      this.fetchData()
+    },
+
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this.fetchData()
+    },
+
+    showAddDialog() {
+      this.dialogTitle = '新增产品组'
+      this.form = {
+        name: '',
+        pkgs: []
+      }
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        this.$refs.form && this.$refs.form.clearValidate()
+      })
+    },
+
+    handleEdit(row) {
+      this.dialogTitle = '编辑产品组'
+      this.form = {
+        id: row.id,
+        name: row.name,
+        pkgs: row.pkgs || []
+      }
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        this.$refs.form && this.$refs.form.clearValidate()
+      })
+    },
+
+    async handleDelete(row) {
+      try {
+        await this.$confirm('确认删除该产品组吗？', '提示', {
+          type: 'warning'
+        })
+        
+        const response = await deleteAppGroup(row.id)
+        if (response.status === 200) {
+          this.$message.success('删除成功')
+          this.fetchData()
+        } else {
+          this.$message.error(response.msg || '删除失败')
+        }
+      } catch (error) {
+        if (error !== 'cancel') {
+          console.error('删除失败:', error)
+          this.$message.error('删除失败')
+        }
+      }
+    },
+
+    async submitForm() {
+      this.$refs.form.validate(async (valid) => {
+        if (valid) {
+          const formData = {
+            ...this.form
+          }
+
+          try {
+            let response
+            if (formData.id) {
+              response = await updateAppGroup(formData)
+            } else {
+              response = await createAppGroup(formData)
+            }
+
+            if (response.status === 200) {
+              this.$message.success(formData.id ? '更新成功' : '创建成功')
+              this.dialogVisible = false
+              this.fetchData()
+            } else {
+              this.$message.error(response.msg || (formData.id ? '更新失败' : '创建失败'))
+            }
+          } catch (error) {
+            console.error(formData.id ? '更新失败:' : '创建失败:', error)
+            this.$message.error(formData.id ? '更新失败' : '创建失败')
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-group-container {
+  padding: 20px;
+}
+
+.filter-section {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 4px;
+}
+
+.filter-form {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.filter-input {
+  width: 200px;
+}
+
+.header-actions {
+  margin: 20px 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.header-right {
+  display: flex;
+  gap: 10px;
+}
+
+.app-item {
+  margin-bottom: 5px;
+  line-height: 1.5;
+}
+
+.el-table--enable-row-hover .el-table__body tr:hover > td {
+  background-color: #f5f7fa;
+}
+
+.el-button--primary {
+  background-color: #1890ff;
+  border-color: #1890ff;
+}
+
+.el-button--primary:hover,
+.el-button--primary:focus {
+  background-color: #40a9ff;
+  border-color: #40a9ff;
+}
+
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+  padding: 10px 0;
+}
+
+.el-pagination {
+  font-weight: normal;
+}
+
+.el-pagination .el-select .el-input {
+  width: 110px;
+}
+
+.el-pagination .el-select .el-input__inner {
+  padding-right: 25px;
+}
+
+.el-pagination .btn-prev,
+.el-pagination .btn-next {
+  background: transparent;
+}
+
+.el-pagination .el-pager li {
+  background: transparent;
+  border: none;
+}
+
+.el-pagination .el-pager li.active {
+  color: #1890ff;
+  background-color: #e6f7ff;
+  border-radius: 2px;
+}
+</style>

src/views/layout/Layout.vue

@@ -27,7 +27,7 @@
         <el-submenu index="4">
           <template slot="title">资产管理</template>
           <el-menu-item index="/assetManagement/copywritingLibrary">文案管理</el-menu-item>
-          <el-menu-item index="/assetManagement/campaign-template">产品组</el-menu-item>
+          <el-menu-item index="/assetManagement/app-group">产品组管理</el-menu-item>
           <el-menu-item index="/assetManagement/createDelivery">地域组</el-menu-item>
           <el-menu-item index="/assetManagement/createDelivery">素材组</el-menu-item>
           <el-menu-item index="/assetManagement/createDelivery">标题组</el-menu-item>