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() {
})
}
export function getDirectoryById(params) {
export function fetchMaterials(params) {
return request({
// 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',
params
})
......
src/styles/sidebar.scss
View file @ 4e5d4494
......@@ -3,6 +3,8 @@
// 主体区域 Main container
.main-container {
min-height: 100%;
margin: 0 auto;
padding: 0 36px;
transition: margin-left .28s;
margin-left: $sideBarWidth;
position: relative;
......@@ -87,7 +89,7 @@
}
.main-container {
margin-left: 36px;
margin-left: 0px;
}
.submenu-title-noDropdown {
......
src/views/authAccount/googleOauthYoutube.vue
View file @ 4e5d4494
<template>
<div class="app-container">
<el-form inline>
<el-form-item label="别名:">
<el-input v-model="alias" placeholder="请输入别名"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="authorize()" :disabled="!alias">请求授权</el-button>
</el-form-item>
</el-form>
<!-- <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>
<div class="channel-management">
<div class="header-section">
<el-button type="primary" class="add-button" @click="authorize()" >添加频道</el-button>
<div class="info-text">
<i class="el-icon-info"></i>
<span>当前公共主体已授权2个，上限为15个，如有问题，请联系系统管理员</span>
</div>
</div>
<!--&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>
</template>
......@@ -82,12 +112,12 @@ export default {
},
methods: {
authorize() {
if (!this.alias){
this.$message.error("别名不能为空")
return;
}
const alias=this.alias;
const state = alias;
// if (!this.alias){
// this.$message.error("别名不能为空")
// return;
// }
// const alias=this.alias;
const state = "auth";
const redirectUri = `https://putinapi.zhangxindiet.com/youtube/add/getRefreshToken`;
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';
......@@ -102,7 +132,8 @@ export default {
authUrl.searchParams.append('access_type', accessType);
authUrl.searchParams.append('state', state);
window.location.href = authUrl.toString();
},
},
getTokenList(){
getGoogleTokenList().then(res => {
......@@ -135,18 +166,69 @@ export default {
})
.catch(error => {
if (error === 'cancel') {
this.$message({
type: 'info',
message: '已取消删除'
});
} else {
this.$message.error('删除失败: ' + error);
}
});
}
},
},
};
</script>
<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>
src/views/createMaterial/AdMaterialManager.vue
View file @ 4e5d4494
......@@ -45,23 +45,28 @@
<div class="current-path">
当前位置：{{ currentPath }}
</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>
<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-column label="预览" width="120">
......@@ -82,7 +87,7 @@
</div>
</template>
</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">
<template slot-scope="scope">
{{ scope.row.resType === 1 ? '图片' : scope.row.resType === 2 ? '视频' : '' }}
......@@ -93,7 +98,18 @@
{{ formatDate(scope.row.createdAt) }}
</template>
</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">
<template slot-scope="scope">
<el-button size="mini" type="text" @click="showMoveDialog(scope.row)">
......@@ -250,19 +266,25 @@ import {
getMaterialDirectoriesTree,
createDirectory,
deleteDirectory,
getDirectoryById,
getMaterialCount,
fetchMaterials,
movematerial,
uploadMaterial,
getMaterialDesigners,
getAllTags,
getMaterialsByTag,
deleteMaterialById
} from '@/api/report';
import FileUpload from '../../components/FileUpload'
import MaterialTagSelect from '../../components/MaterialTagSelect'
import DesigherSelect from '../../components/DesignerSelect'
export default {
name: 'AdMaterialManager',
components: {
MaterialTagSelect,
DesigherSelect
},
data() {
return {
// 目录树数据
......@@ -315,7 +337,7 @@ export default {
uploadVideoForm: { // 上传视频表单数据
// file: null,
materialName: '',
tags: '',
tags: [],
director: null,
resType: null,
directoryId: null
......@@ -323,7 +345,8 @@ export default {
fileList:[],
uploadVideoUrl: 'https://putinapi.zhangxindiet.com/business/youtube/deleteDirectory',
materialDesigners: [],
tagFilter: '',
tagFilter: [],
designer: '',
allTags: [],
};
},
......@@ -361,37 +384,38 @@ export default {
console.error('获取创作者列表失败:', error);
}
},
async fetchMaterialsByTag(tag) {
fetchMaterials(){
if(this.currentDirectory == null){
return
}
this.loading = true;
this.currentPage = 1;
try {
const response = await getMaterialsByTag({
tag: tag,
pageNum: this.currentPage,
pageSize: this.pageSize,
});
let tagFilterStr = this.tagFilter.map(String).join(',');
fetchMaterials({
tags: tagFilterStr,
pageNum: this.currentPage,
pageSize: this.pageSize,
directoryId: this.currentDirectory,
includeSubdirectories: this.includeSubdirectories,
designer: this.designer || null
}).then(response => {
if (response && response.status === 200) {
this.materials = response.result.data.value;
this.totalCount = response.result.data.total;
} else {
this.$message.error(response.msg || '获取素材列表失败');
}
} catch (error) {
}).catch(error => {
this.$message.error('获取数据失败');
console.error('获取数据失败:', error);
} finally {
}).finally(() => {
this.loading = false;
}
});
},
handleTagFilterChange(value) {
this.tagFilter = value;
this.currentPage = 1; // 重置页码
if (this.tagFilter) {
this.fetchMaterialsByTag(this.tagFilter);
} else {
this.fetchMaterialsByDirectoryId(this.currentDirectory);
}
this.fetchMaterials()
},
async fetchAllTags() {
try {
......@@ -410,65 +434,23 @@ export default {
handleSizeChange(val) {
this.pageSize = val;
this.currentPage = 1;
if (this.tagFilter) {
this.fetchMaterialsByTag(this.tagFilter);
} else {
this.fetchMaterialsByDirectoryId(this.currentDirectory);
}
this.fetchMaterials()
},
// 处理目录点击
handleNodeClick(data) {
this.currentDirectory = data.id;
this.currentPath = this.getNodePath(data);
this.currentPage = 1;
this.tagFilter = '';
this.fetchMaterialsByDirectoryId(data.id);
this.fetchMaterials()
},
// 获取数据（包含总数和分页数据）
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) {
this.currentPage = val;
if (this.tagFilter) {
this.fetchMaterialsByTag(this.tagFilter);
} else {
this.fetchMaterialsByDirectoryId(this.currentDirectory);
}
this.fetchMaterials()
},
// 获取节点路径
......@@ -528,7 +510,8 @@ export default {
.then(async () => {
try {
const response = await deleteDirectory({id:data.id});
if (response.code === 0) {
console.log("delete", response)
if (response.status == 200) {
this.$message.success('删除成功');
await this.fetchDirectories(); // 重新获取目录树
// 如果删除的是当前选中的目录，清空文件列表
......@@ -538,7 +521,7 @@ export default {
this.currentPath = '根目录';
}
} else {
this.$message.error(response.message || '删除失败');
this.$message.error(response.msg || '删除失败');
}
} catch (error) {
this.$message.error('删除失败');
......@@ -610,7 +593,7 @@ export default {
if (response && response.status === 200) {
this.$message.success("移动成功");
this.moveDialogVisible = false;
this.fetchMaterialsByDirectoryId(this.currentDirectory);
this.fetchMaterials()
} else {
this.$message.error(response.msg || "移动失败");
}
......@@ -731,6 +714,11 @@ export default {
this.uploadVideoForm.directoryId = value[value.length - 1];
},
openMaterialUpload(){
window.open(`/materialUpload`)
// this.$router.push({ name: 'google.fbAdDetail', query: { pkg: row.pkg } });
},
}
};
</script>
......
src/views/layout/Layout.vue
View file @ 4e5d4494
<template>
<div :class="classObj" class="app-wrapper">
<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">
<navbar/>
<app-main/>
......@@ -20,6 +48,11 @@ export default {
Sidebar,
AppMain
},
data() {
return {
activeIndex: '1' // 默认激活的菜单项
};
},
mixins: [ResizeMixin],
computed: {
sidebar() {
......@@ -40,6 +73,10 @@ export default {
methods: {
handleClickOutside() {
this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
},
handleSelect(key) {
console.log('选中菜单:', key);
// 此处添加路由跳转或业务逻辑
}
}
}
......@@ -66,4 +103,16 @@ export default {
position: absolute;
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>
src/views/layout/components/Navbar.vue
View file @ 4e5d4494
<template>
<el-menu class="navbar" mode="horizontal">
<hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
<breadcrumb />
<!-- <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>-->
<!-- <breadcrumb />-->
<el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper">
<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