all_user/huangguo_admin
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

移除AI管理和LSJ媒体库模块，新增媒体网站管理与视频分类/标签

Browse Source 
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
root
2026-09-15 15:16:27 +08:00
co-authored by Claude Opus 5
parent 30f2999231
commit c157f8f6a1
62 changed files with 1786 additions and 10271 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/aiManagement/aiGirlFriendConfig.js
-37
View File
@@ -1,37 +0,0 @@
import request from '@/utils/request'
// 查询列表
export function aiMateScoreConfList(data) {
return request({
url: '/api/web/aiMateScoreConf/list',
method: 'post',
params: data
})
}
// 添加积分
export function aiMateScoreConfAdd(data) {
return request({
url: '/api/web/aiMateScoreConf/add',
method: 'post',
data
})
}
// 删除积分种类
export function aiMateScoreConfDel(data) {
return request({
url: '/api/web/aiMateScoreConf/del',
method: 'post',
data
})
}
// 编辑积分
export function aiMateScoreConfModify(data) {
return request({
url: '/api/web/aiMateScoreConf/update',
method: 'post',
data
})
}
src/api/aiManagement/aiImgToVideo.js
-37
View File
@@ -1,37 +0,0 @@
import request from '@/utils/request'
// 查询换脸订单
export function aiimagetovideoCallback(data) {
return request({
url: '/api/web/aiimagetovideo/callback',
method: 'post',
filterParam: true,
data
})
}
// 查询图生视频列表
export function aiImgToVideoList(data) {
return request({
url: '/api/web/aiimagetovideo/list',
method: 'post',
filterParam: true,
data
})
}
// 修改图生视频列表
export function aiImgToVideoUpdate(data) {
return request({
url: '/api/web/aiimagetovideo/modify',
method: 'post',
data
})
}
// 删除图生视频列表
export function aiImgToVideoDel(data) {
return request({
url: '/api/web/aiimagetovideo/del',
method: 'post',
data
})
}
src/api/aiManagement/aiOrder.js
-83
View File
@@ -1,83 +0,0 @@
/*
* @Author: 阮小七
* @Mail: no
* @Date: 2021-01-04 11:37:07
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-06-06 17:42:57
*/
import request from '@/utils/request'
// 查询换脸订单
export function aiFacechangeSearch(data) {
return request({
url: '/api/web/aiorder/facechange/list',
method: 'post',
filterParam: true,
data
})
}
// 查询脱衣订单
export function aiStripSearch(data) {
return request({
url: '/api/web/aiorder/strip/list',
method: 'post',
filterParam: true,
data
})
}
// 修改换脸订单
export function aiorderFacechangeUpdate(data) {
return request({
url: '/api/web/aiorder/facechange/update',
method: 'post',
data
})
}
// 修改脱衣订单
export function aiorderStripUpdate(data) {
return request({
url: '/api/web/aiorder/strip/update',
method: 'post',
data
})
}
// 重新提交换脸订单
export function facechangeResubmit(data) {
return request({
url: '/api/web/aiorder/facechange/resubmit',
method: 'post',
data
})
}
// AI分类
export function aitemplateCategoryList(data) {
return request({
url: '/api/web/aitemplate/category/list',
method: 'post',
data
})
}
export function aitemplateCategoryAdd(data) {
return request({
url: '/api/web/aitemplate/category/add',
method: 'post',
data
})
}
export function aitemplateCategoryDel(data) {
return request({
url: '/api/web/aitemplate/category/del',
method: 'post',
data
})
}
export function aitemplateCategoryUpdate(data) {
return request({
url: '/api/web/aitemplate/category/update',
method: 'post',
data
})
}
src/api/aiManagement/aiTemplate.js
-45
View File
@@ -1,45 +0,0 @@
/*
* @Author: 阮小七
* @Mail: no
* @Date: 2021-01-04 11:37:07
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-06-06 17:42:57
*/
import request from '@/utils/request'
// 添加
export function aitemplateAdd(data) {
return request({
url: '/api/web/aitemplate/add',
method: 'post',
data
})
}
// 删除
export function aitemplateDel(data) {
return request({
url: '/api/web/aitemplate/del',
method: 'post',
data
})
}
// 查询
export function aitemplateSearch(data) {
return request({
url: '/api/web/aitemplate/list',
method: 'post',
filterParam: true,
data
})
}
// 修改
export function aitemplateUpdate(data) {
return request({
url: '/api/web/aitemplate/update',
method: 'post',
data
})
}
src/api/aiManagement/aiTxtToImg.js
-64
View File
@@ -1,64 +0,0 @@
import request from '@/utils/request'
// 查询换脸订单
export function aitexttoimageCallback(data) {
return request({
url: '/api/web/aitexttoimage/callback',
method: 'post',
filterParam: true,
data
})
}
// 查询图生视频列表
export function aiTextToImageList(data) {
return request({
url: '/api/web/aitexttoimage/list',
method: 'post',
filterParam: true,
data
})
}
// 查询ai小说列表
export function aiTextToNovelList(data) {
return request({
url: '/api/web/aitexttonovel/list',
method: 'post',
filterParam: true,
data
})
}
// 删除ai小说列表
export function deleteNovel(data) {
return request({
url: '/api/web/aitexttonovel/del',
method: 'post',
filterParam: true,
data
})
}
// 退款AI小说
export function updateNovel(data) {
return request({
url: '/api/web/aitexttonovel/update',
method: 'post',
filterParam: true,
data
})
}
// 修改图生视频列表
export function aiTextToImageUpdate(data) {
return request({
url: '/api/web/aitexttoimage/update',
method: 'post',
data
})
}
// 删除图生视频列表
export function aiTextToImageDel(data) {
return request({
url: '/api/web/aitexttoimage/del',
method: 'post',
data
})
}
src/api/appManagement/appList.js
+14 -21
View File
@@ -1,45 +1,38 @@
/*
* @Author:
* @Mail:
* @Date: 2022-03-14 15:24:36
* @LastEditTime: 2022-06-06 17:44:49
* @LastEditors:
* @FilePath: /comics-admin/src/api/appManagement/appList.js
*/
import request from '@/utils/request' import request from '@/utils/request'
// 添加游戏 // 请求位置列表
export function AppInfoAdd (data) { export function appInfoList(data) {
return request({ return request({
url: '/api/web/apps/add', url: '/media/web/appinfo/info/list',
method: 'post', method: 'post',
data data
}) })
} }
// 删除游戏
export function AppInfoDel (data) { // 位置更新更新
export function appInfoUpdate(data) {
return request({ return request({
url: '/api/web/apps/del', url: '/media/web/appinfo/info/update',
method: 'post', method: 'post',
data data
}) })
} }
// 请求游戏列表 //新增位置
export function AppInfoSearch (data) { export function appInfoAdd(data) {
return request({ return request({
url: '/api/web/apps/list', url: '/media/web/appinfo/info/add',
method: 'post', method: 'post',
filterParam: true,
data data
}) })
} }
// 修改游戏 //删除位置
export function AppInfoUpdate (data) { export function appInfoDel(data) {
return request({ return request({
url: '/api/web/apps/update', url: '/media/web/appinfo/info/del',
method: 'post', method: 'post',
data data
}) })
src/api/lsjMediaLibrary/comicsList.js
-34
View File
@@ -1,34 +0,0 @@
import request from '@/utils/request'
// 获取视频列表
export function lsjComicsList(data) {
return request({
url: '/api/web/laosiji/comics/search',
method: 'post',
data
})
}
// 获取视频列表
export function lsjComicsDel(data) {
return request({
url: '/api/web/laosiji/comics/search',
method: 'post',
data
})
}
export function lsjComicsDetail(data) {
return request({
url: '/api/web/laosiji/comics/detail',
method: 'post',
data
})
}
export function lsjComicsAdd(data) {
return request({
url: '/api/web/laosiji/comics/add',
method: 'post',
data
})
}
src/api/lsjMediaLibrary/novelList.js
-34
View File
@@ -1,34 +0,0 @@
import request from '@/utils/request'
// 获取视频列表
export function lsjNovelList(data) {
return request({
url: '/api/web/laosiji/novel/search',
method: 'post',
data
})
}
// 获取视频列表
export function lsjNovelDel(data) {
return request({
url: '/api/web/laosiji/novel/search',
method: 'post',
data
})
}
export function lsjNovelDetail(data) {
return request({
url: '/api/web/laosiji/novel/detail',
method: 'post',
data
})
}
export function lsjNovelAdd(data) {
return request({
url: '/api/web/laosiji/novel/add',
method: 'post',
data
})
}
src/api/lsjMediaLibrary/postList.js
-34
View File
@@ -1,34 +0,0 @@
import request from '@/utils/request'
// 获取视频列表
export function lsjPostList(data) {
return request({
url: '/api/web/laosiji/post/search',
method: 'post',
data
})
}
// 获取视频列表
export function lsjPostDel(data) {
return request({
url: '/api/web/laosiji/post/search',
method: 'post',
data
})
}
export function lsjPostDetail(data) {
return request({
url: '/api/web/laosiji/post/detail',
method: 'post',
data
})
}
export function lsjPostAdd(data) {
return request({
url: '/api/web/laosiji/post/add',
method: 'post',
data
})
}
src/api/lsjMediaLibrary/videoList.js
-34
View File
@@ -1,34 +0,0 @@
import request from '@/utils/request'
// 获取视频列表
export function lsjVideoList(data) {
return request({
url: '/api/web/laosiji/movie/search',
method: 'post',
data
})
}
// 获取视频列表
export function lsjVideoDel(data) {
return request({
url: '/api/web/laosiji/movie/search',
method: 'post',
data
})
}
export function lsjVideoDetail(data) {
return request({
url: '/api/web/laosiji/movie/detail',
method: 'post',
data
})
}
export function lsjVideoAdd(data) {
return request({
url: '/api/web/laosiji/movie/add',
method: 'post',
data
})
}
src/api/mediaLibrary/videoList.js
-106
View File
@@ -1,106 +0,0 @@
/*
* @Author: 王涛
* @Mail: no
* @Date: 2020-12-26 16:43:00
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-06-06 18:00:15
*/
import request from '@/utils/request'
// 删除视频
export function mediaDel(data) {
return request({
url: '/api/web/mediafile/del',
method: 'post',
data
})
}
// 删除视频V1
export function mediaDelV1(data) {
return request({
url: '/api/web/mediafile/delV1',
method: 'post',
data
})
}
// 视频列表
export function mediaSearch(data) {
return request({
url: '/api/web/mediafile/search',
method: 'post',
filterParam: true,
data
})
}
// 视频列表V1
export function mediaSearchV1(data) {
return request({
url: '/api/web/mediafile/searchV1',
method: 'post',
filterParam: true,
data
})
}
// 影片表V3
export function mediaSearchV2(params) {
return request({
url: '/api/web/admin/mediaResource/list',
method: 'get',
params
})
}
// 修改视频
export function mediaUpdate(data) {
return request({
url: '/api/web/mediafile/update',
method: 'post',
data
})
}
// 修改视频V1
export function mediaUpdateV1(data) {
return request({
url: '/api/web/mediafile/updateV1',
method: 'post',
data
})
}
// 请求视频enkey解密密钥
export function videoFeviewList(params, urll) {
return request({
url: '/api/web/media/enkey',
method: 'get',
params
})
}
export function videoOk(data) {
return request({
url: '/api/web/media/videoOk',
method: 'post',
data
})
}
// 更新预览时长
export function updatePreTime(data) {
return request({
url: '/api/web/mediafile/update/prefile',
method: 'post',
data
})
}
// 更新预览时长V1
export function updatePreTimeV1(data) {
return request({
url: '/api/web/mediafile/update/prefileV1',
method: 'post',
data
})
}
src/api/mediaWebManagement/source.js
+59
View File
@@ -0,0 +1,59 @@
import request from '@/utils/request'
// 删除视频
export function sourceDel (data) {
return request({
url: '/media/web/source/del',
method: 'post',
data
})
}
// 资源列表
export function sourceList (data) {
return request({
url: '/media/web/source/list',
method: 'post',
filterParam: true,
data
})
}
// 修改视频
export function sourceUpdate (data) {
return request({
url: '/media/web/source/update',
method: 'post',
data
})
}
// 新增视频
export function sourceAdd (data) {
return request({
url: '/media/web/source/add',
method: 'post',
data
})
}
// 视频上传
export function videoBody (data) {
return request({
url: '/media/web/proxy/videoBody',
method: 'post',
data
})
}
// 视频上传成功
export function videoOk (data) {
return request({
url: '/media/web/proxy/videoOk',
method: 'post',
data
})
}
src/api/mediaWebManagement/taskList.js
+40
View File
@@ -0,0 +1,40 @@
import request from '@/utils/request'
// 删除视频
export function taskDel (data) {
return request({
url: '/media/web/task/del',
method: 'post',
data
})
}
// 资源列表
export function taskList (data) {
return request({
url: '/media/web/task/list',
method: 'post',
filterParam: true,
data
})
}
// 新增视频
export function taskAdd (data) {
return request({
url: '/media/web/task/add',
method: 'post',
data
})
}
// 重新生成添加水印
export function updateWaterMark (data) {
return request({
url: '/media/web/task/update/watermark',
method: 'post',
data
})
}
src/api/videoManagement/videoCategory.js
+41
View File
@@ -0,0 +1,41 @@
import request from '@/utils/request'
// 删除视频
export function videocategoryDel (data) {
return request({
url: '/api/web/videocategory/del',
method: 'post',
data
})
}
// 视频列表
export function videocategorySearch (data) {
return request({
url: '/api/web/videocategory/list',
method: 'post',
filterParam: true,
data
})
}
// 修改视频
export function videocategoryUpdate (data) {
return request({
url: '/api/web/videocategory/update',
method: 'post',
data
})
}
// 一键同步
export function videocategoryAdd (data) {
return request({
url: '/api/web/videocategory/add',
method: 'post',
data
})
}
src/api/videoManagement/videotag.js
+38
View File
@@ -0,0 +1,38 @@
import request from '@/utils/request'
// 视频标签列表
export function videotagList (data) {
return request({
url: '/api/web/videotag/list',
method: 'post',
filterParam: true,
data
})
}
// 删除视频标签
export function videotagDel (data) {
return request({
url: '/api/web/videotag/del',
method: 'post',
data
})
}
// 新增视频标签
export function videotagAdd (data) {
return request({
url: '/api/web/videotag/add',
method: 'post',
data
})
}
// 更新视频标签
export function videotagUpdate (data) {
return request({
url: '/api/web/videotag/update',
method: 'post',
data
})
}
src/components/HeaderSearch/index.vue
+1 -1
View File
@@ -159,7 +159,7 @@ export default {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
/deep/ .el-input__inner { ::v-deep .el-input__inner {
border-radius: 0; border-radius: 0;
border: 0; border: 0;
padding-left: 0; padding-left: 0;
src/filters/aiManagement/aiFaceOrder.js
-89
View File
@@ -1,89 +0,0 @@
export function aiOrderFaceChangeType(val) {
switch (val) {
case 1:
return '人工'
case 2:
return '自动'
}
}
export function aiOrderFaceChangeList() {
return [
{
value: 1,
label: '人工'
},
{
value: 2,
label: '自动'
},
]
}
// 支付方式
export function aiPayTypeChange(val) {
switch (val) {
case 0:
return '金币'
case 1:
return '免费次数/卷'
}
}
// 进度状态
export function aiFaceOrderType(val) {
switch (val) {
case 1:
return '待审核'
case 2:
return '排队中'
case 3:
return '生成中'
case 4:
return '文件服处理中'
case 5:
return '已完成'
case 6:
return '失败退款'
case 7:
return '拒绝'
case 8:
return '已删除'
}
}
export function aiFaceOrderList() {
return [
{
value: 1,
label: '待审核'
},
{
value: 2,
label: '排队中'
},
{
value: 3,
label: '生成中'
},
{
value: 4,
label: '文件服处理中'
},
{
value: 5,
label: '已完成'
},
{
value: 6,
label: '失败退款'
},
{
value: 7,
label: '拒绝'
},
{
value: 8,
label: '已删除'
},
]
}
src/filters/aiManagement/aiTemplate.js
-122
View File
@@ -1,122 +0,0 @@
export function changeAtType(val) {
switch (val) {
case 1:
return '图片换脸'
case 2:
return '视频换脸'
case 3:
return 'AI脱衣'
case 4:
return 'AI女友'
case 5:
return '文生图'
case 6:
return '图生视频'
}
}
export function changeAiContentType(val) {
switch (val) {
case 1:
return '图片'
case 2:
return '视频'
}
}
export function AtTypeList(val) {
return [
{
value: 1,
label: '图片换脸'
},
{
value: 2,
label: '视频换脸'
},
{
value: 3,
label: 'AI脱衣'
},
{
value: 4,
label: 'AI女友'
},
{
value: 5,
label: '文生图'
},
{
value: 6,
label: '图生视频'
}
]
}
export function changeStyleType(val) {
switch (val) {
case 1:
return '2.5D'
case 2:
return '二次元'
case 3:
return '二次元1'
case 4:
return '写实'
case 5:
return '性感卡通'
case 6:
return '美式像素'
}
}
export function styleTypeList() {
return [
{
value: 1,
label: '2.5D'
},
{
value: 2,
label: '二次元'
},
{
value: 3,
label: '二次元1'
},
{
value: 4,
label: '写实'
},
{
value: 5,
label: '性感卡通'
},
{
value: 6,
label: '美式像素'
}
]
}
// ai内容类型
export function AiContentTypeList(val) {
return [
{
value: 1,
label: '图片'
},
{
value: 2,
label: '视频'
}
]
}
// 激活状态
export function AiEnableList() {
return [
{
value: true,
label: '激活'
},
{
value: false,
label: '关闭'
}
]
}
src/filters/index.js
-2
View File
@@ -82,8 +82,6 @@ export {
changeAppTagType changeAppTagType
} from './appManagement/appList' } from './appManagement/appList'
export { changeCircleMemberType, changeCircleContentTypeList } from './circleManagement/circleCategory' export { changeCircleMemberType, changeCircleContentTypeList } from './circleManagement/circleCategory'
export { changeAtType, changeAiContentType , changeStyleType } from './aiManagement/aiTemplate'
export { aiOrderFaceChangeType, aiFaceOrderType, aiPayTypeChange } from './aiManagement/aiFaceOrder'
import moment from 'moment' import moment from 'moment'
export function imgMainPath(path) { export function imgMainPath(path) {
src/filters/mediaLibrary/videoList.js
+40
View File
@@ -56,6 +56,46 @@ export function StatusList(val, list) {
] ]
} }
export function TaskStatusList(val, list) {
return [{
label: '上传中',
value: 'Init'
},
{
label: '下载完成',
value: 'DownloadCompleted'
},
{
label: '水印完成',
value: 'WatermarkCompleted'
},
{
label: '切片完成',
value: 'ConvertCompleted'
},
{
label: '完成-成功',
value: 'Completed'
},
{
label: '完成-失败',
value: 'CompletedFail'
},
{
label: '同步',
value: 'CompletedSync'
},
{
label: '资源同步',
value: 'SyncMp4'
},
{
label: '暂停同步',
value: 'SyncMp4_2'
}
]
}
export function coverTypeList() { export function coverTypeList() {
return [ return [
{ {
src/layout/components/TagsView/ScrollPane.vue
+2 -4
View File
@@ -80,13 +80,11 @@ export default {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
/deep/ { ::v-deep .el-scrollbar__bar {
.el-scrollbar__bar {
bottom: 0px; bottom: 0px;
} }
.el-scrollbar__wrap { ::v-deep .el-scrollbar__wrap {
height: 48px; height: 48px;
} }
}
} }
</style> </style>
src/store/getters.js
+1
View File
@@ -44,6 +44,7 @@ const getters = {
roleId: state => state.user.roleId, roleId: state => state.user.roleId,
name: state => state.user.name, name: state => state.user.name,
getCreator: state => state.user.account, getCreator: state => state.user.account,
getAccId: state => state.user.accid,
roles: state => state.user.roles, roles: state => state.user.roles,
permission_routes: state => state.permission.routes, permission_routes: state => state.permission.routes,
permission_serviceRoutes: state => state.permission.addRoutes, permission_serviceRoutes: state => state.permission.addRoutes,
src/utils/roleTreeList.js
+11 -119
View File
@@ -137,68 +137,26 @@ export const serverRouter = [
] ]
}, },
{ {
path: '/mediaLibrary', path: '/mediaWebManagement',
component: 'MediaLibrary', component: 'MediaWebManagement',
redirect: '/mediaLibrary/mediaTag', redirect: '/mediaWebManagement/sourceList',
name: 'MediaLibrary', name: 'MediaWebManagement',
meta: { meta: {
title: '媒资库管理', title: '资源管理',
icon: 'el-icon-film' icon: 'el-icon-film'
}, },
children: [ children: [
{ {
path: 'mediaLibraryVideoList', path: 'sourceList',
name: 'MediaLibraryVideoList', name: 'SourceList',
api_url: [], api_url: [],
meta: { title: '影片列表', noCache: true, icon: 'el-icon-film' } meta: { title: '资源列表', noCache: true, icon: 'el-icon-view' }
}, },
{ {
path: 'mediaLibraryVideoListV1', path: 'taskList',
name: 'MediaLibraryVideoListV1', name: 'TaskList',
api_url: [], api_url: [],
meta: { title: '影片列表V1', noCache: true, icon: 'el-icon-film' } meta: { title: '切片列表', noCache: true, icon: 'el-icon-setting' }
},
{
path: 'mediaLibraryVideoListV2',
name: 'MediaLibraryVideoListV2',
api_url: [],
meta: { title: '影片列表V2', noCache: true, icon: 'el-icon-film' }
}
]
},
{
path: '/lsjMediaLibrary',
component: 'LsjMediaLibrary',
redirect: '/lsjMediaLibrary/mediaTag',
name: 'LsjMediaLibrary',
meta: {
title: '老司机媒资库管理',
icon: 'el-icon-film'
},
children: [
{
path: 'lsjMediaLibraryVideoList',
name: 'LsjMediaLibraryVideoList',
api_url: [],
meta: { title: '影片列表', noCache: true, icon: 'el-icon-film' }
},
{
path: 'lsjMediaLibraryPostList',
name: 'LsjMediaLibraryPostList',
api_url: [],
meta: { title: '帖子列表', noCache: true, icon: 'el-icon-film' }
},
{
path: 'lsjMediaLibraryComicsList',
name: 'LsjMediaLibraryComicsList',
api_url: [],
meta: { title: '漫画列表', noCache: true, icon: 'el-icon-film' }
},
{
path: 'lsjMediaLibraryNovelList',
name: 'LsjMediaLibraryNovelList',
api_url: [],
meta: { title: '小说列表', noCache: true, icon: 'el-icon-film' }
} }
] ]
}, },
@@ -1127,72 +1085,6 @@ export const serverRouter = [
} }
] ]
}, },
{
path: '/aiManagement',
component: 'AiManagement',
redirect: '/aiManagement/aiTemplate',
name: 'AiManagement',
meta: {
title: 'Ai管理',
icon: 'el-icon-document-copy'
},
children: [
{
path: 'aiGirlFriendConfig',
name: 'AiGirlFriendConfig',
api_url: [],
meta: { title: 'Ai女友购买积分配置', noCache: true, icon: 'el-icon-shopping-bag-1' }
},
{
path: 'aiTemplate',
name: 'AiTemplate',
api_url: [],
meta: { title: 'AI模版', noCache: true, icon: 'el-icon-chat-dot-square' }
},
{
path: 'aiCategory',
name: 'AiCategory',
api_url: [],
meta: { title: 'AI模版分类', noCache: true, icon: 'el-icon-chat-dot-square' }
},
{
path: 'aiFaceOrderPhoto',
name: 'AiFaceOrderPhoto',
api_url: [],
meta: { title: 'AI换脸订单（图片）', noCache: true, icon: 'el-icon-chat-dot-square' }
},
{
path: 'aiFaceOrderVideo',
name: 'AiFaceOrderVideo',
api_url: [],
meta: { title: 'AI换脸订单（视频）', noCache: true, icon: 'el-icon-chat-dot-square' }
},
{
path: 'aiStripOrder',
name: 'AiStripOrder',
api_url: [],
meta: { title: 'AI脱衣订单', noCache: true, icon: 'el-icon-chat-dot-square' }
},
{
path: 'aiImgToVideo',
name: 'AiImgToVideo',
api_url: [],
meta: { title: 'AI图生视频', noCache: true, icon: 'el-icon-chat-dot-square' }
},
{
path: 'aiTxtToImg',
name: 'AiTxtToImg',
api_url: [],
meta: { title: 'AI文生图', noCache: true, icon: 'el-icon-chat-dot-square' }
},
{
path: 'aiNovelList',
name: 'AiNovelList',
api_url: [],
meta: { title: 'AI小说', noCache: true, icon: 'el-icon-chat-dot-square' }
}
]
},
{ {
path: '/searchManagement', path: '/searchManagement',
component: 'searcManagement', component: 'searcManagement',
src/utils/serviceRoute.js
+5 -22
View File
@@ -34,17 +34,11 @@ const map = {
ResourceManagementNovelList: () => import('@/views/resourceManagement/novels/index.vue'), // 小说管理 ResourceManagementNovelList: () => import('@/views/resourceManagement/novels/index.vue'), // 小说管理
ResourceManagementNovelTagsList: () => import('@/views/resourceManagement/novelTagType/index.vue'), // 小说标签管理 ResourceManagementNovelTagsList: () => import('@/views/resourceManagement/novelTagType/index.vue'), // 小说标签管理
// 媒资库管理 // 资源管理
MediaLibrary: Layout, MediaWebManagement: Layout,
MediaLibraryVideoList: () => import('@/views/mediaLibrary/videoList/index.vue'), // 影片列表 SourceList: () => import('@/views/mediaWebManagement/sourceList/index.vue'), // 资源列表
MediaLibraryVideoListV1: () => import('@/views/mediaLibrary/videoListV1/index.vue'), // 影片列表V1 TaskList: () => import('@/views/mediaWebManagement/taskList/index.vue'), // 切片列表
MediaLibraryVideoListV2: () => import('@/views/mediaLibrary/videoListV2/index.vue'), // 影片列表V2
// 老司机媒资库管理
LsjMediaLibrary: Layout,
LsjMediaLibraryVideoList: () => import('@/views/lsjMediaLibrary/videoList/index.vue'), // 影片列表
LsjMediaLibraryPostList: () => import('@/views/lsjMediaLibrary/postList/index.vue'), // 帖子列表
LsjMediaLibraryComicsList: () => import('@/views/lsjMediaLibrary/comicsList/index.vue'), // 漫画列表
LsjMediaLibraryNovelList: () => import('@/views/lsjMediaLibrary/novelList/index.vue'), // 小说列表
// 视频管理 // 视频管理
VideoManagement: Layout, VideoManagement: Layout,
VideoList: () => import('@/views/videoManagement/videoList/index.vue'), // 视频列表 VideoList: () => import('@/views/videoManagement/videoList/index.vue'), // 视频列表
@@ -192,17 +186,6 @@ const map = {
// 应用管理 // 应用管理
AppManagement: Layout, AppManagement: Layout,
AppList: () => import('@/views/appManagement/appList/index.vue'), // 应用列表 AppList: () => import('@/views/appManagement/appList/index.vue'), // 应用列表
// AI管理
AiManagement: Layout,
AiGirlFriendConfig: () => import('@/views/aiManagement/aiGirlFriendConfig/index.vue'), // ai女友
AiTemplate: () => import('@/views/aiManagement/aiTemplate/index.vue'), // ai模版
AiCategory: () => import('@/views/aiManagement/aiCategory/index.vue'), // ai模版分类
AiFaceOrderPhoto: () => import('@/views/aiManagement/aiFaceOrder/photo.vue'), // ai换脸ss
AiFaceOrderVideo: () => import('@/views/aiManagement/aiFaceOrder/video.vue'), // ai换脸ss
AiStripOrder: () => import('@/views/aiManagement/aiStripOrder/index.vue'), // ai脱衣订单
AiImgToVideo: () => import('@/views/aiManagement/aiImgToVideo/index.vue'), // ai图生视频
AiTxtToImg: () => import('@/views/aiManagement/aiTxtToImg/index.vue'), // ai文生图
AiNovelList: () => import('@/views/aiManagement/aiNovelList/index.vue'), // ai文生图
// 其他管理 // 其他管理
OtherConfig: Layout, OtherConfig: Layout,
Jumptab: () => import('@/views/otherConfig/jumptab/index.vue'), // 首页跳转按钮 Jumptab: () => import('@/views/otherConfig/jumptab/index.vue'), // 首页跳转按钮
src/views/aiManagement/aiCategory/components/AddOrEdit.vue
-142
View File
@@ -1,142 +0,0 @@
<template>
<el-dialog :title="title" :visible.sync="Visible" width="780px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
<el-form :inline="true" :model="form" :rules="rules" ref="form" class="demo-form-inline" label-width="120px" label-position="right">
<el-row :gutter="24">
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="模版标题" prop="fakeSells">
<el-input v-model="form.name" placeholder="模版标题" />
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="排序">
<el-input placeholder="请输入排序" v-model.number="form.rank"> </el-input>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="是否开启">
<el-switch v-model="form.status" inactive-color="#ff4949" active-color="#13ce66" />
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="分类所属">
<el-select placeholder="请选择分类所属" clearable v-model="form.caType" @clear="onClear('caType')">
<el-option label="图片换脸" :value="1" />
<el-option label="视频换脸" :value="2" />
<el-option label="AI脱衣" :value="3" />
<el-option label="AI女友" :value="4" />
<el-option label="文生图" :value="5" />
<el-option label="图生视频" :value="6" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="广告模式" prop="advertisingId">
<el-select placeholder="请选择广告模式" clearable v-model="form.adsType" filterable>
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in videoTypeMode" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="展示方式">
<el-select placeholder="请选择展示方式" clearable v-model="form.showType" @clear="onClear('showType')">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in AiContentTypeList" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="Visible = false"> 取 消 </el-button>
<el-button type="primary" @click="submit('form')"> 确 定 </el-button>
</div>
</el-dialog>
</template>
<script>
import { AiContentTypeList } from '@/filters/aiManagement/aiTemplate'
import { aitemplateCategoryAdd, aitemplateCategoryUpdate } from '@/api/aiManagement/aiOrder'
import { videoTypeMode } from '@/filters/videoManagement/videoType'
export default {
name: 'AddOrEdit',
props: ['data'],
components: {},
data() {
return {
AiContentTypeList: AiContentTypeList(),
videoTypeMode: videoTypeMode(),
Visible: true,
title: '',
time: [],
// 表单数据备份
formData: {},
// 表单数据
form: {
caType: undefined,
createdAt: undefined,
id: undefined,
name: undefined,
rank: undefined,
showType: undefined,
status: undefined,
updatedAt: undefined,
adsType: undefined
},
rules: {}
}
},
mounted() {
this.title = this.data.title
if (this.title === '编辑') {
this.form = { ...this.data.data }
this.formData = Object.assign({}, this.form)
}
},
methods: {
// TODO:新增应用列表数据
add(data) {
aitemplateCategoryAdd(data).then(res => {
if (res.code === 200) {
this.Visible = false
this.$message.success('新增成功')
} else {
this.Visible = false
this.$message.error('新增失败')
}
})
},
// TODO：编辑应用列表数据
update(data) {
aitemplateCategoryUpdate(data).then(res => {
if (res && res.code === 200) {
this.Visible = false
this.$message.success('更新成功')
} else {
this.Visible = false
this.$message.error('更新失败')
}
})
},
// 提交按钮
submit(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
if (this.title === '新增') {
this.add(this.form)
} else if (this.title === '编辑') {
this.update(this.form)
}
}
})
},
// 关闭编辑
close() {
this.$emit('close')
},
onClear(data) {
this.form[data] = undefined
}
}
}
</script>
src/views/aiManagement/aiCategory/index.vue
-187
View File
@@ -1,187 +0,0 @@
<template>
<div class="pf-warpper avlist">
<el-row class="table-form">
<el-form :inline="true" :model="searchData.param" class="form-inline" size="mini">
<el-form-item>
<el-select placeholder="请选择任务进度" clearable v-model="searchData.status" @clear="onClear('status')">
<el-option label="开启" :value="true" />
<el-option label="关闭" :value="false" />
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-col>
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
<el-table-column align="center" label="Id">
<template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column>
<el-table-column align="center" label="名称">
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
<el-table-column align="center" label="AI订单内容类型">
<template slot-scope="scope">{{ scope.row.caType | changeAtType }}</template>
</el-table-column>
<el-table-column align="center" label="排序">
<template slot-scope="scope">{{ scope.row.rank }}</template>
</el-table-column>
<el-table-column align="center" label="展示方式">
<template slot-scope="scope">{{ scope.row.showType | changeAiContentType }}</template>
</el-table-column>
<el-table-column align="center" label="广告模式" width="80">
<template slot-scope="scope">{{ scope.row.adsType | changeVideoTypeMode }}</template>
</el-table-column>
<el-table-column align="center" label="是否启用">
<template slot-scope="scope">
<el-button :type="scope.row.status ? 'success' : 'danger'" plain size="mini">{{ scope.row.status ? '开启' : '关闭' }}</el-button>
</template>
</el-table-column>
<el-table-column align="center" label="创建时间" width="180">
<template slot-scope="scope">
{{ scope.row.createdAt | BeiJingTime }}
</template>
</el-table-column>
<el-table-column align="center" label="更新时间" width="180">
<template slot-scope="scope">
{{ scope.row.updatedAt | BeiJingTime }}
</template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<div class="table-pagination">
<el-pagination
:current-page="searchData.pageNum"
:page-size="searchData.pageSize"
:page-sizes="[10, 20, 30, 50, 100]"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
layout="total, sizes, prev, pager, next, jumper"/>
</div>
<!-- 新增及编辑 -->
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
</div>
</template>
<script>
// 引入模块
import { aitemplateCategoryList, aitemplateCategoryDel } from '@/api/aiManagement/aiOrder'
import Edit from './components/AddOrEdit'
export default {
name: 'AiOrder',
components: {
Edit
},
data() {
return {
// 请求列表参数
searchData: {
status: undefined,
pageNum: 1,
pageSize: 10
},
resData: [], // el-table表格数据
editVisible: false,
total: 0, // 数据总条数
loading: true // 列表加载状态
}
},
mounted() {
this.getGameInfo()
},
methods: {
// TODO:请求应用列表数据
getGameInfo() {
aitemplateCategoryList(this.searchData).then(res => {
if (res.code === 200) {
this.resData = res.data.list
this.total = res.data.total
} else {
this.resData = []
this.total = 0
this.$message.error('请求列表失败!')
}
this.loading = false
})
},
// TODO：删除应用列表数据
handleDelete(index, row) {
this.$confirm('确定删除?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
aitemplateCategoryDel({ id: row.id }).then(res => {
if (res.code === 200) {
this.getGameInfo()
this.$message.success('成功删除!')
} else {
this.$message.error('操作失败')
}
})
})
},
onSearch() {
this.searchData.pageNum = 1
this.searchData.pageSize = 10
this.getGameInfo()
},
// 切换每页数据量
handleSizeChange(val) {
this.searchData.pageSize = val
this.getGameInfo()
},
// 切换页数
handleCurrentChange(val) {
this.searchData.pageNum = val
this.getGameInfo()
},
// 新增按钮
add() {
this.editData = {
title: '新增',
data: {}
}
this.editVisible = true
},
// 编辑按钮
handleEdit(index, row) {
this.editVisible = true
this.editData = {
title: '编辑',
data: row
}
},
// 关闭编辑弹窗
closeEdit() {
this.editData = {
title: '新增',
data: {}
}
this.editVisible = false
this.getGameInfo()
},
// 清空某一项筛选列表
onClear(key) {
this.searchData[key] = undefined
this.getGameInfo()
}
}
}
</script>
src/views/aiManagement/aiFaceOrder/components/AddOrEditPhoto.vue
-157
View File
@@ -1,157 +0,0 @@
<template>
<el-dialog
:title="title"
:visible.sync="Visible"
width="780px"
center
class="ac-dialog"
:close-on-click-modal="false"
@close="close">
<el-form
:inline="true"
:model="form"
:rules="rules"
ref="form"
class="demo-form-inline"
label-width="120px"
label-position="right">
<el-row :gutter="24">
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="AI生成的图片">
<UploadImgArr @changeImgUrl="changeCoverImgUrl" :img="form.modifyImgs"></UploadImgArr>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="换脸方式">
<el-select placeholder="请选择换脸方式" clearable v-model="form.byWay">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in aiOrderFaceChangeList" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="任务状态">
<el-select placeholder="请选择任务状态" clearable v-model="form.status">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in aiFaceOrderList" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="原因" prop="fakeSells">
<el-input v-model.number="form.reason" placeholder="请输入原因" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="Visible = false"> 取 消 </el-button>
<el-button type="primary" @click="submit('form')"> 确 定 </el-button>
</div>
</el-dialog>
</template>
<script>
import UploadImgArr from '@/components/UploadImgArr/index'
import { aiOrderFaceChangeList, aiFaceOrderList } from '@/filters/aiManagement/aiFaceOrder'
import { aiorderFacechangeUpdate } from '@/api/aiManagement/aiOrder'
import UploadVideo from '@/components/UploadVideo/index'
import DPlayer from '@/components/VueDplayerHls/index'
export default {
name: 'AddOrEdit',
props: ['data'],
components: {
UploadImgArr,
UploadVideo,
DPlayer
},
data() {
return {
aiOrderFaceChangeList: aiOrderFaceChangeList(),
aiFaceOrderList: aiFaceOrderList(),
Visible: true,
title: '',
time: [],
// 表单数据备份
formData: {},
// 表单数据
form: {
'byWay': undefined,
'id': undefined,
'modifyImgs': undefined,
'modifyVideoUrl': undefined,
'reason': undefined,
'status': 0,
'updatedAt': undefined
},
rules: {}
}
},
mounted() {
this.title = this.data.title
if (this.title === '编辑') {
this.form = { ...this.data.data }
this.formData = Object.assign({}, this.form)
}
},
methods: {
// TODO:新增应用列表数据
filterM3u8(v) {
return /\.m3u8/g.test(v) ? v : v + '.m3u8'
},
// TODO：编辑应用列表数据
update(data) {
aiorderFacechangeUpdate(data).then((res) => {
if (res && res.code === 200) {
this.$message.success(res.data ? res.data : '更新成功')
} else {
this.$message.error(res.data ? res.data : '更新失败')
}
this.Visible = false
})
},
// 提交按钮
submit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
if (this.title === '新增') {
this.add(this.form)
} else if (this.title === '编辑') {
this.update(this.form)
}
}
})
},
// 上传视频返回地址
changeVideoUrl(data) {
this.form.id = data.id
// this.$set(this.form, 'fieldNameFs', data.videoUri)
this.form.videoUrl = data.videoUri
// this.form.fieldNameFs = data.videoUri
// this.form.videoTime = parseInt(data.duration)
// this.form.size = data.size
// this.open()
},
// 重复上传视频
repeatVideo(data) {
this.form.taskId = data.taskId
},
// 上传图片返回地址
changeCoverImgUrl(data) {
this.form.modifyImgs = data
},
// 关闭编辑
close() {
this.$emit('close')
},
onClear(data) {
this.form[data] = undefined
}
}
}
</script>
src/views/aiManagement/aiFaceOrder/components/AddOrEditVideo.vue
-160
View File
@@ -1,160 +0,0 @@
<template>
<el-dialog :title="title" :visible.sync="Visible" width="780px" center class="ac-dialog" :close-on-click-modal="false"
@close="close">
<el-row :gutter="24">
<el-col >
<h3>AI生成的视频URl</h3>
<div v-if="form.vidUrl" style="width: 380px; height: 240px; overflow: hidden">
<DPlayer ref="player" v-if="form.vidUrl.indexOf('mp4') === -1" :video="{
url: '/api/web/media/m3u8/' + filterM3u8(form.vidUrl),
type: 'hls',
pic: '',
}" hotkey ></DPlayer>
<DPlayer ref="player" v-else :video="{
url: this.$store.getters.getSystemConfig.mp4Url + form.vidUrl,
type: 'mp4',
pic: '',
}" hotkey ></DPlayer>
</div>
</el-col>
</el-row>
<el-form :inline="true" :model="form" :rules="rules" ref="form" class="demo-form-inline" label-width="120px"
label-position="right">
<el-row :gutter="24">
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="换脸方式">
<el-select placeholder="请选择换脸方式" clearable v-model="form.byWay">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in aiOrderFaceChangeList" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="任务状态">
<el-select placeholder="请选择任务状态" clearable v-model="form.status">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in aiFaceOrderList" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="原因" prop="fakeSells">
<el-input v-model.number="form.reason" placeholder="请输入原因" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="Visible = false"> 取 消 </el-button>
<el-button type="primary" @click="submit('form')"> 确 定 </el-button>
</div>
</el-dialog>
</template>
<script>
import UploadImgArr from '@/components/UploadImgArr/index'
import { aiOrderFaceChangeList, aiFaceOrderList } from '@/filters/aiManagement/aiFaceOrder'
import { aiorderFacechangeUpdate } from '@/api/aiManagement/aiOrder'
import UploadVideo from '@/components/UploadVideo/index'
import DPlayer from '@/components/VueDplayerHls/index'
export default {
name: 'AddOrEdit',
props: ['data'],
components: {
UploadImgArr,
UploadVideo,
DPlayer
},
data() {
return {
aiOrderFaceChangeList: aiOrderFaceChangeList(),
aiFaceOrderList: aiFaceOrderList(),
Visible: true,
title: '',
time: [],
// 表单数据备份
formData: {},
// 表单数据
form: {
"byWay": undefined,
"id": undefined,
"modifyImgs": undefined,
"vidUrl": undefined,
"reason": undefined,
"status": 0,
"updatedAt": undefined
},
rules: {},
}
},
mounted() {
this.title = this.data.title
if (this.title === '编辑') {
this.form = { ...this.data.data }
this.formData = Object.assign({}, this.form)
}
},
methods: {
//TODO:新增应用列表数据
filterM3u8(v) {
return /\.m3u8/g.test(v) ? v : v + '.m3u8'
},
//TODO：编辑应用列表数据
update(data) {
aiorderFacechangeUpdate(data).then((res) => {
if (res && res.code === 200) {
this.$message.success(res.data ? res.data : '更新成功')
} else {
this.$message.error(res.data ? res.data : '更新失败')
}
this.Visible = false
})
},
// 提交按钮
submit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
if (this.title === '新增') {
this.add(this.form)
} else if (this.title === '编辑') {
this.update(this.form)
}
}
})
},
// 上传视频返回地址
changeVideoUrl(data) {
this.form.id = data.id
// this.$set(this.form, 'fieldNameFs', data.videoUri)
this.form.vidUrl = data.videoUri
// this.form.fieldNameFs = data.videoUri
// this.form.videoTime = parseInt(data.duration)
// this.form.size = data.size
// this.open()
},
// 重复上传视频
repeatVideo(data) {
this.form.taskId = data.taskId
},
// 上传图片返回地址
changeCoverImgUrl(data) {
this.form.modifyImgs = data
},
// 关闭编辑
close() {
this.$emit('close')
},
onClear(data) {
this.form[data] = undefined
},
},
}
</script>
src/views/aiManagement/aiFaceOrder/photo.vue
-276
View File
@@ -1,276 +0,0 @@
<template>
<div class="pf-warpper avlist">
<el-row class="table-form">
<el-form :inline="true" :model="searchData.param" class="form-inline" size="mini">
<el-form-item>
<el-select placeholder="请选择Ai换脸方式" clearable v-model="searchData.byWay" @clear="onClear('byWay')">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in aiOrderFaceChangeList" />
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="请选择任务进度" clearable v-model="searchData.status" @clear="onClear('status')">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in aiFaceOrderList" />
</el-select>
</el-form-item>
<el-form-item>
<el-input clearable placeholder="请输入操作人" v-model="searchData.operator" @clear="onClear('operator')" />
</el-form-item>
<el-form-item>
<el-input clearable placeholder="请输入模版标题" v-model="searchData.tplTitle" @clear="onClear('tplTitle')" />
</el-form-item>
<el-form-item>
<el-input clearable placeholder="ID" v-model="searchData.id" @clear="onClear('id')" />
</el-form-item>
<el-form-item>
<el-input clearable placeholder="用户ID" v-model.number="searchData.userId" @clear="onClear('userId')" />
</el-form-item>
<el-form-item>
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-col>
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
<el-table-column align="center" label="Id">
<template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column>
<el-table-column align="center" label="用户Id">
<template slot-scope="scope">{{ scope.row.userId }}</template>
</el-table-column>
<el-table-column align="center" label="换脸AI任务ID">
<template slot-scope="scope">{{ scope.row.aiVidId }}</template>
</el-table-column>
<el-table-column align="center" label="支付方式">
<template slot-scope="scope">{{ scope.row.payType | aiPayTypeChange }}</template>
</el-table-column>
<el-table-column align="center" label="AI订单内容类型">
<template slot-scope="scope">{{ scope.row.aoContentType | changeAiContentType }}</template>
</el-table-column>
<el-table-column align="center" label="任务进度">
<template slot-scope="scope">{{ scope.row.status | aiFaceOrderType }}</template>
</el-table-column>
<el-table-column width="100" align="center" label="是否已退款">
<template slot-scope="scope">
<el-button :type="scope.row.isRefund ? 'danger' : 'success'" plain size="mini">{{ scope.row.isRefund ? '已退款' : '未退款' }}</el-button>
</template>
</el-table-column>
<el-table-column width="100" align="center" label="订单退款次数">
<template slot-scope="scope">{{ scope.row.retryNum }}</template>
</el-table-column>
<el-table-column align="center" label="换脸方式">
<template slot-scope="scope">{{ scope.row.byWay | aiOrderFaceChangeType }}</template>
</el-table-column>
<el-table-column align="center" label="模版标题">
<template slot-scope="scope">{{ scope.row.tplTitle }}</template>
</el-table-column>
<el-table-column align="center" width="100" label="模版图片">
<template slot-scope="scope">
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.tplPictures"> </ShowImg>
</template>
</el-table-column>
<el-table-column align="center" width="100" label="用户上传的换脸人物图">
<template slot-scope="scope">
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.sourceImgs"> </ShowImg>
</template>
</el-table-column>
<el-table-column align="center" width="100" label="生成的图片">
<template slot-scope="scope">
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.modifyImgs"> </ShowImg>
</template>
</el-table-column>
<el-table-column align="center" label="操作人">
<template slot-scope="scope">{{ scope.row.operator }}</template>
</el-table-column>
<el-table-column align="center" label="原因">
<template slot-scope="scope">{{ scope.row.reason }}</template>
</el-table-column>
<el-table-column align="center" label="价格">
<template slot-scope="scope">{{ scope.row.price / 100 }}</template>
</el-table-column>
<el-table-column align="center" label="模版Id">
<template slot-scope="scope">{{ scope.row.tplId }}</template>
</el-table-column>
<el-table-column align="center" label="创建时间" width="180">
<template slot-scope="scope">{{ scope.row.createdAt | BeiJingTime }} </template>
</el-table-column>
<el-table-column align="center" label="更新时间" width="180">
<template slot-scope="scope">{{ scope.row.updatedAt | BeiJingTime }} </template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
<el-button v-if="!scope.row.isRefund && (scope.row.status===5 || scope.row.status===6)" @click="orderSumbit(scope.$index, scope.row)" size="mini" type="success">重新生成</el-button>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<div class="table-pagination">
<el-pagination
:current-page="searchData.pageNum"
:page-size="searchData.pageSize"
:page-sizes="[10, 20, 30, 50, 100]"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
layout="total, sizes, prev, pager, next, jumper"/>
</div>
<!-- 新增及编辑 -->
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
<ShowVideo ref="showvideo"></ShowVideo>
</div>
</template>
<script>
// 引入模块
import Edit from './components/AddOrEditPhoto'
import ShowImg from '@/components/ShowImg/index.vue'
import ShowVideo from '@/components/ShowVideo/index.vue'
import { aiFacechangeSearch, facechangeResubmit } from '@/api/aiManagement/aiOrder'
import { AiContentTypeList } from '@/filters/aiManagement/aiTemplate'
import { aiOrderFaceChangeList, aiFaceOrderList } from '@/filters/aiManagement/aiFaceOrder'
export default {
name: 'AiOrder',
components: {
ShowImg,
ShowVideo,
Edit
},
data() {
return {
// 请求列表参数
searchData: {
userId: undefined,
tplTitle: undefined,
status: undefined,
operator: undefined,
id: undefined,
byWay: undefined,
aoContentType: 1,
pageNum: 1,
pageSize: 10
},
resData: [], // el-table表格数据
editVisible: false,
total: 0, // 数据总条数
loading: true, // 列表加载状态
AiContentTypeList: AiContentTypeList(),
aiOrderFaceChangeList: aiOrderFaceChangeList(),
aiFaceOrderList: aiFaceOrderList()
}
},
mounted() {
this.getGameInfo()
},
methods: {
orderSumbit(index, row) {
this.$confirm('此操作将重新提交该订单, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true
}).then(async() => {
const res = await facechangeResubmit({ id: row.id })
if (res.code === 200) {
this.$message({
type: 'success',
message: '提交成功!'
})
} else {
this.$message({
type: 'error',
message: '提交失败!'
})
}
}).catch(() => {
})
},
// TODO:请求应用列表数据
getGameInfo() {
aiFacechangeSearch(this.searchData).then(res => {
if (res.code === 200) {
this.resData = res.data.list
this.total = res.data.total
} else {
this.resData = []
this.total = 0
this.$message.error('请求列表失败!')
}
this.loading = false
})
},
// TODO：删除应用列表数据
handleDelete(index, row) {
this.$confirm('确定删除?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
AppInfoDel({ id: row.id }).then(res => {
if (res.code === 200) {
this.getGameInfo()
this.$message.success('成功删除!')
} else {
this.$message.error('操作失败')
}
})
})
},
onSearch() {
this.searchData.pageNum = 1
this.searchData.pageSize = 10
this.getGameInfo()
},
// 切换每页数据量
handleSizeChange(val) {
this.searchData.pageSize = val
this.getGameInfo()
},
// 切换页数
handleCurrentChange(val) {
this.searchData.pageNum = val
this.getGameInfo()
},
// 新增按钮
add() {
this.editVisible = true
},
// 编辑按钮
handleEdit(index, row) {
this.editVisible = true
this.editData = {
title: '编辑',
data: row
}
},
// 关闭编辑弹窗
closeEdit() {
this.editData = {
title: '新增',
data: {}
}
this.editVisible = false
this.getGameInfo()
},
// 清空某一项筛选列表
onClear(key) {
this.searchData[key] = undefined
this.getGameInfo()
},
// 视频查看
checkMedia(url, data) {
this.$refs.showvideo.open(url, data, data.id)
}
}
}
</script>
src/views/aiManagement/aiFaceOrder/video.vue
-284
View File
@@ -1,284 +0,0 @@
<template>
<div class="pf-warpper avlist">
<el-row class="table-form">
<el-form :inline="true" :model="searchData.param" class="form-inline" size="mini">
<el-form-item>
<el-select placeholder="请选择Ai换脸方式" clearable v-model="searchData.byWay" @clear="onClear('byWay')">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in aiOrderFaceChangeList" />
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="请选择任务进度" clearable v-model="searchData.status" @clear="onClear('status')">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in aiFaceOrderList" />
</el-select>
</el-form-item>
<el-form-item>
<el-input clearable placeholder="请输入操作人" v-model="searchData.operator" @clear="onClear('operator')" />
</el-form-item>
<el-form-item>
<el-input clearable placeholder="请输入模版标题" v-model="searchData.tplTitle" @clear="onClear('tplTitle')" />
</el-form-item>
<el-form-item>
<el-input clearable placeholder="ID" v-model="searchData.id" @clear="onClear('id')" />
</el-form-item>
<el-form-item>
<el-input clearable placeholder="用户ID" v-model.number="searchData.userId" @clear="onClear('userId')" />
</el-form-item>
<el-form-item>
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-col>
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
<el-table-column align="center" label="Id">
<template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column>
<el-table-column align="center" label="用户id">
<template slot-scope="scope">{{ scope.row.userId }}</template>
</el-table-column>
<el-table-column align="center" label="换脸AI任务ID">
<template slot-scope="scope">{{ scope.row.aiVidId }}</template>
</el-table-column>
<el-table-column align="center" label="支付方式">
<template slot-scope="scope">{{ scope.row.payType | aiPayTypeChange }}</template>
</el-table-column>
<el-table-column align="center" label="AI订单内容类型">
<template slot-scope="scope">{{ scope.row.aoContentType | changeAiContentType }}</template>
</el-table-column>
<el-table-column align="center" label="任务进度">
<template slot-scope="scope">{{ scope.row.status | aiFaceOrderType }}</template>
</el-table-column>
<el-table-column width="100" align="center" label="是否已退款">
<template slot-scope="scope">
<el-button :type="scope.row.isRefund ? 'danger' : 'success'" plain size="mini">{{ scope.row.isRefund ? '已退款' : '未退款' }}</el-button>
</template>
</el-table-column>
<el-table-column width="100" align="center" label="订单退款次数">
<template slot-scope="scope">{{ scope.row.retryNum }}</template>
</el-table-column>
<el-table-column align="center" label="换脸方式">
<template slot-scope="scope">{{ scope.row.byWay | aiOrderFaceChangeType }}</template>
</el-table-column>
<el-table-column align="center" label="模版标题">
<template slot-scope="scope">{{ scope.row.tplTitle }}</template>
</el-table-column>
<el-table-column align="center" width="100" label="模版视频封面">
<template slot-scope="scope">
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.tplVideoCover"> </ShowImg>
</template>
</el-table-column>
<el-table-column align="center" label="模版视频">
<template slot-scope="scope">
<i v-if="scope.row.tplVideoUrl" class="el-icon-video-play views" title="点击预览" @click="checkMedia(scope.row.tplVideoUrl, scope.row)"></i>
<div v-else>暂无</div>
</template>
</el-table-column>
<el-table-column align="center" width="100" label="用户上传的图片">
<template slot-scope="scope">
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.sourceImgs"> </ShowImg>
</template>
</el-table-column>
<el-table-column align="center" label="生成的视频">
<template slot-scope="scope">
<i v-if="scope.row.vidUrl" class="el-icon-video-play views" title="点击预览" @click="checkMedia(scope.row.vidUrl, scope.row)"></i>
<div v-else>暂无</div>
</template>
</el-table-column>
<el-table-column align="center" label="操作人">
<template slot-scope="scope">{{ scope.row.operator }}</template>
</el-table-column>
<el-table-column align="center" label="原因">
<template slot-scope="scope">{{ scope.row.reason }}</template>
</el-table-column>
<el-table-column align="center" label="价格">
<template slot-scope="scope">{{ scope.row.price / 100 }}</template>
</el-table-column>
<el-table-column align="center" label="模版Id">
<template slot-scope="scope">{{ scope.row.tplId }}</template>
</el-table-column>
<el-table-column align="center" label="创建时间" width="180">
<template slot-scope="scope">{{ scope.row.createdAt | BeiJingTime }} </template>
</el-table-column>
<el-table-column align="center" label="更新时间" width="180">
<template slot-scope="scope">{{ scope.row.updatedAt | BeiJingTime }} </template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
<el-button v-if="!scope.row.isRefund && (scope.row.status===5 || scope.row.status===6)" @click="orderSumbit(scope.$index, scope.row)" size="mini" type="success">重新生成</el-button>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<div class="table-pagination">
<el-pagination
:current-page="searchData.pageNum"
:page-size="searchData.pageSize"
:page-sizes="[10, 20, 30, 50, 100]"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
layout="total, sizes, prev, pager, next, jumper"/>
</div>
<!-- 新增及编辑 -->
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
<ShowVideo ref="showvideo"></ShowVideo>
</div>
</template>
<script>
// 引入模块
import Edit from './components/AddOrEditVideo'
import ShowImg from '@/components/ShowImg/index.vue'
import ShowVideo from '@/components/ShowVideo/index.vue'
import { aiFacechangeSearch, facechangeResubmit } from '@/api/aiManagement/aiOrder'
import { AiContentTypeList } from '@/filters/aiManagement/aiTemplate'
import { aiOrderFaceChangeList, aiFaceOrderList } from '@/filters/aiManagement/aiFaceOrder'
export default {
name: 'AiOrder',
components: {
ShowImg,
ShowVideo,
Edit
},
data() {
return {
// 请求列表参数
searchData: {
userId: undefined,
tplTitle: undefined,
status: undefined,
operator: undefined,
id: undefined,
byWay: undefined,
aoContentType: 2,
pageNum: 1,
pageSize: 10
},
resData: [], // el-table表格数据
editVisible: false,
total: 0, // 数据总条数
loading: true, // 列表加载状态
AiContentTypeList: AiContentTypeList(),
aiOrderFaceChangeList: aiOrderFaceChangeList(),
aiFaceOrderList: aiFaceOrderList()
}
},
mounted() {
this.getGameInfo()
},
methods: {
orderSumbit(index, row) {
this.$confirm('此操作将重新提交该订单, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true
}).then(async() => {
const res = await facechangeResubmit({ id: row.id })
if (res.code === 200) {
this.$message({
type: 'success',
message: '提交成功!'
})
} else {
this.$message({
type: 'error',
message: '提交失败!'
})
}
}).catch(() => {
})
},
// TODO:请求应用列表数据
getGameInfo() {
aiFacechangeSearch(this.searchData).then(res => {
if (res.code === 200) {
this.resData = res.data.list
this.total = res.data.total
} else {
this.resData = []
this.total = 0
this.$message.error('请求列表失败!')
}
this.loading = false
})
},
// TODO：删除应用列表数据
handleDelete(index, row) {
this.$confirm('确定删除?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
AppInfoDel({ id: row.id }).then(res => {
if (res.code === 200) {
this.getGameInfo()
this.$message.success('成功删除!')
} else {
this.$message.error('操作失败')
}
})
})
},
onSearch() {
this.searchData.pageNum = 1
this.searchData.pageSize = 10
this.getGameInfo()
},
// 切换每页数据量
handleSizeChange(val) {
this.searchData.pageSize = val
this.getGameInfo()
},
// 切换页数
handleCurrentChange(val) {
this.searchData.pageNum = val
this.getGameInfo()
},
// 新增按钮
add() {
this.editVisible = true
},
// 编辑按钮
handleEdit(index, row) {
this.editVisible = true
this.editData = {
title: '编辑',
data: row
}
},
// 关闭编辑弹窗
closeEdit() {
this.editData = {
title: '新增',
data: {}
}
this.editVisible = false
this.getGameInfo()
},
// 清空某一项筛选列表
onClear(key) {
this.searchData[key] = undefined
this.getGameInfo()
},
// 视频查看
checkMedia(url, data) {
this.$refs.showvideo.open(url, data, data.id)
}
}
}
</script>
src/views/aiManagement/aiGirlFriendConfig/components/AddOrEdit.vue
-161
View File
@@ -1,161 +0,0 @@
<template>
<el-dialog :title="title" :visible.sync="Visible" width="800px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
<el-form :inline="true" :model="form" ref="ruleForm" class="demo-form-inline" label-width="120px" label-position="right">
<el-row :gutter="24">
<el-col :xs="24">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" placeholder="请输入名称" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="现价(分)" prop="payAmount">
<el-input v-model="form.payAmount" placeholder="请输入现价" />
</el-form-item>
<div style="margin: -20px 118px 20px; color: #c6c6c6">建议输入金额:30,50,100,200,300,500,1000</div>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="原价(分)" prop="prePayAmount">
<el-input v-model="form.prePayAmount" placeholder="请输入原价" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="图片">
<UploadImg @changeImgUrl="changeCoverImgUrl" :img="form.image"></UploadImg>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :xs="24">
<el-form-item label="积分数量" prop="score">
<el-input v-model.number="form.score" placeholder="请输入积分数量" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :xs="24">
<el-form-item label="赠送积分数量" prop="giftScore">
<el-input v-model.number="form.giftScore" placeholder="请输入赠送积分数量" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :xs="24">
<el-form-item label="是否上架" prop="isEnb">
<el-switch v-model="form.isEnb" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="描述" prop="desc">
<el-input placeholder="请输入描述" v-model="form.desc" type="textarea" style="width: 350px" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="排序" prop="desc">
<el-input placeholder="请输入排序" v-model="form.sort" type="textarea" style="width: 350px" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="Visible = false"> 取 消 </el-button>
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
</div>
</el-dialog>
</template>
<script>
import { changeMoneyYuan, changeMoneyFen } from '@/filters/index'
import UploadImg from '@/components/UploadImg/index'
import { aiMateScoreConfAdd, aiMateScoreConfModify } from '@/api/aiManagement/aiGirlFriendConfig'
export default {
name: 'AddOrEdit',
props: ['data'],
components: {
UploadImg
},
data() {
return {
Visible: true,
title: '',
// 表单数据
form: {
giftScore: null, // 赠送金币
score: undefined, // 金币基础
isEnb: true, // 是否上架
image: undefined,
name: undefined, // 名称
payAmount: undefined, // 支付金额
desc: undefined,
prePayAmount: undefined
}
}
},
mounted() {
this.title = this.data.title
if (this.title === '编辑') {
this.form = { ...this.data.data }
this.form.payAmount = changeMoneyYuan(this.form.payAmount)
this.form.prePayAmount = changeMoneyYuan(this.form.prePayAmount)
}
},
methods: {
// TODO：新增金币管理数据
add(data) {
aiMateScoreConfAdd(data).then(res => {
if (res.code === 200) {
this.$message.success('新增成功')
this.Visible = false
} else {
this.$message.error('新增失败')
}
})
},
// TODO：编辑金币管理数据
update(data) {
aiMateScoreConfModify(data).then(res => {
if (res.code === 200) {
this.$message.success('更新成功')
this.Visible = false
} else {
this.$message.error('更新失败')
}
})
},
// 提交按钮
submit(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
const data = JSON.parse(JSON.stringify(this.form))
data.payAmount = data.payAmount ? changeMoneyFen(data.payAmount) : 0
data.prePayAmount = data.prePayAmount ? changeMoneyFen(data.prePayAmount) : 0
data.sort = Number(data.sort)
if (this.title === '新增') {
this.add(data)
} else if (this.title === '编辑') {
this.update(data)
}
} else {
return false
}
})
},
// 上传图片返回地址
changeCoverImgUrl(data) {
this.form.image = data
},
// 关闭编辑
close() {
this.$emit('close')
}
}
}
</script>
src/views/aiManagement/aiGirlFriendConfig/index.vue
-199
View File
@@ -1,199 +0,0 @@
<template>
<div class="pf-warpper avlist">
<el-row class="table-form">
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
<el-form-item>
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info">刷新</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-col>
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading" :row-style="{ height: '70px' }">
<el-table-column align="center" label="ID">
<template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column>
<el-table-column align="center" label="名称">
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
<el-table-column align="center" label="描述" width="120">
<template slot-scope="scope">{{ scope.row.desc }}</template>
</el-table-column>
<el-table-column align="center" label="排序" width="120">
<template slot-scope="scope">{{ scope.row.sort }}</template>
</el-table-column>
<el-table-column align="center" label="图片" width="120px">
<template slot-scope="scope">
<ShowImg style="width: 70px; height: 40px; margin: 0 auto" :urls="scope.row.image"></ShowImg>
</template>
</el-table-column>
<el-table-column align="center" label="积分数量">
<template slot-scope="scope">{{ scope.row.score }}</template>
</el-table-column>
<el-table-column align="center" label="赠送积分数量">
<template slot-scope="scope">{{ scope.row.giftScore }}</template>
</el-table-column>
<el-table-column align="center" label="现价(单位:分)" width="150px">
<template slot-scope="scope">{{ scope.row.payAmount | changeMoneyYuan }}</template>
</el-table-column>
<el-table-column align="center" label="原价(单位:分)" width="150px">
<template slot-scope="scope">{{ scope.row.prePayAmount | changeMoneyYuan }}</template>
</el-table-column>
<el-table-column align="center" label="是否上架">
<template slot-scope="scope">
<el-button :type="scope.row.isEnb ? 'success' : 'danger'" plain size="mini">{{ scope.row.isEnb ? '上架' : '未上架' }}</el-button>
</template>
</el-table-column>
<el-table-column align="center" label="创建时间" width="160px">
<template slot-scope="scope">{{ scope.row.createdAt | BeiJingTime }}</template>
</el-table-column>
<el-table-column align="center" label="更新时间" width="160px">
<template slot-scope="scope">{{ scope.row.updatedAt | BeiJingTime }}</template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<div class="table-pagination">
<el-pagination
:current-page="searchData.pageNum"
:page-size="searchData.pageSize"
:page-sizes="[10, 20, 30, 50, 100]"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
layout="total, sizes, prev, pager, next, jumper"/>
</div>
<!-- 新增及编辑 -->
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
</div>
</template>
<script>
// 引入模块
import Edit from './components/AddOrEdit'
import ShowImg from '@/components/ShowImg/index.vue'
import { aiMateScoreConfList, aiMateScoreConfDel } from '@/api/aiManagement/aiGirlFriendConfig'
export default {
name: 'Gold',
components: {
Edit,
ShowImg
},
data() {
return {
// 请求列表参数
searchData: {
pageNum: 1,
pageSize: 10
},
resData: [], // el-table表格数据
editVisible: false, // 新增或编辑弹出框
total: 0, // 数据总条数
loading: true, // 列表加载状态
// 编辑数据
editData: {
title: '新增',
data: {}
}
}
},
mounted() {
this.getGoldList()
},
methods: {
// TODO：请求金币管理数据列表
getGoldList() {
this.loading = true
aiMateScoreConfList(this.searchData).then(res => {
if (res.code === 200) {
this.resData = res.data.list
this.total = res.data.total
} else {
this.resData = []
this.total = 0
this.$message.error('请求列表失败!')
}
this.loading = false
})
},
// TODO:删除金币管理列表数据
handleDelete(index, row) {
this.$confirm('确定删除?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
aiMateScoreConfDel({ id: row.id }).then(res => {
if (res.code === 200) {
this.getGoldList()
this.$message.success('成功删除!')
} else {
this.$message.error('操作失败')
}
})
})
},
onSearch() {
this.searchData.pageNum = 1
this.searchData.pageSize = 10
this.getGoldList()
},
// 刷新数据
refreshView() {
this.searchData = {
pageNum: 1,
pageSize: 10
}
this.getGoldList()
},
// 切换每页数据量
handleSizeChange(val) {
this.searchData.pageSize = val
this.getGoldList()
},
// 切换页数
handleCurrentChange(val) {
this.searchData.pageNum = val
this.getGoldList()
},
// 新增按钮
add() {
this.editVisible = true
this.editData = {
title: '新增',
data: {}
}
},
// 编辑按钮
handleEdit(index, row) {
this.editVisible = true
this.editData = {
title: '编辑',
data: row
}
},
// 关闭编辑弹窗
closeEdit() {
this.editData = {
title: '新增',
data: {}
}
this.editVisible = false
this.refreshView()
}
}
}
</script>
src/views/aiManagement/aiImgToVideo/components/AddOrEdit.vue
-105
View File
@@ -1,105 +0,0 @@
<template>
<el-dialog :title="title" :visible.sync="Visible" width="800px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
<el-form :inline="true" :model="form" ref="ruleForm" class="demo-form-inline" label-width="120px" label-position="right">
<el-row :gutter="24">
<el-col :xs="24">
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入名称" />
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="任务状态">
<el-select placeholder="请选择任务状态" clearable v-model="form.status">
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in aiImgToVideoStatusList" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="场景类型">
<el-select placeholder="请选择场景类型" clearable v-model="form.sceneType">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in sceneTypes" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="Visible = false"> 取 消 </el-button>
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
</div>
</el-dialog>
</template>
<script>
import { aiImgToVideoUpdate } from '@/api/aiManagement/aiImgToVideo.js'
export default {
name: 'AddOrEdit',
props: ['data', 'aiImgToVideoStatusList'],
components: {
},
data() {
return {
Visible: true,
title: '',
// 表单数据
form: {
remark: undefined, // 备注
status: undefined, // 状态
sceneType: undefined
},
sceneTypes: [
{ label: '掀衣露乳', value: 0 },
{ label: '男人撕衣', value: 1 },
{ label: '神屌射脸', value: 2 },
{ label: '阿黑颜', value: 3 },
{ label: '接吻', value: 4 },
{ label: '吸奶', value: 5 },
{ label: '露逼', value: 6 }
]
}
},
mounted() {
this.title = this.data.title
if (this.title === '编辑') {
this.form = { ...this.data.data }
}
},
methods: {
// TODO：编辑金币管理数据
update(data) {
aiImgToVideoUpdate(data).then(res => {
if (res.code === 200) {
this.$message.success('更新成功')
this.Visible = false
} else {
this.$message.error('更新失败')
}
})
},
// 提交按钮
submit(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
const data = JSON.parse(JSON.stringify(this.form))
if (this.title === '编辑') {
this.update(data)
}
} else {
return false
}
})
},
// 上传图片返回地址
changeCoverImgUrl(data) {
this.form.image = data
},
// 关闭编辑
close() {
this.$emit('close')
}
}
}
</script>
src/views/aiManagement/aiImgToVideo/index.vue
-260
View File
@@ -1,260 +0,0 @@
<template>
<div class="pf-warpper avlist">
<el-row class="table-form">
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
<el-form-item>
<el-input clearable placeholder="ID" v-model="searchData.id" @clear="onClear('id')" />
</el-form-item>
<el-form-item>
<el-input clearable placeholder="用户ID" v-model.number="searchData.userId" @clear="onClear('userId')" />
</el-form-item>
<el-form-item>
<el-select placeholder="请选择任务进度" clearable v-model="searchData.status" @clear="onClear('status')">
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in aiImgToVideoStatusList" />
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info">刷新</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-col>
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
<el-table-column align="center" label="Id">
<template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column>
<el-table-column align="center" label="用户ID">
<template slot-scope="scope">{{ scope.row.userId }}</template>
</el-table-column>
<el-table-column align="center" label="图生视频金币个数">
<template slot-scope="scope">{{ scope.row.coin/100 }}</template>
</el-table-column>
<el-table-column align="center" label="任务进度">
<template slot-scope="scope">{{ scope.row.status | aiImgToVideoType }}</template>
</el-table-column>
<el-table-column width="100" align="center" label="是否删除">
<template slot-scope="scope">
<el-button :type="scope.row.isDelete ? 'danger' : 'success'" plain size="mini">{{ scope.row.isDelete ? '已删除' : '未删除' }}</el-button>
</template>
</el-table-column>
<el-table-column width="100" align="center" label="场景类型">
<template slot-scope="scope">
{{ sceneTypes[scope.row.sceneType] }}
</template>
</el-table-column>
<el-table-column width="100" align="center" label="是否使用免费次数">
<template slot-scope="scope">
<el-button :type="scope.row.isFreeTimes ? 'danger' : 'success'" plain size="mini">{{ scope.row.isFreeTimes ? '是' : '否' }}</el-button>
</template>
</el-table-column>
<el-table-column width="100" align="center" label="是否被用户隐藏">
<template slot-scope="scope">
<el-button :type="scope.row.isHide ? 'danger' : 'success'" plain size="mini">{{ scope.row.isHide ? '是' : '否' }}</el-button>
</template>
</el-table-column>
<el-table-column align="center" width="100" label="未处理的图片地址">
<template slot-scope="scope">
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.imgUrl"> </ShowImg>
</template>
</el-table-column>
<el-table-column align="center" width="100" label="处理后的图片地址">
<template slot-scope="scope">
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.newImgUrl"> </ShowImg>
</template>
</el-table-column>
<el-table-column align="center" label="备注">
<template slot-scope="scope">{{ scope.row.remark }}</template>
</el-table-column>
<el-table-column align="center" label="创建时间" width="180">
<template slot-scope="scope">{{ scope.row.createdAt | BeiJingTime }} </template>
</el-table-column>
<el-table-column align="center" label="更新时间" width="180">
<template slot-scope="scope">{{ scope.row.updatedAt | BeiJingTime }} </template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
<el-button @click="changeStatus(scope.$index, scope.row)" size="mini" type="danger">退款</el-button>
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<div class="table-pagination">
<el-pagination
:current-page="searchData.pageNum"
:page-size="searchData.pageSize"
:page-sizes="[10, 20, 30, 50, 100]"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
layout="total, sizes, prev, pager, next, jumper"/>
</div>
<!-- 新增及编辑 -->
<Edit :data="editData" :aiImgToVideoStatusList="aiImgToVideoStatusList" v-if="editVisible" @close="closeEdit" />
</div>
</template>
<script>
// 引入模块
import Edit from './components/AddOrEdit'
import ShowImg from '@/components/ShowImg/index.vue'
import { aiImgToVideoList, aiImgToVideoDel, aiImgToVideoUpdate } from '@/api/aiManagement/aiImgToVideo.js'
export default {
name: 'Gold',
components: {
Edit,
ShowImg
},
data() {
return {
aiImgToVideoStatusList: [
{ id: 1, name: '下单成功' },
{ id: 2, name: '已提交' },
{ id: 3, name: '生成成功' },
{ id: 4, name: '生成失败' },
{ id: 5, name: '退款' }
],
sceneTypes: ['掀衣露乳', '男人撕衣', '神屌射脸', '阿黑颜', '接吻', '吸奶', '露逼'],
// 请求列表参数
searchData: {
userId: undefined,
status: undefined,
id: undefined,
pageNum: 1,
pageSize: 10
},
resData: [], // el-table表格数据
editVisible: false, // 新增或编辑弹出框
total: 0, // 数据总条数
loading: true, // 列表加载状态
// 编辑数据
editData: {
title: '新增',
data: {}
}
}
},
mounted() {
this.getGoldList()
},
filters: {
aiImgToVideoType(id) {
switch (id) {
case 1:
return '下单成功'
case 2:
return '已提交'
case 3:
return '生成成功'
case 4:
return '生成失败'
case 5:
return '退款'
}
}
},
methods: {
// TODO：请求金币管理数据列表
getGoldList() {
this.loading = true
aiImgToVideoList(this.searchData).then(res => {
if (res.code === 200) {
this.resData = res.data.list
this.total = res.data.total
} else {
this.resData = []
this.total = 0
this.$message.error('请求列表失败!')
}
this.loading = false
})
},
// TODO:删除金币管理列表数据
handleDelete(index, row) {
this.$confirm('确定删除?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
aiImgToVideoDel({ id: row.id }).then(res => {
if (res.code === 200) {
this.getGoldList()
this.$message.success('成功删除!')
} else {
this.$message.error('操作失败')
}
})
})
},
changeStatus(index, row) {
this.$confirm('确定退款?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
aiImgToVideoUpdate({ id: row.id, status: 5 }).then(res => {
if (res.code === 200) {
this.getGoldList()
this.$message.success('已退款!')
} else {
this.$message.error('操作失败')
}
})
})
},
onSearch() {
this.searchData.pageNum = 1
this.searchData.pageSize = 10
this.getGoldList()
},
// 刷新数据
refreshView() {
this.searchData = {
pageNum: 1,
pageSize: 10
}
this.getGoldList()
},
// 切换每页数据量
handleSizeChange(val) {
this.searchData.pageSize = val
this.getGoldList()
},
// 切换页数
handleCurrentChange(val) {
this.searchData.pageNum = val
this.getGoldList()
},
// 编辑按钮
handleEdit(index, row) {
this.editVisible = true
this.editData = {
title: '编辑',
data: row
}
},
// 关闭编辑弹窗
closeEdit() {
this.editData = {
title: '新增',
data: {}
}
this.editVisible = false
this.refreshView()
}
}
}
</script>
src/views/aiManagement/aiNovelList/index.vue
-256
View File
@@ -1,256 +0,0 @@
<template>
<div class="pf-warpper">
<el-row class="table-form">
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
<el-form-item>
<el-input clearable placeholder="ID" v-model="searchData.id" @clear="onClear('id')" />
</el-form-item>
<el-form-item>
<el-input clearable placeholder="用户ID" v-model.number="searchData.uid" @clear="onClear('userId')" />
</el-form-item>
<el-form-item>
<el-select placeholder="请选择任务进度" clearable v-model="searchData.status" @clear="onClear('status')">
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in aiImgToVideoStatusList" />
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
</el-form-item>
<el-form-item>
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info">刷新</el-button>
</el-form-item>
</el-form>
</el-row>
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%">
<el-table-column label="ID" prop="id" />
<el-table-column label="用户ID" prop="uid" />
<el-table-column label="故事情节" prop="description" />
<el-table-column label="小说正文" prop="content" width="200">
<template slot-scope="scope">
<div style="display: flex;" v-if="scope.row.content">
<span class="ellipsis2">
{{ scope.row.content }}
</span>
<el-button class="view-btn" type="text" @click="view(scope.row.content)" plain icon="el-icon-zoom-in"></el-button>
</div>
<span v-else>--</span>
</template>
</el-table-column>
<el-table-column label="状态" prop="status">
<template slot-scope="scope">
{{ handleStatus(scope.row.status) }}
</template>
</el-table-column>
<el-table-column label="地点场景" prop="scene" />
<el-table-column label="故事背景" prop="background" />
<el-table-column label="其他要求" prop="other" />
<el-table-column label="小说模型" prop="modelType">
<template slot-scope="scope">
{{ handleModelType(scope.row.modelType) }}
</template>
</el-table-column>
<el-table-column label="金币" prop="coin" />
<el-table-column label="扣除金币个数" prop="debitAmountCoin" />
<el-table-column label="扣除收益金币个数" prop="debitIncomeCoin" />
<el-table-column label="备注" prop="remark" />
<el-table-column label="创建时间" prop="createdAt">
<template slot-scope="scope">
{{scope.row.createdAt | BeiJingTime}}
</template>
</el-table-column>
<el-table-column label="更新时间" prop="updatedAt">
<template slot-scope="scope">
{{scope.row.updatedAt | BeiJingTime}}
</template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button @click="changeStatus(scope.row)" size="mini">退款</el-button>
<el-button @click="handleDelete(scope.row)" size="mini" type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="table-pagination">
<el-pagination
:current-page="searchData.pageNum"
:page-size="searchData.pageSize"
:page-sizes="[10, 20, 30, 50, 100]"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
layout="total, sizes, prev, pager, next, jumper"/>
</div>
<el-dialog
title="预览"
:visible.sync="dialogVisible"
width="600px"
:before-handleClose="handleClose"
:handleClose-on-click-modal="false"
class="look-dialog">
<div class="viewContent" v-html="currentContent"></div>
</el-dialog>
</div>
</template>
<script>
import { aiTextToNovelList, updateNovel, deleteNovel } from '@/api/aiManagement/aiTxtToImg.js'
export default {
name: 'AiNovelList',
data() {
return {
aiImgToVideoStatusList: [
{ id: 1, name: '下单成功' },
{ id: 2, name: '已提交' },
{ id: 3, name: '生成成功' },
{ id: 4, name: '生成失败' },
{ id: 5, name: '退款' }
],
// 请求列表参数
searchData: {
userId: undefined,
status: undefined,
id: undefined,
pageNum: 1,
pageSize: 10
},
total: 0,
resData: [],
appOpts: [],
currentContent: '',
dialogVisible: false
}
},
watch: {},
mounted() {
this.getDataList()
},
methods: {
handleStatus(status) {
if (!status) {
return '--'
}
const obj = this.aiImgToVideoStatusList.find(item => item.id === status)
return obj.name || '--'
},
handleModelType(type) {
if (!type) {
return '--'
}
return type === 1 ? 'AI小艺' : 'AI小萌'
},
onSearch() {
this.searchData.pageNum = 1
this.searchData.pageSize = 10
this.getDataList()
},
async getDataList() {
try {
const r = await aiTextToNovelList(this.searchData)
const data = r.data
this.total = data.total
this.resData = data.list
} catch (error) {
console.error('查询失败：', error)
}
},
// 刷新数据
refreshView() {
this.searchData = {
pageNum: 1,
pageSize: 10
}
this.getDataList()
},
// TODO:删除金币管理列表数据
handleDelete(row) {
this.$confirm('确定删除?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteNovel({ id: row.id }).then(res => {
if (res.code === 200) {
this.getDataList()
this.$message.success('成功删除!')
} else {
this.$message.error('操作失败')
}
})
})
},
changeStatus(row) {
this.$confirm('确定退款?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateNovel({ id: row.id, status: 5 }).then(res => {
if (res.code === 200) {
this.getDataList()
this.$message.success('已退款!')
} else {
this.$message.error('操作失败')
}
})
})
},
view(text) {
this.currentContent = text.replace(/\n/g, '<br>')
this.dialogVisible = true
},
handleClose() {
this.dialogVisible = false
},
// 切换每页数据量
handleSizeChange(val) {
this.searchData.pageSize = val
this.getDataList()
},
// 切换页数
handleCurrentChange(val) {
this.searchData.pageNum = val
this.getDataList()
}
}
}
</script>
<style lang="scss" scoped>
.ai-novel-list {
/deep/ .el-button {
padding: 9px 15px;
}
/deep/ .el-image {
width: 100px;
height: 100px;
img {
object-fit: contain;
}
}
}
.ellipsis2 {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-right: 5px;
}
.view-btn {
width: 35px;
}
.look-dialog {
text-align: center;
}
.viewContent {
border: 2px solid;
color: #121327;
border-radius: 8px;
padding: 10px 4px;
}
</style>
src/views/aiManagement/aiStripOrder/components/AddOrEdit.vue
-168
View File
@@ -1,168 +0,0 @@
<template>
<el-dialog :title="title" :visible.sync="Visible" width="780px" center class="ac-dialog" :close-on-click-modal="false"
@close="close">
<el-row :gutter="24">
<el-col>
<h3>AI生成的视频URl</h3>
<div v-if="form.modifyVideoUrl" style="width: 380px; height: 240px; overflow: hidden">
<DPlayer ref="player" v-if="form.modifyVideoUrl.indexOf('mp4') === -1" :video="{
url: '/api/web/media/m3u8/' + filterM3u8(form.modifyVideoUrl),
type: 'hls',
pic: '',
}" hotkey ></DPlayer>
<DPlayer ref="player" v-else :video="{
url: this.$store.getters.getSystemConfig.mp4Url + form.modifyVideoUrl,
type: 'mp4',
pic: '',
}" hotkey ></DPlayer>
</div>
</el-col>
</el-row>
<el-form :inline="true" :model="form" :rules="rules" ref="form" class="demo-form-inline" label-width="120px"
label-position="right">
<el-row :gutter="24">
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="AI生成的图片">
<UploadImgArr @changeImgUrl="changeCoverImgUrl" :img="form.modifyImgs"></UploadImgArr>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="换脸方式">
<el-select placeholder="请选择换脸方式" clearable v-model="form.byWay">
<el-option :key="item.value" :label="item.label" :value="item.value"
v-for="item in aiOrderFaceChangeList" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="任务状态">
<el-select placeholder="请选择任务状态" clearable v-model="form.status">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in aiFaceOrderList" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="原因" prop="fakeSells">
<el-input v-model.number="form.reason" placeholder="请输入原因" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="Visible = false"> 取 消 </el-button>
<el-button type="primary" @click="submit('form')"> 确 定 </el-button>
</div>
</el-dialog>
</template>
<script>
import UploadImgArr from '@/components/UploadImgArr/index'
import { aiOrderFaceChangeList, aiFaceOrderList } from '@/filters/aiManagement/aiFaceOrder'
import { aiorderStripUpdate } from '@/api/aiManagement/aiOrder'
import UploadVideo from '@/components/UploadVideo/index'
import DPlayer from '@/components/VueDplayerHls/index'
export default {
name: 'AddOrEdit',
props: ['data'],
components: {
UploadImgArr,
UploadVideo,
DPlayer
},
data() {
return {
aiOrderFaceChangeList: aiOrderFaceChangeList(),
aiFaceOrderList: aiFaceOrderList(),
Visible: true,
title: '',
time: [],
// 表单数据备份
formData: {},
// 表单数据
form: {
"byWay": undefined,
"id": undefined,
"modifyImgs": undefined,
"modifyVideoUrl": undefined,
"reason": undefined,
"status": 0,
"updatedAt": undefined
},
rules: {},
}
},
mounted() {
this.title = this.data.title
if (this.title === '编辑') {
this.form = { ...this.data.data }
this.formData = Object.assign({}, this.form)
}
},
methods: {
//TODO:新增应用列表数据
filterM3u8(v) {
return /\.m3u8/g.test(v) ? v : v + '.m3u8'
},
//TODO：编辑应用列表数据
update(data) {
aiorderStripUpdate(data).then((res) => {
if (res && res.code === 200) {
this.$message.success(res.data ? res.data : '更新成功')
} else {
this.$message.error(res.data ? res.data : '更新失败')
}
this.Visible = false
})
},
// 提交按钮
submit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
if (this.title === '新增') {
this.add(this.form)
} else if (this.title === '编辑') {
this.update(this.form)
}
}
})
},
// 上传视频返回地址
changeVideoUrl(data) {
this.form.id = data.id
// this.$set(this.form, 'fieldNameFs', data.videoUri)
this.form.videoUrl = data.videoUri
// this.form.fieldNameFs = data.videoUri
// this.form.videoTime = parseInt(data.duration)
// this.form.size = data.size
// this.open()
},
// 重复上传视频
repeatVideo(data) {
this.form.taskId = data.taskId
},
// 上传图片返回地址
changeCoverImgUrl(data) {
this.form.modifyImgs = data
},
// 关闭编辑
close() {
this.$emit('close')
},
onClear(data) {
this.form[data] = undefined
},
},
}
</script>
src/views/aiManagement/aiStripOrder/index.vue
-243
View File
@@ -1,243 +0,0 @@
<template>
<div class="pf-warpper avlist">
<el-row class="table-form">
<el-form :inline="true" :model="searchData.param" class="form-inline" size="mini">
<el-form-item>
<el-select placeholder="请选择Ai内容类型" clearable v-model="searchData.contentType" @clear="onClear('subType')">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in AiContentTypeList" />
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="请选择Ai换脸方式" clearable v-model="searchData.byWay" @clear="onClear('byWay')">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in aiOrderFaceChangeList" />
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="请选择任务进度" clearable v-model="searchData.status" @clear="onClear('status')">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in aiFaceOrderList" />
</el-select>
</el-form-item>
<el-form-item>
<el-input clearable placeholder="请输入操作人" v-model="searchData.operator" @clear="onClear('operator')" />
</el-form-item>
<el-form-item>
<el-input clearable placeholder="ID" v-model="searchData.id" @clear="onClear('id')" />
</el-form-item>
<el-form-item>
<el-input clearable placeholder="用户ID" v-model.number="searchData.userId" @clear="onClear('userId')" />
</el-form-item>
<el-form-item>
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-col>
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
<el-table-column align="center" label="Id">
<template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column>
<el-table-column align="center" label="用户ID">
<template slot-scope="scope">{{ scope.row.userId }}</template>
</el-table-column>
<el-table-column align="center" label="支付方式">
<template slot-scope="scope">{{ scope.row.payType | aiPayTypeChange }}</template>
</el-table-column>
<el-table-column align="center" label="AI订单内容类型">
<template slot-scope="scope">{{ scope.row.aoContentType | changeAiContentType }}</template>
</el-table-column>
<el-table-column align="center" label="任务进度">
<template slot-scope="scope">{{ scope.row.status | aiFaceOrderType }}</template>
</el-table-column>
<el-table-column width="100" align="center" label="是否已退款">
<template slot-scope="scope">
<el-button :type="scope.row.isRefund ? 'danger' : 'success'" plain size="mini">{{ scope.row.isRefund ? '已退款' : '未退款' }}</el-button>
</template>
</el-table-column>
<el-table-column width="100" align="center" label="订单退款次数">
<template slot-scope="scope">{{ scope.row.retryNum }}</template>
</el-table-column>
<el-table-column align="center" label="换脸方式">
<template slot-scope="scope">{{ scope.row.byWay | aiOrderFaceChangeType }}</template>
</el-table-column>
<el-table-column align="center" width="100" label="用户上传的图片">
<template slot-scope="scope">
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.sourceImgs"> </ShowImg>
</template>
</el-table-column>
<el-table-column align="center" width="100" label="生成的图片">
<template slot-scope="scope">
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.modifyImgs"> </ShowImg>
</template>
</el-table-column>
<el-table-column align="center" label="脱衣任务id">
<template slot-scope="scope">{{ scope.row.aiJobId }}</template>
</el-table-column>
<el-table-column align="center" label="操作人">
<template slot-scope="scope">{{ scope.row.operator }}</template>
</el-table-column>
<el-table-column align="center" label="原因">
<template slot-scope="scope">{{ scope.row.reason }}</template>
</el-table-column>
<el-table-column align="center" label="价格">
<template slot-scope="scope">{{ scope.row.price / 100 }}</template>
</el-table-column>
<el-table-column align="center" label="创建时间" width="180">
<template slot-scope="scope">{{ scope.row.createdAt | BeiJingTime }} </template>
</el-table-column>
<el-table-column align="center" label="更新时间" width="180">
<template slot-scope="scope">{{ scope.row.updatedAt | BeiJingTime }} </template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<div class="table-pagination">
<el-pagination
:current-page="searchData.pageNum"
:page-size="searchData.pageSize"
:page-sizes="[10, 20, 30, 50, 100]"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
layout="total, sizes, prev, pager, next, jumper"/>
</div>
<!-- 新增及编辑 -->
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
<ShowVideo ref="showvideo"></ShowVideo>
</div>
</template>
<script>
// 引入模块
import Edit from './components/AddOrEdit'
import ShowImg from '@/components/ShowImg/index.vue'
import ShowVideo from '@/components/ShowVideo/index.vue'
import { aiStripSearch } from '@/api/aiManagement/aiOrder'
import { AiContentTypeList } from '@/filters/aiManagement/aiTemplate'
import { aiOrderFaceChangeList, aiFaceOrderList } from '@/filters/aiManagement/aiFaceOrder'
export default {
name: 'AiOrder',
components: {
ShowImg,
ShowVideo,
Edit
},
data() {
return {
// 请求列表参数
searchData: {
userId: undefined,
tplTitle: undefined,
status: undefined,
operator: undefined,
id: undefined,
byWay: undefined,
aoContentType: undefined,
pageNum: 1,
pageSize: 10
},
resData: [], // el-table表格数据
editVisible: false,
total: 0, // 数据总条数
loading: true, // 列表加载状态
AiContentTypeList: AiContentTypeList(),
aiOrderFaceChangeList: aiOrderFaceChangeList(),
aiFaceOrderList: aiFaceOrderList()
}
},
mounted() {
this.getGameInfo()
},
methods: {
// TODO:请求应用列表数据
getGameInfo() {
aiStripSearch(this.searchData).then(res => {
if (res.code === 200) {
this.resData = res.data.list
this.total = res.data.total
} else {
this.resData = []
this.total = 0
this.$message.error('请求列表失败!')
}
this.loading = false
})
},
// TODO：删除应用列表数据
handleDelete(index, row) {
this.$confirm('确定删除?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
AppInfoDel({ id: row.id }).then(res => {
if (res.code === 200) {
this.getGameInfo()
this.$message.success('成功删除!')
} else {
this.$message.error('操作失败')
}
})
})
},
onSearch() {
this.searchData.pageNum = 1
this.searchData.pageSize = 10
this.getGameInfo()
},
// 切换每页数据量
handleSizeChange(val) {
this.searchData.pageSize = val
this.getGameInfo()
},
// 切换页数
handleCurrentChange(val) {
this.searchData.pageNum = val
this.getGameInfo()
},
// 新增按钮
add() {
this.editVisible = true
},
// 编辑按钮
handleEdit(index, row) {
this.editVisible = true
this.editData = {
title: '编辑',
data: row
}
},
// 关闭编辑弹窗
closeEdit() {
this.editData = {
title: '新增',
data: {}
}
this.editVisible = false
this.getGameInfo()
},
// 清空某一项筛选列表
onClear(key) {
this.searchData[key] = undefined
this.getGameInfo()
},
// 视频查看
checkMedia(url, data) {
this.$refs.showvideo.open(url, data, data.id)
}
}
}
</script>
src/views/aiManagement/aiTemplate/components/AddOrEdit.vue
-219
View File
@@ -1,219 +0,0 @@
<template>
<el-dialog :title="title" :visible.sync="Visible" width="780px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
<el-form :inline="true" :model="form" :rules="rules" ref="form" class="demo-form-inline" label-width="120px" label-position="right">
<el-row :gutter="24">
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="请选择Ai内容类型">
<el-select placeholder="请选择Ai内容类型" clearable v-model="form.contentType" @clear="onClear('subType')">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in AiContentTypeList" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" v-if="form.contentType == 2">
<el-form-item label="媒资库视频taskId" prop="fakeSells">
<el-input v-model="form.taskID" placeholder="请输入媒资库视频taskId" />
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="请选择Ai类型">
<el-select placeholder="请选择Ai类型" clearable v-model="form.atType" @clear="onClear('subType')">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in AtTypeList" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="风格类型" prop="styleType">
<el-select placeholder="请选择风格类型" clearable v-model="form.styleType" filterable @clear="onClear('styleType')">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in styleTypeList" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="模版分类" prop="categoryId">
<el-select placeholder="请选择模版分类" clearable v-model="form.categoryId" filterable @clear="onClear('categoryId')">
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in categoryIdList" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="模版图片">
<UploadImg @changeImgUrl="changeCoverImgUrl" :img="form.picture"></UploadImg>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="激活状态">
<el-select placeholder="请选择激活状态" clearable v-model="form.enable">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in AiEnableList" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="售卖次数（虚拟）" prop="fakeSells">
<el-input v-model.number="form.fakeSells" placeholder="请输入售卖次数（虚拟）" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="模版标题" prop="fakeSells">
<el-input v-model="form.title" placeholder="模版标题" />
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="价格">
<el-input placeholder="请输入价格" v-model.number="form.price"> </el-input>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="排序">
<el-input placeholder="请输入排序" v-model.number="form.rank"> </el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="Visible = false"> 取 消 </el-button>
<el-button type="primary" @click="submit('form')"> 确 定 </el-button>
</div>
</el-dialog>
</template>
<script>
import UploadImg from '@/components/UploadImg/index'
import { AtTypeList, AiContentTypeList, AiEnableList, styleTypeList } from '@/filters/aiManagement/aiTemplate'
import { aitemplateAdd, aitemplateUpdate } from '@/api/aiManagement/aiTemplate'
import { changeMoneyYuan, changeMoneyFen } from '@/filters/index'
// import UploadVideo from '@/components/UploadVideo/index'
// import DPlayer from '@/components/VueDplayerHls/index'
export default {
name: 'AddOrEdit',
props: ['data', 'categoryIdList'],
components: {
UploadImg
// UploadVideo,
// DPlayer
},
data() {
return {
AtTypeList: AtTypeList(),
AiContentTypeList: AiContentTypeList(),
AiEnableList: AiEnableList(),
styleTypeList: styleTypeList(),
Visible: true,
title: '',
time: [],
// 表单数据备份
formData: {},
// 表单数据
form: {
atType: undefined,
contentType: undefined,
createdAt: undefined,
enable: undefined,
fakeSells: undefined,
height: undefined,
id: undefined,
picture: undefined,
playTime: undefined,
price: undefined,
rank: undefined,
sells: undefined,
taskID: undefined,
title: undefined,
updatedAt: undefined,
videoCover: undefined,
videoUrl: undefined,
width: undefined,
categoryId: undefined
},
rules: {}
}
},
mounted() {
this.title = this.data.title
if (this.title === '编辑') {
this.form = { ...this.data.data }
this.formData = Object.assign({}, this.form)
this.form.price = changeMoneyYuan(this.formData.price)
}
},
methods: {
// TODO:新增应用列表数据
add(data) {
data.price = changeMoneyFen(data.price)
if (data.contentType === 2 && !data.taskID) return this.$message.error('请输入视频taskId进行视频绑定！')
aitemplateAdd(data).then(res => {
if (res.code === 200) {
this.Visible = false
this.$message.success('新增成功')
} else {
this.Visible = false
this.$message.error('新增失败')
}
})
},
filterM3u8(v) {
return /\.m3u8/g.test(v) ? v : v + '.m3u8'
},
// TODO：编辑应用列表数据
update(data) {
data.price = changeMoneyFen(data.price)
aitemplateUpdate(data).then(res => {
if (res && res.code === 200) {
this.Visible = false
this.$message.success('更新成功')
} else {
this.Visible = false
this.$message.error('更新失败')
}
})
},
// 提交按钮
submit(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
if (this.title === '新增') {
this.add(this.form)
} else if (this.title === '编辑') {
this.update(this.form)
}
}
})
},
// 上传视频返回地址
changeVideoUrl(data) {
this.form.id = data.id
// this.$set(this.form, 'fieldNameFs', data.videoUri)
this.form.videoUri = data.videoUri
// this.form.fieldNameFs = data.videoUri
// this.form.videoTime = parseInt(data.duration)
// this.form.size = data.size
// this.open()
},
// 重复上传视频
repeatVideo(data) {
this.form.taskId = data.taskId
},
// 上传图片返回地址
changeCoverImgUrl(data) {
this.form.picture = data
},
changeVideoCoverImgUrl(data) {
this.form.videoCover = data
},
// 关闭编辑
close() {
this.$emit('close')
},
onClear(data) {
this.form[data] = undefined
}
}
}
</script>
src/views/aiManagement/aiTemplate/index.vue
-267
View File
@@ -1,267 +0,0 @@
<template>
<div class="pf-warpper avlist">
<el-row class="table-form">
<el-form :inline="true" :model="searchData.param" class="form-inline" size="mini">
<el-form-item>
<el-select placeholder="请选择Ai类型" clearable v-model="searchData.atType" @clear="onClear('subType')">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in AtTypeList" />
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="请选择Ai内容类型" clearable v-model="searchData.contentType" @clear="onClear('subType')">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in AiContentTypeList" />
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="请选择激活状态" clearable v-model="searchData.enable" @clear="onClear('enable')">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in AiEnableList" />
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="请选择排序状态" clearable v-model="searchData.sort" @clear="onClear('sort')">
<el-option key="0" :label="'最新'" :value="0" />
<el-option key="1" :label="'最热'" :value="1" />
</el-select>
</el-form-item>
<el-form-item>
<el-input clearable placeholder="请输入视频媒资库taskID" v-model.number="searchData.taskID" @clear="onClear('taskID')" />
</el-form-item>
<el-form-item>
<el-input clearable placeholder="请输入模版标题" v-model.number="searchData.title" @clear="onClear('title')" />
</el-form-item>
<el-form-item>
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-col>
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
<el-table-column align="center" label="类型">
<template slot-scope="scope">{{ scope.row.atType | changeAtType }}</template>
</el-table-column>
<el-table-column align="center" label="AI内容类型">
<template slot-scope="scope">{{ scope.row.contentType | changeAiContentType }}</template>
</el-table-column>
<el-table-column align="center" label="风格类型">
<template slot-scope="scope">{{ scope.row.styleType | changeStyleType }}</template>
</el-table-column>
<el-table-column align="center" label="售卖次数（虚拟）">
<template slot-scope="scope">{{ scope.row.fakeSells }}</template>
</el-table-column>
<el-table-column align="center" label="售卖次数（真）">
<template slot-scope="scope">{{ scope.row.sells }}</template>
</el-table-column>
<el-table-column align="center" label="价格">
<template slot-scope="scope">{{ scope.row.price / 100 }}</template>
</el-table-column>
<el-table-column align="center" label="排序">
<template slot-scope="scope">{{ scope.row.rank }}</template>
</el-table-column>
<el-table-column align="center" label="是否激活">
<template slot-scope="scope">
<el-button :type="scope.row.enable ? 'success' : 'error'" plain size="mini">{{ scope.row.enable ? '开启' : '关闭' }}</el-button>
</template>
</el-table-column>
<el-table-column align="center" label="视频媒资库taskID（视频才会存在）">
<template slot-scope="scope">{{ scope.row.taskID }}</template>
</el-table-column>
<el-table-column align="center" label="模版标题">
<template slot-scope="scope">{{ scope.row.title }}</template>
</el-table-column>
<el-table-column align="center" width="100" label="模版图片">
<template slot-scope="scope">
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.picture"></ShowImg>
</template>
</el-table-column>
<el-table-column align="center" width="100" label="视频封面">
<template slot-scope="scope">
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.videoCover"> </ShowImg>
</template>
</el-table-column>
<el-table-column align="center" label="影片时长">
<template slot-scope="scope">{{ scope.row.playTime | secondToHouseMinuteSecond }}</template>
</el-table-column>
<el-table-column align="center" label="视频">
<template slot-scope="scope">
<i v-if="scope.row.videoUrl" class="el-icon-video-play views" title="点击预览" @click="checkMedia(scope.row.videoUrl, scope.row)"></i>
<div v-else>暂无</div>
</template>
</el-table-column>
<el-table-column align="center" label="创建时间" width="180">
<template slot-scope="scope">{{ scope.row.createdAt | BeiJingTime }} </template>
</el-table-column>
<el-table-column align="center" label="更新时间" width="180">
<template slot-scope="scope">{{ scope.row.updatedAt | BeiJingTime }} </template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<div class="table-pagination">
<el-pagination
:current-page="searchData.pageNum"
:page-size="searchData.pageSize"
:page-sizes="[10, 20, 30, 50, 100]"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
layout="total, sizes, prev, pager, next, jumper"/>
</div>
<!-- 新增及编辑 -->
<Edit :data="editData" v-if="editVisible" @close="closeEdit" :categoryIdList="categoryIdList" />
<ShowVideo ref="showvideo"></ShowVideo>
</div>
</template>
<script>
// 引入模块
import Edit from './components/AddOrEdit'
import ShowImg from '@/components/ShowImg/index.vue'
import { aitemplateSearch, aitemplateDel } from '@/api/aiManagement/aiTemplate'
import ShowVideo from '@/components/ShowVideo/index.vue'
import { AtTypeList, AiContentTypeList, AiEnableList } from '@/filters/aiManagement/aiTemplate'
import { aitemplateCategoryList } from '@/api/aiManagement/aiOrder'
export default {
name: 'AiTemplate',
components: {
ShowImg,
Edit,
ShowVideo
},
data() {
return {
// 请求列表参数
searchData: {
atType: undefined,
contentType: undefined, // 搜索结束时间
enable: undefined, // 搜索开始时间
sort: undefined, // 发布者ID
taskID: undefined,
title: undefined,
pageNum: 1,
pageSize: 10
},
resData: [], // el-table表格数据
total: 0, // 数据总条数
loading: true, // 列表加载状态
AtTypeList: AtTypeList(),
AiContentTypeList: AiContentTypeList(),
AiEnableList: AiEnableList(),
editVisible: false,
categoryIdList: []
}
},
mounted() {
this.getGameInfo()
this.getCategoryId()
},
methods: {
getCategoryId() {
aitemplateCategoryList({
pageNum: 1,
pageSize: 1000
}).then(res => {
if (res.code === 200) {
this.categoryIdList = res.data.list
} else {
this.categoryIdList = []
this.$message.error('请求列表失败!')
}
})
},
// TODO:请求应用列表数据
getGameInfo() {
aitemplateSearch(this.searchData).then(res => {
if (res.code === 200) {
this.resData = res.data.list
this.total = res.data.total
} else {
this.resData = []
this.total = 0
this.$message.error('请求列表失败!')
}
this.loading = false
})
},
// TODO：删除应用列表数据
handleDelete(index, row) {
this.$confirm('确定删除?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
aitemplateDel({ id: row.id }).then(res => {
if (res.code === 200) {
this.getGameInfo()
this.$message.success('成功删除!')
} else {
this.$message.error('操作失败')
}
})
})
},
onSearch() {
this.searchData.pageNum = 1
this.searchData.pageSize = 10
this.getGameInfo()
},
// 切换每页数据量
handleSizeChange(val) {
this.searchData.pageSize = val
this.getGameInfo()
},
// 切换页数
handleCurrentChange(val) {
this.searchData.pageNum = val
this.getGameInfo()
},
// 新增按钮
add() {
this.editVisible = true
this.editData = {
title: '新增'
}
},
// 编辑按钮
handleEdit(index, row) {
this.editVisible = true
this.editData = {
title: '编辑',
data: row
}
},
// 关闭编辑弹窗
closeEdit() {
this.editData = {
title: '新增',
data: {}
}
this.editVisible = false
this.getGameInfo()
},
// 清空某一项筛选列表
onClear(key) {
this.searchData[key] = undefined
this.getGameInfo()
},
// 视频查看
checkMedia(url, data) {
this.$refs.showvideo.open(url, data, data.id)
}
}
}
</script>
src/views/aiManagement/aiTxtToImg/components/AddOrEdit.vue
-88
View File
@@ -1,88 +0,0 @@
<template>
<el-dialog :title="title" :visible.sync="Visible" width="800px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
<el-form :inline="true" :model="form" ref="ruleForm" class="demo-form-inline" label-width="120px" label-position="right">
<el-row :gutter="24">
<el-col :xs="24">
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入名称" />
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="任务状态">
<el-select placeholder="请选择任务状态" clearable v-model="form.status">
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in aiImgToVideoStatusList" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="Visible = false"> 取 消 </el-button>
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
</div>
</el-dialog>
</template>
<script>
import { aiTextToImageUpdate } from '@/api/aiManagement/aiTxtToImg.js'
export default {
name: 'AddOrEdit',
props: ['data', 'aiImgToVideoStatusList'],
components: {
},
data() {
return {
Visible: true,
title: '',
// 表单数据
form: {
remark: undefined, // 备注
status: undefined // 状态
}
}
},
mounted() {
this.title = this.data.title
if (this.title === '编辑') {
this.form = { ...this.data.data }
}
},
methods: {
// TODO：编辑金币管理数据
update(data) {
aiTextToImageUpdate(data).then(res => {
if (res.code === 200) {
this.$message.success('更新成功')
this.Visible = false
} else {
this.$message.error('更新失败')
}
})
},
// 提交按钮
submit(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
const data = JSON.parse(JSON.stringify(this.form))
if (this.title === '编辑') {
this.update(data)
}
} else {
return false
}
})
},
// 上传图片返回地址
changeCoverImgUrl(data) {
this.form.image = data
},
// 关闭编辑
close() {
this.$emit('close')
}
}
}
</script>
src/views/aiManagement/aiTxtToImg/index.vue
-255
View File
@@ -1,255 +0,0 @@
<template>
<div class="pf-warpper avlist">
<el-row class="table-form">
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
<el-form-item>
<el-input clearable placeholder="ID" v-model="searchData.id" @clear="onClear('id')" />
</el-form-item>
<el-form-item>
<el-input clearable placeholder="用户ID" v-model.number="searchData.userId" @clear="onClear('userId')" />
</el-form-item>
<el-form-item>
<el-select placeholder="请选择任务进度" clearable v-model="searchData.status" @clear="onClear('status')">
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in aiImgToVideoStatusList" />
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info">刷新</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-col>
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
<el-table-column align="center" label="Id">
<template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column>
<el-table-column align="center" label="用户ID">
<template slot-scope="scope">{{ scope.row.userId }}</template>
</el-table-column>
<el-table-column align="center" label="文生图金币个数">
<template slot-scope="scope">{{ scope.row.coin/100 }}</template>
</el-table-column>
<el-table-column align="center" label="任务进度">
<template slot-scope="scope">{{ scope.row.status | aiImgToVideoType }}</template>
</el-table-column>
<el-table-column width="100" align="center" label="是否删除">
<template slot-scope="scope">
<el-button :type="scope.row.isDelete ? 'danger' : 'success'" plain size="mini">{{ scope.row.isDelete ? '已删除' : '未删除' }}</el-button>
</template>
</el-table-column>
<el-table-column width="100" align="center" label="是否使用免费次数">
<template slot-scope="scope">
<el-button :type="scope.row.isFreeTimes ? 'danger' : 'success'" plain size="mini">{{ scope.row.isFreeTimes ? '是' : '否' }}</el-button>
</template>
</el-table-column>
<el-table-column width="100" align="center" label="是否被用户隐藏">
<template slot-scope="scope">
<el-button :type="scope.row.isHide ? 'danger' : 'success'" plain size="mini">{{ scope.row.isHide ? '是' : '否' }}</el-button>
</template>
</el-table-column>
<el-table-column align="center" width="100" label="未处理的图片地址">
<template slot-scope="scope">
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.imgUrl"> </ShowImg>
</template>
</el-table-column>
<el-table-column align="center" width="100" label="处理后的图片地址">
<template slot-scope="scope">
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.newImgUrl"> </ShowImg>
</template>
</el-table-column>
<el-table-column align="center" label="图片描述">
<template slot-scope="scope">{{ scope.row.text }}</template>
</el-table-column>
<el-table-column align="center" label="创建时间" width="180">
<template slot-scope="scope">{{ scope.row.createdAt | BeiJingTime }} </template>
</el-table-column>
<el-table-column align="center" label="更新时间" width="180">
<template slot-scope="scope">{{ scope.row.updatedAt | BeiJingTime }} </template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
<el-button @click="changeStatus(scope.$index, scope.row)" size="mini" type="danger">退款</el-button>
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<div class="table-pagination">
<el-pagination
:current-page="searchData.pageNum"
:page-size="searchData.pageSize"
:page-sizes="[10, 20, 30, 50, 100]"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
layout="total, sizes, prev, pager, next, jumper"/>
</div>
<!-- 新增及编辑 -->
<Edit :data="editData" :aiImgToVideoStatusList="aiImgToVideoStatusList" v-if="editVisible" @close="closeEdit" />
</div>
</template>
<script>
// 引入模块
import Edit from './components/AddOrEdit'
import ShowImg from '@/components/ShowImg/index.vue'
import { aiTextToImageList, aiTextToImageDel, aiTextToImageUpdate } from '@/api/aiManagement/aiTxtToImg.js'
export default {
name: 'Gold',
components: {
Edit,
ShowImg
},
data() {
return {
aiImgToVideoStatusList: [
{ id: 1, name: '下单成功' },
{ id: 2, name: '已提交' },
{ id: 3, name: '生成成功' },
{ id: 4, name: '生成失败' },
{ id: 5, name: '退款' }
],
// 请求列表参数
searchData: {
userId: undefined,
status: undefined,
id: undefined,
pageNum: 1,
pageSize: 10
},
resData: [], // el-table表格数据
editVisible: false, // 新增或编辑弹出框
total: 0, // 数据总条数
loading: true, // 列表加载状态
// 编辑数据
editData: {
title: '新增',
data: {}
}
}
},
mounted() {
this.getGoldList()
},
filters: {
aiImgToVideoType(id) {
switch (id) {
case 1:
return '下单成功'
case 2:
return '已提交'
case 3:
return '生成成功'
case 4:
return '生成失败'
case 5:
return '退款'
}
}
},
methods: {
// TODO：请求金币管理数据列表
getGoldList() {
this.loading = true
aiTextToImageList(this.searchData).then(res => {
if (res.code === 200) {
this.resData = res.data.list
this.total = res.data.total
} else {
this.resData = []
this.total = 0
this.$message.error('请求列表失败!')
}
this.loading = false
})
},
// TODO:删除金币管理列表数据
handleDelete(index, row) {
this.$confirm('确定删除?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
aiTextToImageDel({ id: row.id }).then(res => {
if (res.code === 200) {
this.getGoldList()
this.$message.success('成功删除!')
} else {
this.$message.error('操作失败')
}
})
})
},
changeStatus(index, row) {
this.$confirm('确定退款?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
aiTextToImageUpdate({ id: row.id, status: 5 }).then(res => {
if (res.code === 200) {
this.getGoldList()
this.$message.success('已退款!')
} else {
this.$message.error('操作失败')
}
})
})
},
onSearch() {
this.searchData.pageNum = 1
this.searchData.pageSize = 10
this.getGoldList()
},
// 刷新数据
refreshView() {
this.searchData = {
pageNum: 1,
pageSize: 10
}
this.getGoldList()
},
// 切换每页数据量
handleSizeChange(val) {
this.searchData.pageSize = val
this.getGoldList()
},
// 切换页数
handleCurrentChange(val) {
this.searchData.pageNum = val
this.getGoldList()
},
// 编辑按钮
handleEdit(index, row) {
this.editVisible = true
this.editData = {
title: '编辑',
data: row
}
},
// 关闭编辑弹窗
closeEdit() {
this.editData = {
title: '新增',
data: {}
}
this.editVisible = false
this.refreshView()
}
}
}
</script>
src/views/lsjMediaLibrary/comicsList/components/AddOrEdit.vue
-517
View File
@@ -1,517 +0,0 @@
<template>
<el-dialog :title="title" :visible.sync="Visible" width="900px" center class="ac-dialog"
:close-on-click-modal="false" @close="close">
<el-form :inline="true" :model="form" class="demo-form-inline" label-width="120px" label-position="right">
<el-row :gutter="24">
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="标题">
<el-input v-model="form.name" style="width: 200px" />
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="子标题">
<el-input v-model="form.sub_title" style="width: 200px" />
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="价格">
<el-input v-model="form.money" style="width: 200px" />
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="描述">
<el-input v-model="form.description" style="width: 200px" />
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="作者">
<el-input v-model="form.author" style="width: 200px" />
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="是否有声">
<el-select v-model="form.is_adult" placeholder="请选择是否有声">
<el-option :value="'y'" :label="'是'"></el-option>
<el-option :value="'n'" :label="'否'"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="更新状态">
<el-select v-model="form.update_status" placeholder="请选择更新状态">
<el-option :value="'0'" :label="'更新中'"></el-option>
<el-option :value="'1'" :label="'已完结'"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="分类">
<el-input v-model="form.category" style="width: 200px" />
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="章节列表">
<el-button size="small" type="success" @click="showDetailFn(form.chapter)">查看漫画章节详情</el-button>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="标签">
<el-tag :key="index + 'tagData'" style="margin: 2px" v-for="(item, index) in form.tags" size="mini">
{{ item.name }}
</el-tag>
</el-form-item>
</el-col>
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="12">
<el-form-item label="更新时间">
<el-date-picker style="width: 200px" v-model="form.updated_at" type="date" placeholder="选择日期"
value-format="yyyy-MM-ddTHH:mm:ssZ">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="封面">
<ShowImg style="width: 100px; height: 100px;" :noNeedDoamin="true" :urls="form.img">
</ShowImg>
</el-form-item>
</el-col>
</el-row>
</el-form>
<ComicsDetailView v-if="showDetail" :itemData="novelDetailData" @close="showDetail = false" />
<div slot="footer" class="dialog-footer">
<el-button @click.native.prevent="Visible = false"> 取 消 </el-button>
</div>
</el-dialog>
</template>
<script>
import 'videojs-contrib-hls'
import { lsjComicsDetail } from '@/api/lsjMediaLibrary/comicsList.js'
import ShowImg from '@/components/ShowImg/index.vue'
import ComicsDetailView from '@/components/ComicsDetailView/index.vue'
export default {
name: 'AddOrEdit',
props: ['data'],
components: {
ShowImg,
ComicsDetailView
},
data() {
return {
coverTypeList: [
{ label: '横版', value: 'long' },
{ label: '竖版', value: 'short' },
],
novelDetailData:[],
showDetail:false,
type: undefined,
videoType: undefined,
innerVisible: false,
Visible: true,
title: '',
taskId: '',
tags: null,
fieldNameFs: '', // 正片地址全称
form: {
links: [{
m3u8_url: '',
preview_m3u8_url: '',
}]
},
}
},
async created() {
this.title = this.data.title
if (this.title === '查看详情') {
await this.getVideoDetail()
if (this.form.links.m3u8_url) {
this.open()
}
}
if (this.player) {
this.player.dispose()
}
},
methods: {
showDetailFn(row) {
this.novelDetailData = row
this.showDetail = true
},
getVideoDetail() {
lsjComicsDetail({ id: this.data.data.id }).then((res) => {
if (res.code === 200) {
this.form = res.data
} else {
this.$message.error('请求失败!')
}
})
},
filterM3u8(v) {
return /\.m3u8/g.test(v) ? v : v + '.m3u8'
},
// 清空某一项筛选列表
onClear(key) {
this.form.param[key] = []
},
// 上传图片返回地址
changeCoverImgUrl(data) {
this.form.coverImg = data
},
// 关闭编辑
close() {
if (this.player) {
this.player.dispose()
}
this.$emit('close')
}
}
}
</script>
<style lang="scss">
.el-dialog {
display: flex;
flex-direction: column;
margin: 0 !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*height:600px;*/
max-height: calc(100% - 30px);
max-width: calc(100% - 30px);
}
.el-dialog .el-dialog__body {
flex: 1;
overflow: auto;
}
.videoBox {
display: flex;
justify-content: center;
overflow: hidden;
}
.el-textarea.is-disabled.ti .el-textarea__inner {
color: red;
}
.media-box {
width: 100%;
height: 400px;
text-align: center;
overflow: hidden;
img {
height: 100%;
max-width: 100%;
}
#my-video {
width: 100% !important;
height: 100% !important;
border: none !important;
}
}
.check_upload {
position: relative;
padding: 10px;
overflow: hidden;
border: 1px dashed #ccc;
background-color: #f5f5f5;
div {
display: inline-block;
position: relative;
padding: 4px 8px;
font-size: 100%;
line-height: 1.4;
color: #666;
border: 1px solid #666;
cursor: pointer;
border-radius: 2px;
background: none;
outline: none;
}
}
.itemData-main {
/* rem适配基础设置 */
font-size: 16px;
/* 基准字体大小 */
background: #000;
color: #fff;
height: 844px;
overflow-y: scroll;
padding: 10px;
a,
a:link,
a:visited,
a:hover,
a:active {
text-decoration: none;
color: inherit;
}
.topBox {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px;
background: #212121;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99;
/* display: none; */
}
.navBtn {
width: 51px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: #E0E0E0;
border-radius: 6px;
background: rgba(255, 255, 255, 0.10);
}
.navBtn .moreIcon {
width: 16px;
height: 16px;
margin-right: 3px;
}
.logo {
width: 94px;
height: 32px;
}
.searchIcon {
width: 24px;
height: 24px;
margin-left: 27px;
}
.header {
width: 100%;
/* height: 159px; */
background: #212121;
padding: 12px 16px;
box-sizing: border-box;
margin-bottom: 20px;
}
.header .title {
text-align: center;
color: #BDBDBD;
font-size: 26px;
line-height: 32px;
margin-bottom: 14px;
}
.header .info {
font-size: 14px;
line-height: 20px;
color: rgba(255, 255, 255, 0.70);
display: flex;
align-items: center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
overflow: hidden;
}
.header .info a {
text-decoration-line: underline;
}
.main .lineBox {
padding: 0 16px;
box-sizing: border-box;
}
.main .lineBox .line {
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.10);
margin: 18px 0;
}
.postContent {
margin: 36px 0 0;
}
.postBox {
color: #FAFAFA;
/* margin-bottom: 18px; */
}
.postTitle {
font-size: 24px;
font-weight: 600;
line-height: 32px;
margin-bottom: 28px;
padding: 0 16px;
box-sizing: border-box;
}
.postText {
color: #FAFAFA;
margin: 0 16px 36px;
font-size: 16px;
line-height: 22px;
}
.postimage {
width: 100%;
height: auto;
margin-bottom: 18px;
/* margin-bottom: 47px; */
}
.postDesc {
font-size: 16px;
color: #FAFAFA;
line-height: 22px;
padding: 0 16px;
box-sizing: border-box;
margin-bottom: 19px;
}
.postDesc span {
font-weight: 600;
}
.postLine {
margin: 0 16px;
border-bottom: 1px dashed rgba(255, 255, 255, 0.50);
}
.tagBox {
margin-bottom: 12px;
padding: 0 16px;
}
.tagBox .tagList {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
margin-bottom: 18px;
}
.tagBox .tagList .tagItem {
padding: 8px 16px;
box-sizing: border-box;
border-radius: 62px;
background: rgba(255, 255, 255, 0.05);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #BDBDBD;
}
.lastDay {
text-align: right;
color: #BDBDBD;
line-height: 20px;
font-size: 14px;
}
.copyBox {
color: #FFF;
text-align: center;
text-shadow: 0 0 20px #FF8400, 0 0 20px #FF8400;
font-family: "PingFang SC";
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 28px;
/* 140% */
padding: 18px;
box-sizing: border-box;
margin-bottom: 18px;
}
.copySuccess {
color: #FFF;
text-align: center;
text-shadow: 0 0 20px #FF00B2, 0 0 20px #FF00B2;
font-family: "PingFang SC";
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 28px;
/* 140% */
padding: 18px;
box-sizing: border-box;
margin-bottom: 18px;
}
.dplayerBox {
margin-bottom: 18px;
max-height: 300px;
}
.gridAdvBox {
margin: 0 16px 18px;
}
.gridAdvBox .gridAdvTitle {
padding: 0 16px;
box-sizing: border-box;
height: 49px;
display: flex;
align-items: center;
border-top: 1px solid rgba(255, 255, 255, 0.10);
background: rgba(255, 255, 255, 0.05);
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px;
}
.keywords {
box-sizing: border-box;
font-size: 16px;
line-height: 22px;
color: #BDBDBD;
}
@media screen and (min-width: 768px) {
/* body {
margin-top: 140px;
} */
body main {
max-width: 720px;
margin: 0 auto;
}
.header {
max-width: 720px;
margin: 0 auto;
}
.topBox {
display: none;
}
}
}
</style>
src/views/lsjMediaLibrary/comicsList/index.vue
-337
View File
@@ -1,337 +0,0 @@
<template>
<div class="pf-warpper avlist">
<el-row class="table-form">
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
<el-form-item>
<el-input placeholder="请输入关键词" clearable v-model="searchData.keywords" @clear="onClear('keywords')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入ID" clearable v-model="searchData.id" @clear="onClear('id')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入源站" clearable v-model="searchData.source_site" @clear="onClear('source_site')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入源链接" clearable v-model="searchData.source_url" @clear="onClear('source_url')" />
</el-form-item>
<el-form-item>
<el-select placeholder="请选择是否完结" clearable v-model="searchData.is_end" @clear="onClear('is_end')">
<el-option label="已完结" value="y" />
<el-option label="未完结" value="n" />
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="请选择分类" clearable v-model="searchData.cat_id" @clear="onClear('cat_id')">
<el-option label="韩漫" value="韩漫" />
<el-option label="日漫" value="日漫" />
<el-option label="国漫" value="国漫" />
<el-option label="本子" value="本子" />
<el-option label="色图" value="色图" />
<el-option label="腐漫" value="腐漫" />
<el-option label="Cosplay" value="Cosplay" />
<el-option label="3D" value="3D" />
<el-option label="CG" value="CG" />
<el-option label="欧美漫画" value="欧美漫画" />
<el-option label="港台漫画" value="港台漫画" />
<el-option label="真人漫画" value="真人漫画" />
<el-option label="同人" value="同人" />
<el-option label="写真" value="写真" />
<el-option label="AI" value="AI" />
</el-select>
</el-form-item>
<el-form-item>
<el-date-picker v-model="time" type="daterange" range-separator="至" value-format="yyyy-MM-dd HH:mm:ss"
start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button @click="onSeach" icon="el-icon-search" plain type="primary">搜索</el-button>
<!-- <el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button> -->
<el-button @click="addPostArray" icon="el-icon-circle-plus-outline" plain type="warning">批量加入后台视频库</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-col>
<el-table :data="resData" element-loading-text="拼命加载中" border height="735" highlight-current-row
style="width: 100%; font-size: 10px" v-loading="loading" :row-style="{ height: '30px' }"
:cell-style="{ padding: '5px' }" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50"> </el-table-column>
<el-table-column align="center" label="ID" width="190px">
<template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column>
<el-table-column align="center" label="标题" width="190px" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
<el-table-column align="center" label="描述" width="190px" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.description }}</template>
</el-table-column>
<el-table-column align="center" label="封面" width="80px">
<template slot-scope="scope">
<ShowImg style="width: 30px; height: 30px; margin: 0 auto" :noNeedDoamin="true" :urls="scope.row.img">
</ShowImg>
</template>
</el-table-column>
<el-table-column align="center" label="分类名称" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.category }}</template>
</el-table-column>
<el-table-column align="center" label="章节数量">
<template slot-scope="scope">{{
scope.row.chapter_count
}}</template>
</el-table-column>
<el-table-column align="center" label="标签" width="300px">
<template slot-scope="scope">
<el-tag :key="index + 'tagData'" style="margin: 2px" v-for="(item, index) in scope.row.tags"
size="mini">
{{ item.name }}
</el-tag>
</template>
</el-table-column>
<el-table-column align="center" label="类型">
<template slot-scope="scope">{{ scope.row.type }}</template>
</el-table-column>
<el-table-column align="center" label="价格">
<template slot-scope="scope">{{ scope.row.money }}</template>
</el-table-column>
<el-table-column align="center" label="是否有声" width="110px">
<template slot-scope="scope">
<el-button plain size="mini">{{
scope.row.is_adult === 'y' ? '有声' : '文本' }}</el-button>
</template>
</el-table-column>
<el-table-column align="center" label="更新状态" width="110px">
<template slot-scope="scope">{{
scope.row.update_status | changeUpdateStatus
}}</template>
</el-table-column>
<el-table-column align="center" label="是否完结" width="110px">
<template slot-scope="scope">
<el-button plain size="mini">{{
scope.row.is_end === 'y' ? '已完结' : '未完结' }}</el-button>
</template>
</el-table-column>
<el-table-column align="center" label="子标题" width="190px" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.sub_title }}</template>
</el-table-column>
<el-table-column align="center" label="别名" width="190px" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.alias_name }}</template>
</el-table-column>
<el-table-column align="center" width="120px" label="最后更新时间">
<template slot-scope="scope">{{ scope.row.last_update | BeiJingTime }}</template>
</el-table-column>
<el-table-column align="center" width="120px" label="创建时间">
<template slot-scope="scope">{{ scope.row.created_at | BeiJingTime }}</template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="300">
<template slot-scope="scope">
<el-button @click="addPost(scope.$index, scope.row)" size="mini"
:type="scope.row.isAdd ? 'info' : 'primary'" :disabled="scope.row.isAdd ? true : false">{{
`${scope.row.isAdd ? '已加入后台资源库' : '加入后台资源库'}` }}</el-button>
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">查看详情</el-button>
<!-- <el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button> -->
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<div class="table-pagination">
<el-pagination :current-page="page" :page-size="page_size"
:page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange"
@size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
</div>
<!-- 查看详情 -->
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
<NovelDetailView v-if="showDetail" :itemData="novelDetailData" @close="closeEdit"
/>
</div>
</template>
<script>
// 引入模块
import ShowImg from '@/components/ShowImg/index.vue'
import Edit from './components/AddOrEdit'
import { lsjComicsList, lsjComicsDel, lsjComicsAdd } from '@/api/lsjMediaLibrary/comicsList.js'
import { audioAdd } from '@/api/novelsManagement/audio.js'
import { isNumber } from 'mathjs/lib/entry/typeChecks'
import NovelDetailView from '@/components/NovelDetailView/index.vue'
export default {
name: 'MediaCat',
components: {
ShowImg,
Edit,
NovelDetailView
},
data() {
return {
page: 1,
page_size: 20,
novelDetailData:[],
// 请求列表参数
searchData: {
id: undefined,
name: undefined, // 外用状态
status: undefined, // "string",当前状态
cat_id: undefined // 视频归类
},
time: undefined,
resData: [], // el-table表格数据
total: 0, // 数据总条数
selectArray: undefined,
editShowLocationVisible: undefined,
showDetail: false,
loading: true, // 列表加载状态
// 编辑数据
editVisible: false, // 新增或编辑弹出框
editData: {
title: '查看详情',
data: {}
}
}
},
filters: {
changeUpdateStatus(v){
switch (v) {
case '0':
return '更新中'
case '1':
return '更新完成'
}
},
},
mounted() {
this.getMediaSearch()
},
methods: {
showDetailFn(row) {
this.novelDetailData = row
this.showDetail = true
},
// TODO:加入后台视频库
addPost(index, row) {
lsjComicsAdd({ id: row.id }).then((res) => {
if (res.code === 200) {
this.$message.success('加入成功!')
this.getMediaSearch()
} else {
this.$message.error('加入失败!')
}
})
},
// TODO:请求影片列表数据
getMediaSearch() {
this.loading = true
if(isNumber(this.page)|| isNumber(this.page_size)){
this.searchData.page = this.page + ''
this.searchData.page_size = this.page_size + ''
}
if (this.time) {
this.searchData.start_time = this.time[0]
this.searchData.end_time = this.time[1]
} else {
this.searchData.start_time = undefined
this.searchData.end_time = undefined
}
lsjComicsList(this.searchData).then((res) => {
if (res.code === 200) {
this.resData = res.data.data
this.total = Number(res.data.total)
} else {
this.$message.error('请求列表失败!')
this.resData = []
this.total = 0
}
this.loading = false
})
},
// TODO:删除影片列表数据
handleDelete(index, row) {
this.$confirm('确定删除?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
lsjComicsDel({ id: row.id }).then((res) => {
if (res.code === 200) {
this.getMediaSearch()
this.$message.success('成功删除!')
} else {
this.$message.error(res.tip)
}
})
})
},
addPostArray() {
Object.keys(this.selectArray).forEach((key) => {
if (!this.selectArray[key].isAdd) {
this.addPost(key, this.selectArray[key])
}
})
},
onSeach() {
this.page = 1
this.page_size = 20
this.getMediaSearch()
},
// 切换每页数据量
handleSizeChange(val) {
this.page_size = val
this.getMediaSearch()
},
// 切换页数
handleCurrentChange(val) {
this.page = val
this.getMediaSearch()
},
handleSelectionChange(val) {
this.selectArray = val
},
// 新增按钮
add() {
this.editVisible = true // 新增或编辑弹出框
this.editData = {
title: '新增',
data: {}
}
},
// 编辑按钮
handleEdit(index, row) {
this.editVisible = true // 新增或编辑弹出框
this.editData = {
title: '查看详情',
data: row
}
},
// 关闭编辑弹窗
closeEdit() {
this.editVisible = false
this.editShowLocationVisible = false
this.showDetail = false
this.getMediaSearch()
},
// 清空某一项筛选列表
onClear(key) {
this.searchData[key] = undefined
this.getMediaSearch()
}
}
}
</script>
src/views/lsjMediaLibrary/novelList/components/AddOrEdit.vue
-513
View File
@@ -1,513 +0,0 @@
<template>
<el-dialog :title="title" :visible.sync="Visible" width="900px" center class="ac-dialog" :close-on-click-modal="false"
@close="close">
<el-form :inline="true" :model="form" class="demo-form-inline" label-width="120px" label-position="right">
<el-row :gutter="24">
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="标题">
<el-input v-model="form.name" style="width: 200px" />
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="子标题">
<el-input v-model="form.sub_title" style="width: 200px" />
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="价格">
<el-input v-model="form.money" style="width: 200px" />
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="描述">
<el-input v-model="form.description" style="width: 200px" />
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="作者">
<el-input v-model="form.author" style="width: 200px" />
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="是否有声">
<el-select v-model="form.is_adult" placeholder="请选择是否有声">
<el-option :value="'y'" :label="'是'"></el-option>
<el-option :value="'n'" :label="'否'"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="更新状态">
<el-select v-model="form.update_status" placeholder="请选择更新状态">
<el-option :value="'0'" :label="'更新中'"></el-option>
<el-option :value="'1'" :label="'已完结'"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="分类">
<el-input v-model="form.category_name" style="width: 200px" />
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="章节列表">
<el-button size="small" type="success" @click="showDetailFn(form.chapter)">查看小说章节</el-button>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="标签">
<el-tag :key="index + 'tagData'" style="margin: 2px" v-for="(item, index) in form.tags" size="mini">
{{ item.name }}
</el-tag>
</el-form-item>
</el-col>
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="12">
<el-form-item label="更新时间">
<el-date-picker style="width: 200px" v-model="form.updated_at" type="date" placeholder="选择日期"
value-format="yyyy-MM-ddTHH:mm:ssZ">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="封面">
<ShowImg style="width: 100px; height: 100px;" :noNeedDoamin="true" :urls="form.img">
</ShowImg>
</el-form-item>
</el-col>
</el-row>
</el-form>
<NovelDetailView v-if="showDetail" :itemData="novelDetailData" @close="showDetail = false" />
<div slot="footer" class="dialog-footer">
<el-button @click.native.prevent="Visible = false"> 取 消 </el-button>
</div>
</el-dialog>
</template>
<script>
import 'videojs-contrib-hls'
import { lsjNovelDetail } from '@/api/lsjMediaLibrary/novelList.js'
import ShowImg from '@/components/ShowImg/index.vue'
import NovelDetailView from '@/components/NovelDetailView/index.vue'
export default {
name: 'AddOrEdit',
props: ['data'],
components: {
ShowImg,
NovelDetailView
},
data() {
return {
coverTypeList: [
{ label: '横版', value: 'long' },
{ label: '竖版', value: 'short' },
],
novelDetailData: [],
showDetail: false,
type: undefined,
videoType: undefined,
innerVisible: false,
Visible: true,
title: '',
taskId: '',
tags: null,
fieldNameFs: '', // 正片地址全称
form:{
links:{}
},
}
},
async created() {
this.title = this.data.title
if (this.title === '查看详情') {
await this.getVideoDetail()
}
if (this.player) {
this.player.dispose()
}
},
methods: {
showDetailFn(row) {
this.novelDetailData = row
this.showDetail = true
},
getVideoDetail() {
lsjNovelDetail({ id: this.data.data.id }).then((res) => {
if (res.code === 200) {
this.form = res.data
} else {
this.$message.error('请求失败!')
}
})
},
filterM3u8(v) {
return /\.m3u8/g.test(v) ? v : v + '.m3u8'
},
// 清空某一项筛选列表
onClear(key) {
this.form.param[key] = []
},
// 上传图片返回地址
changeCoverImgUrl(data) {
this.form.coverImg = data
},
// 关闭编辑
close() {
if (this.player) {
this.player.dispose()
}
this.$emit('close')
}
}
}
</script>
<style lang="scss">
.el-dialog {
display: flex;
flex-direction: column;
margin: 0 !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*height:600px;*/
max-height: calc(100% - 30px);
max-width: calc(100% - 30px);
}
.el-dialog .el-dialog__body {
flex: 1;
overflow: auto;
}
.videoBox {
display: flex;
justify-content: center;
overflow: hidden;
}
.el-textarea.is-disabled.ti .el-textarea__inner {
color: red;
}
.media-box {
width: 100%;
height: 400px;
text-align: center;
overflow: hidden;
img {
height: 100%;
max-width: 100%;
}
#my-video {
width: 100% !important;
height: 100% !important;
border: none !important;
}
}
.check_upload {
position: relative;
padding: 10px;
overflow: hidden;
border: 1px dashed #ccc;
background-color: #f5f5f5;
div {
display: inline-block;
position: relative;
padding: 4px 8px;
font-size: 100%;
line-height: 1.4;
color: #666;
border: 1px solid #666;
cursor: pointer;
border-radius: 2px;
background: none;
outline: none;
}
}
.itemData-main {
/* rem适配基础设置 */
font-size: 16px;
/* 基准字体大小 */
background: #000;
color: #fff;
height: 844px;
overflow-y: scroll;
padding: 10px;
a,
a:link,
a:visited,
a:hover,
a:active {
text-decoration: none;
color: inherit;
}
.topBox {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px;
background: #212121;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99;
/* display: none; */
}
.navBtn {
width: 51px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: #E0E0E0;
border-radius: 6px;
background: rgba(255, 255, 255, 0.10);
}
.navBtn .moreIcon {
width: 16px;
height: 16px;
margin-right: 3px;
}
.logo {
width: 94px;
height: 32px;
}
.searchIcon {
width: 24px;
height: 24px;
margin-left: 27px;
}
.header {
width: 100%;
/* height: 159px; */
background: #212121;
padding: 12px 16px;
box-sizing: border-box;
margin-bottom: 20px;
}
.header .title {
text-align: center;
color: #BDBDBD;
font-size: 26px;
line-height: 32px;
margin-bottom: 14px;
}
.header .info {
font-size: 14px;
line-height: 20px;
color: rgba(255, 255, 255, 0.70);
display: flex;
align-items: center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
overflow: hidden;
}
.header .info a {
text-decoration-line: underline;
}
.main .lineBox {
padding: 0 16px;
box-sizing: border-box;
}
.main .lineBox .line {
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.10);
margin: 18px 0;
}
.postContent {
margin: 36px 0 0;
}
.postBox {
color: #FAFAFA;
/* margin-bottom: 18px; */
}
.postTitle {
font-size: 24px;
font-weight: 600;
line-height: 32px;
margin-bottom: 28px;
padding: 0 16px;
box-sizing: border-box;
}
.postText {
color: #FAFAFA;
margin: 0 16px 36px;
font-size: 16px;
line-height: 22px;
}
.postimage {
width: 100%;
height: auto;
margin-bottom: 18px;
/* margin-bottom: 47px; */
}
.postDesc {
font-size: 16px;
color: #FAFAFA;
line-height: 22px;
padding: 0 16px;
box-sizing: border-box;
margin-bottom: 19px;
}
.postDesc span {
font-weight: 600;
}
.postLine {
margin: 0 16px;
border-bottom: 1px dashed rgba(255, 255, 255, 0.50);
}
.tagBox {
margin-bottom: 12px;
padding: 0 16px;
}
.tagBox .tagList {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
margin-bottom: 18px;
}
.tagBox .tagList .tagItem {
padding: 8px 16px;
box-sizing: border-box;
border-radius: 62px;
background: rgba(255, 255, 255, 0.05);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #BDBDBD;
}
.lastDay {
text-align: right;
color: #BDBDBD;
line-height: 20px;
font-size: 14px;
}
.copyBox {
color: #FFF;
text-align: center;
text-shadow: 0 0 20px #FF8400, 0 0 20px #FF8400;
font-family: "PingFang SC";
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 28px;
/* 140% */
padding: 18px;
box-sizing: border-box;
margin-bottom: 18px;
}
.copySuccess {
color: #FFF;
text-align: center;
text-shadow: 0 0 20px #FF00B2, 0 0 20px #FF00B2;
font-family: "PingFang SC";
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 28px;
/* 140% */
padding: 18px;
box-sizing: border-box;
margin-bottom: 18px;
}
.dplayerBox {
margin-bottom: 18px;
max-height: 300px;
}
.gridAdvBox {
margin: 0 16px 18px;
}
.gridAdvBox .gridAdvTitle {
padding: 0 16px;
box-sizing: border-box;
height: 49px;
display: flex;
align-items: center;
border-top: 1px solid rgba(255, 255, 255, 0.10);
background: rgba(255, 255, 255, 0.05);
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px;
}
.keywords {
box-sizing: border-box;
font-size: 16px;
line-height: 22px;
color: #BDBDBD;
}
@media screen and (min-width: 768px) {
/* body {
margin-top: 140px;
} */
body main {
max-width: 720px;
margin: 0 auto;
}
.header {
max-width: 720px;
margin: 0 auto;
}
.topBox {
display: none;
}
}
}
</style>
src/views/lsjMediaLibrary/novelList/index.vue
-334
View File
@@ -1,334 +0,0 @@
<template>
<div class="pf-warpper avlist">
<el-row class="table-form">
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
<el-form-item>
<el-input placeholder="请输入关键词" clearable v-model="searchData.keywords" @clear="onClear('keywords')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入ID" clearable v-model="searchData.ids" @clear="onClear('id')" />
</el-form-item>
<el-form-item>
<el-select placeholder="请选择是否完结" clearable v-model="searchData.is_end" @clear="onClear('is_end')">
<el-option label="已完结" value="y" />
<el-option label="未完结" value="n" />
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="请选择分类" clearable v-model="searchData.cat_id" @clear="onClear('cat_id')">
<el-option label="有声" value="audio" />
<el-option label="成人" value="18R" />
<el-option label="贤者" value="normal" />
</el-select>
</el-form-item>
<el-form-item>
<el-date-picker v-model="time" type="daterange" range-separator="至" value-format="yyyy-MM-dd HH:mm:ss"
start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button @click="onSeach" icon="el-icon-search" plain type="primary">搜索</el-button>
<!-- <el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button> -->
<el-button @click="addPostArray" icon="el-icon-circle-plus-outline" plain type="warning">批量加入后台视频库</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-col>
<el-table :data="resData" element-loading-text="拼命加载中" border height="735" highlight-current-row
style="width: 100%; font-size: 10px" v-loading="loading" :row-style="{ height: '30px' }"
:cell-style="{ padding: '5px' }" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50"> </el-table-column>
<el-table-column align="center" label="ID" width="190px">
<template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column>
<el-table-column align="center" label="标题" width="190px" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
<el-table-column align="center" label="子标题" width="190px" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.sub_title }}</template>
</el-table-column>
<el-table-column align="center" label="别名" width="390px" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.alias_name }}</template>
</el-table-column>
<el-table-column align="center" label="描述" width="190px" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.description }}</template>
</el-table-column>
<el-table-column align="center" label="封面" width="80px">
<template slot-scope="scope">
<ShowImg style="width: 30px; height: 30px; margin: 0 auto" :noNeedDoamin="true" :urls="scope.row.img">
</ShowImg>
</template>
</el-table-column>
<el-table-column align="center" label="分类名称" width="390px" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.category_name }}</template>
</el-table-column>
<el-table-column align="center" label="章节数量">
<template slot-scope="scope">{{
scope.row.chapter_count
}}</template>
</el-table-column>
<el-table-column align="center" label="标签" width="300px">
<template slot-scope="scope">
<el-tag :key="index + 'tagData'" style="margin: 2px" v-for="(item, index) in scope.row.tags"
size="mini">
{{ item.name }}
</el-tag>
</template>
</el-table-column>
<el-table-column align="center" label="类型">
<template slot-scope="scope">{{ scope.row.type }}</template>
</el-table-column>
<el-table-column align="center" label="价格">
<template slot-scope="scope">{{ scope.row.money }}</template>
</el-table-column>
<el-table-column align="center" label="是否有声" width="110px">
<template slot-scope="scope">
<el-button plain size="mini">{{
scope.row.is_adult === 'y' ? '有声' : '文本' }}</el-button>
</template>
</el-table-column>
<el-table-column align="center" label="更新状态" width="110px">
<template slot-scope="scope">{{
scope.row.update_status | changeUpdateStatus
}}</template>
</el-table-column>
<el-table-column align="center" label="是否完结" width="110px">
<template slot-scope="scope">
<el-button plain size="mini">{{
scope.row.is_end === 'y' ? '已完结' : '未完结' }}</el-button>
</template>
</el-table-column>
<el-table-column align="center" width="120px" label="最后更新时间">
<template slot-scope="scope">{{ scope.row.last_update | BeiJingTime }}</template>
</el-table-column>
<el-table-column align="center" width="120px" label="创建时间">
<template slot-scope="scope">{{ scope.row.created_at | BeiJingTime }}</template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="300">
<template slot-scope="scope">
<el-button @click="addPost(scope.$index, scope.row)" size="mini"
:type="scope.row.isAdd ? 'info' : 'primary'" :disabled="scope.row.isAdd ? true : false">{{
`${scope.row.isAdd ? '已加入后台资源库' : '加入后台资源库'}` }}</el-button>
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">查看详情</el-button>
<!-- <el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button> -->
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<div class="table-pagination">
<el-pagination :current-page="page" :page-size="page_size"
:page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange"
@size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
</div>
<!-- 查看详情 -->
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
<NovelDetailView v-if="showDetail" :itemData="novelDetailData" @close="closeEdit"
/>
</div>
</template>
<script>
// 引入模块
import ShowImg from '@/components/ShowImg/index.vue'
import Edit from './components/AddOrEdit'
import { lsjNovelList, lsjNovelDel, lsjNovelAdd } from '@/api/lsjMediaLibrary/novelList.js'
import { audioAdd } from '@/api/novelsManagement/audio.js'
import { isNumber } from 'mathjs/lib/entry/typeChecks'
import NovelDetailView from '@/components/NovelDetailView/index.vue'
export default {
name: 'MediaCat',
components: {
ShowImg,
Edit,
NovelDetailView
},
data() {
return {
page: 1,
page_size: 20,
novelDetailData:[],
// 请求列表参数
searchData: {
id: undefined,
name: undefined, // 外用状态
status: undefined, // "string",当前状态
cat_id: undefined // 视频归类
},
time: undefined,
resData: [], // el-table表格数据
total: 0, // 数据总条数
selectArray: undefined,
editShowLocationVisible: undefined,
showDetail: false,
loading: true, // 列表加载状态
// 编辑数据
editVisible: false, // 新增或编辑弹出框
editData: {
title: '查看详情',
data: {}
}
}
},
filters: {
changeUpdateStatus(v){
switch (v) {
case '0':
return '更新中'
case '1':
return '更新完成'
}
},
},
mounted() {
this.getMediaSearch()
},
methods: {
showDetailFn(row) {
this.novelDetailData = row
this.showDetail = true
},
// TODO:加入后台视频库
addPost(index, row) {
lsjNovelAdd({ id: row.id }).then((res) => {
if (res.code === 200) {
this.$message.success('加入成功!')
this.getMediaSearch()
} else {
this.$message.error('加入失败!')
}
})
},
// 加入后台音频库
addAudioArray() {
Object.keys(this.selectArray).forEach((key) => {
if (!this.selectArray[key].isAdd) {
this.audioListFn(key, this.selectArray[key])
}
})
},
// TODO:加入音频视频库
audioListFn(index, row) {
audioAdd({ fileId: row.id }).then((res) => {
if (res.code === 200) {
this.$message.success('加入成功!')
this.getMediaSearch()
} else {
this.$message.error('加入失败!')
}
})
},
// TODO:请求影片列表数据
getMediaSearch() {
this.loading = true
if(isNumber(this.page)|| isNumber(this.page_size)){
this.searchData.page = this.page + ''
this.searchData.page_size = this.page_size + ''
}
if (this.time) {
this.searchData.start_time = this.time[0]
this.searchData.end_time = this.time[1]
} else {
this.searchData.start_time = undefined
this.searchData.end_time = undefined
}
lsjNovelList(this.searchData).then((res) => {
if (res.code === 200) {
this.resData = res.data.data
this.total = Number(res.data.total)
} else {
this.$message.error('请求列表失败!')
this.resData = []
this.total = 0
}
this.loading = false
})
},
// TODO:删除影片列表数据
handleDelete(index, row) {
this.$confirm('确定删除?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
lsjNovelDel({ id: row.id }).then((res) => {
if (res.code === 200) {
this.getMediaSearch()
this.$message.success('成功删除!')
} else {
this.$message.error(res.tip)
}
})
})
},
addPostArray() {
Object.keys(this.selectArray).forEach((key) => {
if (!this.selectArray[key].isAdd) {
this.addPost(key, this.selectArray[key])
}
})
},
onSeach() {
this.page = 1
this.page_size = 20
this.getMediaSearch()
},
// 切换每页数据量
handleSizeChange(val) {
this.page_size = val
this.getMediaSearch()
},
// 切换页数
handleCurrentChange(val) {
this.page = val
this.getMediaSearch()
},
handleSelectionChange(val) {
this.selectArray = val
},
// 新增按钮
add() {
this.editVisible = true // 新增或编辑弹出框
this.editData = {
title: '新增',
data: {}
}
},
// 编辑按钮
handleEdit(index, row) {
this.editVisible = true // 新增或编辑弹出框
this.editData = {
title: '查看详情',
data: row
}
},
// 关闭编辑弹窗
closeEdit() {
this.editVisible = false
this.editShowLocationVisible = false
this.showDetail = false
this.getMediaSearch()
},
// 清空某一项筛选列表
onClear(key) {
this.searchData[key] = undefined
this.getMediaSearch()
}
}
}
</script>
src/views/lsjMediaLibrary/postList/components/AddOrEdit.vue
-543
View File
@@ -1,543 +0,0 @@
<template>
<el-dialog :title="title" :visible.sync="Visible" width="1800px" center class="ac-dialog"
:close-on-click-modal="false" @close="close">
<el-form :inline="true" :model="form" class="demo-form-inline" label-width="120px" label-position="right">
<el-row :gutter="24">
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-form-item label="标题">
<el-input v-model="form.title" style="width: 315px" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-form-item label="内容">
<el-input v-model="form.content" style="width: 315px" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-form-item label="封面">
<ShowImg style="width: 300px; height: 300px; margin: 0 auto" :noNeedDoamin="true" :urls="form.img">
</ShowImg>
</el-form-item>
</el-col>
<!-- <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
<el-form-item label="上架状态">
<el-switch
v-model="form.status"
active-color="#13ce66"
inactive-color="#ff4949"
style="width: 180px"></el-switch>
</el-form-item>
</el-col> -->
<!-- <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
<el-form-item label="付费类型">
<el-switch
v-model="form.update_status"
active-color="#13ce66"
inactive-color="#ff4949"
style="width: 180px"></el-switch>
</el-form-item>
</el-col> -->
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
<el-form-item label="分类">
<el-tag :key="index + 'tagData'" style="margin: 2px" v-for="(item, index) in form.categories" size="mini">
{{ item.name }}
</el-tag>
</el-form-item>
</el-col>
<el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
<el-form-item label="更新时间">
<el-date-picker style="width: 180px" v-model="form.time" type="date" placeholder="选择日期"
value-format="yyyy-MM-ddTHH:mm:ssZ">
</el-date-picker>
</el-form-item>
</el-col>
<el-col>
<el-form-item label="节点内容">
<div class="itemData-main">
<div class="postContent">
<div class="postBox" v-for="(item, index) in form.files" :key="index">
<!-- <p class="postTitle">{{ item.title }}</p> -->
<ShowImg :noNeedDoamin='true' :key="imgINdex" :urls="item.image" />
<!-- <span class="postText">{{ item.text }}</span> -->
<DPlayer ref="player" class="dplayerBox" v-if="item.video_link" :video="{
url: filterM3u8(item.video_link),
type: 'hls',
pic: '',
}" hotkey></DPlayer>
</div>
</div>
</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native.prevent="Visible = false"> 取 消 </el-button>
</div>
</el-dialog>
</template>
<script>
import DPlayer from '@/components/VueDplayerHls/index'
import 'videojs-contrib-hls'
import { lsjPostDetail } from '@/api/lsjMediaLibrary/postList.js'
import ShowImg from '@/components/ShowImg/index.vue'
export default {
name: 'AddOrEdit',
props: ['data'],
components: {
DPlayer,
ShowImg
},
data() {
return {
coverTypeList: [
{ label: '横版', value: 'long' },
{ label: '竖版', value: 'short' },
],
type: undefined,
videoType: undefined,
innerVisible: false,
Visible: true,
title: '',
taskId: '',
tags: null,
fieldNameFs: '', // 正片地址全称
form: {
links: [{
m3u8_url: '',
preview_m3u8_url: '',
}]
},
}
},
async created() {
this.title = this.data.title
if (this.title === '查看详情') {
await this.getVideoDetail()
if (this.form.links.m3u8_url) {
this.open()
}
}
if (this.player) {
this.player.dispose()
}
},
methods: {
getVideoDetail() {
lsjPostDetail({ id: this.data.data.id }).then((res) => {
if (res.code === 200) {
this.form = res.data
} else {
this.$message.error('请求失败!')
}
})
},
filterM3u8(v) {
return /\.m3u8/g.test(v) ? v : v + '.m3u8'
},
// 清空某一项筛选列表
onClear(key) {
this.form.param[key] = []
},
// 上传图片返回地址
changeCoverImgUrl(data) {
this.form.coverImg = data
},
// / 监听视频播放的回调函数
onPlayerPlay() { },
// / 监听暂停播放的回调函数
onPlayerPause() { },
// / 监听当前视频数据加载完成
onPlayerLoadeddata() { },
// / 监听当前视频数据加载失败
onPlayerError() { },
// / 监听当前视频数据加载ing
onPlayerWaiting() { },
// / 监听当前视频播放完成
onPlayerEnded() { },
open() {
this.mediaUrl =
'api/web/media/m3u8/' +
(this.form.links[0].m3u8_url.match(RegExp(/.m3u8/))
? this.form.links[0].m3u8_url
: this.form.links[0].m3u8_url + '.m3u8')
// this.$nextTick(function () {
// document.getElementById("media-box").innerHTML =
// '<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" style="width:100%;height:100%; " playsinline="true"></video>';
// this.player = videojs("my-video", {
// bigPlayButton: false,
// textTrackDisplay: false,
// posterImage: true,
// errorDisplay: true,
// controlBar: true,
// playbackRates: [0.5, 1, 1.5, 2, 3, 5, 10],
// });
// this.player.src(this.mediaUrl);
// });
},
// 关闭编辑
close() {
if (this.player) {
this.player.dispose()
}
this.$emit('close')
}
}
}
</script>
<style lang="scss">
.el-dialog {
display: flex;
flex-direction: column;
margin: 0 !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*height:600px;*/
max-height: calc(100% - 30px);
max-width: calc(100% - 30px);
}
.el-dialog .el-dialog__body {
flex: 1;
overflow: auto;
}
.videoBox {
display: flex;
justify-content: center;
overflow: hidden;
}
.el-textarea.is-disabled.ti .el-textarea__inner {
color: red;
}
.media-box {
width: 100%;
height: 400px;
text-align: center;
overflow: hidden;
img {
height: 100%;
max-width: 100%;
}
#my-video {
width: 100% !important;
height: 100% !important;
border: none !important;
}
}
.check_upload {
position: relative;
padding: 10px;
overflow: hidden;
border: 1px dashed #ccc;
background-color: #f5f5f5;
div {
display: inline-block;
position: relative;
padding: 4px 8px;
font-size: 100%;
line-height: 1.4;
color: #666;
border: 1px solid #666;
cursor: pointer;
border-radius: 2px;
background: none;
outline: none;
}
}
.itemData-main {
/* rem适配基础设置 */
font-size: 16px;
/* 基准字体大小 */
background: #000;
color: #fff;
height: 844px;
overflow-y: scroll;
padding: 10px;
a,
a:link,
a:visited,
a:hover,
a:active {
text-decoration: none;
color: inherit;
}
.topBox {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px;
background: #212121;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99;
/* display: none; */
}
.navBtn {
width: 51px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: #E0E0E0;
border-radius: 6px;
background: rgba(255, 255, 255, 0.10);
}
.navBtn .moreIcon {
width: 16px;
height: 16px;
margin-right: 3px;
}
.logo {
width: 94px;
height: 32px;
}
.searchIcon {
width: 24px;
height: 24px;
margin-left: 27px;
}
.header {
width: 100%;
/* height: 159px; */
background: #212121;
padding: 12px 16px;
box-sizing: border-box;
margin-bottom: 20px;
}
.header .title {
text-align: center;
color: #BDBDBD;
font-size: 26px;
line-height: 32px;
margin-bottom: 14px;
}
.header .info {
font-size: 14px;
line-height: 20px;
color: rgba(255, 255, 255, 0.70);
display: flex;
align-items: center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
overflow: hidden;
}
.header .info a {
text-decoration-line: underline;
}
.main .lineBox {
padding: 0 16px;
box-sizing: border-box;
}
.main .lineBox .line {
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.10);
margin: 18px 0;
}
.postContent {
margin: 36px 0 0;
}
.postBox {
color: #FAFAFA;
/* margin-bottom: 18px; */
}
.postTitle {
font-size: 24px;
font-weight: 600;
line-height: 32px;
margin-bottom: 28px;
padding: 0 16px;
box-sizing: border-box;
}
.postText {
color: #FAFAFA;
margin: 0 16px 36px;
font-size: 16px;
line-height: 22px;
}
.postimage {
width: 100%;
height: auto;
margin-bottom: 18px;
/* margin-bottom: 47px; */
}
.postDesc {
font-size: 16px;
color: #FAFAFA;
line-height: 22px;
padding: 0 16px;
box-sizing: border-box;
margin-bottom: 19px;
}
.postDesc span {
font-weight: 600;
}
.postLine {
margin: 0 16px;
border-bottom: 1px dashed rgba(255, 255, 255, 0.50);
}
.tagBox {
margin-bottom: 12px;
padding: 0 16px;
}
.tagBox .tagList {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
margin-bottom: 18px;
}
.tagBox .tagList .tagItem {
padding: 8px 16px;
box-sizing: border-box;
border-radius: 62px;
background: rgba(255, 255, 255, 0.05);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #BDBDBD;
}
.lastDay {
text-align: right;
color: #BDBDBD;
line-height: 20px;
font-size: 14px;
}
.copyBox {
color: #FFF;
text-align: center;
text-shadow: 0 0 20px #FF8400, 0 0 20px #FF8400;
font-family: "PingFang SC";
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 28px;
/* 140% */
padding: 18px;
box-sizing: border-box;
margin-bottom: 18px;
}
.copySuccess {
color: #FFF;
text-align: center;
text-shadow: 0 0 20px #FF00B2, 0 0 20px #FF00B2;
font-family: "PingFang SC";
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 28px;
/* 140% */
padding: 18px;
box-sizing: border-box;
margin-bottom: 18px;
}
.dplayerBox {
margin-bottom: 18px;
max-height: 300px;
}
.gridAdvBox {
margin: 0 16px 18px;
}
.gridAdvBox .gridAdvTitle {
padding: 0 16px;
box-sizing: border-box;
height: 49px;
display: flex;
align-items: center;
border-top: 1px solid rgba(255, 255, 255, 0.10);
background: rgba(255, 255, 255, 0.05);
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px;
}
.keywords {
box-sizing: border-box;
font-size: 16px;
line-height: 22px;
color: #BDBDBD;
}
@media screen and (min-width: 768px) {
/* body {
margin-top: 140px;
} */
body main {
max-width: 720px;
margin: 0 auto;
}
.header {
max-width: 720px;
margin: 0 auto;
}
.topBox {
display: none;
}
}
}
</style>
src/views/lsjMediaLibrary/postList/index.vue
-354
View File
@@ -1,354 +0,0 @@
<template>
<div class="pf-warpper avlist">
<el-row class="table-form">
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
<el-form-item>
<el-input placeholder="请输入关键词" clearable v-model="searchData.keywords" @clear="onClear('keywords')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入ID" clearable v-model="searchData.id" @clear="onClear('id')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入up主id" clearable v-model="searchData.home_id" @clear="onClear('home_id')" />
</el-form-item>
<el-form-item>
<el-select placeholder="请选择付费状态" clearable v-model="searchData.pay_type" @clear="onClear('pay_type')">
<el-option label="金币" value="1" />
<el-option label="会员" value="2" />
<el-option label="免费" value="0" />
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="请选择内容类型" clearable v-model="searchData.position" @clear="onClear('position')">
<el-option v-for="item in positionList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-date-picker v-model="time" type="daterange" range-separator="至" value-format="yyyy-MM-dd HH:mm:ss"
start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button @click="onSeach" icon="el-icon-search" plain type="primary">搜索</el-button>
<!-- <el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button> -->
<el-button @click="addPostArray" icon="el-icon-circle-plus-outline" plain type="warning">批量加入后台视频库</el-button>
<el-button @click="addOutside" icon="el-icon-circle-plus-outline" plain type="warning">批量加入外用列表</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-col>
<el-table :data="resData" element-loading-text="拼命加载中" border height="735" highlight-current-row
style="width: 100%; font-size: 10px" v-loading="loading" :row-style="{ height: '30px' }"
:cell-style="{ padding: '5px' }" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50"> </el-table-column>
<el-table-column align="center" label="帖子ID" width="190px">
<template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column>
<el-table-column align="center" label="帖子标题" width="190px" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.title }}</template>
</el-table-column>
<el-table-column align="center" label="帖子内容" width="390px" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.content }}</template>
</el-table-column>
<el-table-column align="center" label="帖子内容预览" width="130px">
<template slot-scope="scope">
<el-button slot="reference" size="small" @click="showDetailFn(scope.row.files)">节点内容预览</el-button>
</template>
</el-table-column>
<el-table-column align="center" label="帖子类型">
<template slot-scope="scope">{{
scope.row.position | changePosition
}}</template>
</el-table-column>
<el-table-column align="center" label="发布者ID">
<template slot-scope="scope" v-if="scope.row.up_user">{{
scope.row.up_user.id
}}</template>
</el-table-column>
<el-table-column align="center" label="发布者昵称">
<template slot-scope="scope" v-if="scope.row.up_user">{{
scope.row.up_user.nickname
}}</template>
</el-table-column>
<el-table-column align="center" label="帖子封面" width="80px">
<template slot-scope="scope">
<ShowImg style="width: 30px; height: 30px; margin: 0 auto" :noNeedDoamin="true" :urls="scope.row.img">
</ShowImg>
</template>
</el-table-column>
<el-table-column align="center" label="帖子封面数量">
<template slot-scope="scope">{{
scope.row.img_count
}}</template>
</el-table-column>
<el-table-column align="center" label="分类" width="300px">
<template slot-scope="scope">
<el-tag :key="index + 'tagData'" style="margin: 2px" v-for="(item, index) in scope.row.categories"
size="mini">
{{ item.name }}
</el-tag>
</template>
</el-table-column>
<el-table-column align="center" label="价格">
<template slot-scope="scope">{{ scope.row.money }}</template>
</el-table-column>
<el-table-column align="center" label="付费类型" width="110px">
<template slot-scope="scope">
<el-button plain size="mini">{{
scope.row.pay_type === 1 ? '金币' : scope.row.pay_type === 2 ? '会员' :'免费' }}</el-button>
</template>
</el-table-column>
<el-table-column align="center" width="120px" label="更新时间">
<template slot-scope="scope">{{ scope.row.time | BeiJingTime }}</template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="300">
<template slot-scope="scope">
<el-button @click="addPost(scope.$index, scope.row)" size="mini"
:type="scope.row.isAdd ? 'info' : 'primary'" :disabled="scope.row.isAdd ? true : false">{{
`${scope.row.isAdd ? '已加入后台资源库' : '加入后台资源库'}` }}</el-button>
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">查看详情</el-button>
<!-- <el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button> -->
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<div class="table-pagination">
<el-pagination :current-page="searchData.page" :page-size="searchData.page_size"
:page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange"
@size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
</div>
<!-- 查看详情 -->
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
<PostDetailView v-if="showDetail" :itemData="postDetailData" @close="closeEdit"
/>
</div>
</template>
<script>
// 引入模块
import ShowImg from '@/components/ShowImg/index.vue'
import Edit from './components/AddOrEdit'
import { lsjPostList, lsjPostDel, lsjPostAdd } from '@/api/lsjMediaLibrary/postList.js'
import {
positionList, statusList
} from '@/filters/lsjMediaLibrary/videoList.js'
import { audioAdd } from '@/api/novelsManagement/audio.js'
import PostDetailView from '@/components/PostDetailView/index.vue'
import { isNumber } from 'mathjs/lib/entry/typeChecks'
export default {
name: 'MediaCat',
components: {
ShowImg,
Edit,
PostDetailView
},
data() {
return {
positionList: positionList(),
statusList: statusList(),
page: 1,
page_size: 20,
// 请求列表参数
searchData: {
position: 'guochan', // 番号
id: undefined,
name: undefined, // 外用状态
status: undefined, // "string",当前状态
cat_id: undefined // 视频归类
},
time: undefined,
resData: [], // el-table表格数据
total: 0, // 数据总条数
selectArray: undefined,
editShowLocationVisible: undefined,
showDetail: false,
loading: true, // 列表加载状态
// 编辑数据
editVisible: false, // 新增或编辑弹出框
editData: {
title: '查看详情',
data: {}
}
}
},
filters: {
changeFormat(val) {
switch (val) {
case 1:
return '长视频'
case 2:
return '短视频'
case 3:
return '预览'
}
},
changeContentType(val) {
switch (val) {
case 1:
return 'AV（日本）'
case 2:
return '短视频（国产）'
case 3:
return '动漫'
}
}
},
mounted() {
this.getMediaSearch()
},
methods: {
showDetailFn(row) {
this.postDetailData = row
this.showDetail = true
},
addOutside() {
this.editShowLocationVisible = true
this.editData = {
title: '',
data: this.selectArray
}
},
// TODO:加入后台视频库
addPost(index, row) {
lsjPostAdd({ id: row.id }).then((res) => {
if (res.code === 200) {
this.$message.success('加入成功!')
this.getMediaSearch()
} else {
this.$message.error('加入失败!')
}
})
},
// 加入后台音频库
addAudioArray() {
Object.keys(this.selectArray).forEach((key) => {
if (!this.selectArray[key].isAdd) {
this.audioListFn(key, this.selectArray[key])
}
})
},
// TODO:加入音频视频库
audioListFn(index, row) {
audioAdd({ id: row.id }).then((res) => {
if (res.code === 200) {
this.$message.success('加入成功!')
this.getMediaSearch()
} else {
this.$message.error('加入失败!')
}
})
},
// TODO:请求影片列表数据
getMediaSearch() {
this.loading = true
if(isNumber(this.page)|| isNumber(this.page_size)){
this.searchData.page = this.page + ''
this.searchData.page_size = this.page_size + ''
}
if (this.time) {
this.searchData.start_time = this.time[0]
this.searchData.end_time = this.time[1]
} else {
this.searchData.start_time = undefined
this.searchData.end_time = undefined
}
lsjPostList(this.searchData).then((res) => {
if (res.code === 200) {
this.resData = res.data.data
this.total = Number(res.data.total)
} else {
this.$message.error('请求列表失败!')
this.resData = []
this.total = 0
}
this.loading = false
})
},
// TODO:删除影片列表数据
handleDelete(index, row) {
this.$confirm('确定删除?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
lsjPostDel({ id: row.id }).then((res) => {
if (res.code === 200) {
this.getMediaSearch()
this.$message.success('成功删除!')
} else {
this.$message.error(res.tip)
}
})
})
},
addPostArray() {
Object.keys(this.selectArray).forEach((key) => {
if (!this.selectArray[key].isAdd) {
this.addPost(key, this.selectArray[key])
}
})
},
onSeach() {
this.searchData.page = 1
this.searchData.page_size = 20
this.getMediaSearch()
},
// 切换每页数据量
handleSizeChange(val) {
this.searchData.page_size = val
this.getMediaSearch()
},
// 切换页数
handleCurrentChange(val) {
this.searchData.page = val
this.getMediaSearch()
},
handleSelectionChange(val) {
this.selectArray = val
},
// 新增按钮
add() {
this.editVisible = true // 新增或编辑弹出框
this.editData = {
title: '新增',
data: {}
}
},
// 编辑按钮
handleEdit(index, row) {
this.editVisible = true // 新增或编辑弹出框
this.editData = {
title: '查看详情',
data: row
}
},
// 关闭编辑弹窗
closeEdit() {
this.editVisible = false
this.editShowLocationVisible = false
this.showDetail = false
this.getMediaSearch()
},
// 清空某一项筛选列表
onClear(key) {
this.searchData[key] = undefined
this.getMediaSearch()
}
}
}
</script>
src/views/lsjMediaLibrary/videoList/components/AddOrEdit.vue
-360
View File
@@ -1,360 +0,0 @@
<template>
<el-dialog
:title="title"
:visible.sync="Visible"
width="1800px"
center
class="ac-dialog"
:close-on-click-modal="false"
@close="close">
<el-form :inline="true" :model="form" class="demo-form-inline" label-width="120px" label-position="right">
<el-row :gutter="24">
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-form-item label="标题">
<el-input v-model="form.name" style="width: 315px" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-form-item label="视频分类ID">
<el-input v-model="form.cat_id" style="width: 315px" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-form-item label="视频分类名称">
<el-input v-model="form.cat_name" style="width: 315px" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-form-item label="视频描述">
<el-input v-model="form.description" style="width: 315px" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-form-item label="视频导演">
<el-input v-model="form.director" style="width: 315px" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-form-item label="视频语言">
<el-input v-model="form.language" style="width: 315px" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-form-item label="视频系列">
<el-input v-model="form.series" style="width: 315px" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-form-item label="封面类型">
<el-select style="width: 180px" placeholder="请选择封面类型" v-model="form.img_type">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in coverTypeList" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-form-item label="横版封面">
<ShowImg style="width: 330px; height: 150px; margin: 0 auto" :noNeedDoamin="true" :urls="form.img_x"></ShowImg>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-form-item label="竖版封面">
<ShowImg style="width: 120px; height: 300px; margin: 0 auto" :noNeedDoamin="true" :urls="form.img_y"></ShowImg>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-form-item label="预览图片">
<ShowImg style="width: 300px; height: 300px; margin: 0 auto" :noNeedDoamin="true" :urls="form.preview_images"></ShowImg>
</el-form-item>
</el-col>
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
<el-form-item label="是否多集">
<el-switch
v-model="form.is_more_link"
active-color="#13ce66"
inactive-color="#ff4949"
style="width: 180px"></el-switch>
</el-form-item>
</el-col>
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
<el-form-item label="上架状态">
<el-switch
v-model="form.status"
active-color="#13ce66"
inactive-color="#ff4949"
style="width: 180px"></el-switch>
</el-form-item>
</el-col>
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
<el-form-item label="更新状态">
<el-switch
v-model="form.update_status"
active-color="#13ce66"
inactive-color="#ff4949"
style="width: 180px"></el-switch>
</el-form-item>
</el-col>
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
<el-form-item label="标签">
<el-tag :key="index + 'tagData'" style="margin: 2px" v-for="(item, index) in form.tags" size="mini">
{{ item.name }}
</el-tag>
</el-form-item>
</el-col>
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
<el-form-item label="采集网站标签">
<el-tag :key="index + 'tagData'" style="margin: 2px" v-for="(item, index) in form.source_tags" size="mini">
{{ item }}
</el-tag>
</el-form-item>
</el-col>
<el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
<el-form-item label="上传时间">
<el-date-picker
style="width: 180px"
v-model="form.issue_date"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-ddTHH:mm:ssZ">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
<el-form-item label="上架时间">
<el-date-picker
style="width: 180px"
v-model="form.show_at"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-ddTHH:mm:ssZ">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div style="display: flex;">
<div style="margin-right: 100px;">
<h3>预览</h3>
<div style="width: 380px; height: 240px; overflow: hidden">
<DPlayer
ref="player"
v-if="form.links[0].preview_m3u8_url.indexOf('mp4') === -1"
:video="{
url: filterM3u8(form.links[0].preview_m3u8_url),
type: 'hls',
pic: '',
}"
hotkey></DPlayer>
</div>
</div>
<div >
<h3>正片</h3>
<div v-if="form.links[0].m3u8_url" style="width: 380px; height: 240px; overflow: hidden">
<DPlayer
:video="{
url: filterM3u8(form.links[0].m3u8_url),
type: 'hls',
pic: '',
}"
hotkey></DPlayer>
</div>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click.native.prevent="Visible = false"> 取 消 </el-button>
</div>
</el-dialog>
</template>
<script>
import DPlayer from '@/components/VueDplayerHls/index'
import 'videojs-contrib-hls'
import { lsjVideoDetail } from '@/api/lsjMediaLibrary/videoList.js'
import ShowImg from '@/components/ShowImg/index.vue'
export default {
name: 'AddOrEdit',
props: ['data'],
components: {
DPlayer,
ShowImg
},
data() {
return {
coverTypeList: [
{label:'横版',value:'long'},
{label:'竖版',value:'short'},
],
type: undefined,
videoType: undefined,
innerVisible: false,
Visible: true,
title: '',
taskId: '',
tags: null,
fieldNameFs: '', // 正片地址全称
form: {
links:[{
m3u8_url:'',
preview_m3u8_url:'',
}]
},
}
},
async created() {
this.title = this.data.title
if (this.title === '查看详情') {
await this.getVideoDetail()
if (this.form.links.m3u8_url) {
this.open()
}
}
if (this.player) {
this.player.dispose()
}
},
methods: {
getVideoDetail(){
lsjVideoDetail({ id: this.data.data.id }).then((res) => {
if (res.code === 200) {
this.form= res.data
} else {
this.$message.error('请求失败!')
}
})
},
filterM3u8(v) {
return /\.m3u8/g.test(v) ? v : v + '.m3u8'
},
// 清空某一项筛选列表
onClear(key) {
this.form.param[key] = []
},
// 上传图片返回地址
changeCoverImgUrl(data) {
this.form.coverImg = data
},
// / 监听视频播放的回调函数
onPlayerPlay() { },
// / 监听暂停播放的回调函数
onPlayerPause() { },
// / 监听当前视频数据加载完成
onPlayerLoadeddata() { },
// / 监听当前视频数据加载失败
onPlayerError() { },
// / 监听当前视频数据加载ing
onPlayerWaiting() { },
// / 监听当前视频播放完成
onPlayerEnded() { },
open() {
this.mediaUrl =
'api/web/media/m3u8/' +
(this.form.links[0].m3u8_url.match(RegExp(/.m3u8/))
? this.form.links[0].m3u8_url
: this.form.links[0].m3u8_url + '.m3u8')
// this.$nextTick(function () {
// document.getElementById("media-box").innerHTML =
// '<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" style="width:100%;height:100%; " playsinline="true"></video>';
// this.player = videojs("my-video", {
// bigPlayButton: false,
// textTrackDisplay: false,
// posterImage: true,
// errorDisplay: true,
// controlBar: true,
// playbackRates: [0.5, 1, 1.5, 2, 3, 5, 10],
// });
// this.player.src(this.mediaUrl);
// });
},
// 关闭编辑
close() {
if (this.player) {
this.player.dispose()
}
this.$emit('close')
}
}
}
</script>
<style lang="scss">
.el-dialog {
display: flex;
flex-direction: column;
margin: 0 !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*height:600px;*/
max-height: calc(100% - 30px);
max-width: calc(100% - 30px);
}
.el-dialog .el-dialog__body {
flex: 1;
overflow: auto;
}
.videoBox {
display: flex;
justify-content: center;
overflow: hidden;
}
.el-textarea.is-disabled.ti .el-textarea__inner {
color: red;
}
.media-box {
width: 100%;
height: 400px;
text-align: center;
overflow: hidden;
img {
height: 100%;
max-width: 100%;
}
#my-video {
width: 100% !important;
height: 100% !important;
border: none !important;
}
}
.check_upload {
position: relative;
padding: 10px;
overflow: hidden;
border: 1px dashed #ccc;
background-color: #f5f5f5;
div {
display: inline-block;
position: relative;
padding: 4px 8px;
font-size: 100%;
line-height: 1.4;
color: #666;
border: 1px solid #666;
cursor: pointer;
border-radius: 2px;
background: none;
outline: none;
}
}</style>
src/views/lsjMediaLibrary/videoList/index.vue
-401
View File
@@ -1,401 +0,0 @@
<template>
<div class="pf-warpper avlist">
<el-row class="table-form">
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
<el-form-item>
<el-input placeholder="请输入ID" clearable v-model="searchData.ids" @clear="onClear('ids')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入up主id" clearable v-model="searchData.home_id" @clear="onClear('home_id')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入关键字" clearable v-model="searchData.keywords" @clear="onClear('keywords')" />
</el-form-item>
<el-form-item>
<el-select placeholder="请选择更新状态" clearable v-model="searchData.update_status" @clear="onClear('update_status')">
<el-option label="已完结" value="1" />
<el-option label="未完结" value="0" />
</el-select>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入mid,多个用,分开" clearable v-model="searchData.mid" @clear="onClear('mid')" />
</el-form-item>
<el-form-item>
<el-select
placeholder="请选择视频分类类型"
clearable
v-model="searchData.cat_id"
@clear="onClear('cat_id')">
<el-option v-for="item in videoTypeList" :key="item.value" :label="item.value" :value="item.label" />
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="请选择内容类型" clearable v-model="searchData.position" @clear="onClear('position')">
<el-option v-for="item in positionList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-date-picker
v-model="time"
type="daterange"
range-separator="至"
value-format="yyyy-MM-dd HH:mm:ss"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button @click="onSeach" icon="el-icon-search" plain type="primary">搜索</el-button>
<!-- <el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button> -->
<el-button
@click="addAudioArray"
icon="el-icon-circle-plus-outline"
plain
type="warning">批量加入音频视频库</el-button>
<el-button
@click="addVideoArray"
icon="el-icon-circle-plus-outline"
plain
type="warning">批量加入后台视频库</el-button>
<el-button @click="addOutside" icon="el-icon-circle-plus-outline" plain type="warning">批量加入外用列表</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-col>
<el-table
:data="resData"
element-loading-text="拼命加载中"
border
height="735"
highlight-current-row
style="width: 100%; font-size: 10px"
v-loading="loading"
:row-style="{ height: '30px' }"
:cell-style="{ padding: '5px' }"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="50"> </el-table-column>
<el-table-column align="center" label="视频ID" width="190px">
<template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column>
<el-table-column align="center" label="视频标题" width="190px" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
<el-table-column align="center" label="视频描述" width="190px" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.description }}</template>
</el-table-column>
<el-table-column align="center" label="视频定位">
<template slot-scope="scope">{{
scope.row.position | changePosition
}}</template>
</el-table-column>
<el-table-column align="center" label="up主名称">
<template slot-scope="scope">{{
scope.row.up_user
}}</template>
</el-table-column>
<el-table-column align="center" label="视频分类ID">
<template slot-scope="scope">{{
scope.row.cat_id
}}</template>
</el-table-column>
<el-table-column align="center" label="视频分类名称">
<template slot-scope="scope">{{
scope.row.cat_name
}}</template>
</el-table-column>
<el-table-column align="center" label="视频封面类型">
<template slot-scope="scope">{{ scope.row.img_type==='long'?'横图':'竖图'}}</template>
</el-table-column>
<el-table-column align="center" label="视频横版封面" width="80px">
<template slot-scope="scope">
<ShowImg style="width: 30px; height: 30px; margin: 0 auto" :noNeedDoamin="true" :urls="scope.row.img_x"></ShowImg>
</template>
</el-table-column>
<el-table-column align="center" label="视频竖版封面" width="80px">
<template slot-scope="scope">
<ShowImg style="width: 30px; height: 30px; margin: 0 auto" :noNeedDoamin="true" :urls="scope.row.img_y"></ShowImg>
</template>
</el-table-column>
<el-table-column align="center" label="标签" width="300px">
<template slot-scope="scope">
<el-tag :key="index + 'tagData'" style="margin: 2px" v-for="(item, index) in scope.row.tags" size="mini">
{{ item.name }}
</el-tag>
</template>
</el-table-column>
<el-table-column align="center" label="视频导演">
<template slot-scope="scope">{{ scope.row.director }}</template>
</el-table-column>
<el-table-column align="center" label="上架状态" width="110px">
<template slot-scope="scope">
<el-button plain size="mini">{{
scope.row.status_text }}</el-button>
</template>
</el-table-column>
<el-table-column align="center" width="120px" label="上架时间">
<template slot-scope="scope">{{ scope.row.issue_date | BeiJingTime }}</template>
</el-table-column>
<el-table-column align="center" width="120px" label="更新状态">
<template slot-scope="scope">{{ scope.row.update_status==='0'?'更新中':'已完结'}}</template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="300">
<template slot-scope="scope">
<el-button
v-if="scope.row.type == 'MP3'"
@click="audioListFn(scope.$index, scope.row)"
type="success"
size="mini">加入后台MP3库</el-button>
<el-button
v-else
@click="addVideo(scope.$index, scope.row)"
size="mini"
:type="scope.row.isAdd ? 'info' : 'primary'"
:disabled="scope.row.isAdd ? true : false">{{
`${scope.row.isAdd ? '已加入后台视频库' : '加入后台视频库'}` }}</el-button>
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">查看详情</el-button>
<!-- <el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button> -->
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<div class="table-pagination">
<el-pagination
:current-page="page"
:page-size="page_size"
:page-sizes="[10, 20, 30, 50, 100]"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
layout="total, sizes, prev, pager, next, jumper" />
</div>
<!-- 查看详情 -->
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
<ShowVideo ref="showvideo"></ShowVideo>
</div>
</template>
<script>
// 引入模块
import ShowImg from '@/components/ShowImg/index.vue'
import Edit from './components/AddOrEdit'
// import EditShowLocation from './components/editShowLocation'
import { lsjVideoList, lsjVideoDel,lsjVideoAdd } from '@/api/lsjMediaLibrary/videoList.js'
import ShowVideo from '@/components/ShowVideo/index.vue'
import {
positionList, videoTypeList,statusList
} from '@/filters/lsjMediaLibrary/videoList.js'
import { audioAdd } from '@/api/novelsManagement/audio.js'
import { isNumber } from 'mathjs/lib/entry/typeChecks'
export default {
name: 'MediaCat',
components: {
ShowImg,
ShowVideo,
Edit
},
data() {
return {
videoTypeList: videoTypeList(),
positionList: positionList(),
statusList: statusList(),
page: 1,
page_size: 20,
// 请求列表参数
searchData: {
position: 'guochan', // 番号
id: undefined,
name: undefined, // 外用状态
status: undefined, // "string",当前状态
cat_id: undefined // 视频归类
},
time: undefined,
resData: [], // el-table表格数据
total: 0, // 数据总条数
selectArray: undefined,
editShowLocationVisible: undefined,
loading: true, // 列表加载状态
// 编辑数据
editVisible: false, // 新增或编辑弹出框
editData: {
title: '查看详情',
data: {}
}
}
},
filters: {
changeFormat(val) {
switch (val) {
case 1:
return '长视频'
case 2:
return '短视频'
case 3:
return '预览'
}
},
changeContentType(val) {
switch (val) {
case 1:
return 'AV（日本）'
case 2:
return '短视频（国产）'
case 3:
return '动漫'
}
}
},
mounted() {
this.getMediaSearch()
},
methods: {
addOutside() {
this.editShowLocationVisible = true
this.editData = {
title: '',
data: this.selectArray
}
},
// TODO:加入后台视频库
addVideo(index, row) {
lsjVideoAdd({ id: row.id }).then((res) => {
if (res.code === 200) {
this.$message.success('加入成功!')
this.getMediaSearch()
} else {
this.$message.error('加入失败!')
}
})
},
// 加入后台音频库
addAudioArray() {
Object.keys(this.selectArray).forEach((key) => {
if (!this.selectArray[key].isAdd) {
this.audioListFn(key, this.selectArray[key])
}
})
},
// TODO:加入音频视频库
audioListFn(index, row) {
audioAdd({ id: row.id }).then((res) => {
if (res.code === 200) {
this.$message.success('加入成功!')
this.getMediaSearch()
} else {
this.$message.error('加入失败!')
}
})
},
// TODO:请求影片列表数据
getMediaSearch() {
this.loading = true
if(isNumber(this.page)|| isNumber(this.page_size)){
this.searchData.page = this.page + ''
this.searchData.page_size = this.page_size + ''
}
if (this.time) {
this.searchData.start_time = this.time[0]
this.searchData.end_time = this.time[1]
} else {
this.searchData.start_time = undefined
this.searchData.end_time = undefined
}
lsjVideoList(this.searchData).then((res) => {
if (res.code === 200) {
this.resData = res.data.data
this.total = Number(res.data.total)
} else {
this.$message.error('请求列表失败!')
this.resData = []
this.total = 0
}
this.loading = false
})
},
// TODO:删除影片列表数据
handleDelete(index, row) {
this.$confirm('确定删除?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
lsjVideoDel({ id: row.id }).then((res) => {
if (res.code === 200) {
this.getMediaSearch()
this.$message.success('成功删除!')
} else {
this.$message.error(res.tip)
}
})
})
},
addVideoArray() {
Object.keys(this.selectArray).forEach((key) => {
if (!this.selectArray[key].isAdd) {
this.addVideo(key, this.selectArray[key])
}
})
},
onSeach() {
this.page = 1
this.page_size = 20
this.getMediaSearch()
},
// 切换每页数据量
handleSizeChange(val) {
this.page_size = val
this.getMediaSearch()
},
// 切换页数
handleCurrentChange(val) {
this.page = val
this.getMediaSearch()
},
handleSelectionChange(val) {
this.selectArray = val
},
// 新增按钮
add() {
this.editVisible = true // 新增或编辑弹出框
this.editData = {
title: '新增',
data: {}
}
},
// 编辑按钮
handleEdit(index, row) {
this.editVisible = true // 新增或编辑弹出框
this.editData = {
title: '查看详情',
data: row
}
},
// 关闭编辑弹窗
closeEdit() {
this.editVisible = false
this.editShowLocationVisible = false
this.getMediaSearch()
},
// 清空某一项筛选列表
onClear(key) {
this.searchData[key] = undefined
this.getMediaSearch()
}
}
}
</script>
src/views/mediaLibrary/videoList/components/AddOrEdit.vue
-462
View File
@@ -1,462 +0,0 @@
<template>
<el-dialog
:title="title"
:visible.sync="Visible"
width="1800px"
center
class="ac-dialog"
:close-on-click-modal="false"
@close="close">
<el-form :inline="true" :model="form" class="demo-form-inline" label-width="120px" label-position="right">
<div>
<el-form-item label="标题">
<el-input v-model="form.title" style="width: 315px" />
</el-form-item>
</div>
<div>
<el-form-item label="封面">
<UploadImg @changeImgUrl="changeCoverImgUrl" :img="form.coverImg" @onRemove="handleRemove('coverImg')">
</UploadImg>
</el-form-item>
</div>
<el-form-item label="影片类型">
<el-select clearable placeholder="影片类型" v-model="form.type" style="width: 180px">
<el-option label="长视频" value="longvideo" />
<el-option label="短视频" value="shortvideo" />
</el-select>
</el-form-item>
<el-form-item label="视频归类">
<el-select placeholder="请选择视频归类" v-model="videoType" style="width: 180px">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in formVideoTypeList" />
</el-select>
</el-form-item>
<div>
<el-form-item label="APP">
<el-select multiple placeholder="APP" v-model="form.appids" style="width: 180px">
<el-option label="麻豆APP" :value="1" />
<el-option label="麻豆官网" :value="2" />
<el-option label="逼喱逼喱" :value="3" />
</el-select>
</el-form-item>
</div>
<div>
<el-form-item label="上架时间">
<el-date-picker
style="width: 180px"
v-model="form.addedTime"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-ddTHH:mm:ssZ">
</el-date-picker>
</el-form-item>
</div>
<div>
<el-form-item label="正片地址">
<el-input v-model="form.fieldNameFs" style="width: 515px" disabled="disabled" />
</el-form-item>
</div>
<div>
<el-form-item label="预览地址">
<el-input v-model="form.preFileName" style="width: 515px">
<el-button slot="append" @click="innerVisible = true">自定义设置预览</el-button>
</el-input>
</el-form-item>
</div>
<el-form-item label="详细描述">
<el-input v-model="form.desc" type="textarea" style="width: 515px" />
</el-form-item>
</el-form>
<div style="position: absolute; top: 50px; right: 10px">
<h3>正片</h3>
<div v-if="form.fieldNameFs" style="width: 380px; height: 240px; overflow: hidden">
<DPlayer
ref="player"
v-if="form.fieldNameFs.indexOf('mp4') === -1"
:video="{
url: '/api/web/media/m3u8/' + filterM3u8(form.fieldNameFs),
type: 'hls',
pic: '',
}"
hotkey></DPlayer>
<DPlayer
ref="player"
v-else
:video="{
url: this.$store.getters.getSystemConfig.mp4Url + form.fieldNameFs,
type: 'mp4',
pic: '',
}"
hotkey></DPlayer>
</div>
<UploadVideo
v-if="videoType"
@changeVideoUrl="changeVideoUrl"
:type="videoType"
@repeatVideo="repeatVideo"
style="max-width: 520px"></UploadVideo>
<div v-else class="check_upload" @click.prevent="checkUpload">
<div>
选择文件
</div>
</div>
</div>
<div style="position: absolute; top: 50px; right: 410px">
<h3>预览</h3>
<div v-if="form.preFileName" style="width: 380px; height: 240px; overflow: hidden">
<DPlayer
ref="player"
v-if="form.preFileName.indexOf('mp4') === -1"
:video="{
url: '/api/web/media/m3u8/' + filterM3u8(form.preFileName),
type: 'hls',
pic: '',
}"
hotkey></DPlayer>
<DPlayer
ref="player"
v-else
:video="{
url: this.$store.getters.getSystemConfig.mp4Url + form.preFileName,
type: 'mp4',
pic: '',
}"
hotkey></DPlayer>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click.native.prevent="Visible = false"> 取 消 </el-button>
<el-button type="primary" @click.native.prevent="submit('ruleForm')">
确 定
</el-button>
</div>
<el-dialog width="30%" title="设置预览时长" :visible.sync="innerVisible" append-to-body>
<el-row>
<el-col :span="24" style="text-align: center">
<div><span>总时长:</span>{{ totalTime }}s</div>
<div>
时:
<el-input-number :min="0" :max="24" size="mini" v-model="previewTimeData.h"></el-input-number>
</div>
<div>
分:
<el-input-number :min="0" :max="59" size="mini" v-model="previewTimeData.m"></el-input-number>
</div>
<div>
秒:
<el-input-number :min="0" :max="59" size="mini" v-model="previewTimeData.s"></el-input-number>
</div>
</el-col>
<el-col :span="24" style="text-align: center; margin: 10px 0">
<el-button-group>
<el-button type="info" @click.native.prevent="restTime">取消</el-button>
<el-button type="primary" @click.native.prevent="subimitPTime">确定
</el-button>
</el-button-group>
</el-col>
</el-row>
</el-dialog>
</el-dialog>
</template>
<script>
import DPlayer from '@/components/VueDplayerHls/index'
import UploadImg from '@/components/UploadImg/index'
import UploadVideo from '@/components/UploadVideo/index'
import 'videojs-contrib-hls'
import { mediaUpdate, updatePreTime } from '@/api/mediaLibrary/videoList'
import { stringToArry, arryToString } from '@/filters/index'
import { StatusList, formVideoTypeList } from '@/filters/mediaLibrary/videoList'
import { current } from '@/filters/index'
export default {
name: 'AddOrEdit',
props: ['data'],
components: {
UploadImg,
UploadVideo,
DPlayer
},
computed: {
totalTime() {
return this.data.data.videoTime
}
},
data() {
return {
innerVisible: false,
Visible: true,
title: '',
defaltTime: current() + 'T12:00:00.000Z',
taskId: '',
StatusList: StatusList(),
formVideoTypeList: formVideoTypeList(),
tags: null,
fieldNameFs: '', // 正片地址全称
secondTags: [],
FirstTagList: [],
form: {
appids: [],
actors: undefined, // [],演员
addedTime: undefined, // 'string',上架时间
bango: undefined, // 'string',番号
checkSum: undefined, // 'string',md5校验码
country: undefined, // 'string',国家
coverImg: undefined, // 封面
desc: undefined, // 'string',详细描述
directors: undefined, // [],导演
firstTag: undefined, // 'string',一级标签
preFileName: undefined, // 'string',预览文件
preview: undefined, // 0,预览普通视频
publish: undefined, // 'string',视频发布者
secondTags: undefined, // [],二级标签标签
size: undefined, // 0,文件大小
status: undefined, // 'string',当前状态
studio: undefined, // 'string',工作室/所有者
title: undefined, // 'string',标题
type: undefined, // 'string',长视频/短视频
videoTime: undefined // 0,影片长度
},
previewTimeData: {
h: 0,
m: 0,
s: 0
},
type: undefined,
videoType: undefined
}
},
created() {
this.title = this.data.title
if (this.title === '编辑') {
this.form = { ...this.data.data }
this.form.actors = arryToString(this.form.actors)
this.form.directors = arryToString(this.form.directors)
if (this.form.fieldNameFs) {
this.open()
}
}
if (this.player) {
this.player.dispose()
}
},
methods: {
checkUpload() {
if (!this.videoType) {
return this.$message({
type: 'error',
message: '请选择视频归类！!'
})
}
},
// TODO：新增视频时绑定煤资库ID
async subimitPTime() {
let s = 0
if (this.previewTimeData.h) {
s += this.previewTimeData.h * 60 * 60
}
if (this.previewTimeData.m) {
s += this.previewTimeData.m * 60
}
s += this.previewTimeData.s
if (s > 0 && s + 15 <= this.data.data.videoTime - 15) {
const data = {
id: this.data.data.id,
preFileTime: s
}
updatePreTime(data).then((res) => {
if (res.code === 200) {
this.$message.success('预览时长设置成功')
this.innerVisible = false
} else {
this.$message.error('预览时长设置失败')
}
})
} else {
this.$message.error('预览时长设置不能为零或不能超过播放时长')
}
},
// TODO：提交视频列表数据
update(data) {
mediaUpdate(data).then((res) => {
if (res.code === 200) {
this.$message.success('更新成功')
this.close()
} else {
this.$message.error('更新失败')
}
})
},
filterM3u8(v) {
return /\.m3u8/g.test(v) ? v : v + '.m3u8'
},
handleRemove(key) {
this.form[key] = ''
},
// 清空某一项筛选列表
onClear(key) {
this.form.param[key] = []
},
restTime() {
this.previewTimeData = {
h: 0,
m: 0,
s: 0
}
this.innerVisible = false
},
// 提交按钮
submit() {
const data = { ...this.form }
data.actors = data.actors ? stringToArry(data.actors) : []
data.directors = data.directors ? stringToArry(data.directors) : []
const YY = new Date().getUTCFullYear()
const MM =
new Date().getMonth() + 1 < 10
? `0${new Date().getMonth() + 1}`
: new Date().getMonth() + 1
const DD =
new Date().getUTCDate() < 10
? `0${new Date().getUTCDate()}`
: new Date().getUTCDate()
const HH =
new Date().getUTCHours() < 10
? `0${new Date().getUTCHours()}`
: new Date().getUTCHours()
const MU =
new Date().getUTCMinutes() < 10
? `0${new Date().getUTCMinutes()}`
: new Date().getUTCMinutes()
const SS =
new Date().getUTCSeconds() < 10
? `0${new Date().getUTCSeconds()}`
: new Date().getUTCSeconds()
const MS =
new Date().getUTCMilliseconds() < 10
? `0${new Date().getUTCMilliseconds()}`
: new Date().getUTCMilliseconds()
data.addedTime =
data.addedTime || `${YY}-${MM}-${DD}T${HH}:${MU}:${SS}.${MS}Z`
this.update(data)
},
// 上传视频返回地址
changeVideoUrl(data) {
this.form.id = data.id
this.fieldNameFs = data.videoUri
this.form.videoTime = parseInt(data.duration)
this.form.size = data.size
},
// 重复上传视频
repeatVideo(data) {
this.taskId = data.taskId
this.getData()
},
// 上传图片返回地址
changeCoverImgUrl(data) {
this.form.coverImg = data
},
// / 监听视频播放的回调函数
onPlayerPlay() { },
// / 监听暂停播放的回调函数
onPlayerPause() { },
// / 监听当前视频数据加载完成
onPlayerLoadeddata() { },
// / 监听当前视频数据加载失败
onPlayerError() { },
// / 监听当前视频数据加载ing
onPlayerWaiting() { },
// / 监听当前视频播放完成
onPlayerEnded() { },
open() {
this.mediaUrl =
'api/web/media/m3u8' +
(this.form.fieldNameFs.match(RegExp(/.m3u8/))
? this.form.fieldNameFs
: this.form.fieldNameFs + '.m3u8')
},
// 关闭编辑
close() {
if (this.player) {
this.player.dispose()
}
this.$emit('close')
}
}
}
</script>
<style lang="scss">
.el-dialog {
display: flex;
flex-direction: column;
margin: 0 !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*height:600px;*/
max-height: calc(100% - 30px);
max-width: calc(100% - 30px);
}
.el-dialog .el-dialog__body {
flex: 1;
overflow: auto;
}
.videoBox {
display: flex;
justify-content: center;
overflow: hidden;
}
.el-textarea.is-disabled.ti .el-textarea__inner {
color: red;
}
.media-box {
width: 100%;
height: 400px;
text-align: center;
overflow: hidden;
img {
height: 100%;
max-width: 100%;
}
#my-video {
width: 100% !important;
height: 100% !important;
border: none !important;
}
}
.check_upload {
position: relative;
padding: 10px;
overflow: hidden;
border: 1px dashed #ccc;
background-color: #f5f5f5;
div {
display: inline-block;
position: relative;
padding: 4px 8px;
font-size: 100%;
line-height: 1.4;
color: #666;
border: 1px solid #666;
cursor: pointer;
border-radius: 2px;
background: none;
outline: none;
}
}
</style>
src/views/mediaLibrary/videoList/components/editShowLocation.vue
-62
View File
@@ -1,62 +0,0 @@
<!--
* @Date: 2024-07-02 11:19:17
* @LastEditors: Administrator admin@example.com
* @LastEditTime: 2024-07-02 11:35:38
* @FilePath: /waiwang_webadmin/src/views/mediaLibrary/videoList/components/editShowLocation.vue
-->
<template>
<el-dialog :title="title" :visible.sync="Visible" width="400px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
<el-form :inline="true" :model="form" class="demo-form-inline" label-width="120px" label-position="right">
<el-row :gutter="24">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
<el-form-item label="外用状态" prop="showLocation">
<el-select placeholder="请选择外用列表状态" v-model="form.showLocation" style="width: 180px">
<el-option label="非外用" :value="0" />
<el-option label="外用" :value="1" />
<el-option label="已完成" :value="2" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native.prevent="Visible = false"> 取 消 </el-button>
<el-button type="primary" @click.native.prevent="submit('ruleForm')"> 确 定 </el-button>
</div>
</el-dialog>
</template>
<script>
import { mediaUpdate } from '@/api/mediaLibrary/videoList'
export default {
name: 'AddOrEdit',
props: ['data'],
data() {
return {
Visible: true,
title: '',
form: {
showLocation: undefined // 视频类型 1:长视频 2:短视频 3:预览
}
}
},
methods: {
submit() {
this.data.data.forEach(item => {
item.showLocation = this.form.showLocation
mediaUpdate(item).then(res => {
if (res.code === 200) {
this.$message.success(item.id + '加入成功')
} else {
this.$message.error(item.id + '加入失败')
}
})
})
this.$emit('close')
},
close() {
this.$emit('close')
}
}
}
</script>
<style lang="scss"></style>
src/views/mediaLibrary/videoList/index.vue
-473
View File
@@ -1,473 +0,0 @@
<template>
<div class="pf-warpper avlist">
<el-row class="table-form">
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
<el-form-item>
<el-input placeholder="请输入影片ID" clearable v-model="searchData.param.id" @clear="onClear('id')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入标题" clearable v-model="searchData.param.title" @clear="onClear('title')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入任务ID" clearable v-model="searchData.param.taskId" @clear="onClear('taskId')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入番号" clearable v-model="searchData.param.bango" @clear="onClear('bango')" />
</el-form-item>
<el-form-item>
<el-select placeholder="请选择当前状态" clearable v-model="searchData.param.status" @clear="onClear('status')">
<el-option v-for="item in StatusList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="请选择APP类型" clearable v-model="searchData.param.appid" @clear="onClear('appid')">
<el-option v-for="item in appidsList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入一级标签" clearable v-model="searchData.param.firstTag" @clear="onClear('firstTag')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入二级标签" clearable v-model="searchData.param.secondTags" @clear="onClear('secondTags')" />
</el-form-item>
<el-form-item>
<el-select placeholder="请选择内容归类" clearable v-model="searchData.param.type" @clear="onClear('type')">
<el-option v-for="item in formVideoTypeList" :key="item.value" :label="item.label" :value="item.label" />
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="请选择视频类型" clearable v-model="searchData.param.formatType" @clear="onClear('formatType')">
<el-option v-for="item in formatTypeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="请选择内容类型" clearable v-model="searchData.param.contentType" @clear="onClear('contentType')">
<el-option v-for="item in contentTypeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="请选择排序方式" clearable v-model="searchData.param.timeRange" @clear="onClear('timeRange')">
<el-option label="上架时间排序" value="addedTime" />
<el-option label="创建时间排序" value="createdAt" />
<el-option label="修改时间排序" value="updatedAt" />
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="请选择外用状态" clearable v-model="searchData.param.showLocation" @clear="onClear('showLocation')">
<el-option label="非外用（未修改）" :value="0" />
<el-option label="外用（修改中）" :value="1" />
<el-option label="待验收" :value="3" />
<el-option label="已完成" :value="2" />
</el-select>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入演员" clearable v-model="searchData.param.actors" @clear="onClear('actors')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入发布者" clearable v-model="searchData.param.publish" @clear="onClear('publish')" />
</el-form-item>
<el-form-item>
<el-date-picker v-model="time" type="daterange" range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
</el-form-item>
<el-form-item>
<el-button @click="onSeach" icon="el-icon-search" plain type="primary">搜索</el-button>
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
<el-button @click="addAudioArray" icon="el-icon-circle-plus-outline" plain type="warning">批量加入音频视频库</el-button>
<el-button @click="addVideoArray" icon="el-icon-circle-plus-outline" plain type="warning">批量加入后台视频库</el-button>
<el-button @click="addOutside" icon="el-icon-circle-plus-outline" plain type="warning">批量加入外用列表</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-col>
<el-table
:data="resData"
element-loading-text="拼命加载中"
border
height="735"
highlight-current-row
style="width: 100%; font-size: 10px"
v-loading="loading"
:row-style="{ height: '30px' }"
:cell-style="{ padding: '5px' }"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="50"> </el-table-column>
<el-table-column align="center" label="视频ID" width="190px">
<template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column>
<el-table-column align="center" label="标题" width="190px" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.title }}</template>
</el-table-column>
<el-table-column align="center" label="视频封面" width="80px">
<template slot-scope="scope">
<ShowImg style="width: 30px; height: 30px; margin: 0 auto" :urls="scope.row.coverImg"></ShowImg>
</template>
</el-table-column>
<el-table-column align="center" label="任务ID" width="190px">
<template slot-scope="scope">{{ scope.row.taskId }}</template>
</el-table-column>
<el-table-column align="center" label="发布者">
<template slot-scope="scope">{{ scope.row.publish }}</template>
</el-table-column>
<el-table-column align="center" label="视频类型">
<template slot-scope="scope">{{ scope.row.contentType | changeContentType }}</template>
</el-table-column>
<el-table-column align="center" label="封面类型" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.coverType | changeCoverType }}</template>
</el-table-column>
<el-table-column align="center" label="APP类型" width="150">
<template slot-scope="scope">
<el-tag :key="index" style="margin: 2px" v-for="(item, index) in scope.row.appids" size="mini">
{{ item | changeAppids }}
</el-tag>
</template>
</el-table-column>
<el-table-column align="center" label="一级标签" width="100px">
<template slot-scope="scope">{{ scope.row.firstTag }}</template>
</el-table-column>
<el-table-column align="center" label="二级标签" width="150px">
<template slot-scope="scope">{{ scope.row.secondTags }}</template>
</el-table-column>
<el-table-column align="center" label="视频归属" width="100px">
<template slot-scope="scope">{{ scope.row.mediaSet }}</template>
</el-table-column>
<el-table-column align="center" label="当前状态" width="110px">
<template slot-scope="scope">
<el-button :type="scope.row.status === 'Completed' ? 'success' : 'danger'" plain size="mini">{{ scope.row.status | changeStatus }}</el-button>
</template>
</el-table-column>
<el-table-column align="center" label="外用状态" width="120px">
<template slot-scope="scope">
<el-button :type="scope.row.showLocation === 2 ? 'success' : scope.row.showLocation === 1 ? 'warning' : 'danger'" plain size="mini">{{
scope.row.showLocation | changeShowLocation
}}</el-button>
</template>
</el-table-column>
<el-table-column align="center" label="演员" width="200">
<template slot-scope="scope">
<el-tag :key="index" v-for="(item, index) in scope.row.actors" type="primary">{{ item }}</el-tag>
</template>
</el-table-column>
<el-table-column align="center" label="所有者" width="100px">
<template slot-scope="scope">{{ scope.row.studio }}</template>
</el-table-column>
<el-table-column align="center" label="番号" width="150px" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.bango }}</template>
</el-table-column>
<el-table-column align="center" label="备注" width="150px" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.remark }}</template>
</el-table-column>
<el-table-column align="center" label="影片时长" width="80px">
<template slot-scope="scope">{{ scope.row.videoTime | secondToHouseMinuteSecond }}</template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="300">
<template slot-scope="scope">
<el-button v-if="scope.row.type == 'MP3'" @click="audioListFn(scope.$index, scope.row)" type="success" size="mini">加入后台MP3库</el-button>
<el-button v-else @click="addVideo(scope.$index, scope.row)" size="mini" :type="!scope.row.isAdd ? 'primary' : 'info'" :disabled="scope.row.isAdd">加入后台视频库</el-button>
<el-button v-if="scope.row.type !== 'MP3' && scope.row.status === 'Completed'" @click="addResourceVideo(scope.$index, scope.row)" type="success" size="mini">加入资源库</el-button>
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<div class="table-pagination">
<el-pagination
:current-page="searchData.pageNum"
:page-size="searchData.pageSize"
:page-sizes="[10, 20, 30, 50, 100]"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
layout="total, sizes, prev, pager, next, jumper"/>
</div>
<!-- 新增及编辑 -->
<Edit :contentTypeList="contentTypeList" :data="editData" v-if="editVisible" @close="closeEdit" />
<ShowVideo ref="showvideo"></ShowVideo>
<EditShowLocation :data="editData" v-if="editShowLocationVisible" @close="closeEdit" />
</div>
</template>
<script>
// 引入模块
import ShowImg from '@/components/ShowImg/index.vue'
import Edit from './components/AddOrEdit'
import EditShowLocation from './components/editShowLocation'
import { mediaSearch, mediaDel } from '@/api/mediaLibrary/videoList'
import ShowVideo from '@/components/ShowVideo/index.vue'
import { appidsList, formatTypeList, StatusList, formVideoTypeList, contentTypeList } from '@/filters/mediaLibrary/videoList'
import { mediaAdd } from '@/api/videoManagement/videoList'
import { audioAdd } from '@/api/novelsManagement/audio.js'
import { mediaAddResource } from '@/api/resourceManagement/video.js'
export default {
name: 'MediaCat',
components: {
Edit,
ShowImg,
ShowVideo,
EditShowLocation
},
data() {
return {
appidsList: appidsList(),
formatTypeList: formatTypeList(),
contentTypeList: contentTypeList(),
StatusList: StatusList(),
formVideoTypeList: formVideoTypeList(),
// 请求列表参数
searchData: {
pageNum: 1,
pageSize: 20,
param: {
bango: undefined, // 番号
id: undefined,
showLocation: undefined, // 外用状态
appid: undefined,
end: undefined, // "string",结束时间
start: undefined, // "string",开始时间
status: undefined, // "string",当前状态
timeRange: undefined, // "string",时间范围 addedTime/createdAt/updatedAt 排序默认最新
title: undefined, // "string",标题
taskId: undefined,
formatType: undefined, // "string",长视频/短视频
actors: undefined, // 演员
publish: undefined, // 发布者
type: undefined, // 视频归类
contentType: undefined,
secondTags: undefined
}
},
time: undefined,
resData: [], // el-table表格数据
total: 0, // 数据总条数
selectArray: undefined,
editShowLocationVisible: undefined,
loading: true, // 列表加载状态
// 编辑数据
editVisible: false, // 新增或编辑弹出框
editData: {
title: '新增',
data: {}
}
}
},
filters: {
changeShowLocation(val) {
switch (val) {
case 0:
return '非外用'
case 1:
return '外用'
case 2:
return '已完成'
case 3:
return '待验收'
}
},
changeCoverType(val) {
switch (val) {
case 1:
return '横版'
case 2:
return '竖版'
case 3:
return '系统'
}
},
changeAppids(val) {
switch (val) {
case 1:
return '麻豆APP'
case 2:
return '麻豆官网'
case 3:
return 'JAV视频'
case 8:
case 4:
return '快手'
case 999:
return '哔哩哔哩'
case 444:
return '欲漫涩'
case 123:
return '快看禁漫'
case 6:
return '微勃视频'
case 80:
return '微勃视频'
case 494:
return '暗网视频'
case 8888:
return '外网禁忌'
case 178:
return '好色'
case 777:
return '微勃'
case 594:
return '乱伦'
case 694:
return '麻豆涩漫'
case 888:
return '麻豆'
case 258:
return '新内涵'
}
}
},
mounted() {
this.getMediaSearch()
},
methods: {
addOutside() {
this.editShowLocationVisible = true
this.editData = {
title: '',
data: this.selectArray
}
},
// 加入后台音频库
addAudioArray() {
Object.keys(this.selectArray).forEach(key => {
if (!this.selectArray[key].isAdd) {
this.audioListFn(key, this.selectArray[key])
}
})
},
// TODO:加入音频视频库
audioListFn(index, row) {
audioAdd({ fileId: row.id }).then(res => {
if (res.code === 200) {
this.$message.success('加入成功!')
this.getMediaSearch()
} else {
this.$message.error('加入失败!')
}
})
},
// TODO:加入后台视频库
addVideo(index, row) {
mediaAdd({ fileId: row.id }).then(res => {
if (res.code === 200) {
this.$message.success('加入成功!')
this.getMediaSearch()
} else {
this.$message.error('加入失败!')
}
})
},
// 加入到资源管理
addResourceVideo(index, row) {
mediaAddResource({ fileId: row.id }).then(res => {
if (res.code === 200) {
this.$message.success('加入成功!')
this.getMediaSearch()
} else {
this.$message.error('加入失败!')
}
})
},
// TODO:请求影片列表数据
getMediaSearch() {
this.loading = true
if (this.time) {
this.searchData.param.start = this.time[0]
this.searchData.param.end = this.time[1]
} else {
this.searchData.param.start = undefined
this.searchData.param.end = undefined
}
mediaSearch(this.searchData).then(res => {
if (res.code === 200) {
this.resData = res.data.list
this.total = res.data.total
} else {
this.$message.error('请求列表失败!')
this.resData = []
this.total = 0
}
this.loading = false
})
},
// TODO:删除影片列表数据
handleDelete(index, row) {
this.$confirm('确定删除?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
mediaDel({ id: row.id }).then(res => {
if (res.code === 200) {
this.getMediaSearch()
this.$message.success('成功删除!')
} else {
this.$message.error(res.tip)
}
})
})
},
addVideoArray() {
Object.keys(this.selectArray).forEach(key => {
if (!this.selectArray[key].isAdd) {
this.addVideo(key, this.selectArray[key])
}
})
},
onSeach() {
this.searchData.pageNum = 1
this.searchData.pageSize = 20
this.getMediaSearch()
},
// 切换每页数据量
handleSizeChange(val) {
this.searchData.pageSize = val
this.getMediaSearch()
},
// 切换页数
handleCurrentChange(val) {
this.searchData.pageNum = val
this.getMediaSearch()
},
handleSelectionChange(val) {
this.selectArray = val
},
// 新增按钮
add() {
this.editVisible = true // 新增或编辑弹出框
this.editData = {
title: '新增',
data: {}
}
},
// 编辑按钮
handleEdit(index, row) {
this.editVisible = true // 新增或编辑弹出框
this.editData = {
title: '编辑',
data: row
}
},
// 关闭编辑弹窗
closeEdit() {
this.editVisible = false
this.editShowLocationVisible = false
this.getMediaSearch()
},
// 清空某一项筛选列表
onClear(key) {
this.searchData.param[key] = undefined
this.getMediaSearch()
}
}
}
</script>
src/views/mediaLibrary/videoListV1/components/AddOrEdit.vue
-422
View File
@@ -1,422 +0,0 @@
<template>
<el-dialog :title="title" :visible.sync="Visible" width="1800px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
<el-form :inline="true" :model="form" class="demo-form-inline" label-width="120px" label-position="right">
<el-row :gutter="24">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
<el-form-item label="标题">
<el-input v-model="form.title" style="width: 315px" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
<el-form-item label="封面类型">
<el-select style="width: 180px" placeholder="请选择封面类型" v-model="form.coverType">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in coverTypeList" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
<el-form-item label="封面">
<UploadImg @changeImgUrl="changeCoverImgUrl" :img="form.coverImg"></UploadImg>
</el-form-item>
</el-col>
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
<el-form-item label="番号">
<el-input v-model="form.bango" style="width: 315px" />
</el-form-item>
</el-col>
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
<el-form-item label="演员">
<el-input v-model="form.actors" placeholder="可填多人，中间用'，/。/,'等符号分割" style="width:315px" />
</el-form-item>
</el-col>
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
<el-form-item label="视频归属">
<el-input v-model="form.mediaSet" style="width: 315px" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
<el-form-item label="一级标签:">
<el-input v-model="form.firstTag" placeholder="请输入一级标签,中间用'，/。/,'等符号分割" style="width:315px" />
</el-form-item>
</el-col>
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
<el-form-item label="二级标签">
<el-input v-model="form.secondTags" placeholder="请输入二级标签,中间用'，/。/,'等符号分割" style="width:315px" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
<el-form-item label="APP">
<el-select multiple placeholder="APP" v-model="form.appids" style="width: 180px">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in appidsList" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
<el-form-item label="视频类型">
<el-select placeholder="请选择视频类型" v-model="form.formatType" style="width: 180px">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in formatTypeList" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
<el-form-item label="内容类型">
<el-select placeholder="请选择内容类型" v-model="form.contentType" style="width: 180px">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in contentTypeList" />
</el-select>
</el-form-item>
</el-col>
<el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
<el-form-item label="发布者">
<el-input v-model="form.publish" placeholder="请输入发布者" style="width: 180px" />
</el-form-item>
</el-col>
<el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
<el-form-item label="所有者">
<el-input v-model="form.studio" placeholder="请输入所有者" style="width: 180px" />
</el-form-item>
</el-col>
<el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
<el-form-item label="上架时间">
<el-date-picker style="width: 180px" v-model="form.addedTime" type="date" placeholder="选择日期" value-format="yyyy-MM-ddTHH:mm:ssZ">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="12">
<el-form-item label="正片地址">
<el-input v-model="form.fieldNameFs" style="width: 515px" disabled="disabled" />
</el-form-item>
</el-col>
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="12">
<el-form-item label="预览地址">
<el-input v-model="form.preFileName" style="width: 515px">
<el-button slot="append" @click="innerVisible = true">自定义设置预览</el-button>
</el-input>
</el-form-item>
</el-col>
<el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
<el-form-item label="详细描述">
<el-input v-model="form.desc" type="textarea" style="width: 515px" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div style="position: absolute;top: 50px;right: 50px">
<div style="float:left">
<h3>预览</h3>
<div v-if="form.fieldNameFs" style="width: 380px; height: 240px; overflow: hidden">
<DPlayer ref="player" :video="{
url: '/api/web/media/m3u8/' + filterM3u8(form.preFileName),
type: 'hls',
pic: '',
}" hotkey :autoplay="false" @playing="onPlayerPlay" @pause="onPlayerPause" @loadeddata="onPlayerLoadeddata" @error="onPlayerError" @ended="onPlayerEnded" @waiting="onPlayerWaiting"></DPlayer>
</div>
</div>
<div style="float:left">
<h3>正片</h3>
<div v-if="form.fieldNameFs" style="width: 380px; height: 240px; overflow: hidden">
<DPlayer ref="player" :video="{
url: '/api/web/media/m3u8/' + filterM3u8(form.fieldNameFs),
type: 'hls',
pic: '',
}" hotkey :autoplay="false" @playing="onPlayerPlay" @pause="onPlayerPause" @loadeddata="onPlayerLoadeddata" @error="onPlayerError" @ended="onPlayerEnded" @waiting="onPlayerWaiting"></DPlayer>
</div>
<UploadVideo @changeVideoUrl="changeVideoUrl" @repeatVideo="repeatVideo" style="max-width: 520px"></UploadVideo>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click.native.prevent="Visible = false"> 取 消 </el-button>
<el-button type="primary" @click.native.prevent="submit('ruleForm')">
确 定
</el-button>
</div>
<el-dialog width="30%" title="设置预览时长" :visible.sync="innerVisible" append-to-body>
<el-row>
<el-col :span="24" style="text-align: center">
<div><span>总时长:</span>{{ totalTime }}s</div>
<div>
时:
<el-input-number :min="0" :max="24" size="mini" v-model="previewTimeData.h"></el-input-number>
</div>
<div>
分:
<el-input-number :min="0" :max="59" size="mini" v-model="previewTimeData.m"></el-input-number>
</div>
<div>
秒:
<el-input-number :min="0" :max="59" size="mini" v-model="previewTimeData.s"></el-input-number>
</div>
</el-col>
<el-col :span="24" style="text-align: center; margin: 10px 0">
<el-button-group>
<el-button type="info" @click.native.prevent="restTime">取消</el-button>
<el-button type="primary" @click.native.prevent="subimitPTime">确定
</el-button>
</el-button-group>
</el-col>
</el-row>
</el-dialog>
</el-dialog>
</template>
<script>
import DPlayer from '@/components/VueDplayerHls/index'
import UploadImg from '@/components/UploadImg/index'
import UploadVideo from '@/components/UploadVideo/index'
import 'videojs-contrib-hls'
import { mediaUpdateV1, updatePreTimeV1 } from '@/api/mediaLibrary/videoList'
import { stringToArry, arryToString, current } from '@/filters/index'
import {
coverTypeList,
appidsList,
formatTypeList,
contentTypeList,
} from '@/filters/mediaLibrary/videoList'
export default {
name: 'AddOrEdit',
props: ['data'],
components: {
UploadImg,
UploadVideo,
DPlayer,
},
computed: {
totalTime() {
return this.data.data.videoTime
},
},
data() {
return {
coverTypeList: coverTypeList(),
appidsList: appidsList(),
formatTypeList: formatTypeList(),
contentTypeList: contentTypeList(),
innerVisible: false,
Visible: true,
title: '',
defaltTime: current() + 'T12:00:00.000Z',
taskId: '',
tags: null,
fieldNameFs: '', // 正片地址全称
form: {
formatType: undefined, // 视频类型 1:长视频 2:短视频 3:预览
mediaSet: undefined, // 视频归属
contentType: undefined, // 内容类型 1:av（日本） 2:国产（短视频） 3:动漫
coverType: undefined, // 封面类型 1:竖版 2:横版 3:系统
title: undefined, // 'string',标题
addedTime: undefined, // 'string',上架时间
publish: undefined, // 'string',视频发布者
firstTag: undefined, // 'string',一级标签
secondTags: undefined, // [],二级标签标签
bango: undefined, // 'string',番号
appids: [],
desc: undefined, // 'string',详细描述
preFileName: undefined, // 'string',预览文件
coverImg: undefined, // 封面
actors: undefined, // [],演员
studio: undefined, // 'string',工作室/所有者
},
previewTimeData: {
h: 0,
m: 0,
s: 0,
},
}
},
created() {
this.title = this.data.title
if (this.title === '编辑') {
this.form = { ...this.data.data }
this.form.actors = arryToString(this.form.actors)
this.form.secondTags = arryToString(this.form.secondTags)
this.form.mediaSet = arryToString(this.form.mediaSet)
if (this.form.fieldNameFs) {
this.open()
}
}
if (this.player) {
this.player.dispose()
}
},
methods: {
//TODO:编辑影片列表数据
update(data) {
mediaUpdateV1(data).then((res) => {
if (res.code === 200) {
this.$message.success('更新成功')
this.close()
} else {
this.$message.error('更新失败')
}
})
},
filterM3u8(v) {
return /\.m3u8/g.test(v) ? v : v + '.m3u8'
},
// 清空某一项筛选列表
onClear(key) {
this.form.param[key] = []
},
restTime() {
this.previewTimeData = {
h: 0,
m: 0,
s: 0,
}
this.innerVisible = false
},
async subimitPTime() {
let s = 0
if (this.previewTimeData.h) {
s += this.previewTimeData.h * 60 * 60
}
if (this.previewTimeData.m) {
s += this.previewTimeData.m * 60
}
s += this.previewTimeData.s
if (s > 0 && s + 15 <= this.data.data.videoTime - 15) {
const res = await updatePreTimeV1({
id: this.data.data.id,
preFileTime: s,
})
if (res.code === 200) {
this.$message.success('预览时长设置成功')
this.innerVisible = false
} else {
this.$message.error('预览时长设置失败')
}
} else {
this.$message.error('预览时长设置不能为零或不能超过播放时长')
}
},
// 提交按钮
submit() {
const data = { ...this.form }
data.actors = data.actors ? stringToArry(data.actors) : []
data.secondTags = data.secondTags ? stringToArry(data.secondTags) : []
data.mediaSet = data.mediaSet ? stringToArry(data.mediaSet) : []
data.addedTime = data.addedTime
? data.addedTime === '0001-01-01T00:00:00Z'
? this.defaltTime
: data.addedTime
: this.defaltTime
this.update(data)
},
// 上传视频返回地址
changeVideoUrl(data) {
this.form.id = data.id
// this.$set(this.form, 'fieldNameFs', data.videoUri)
this.fieldNameFs = data.videoUri
// this.form.fieldNameFs = data.videoUri
// this.form.videoTime = parseInt(data.duration)
// this.form.size = data.size
// this.open()
},
// 重复上传视频
repeatVideo(data) {
this.taskId = data.taskId
this.getData()
},
// 上传图片返回地址
changeCoverImgUrl(data) {
this.form.coverImg = data
},
// / 监听视频播放的回调函数
onPlayerPlay() {},
// / 监听暂停播放的回调函数
onPlayerPause() {},
// / 监听当前视频数据加载完成
onPlayerLoadeddata() {},
// / 监听当前视频数据加载失败
onPlayerError() {},
// / 监听当前视频数据加载ing
onPlayerWaiting() {},
// / 监听当前视频播放完成
onPlayerEnded() {},
open() {
this.mediaUrl =
'api/web/media/m3u8/' +
(this.form.fieldNameFs.match(RegExp(/.m3u8/))
? this.form.fieldNameFs
: this.form.fieldNameFs + '.m3u8')
// this.$nextTick(function () {
// document.getElementById("media-box").innerHTML =
// '<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" style="width:100%;height:100%; " playsinline="true"></video>';
// this.player = videojs("my-video", {
// bigPlayButton: false,
// textTrackDisplay: false,
// posterImage: true,
// errorDisplay: true,
// controlBar: true,
// playbackRates: [0.5, 1, 1.5, 2, 3, 5, 10],
// });
// this.player.src(this.mediaUrl);
// });
},
// 关闭编辑
close() {
if (this.player) {
this.player.dispose()
}
this.$emit('close')
},
},
}
</script>
<style lang="scss">
.el-dialog {
display: flex;
flex-direction: column;
margin: 0 !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*height:600px;*/
max-height: calc(100% - 30px);
max-width: calc(100% - 30px);
}
.el-dialog .el-dialog__body {
flex: 1;
overflow: auto;
}
.videoBox {
display: flex;
justify-content: center;
overflow: hidden;
}
.el-textarea.is-disabled.ti .el-textarea__inner {
color: red;
}
.media-box {
width: 100%;
height: 400px;
text-align: center;
overflow: hidden;
img {
height: 100%;
max-width: 100%;
}
#my-video {
width: 100% !important;
height: 100% !important;
border: none !important;
}
}
</style>
src/views/mediaLibrary/videoListV1/index.vue
-412
View File
@@ -1,412 +0,0 @@
<template>
<div class="pf-warpper avlist">
<el-row class="table-form">
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
<el-form-item>
<el-input placeholder="请输入影片ID" clearable v-model="searchData.param.id" @clear="onClear('id')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入标题" clearable v-model="searchData.param.title" @clear="onClear('title')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入任务ID" clearable v-model="searchData.param.taskId" @clear="onClear('taskId')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入番号" clearable v-model="searchData.param.bango" @clear="onClear('bango')" />
</el-form-item>
<el-form-item>
<el-select placeholder="请选择当前状态" clearable v-model="searchData.param.status" @clear="onClear('status')">
<el-option v-for="item in StatusList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="请选择APP类型" clearable v-model="searchData.param.appid" @clear="onClear('appid')">
<el-option v-for="item in appidsList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入一级标签" clearable v-model="searchData.param.firstTag" @clear="onClear('firstTag')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入二级标签" clearable v-model="secondTagsString" @clear="onClear('secondTags')" />
</el-form-item>
<el-form-item>
<el-select placeholder="请选择视频类型" clearable v-model="searchData.param.formatType" @clear="onClear('formatType')">
<el-option v-for="item in formatTypeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="请选择内容类型" clearable v-model="searchData.param.contentType" @clear="onClear('contentType')">
<el-option v-for="item in contentTypeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="请选择排序方式" clearable v-model="searchData.param.timeRange" @clear="onClear('timeRange')">
<el-option label="上架时间排序" value="addedTime" />
<el-option label="创建时间排序" value="createdAt" />
<el-option label="修改时间排序" value="updatedAt" />
</el-select>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入演员" clearable v-model="searchData.param.actors" @clear="onClear('actors')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入发布者" clearable v-model="searchData.param.publish" @clear="onClear('publish')" />
</el-form-item>
<el-form-item>
<el-date-picker v-model="time" type="daterange" range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button @click="onSeach" icon="el-icon-search" plain type="primary">搜索</el-button>
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
<el-button @click="addVideoArray" icon="el-icon-circle-plus-outline" plain type="warning">批量加入后台视频库</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-col>
<el-table :data="resData" element-loading-text="拼命加载中" border height="735" highlight-current-row style="width: 100%; font-size: 10px" v-loading="loading" :row-style="{ height: '30px' }" :cell-style="{ padding: '5px' }" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50"> </el-table-column>
<el-table-column align="center" label="视频ID" width="190px">
<template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column>
<el-table-column align="center" label="标题" width="190px" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.title }}</template>
</el-table-column>
<el-table-column align="center" label="视频封面" width="80px">
<template slot-scope="scope">
<ShowImg style="width: 30px; height: 30px; margin: 0 auto" :urls="scope.row.coverImg"></ShowImg>
</template>
</el-table-column>
<el-table-column align="center" label="任务ID" width="190px">
<template slot-scope="scope">{{ scope.row.taskId }}</template>
</el-table-column>
<el-table-column align="center" label="发布者">
<template slot-scope="scope">{{ scope.row.publish }}</template>
</el-table-column>
<el-table-column align="center" label="视频类型">
<template slot-scope="scope">{{
scope.row.formatType |changeFormat
}}</template>
</el-table-column>
<el-table-column align="center" label="内容类型">
<template slot-scope="scope">{{
scope.row.contentType |changeContentType
}}</template>
</el-table-column>
<el-table-column align="center" label="封面类型" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.coverType |changeCoverType}}</template>
</el-table-column>
<el-table-column align="center" label="APP类型" width="150">
<template slot-scope="scope">
<el-tag :key="index" style="margin: 2px" v-for="(item, index) in scope.row.appids" size="mini">
{{item |changeAppids }}
</el-tag>
</template>
</el-table-column>
<el-table-column align="center" label="一级标签" width="100px">
<template slot-scope="scope">{{ scope.row.firstTag }}</template>
</el-table-column>
<el-table-column align="center" label="二级标签" width="150px">
<template slot-scope="scope">
<el-tag :key="index" v-for="(item, index) in scope.row.secondTags" type="primary">{{ item }}</el-tag>
</template>
</el-table-column>
<el-table-column align="center" label="视频归属" width="100px">
<template slot-scope="scope">{{ scope.row.mediaSet }}</template>
</el-table-column>
<el-table-column align="center" label="当前状态" width="110px">
<template slot-scope="scope">
<el-button :type="scope.row.status === 'Completed' ? 'success' : 'danger'" plain size="mini">{{ scope.row.status | changeStatus }}</el-button>
</template>
</el-table-column>
<el-table-column align="center" label="演员" width="200">
<template slot-scope="scope">
<el-tag :key="index" v-for="(item, index) in scope.row.actors" type="primary">{{ item }}</el-tag>
</template>
</el-table-column>
<el-table-column align="center" label="所有者" width="100px">
<template slot-scope="scope">{{ scope.row.studio }}</template>
</el-table-column>
<el-table-column align="center" label="番号" width="150px" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.bango }}</template>
</el-table-column>
<el-table-column align="center" label="备注" width="150px" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.remark }}</template>
</el-table-column>
<el-table-column align="center" label="影片时长" width="80px">
<template slot-scope="scope">{{
scope.row.videoTime | secondToHouseMinuteSecond
}}</template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="300">
<template slot-scope="scope">
<el-button @click="addVideo(scope.$index, scope.row)" size="mini" :type="!scope.row.isAdd ? 'primary' : 'info'" :disabled="scope.row.isAdd">加入后台视频库</el-button>
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<div class="table-pagination">
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
</div>
<!-- 新增及编辑 -->
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
<ShowVideo ref="showvideo"></ShowVideo>
</div>
</template>
<script>
// 引入模块
import ShowImg from '@/components/ShowImg/index.vue'
import Edit from './components/AddOrEdit'
import { mediaSearchV1, mediaDelV1 } from '@/api/mediaLibrary/videoList'
import ShowVideo from '@/components/ShowVideo/index.vue'
import {
appidsList,
formatTypeList,
contentTypeList,
StatusList,
} from '@/filters/mediaLibrary/videoList'
import { mediaAddV1 } from '@/api/videoManagement/videoList'
export default {
name: 'MediaCat',
components: {
Edit,
ShowImg,
ShowVideo,
},
data() {
return {
appidsList: appidsList(),
formatTypeList: formatTypeList(),
contentTypeList: contentTypeList(),
StatusList: StatusList(),
secondTagsString:undefined,
// 请求列表参数
searchData: {
pageNum: 1,
pageSize: 20,
param: {
bango: undefined, // 番号
id: undefined,
appid: undefined,
end: undefined, // "string",结束时间
start: undefined, // "string",开始时间
status: undefined, // "string",当前状态
timeRange: undefined, // "string",时间范围 addedTime/createdAt/updatedAt 排序默认最新
title: undefined, // "string",标题
taskId: undefined,
formatType: undefined, // "string",长视频/短视频
actors: undefined, // 演员
publish: undefined, // 发布者
contentType: undefined,
},
},
time: undefined,
resData: [], // el-table表格数据
total: 0, // 数据总条数
selectArray: undefined,
loading: true, // 列表加载状态
// 编辑数据
editVisible: false, // 新增或编辑弹出框
editData: {
title: '新增',
data: {},
},
}
},
filters: {
changeCoverType(val) {
switch (val) {
case 1:
return '横版'
case 2:
return '竖版'
case 3:
return '系统'
}
},
changeAppids(val) {
switch (val) {
case 1:
return '麻豆APP'
case 2:
return '麻豆官网'
case 3:
return 'JAV视频'
case 8:
case 4:
return '快手'
case 999:
return '哔哩哔哩'
case 444:
return '欲漫涩'
case 123:
return '快看禁漫'
case 6:
return '微勃视频'
case 80:
return '微勃视频'
case 494:
return '暗网视频'
case 8888:
return '外网禁忌'
case 178:
return '好色'
case 777:
return '微勃'
case 594:
return '乱伦'
case 694:
return '麻豆涩漫'
case 888:
return '麻豆'
case 258:
return '新内涵'
}
},
changeFormat(val) {
switch (val) {
case 1:
return '长视频'
case 2:
return '短视频'
case 3:
return '预览'
}
},
changeContentType(val) {
switch (val) {
case 1:
return 'AV（日本）'
case 2:
return '短视频（国产）'
case 3:
return '动漫'
}
},
},
mounted() {
this.getMediaSearch()
},
methods: {
//TODO:加入后台视频库
addVideo(index, row) {
mediaAddV1({ fileId: row.id }).then((res) => {
if (res.code === 200) {
this.$message.success('加入成功!')
this.getMediaSearch()
} else {
this.$message.error('加入失败!')
}
})
},
//TODO:请求影片列表数据
getMediaSearch() {
this.loading = true
if (this.time) {
this.searchData.param.start = this.time[0]
this.searchData.param.end = this.time[1]
} else {
this.searchData.param.start = undefined
this.searchData.param.end = undefined
}
if(this.secondTagsString){
this.searchData.param.secondTags = [this.secondTagsString]
}
mediaSearchV1(this.searchData).then((res) => {
if (res.code === 200) {
this.resData = res.data.list
this.total = res.data.total
} else {
this.$message.error('请求列表失败!')
this.resData = []
this.total = 0
}
this.loading = false
})
},
//TODO:删除影片列表数据
handleDelete(index, row) {
this.$confirm('确定删除?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
mediaDelV1({ id: row.id }).then((res) => {
if (res.code === 200) {
this.getMediaSearch()
this.$message.success('成功删除!')
} else {
this.$message.error(res.tip)
}
})
})
},
addVideoArray() {
Object.keys(this.selectArray).forEach((key) => {
if (!this.selectArray[key].isAdd) {
this.addVideo(key, this.selectArray[key])
}
})
},
onSeach() {
this.searchData.pageNum = 1
this.searchData.pageSize = 20
this.getMediaSearch()
},
// 切换每页数据量
handleSizeChange(val) {
this.searchData.pageSize = val
this.getMediaSearch()
},
// 切换页数
handleCurrentChange(val) {
this.searchData.pageNum = val
this.getMediaSearch()
},
handleSelectionChange(val) {
this.selectArray = val
},
// 新增按钮
add() {
this.editVisible = true // 新增或编辑弹出框
this.editData = {
title: '新增',
data: {},
}
},
// 编辑按钮
handleEdit(index, row) {
this.editVisible = true // 新增或编辑弹出框
this.editData = {
title: '编辑',
data: row,
}
},
// 关闭编辑弹窗
closeEdit() {
this.editVisible = false
this.getMediaSearch()
},
// 清空某一项筛选列表
onClear(key) {
this.searchData.param[key] = undefined
this.getMediaSearch()
},
},
}
</script>
src/views/mediaLibrary/videoListV2/components/AddOrEdit.vue
-469
View File
@@ -1,469 +0,0 @@
<template>
<el-dialog
:title="title"
:visible.sync="Visible"
width="1800px"
center
class="ac-dialog"
:close-on-click-modal="false"
@close="close">
<el-form :inline="true" :model="form" class="demo-form-inline" label-width="120px" label-position="right">
<div>
<el-form-item label="标题">
<el-input v-model="form.title" style="width: 315px" />
</el-form-item>
</div>
<div>
<el-form-item label="封面">
<UploadImg @changeImgUrl="changeCoverImgUrl" :img="form.coverImg" @onRemove="handleRemove('coverImg')">
</UploadImg>
</el-form-item>
</div>
<el-form-item label="影片类型">
<el-select clearable placeholder="影片类型" v-model="form.type" style="width: 180px">
<el-option label="长视频" value="longvideo" />
<el-option label="短视频" value="shortvideo" />
</el-select>
</el-form-item>
<el-form-item label="视频归类">
<el-select placeholder="请选择视频归类" v-model="videoType" style="width: 180px">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in formVideoTypeList" />
</el-select>
</el-form-item>
<div>
<el-form-item label="APP">
<el-select placeholder="APP" v-model="form.appids" style="width: 180px">
<el-option label="麻豆APP" :value="1" />
<el-option label="麻豆官网" :value="2" />
<el-option label="逼喱逼喱" :value="3" />
</el-select>
</el-form-item>
</div>
<div>
<el-form-item label="上架时间">
<el-date-picker
style="width: 180px"
v-model="form.addedTime"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-ddTHH:mm:ssZ">
</el-date-picker>
</el-form-item>
</div>
<div>
<el-form-item label="正片地址">
<el-input v-model="form.fieldNameFs" style="width: 515px" disabled="disabled" />
</el-form-item>
</div>
<div>
<el-form-item label="预览地址">
<el-input v-model="form.preFileName" style="width: 515px">
<el-button slot="append" @click="innerVisible = true">自定义设置预览</el-button>
</el-input>
</el-form-item>
</div>
<el-form-item label="详细描述">
<el-input v-model="form.desc" type="textarea" style="width: 515px" />
</el-form-item>
</el-form>
<div style="position: absolute; top: 50px; right: 10px">
<h3>正片</h3>
<div v-if="form.fieldNameFs" style="width: 380px; height: 240px; overflow: hidden">
<DPlayer
ref="player"
v-if="form.fieldNameFs.indexOf('mp4') === -1"
:video="{
url: '/api/web/media/m3u8/' + filterM3u8(form.fieldNameFs),
type: 'hls',
pic: ''
}"
hotkey></DPlayer>
<DPlayer
ref="player"
v-else
:video="{
url:
this.$store.getters.getSystemConfig.mp4Url + form.fieldNameFs,
type: 'mp4',
pic: ''
}"
hotkey></DPlayer>
</div>
<UploadVideo
v-if="videoType"
@changeVideoUrl="changeVideoUrl"
:appId="form.appids ? form.appids : 888"
:type="videoType"
@repeatVideo="repeatVideo"
style="max-width: 520px"></UploadVideo>
<div v-else class="check_upload" @click.prevent="checkUpload">
<div>
选择文件
</div>
</div>
</div>
<div style="position: absolute; top: 50px; right: 410px">
<h3>预览</h3>
<div v-if="form.preFileName" style="width: 380px; height: 240px; overflow: hidden">
<DPlayer
ref="player"
v-if="form.preFileName.indexOf('mp4') === -1"
:video="{
url: '/api/web/media/m3u8/' + filterM3u8(form.preFileName),
type: 'hls',
pic: ''
}"
hotkey></DPlayer>
<DPlayer
ref="player"
v-else
:video="{
url:
this.$store.getters.getSystemConfig.mp4Url + form.preFileName,
type: 'mp4',
pic: ''
}"
hotkey></DPlayer>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click.native.prevent="Visible = false"> 取 消 </el-button>
<el-button type="primary" @click.native.prevent="submit('ruleForm')">
确 定
</el-button>
</div>
<el-dialog width="30%" title="设置预览时长" :visible.sync="innerVisible" append-to-body>
<el-row>
<el-col :span="24" style="text-align: center">
<div><span>总时长:</span>{{ totalTime }}s</div>
<div>
时:
<el-input-number :min="0" :max="24" size="mini" v-model="previewTimeData.h"></el-input-number>
</div>
<div>
分:
<el-input-number :min="0" :max="59" size="mini" v-model="previewTimeData.m"></el-input-number>
</div>
<div>
秒:
<el-input-number :min="0" :max="59" size="mini" v-model="previewTimeData.s"></el-input-number>
</div>
</el-col>
<el-col :span="24" style="text-align: center; margin: 10px 0">
<el-button-group>
<el-button type="info" @click.native.prevent="restTime">取消</el-button>
<el-button type="primary" @click.native.prevent="subimitPTime">确定
</el-button>
</el-button-group>
</el-col>
</el-row>
</el-dialog>
</el-dialog>
</template>
<script>
import DPlayer from '@/components/VueDplayerHls/index'
import UploadImg from '@/components/UploadImg/index'
import UploadVideo from '@/components/UploadVideoLibraryV2/index'
import 'videojs-contrib-hls'
import { mediaUpdateV2, updatePreTime } from '@/api/mediaLibrary/videoList'
import { stringToArry, arryToString } from '@/filters/index'
import {
StatusList,
formVideoTypeList
} from '@/filters/mediaLibrary/videoList'
import { current } from '@/filters/index'
export default {
name: 'AddOrEdit',
props: ['data'],
components: {
UploadImg,
UploadVideo,
DPlayer
},
computed: {
totalTime() {
return this.data.data.videoTime
}
},
data() {
return {
innerVisible: false,
Visible: true,
title: '',
defaltTime: current() + 'T12:00:00.000Z',
taskId: '',
StatusList: StatusList(),
formVideoTypeList: formVideoTypeList(),
tags: null,
fieldNameFs: '', // 正片地址全称
secondTags: [],
FirstTagList: [],
form: {
appids: undefined,
actors: undefined, // [],演员
addedTime: undefined, // 'string',上架时间
bango: undefined, // 'string',番号
checkSum: undefined, // 'string',md5校验码
country: undefined, // 'string',国家
coverImg: undefined, // 封面
desc: undefined, // 'string',详细描述
directors: undefined, // [],导演
firstTag: undefined, // 'string',一级标签
preFileName: undefined, // 'string',预览文件
preview: undefined, // 0,预览普通视频
publish: undefined, // 'string',视频发布者
secondTags: undefined, // [],二级标签标签
size: undefined, // 0,文件大小
status: undefined, // 'string',当前状态
studio: undefined, // 'string',工作室/所有者
title: undefined, // 'string',标题
type: undefined, // 'string',长视频/短视频
videoTime: undefined // 0,影片长度
},
previewTimeData: {
h: 0,
m: 0,
s: 0
},
type: undefined,
videoType: undefined
}
},
created() {
this.title = this.data.title
if (this.title === '编辑') {
this.form = { ...this.data.data }
this.form.actors = arryToString(this.form.actors)
this.form.directors = arryToString(this.form.directors)
if (this.form.fieldNameFs) {
this.open()
}
}
if (this.player) {
this.player.dispose()
}
},
methods: {
checkUpload() {
if (!this.videoType) {
return this.$message({
type: 'error',
message: '请选择视频归类！!'
})
}
},
// TODO：新增视频时绑定煤资库ID
async subimitPTime() {
let s = 0
if (this.previewTimeData.h) {
s += this.previewTimeData.h * 60 * 60
}
if (this.previewTimeData.m) {
s += this.previewTimeData.m * 60
}
s += this.previewTimeData.s
if (s > 0 && s + 15 <= this.data.data.videoTime - 15) {
const data = {
id: this.data.data.id,
preFileTime: s
}
updatePreTime(data).then(res => {
if (res.code === 200) {
this.$message.success('预览时长设置成功')
this.innerVisible = false
} else {
this.$message.error('预览时长设置失败')
}
})
} else {
this.$message.error('预览时长设置不能为零或不能超过播放时长')
}
},
// TODO：提交视频列表数据
update(data) {
mediaUpdateV2(data).then(res => {
if (res.code === 200) {
this.$message.success('更新成功')
this.close()
} else {
this.$message.error('更新失败')
}
})
},
filterM3u8(v) {
return /\.m3u8/g.test(v) ? v : v + '.m3u8'
},
handleRemove(key) {
this.form[key] = ''
},
// 清空某一项筛选列表
onClear(key) {
this.form.param[key] = []
},
restTime() {
this.previewTimeData = {
h: 0,
m: 0,
s: 0
}
this.innerVisible = false
},
// 提交按钮
submit() {
const data = { ...this.form }
data.appids = data.appids ? [data.appids] : []
data.actors = data.actors ? stringToArry(data.actors) : []
data.directors = data.directors ? stringToArry(data.directors) : []
const YY = new Date().getUTCFullYear()
const MM =
new Date().getMonth() + 1 < 10
? `0${new Date().getMonth() + 1}`
: new Date().getMonth() + 1
const DD =
new Date().getUTCDate() < 10
? `0${new Date().getUTCDate()}`
: new Date().getUTCDate()
const HH =
new Date().getUTCHours() < 10
? `0${new Date().getUTCHours()}`
: new Date().getUTCHours()
const MU =
new Date().getUTCMinutes() < 10
? `0${new Date().getUTCMinutes()}`
: new Date().getUTCMinutes()
const SS =
new Date().getUTCSeconds() < 10
? `0${new Date().getUTCSeconds()}`
: new Date().getUTCSeconds()
const MS =
new Date().getUTCMilliseconds() < 10
? `0${new Date().getUTCMilliseconds()}`
: new Date().getUTCMilliseconds()
data.addedTime =
data.addedTime || `${YY}-${MM}-${DD}T${HH}:${MU}:${SS}.${MS}Z`
this.update(data)
},
// 上传视频返回地址
changeVideoUrl(data) {
console.log(data)
this.form.id = data.id
this.form.fieldNameFs = data.videoUri
this.form.videoTime = parseInt(data.duration)
this.form.size = data.size
},
// 重复上传视频
repeatVideo(data) {
this.taskId = data.taskId
this.getData()
},
// 上传图片返回地址
changeCoverImgUrl(data) {
this.form.coverImg = data
},
// / 监听视频播放的回调函数
onPlayerPlay() { },
// / 监听暂停播放的回调函数
onPlayerPause() { },
// / 监听当前视频数据加载完成
onPlayerLoadeddata() { },
// / 监听当前视频数据加载失败
onPlayerError() { },
// / 监听当前视频数据加载ing
onPlayerWaiting() { },
// / 监听当前视频播放完成
onPlayerEnded() { },
open() {
this.mediaUrl =
'api/web/media/m3u8' +
(this.form.fieldNameFs.match(RegExp(/.m3u8/))
? this.form.fieldNameFs
: this.form.fieldNameFs + '.m3u8')
},
// 关闭编辑
close() {
if (this.player) {
this.player.dispose()
}
this.$emit('close')
}
}
}
</script>
<style lang="scss">
.el-dialog {
display: flex;
flex-direction: column;
margin: 0 !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*height:600px;*/
max-height: calc(100% - 30px);
max-width: calc(100% - 30px);
}
.el-dialog .el-dialog__body {
flex: 1;
overflow: auto;
}
.videoBox {
display: flex;
justify-content: center;
overflow: hidden;
}
.el-textarea.is-disabled.ti .el-textarea__inner {
color: red;
}
.media-box {
width: 100%;
height: 400px;
text-align: center;
overflow: hidden;
img {
height: 100%;
max-width: 100%;
}
#my-video {
width: 100% !important;
height: 100% !important;
border: none !important;
}
}
.check_upload {
position: relative;
padding: 10px;
overflow: hidden;
border: 1px dashed #ccc;
background-color: #f5f5f5;
div {
display: inline-block;
position: relative;
padding: 4px 8px;
font-size: 100%;
line-height: 1.4;
color: #666;
border: 1px solid #666;
cursor: pointer;
border-radius: 2px;
background: none;
outline: none;
}
}
</style>
src/views/mediaLibrary/videoListV2/index.vue
-293
View File
@@ -1,293 +0,0 @@
<template>
<div class="pf-warpper avlist">
<el-row class="table-form">
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
<el-form-item>
<el-input placeholder="请输入hashID" clearable v-model="searchData.hash_id" @clear="onClear('hash_id')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入标题" clearable v-model="searchData.title" @clear="onClear('title')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入UP主ID" clearable v-model.number="searchData.vlogger_user_id" @clear="onClear('vlogger_user_id')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入标签" clearable v-model="searchData.tag_text" @clear="onClear('tag_text')" />
</el-form-item>
<el-form-item>
<el-select placeholder="请选择作者类型" clearable v-model="searchData.mVia" @clear="onClear('mVia')">
<el-option v-for="item in mViaList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="请选择视频类型" clearable v-model="searchData.videoType" @clear="onClear('videoType')">
<el-option v-for="item in videoTypes" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="请选择同步类型" clearable v-model="searchData.syncType" @clear="onClear('syncType')">
<el-option v-for="item in syncTypes" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="请选择排序类型" clearable v-model="searchData.sortType" @clear="onClear('sortType')">
<el-option v-for="item in sortTypes" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="列表最大总数" clearable v-model="searchData.maxTotal" @clear="onClear('maxTotal')">
<el-option v-for="item in maxTotalTypes" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
</el-form-item>
<el-form-item>
<el-button @click="onSeach" icon="el-icon-search" plain type="primary">搜索</el-button>
<!-- <el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button> -->
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-col>
<el-table
:data="resData"
element-loading-text="拼命加载中"
border
height="735"
highlight-current-row
style="width: 100%; font-size: 10px"
v-loading="loading"
:row-style="{ height: '30px' }"
:cell-style="{ padding: '5px' }">
<el-table-column prop="id" label="ID" align="center" min-width="120"></el-table-column>
<el-table-column align="center" label="标题" width="120px" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.title || '未知' }}</template>
</el-table-column>
<el-table-column prop="content" label="视频内容" align="center" width="160" show-overflow-tooltip>
<!-- <template slot-scope="scope">
<span>{{ scope.row.content || '-' }}</span>
</template> -->
</el-table-column>
<el-table-column prop="videoType" label="类型" align="center" width="120">
<template slot-scope="scope">
<span>{{ scope.row.videoType | handleType }}</span>
</template>
</el-table-column>
<el-table-column prop="vlogger_user_id" label="UP主ID" align="center" min-width="120"></el-table-column>
<el-table-column prop="tags_text" label="标签" align="center" min-width="200">
<!-- <template slot-scope="scope">
<el-tag size="middle" type="success" class="tagItem" v-for="(item, index) in scope.row.tagList" :key="index">{{ item }}</el-tag>
</template> -->
</el-table-column>
<el-table-column prop="hash_id" label="hashId" align="center" min-width="200"></el-table-column>
<el-table-column label="封面图" align="center" width="200" prop="cover">
<template slot-scope="scope">
<ShowImg class="imgBox" style="width: auto; height: 60px; margin: 0 auto" :urls="scope.row.cover_image"></ShowImg>
</template>
</el-table-column>
<el-table-column align="center" label="预览">
<template slot-scope="scope">
<i
v-if="(scope.row.src_480 || scope.row.src_720 || scope.row.src_1080, scope.row)"
class="el-icon-video-play views"
title="点击预览"
@click="checkMedia(scope.row.src_480 || scope.row.src_720 || scope.row.src_1080, scope.row)"></i>
<div v-else>暂无</div>
</template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="300">
<template slot-scope="scope">
<el-button @click="addVideo(scope.$index, scope.row)" size="mini" :type="!scope.row.isAdd ? 'primary' : 'info'" :disabled="scope.row.isAdd">加入后台视频库</el-button>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<div class="table-pagination">
<el-pagination
:current-page="searchData.pageNum"
:page-size="searchData.pageSize"
:page-sizes="[10, 20, 30, 50, 100, 500, 1000]"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
layout="total, sizes, prev, pager, next, jumper"/>
</div>
<ShowVideo ref="showvideo"></ShowVideo>
</div>
</template>
<script>
// 引入模块
import ShowImg from '@/components/ShowImg/index.vue'
import { mediaSearchV2 } from '@/api/mediaLibrary/videoList'
import ShowVideo from '@/components/ShowVideo/index.vue'
import { mediaAddV2 } from '@/api/videoManagement/videoList'
export default {
name: 'MediaCat',
components: {
ShowImg,
ShowVideo
},
data() {
return {
videoTypes: [
{
label: '长视频',
value: 0
},
{
label: '短视频',
value: 1
},
{
label: '图文',
value: 2
}
],
syncTypes: [
{
label: '全量',
value: 'all'
},
{
label: '增量',
value: 'incr'
}
],
maxTotalTypes: [
{
label: '1000',
value: 1000
},
{
label: '2000',
value: 2000
},
{
label: '5000',
value: 5000
},
{
label: '10000',
value: 10000
}
],
mViaList: [
{ label: '全部', value: 0 },
{ label: 'up主', value: 1 },
{ label: '非up主', value: 2 }
],
sortTypes: [{ label: '正序', value: 0 }, { label: '倒序', value: 1 }],
// 请求列表参数
searchData: {
pageNum: 1,
pageSize: 20,
hash_id: undefined,
vlogger_user_id: undefined,
videoType: 0,
mVia: 0,
start: undefined,
end: undefined,
terminalCdo: undefined,
tag_text: undefined,
syncType: undefined,
sortType: undefined,
maxTotal: 1000
},
time: undefined,
resData: [], // el-table表格数据
total: 0, // 数据总条数
selectArray: undefined,
loading: true // 列表加载状态
}
},
watch: {
time(val) {
if (val && val.length >= 2) {
this.searchData.start = val[0]
this.searchData.end = val[1]
} else {
this.searchData.start = null
this.searchData.end = null
}
}
},
filters: {
handleType(val) {
switch (val) {
case 0:
return '长视频'
case 1:
return '短视频'
case 2:
return '图文'
}
}
},
mounted() {
this.getMediaSearch()
},
methods: {
// 视频查看
checkMedia(url, data) {
this.$refs.showvideo.open(url, data, data.id)
},
// TODO:加入后台视频库
addVideo(index, row) {
mediaAddV2({ id: row.id, videoType: row.videoType }).then(res => {
if (res.code === 200) {
this.$message.success('加入成功!')
this.getMediaSearch()
} else {
this.$message.error('加入失败!')
}
})
},
// TODO:请求影片列表数据
getMediaSearch() {
this.loading = true
mediaSearchV2(this.searchData).then(res => {
if (res.code === 200) {
this.resData = res.data.list
this.total = res.data.count
} else {
this.$message.error('请求列表失败!')
this.resData = []
this.total = 0
}
this.loading = false
})
},
onSeach() {
this.searchData.pageNum = 1
this.searchData.pageSize = 20
this.getMediaSearch()
},
// 切换每页数据量
handleSizeChange(val) {
this.searchData.pageSize = val
this.getMediaSearch()
},
// 切换页数
handleCurrentChange(val) {
this.searchData.pageNum = val
this.getMediaSearch()
},
// 清空某一项筛选列表
onClear(key) {
this.searchData[key] = undefined
this.getMediaSearch()
}
}
}
</script>
<style scoped lang="scss">
.imgBox {
>>> img {
width: auto !important;
}
}
</style>
src/views/mediaWebManagement/sourceList/components/AddOrEdit.vue
+373
View File
@@ -0,0 +1,373 @@
<template>
<el-dialog :title="title" :visible.sync="Visible" width="900px" center class="ac-dialog" :close-on-click-modal="false"
@close="close">
<el-form :inline="true" :model="form" class="demo-form-inline" label-width="120px" label-position="right">
<el-row :gutter="24">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
<el-form-item label="标题">
<el-input v-model="form.title" style="width: 615px" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
<el-form-item label="封面">
<UploadImg @changeImgUrl="changeCoverImgUrl" :img="form.coverImg"></UploadImg>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="12">
<el-form-item label="发布者">
<el-input v-model="form.publish" placeholder="请输入发布者" />
</el-form-item>
</el-col>
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="12">
<el-form-item label="上架时间">
<el-date-picker v-model="form.addedTime" type="date" placeholder="选择日期" value-format="yyyy-MM-ddTHH:mm:ssZ">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="12">
<el-form-item label="备注">
<el-input v-model="form.remark" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
<el-form-item label="关键词">
<el-tag :key="tag" v-for="tag in form.keyworld" closable :disable-transitions="false"
@close="handleClose(tag)">
{{ tag }}
</el-tag>
<el-input class="input-new-tag" placeholder="添加多个关键词用#/。/,分隔" v-if="inputVisible" v-model="inputValue"
ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">添加关键词</el-button>
</el-form-item>
</el-col>
</el-row>
<div class="post-text-view" style="background: #efe4d2; padding: 5px 0; margin: 5px 0">
<div v-for="(item, index) in form.nodes" :key="index">
<el-row :gutter="10">
<el-col el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
<el-form-item :label="'第' + (index + 1) + '个节点'" style="width: 100%"> </el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="节点标题" class="margin-top text-post">
<el-input placeholder="请输入节点标题" v-model="item.title" style="width: 500px"> </el-input>
</el-form-item>
<el-form-item label="帖子图片" class="margin-top video-box">
<div>
<UploadImgArr @changeImgUrl="changeImagesUrl($event, index)"
:isView="true" style="border-color: #2b333f" :img="item.images"></UploadImgArr>
</div>
</el-form-item>
<el-form-item label="帖子文本" class="margin-top text-post">
<el-input placeholder="请输入帖子文本" v-model="item.text" type="textarea" style="width: 500px"
:autosize="{ minRows: 2, maxRows: 14 }"> </el-input>
</el-form-item>
<el-button v-if="!showUrlInput && !item.url" class="button-new-tag" size="small"
@click="showUrlInput = true">添加跳转链接</el-button>
<el-form-item label="链接地址" class="text-post" v-else>
<el-input placeholder="请输入链接地址" v-model="item.url" type="textarea" style="width: 500px"> </el-input>
</el-form-item>
</el-col>
<el-col class="btn-list">
<el-button v-if="form.nodes.length === index + 1" type="success" size="mini"
icon="el-icon-circle-plus-outline" @click="addSectionItem"> 新增节点 </el-button>
<el-button type="danger" size="mini" style="margin: 5px 0" icon="el-icon-delete-solid"
@click="delSectionItem(index)"> 删除节点 </el-button>
</el-col>
</el-row>
</div>
<el-button class="new-btn" v-if="form.nodes.length === 0" type="success" icon="el-icon-circle-plus-outline"
@click="addSectionItem"> 新增节点 </el-button>
</div>
</el-form>
<div>
<div style="float:left">
<h3>正片</h3>
<div v-if="form.sourceNameFs" style="width: 380px; height: 240px; overflow: hidden">
<DPlayer ref="player" v-if="form.sourceNameFs.indexOf('mp4') === -1" :video="{
url: '/api/web/m3u8/' + filterM3u8(form.sourceNameFs),
type: 'hls',
pic: '',
}" hotkey></DPlayer>
<DPlayer ref="player" v-else :video="{
url: $store.getters.getSystemConfig.mp4Addr + form.sourceNameFs,
type: 'mp4',
pic: '',
}" hotkey></DPlayer>
</div>
<UploadVideo v-if="!form.sourceNameFs && !isEdit" @changeVideoUrl="changeVideoUrl" @repeatVideo="repeatVideo"
style="max-width: 520px"></UploadVideo>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click.native.prevent="Visible = false"> 取 消 </el-button>
<el-button type="primary" @click.native.prevent="submit('ruleForm')">
确 定
</el-button>
</div>
</el-dialog>
</template>
<script>
import DPlayer from '@/components/VueDplayerHls/index'
import UploadVideo from '@/components/UploadVideoLibrary/index'
import UploadImgArr from '@/components/UploadImgArr/index'
import UploadImg from '@/components/UploadImg/index'
import 'videojs-contrib-hls'
import { sourceUpdate, sourceAdd } from '@/api/mediaWebManagement/source.js'
import { current, stringToArry, } from '@/filters/index'
export default {
name: 'AddOrEdit',
props: ['data', 'appList'],
components: {
UploadImg,
UploadVideo,
DPlayer,
UploadImgArr
},
computed: {
totalTime() {
return this.data.data.videoTime
},
},
data() {
return {
Visible: true,
title: '',
defaltTime: current() + 'T12:00:00.000Z',
inputVisible: false,
showUrlInput: false,
tagSecondInputVvalue: '',
inputValue: '',
taskId: '',
tags: null,
isEdit:false,
fieldNameFs: '', // 正片地址全称
form: {
formatType: undefined, // 视频类型 1:长视频 2:短视频 3:预览
title: undefined, // 'string',标题
addedTime: undefined, // 'string',上架时间
publish: undefined, // 'string',视频发布者
firstTag: undefined, // 'string',一级标签
secondTags: undefined, // [],二级标签标签
keyworld: [],
uploadAppId: undefined,
appId:undefined,
desc: undefined, // 'string',详细描述
nodes: [
{
images: undefined,
informationId: undefined,
text: undefined,
url: undefined,
}
],
coverImg: undefined, // 封面
},
}
},
created() {
this.title = this.data.title
if (this.data.data.nodes === null) {
this.data.data.nodes = []
}
if (this.data.data.keyworld === null) {
this.data.data.keyworld = []
}
if (this.title === '编辑') {
this.form = JSON.parse(JSON.stringify(this.data.data))
this.isEdit = true
}
if (this.player) {
this.player.dispose()
}
},
methods: {
showInput() {
this.inputVisible = true;
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
// 删除关键字
handleClose(tag) {
this.form.keyworld.splice(this.form.keyworld.indexOf(tag), 1);
},
handleInputConfirm() {
let inputValue = this.inputValue;
const regex = /[\n\s,#。、]+/;
if (regex.test(this.inputValue)) {
inputValue = stringToArry(inputValue)
this.form.keyworld = this.form.keyworld.concat(...inputValue);
} else {
if (inputValue) {
this.form.keyworld.push(inputValue);
}
}
this.inputVisible = false;
this.inputValue = '';
},
// 删除已有nodes
delSectionItem(index) {
this.form.nodes.splice(index, 1)
},
// 新增已有nodes
addSectionItem() {
this.form.nodes.push({
images: [],
text: undefined,
url: undefined
})
},
// 封面
changeImagesUrl(data, index) {
this.form.nodes[index].images = data
},
//TODO:编辑影片列表数据
update(data) {
// if(){}
sourceUpdate(data).then((res) => {
if (res.code === 200) {
this.$message.success('更新成功')
this.close()
} else {
this.$message.error('更新失败')
}
})
},
add(data) {
data.uploadUserName = this.$store.getters.getCreator
sourceAdd(data).then((res) => {
if (res.code === 200) {
this.$message.success('新增成功')
this.close()
} else {
this.$message.error('新增失败')
}
})
},
filterM3u8(v) {
return /\.m3u8/g.test(v) ? v : v + '.m3u8'
},
// 清空某一项筛选列表
onClear(key) {
this.form.param[key] = []
},
// 提交按钮
submit() {
const data = { ...this.form }
data.addedTime = data.addedTime
? data.addedTime === '0001-01-01T00:00:00Z'
? this.defaltTime
: data.addedTime
: this.defaltTime
data.appId = 2
data.uploadAppId = this.$store.getters.uploadAppId
if (this.form.id) {
this.update(data)
} else {
this.add(data)
}
},
// 上传视频返回地址
changeVideoUrl(data) {
this.form.id = data.id
this.fieldNameFs = data.videoUri
},
// 重复上传视频
repeatVideo(data) {
this.taskId = data.taskId
this.getData()
},
// 上传图片返回地址
changeCoverImgUrl(data) {
this.form.coverImg = data
},
// 关闭编辑
close() {
if (this.player) {
this.player.dispose()
}
this.$emit('close')
},
},
}
</script>
<style lang="scss">
.el-dialog {
display: flex;
flex-direction: column;
margin: 0 !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*height:600px;*/
max-height: calc(100% - 30px);
max-width: calc(100% - 30px);
}
.el-dialog .el-dialog__body {
flex: 1;
overflow: auto;
}
.el-tag+.el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 200px;
margin-left: 10px;
vertical-align: bottom;
}
.post-text-view {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.btn-list {
display: flex;
align-items: center;
justify-content: space-around;
}
</style>
src/views/mediaWebManagement/sourceList/index.vue
+408
View File
@@ -0,0 +1,408 @@
<template>
<div class="pf-warpper avlist">
<el-row class="table-form">
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
<el-form-item>
<el-input placeholder="请输入ID" clearable v-model="searchData.id" @clear="onClear('id')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入标题" clearable v-model="searchData.title" @clear="onClear('title')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入任务ID" clearable v-model="searchData.taskId" @clear="onClear('taskId')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入关键字" clearable v-model="searchData.keyworld" @clear="onClear('keyworld')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入发布者" clearable v-model="searchData.publish" @clear="onClear('publish')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入上传人姓名" clearable v-model="searchData.uploadUserName" @clear="onClear('uploadUserName')" />
</el-form-item>
<el-form-item>
<el-select placeholder="请选择当前状态" clearable v-model="searchData.status" @clear="onClear('status')">
<el-option v-for="item in StatusList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="请选择App" clearable v-model="searchData.appId" @clear="onClear('appId')">
<el-option v-for="item in appList" :key="item.id" :label="item.name" :value="item.appId" />
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="onSeach" icon="el-icon-search" plain type="primary">搜索</el-button>
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
<el-button @click="batchAddTask" icon="el-icon-document-add" plain type="warning">批量添加切片水印任务</el-button>
<el-button @click="toggleHideAddTask" :type="searchData.isAddTask === false ? 'success' : 'info'" plain icon="el-icon-filter">
{{ searchData.isAddTask === false ? '✓ 已过滤已添加水印任务' : '过滤已添加水印任务' }}
</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-col>
<el-table
:data="resData"
element-loading-text="拼命加载中"
border
height="735"
highlight-current-row
style="width: 100%; font-size: 10px"
v-loading="loading"
:row-style="{ height: '30px' }"
:cell-style="{ padding: '5px' }"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="50"> </el-table-column>
<el-table-column align="center" label="视频ID" width="190px">
<template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column>
<el-table-column align="center" label="标题" width="190px" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.title }}</template>
</el-table-column>
<el-table-column align="center" label="视频封面" width="80px">
<template slot-scope="scope">
<ShowImg style="width: 30px; height: 30px; margin: 0 auto" :urls="scope.row.coverImg"></ShowImg>
</template>
</el-table-column>
<el-table-column align="center" label="任务ID" width="190px">
<template slot-scope="scope">{{ scope.row.taskId }}</template>
</el-table-column>
<el-table-column align="center" label="发布者">
<template slot-scope="scope">{{ scope.row.publish }}</template>
</el-table-column>
<el-table-column align="center" label="当前状态" width="110px">
<template slot-scope="scope">
<el-button :type="scope.row.status === 'Completed' ? 'success' : 'danger'" plain size="mini">{{
scope.row.status | changeStatus }}</el-button>
</template>
</el-table-column>
<el-table-column align="center" label="app" width="200" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.appId | changeAppName(appList) }}</template>
</el-table-column>
<el-table-column align="center" label="关键词" width="500px" show-overflow-tooltip>
<template slot-scope="scope">
<el-tag :key="index" v-for="(item, index) in scope.row.keyworld" type="primary">{{ item }}</el-tag>
</template>
</el-table-column>
<el-table-column align="center" label="帖子内容预览" width="100px">
<template slot-scope="scope">
<el-button slot="reference" size="small" @click="showDetailFn(scope.row)">详情</el-button>
</template>
</el-table-column>
<el-table-column align="center" label="备注" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.remark }}</template>
</el-table-column>
<el-table-column align="center" label="上传人名称">
<template slot-scope="scope">{{ scope.row.uploadUserName }}</template>
</el-table-column>
<el-table-column align="center" label="最后操作人">
<template slot-scope="scope">{{ scope.row.optionAccount }}</template>
</el-table-column>
<el-table-column align="center" label="创建时间" width="150px">
<template slot-scope="scope">{{ scope.row.createdAt | BeiJingTime }}</template>
</el-table-column>
<el-table-column align="center" label="更新时间" width="150px">
<template slot-scope="scope">{{ scope.row.updatedAt | BeiJingTime }}</template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="300">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
<el-button v-if="!scope.row.isAddTask" @click="addTask(scope.$index, scope.row)" size="mini" type="primary">添加切片水印任务</el-button>
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger" v-if="roleId!==810051 && roleId!==14131">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<div class="table-pagination">
<el-pagination
:current-page="searchData.pageNum"
:page-size="searchData.pageSize"
:page-sizes="[10, 20, 30, 50, 100]"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
layout="total, sizes, prev, pager, next, jumper" />
</div>
<!-- 新增及编辑 -->
<Edit :data="editData" v-if="editVisible" :appList="appList" @close="closeEdit" />
<ShowVideo ref="showvideo"></ShowVideo>
<PostDetailView
v-if="showDetail"
:itemData="postDetailData"
@close="closeEdit"
:videoCategoryList="videoCategoryList"
:videoTagList="videoTagList" />
</div>
</template>
<script>
// 引入模块
import ShowImg from '@/components/ShowImg/index.vue'
import Edit from './components/AddOrEdit'
import { sourceList, sourceDel } from '@/api/mediaWebManagement/source.js'
import ShowVideo from '@/components/ShowVideo/index.vue'
import { StatusList } from '@/filters/mediaLibrary/videoList'
import { appInfoList } from '@/api/appManagement/appList.js'
import { taskAdd } from '@/api/mediaWebManagement/taskList.js'
import PostDetailView from '@/components/PostDetailView/index.vue'
export default {
name: 'MediaCat',
components: {
Edit,
ShowImg,
ShowVideo,
PostDetailView
},
data() {
return {
StatusList: StatusList(),
appList: [],
// 请求列表参数
searchData: {
pageNum: 1,
pageSize: 20,
appId: 2,
webAppId: 2,
id: undefined,
isAddTask: undefined
},
resData: [], // el-table表格数据
total: 0, // 数据总条数
selectArray: undefined,
loading: true, // 列表加载状态
// 编辑数据
editVisible: false, // 新增或编辑弹出框
showDetail: false,
// 视频分类列表
videoCategoryList: [],
// 视频标签
videoTagList: [],
postDetailData: {
video: { url: '' }
},
editData: {
title: '新增',
data: {}
}
}
},
filters: {
changeCoverType(val) {
switch (val) {
case 1:
return '横版'
case 2:
return '竖版'
case 3:
return '系统'
}
},
changeAppName(v, list) {
if (v) {
const a = list.filter(item => item.appId === v)
return a[0].name
}
},
changeFormat(val) {
switch (val) {
case 1:
return '长视频'
case 2:
return '短视频'
case 3:
return '预览'
}
},
changeContentType(val) {
switch (val) {
case 1:
return 'AV（日本）'
case 2:
return '短视频（国产）'
case 3:
return '动漫'
}
}
},
computed: {
roleId() {
return this.$store.getters.roleId
}
},
async mounted() {
await this.getAppList()
await this.getMediaSearch()
},
methods: {
showDetailFn(row) {
this.postDetailData.video.url = row.fieldNameFs
Object.assign(this.postDetailData, row)
this.showDetail = true
},
addTask(index, row) {
this.$confirm('是否加入切片列表?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
taskAdd({
appId: 2,
mediaSourceId: row.id,
watermarkImage: this.$store.getters.getSystemConfig.watermarkImage,
watermarkMedia: this.$store.getters.getSystemConfig.watermarkMedia,
watermarkMediaTop: this.$store.getters.getSystemConfig.watermarkMediaTop
}).then((res) => {
if (res.code === 200) {
this.$message.success('添加成功')
} else {
this.$message.error('添加失败')
}
})
})
},
batchAddTask() {
if (!this.selectArray || !this.selectArray.length) {
return this.$message.error('请先选择需要添加切片水印任务的资源！')
}
const rows = this.selectArray.filter(item => !item.isAddTask)
if (!rows.length) {
return this.$message.warning('所选资源均已添加切片水印任务，无需重复添加')
}
this.$confirm(`确定为所选 ${rows.length} 条资源批量添加切片水印任务?`, '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const watermarkImage = this.$store.getters.getSystemConfig.watermarkImage
const watermarkMedia = this.$store.getters.getSystemConfig.watermarkMedia
const watermarkMediaTop = this.$store.getters.getSystemConfig.watermarkMediaTop
const appId = 2
const requests = rows.map(row => taskAdd({
appId,
mediaSourceId: row.id,
watermarkImage,
watermarkMedia,
watermarkMediaTop
}).then(res => res && res.code === 200).catch(() => false))
Promise.all(requests).then(results => {
const successCount = results.filter(Boolean).length
const failCount = results.length - successCount
if (failCount === 0) {
this.$message.success(`批量添加成功，共 ${successCount} 条`)
} else if (successCount === 0) {
this.$message.error(`批量添加失败，共 ${failCount} 条`)
} else {
this.$message.warning(`成功 ${successCount} 条，失败 ${failCount} 条`)
}
this.getMediaSearch()
})
})
},
// 请求app列表
getAppList() {
appInfoList({
pageSize: 100,
pageNum: 1
}).then((res) => {
if (res.code === 200) {
this.appList = res.data.list
} else {
this.appList = []
}
this.loading = false
})
},
// TODO:请求影片列表数据
getMediaSearch() {
this.loading = true
sourceList(this.searchData).then(res => {
if (res.code === 200) {
this.resData = res.data.list
this.total = res.data.total
} else {
this.$message.error('请求列表失败!')
this.resData = []
this.total = 0
}
this.loading = false
})
},
// 切换：过滤掉已添加水印任务的资源
toggleHideAddTask() {
this.searchData.isAddTask = this.searchData.isAddTask === false ? undefined : false
this.searchData.pageNum = 1
this.getMediaSearch()
},
// TODO:删除影片列表数据
handleDelete(index, row) {
this.$confirm('确定删除?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
sourceDel({ id: row.id }).then(res => {
if (res.code === 200) {
this.getMediaSearch()
this.$message.success('成功删除!')
} else {
this.$message.error(res.tip)
}
})
})
},
onSeach() {
this.searchData.pageNum = 1
this.searchData.pageSize = 20
this.getMediaSearch()
},
// 切换每页数据量
handleSizeChange(val) {
this.searchData.pageSize = val
this.getMediaSearch()
},
// 切换页数
handleCurrentChange(val) {
this.searchData.pageNum = val
this.getMediaSearch()
},
handleSelectionChange(val) {
this.selectArray = val
},
// 新增按钮
add() {
this.editVisible = true // 新增或编辑弹出框
this.editData = {
title: '新增',
data: {}
}
},
// 编辑按钮
handleEdit(index, row) {
this.editVisible = true // 新增或编辑弹出框
this.editData = {
title: '编辑',
data: row
}
},
// 关闭编辑弹窗
closeEdit() {
this.editVisible = false
this.showDetail = false
this.getMediaSearch()
},
// 清空某一项筛选列表
onClear(key) {
this.searchData[key] = undefined
this.getMediaSearch()
}
}
}
</script>
src/views/mediaWebManagement/taskList/components/AddFIle.vue
+79
View File
@@ -0,0 +1,79 @@
<template>
<el-dialog :close-on-click-modal="false" :title="title" :visible.sync="Visible" @close="close" center
class="ac-dialog" width="900px">
<el-form :inline="true" :model="form" class="demo-form-inline" label-position="right" label-width="100px"
ref="form">
<el-row>
<el-col :span="24">
<el-form-item label="切片任务ID" prop="fileId">
<el-input style="width: 500px;" v-model="form.fileId" placeholder="请输入切片任务ID" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="dialog-footer" slot="footer">
<el-button @click="Visible = false">取 消</el-button>
<el-button @click="submit('form')" type="primary">确 定</el-button>
</div>
</el-dialog>
</template>
<script>
import { videoinfoAdd } from '@/api/videoManagement/videoList.js';
export default {
name: 'AddOrEdit',
props: ['data'],
data() {
return {
Visible: true,
title: '',
// 表单数据
form: {
fileId:undefined,
},
rules: {}
}
},
mounted() {
this.title = this.data.title
},
methods: {
// TODO：新增视频分类数据
add(data) {
videoinfoAdd(data).then(res => {
if (res.code === 200) {
this.$message.success('新增成功')
this.Visible = false
} else {
this.$message.error('新增失败')
}
})
},
// 提交按钮
submit(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
if (this.title === '新增') {
this.data.data.forEach(item=>{
this.add({
fileId:[item.id]
})
})
}
} else {
return false
}
})
},
// 关闭编辑
close() {
this.$emit('close', false)
},
},
}
</script>
src/views/mediaWebManagement/taskList/components/UpdateTask.vue
+171
View File
@@ -0,0 +1,171 @@
<template>
<el-dialog :title="title" :visible.sync="Visible" width="400px" center class="ac-dialog" :close-on-click-modal="false"
@close="close">
<el-form :inline="true" class="demo-form-inline" label-position="center">
<el-row :gutter="24">
<el-checkbox label="更新图片水印" v-model="selectedValue1"></el-checkbox>
<el-checkbox label="更新视频水印" v-model="selectedValue2"></el-checkbox>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native.prevent="Visible = false"> 取 消 </el-button>
<el-button type="primary" @click.native.prevent="submit('ruleForm')">
确 定
</el-button>
</div>
</el-dialog>
</template>
<script>
import { updateWaterMark } from '@/api/mediaWebManagement/taskList.js'
export default {
name: 'AddOrEdit',
props: ['data','selectBatch'],
components: {
},
computed: {
newChangeValue(){
let arr = []
if(this.selectedValues.value===2){
arr = this.options
}else{
this.selectedValues.filter(item=>{
if(item===this.options[0].text){
arr.push(this.options[0])
}else{
arr.push(this.options[1])
}
})
}
return arr
}
},
data() {
return {
type: undefined,
Visible: true,
title: '重新生成',
options: [
{ id:0,text: '更新图片水印', value: this.$store.getters.getSystemConfig.watermarkImage },
{ id:1,text: '更新视频水印(底部)', value: this.$store.getters.getSystemConfig.watermarkMedia },
{ id:1,text: '更新视频水印(顶部)', value: this.$store.getters.getSystemConfig.watermarkMediaTop },
],
selectedValue1:false,
selectedValue2:false,
}
},
mounted(){
this.title = this.data.title?this.data.title:'重新生成'
},
methods: {
//TODO:编辑影片列表数据
addTask(data) {
console.log(data,'11');
updateWaterMark({
id:data.id,
watermarkImage: this.selectedValue1?this.options[0].value:undefined,
watermarkMedia: this.selectedValue2?this.options[1].value:undefined,
watermarkMediaTop: this.selectedValue2?this.options[2].value:undefined,
}).then((res) => {
if (res.code === 200) {
this.$message.success('添加成功')
} else {
this.$message.error(res.tip)
}
})
this.close()
},
// 提交按钮
submit() {
if(this.data.title==='批量重新生成'){
this.data.data.forEach((item)=>{
this.addTask(item)
})
}else{
this.addTask(this.data.data)
}
},
// 关闭编辑
close() {
this.$emit('close')
},
},
}
</script>
<style lang="scss">
.el-dialog {
display: flex;
flex-direction: column;
margin: 0 !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*height:600px;*/
max-height: calc(100% - 30px);
max-width: calc(100% - 30px);
}
.el-dialog .el-dialog__body {
flex: 1;
overflow: auto;
}
.videoBox {
display: flex;
justify-content: center;
overflow: hidden;
}
.el-textarea.is-disabled.ti .el-textarea__inner {
color: red;
}
.media-box {
width: 100%;
height: 400px;
text-align: center;
overflow: hidden;
img {
height: 100%;
max-width: 100%;
}
#my-video {
width: 100% !important;
height: 100% !important;
border: none !important;
}
}
.post-text-view{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.btn-list{
display: flex;
align-items: center;
justify-content: space-around;
}
</style>
src/views/mediaWebManagement/taskList/index.vue
+499
View File
@@ -0,0 +1,499 @@
<template>
<div>
<el-row>
<el-form :inline="true" :model="searchData" class="form-inline" label-width="80px" size="mini">
<el-form-item>
<el-input placeholder="请输入切片列表ID" clearable v-model="searchData.id" @clear="onClear('id')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入资源列表ID" clearable v-model="searchData.mediaSourceId" @clear="onClear('mediaSourceId')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入标题" clearable v-model="searchData.title" @clear="onClear('title')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入关键词" clearable v-model="searchData.keyword" @clear="clear('keyword')" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入视频发布者" clearable v-model="searchData.publish" @clear="onClear('publish')" />
</el-form-item>
<el-form-item>
<el-input
placeholder="请输入TaskID"
clearable
v-model="searchData.taskId"
@clear="onClear('taskId')" />
</el-form-item>
<el-form-item>
<el-select placeholder="请选择当前状态" clearable v-model="searchData.status" @clear="onClear('status')">
<el-option
v-for="item in TaskStatusList"
:key="item.value"
:label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="请选择App" clearable v-model="searchData.appId" @clear="onClear('appId')">
<el-option v-for="item in appList" :key="item.id" :label="item.name" :value="item.appId" />
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
<el-button @click="add" icon="el-icon-search" plain type="success">批量同步</el-button>
<el-button @click="addAddFile" icon="el-icon-search" plain type="success">批量重新生成</el-button>
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info">刷新</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-col>
<el-table
:data="waterList"
element-loading-text="拼命加载中"
@selection-change="handleSelectionChange"
border
height="700"
highlight-current-row
style="width: 100%"
v-loading="loading"
:row-style="{ height: '70px' }">
<el-table-column type="selection" width="50" fixed="left"> </el-table-column>
<el-table-column align="center" label="Id" width="200">
<template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column>
<el-table-column align="center" label="资源列表ID" width="200">
<template slot-scope="scope">{{ scope.row.mediaSourceId }}</template>
</el-table-column>
<el-table-column align="center" label="标题" show-overflow-tooltip width="300">
<template slot-scope="scope">{{ scope.row.title }}</template>
</el-table-column>
<el-table-column align="center" label="封面" width="80px">
<template slot-scope="scope">
<ShowImg style="width: 30px; height: 30px; margin: 0 auto" :urls="scope.row.coverImg">
</ShowImg>
</template>
</el-table-column>
<el-table-column align="center" label="app名称">
<template slot-scope="scope">{{ scope.row.appId | changeAppName(appList) }}</template>
</el-table-column>
<el-table-column align="center" label="帖子内容预览" width="100px">
<template slot-scope="scope">
<el-button slot="reference" size="small" @click="showDetailFn(scope.row)">详情</el-button>
</template>
</el-table-column>
<el-table-column align="center" label="视频后缀">
<template slot-scope="scope">{{ scope.row.ext }}</template>
</el-table-column>
<el-table-column align="center" label="原视频">
<template slot-scope="scope">
<i
v-if="scope.row.sourceNameFs"
class="el-icon-video-play views"
title="点击预览"
@click="checkMedia(scope.row.sourceNameFs, scope.row)"></i>
<div v-else>暂无</div>
</template>
</el-table-column>
<el-table-column align="center" label="水印视频">
<template slot-scope="scope">
<i
v-if="scope.row.fieldNameFs"
class="el-icon-video-play views"
title="点击预览"
@click="checkMedia(scope.row.fieldNameFs, scope.row)"></i>
<div v-else>暂无</div>
</template>
</el-table-column>
<el-table-column align="center" label="图片水印" width="80px">
<template slot-scope="scope">
<ShowImg style="width: 30px; height: 30px; margin: 0 auto" :urls="scope.row.watermarkImage">
</ShowImg>
</template>
</el-table-column>
<el-table-column align="center" label="视频水印" width="80px">
<template slot-scope="scope">
<ShowImg style="width: 30px; height: 30px; margin: 0 auto" :urls="scope.row.watermarkMedia">
</ShowImg>
</template>
</el-table-column>
<el-table-column align="center" label="合并重试次数">
<template slot-scope="scope">{{ scope.row.mergeRetry }}</template>
</el-table-column>
<el-table-column align="center" label="重试次数">
<template slot-scope="scope">{{ scope.row.retry }}</template>
</el-table-column>
<el-table-column align="center" label="切片重试次数">
<template slot-scope="scope">{{ scope.row.segmentRetry }}</template>
</el-table-column>
<el-table-column align="center" label="显示位置">
<template slot-scope="scope">{{ scope.row.showLocation }}</template>
</el-table-column>
<el-table-column align="center" label="当前状态" width="110px">
<template slot-scope="scope">
<el-button
:type="scope.row.status === 'Completed' ? 'success' : 'danger'"
plain
size="mini">{{
scope.row.status | changeTaskStatus }}</el-button>
</template>
</el-table-column>
<el-table-column align="center" label="备注">
<template slot-scope="scope">{{ scope.row.remark }}</template>
</el-table-column>
<el-table-column align="center" label="失败原因">
<template slot-scope="scope">{{ scope.row.failReason }}</template>
</el-table-column>
<el-table-column align="center" label="切片相关信息">
<template slot-scope="scope">{{ scope.row.filename }}</template>
</el-table-column>
<el-table-column align="center" label="视频贞数">
<template slot-scope="scope">{{ scope.row.frameRate }}</template>
</el-table-column>
<el-table-column align="center" label="从该ts中获取视频分辨率等信息">
<template slot-scope="scope">{{ scope.row.infoTsName }}</template>
</el-table-column>
<el-table-column align="center" label="是否删除了对于磁盘文件" width="100px">
<template slot-scope="scope">{{ scope.row.deleteDisk ? '已删除' : '未删除' }}</template>
</el-table-column>
<el-table-column align="center" label="是否需要加水印" width="100px">
<template slot-scope="scope">{{ scope.row.isAddWatermark ? '需要' : '不需要' }}</template>
</el-table-column>
<el-table-column align="center" label="更新时间" width="100">
<template slot-scope="scope">{{ scope.row.updatedAt | BeiJingTime }}</template>
</el-table-column>
<el-table-column align="center" label="创建时间" width="100">
<template slot-scope="scope">{{ scope.row.createdAt | BeiJingTime }}</template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="300px">
<template slot-scope="scope">
<el-button
@click="upDateImg(scope.$index, scope.row)"
size="mini"
type="warning">重新生成</el-button>
<el-button
v-if="scope.row.preMp4FileNameFs"
@click="upLoadVideo(scope.row)"
size="mini"
type="success">下载预览视频</el-button>
<el-button
@click="handleDelete(scope.$index, scope.row)"
size="mini"
type="primary">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<div class="table-pagination">
<el-pagination
:current-page="searchData.pageNum"
:page-size="searchData.pageSize"
:page-sizes="[10, 20, 30, 50, 100]"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
layout="total, sizes, prev, pager, next, jumper" />
</div>
<ShowVideo ref="showvideo"></ShowVideo>
<UpdateTask :data="editData" v-if="updateImgVisible" @close="closeEdit" />
<PostDetailView
v-if="showDetail"
:itemData="postDetailData"
@close="closeEdit"
:videoCategoryList="videoCategoryList"
:videoTagList="videoTagList" />
</div>
</template>
<script>
import ShowImg from '@/components/ShowImg/index.vue'
import { appInfoList } from '@/api/appManagement/appList.js'
import ShowVideo from '@/components/ShowVideo/index.vue'
import UpdateTask from './components/UpdateTask.vue'
import { videoinfoAdd } from '@/api/videoManagement/videoList.js'
import { TaskStatusList } from '@/filters/mediaLibrary/videoList'
import PostDetailView from '@/components/PostDetailView/index.vue'
import {
taskList,
taskDel
} from '@/api/mediaWebManagement/taskList.js'
export default {
name: 'UserList',
components: {
ShowImg,
ShowVideo,
UpdateTask,
PostDetailView
},
data() {
return {
// 列表加载状态
loading: false,
updateImgVisible: false,
TaskStatusList: TaskStatusList(),
// 请求或搜索数据参数
searchData: {
pageNum: 1,
pageSize: 10,
appId: 2
},
selectBatch: [],
// 用户列表数据
waterList: [],
// 数据总条数
total: 0,
// 视频分类列表
videoCategoryList: [],
// 视频标签
videoTagList: [],
// 编辑数据
editData: {},
showDetail: false,
postDetailData: {
video: { url: '' }
},
appList: []
}
},
filters: {
changeAppName(v, list) {
if (v) {
const a = list.filter(item => item.appId === v)
if (a[0] && a[0].name) {
return a[0].name
}
}
}
},
async mounted() {
await this.getAppDataList()
await this.getDataList()
},
methods: {
upLoadVideo(row) {
const videoUrl = this.$store.getters.getSystemConfig.mp4Addr + row.preMp4FileNameFs
// 创建一个链接元素
const link = document.createElement('a')
link.href = videoUrl
link.download = row.id // 设置下载文件名
// 触发点击事件
document.body.appendChild(link)
link.click()
// 移除链接元素
document.body.removeChild(link)
},
showDetailFn(row) {
this.postDetailData.video.url = row.fieldNameFs
Object.assign(this.postDetailData, row)
this.showDetail = true
},
// 刷新
refreshView() {
this.getDataList()
},
add() {
if (!this.selectBatch.length) {
return this.$message.error('请选择需要同步的切片任务！')
} else {
this.$confirm('确定同步所选任务?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const ids = []
this.selectBatch.forEach(item => {
ids.push(item.id)
})
videoinfoAdd({ fileId: ids }).then(res => {
if (res.code === 200) {
this.$message.success('同步成功')
} else {
this.$message.error('同步失败')
}
})
})
}
},
addAddFile() {
if (!this.selectBatch.length) {
return this.$message.error('请选择需要重新生成的切片任务！')
} else {
this.$confirm('确定重新生成所选任务?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.updateImgVisible = true
this.editData = {
title: '批量重新生成',
data: this.selectBatch
}
})
}
},
handleSelectionChange(val) {
this.selectBatch = val
},
getAppDataList() {
appInfoList({
pageSize: 100,
pageNum: 1
}).then((res) => {
if (res.code === 200) {
this.appList = res.data.list
} else {
this.appList = []
}
this.loading = false
})
},
// 点击搜索input内的清空按钮触发
onClear() {
this.searchData.keyWords = undefined
this.getDataList()
},
// 视频查看
checkMedia(url, data) {
this.$refs.showvideo.open(url, data, data.id)
},
// TODO:删除影片列表数据
handleDelete(index, row) {
this.$confirm('确定删除?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
taskDel({ id: row.id }).then(res => {
if (res.code === 200) {
this.getDataList()
this.$message.success('成功删除!')
} else {
this.$message.error(res.tip)
}
})
})
},
// TODO：请求用户列表数据
getDataList() {
this.loading = true
taskList(this.searchData).then((res) => {
if (res.code === 200) {
this.waterList = res.data.list
this.total = res.data.total
} else {
this.waterList = []
this.total = 0
this.$message.error('请求失败')
}
this.loading = false
})
},
clear(key) {
this.searchData[key] = undefined
this.getDataList()
},
// 搜索按钮
onSearch() {
this.getDataList()
},
// 切换每页数据量
handleSizeChange(val) {
this.searchData.pageSize = val
this.getDataList()
},
// 切换页数
handleCurrentChange(val) {
this.searchData.pageNum = val
this.getDataList()
},
// 更新水印图片
upDateImg(index, row) {
this.updateImgVisible = true
this.editData = {
title: '编辑',
data: row
}
},
// 关闭编辑弹窗
closeEdit() {
this.updateImgVisible = false
this.showDetail = false
this.getDataList()
}
}
}
</script>
<style lang="scss">
.el-popper {
max-height: 500px;
min-height: 300px;
overflow: auto;
}
.popover-content {
max-height: 500px;
min-height: 300px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.node-text {
font-size: 14px;
color: #333;
margin-bottom: 15px;
}
.node-image {
width: 100%;
border-radius: 4px;
margin-bottom: 15px;
}
.node-video {
width: 320px;
border-radius: 4px;
background-color: #2b333f;
margin-bottom: 15px;
}
.node-link {
font-size: 14px;
}
}
.container {
width: 100%;
height: 100%;
}
/* 添加必要的样式 */
#checkbox-group {
max-height: 200px;
overflow-y: auto;
}
</style>
src/views/system/systemConfig/index.vue
+1 -1
View File
@@ -314,7 +314,7 @@ export default {
getData() { getData() {
getSyscfg({}).then(res => { getSyscfg({}).then(res => {
if (res.code === 200) { if (res.code === 200) {
this.form = JSON.parse(JSON.stringify(res.data)) this.form = Object.assign({}, this.form, JSON.parse(JSON.stringify(res.data)))
this.$store.dispatch('system/setConfig', res.data) this.$store.dispatch('system/setConfig', res.data)
this.form.rewardNumList = arryToString(this.form.rewardNumList) this.form.rewardNumList = arryToString(this.form.rewardNumList)
this.form.payGiftCoinCount = changeMoneyYuan(this.form.payGiftCoinCount) this.form.payGiftCoinCount = changeMoneyYuan(this.form.payGiftCoinCount)