Skip to content

Z
zxn-adputin
Commit b2002460 authored by lijin's avatar lijin
Browse files
Options

增加产品组管理

parent 1c8acfdb
Show whitespace changes
Inline Side-by-side
Showing with 529 additions and 2 deletions
src/api/appGroup.js 0 → 100644
View file @ b2002460
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 0 → 100644
View file @ b2002460
<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
View file @ b2002460
...@@ -82,7 +82,8 @@ export const constantRouterMap = [ ...@@ -82,7 +82,8 @@ export const constantRouterMap = [
name: "intelligentDelivery.campaign-template", name: "intelligentDelivery.campaign-template",
component: () => import('@/views/campaignTemplate/CampaignTemplateManage'), component: () => import('@/views/campaignTemplate/CampaignTemplateManage'),
meta: { title: '计划模板管理' } meta: { title: '计划模板管理' }
} },
] ]
}, },
{ {
...@@ -100,6 +101,14 @@ export const constantRouterMap = [ ...@@ -100,6 +101,14 @@ export const constantRouterMap = [
component: () => import("@/views/createMaterial"), component: () => import("@/views/createMaterial"),
meta: { title: "创意素材", icon: "chart" } meta: { title: "创意素材", icon: "chart" }
}, },
{
path: '/assetManagement/app-group',
name: "assetManagement.app-group",
component: () => import('@/views/appGroup/AppGroupManage'),
meta: { title: '产品组管理' }
},
{ {
path: "/tools/googleOauthYoutube", path: "/tools/googleOauthYoutube",
name: "tools.youtubeacountrights", name: "tools.youtubeacountrights",
......
src/views/appGroup/AppGroupManage.vue 0 → 100644
View file @ b2002460
<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
View file @ b2002460
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
<el-submenu index="4"> <el-submenu index="4">
<template slot="title">资产管理</template> <template slot="title">资产管理</template>
<el-menu-item index="/assetManagement/copywritingLibrary">文案管理</el-menu-item> <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> <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>
......
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