fix:项目初始化
This commit is contained in:
ouyangxiu
@@ -0,0 +1,476 @@
|
||||
<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="视频归类">
|
||||
<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>
|
||||
</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.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.webImgReq + form.preFileName,
|
||||
type: 'mp4',
|
||||
pic: '',
|
||||
}" hotkey></DPlayer>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left">
|
||||
<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.webImgReq + 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>
|
||||
<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/UploadVideoLibrary/index'
|
||||
import 'videojs-contrib-hls'
|
||||
import { mediaUpdate, updatePreTime } from '@/api/mediaLibrary/videoList'
|
||||
import { stringToArry, arryToString, current } from '@/filters/index'
|
||||
import {
|
||||
coverTypeList,
|
||||
appidsList,
|
||||
formatTypeList,
|
||||
formVideoTypeList
|
||||
} from '@/filters/mediaLibrary/videoList'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data','contentTypeList'],
|
||||
components: {
|
||||
UploadImg,
|
||||
UploadVideo,
|
||||
DPlayer,
|
||||
},
|
||||
computed: {
|
||||
totalTime() {
|
||||
return this.data.data.videoTime
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
coverTypeList: coverTypeList(),
|
||||
appidsList: appidsList(),
|
||||
formatTypeList: formatTypeList(),
|
||||
formVideoTypeList: formVideoTypeList(),
|
||||
type: undefined,
|
||||
videoType: undefined,
|
||||
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: {
|
||||
checkUpload() {
|
||||
if (!this.type) {
|
||||
return this.$message({
|
||||
type: 'error',
|
||||
message: '请选择视频归类！!'
|
||||
})
|
||||
}
|
||||
},
|
||||
//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'
|
||||
},
|
||||
// 清空某一项筛选列表
|
||||
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 updatePreTime({
|
||||
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;
|
||||
}
|
||||
}
|
||||
.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>
|
||||
@@ -0,0 +1,62 @@
|
||||
<!--
|
||||
* @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>
|
||||
@@ -0,0 +1,473 @@
|
||||
<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>
|
||||
|
||||
@@ -0,0 +1,422 @@
|
||||
<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>
|
||||
|
||||
@@ -0,0 +1,412 @@
|
||||
<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>
|
||||
|
||||
@@ -0,0 +1,293 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user