Skip to content

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

修改布局

parent 32d1f7d7
Hide whitespace changes
Inline Side-by-side
Showing with 258 additions and 137 deletions
src/api/report.js
View file @ 4e5d4494
...@@ -505,10 +505,10 @@ export function getMaterialDirectoriesTree() { ...@@ -505,10 +505,10 @@ export function getMaterialDirectoriesTree() {
}) })
} }
export function getDirectoryById(params) { export function fetchMaterials(params) {
return request({ return request({
// url: 'http://localhost:8567/material/business/youtube/getDirectoryById', // url: 'http://localhost:8567/material/business/youtube/getDirectoryById',
url: process.env.PUTIN_API + '/material/business/youtube/getDirectoryById', url: process.env.PUTIN_API + '/material/business/youtube/fetchMaterials',
method: 'get', method: 'get',
params params
}) })
......
src/styles/sidebar.scss
View file @ 4e5d4494
...@@ -3,6 +3,8 @@ ...@@ -3,6 +3,8 @@
// 主体区域 Main container // 主体区域 Main container
.main-container { .main-container {
min-height: 100%; min-height: 100%;
margin: 0 auto;
padding: 0 36px;
transition: margin-left .28s; transition: margin-left .28s;
margin-left: $sideBarWidth; margin-left: $sideBarWidth;
position: relative; position: relative;
...@@ -87,7 +89,7 @@ ...@@ -87,7 +89,7 @@
} }
.main-container { .main-container {
margin-left: 36px; margin-left: 0px;
} }
.submenu-title-noDropdown { .submenu-title-noDropdown {
......
src/views/authAccount/googleOauthYoutube.vue
View file @ 4e5d4494
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form inline> <div class="channel-management">
<el-form-item label="别名:"> <div class="header-section">
<el-input v-model="alias" placeholder="请输入别名"></el-input> <el-button type="primary" class="add-button" @click="authorize()" >添加频道</el-button>
</el-form-item> <div class="info-text">
<el-form-item> <i class="el-icon-info"></i>
<el-button type="primary" @click="authorize()" :disabled="!alias">请求授权</el-button> <span>当前公共主体已授权2个，上限为15个，如有问题，请联系系统管理员</span>
</el-form-item> </div>
</el-form> </div>
<!-- <p v-if="authCode">授权码: {{ authCode }}</p>-->
<!-- <p v-if="accessToken">访问令牌: {{ accessToken }}</p>-->
<!-- <p v-if="refreshToken">刷新令牌: {{ refreshToken }}</p>-->
<el-table :data="tokenList" style="width: 100%" border>
<el-table-column prop="id" label="ID" width="50"></el-table-column>
<!-- <el-table-column prop="appName" label="应用名" ></el-table-column>-->
<!-- <el-table-column prop="pkg" label="包名"></el-table-column>-->
<el-table-column prop="alias" label="别名"></el-table-column>
<el-table-column prop="access_token" label="访问密钥"></el-table-column>
<el-table-column prop="refresh_token" label="刷新密钥"></el-table-column>
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<el-button type="primary" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
<el-table-column prop="create_time" label="创建时间" :formatter="formatDate"></el-table-column>
<el-table-column prop="update_time" label="更改时间":formatter="formatDate"></el-table-column>
</el-table>
<!--&lt;!&ndash; <p v-if="authCode">授权码: {{ authCode }}</p>&ndash;&gt;-->
<!--&lt;!&ndash; <p v-if="accessToken">访问令牌: {{ accessToken }}</p>&ndash;&gt;-->
<!--&lt;!&ndash; <p v-if="refreshToken">刷新令牌: {{ refreshToken }}</p>&ndash;&gt;av-->
<el-table :data="tokenList" style="width: 100%" border >
<!-- <el-table-column prop="id" label="ID" width="50"></el-table-column>-->
<!--&lt;!&ndash; <el-table-column prop="appName" label="应用名" ></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash; <el-table-column prop="pkg" label="包名"></el-table-column>&ndash;&gt;-->
<!-- <el-table-column prop="alias" label="别名"></el-table-column>-->
<!-- <el-table-column prop="access_token" label="访问密钥"></el-table-column>-->
<!-- <el-table-column prop="refresh_token" label="刷新密钥"></el-table-column>-->
<!-- <el-table-column label="操作" width="100">-->
<!-- <template slot-scope="scope">-->
<!-- <el-button type="primary" @click="handleDelete(scope.row)">删除</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column prop="create_time" label="创建时间" :formatter="formatDate"></el-table-column>-->
<!-- <el-table-column prop="update_time" label="更改时间":formatter="formatDate"></el-table-column>-->
<!-- <el-table-column prop="id" label="id" width="50"></el-table-column>-->
<el-table-column
prop="alias"
label="频道名称"
width="180">
</el-table-column>
<el-table-column
prop="id"
label="频道ID"
width="1000">
</el-table-column>
<el-table-column
label="操作"
width="150">
<template slot-scope="scope">
<el-button type="text" size="small" class="operation-btn">编辑</el-button>
<el-button type="text" size="small" class="operation-btn" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
<el-table-column
prop="operater"
label="所属人员"
width="180">
</el-table-column>
<el-table-column
prop="create_time"
:formatter="formatDate"
label="添加时间">
</el-table-column>
</el-table>
</div>
</div> </div>
</template> </template>
...@@ -82,12 +112,12 @@ export default { ...@@ -82,12 +112,12 @@ export default {
}, },
methods: { methods: {
authorize() { authorize() {
if (!this.alias){ // if (!this.alias){
this.$message.error("别名不能为空") // this.$message.error("别名不能为空")
return; // return;
} // }
const alias=this.alias; // const alias=this.alias;
const state = alias; const state = "auth";
const redirectUri = `https://putinapi.zhangxindiet.com/youtube/add/getRefreshToken`; const redirectUri = `https://putinapi.zhangxindiet.com/youtube/add/getRefreshToken`;
const clientId ='797378266354-sd6e02o2qpdk2rhsb0ltjc98i5k9l2co.apps.googleusercontent.com' const clientId ='797378266354-sd6e02o2qpdk2rhsb0ltjc98i5k9l2co.apps.googleusercontent.com'
const scope = 'https://www.googleapis.com/auth/youtube https://www.googleapis.com/auth/youtube.readonly https://www.googleapis.com/auth/youtubepartner https://www.googleapis.com/auth/yt-analytics-monetary.readonly https://www.googleapis.com/auth/yt-analytics.readonly https://www.googleapis.com/auth/youtube https://www.googleapis.com/auth/youtube.channel-memberships.creator https://www.googleapis.com/auth/youtube.force-ssl https://www.googleapis.com/auth/youtube.readonly https://www.googleapis.com/auth/youtube.upload https://www.googleapis.com/auth/youtubepartner https://www.googleapis.com/auth/youtubepartner-channel-audit https://www.googleapis.com/auth/yt-analytics-monetary.readonly https://www.googleapis.com/auth/yt-analytics.readonly'; const scope = 'https://www.googleapis.com/auth/youtube https://www.googleapis.com/auth/youtube.readonly https://www.googleapis.com/auth/youtubepartner https://www.googleapis.com/auth/yt-analytics-monetary.readonly https://www.googleapis.com/auth/yt-analytics.readonly https://www.googleapis.com/auth/youtube https://www.googleapis.com/auth/youtube.channel-memberships.creator https://www.googleapis.com/auth/youtube.force-ssl https://www.googleapis.com/auth/youtube.readonly https://www.googleapis.com/auth/youtube.upload https://www.googleapis.com/auth/youtubepartner https://www.googleapis.com/auth/youtubepartner-channel-audit https://www.googleapis.com/auth/yt-analytics-monetary.readonly https://www.googleapis.com/auth/yt-analytics.readonly';
...@@ -102,7 +132,8 @@ export default { ...@@ -102,7 +132,8 @@ export default {
authUrl.searchParams.append('access_type', accessType); authUrl.searchParams.append('access_type', accessType);
authUrl.searchParams.append('state', state); authUrl.searchParams.append('state', state);
window.location.href = authUrl.toString(); window.location.href = authUrl.toString();
},
},
getTokenList(){ getTokenList(){
getGoogleTokenList().then(res => { getGoogleTokenList().then(res => {
...@@ -135,18 +166,69 @@ export default { ...@@ -135,18 +166,69 @@ export default {
}) })
.catch(error => { .catch(error => {
if (error === 'cancel') { if (error === 'cancel') {
this.$message({
type: 'info',
message: '已取消删除'
});
} else { } else {
this.$message.error('删除失败: ' + error); this.$message.error('删除失败: ' + error);
} }
}); });
} },
}, },
}; };
</script> </script>
<style scoped> <style scoped>
.channel-management {
padding: 20px;
}
.header-section {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.add-button {
background-color: #409EFF;
}
.info-text {
display: flex;
align-items: center;
margin-left: 10px;
font-size: 12px;
color: #909399;
}
.info-text i {
margin-right: 5px;
}
.operation-btn {
color: #409EFF;
padding: 0;
margin-right: 10px;
}
.pagination-container {
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 20px;
}
.total-text {
margin-right: 15px;
font-size: 13px;
}
.page-size-dropdown {
margin-left: 15px;
font-size: 13px;
cursor: pointer;
}
.el-dropdown-link {
color: #606266;
}
</style> </style>
src/views/createMaterial/AdMaterialManager.vue
View file @ 4e5d4494
...@@ -45,23 +45,28 @@ ...@@ -45,23 +45,28 @@
<div class="current-path"> <div class="current-path">
当前位置：{{ currentPath }} 当前位置：{{ currentPath }}
</div> </div>
<el-select
v-model="tagFilter"
@change="handleTagFilterChange"
clearable
placeholder="按标签筛选"
style="width: 200px; margin-right: 10px"
>
<el-option
v-for="tag in allTags"
:key="tag"
:label="tag"
:value="tag"
></el-option>
</el-select>
<el-button type="primary" @click="showUploadVideoDialog">上传视频</el-button>
</div> </div>
<el-form inline>
<el-form-item label="标签">
<material-tag-select
v-model="tagFilter"
placeholder="请选择标签..."
@change="handleTagFilterChange"
/>
</el-form-item>
<el-form-item label="设计师">
<desigher-select v-model="designer"
@change="fetchMaterials()"
/>
</el-form-item>
</el-form>
<el-button type="primary" @click="openMaterialUpload">上传素材</el-button>
<!-- 文件列表 --> <!-- 文件列表 -->
<el-table v-loading="loading" :data="materials" style="width: 100%"> <el-table v-loading="loading" :data="materials" style="width: 100%">
<el-table-column label="预览" width="120"> <el-table-column label="预览" width="120">
...@@ -82,7 +87,7 @@ ...@@ -82,7 +87,7 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="materialName" label="文件名"></el-table-column> <el-table-column prop="materialName" label="文件名" width="300"></el-table-column>
<el-table-column prop="resType" label="类型" width="100"> <el-table-column prop="resType" label="类型" width="100">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.resType === 1 ? '图片' : scope.row.resType === 2 ? '视频' : '' }} {{ scope.row.resType === 1 ? '图片' : scope.row.resType === 2 ? '视频' : '' }}
...@@ -93,7 +98,18 @@ ...@@ -93,7 +98,18 @@
{{ formatDate(scope.row.createdAt) }} {{ formatDate(scope.row.createdAt) }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="realName" label="创作者"></el-table-column> <el-table-column prop="realName" label="设计师" width="80"/>
<el-table-column label="标签">
<template slot-scope="scope">
<el-tag style="margin-left: 10px"
v-for="tag in scope.row.tagList"
:key="tag.id"
size="mini"
>
{{ tag }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="150"> <el-table-column label="操作" width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="mini" type="text" @click="showMoveDialog(scope.row)"> <el-button size="mini" type="text" @click="showMoveDialog(scope.row)">
...@@ -250,19 +266,25 @@ import { ...@@ -250,19 +266,25 @@ import {
getMaterialDirectoriesTree, getMaterialDirectoriesTree,
createDirectory, createDirectory,
deleteDirectory, deleteDirectory,
getDirectoryById, fetchMaterials,
getMaterialCount,
movematerial, movematerial,
uploadMaterial, uploadMaterial,
getMaterialDesigners, getMaterialDesigners,
getAllTags, getAllTags,
getMaterialsByTag,
deleteMaterialById deleteMaterialById
} from '@/api/report'; } from '@/api/report';
import FileUpload from '../../components/FileUpload'
import MaterialTagSelect from '../../components/MaterialTagSelect'
import DesigherSelect from '../../components/DesignerSelect'
export default { export default {
name: 'AdMaterialManager', name: 'AdMaterialManager',
components: {
MaterialTagSelect,
DesigherSelect
},
data() { data() {
return { return {
// 目录树数据 // 目录树数据
...@@ -315,7 +337,7 @@ export default { ...@@ -315,7 +337,7 @@ export default {
uploadVideoForm: { // 上传视频表单数据 uploadVideoForm: { // 上传视频表单数据
// file: null, // file: null,
materialName: '', materialName: '',
tags: '', tags: [],
director: null, director: null,
resType: null, resType: null,
directoryId: null directoryId: null
...@@ -323,7 +345,8 @@ export default { ...@@ -323,7 +345,8 @@ export default {
fileList:[], fileList:[],
uploadVideoUrl: 'https://putinapi.zhangxindiet.com/business/youtube/deleteDirectory', uploadVideoUrl: 'https://putinapi.zhangxindiet.com/business/youtube/deleteDirectory',
materialDesigners: [], materialDesigners: [],
tagFilter: '', tagFilter: [],
designer: '',
allTags: [], allTags: [],
}; };
}, },
...@@ -361,37 +384,38 @@ export default { ...@@ -361,37 +384,38 @@ export default {
console.error('获取创作者列表失败:', error); console.error('获取创作者列表失败:', error);
} }
}, },
async fetchMaterialsByTag(tag) {
fetchMaterials(){
if(this.currentDirectory == null){
return
}
this.loading = true; this.loading = true;
this.currentPage = 1; let tagFilterStr = this.tagFilter.map(String).join(',');
try { fetchMaterials({
const response = await getMaterialsByTag({ tags: tagFilterStr,
tag: tag, pageNum: this.currentPage,
pageNum: this.currentPage, pageSize: this.pageSize,
pageSize: this.pageSize, directoryId: this.currentDirectory,
}); includeSubdirectories: this.includeSubdirectories,
designer: this.designer || null
}).then(response => {
if (response && response.status === 200) { if (response && response.status === 200) {
this.materials = response.result.data.value; this.materials = response.result.data.value;
this.totalCount = response.result.data.total; this.totalCount = response.result.data.total;
} else { } else {
this.$message.error(response.msg || '获取素材列表失败'); this.$message.error(response.msg || '获取素材列表失败');
} }
} catch (error) { }).catch(error => {
this.$message.error('获取数据失败'); this.$message.error('获取数据失败');
console.error('获取数据失败:', error); console.error('获取数据失败:', error);
} finally { }).finally(() => {
this.loading = false; this.loading = false;
} });
}, },
handleTagFilterChange(value) { handleTagFilterChange(value) {
this.tagFilter = value; this.tagFilter = value;
this.currentPage = 1; // 重置页码 this.fetchMaterials()
if (this.tagFilter) {
this.fetchMaterialsByTag(this.tagFilter);
} else {
this.fetchMaterialsByDirectoryId(this.currentDirectory);
}
}, },
async fetchAllTags() { async fetchAllTags() {
try { try {
...@@ -410,65 +434,23 @@ export default { ...@@ -410,65 +434,23 @@ export default {
handleSizeChange(val) { handleSizeChange(val) {
this.pageSize = val; this.pageSize = val;
this.currentPage = 1; this.currentPage = 1;
if (this.tagFilter) { this.fetchMaterials()
this.fetchMaterialsByTag(this.tagFilter);
} else {
this.fetchMaterialsByDirectoryId(this.currentDirectory);
}
}, },
// 处理目录点击 // 处理目录点击
handleNodeClick(data) { handleNodeClick(data) {
this.currentDirectory = data.id; this.currentDirectory = data.id;
this.currentPath = this.getNodePath(data); this.currentPath = this.getNodePath(data);
this.currentPage = 1; this.currentPage = 1;
this.tagFilter = ''; this.fetchMaterials()
this.fetchMaterialsByDirectoryId(data.id);
}, },
// 获取数据（包含总数和分页数据）
async fetchMaterialsByDirectoryId(directoryId) {
this.loading = true;
try {
// 先获取总数
const countResponse = await getMaterialCount({
directoryId: directoryId,
includeSubdirectories: this.includeSubdirectories
});
if (countResponse && countResponse.status === 200) {
this.totalCount = countResponse.result.data;
} else {
this.$message.error(countResponse.msg || '获取总数失败');
}
// 再获取数据
const dataResponse = await getDirectoryById({
directoryId: directoryId,
pageNum: this.currentPage,
pageSize: this.pageSize,
includeSubdirectories: this.includeSubdirectories
});
if (dataResponse && dataResponse.status === 200) {
this.materials = dataResponse.result.data;
} else {
this.$message.error(dataResponse.msg || '获取素材列表失败');
console.error('获取素材列表失败:', dataResponse);
}
} catch (error) {
this.$message.error('获取数据失败');
console.error('获取数据失败:', error);
} finally {
this.loading = false;
}
},
// 翻页 // 翻页
handleCurrentChange(val) { handleCurrentChange(val) {
this.currentPage = val; this.currentPage = val;
if (this.tagFilter) { this.fetchMaterials()
this.fetchMaterialsByTag(this.tagFilter);
} else {
this.fetchMaterialsByDirectoryId(this.currentDirectory);
}
}, },
// 获取节点路径 // 获取节点路径
...@@ -528,7 +510,8 @@ export default { ...@@ -528,7 +510,8 @@ export default {
.then(async () => { .then(async () => {
try { try {
const response = await deleteDirectory({id:data.id}); const response = await deleteDirectory({id:data.id});
if (response.code === 0) { console.log("delete", response)
if (response.status == 200) {
this.$message.success('删除成功'); this.$message.success('删除成功');
await this.fetchDirectories(); // 重新获取目录树 await this.fetchDirectories(); // 重新获取目录树
// 如果删除的是当前选中的目录，清空文件列表 // 如果删除的是当前选中的目录，清空文件列表
...@@ -538,7 +521,7 @@ export default { ...@@ -538,7 +521,7 @@ export default {
this.currentPath = '根目录'; this.currentPath = '根目录';
} }
} else { } else {
this.$message.error(response.message || '删除失败'); this.$message.error(response.msg || '删除失败');
} }
} catch (error) { } catch (error) {
this.$message.error('删除失败'); this.$message.error('删除失败');
...@@ -610,7 +593,7 @@ export default { ...@@ -610,7 +593,7 @@ export default {
if (response && response.status === 200) { if (response && response.status === 200) {
this.$message.success("移动成功"); this.$message.success("移动成功");
this.moveDialogVisible = false; this.moveDialogVisible = false;
this.fetchMaterialsByDirectoryId(this.currentDirectory); this.fetchMaterials()
} else { } else {
this.$message.error(response.msg || "移动失败"); this.$message.error(response.msg || "移动失败");
} }
...@@ -731,6 +714,11 @@ export default { ...@@ -731,6 +714,11 @@ export default {
this.uploadVideoForm.directoryId = value[value.length - 1]; this.uploadVideoForm.directoryId = value[value.length - 1];
}, },
openMaterialUpload(){
window.open(`/materialUpload`)
// this.$router.push({ name: 'google.fbAdDetail', query: { pkg: row.pkg } });
},
} }
}; };
</script> </script>
......
src/views/layout/Layout.vue
View file @ 4e5d4494
<template> <template>
<div :class="classObj" class="app-wrapper"> <div :class="classObj" class="app-wrapper">
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
<sidebar class="sidebar-container"/> <!-- <sidebar class="sidebar-container"/>-->
<div class="horizontal-menu">
<el-menu
:default-active="activeIndex"
mode="horizontal"
@select="handleSelect"
:router="true"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<!-- 一级菜单项 -->
<el-menu-item index="/tools/Youtube">素材管理</el-menu-item>
<!-- 带子菜单的导航项 -->
<el-submenu index="2">
<template slot="title">推广管理</template>
<el-menu-item index="2-1">用户数据</el-menu-item>
<el-menu-item index="2-2">交易记录</el-menu-item>
</el-submenu>
<el-submenu index="3">
<template slot="title">Youtube工具</template>
<el-menu-item index="/assetManagement/googleOauthYoutube">账号管理</el-menu-item>
<el-menu-item index="/assetManagement/uploadYoutube">视频上传</el-menu-item>
<el-menu-item index="/assetManagement/uploadYoutubeLog">上传结果</el-menu-item>
</el-submenu>
</el-menu>
</div>
<div class="main-container"> <div class="main-container">
<navbar/> <navbar/>
<app-main/> <app-main/>
...@@ -20,6 +48,11 @@ export default { ...@@ -20,6 +48,11 @@ export default {
Sidebar, Sidebar,
AppMain AppMain
}, },
data() {
return {
activeIndex: '1' // 默认激活的菜单项
};
},
mixins: [ResizeMixin], mixins: [ResizeMixin],
computed: { computed: {
sidebar() { sidebar() {
...@@ -40,6 +73,10 @@ export default { ...@@ -40,6 +73,10 @@ export default {
methods: { methods: {
handleClickOutside() { handleClickOutside() {
this.$store.dispatch('CloseSideBar', { withoutAnimation: false }) this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
},
handleSelect(key) {
console.log('选中菜单:', key);
// 此处添加路由跳转或业务逻辑
} }
} }
} }
...@@ -66,4 +103,16 @@ export default { ...@@ -66,4 +103,16 @@ export default {
position: absolute; position: absolute;
z-index: 999; z-index: 999;
} }
.horizontal-menu {
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}
.el-menu--horizontal {
display: flex;
justify-content: center;
}
.el-submenu .el-menu-item {
min-width: 120px;
}
</style> </style>
src/views/layout/components/Navbar.vue
View file @ 4e5d4494
<template> <template>
<el-menu class="navbar" mode="horizontal"> <el-menu class="navbar" mode="horizontal">
<hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/> <!-- <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>-->
<breadcrumb /> <!-- <breadcrumb />-->
<el-dropdown class="avatar-container" trigger="click"> <el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar"> <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
......
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