Initial commit
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog :title="title" align="center" :visible.sync="dialogVisible" width="40%" :before-close="handleClose"
|
||||
:close-on-click-modal="false">
|
||||
<div :data="myData" class="my_data">
|
||||
<!-- <span>视频状态:{{ this.myData.status | videoStatus }}</span> -->
|
||||
<span>视频高度:{{ this.myData.height }}</span>
|
||||
<span>视频宽度:{{ this.myData.width }}</span>
|
||||
<span>视频时长:{{ this.myData.length + "s" }}</span>
|
||||
</div>
|
||||
<div class="media-box" id="media-box"></div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import videojs from "video.js";
|
||||
import "videojs-contrib-hls";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
// import API from "@/api";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
imgShow: true,
|
||||
mediaUrl: "",
|
||||
videoShow: false,
|
||||
title: "封面图查看",
|
||||
params: {},
|
||||
urll: "",
|
||||
myData: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
token() {
|
||||
return this.$store.state.token;
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
// 视频审查列表
|
||||
// videoFeviewList() {
|
||||
// let urll = this.urll;
|
||||
// API.videoFeviewList(this.params, urll).then(res => {
|
||||
// this.myData = res.data;
|
||||
// });
|
||||
// },
|
||||
handleClose() {
|
||||
if (this.player) {
|
||||
this.player.dispose();
|
||||
}
|
||||
this.dialogVisible = false;
|
||||
this.imgShow = false;
|
||||
this.videoShow = false;
|
||||
this.mediaUrl = "";
|
||||
},
|
||||
open(url, data) {
|
||||
this.myData = data;
|
||||
// console.log(this.myData)
|
||||
this.dialogVisible = true;
|
||||
|
||||
this.imgShow = false;
|
||||
this.videoShow = true;
|
||||
this.title = "视频查看";
|
||||
// console.log(url.slice(-1))
|
||||
if (url.slice(0, 1) == "/") {
|
||||
url = url.slice(1);
|
||||
}
|
||||
this.mediaUrl =
|
||||
baseConfig.baseServerUrl +
|
||||
baseConfig.playVideoUrl +
|
||||
url +
|
||||
"?token=" +
|
||||
this.token;
|
||||
// eslint-disable-next-line no-console
|
||||
this.urll = data.id;
|
||||
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%">
|
||||
</video>`;
|
||||
this.player = videojs(
|
||||
"my-video", {
|
||||
bigPlayButton: true,
|
||||
textTrackDisplay: false,
|
||||
posterImage: true,
|
||||
errorDisplay: true,
|
||||
controlBar: true,
|
||||
playbackRates: [0.5, 1, 2, 3, 4]
|
||||
},
|
||||
function () {
|
||||
this.play();
|
||||
}
|
||||
);
|
||||
this.player.src(this.mediaUrl);
|
||||
// this.videoFeviewList();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.my_data {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.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,155 @@
|
||||
<template>
|
||||
<div class="tags-box">
|
||||
<el-dialog
|
||||
:title="'图集详情'"
|
||||
:visible.sync="dialogVisible"
|
||||
width="680px"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div class="picturePopup">
|
||||
<el-upload
|
||||
ref="upload"
|
||||
:action="action"
|
||||
multiple
|
||||
list-type="picture-card"
|
||||
name="upload[]"
|
||||
:on-success="successCallback"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-remove="handleRemove"
|
||||
:headers="header"
|
||||
:file-list="fileList"
|
||||
accept="image/jpeg, image/png, image/jpg, image/gif, image/webp"
|
||||
:limit="150"
|
||||
>
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleClose()"
|
||||
:loading="flag"
|
||||
>确 认</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-dialog :visible.sync="dialogVisiblePreview">
|
||||
<img width="100%" :src="dialogImageUrl" alt="" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import local from "@/utils/localStroage";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: "",
|
||||
flag: false,
|
||||
dialogVisible: false,
|
||||
// 封面上传地址
|
||||
action: baseConfig.baseServerUrl + "/vid/uploadStaticBatch",
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
pics: undefined,
|
||||
dialogImageUrl: undefined, // 放大图地址
|
||||
dialogVisiblePreview: false, // 放大图
|
||||
header: {
|
||||
Authorization: local.get("userInfo").token,
|
||||
},
|
||||
fileList: [], // 用于编辑图片回显
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 封面图上传成功回调
|
||||
successCallback(res) {
|
||||
if (!this.pics) {
|
||||
this.pics = [];
|
||||
}
|
||||
this.pics = this.pics.concat(res.data.filePath);
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url;
|
||||
this.dialogVisiblePreview = true;
|
||||
},
|
||||
handleRemove(file) {
|
||||
this.pics = this.pics.filter((item) => {
|
||||
if (file.response) {
|
||||
if (item != file.response.data.coverImg) {
|
||||
return item;
|
||||
}
|
||||
} else {
|
||||
if (item != file.name) {
|
||||
return item;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 打开弹窗并初始化tags数据
|
||||
open(pictureArr) {
|
||||
this.pics = pictureArr;
|
||||
this.fileList = pictureArr.map((item) => {
|
||||
return {
|
||||
name: item,
|
||||
url: this.imgUrl + item,
|
||||
};
|
||||
});
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.fileList = [];
|
||||
this.pics = undefined;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.tags-box {
|
||||
.el-dialog {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.input-box {
|
||||
margin-top: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
.el-input {
|
||||
width: 200px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.picturePopup {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
//max-height: 580px;
|
||||
.pictureInside {
|
||||
margin: 5px;
|
||||
position: relative;
|
||||
.deleteButton {
|
||||
position: absolute;
|
||||
opacity: 0.5;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/ .el-upload-list--picture-card .el-upload-list__item {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
.el-upload-list__item-delete {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/deep/ .el-upload--picture-card {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
line-height: 170px;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,883 @@
|
||||
<template>
|
||||
<div class="edit-video-box">
|
||||
<el-dialog
|
||||
:title="'子媒体列表'"
|
||||
:visible.sync="dialogVisible"
|
||||
width="1200px"
|
||||
:before-close="handleClose"
|
||||
key="subVideo"
|
||||
>
|
||||
<!--数据表格-->
|
||||
<el-table
|
||||
:data="subTableData"
|
||||
style="width: 100%"
|
||||
border
|
||||
ref="multipleTable"
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
@sort-change="handleSortChange"
|
||||
height="580"
|
||||
>
|
||||
<el-table-column prop="id" label="ID" align="center" width="140">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.id || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="video_id"
|
||||
label="父ID"
|
||||
align="center"
|
||||
width="140"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.video_id || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="episode_number"
|
||||
label="第几集"
|
||||
align="center"
|
||||
width="80"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="title"
|
||||
label="章节名"
|
||||
align="center"
|
||||
width="180"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="media_type"
|
||||
label="媒体类型"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" v-if="scope.row.media_type == 1"
|
||||
>动漫</el-tag
|
||||
>
|
||||
<el-tag
|
||||
style="background-color: #ecf5ff;color: #409eff;border: 1px solid #d9ecff;"
|
||||
v-else-if="scope.row.media_type == 2"
|
||||
>漫画</el-tag
|
||||
>
|
||||
<el-tag type="warning" v-else-if="scope.row.media_type == 3"
|
||||
>文本小说</el-tag
|
||||
>
|
||||
<el-tag type="danger" v-else-if="scope.row.media_type == 4"
|
||||
>有声小说</el-tag
|
||||
>
|
||||
<el-tag type="info" v-else-if="scope.row.media_type == 5"
|
||||
>短剧</el-tag
|
||||
>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column
|
||||
prop="status"
|
||||
label="状态"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="warning" v-if="scope.row.status == 0">审核中</el-tag>
|
||||
<el-tag type="success" v-else-if="scope.row.status == 1"
|
||||
>通过</el-tag
|
||||
>
|
||||
<el-tag type="danger" v-else-if="scope.row.status == 2"
|
||||
>拒绝</el-tag
|
||||
>
|
||||
<el-tag type="info" v-else-if="scope.row.status == 3">下架</el-tag>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
prop="sale_coin"
|
||||
label="价格"
|
||||
align="center"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.sale_coin }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="封面图" align="center" width="120">
|
||||
<template slot-scope="scope">
|
||||
<img-load
|
||||
:width="'80px'"
|
||||
:height="'60px'"
|
||||
:src="checkUrl(scope.row.cover) + scope.row.cover"
|
||||
>
|
||||
</img-load>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="urls"
|
||||
label="图集预览"
|
||||
align="center"
|
||||
width="110"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div
|
||||
class="picturePreview"
|
||||
@click="previewPicture(scope.row.urls.split(','))"
|
||||
>
|
||||
<img-load2
|
||||
:width="'80px'"
|
||||
:height="'60px'"
|
||||
v-for="(item, i) in scope.row.urls.split(',')"
|
||||
:key="i"
|
||||
:src="checkUrl(scope.row.cover) + scope.row.cover"
|
||||
>
|
||||
</img-load2>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="play_time"
|
||||
label="总时长"
|
||||
align="center"
|
||||
width="130"
|
||||
>
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.play_time | changeSecond
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="预览" align="center" width="80">
|
||||
<template slot-scope="scope">
|
||||
<div v-if="scope.row.m3u8_url">
|
||||
<i
|
||||
class="el-icon-video-play views"
|
||||
title="点击预览"
|
||||
@click="checkMedia(scope.row, 'video')"
|
||||
></i>
|
||||
</div>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="audio_url"
|
||||
label="资源地址"
|
||||
align="center"
|
||||
width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div v-if="scope.row.audio_url">
|
||||
<audio-player
|
||||
ref="audioPlayer"
|
||||
:show-prev-button="false"
|
||||
:show-next-button="false"
|
||||
:show-volume-button="false"
|
||||
:audio-list="[$audUrl + '/' + scope.row.audio_url]"
|
||||
/>
|
||||
</div>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="text" label="小说内容" align="center" width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="small"
|
||||
type="success"
|
||||
@click="checkMedia(scope.row, 'text')"
|
||||
>查看</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="media_size"
|
||||
label="帖子大小(M)"
|
||||
align="center"
|
||||
width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
scope.row.media_size
|
||||
? (scope.row.media_size / 1024 / 1024).toFixed(2)
|
||||
: "-"
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="width"
|
||||
label="宽"
|
||||
align="center"
|
||||
width="80"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="height"
|
||||
label="高"
|
||||
align="center"
|
||||
width="80"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="ratio"
|
||||
label="宽高比"
|
||||
align="center"
|
||||
width="80"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="reason"
|
||||
label="拒绝原因"
|
||||
align="center"
|
||||
width="260"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.reason || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="edit_by"
|
||||
label="编辑者"
|
||||
align="center"
|
||||
width="140"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.edit_by || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="review_by"
|
||||
label="编辑者"
|
||||
align="center"
|
||||
width="140"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.review_by || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="update_time"
|
||||
label="修改时间"
|
||||
align="center"
|
||||
min-width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ (scope.row.update_time * 1000) | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="create_time"
|
||||
label="创建时间"
|
||||
align="center"
|
||||
min-width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ (scope.row.create_time * 1000) | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="操作" align="center" width="150" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="success"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="edit(scope.row)"
|
||||
></el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
@click="removeVideo(scope.row.id)"
|
||||
></el-button>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
<!-- 分页组件 -->
|
||||
<div class="bottom">
|
||||
<div class="page">
|
||||
<el-pagination
|
||||
:page-sizes="[10, 25, 50, 100]"
|
||||
:current-page="params.page"
|
||||
:page-size="params.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
@size-change="changeSize"
|
||||
@current-change="changeCurrent"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 小说预览 -->
|
||||
<el-dialog
|
||||
:title="textPreviewTitle"
|
||||
:visible.sync="isTextPreview"
|
||||
width="800px"
|
||||
class="textPreviewDialog"
|
||||
:before-close="subClose"
|
||||
>
|
||||
<div class="textPreview">
|
||||
{{ textPreviewContent }}
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 漫画预览 -->
|
||||
<el-dialog
|
||||
:title="comicsPreviewTitle"
|
||||
:visible.sync="isComicsPreview"
|
||||
width="800px"
|
||||
class="comicsPreviewDialog"
|
||||
:before-close="subClose"
|
||||
>
|
||||
<div>
|
||||
<div class="comicsList" v-for="item in comicsPreviews" :key="item">
|
||||
<img-load :src="imgUrl + item"></img-load>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--封面图、视频弹窗组件-->
|
||||
<media-popup ref="mediaPopup"></media-popup>
|
||||
<!-- 图集预览窗口 -->
|
||||
<preview-picture ref="previewPicture"></preview-picture>
|
||||
<!--------------------子媒体编辑----------------------->
|
||||
<el-dialog
|
||||
:title="'子媒体编辑'"
|
||||
:visible.sync="subEdit"
|
||||
width="700px"
|
||||
:before-close="subHandleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="editParam"
|
||||
label-position="left"
|
||||
label-width="110px"
|
||||
>
|
||||
<div class="form-flex-box">
|
||||
<el-form-item label="章节名:">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
placeholder="请谨慎修改数据"
|
||||
v-model="editParam.title"
|
||||
:disabled="editTitle"
|
||||
></el-input>
|
||||
<el-button type="success" size="small" @click="editTitle = false"
|
||||
>修改</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-flex-box">
|
||||
<el-form-item label="第几集:" prop="coins">
|
||||
<el-input
|
||||
v-model.number="editParam.episode_number"
|
||||
size="small"
|
||||
placeholder="请输入第几集"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="价格:" prop="sale_coin">
|
||||
<el-input
|
||||
v-model.number="editParam.sale_coin"
|
||||
size="small"
|
||||
placeholder="请输入价格"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-flex-box">
|
||||
<el-form-item label="封面上传:">
|
||||
<base-upload
|
||||
:cover="editParam.cover"
|
||||
:action="action"
|
||||
@successCallback="successCallback"
|
||||
:id="editParam.id"
|
||||
:wSize="360"
|
||||
:hSize="640"
|
||||
:width="'120px'"
|
||||
:height="'213px'"
|
||||
></base-upload>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-flex-box">
|
||||
<el-form-item
|
||||
style="width: 1100px"
|
||||
label="小说:"
|
||||
v-if="mediaType === 3"
|
||||
>
|
||||
<!--小说-->
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="10"
|
||||
placeholder="请输入小说内容"
|
||||
v-model="editParam.text"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!-- 漫画 -->
|
||||
<div style="margin-bottom: 10px" v-if="mediaType === 2">
|
||||
漫画排序（<span style="color: red">拖拽修改排序顺序</span>）
|
||||
<base-upload
|
||||
:action="action"
|
||||
@successCallback="successCallbackAdd"
|
||||
:wSize="180"
|
||||
:hSize="320"
|
||||
:width="'100px'"
|
||||
:height="'50px'"
|
||||
></base-upload>
|
||||
</div>
|
||||
<div class="form-flex-box" v-if="mediaType === 2">
|
||||
<div class="test_wrapper" @dragover="dragover($event)">
|
||||
<transition-group class="transition-wrapper" name="sort">
|
||||
<div
|
||||
class="comicsPreview"
|
||||
v-for="(item, i) in comics"
|
||||
:key="item"
|
||||
:a="item"
|
||||
:draggable="true"
|
||||
@dragstart="dragstart(item)"
|
||||
@dragenter="dragenter(item, $event)"
|
||||
@dragover="dragover($event)"
|
||||
@dragend="dragend(item, $event)"
|
||||
>
|
||||
<img-load
|
||||
:width="'80px'"
|
||||
:height="'100px'"
|
||||
:src="imgUrl + item"
|
||||
></img-load>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
circle
|
||||
size="small"
|
||||
@click="deletePicture(i)"
|
||||
></el-button>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="subEdit = false" size="small">取 消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="submitDate()"
|
||||
:loading="flag"
|
||||
>确 认</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import PreviewPicture from "./previewPicture";
|
||||
import MediaPopup from "@/components/media-popup";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import { sortEscape } from "@/utils/global";
|
||||
import API from "@/api";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
// 封面上传地址
|
||||
action: baseConfig.baseServerUrl + "/vid/uploadStatic",
|
||||
loading: false,
|
||||
// 子列表数据
|
||||
subTableData: [],
|
||||
total: 0,
|
||||
time: "",
|
||||
// 请求列表查询
|
||||
mediaType: 1,
|
||||
mediaTypeName: "",
|
||||
params: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
media_id: "", // 动漫ID
|
||||
},
|
||||
statuses: [
|
||||
{
|
||||
label: "审核中",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "通过",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "拒绝",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "下架",
|
||||
value: 3,
|
||||
},
|
||||
],
|
||||
// 编辑
|
||||
editParam: {
|
||||
id: "",
|
||||
cover: "", // 封面图
|
||||
episode_number: 1, // 第几集
|
||||
sale_coin: 0, // 售价
|
||||
title: "", // 标题
|
||||
text: "", // 内容(小说专用)
|
||||
urlSet: [],
|
||||
},
|
||||
editTitle: true,
|
||||
subEdit: false,
|
||||
flag: false,
|
||||
// 小说预览
|
||||
isTextPreview: false,
|
||||
textPreviewTitle: "",
|
||||
textPreviewContent: "",
|
||||
|
||||
// 漫画预览
|
||||
isComicsPreview: false,
|
||||
comicsPreviews: [],
|
||||
comicsPreviewTitle: "",
|
||||
oldData: {},
|
||||
newData: {},
|
||||
comics: [],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
MediaPopup,
|
||||
PreviewPicture,
|
||||
},
|
||||
methods: {
|
||||
// 图集预览
|
||||
previewPicture(pictureArr) {
|
||||
let Arr = JSON.parse(JSON.stringify(pictureArr));
|
||||
this.$refs.previewPicture.open(Arr);
|
||||
},
|
||||
checkUrl(domain) {
|
||||
if (!domain) {
|
||||
return "";
|
||||
}
|
||||
var patt = /^http(s)?:\/\/.+/;
|
||||
if (!patt.test(domain)) {
|
||||
if (domain[0] == "/") {
|
||||
return this.newImgUrl;
|
||||
} else {
|
||||
return this.imgUrl;
|
||||
}
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
// 封面图上传成功回调
|
||||
successCallback(res) {
|
||||
this.editParam.cover = res.data.coverImg;
|
||||
},
|
||||
// 新增图片上传成功回调
|
||||
successCallbackAdd(res) {
|
||||
this.comics.push(res.data.coverImg);
|
||||
},
|
||||
// 删除某张图片
|
||||
deletePicture(i) {
|
||||
if (this.comics.length === 1) {
|
||||
this.$message.error("请至少保留一张！");
|
||||
return;
|
||||
}
|
||||
this.comics.splice(i, 1);
|
||||
},
|
||||
// 获取视频列表
|
||||
getSubMediaList(type) {
|
||||
if (type === "status") {
|
||||
this.params.page = 1;
|
||||
}
|
||||
this.loading = true;
|
||||
API.queryAcgMediaContentResConfig(this.params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.subTableData = res.data.list;
|
||||
this.total = res.data.total;
|
||||
} else {
|
||||
this.subTableData = [];
|
||||
this.total = 0;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.subTableData = [];
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 分页条数改变回调
|
||||
changeSize(size) {
|
||||
this.params.size = size;
|
||||
this.getSubMediaList();
|
||||
},
|
||||
// 分页页码改变回调
|
||||
changeCurrent(number) {
|
||||
this.params.page = number;
|
||||
this.getSubMediaList();
|
||||
},
|
||||
// 编辑回调监听
|
||||
handlerVideoList() {
|
||||
this.getSubMediaList();
|
||||
},
|
||||
// 数据排序
|
||||
handleSortChange(column) {
|
||||
if (column.order) {
|
||||
this.params.value = sortEscape(column.order);
|
||||
this.params.key = column.prop;
|
||||
} else {
|
||||
this.params.value = "";
|
||||
this.params.key = "";
|
||||
}
|
||||
this.getSubMediaList();
|
||||
},
|
||||
handlerPreviewList() {
|
||||
this.getSubMediaList();
|
||||
},
|
||||
// 查看媒体
|
||||
checkMedia(row, type) {
|
||||
if (type === "video") {
|
||||
this.$refs.mediaPopup.open(row.m3u8_url, type);
|
||||
} else if (this.mediaType === 2) {
|
||||
this.comicsPreviewTitle = row.title;
|
||||
this.comicsPreviews = row.urlSet;
|
||||
this.isComicsPreview = true;
|
||||
} else if (type === "text") {
|
||||
this.textPreviewTitle = row.title;
|
||||
this.textPreviewContent = row.text;
|
||||
this.isTextPreview = true;
|
||||
}
|
||||
// if (this.mediaType === 1) {
|
||||
// this.$refs.mediaPopup.open(row.m3u8_url, type);
|
||||
// } else if (this.mediaType === 2) {
|
||||
// this.comicsPreviewTitle = row.title;
|
||||
// this.comicsPreviews = row.urlSet;
|
||||
// this.isComicsPreview = true;
|
||||
// } else if (this.mediaType === 3) {
|
||||
// this.textPreviewTitle = row.title;
|
||||
// this.textPreviewContent = row.text;
|
||||
// this.isTextPreview = true;
|
||||
// }
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(data) {
|
||||
this.dialogVisible = true;
|
||||
this.params.media_id = data.id;
|
||||
this.mediaType = data.media_type;
|
||||
if (data.mediaType === 1) {
|
||||
this.mediaTypeName = "视频";
|
||||
} else if (data.mediaType === 2) {
|
||||
this.mediaTypeName = "漫画";
|
||||
} else if (data.mediaType === 3) {
|
||||
this.mediaTypeName = "小说";
|
||||
}
|
||||
this.getSubMediaList();
|
||||
},
|
||||
// 关闭回掉
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.mediaType = "";
|
||||
this.params = {
|
||||
page: 1,
|
||||
size: 10,
|
||||
media_id: "", // 动漫ID
|
||||
status: undefined, // 状态
|
||||
title: undefined, // 标题
|
||||
id: undefined, // id
|
||||
};
|
||||
this.subEdit = false;
|
||||
this.editTitle = true;
|
||||
this.editParam = {
|
||||
id: "",
|
||||
cover: "", // 封面图
|
||||
episode_number: 1,
|
||||
sale_coin: 0,
|
||||
title: "",
|
||||
text: "",
|
||||
urlSet: [],
|
||||
};
|
||||
},
|
||||
subClose() {
|
||||
this.isTextPreview = false;
|
||||
this.textPreviewTitle = "";
|
||||
this.textPreviewContent = "";
|
||||
this.isComicsPreview = false;
|
||||
this.comicsPreviews = [];
|
||||
this.comicsPreviewTitle = "";
|
||||
},
|
||||
subHandleClose() {
|
||||
this.subEdit = false;
|
||||
this.editTitle = true;
|
||||
this.editParam = {
|
||||
id: "",
|
||||
cover: "", // 封面图
|
||||
episode_number: 1,
|
||||
sale_coin: 0,
|
||||
title: "",
|
||||
text: "",
|
||||
urlSet: [],
|
||||
};
|
||||
this.comics = [];
|
||||
this.$refs.form.resetFields();
|
||||
},
|
||||
// 删除视频
|
||||
removeVideo(id) {
|
||||
this.$confirm("您确定要删除当前媒体吗？", "删除提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(() => {
|
||||
API.deleteMediaContent({
|
||||
id: id,
|
||||
}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$message({
|
||||
message: "删除成功",
|
||||
type: "success",
|
||||
});
|
||||
this.getSubMediaList();
|
||||
} else {
|
||||
this.$message.error("删除失败！");
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
// 编辑视频
|
||||
edit(row) {
|
||||
this.subEdit = true;
|
||||
this.editParam.id = row.id;
|
||||
this.editParam.cover = row.cover;
|
||||
this.editParam.episode_number = row.episode_number;
|
||||
this.editParam.sale_coin = row.sale_coin;
|
||||
this.editParam.title = row.title;
|
||||
this.editParam.text = row.text;
|
||||
this.editParam.urlSet = row.urlSet;
|
||||
this.comics = row.urlSet;
|
||||
},
|
||||
// 提交验证
|
||||
submitDate() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.flag = true;
|
||||
this.editVideo();
|
||||
} else {
|
||||
this.flag = false;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 编辑
|
||||
editVideo() {
|
||||
if (this.mediaType == 2) {
|
||||
this.editParam.urlSet = [...this.comics];
|
||||
// console.log(this.editParam)
|
||||
}
|
||||
API.updatePublishMediaContent(this.editParam)
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$message({
|
||||
message: "编辑成功！",
|
||||
type: "success",
|
||||
});
|
||||
this.handlerVideoList();
|
||||
} else {
|
||||
this.$message.error(res.msg || "编辑失败！");
|
||||
}
|
||||
this.flag = false;
|
||||
this.subHandleClose();
|
||||
})
|
||||
.catch(() => {
|
||||
this.flag = false;
|
||||
this.subHandleClose();
|
||||
});
|
||||
},
|
||||
// 拖动事件（主要是为了拖动时鼠标光标不变为禁止）
|
||||
dragover(e) {
|
||||
e.preventDefault();
|
||||
},
|
||||
dragstart(value) {
|
||||
this.oldData = value;
|
||||
},
|
||||
// 记录移动过程中信息
|
||||
dragenter(value, e) {
|
||||
this.newData = value;
|
||||
e.preventDefault();
|
||||
},
|
||||
// 拖拽最终操作
|
||||
dragend() {
|
||||
if (this.oldData !== this.newData) {
|
||||
let oldIndex = this.comics.indexOf(this.oldData);
|
||||
let newIndex = this.comics.indexOf(this.newData);
|
||||
let newItems = [...this.comics];
|
||||
// 删除老的节点
|
||||
newItems.splice(oldIndex, 1);
|
||||
// 在列表中目标位置增加新的节点
|
||||
newItems.splice(newIndex, 0, this.oldData);
|
||||
this.comics = [...newItems];
|
||||
}
|
||||
// console.log(this.comics)
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.textPreviewDialog {
|
||||
/deep/ .el-dialog__body {
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
// max-height: 800px;
|
||||
.textPreview {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
.comicsPreviewDialog {
|
||||
/deep/ .el-dialog__body {
|
||||
max-height: 700px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.videoList-box {
|
||||
// min-height: 100vh;
|
||||
min-height: 500px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
.btn {
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.page {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.el-pagination {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.tagBox {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.test_wrapper {
|
||||
width: 100%;
|
||||
// display: flex;
|
||||
.transition-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.comicsPreview {
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.views {
|
||||
color: red;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.picturePreview {
|
||||
max-width: 300px;
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,772 @@
|
||||
<template>
|
||||
<div class="vid-res-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-input
|
||||
v-model="params.title"
|
||||
placeholder="请输入标题"
|
||||
size="small"
|
||||
class="param-input"
|
||||
clearable
|
||||
></el-input>
|
||||
<el-input
|
||||
v-model="params.tag"
|
||||
placeholder="请输入标签"
|
||||
size="small"
|
||||
class="param-input"
|
||||
clearable
|
||||
></el-input>
|
||||
<el-input
|
||||
v-model="params.vlogger_id"
|
||||
placeholder="请输入UP主ID"
|
||||
size="small"
|
||||
class="param-input"
|
||||
clearable
|
||||
></el-input>
|
||||
<el-input
|
||||
v-model="params.media_center_id"
|
||||
placeholder="请输入媒资中心ID"
|
||||
size="small"
|
||||
class="param-input"
|
||||
clearable
|
||||
></el-input>
|
||||
<el-select
|
||||
v-model="params.is_up"
|
||||
size="small"
|
||||
clearable
|
||||
placeholder="请选择是否up主"
|
||||
@change="getList('status')"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, i) in is_ups"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="i"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="params.media_type"
|
||||
size="small"
|
||||
placeholder="请选择媒体类型"
|
||||
@change="getList('status')"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, i) in media_types"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="i"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="params.sync_type"
|
||||
size="small"
|
||||
clearable
|
||||
placeholder="请选择同步类型"
|
||||
@change="getList('status')"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, i) in sync_types"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="i"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-button type="primary" size="small" @click="getList()">搜索</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="openSelection"
|
||||
:disabled="isDisabled"
|
||||
>批量操作</el-button
|
||||
>
|
||||
<el-button
|
||||
type="success"
|
||||
size="small"
|
||||
@click="synchronizeMedia"
|
||||
:disabled="isDisabled"
|
||||
>同步</el-button
|
||||
>
|
||||
</div>
|
||||
<!--数据表格-->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%;"
|
||||
max-height="800px"
|
||||
border
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
ref="multipleTable"
|
||||
@sort-change="handleSortChange"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
v-if="isSelection"
|
||||
width="55"
|
||||
fixed="left"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="title"
|
||||
label="标题"
|
||||
align="center"
|
||||
min-width="240"
|
||||
fixed
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.title || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="id"
|
||||
label="ID"
|
||||
align="center"
|
||||
min-width="120"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="anchor"
|
||||
label="作者"
|
||||
align="center"
|
||||
min-width="120"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="total_episode"
|
||||
label="总集数"
|
||||
align="center"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.total_episode || 0 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="media_type"
|
||||
label="媒体类型"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" v-if="scope.row.media_type == 1">动漫</el-tag>
|
||||
<el-tag
|
||||
style="background-color: #ecf5ff;color: #409eff;border: 1px solid #d9ecff;"
|
||||
v-else-if="scope.row.media_type == 2"
|
||||
>漫画</el-tag
|
||||
>
|
||||
<el-tag type="warning" v-else-if="scope.row.media_type == 3"
|
||||
>文本小说</el-tag
|
||||
>
|
||||
<el-tag type="danger" v-else-if="scope.row.media_type == 4"
|
||||
>有声小说</el-tag
|
||||
>
|
||||
<el-tag type="info" v-else-if="scope.row.media_type == 5"
|
||||
>短剧</el-tag
|
||||
>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sale_coin"
|
||||
label="整部售价"
|
||||
align="center"
|
||||
width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.sale_coin || 0 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="url" label="子媒体" align="center" width="80">
|
||||
<template slot-scope="scope">
|
||||
<i
|
||||
class="el-icon-video-play views"
|
||||
title="点击查看"
|
||||
@click="openSubMedia(scope.row)"
|
||||
></i>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="update_status"
|
||||
label="更新状态"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="warning" v-if="scope.row.update_status == 1"
|
||||
>连载中</el-tag
|
||||
>
|
||||
<el-tag type="success" v-else-if="scope.row.update_status == 2"
|
||||
>完结</el-tag
|
||||
>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="横版封面" align="center" width="100" prop="cover">
|
||||
<template slot-scope="scope">
|
||||
<img-load
|
||||
:width="'80px'"
|
||||
:height="'60px'"
|
||||
:src="
|
||||
checkUrl(scope.row.horizontal_cover) + scope.row.horizontal_cover
|
||||
"
|
||||
>
|
||||
</img-load>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="竖版封面" align="center" width="100" prop="cover">
|
||||
<template slot-scope="scope">
|
||||
<img-load
|
||||
:width="'60px'"
|
||||
:height="'80px'"
|
||||
:src="checkUrl(scope.row.vertical_cover) + scope.row.vertical_cover"
|
||||
>
|
||||
</img-load>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="tags_text" label="标签" align="center" width="320">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.tags_text || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="summary" label="简介" align="center" width="320">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.summary || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="update_time"
|
||||
label="修改时间"
|
||||
align="center"
|
||||
min-width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ (scope.row.update_time * 1000) | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="create_time"
|
||||
label="创建时间"
|
||||
align="center"
|
||||
min-width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ (scope.row.create_time * 1000) | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<div class="bottom">
|
||||
<div class="btn" v-if="isSelection">
|
||||
<el-button type="info" size="mini" @click="giveUp">放弃操作</el-button>
|
||||
<el-button type="success" size="mini" @click="useVideo">使用</el-button>
|
||||
<el-button type="primary" size="mini" @click="neglectVideo"
|
||||
>忽略</el-button
|
||||
>
|
||||
</div>
|
||||
<div v-else></div>
|
||||
<el-pagination
|
||||
:page-sizes="[10, 15, 20, 30]"
|
||||
:current-page="params.page"
|
||||
:page-size="params.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
v-if="total > 10"
|
||||
@size-change="changeSize"
|
||||
@current-change="changeCurrent"
|
||||
></el-pagination>
|
||||
</div>
|
||||
<!--封面图、视频弹窗组件-->
|
||||
<preview-video ref="previewVideo"></preview-video>
|
||||
<el-dialog
|
||||
title="媒体使用"
|
||||
align="center"
|
||||
:visible.sync="showVidUse"
|
||||
width="450px"
|
||||
@close="close"
|
||||
>
|
||||
<el-form ref="form" label-width="80px">
|
||||
<el-alert
|
||||
v-if="isDramaImport"
|
||||
title="短剧导入会自动使用 kind=8、type=1、dimension=drama，导入后默认下架，请到短剧列表核对价格和资源后再上架"
|
||||
type="warning"
|
||||
:closable="false"
|
||||
style="margin-bottom: 12px"
|
||||
></el-alert>
|
||||
<el-form-item label="父专题:" prop="start">
|
||||
<el-select
|
||||
v-model="fatherSections"
|
||||
placeholder="请选择父专题"
|
||||
size="small"
|
||||
clearable
|
||||
@change="searchSelectSection"
|
||||
>
|
||||
<el-option
|
||||
v-for="(section, index) in sections"
|
||||
:key="index"
|
||||
:label="section.subModuleName"
|
||||
:value="section.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="子专题:" prop="start">
|
||||
<el-select
|
||||
v-model="sectionID"
|
||||
placeholder="请选择子专题"
|
||||
size="small"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="(subSection, index) in searchSubSections"
|
||||
:key="index"
|
||||
:label="subSection.sectionName"
|
||||
:value="subSection.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="种类:" prop="sectionID">
|
||||
<el-select
|
||||
v-model="kind"
|
||||
size="small"
|
||||
placeholder="请选择种类"
|
||||
:disabled="isDramaImport"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, i) in kinds"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="i"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型:" size="small" prop="type">
|
||||
<el-select
|
||||
@change="getTagDimensionsList()"
|
||||
clearable
|
||||
size="small"
|
||||
v-model="type"
|
||||
placeholder="请选择类型"
|
||||
:disabled="isDramaImport"
|
||||
>
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in types"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="纬度:" size="small" prop="dimension">
|
||||
<el-select
|
||||
v-model="dimension"
|
||||
placeholder="请选择纬度"
|
||||
clearable
|
||||
:disabled="isDramaImport"
|
||||
>
|
||||
<el-option
|
||||
v-for="k in dimensions"
|
||||
:key="k.id"
|
||||
:label="k.name"
|
||||
:value="k.name"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="cancelBtn" size="small">取 消</el-button>
|
||||
<el-button @click="useAcgMediaRes" type="primary" size="small"
|
||||
>确 认</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 图集预览窗口 -->
|
||||
<preview-picture ref="previewPicture"></preview-picture>
|
||||
<!-- 查看子媒体 -->
|
||||
<subset-media-list ref="subsetMedia"></subset-media-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import PreviewVideo from "./components/preview-video";
|
||||
import PreviewPicture from "./components/previewPicture";
|
||||
import API from "@/api";
|
||||
import { sortEscape } from "@/utils/global";
|
||||
import SubsetMediaList from "./components/subsetMediaList.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PreviewVideo,
|
||||
PreviewPicture,
|
||||
SubsetMediaList,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
newImgUrl: baseConfig.newImgUrl,
|
||||
// 表格数据加载动画
|
||||
loading: false,
|
||||
tableData: [],
|
||||
total: 0,
|
||||
// 列表请求参数
|
||||
params: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
is_up: undefined, // 是否是up主 0-不是 1-是 不传则是所有
|
||||
media_center_id: undefined, // 媒资中心的中资源唯一id
|
||||
media_type: 1, // 1-动画 2-漫画 3-小说
|
||||
sync_type: undefined, // 同步类型 1-全量同步 2-增量同步
|
||||
tag: undefined, // 标签
|
||||
title: undefined, // 标题
|
||||
vlogger_id: undefined, // up主id
|
||||
},
|
||||
is_ups: [
|
||||
{ label: "否", value: 0 },
|
||||
{ label: "是", value: 1 },
|
||||
],
|
||||
media_types: [
|
||||
{ label: "动漫", value: 1 },
|
||||
{ label: "漫画", value: 2 },
|
||||
{ label: "文本小说", value: 3 },
|
||||
{ label: "有声小说", value: 4 },
|
||||
{ label: "短剧", value: 5 },
|
||||
],
|
||||
sync_types: [
|
||||
{ label: "全量", value: 1 },
|
||||
{ label: "增量", value: 2 },
|
||||
],
|
||||
kinds: [
|
||||
{
|
||||
label: "哩番",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "3D",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "同人动画",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
label: "单行本",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
label: "连载漫画",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
label: "韩漫",
|
||||
value: 6,
|
||||
},
|
||||
{
|
||||
label: "小说",
|
||||
value: 7,
|
||||
},
|
||||
{
|
||||
label: "剧场/短剧",
|
||||
value: 8,
|
||||
},
|
||||
],
|
||||
types: [
|
||||
{
|
||||
label: "动漫",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "漫画",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "小说",
|
||||
value: 3,
|
||||
},
|
||||
],
|
||||
dimensions: [],
|
||||
isSelection: false,
|
||||
isDisabled: false,
|
||||
multipleSelection: [],
|
||||
ids: [],
|
||||
kind: "", // 使用的种类
|
||||
sectionID: "",
|
||||
type: "", // 类型
|
||||
dimension: "", // 纬度
|
||||
showVidUse: false,
|
||||
sections: [],
|
||||
searchSubSections: "",
|
||||
subSectionList: [],
|
||||
subSectionId: "",
|
||||
fatherSections: "",
|
||||
searchSubSectionId: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isDramaImport() {
|
||||
if (this.params.media_type == 5) {
|
||||
return true;
|
||||
}
|
||||
return (
|
||||
this.multipleSelection.length > 0 &&
|
||||
this.multipleSelection.every((item) => item.media_type == 5)
|
||||
);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getSections();
|
||||
},
|
||||
methods: {
|
||||
searchSelectSection() {
|
||||
this.sections.forEach((item) => {
|
||||
if (item.id == this.fatherSections) {
|
||||
this.searchSubSections = item.sections;
|
||||
}
|
||||
});
|
||||
this.params.sectionID = "";
|
||||
},
|
||||
getSections() {
|
||||
API.sectionList({}).then((res) => {
|
||||
if (res && res.code === 200) {
|
||||
this.sections = res.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 预览
|
||||
openSubMedia(row) {
|
||||
this.$refs.subsetMedia.open(row);
|
||||
},
|
||||
// 请求列表
|
||||
getList(type) {
|
||||
this.loading = true;
|
||||
if (type === "status") {
|
||||
this.params.page = 1;
|
||||
}
|
||||
API.queryAcgMediaResConfig(this.params)
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data.list) {
|
||||
this.tableData = res.data.list;
|
||||
this.tableData.forEach((i) => {
|
||||
if (i.tags_text) {
|
||||
i.tags_text = i.tags_text.split(",").slice(0, 3);
|
||||
}
|
||||
});
|
||||
this.total = res.data.total;
|
||||
} else {
|
||||
this.tableData = [];
|
||||
this.total = 0;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
giveUp() {
|
||||
this.multipleSelection = [];
|
||||
this.ids = [];
|
||||
this.isDisabled = false;
|
||||
this.isSelection = false;
|
||||
this.$refs.multipleTable.clearSelection();
|
||||
},
|
||||
useVideo() {
|
||||
if (this.multipleSelection.length <= 0) {
|
||||
this.$message.error("请选择使用媒体资源");
|
||||
return;
|
||||
}
|
||||
if (this.isDramaImport) {
|
||||
this.kind = 8;
|
||||
this.type = 1;
|
||||
this.dimension = "drama";
|
||||
}
|
||||
this.showVidUse = true;
|
||||
},
|
||||
// 图集预览
|
||||
previewPicture(pictureArr) {
|
||||
let Arr = JSON.parse(JSON.stringify(pictureArr));
|
||||
this.$refs.previewPicture.open(Arr);
|
||||
},
|
||||
async useAcgMediaRes() {
|
||||
let arr = [];
|
||||
this.multipleSelection.forEach((i) => {
|
||||
arr.push(i.id);
|
||||
});
|
||||
let res = await API.useAcgMediaRes({
|
||||
ids: arr,
|
||||
section_id: this.sectionID,
|
||||
kind: this.isDramaImport ? 8 : this.kind,
|
||||
type: this.isDramaImport ? 1 : this.type,
|
||||
dimension: this.isDramaImport ? "drama" : this.dimension,
|
||||
});
|
||||
if (res.code == 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: this.isDramaImport
|
||||
? "导入已受理，请到短剧列表用媒资库ID查询导入结果"
|
||||
: "使用成功!",
|
||||
});
|
||||
this.multipleSelection = [];
|
||||
this.isSelection = false;
|
||||
this.isDisabled = false;
|
||||
this.showVidUse = false;
|
||||
this.getList();
|
||||
return;
|
||||
}
|
||||
this.$message.error(res.msg || res.tip || "操作失败");
|
||||
},
|
||||
synchronizeMedia() {
|
||||
this.$confirm("确认同步资源？")
|
||||
.then(async () => {
|
||||
let res = await API.acgMediaSync();
|
||||
if (res.code == 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "操作成功!",
|
||||
});
|
||||
} else {
|
||||
this.$message.error(res.msg || res.tip || "操作失败");
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
async ignoreMedia() {
|
||||
let arr = [];
|
||||
this.multipleSelection.forEach((i) => {
|
||||
arr.push(i.id);
|
||||
});
|
||||
let res = await API.ignoreAcgMediaRes({
|
||||
ids: arr,
|
||||
});
|
||||
if (res.code == 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "操作成功!",
|
||||
});
|
||||
this.multipleSelection = [];
|
||||
this.isSelection = false;
|
||||
this.isDisabled = false;
|
||||
this.getList();
|
||||
return;
|
||||
}
|
||||
this.$message.error(res.msg || res.tip || "操作失败");
|
||||
},
|
||||
neglectVideo() {
|
||||
if (this.multipleSelection.length <= 0) {
|
||||
this.$message.error("请选择使用媒体资源");
|
||||
return;
|
||||
}
|
||||
this.$confirm("确认忽略选中媒体资源？")
|
||||
.then(() => {
|
||||
this.ignoreMedia();
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = val;
|
||||
},
|
||||
openSelection() {
|
||||
this.isSelection = true;
|
||||
this.isDisabled = true;
|
||||
},
|
||||
// 数据排序
|
||||
handleSortChange(column) {
|
||||
this.params.value = sortEscape(column.order);
|
||||
this.params.key = column.prop;
|
||||
this.getList();
|
||||
},
|
||||
// pageSize发生变化触发
|
||||
changeSize(size) {
|
||||
this.params.size = size;
|
||||
this.params.page = 1;
|
||||
this.getList();
|
||||
},
|
||||
// 当前页发生变化触发
|
||||
changeCurrent(page) {
|
||||
this.params.page = page;
|
||||
this.getList();
|
||||
},
|
||||
// 视频查看
|
||||
checkMedia(url, type, data) {
|
||||
// console.log(url, type, data)
|
||||
this.$refs.previewVideo.open(url, type, data);
|
||||
},
|
||||
// 取消
|
||||
cancelBtn() {
|
||||
this.showVidUse = false;
|
||||
},
|
||||
close() {
|
||||
this.showVidUse = false;
|
||||
this.kind = "";
|
||||
},
|
||||
checkUrl(domain) {
|
||||
if (!domain) {
|
||||
return "";
|
||||
}
|
||||
var patt = /^http(s)?:\/\/.+/;
|
||||
if (!patt.test(domain)) {
|
||||
if (domain[0] == "/") {
|
||||
return this.newImgUrl;
|
||||
} else {
|
||||
return this.imgUrl;
|
||||
}
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
// 请求种类下的纬度列表数据
|
||||
getTagDimensionsList() {
|
||||
API.getAnimeAllLatitude({
|
||||
type: this.type,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.dimensions = res.data.list || [];
|
||||
} else {
|
||||
this.dimensions = [];
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.dimensions = [];
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vid-res-box {
|
||||
.tagItem {
|
||||
margin: 0 5px 5px;
|
||||
}
|
||||
/deep/ .el-form-item__content {
|
||||
display: flex;
|
||||
}
|
||||
.param-input {
|
||||
width: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.picturePreview {
|
||||
max-width: 300px;
|
||||
display: flex;
|
||||
}
|
||||
.views {
|
||||
color: red;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,749 @@
|
||||
<template>
|
||||
<div class="tag-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-input
|
||||
v-model="params.id"
|
||||
placeholder="请输入ID"
|
||||
clearable
|
||||
size="small"
|
||||
class="param-input"
|
||||
style="width: 220px"
|
||||
></el-input>
|
||||
<!-- <el-input
|
||||
v-model="params.name"
|
||||
placeholder="请输入播单专题名称"
|
||||
clearable
|
||||
size="small"
|
||||
class="param-input"
|
||||
style="width: 280px"
|
||||
></el-input>
|
||||
<el-select
|
||||
placeholder="请选择是否开启"
|
||||
clearable
|
||||
size="small"
|
||||
v-model="params.status"
|
||||
>
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in statuses"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select> -->
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="el-icon-search"
|
||||
@click="getList('status')"
|
||||
style="margin-right: 20px"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="addAndEdit('add')"
|
||||
style="margin-right: 20px"
|
||||
>新增</el-button
|
||||
>
|
||||
</div>
|
||||
<!--数据表格-->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
border
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
height="600"
|
||||
>
|
||||
<el-table-column prop="id" label="ID" align="center" min-width="210">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.id || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="播单名称" align="center" width="240">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.name || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="章节名" align="center" width="220">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.name || 0 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="text" label="内容" align="center" width="220">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.text || 0 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="videoUrl"
|
||||
label="视频地址"
|
||||
align="center"
|
||||
width="220"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.videoUrl || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="episodeNumber"
|
||||
label="第几集"
|
||||
align="center"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.episodeNumber || 0 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="urlSet" label="地址集" align="center" width="80">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.urlSet }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="playTime"
|
||||
label="影片长度"
|
||||
align="center"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.playTime || 0 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="price" label="购买价格" align="center" width="80">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.price || 0 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="weight" label="宽" align="center" width="80">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.weight || 0 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="height" label="高" align="center" width="80">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.height || 0 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ratio" label="宽高比" align="center" width="80">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.ratio || 0 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="listenPermission"
|
||||
label="收听权限"
|
||||
align="center"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.listenPermission }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" align="center" width="80">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.status }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="isActive"
|
||||
label="是否激活"
|
||||
align="center"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.isActive }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="mediaId"
|
||||
label="媒体资源ID"
|
||||
align="center"
|
||||
width="240"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.mediaId || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="mediaSize"
|
||||
label="资源大小"
|
||||
align="center"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.mediaSize || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="md5" label="媒体md5" align="center" width="240">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.md5 || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="updatedAct"
|
||||
label="操作人"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.updatedAct || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="updateTime"
|
||||
label="修改时间"
|
||||
align="center"
|
||||
min-width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ changeTime(scope.row.updateTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="contentUpdateTime"
|
||||
label="内容更新时间"
|
||||
align="center"
|
||||
min-width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ changeTime(scope.row.contentUpdateTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="latestPublishedAt"
|
||||
label="最新发布时间"
|
||||
align="center"
|
||||
min-width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ changeTime(scope.row.latestPublishedAt) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="createdAt"
|
||||
label="创建时间"
|
||||
align="center"
|
||||
min-width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ changeTime(scope.row.createdAt) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
min-width="280"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="success"
|
||||
icon="el-icon-edit"
|
||||
@click="addAndEdit(scope.row)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
@click="del(scope.row)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
:page-sizes="[10, 25, 50, 100]"
|
||||
:current-page="params.pageNumber"
|
||||
:page-size="params.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
@size-change="changeSize"
|
||||
@current-change="changeCurrent"
|
||||
></el-pagination>
|
||||
<!-- 新增、修改 -->
|
||||
<el-dialog
|
||||
:title="dialogTitle"
|
||||
:visible.sync="dialogVisible"
|
||||
width="1200px"
|
||||
@before-close="handleClose"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form :model="form" label-width="100px" :rules="rules" ref="form">
|
||||
<div class="itemBox">
|
||||
<el-form-item
|
||||
label="第几集:"
|
||||
size="small"
|
||||
prop="episodeNumber"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-input v-model="form.episodeNumber"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="高:"
|
||||
size="small"
|
||||
prop="height"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-input v-model.number="form.height"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="宽:"
|
||||
size="small"
|
||||
prop="weight"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-input v-model.number="form.weight"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="itemBox">
|
||||
<el-form-item
|
||||
label="宽高比:"
|
||||
size="small"
|
||||
prop="ratio"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-input v-model.number="form.ratio"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="收听权限:"
|
||||
size="small"
|
||||
prop="listenPermission"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-input v-model.number="form.listenPermission"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="媒体md5:"
|
||||
size="small"
|
||||
prop="md5"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-input v-model="form.md5"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="itemBox">
|
||||
<el-form-item
|
||||
label="媒体资源ID:"
|
||||
size="small"
|
||||
prop="mediaId"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-input v-model="form.mediaId"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="资源大小:"
|
||||
size="small"
|
||||
prop="mediaSize"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-input v-model.number="form.mediaSize"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="章节名:"
|
||||
size="small"
|
||||
prop="name"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="itemBox">
|
||||
<el-form-item
|
||||
label="影片长度:"
|
||||
size="small"
|
||||
prop="playTime"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-input v-model.number="form.playTime"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="购买价格:"
|
||||
size="small"
|
||||
prop="price"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-input v-model.number="form.price"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="状态:"
|
||||
size="small"
|
||||
prop="status"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-input v-model="form.status"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="itemBox">
|
||||
<el-form-item
|
||||
label="是否激活:"
|
||||
size="small"
|
||||
prop="isActive"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-select v-model="form.isActive" placeholder="请选择是否激活">
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in actives"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="内容:"
|
||||
size="small"
|
||||
prop="text"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-input v-model="form.text"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="视频地址:"
|
||||
size="small"
|
||||
prop="videoUrl"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-input v-model="form.videoUrl"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="itemBox">
|
||||
<!-- <el-form-item
|
||||
label="地址集:"
|
||||
size="small"
|
||||
prop="urlSet"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-input v-model="form.urlSet"></el-input>
|
||||
</el-form-item> -->
|
||||
</div>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose" size="small">取 消</el-button>
|
||||
<el-button type="primary" size="small" @click="onSubmit()"
|
||||
>确 定</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import { uniteDate } from "@/utils/validator.js";
|
||||
import local from "@/utils/localStroage";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 表格数据加载动画
|
||||
loading: false,
|
||||
header: {
|
||||
Authorization: local.get("userInfo").token,
|
||||
},
|
||||
// 列表数据
|
||||
tableData: [],
|
||||
total: 0,
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
status: undefined, // 状态
|
||||
isRecommend: undefined, // 是否推荐
|
||||
id: undefined, // id
|
||||
},
|
||||
rules: {
|
||||
name: [{ required: true, message: "请输入播单名称", trigger: "blur" }],
|
||||
cover: [{ required: true, message: "请上传图片", trigger: "blur" }],
|
||||
uid: [{ required: true, message: "请输入用户ID", trigger: "blur" }],
|
||||
},
|
||||
types: [
|
||||
{
|
||||
label: "图集",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "视频",
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
statuses: [
|
||||
{
|
||||
label: "开启",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "关闭",
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
actives: [
|
||||
{
|
||||
label: "是",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
label: "否",
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
kinds: [
|
||||
{
|
||||
label: "动漫",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "漫画",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "小说",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
label: "cos",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
label: "禁播",
|
||||
value: 5,
|
||||
},
|
||||
],
|
||||
dialogTitle: "",
|
||||
dialogVisible: false,
|
||||
form: {
|
||||
id: undefined,
|
||||
episodeNumber: 0, // 第几集
|
||||
height: 0, // 高
|
||||
weight: 0, // 宽
|
||||
ratio: 0, // 宽高比
|
||||
isActive: true, // 是否激活
|
||||
listenPermission: 0, // 收听权限 0:会员 1:金币购买 2:免费
|
||||
md5: undefined, // 媒体md5
|
||||
mediaId: undefined, // 媒体资源ID
|
||||
mediaSize: 0, // 资源大小
|
||||
name: undefined, // 章节名
|
||||
playTime: 0, // 影片长度
|
||||
price: 0, // 购买价格
|
||||
status: 1, // 状态 0:转码中 1:转码成功 2:转码失败, 视频资源使用
|
||||
text: undefined, // 内容(小说专用)
|
||||
urlSet: [], // 地址集
|
||||
videoUrl: undefined, // 视频地址
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
getList(type) {
|
||||
if (type === "status") {
|
||||
this.params.pageNumber = 1;
|
||||
}
|
||||
API.getAnimeContentList(this.params)
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.tableData = res.data.list;
|
||||
this.total = res.data.total;
|
||||
} else {
|
||||
this.tableData = [];
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 新增播单
|
||||
addAndEdit(param) {
|
||||
if (param === "add") {
|
||||
this.dialogTitle = "新增";
|
||||
} else {
|
||||
this.dialogTitle = "编辑";
|
||||
// 把数据回显给表单
|
||||
this.form.id = param.id;
|
||||
this.form.episodeNumber = param.episodeNumber;
|
||||
this.form.height = param.height;
|
||||
this.form.weight = param.weight;
|
||||
this.form.ratio = param.ratio;
|
||||
this.form.isActive = param.isActive;
|
||||
this.form.listenPermission = param.listenPermission;
|
||||
this.form.md5 = param.md5;
|
||||
this.form.mediaId = param.mediaId;
|
||||
this.form.mediaSize = param.mediaSize;
|
||||
this.form.name = param.name;
|
||||
this.form.playTime = param.playTime;
|
||||
this.form.price = param.price;
|
||||
this.form.status = param.status;
|
||||
this.form.text = param.text;
|
||||
this.form.urlSet = param.urlSet;
|
||||
this.form.videoUrl = param.videoUrl;
|
||||
}
|
||||
this.dialogVisible = true; // 打开新增、编辑对话框
|
||||
},
|
||||
// 新增、修改提交
|
||||
onSubmit() {
|
||||
if (this.dialogTitle === "新增") {
|
||||
this.add();
|
||||
} else {
|
||||
this.edit();
|
||||
}
|
||||
},
|
||||
// 新增方法
|
||||
add() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
API.addAnimeContent(this.form).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "新增成功",
|
||||
});
|
||||
this.handleClose();
|
||||
this.getList();
|
||||
} else {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "新增失败",
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 修改方法
|
||||
edit() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
API.updateAnimeContent(this.form).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "编辑成功",
|
||||
});
|
||||
this.handleClose();
|
||||
this.getList();
|
||||
} else {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "编辑失败",
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
del(param) {
|
||||
this.$confirm(
|
||||
`确认是否删除<span style='color:blue'>${param.name}</span>, 是否继续?`,
|
||||
"提示",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
dangerouslyUseHTMLString: true,
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
let delData = {
|
||||
id: param.id,
|
||||
};
|
||||
API.delAnimeContent(delData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "删除成功!",
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "删除失败!",
|
||||
});
|
||||
}
|
||||
this.getList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消删除",
|
||||
});
|
||||
});
|
||||
},
|
||||
// 关闭窗口清除数据
|
||||
handleClose() {
|
||||
this.form.id = undefined;
|
||||
this.form.episodeNumber = 0;
|
||||
this.form.height = 0;
|
||||
this.form.weight = 0;
|
||||
this.form.ratio = 0;
|
||||
this.form.isActive = true;
|
||||
this.form.listenPermission = 0;
|
||||
this.form.md5 = undefined;
|
||||
this.form.mediaId = undefined;
|
||||
this.form.mediaSize = 0;
|
||||
this.form.name = undefined;
|
||||
this.form.playTime = 0;
|
||||
this.form.price = 0;
|
||||
this.form.status = 1;
|
||||
this.form.text = undefined;
|
||||
this.form.urlSet = [];
|
||||
this.form.videoUrl = undefined;
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
// 分页条数改变回调
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.getList();
|
||||
},
|
||||
// 分页页码改变回调
|
||||
changeCurrent(pageNumber) {
|
||||
this.params.pageNumber = pageNumber;
|
||||
this.getList();
|
||||
},
|
||||
// 更换时间格式
|
||||
changeTime(time) {
|
||||
return uniteDate(time);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.dialog-footer {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
}
|
||||
/deep/ .el-form-item__content {
|
||||
display: flex;
|
||||
}
|
||||
/deep/ .el-select {
|
||||
width: 100%;
|
||||
}
|
||||
/deep/ .el-date-editor.el-input,
|
||||
.el-date-editor.el-input__inner {
|
||||
width: 100%;
|
||||
}
|
||||
/deep/ .el-upload-list--picture-card .el-upload-list__item {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
/deep/ .el-upload--picture-card {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
line-height: 130px;
|
||||
}
|
||||
.itemBox {
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="批量修改前几集免费"
|
||||
:visible.sync="dialogVisible"
|
||||
width="400px"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
inline
|
||||
label-position="left"
|
||||
label-width="86px"
|
||||
>
|
||||
<el-form-item label="前几集:" prop="freeEpisode">
|
||||
<el-input
|
||||
style="width: 240px;"
|
||||
type="text"
|
||||
size="small"
|
||||
placeholder="请输入前几集"
|
||||
v-model.number="form.freeEpisode"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose" size="small">取 消</el-button>
|
||||
<el-button type="primary" size="small" @click="submitDate" :loading="flag"
|
||||
>确 认</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from "@/api";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
dialogVisible: false,
|
||||
form: {
|
||||
freeEpisode: 0,
|
||||
ids: [],
|
||||
},
|
||||
rules: {
|
||||
freeEpisode: [
|
||||
{ required: true, message: "请输入前几集", trigger: ["blur", "change"] },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submitDate() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$confirm(`确定修改前几集免费？`, "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(() => {
|
||||
this.flag = true;
|
||||
let ajax = API.setMediaStatus;
|
||||
ajax(this.form)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "修改成功",
|
||||
type: "success",
|
||||
});
|
||||
this.handleClose();
|
||||
this.$emit("close");
|
||||
} else {
|
||||
this.$message.error("修改失败！");
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.flag = false;
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
handleClose() {
|
||||
this.flag = false;
|
||||
this.dialogVisible = false;
|
||||
this.$refs.form.resetFields();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="批量修改价格"
|
||||
:visible.sync="dialogVisible"
|
||||
width="400px"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
inline
|
||||
label-position="left"
|
||||
label-width="86px"
|
||||
>
|
||||
<el-form-item label="前几集免费:" prop="freeEpisode">
|
||||
<el-input
|
||||
style="width: 240px;"
|
||||
type="text"
|
||||
size="small"
|
||||
placeholder="前几集免费"
|
||||
v-model.number="form.freeEpisode"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="价格:" prop="price">
|
||||
<el-input
|
||||
style="width: 240px;"
|
||||
type="text"
|
||||
size="small"
|
||||
placeholder="请输入价格"
|
||||
v-model.number="form.price"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="观看权限:" prop="permission">
|
||||
<el-select
|
||||
v-model="form.permission"
|
||||
style="width: 240px;"
|
||||
placeholder="请选择观看权限"
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in watchOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose" size="small">取 消</el-button>
|
||||
<el-button type="primary" size="small" @click="submitDate" :loading="flag"
|
||||
>确 认</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from "@/api";
|
||||
export default {
|
||||
props: {
|
||||
sub: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
dialogVisible: false,
|
||||
form: {
|
||||
freeEpisode: 0,
|
||||
price: 0,
|
||||
ids: [],
|
||||
permission: undefined,
|
||||
},
|
||||
rules: {
|
||||
price: [{ required: true, message: "请输入价格", trigger: "blur" }],
|
||||
},
|
||||
watchOptions: [
|
||||
{ value: 0, label: "会员" },
|
||||
{ value: 1, label: "金币购买" },
|
||||
{ value: 2, label: "免费" },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submitDate() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$confirm(`确定批量操作？`, "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(() => {
|
||||
this.flag = true;
|
||||
let ajax = API.setMediaStatus;
|
||||
if (this.sub) {
|
||||
ajax = API.setSubMediaStatus;
|
||||
}
|
||||
ajax(this.form)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "修改成功",
|
||||
type: "success",
|
||||
});
|
||||
this.handleClose();
|
||||
this.$emit("close");
|
||||
} else {
|
||||
this.$message.error("修改失败！");
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.flag = false;
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
handleClose() {
|
||||
this.flag = false;
|
||||
this.form.price = 0;
|
||||
this.form.freeEpisode = 0;
|
||||
this.form.permission = undefined;
|
||||
this.dialogVisible = false;
|
||||
this.$refs.form.resetFields();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="批量修改标签"
|
||||
:visible.sync="dialogVisible"
|
||||
width="800px"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-position="left"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="种类:" size="small" prop="kind" style="width: 360px;">
|
||||
<el-select
|
||||
placeholder="请选择种类"
|
||||
clearable
|
||||
size="small"
|
||||
v-model="form.kind"
|
||||
>
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in kinds"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="标签类型:"
|
||||
size="small"
|
||||
prop="type"
|
||||
style="width: 360px;"
|
||||
>
|
||||
<el-select
|
||||
@change="getTagDimensionsList"
|
||||
clearable
|
||||
size="small"
|
||||
v-model="form.type"
|
||||
placeholder="请选择标签类型"
|
||||
>
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in typeses"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="纬度:"
|
||||
size="small"
|
||||
prop="dimension"
|
||||
style="width: 360px;"
|
||||
>
|
||||
<el-select
|
||||
@change="getTagList"
|
||||
v-model="form.dimension"
|
||||
placeholder="请选择纬度"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="k in dimensions"
|
||||
:key="k.id"
|
||||
:label="k.name"
|
||||
:value="k.name"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="标签:" prop="tags">
|
||||
<tag-selector
|
||||
v-model="form.tags"
|
||||
:tagList="tagList"
|
||||
v-if="tagList.length"
|
||||
></tag-selector>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose" size="small">取 消</el-button>
|
||||
<el-button type="primary" size="small" @click="submitDate" :loading="flag"
|
||||
>确 认</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import TagSelector from "@/components/mediaTagSelector";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
dialogVisible: false,
|
||||
form: {
|
||||
type: "",
|
||||
kind: "",
|
||||
dimension: "",
|
||||
tags: [],
|
||||
ids: [],
|
||||
},
|
||||
typeses: [
|
||||
{ label: "动漫", value: 1 },
|
||||
{ label: "漫画", value: 2 },
|
||||
{ label: "文本小说", value: 3 },
|
||||
{ label: "有声小说", value: 4 },
|
||||
{ label: "短剧", value: 5 },
|
||||
],
|
||||
kinds: [
|
||||
{ label: "哩番", value: 1 },
|
||||
{ label: "3D", value: 2 },
|
||||
{ label: "同人动画", value: 3 },
|
||||
{ label: "单行本", value: 4 },
|
||||
{ label: "连载漫画", value: 5 },
|
||||
{ label: "韩漫", value: 6 },
|
||||
{ label: "小说", value: 7 },
|
||||
{ label: "剧场/短剧", value: 8 },
|
||||
],
|
||||
rules: {
|
||||
kind: [{ required: true, message: "请选择种类", trigger: "change" }],
|
||||
type: [
|
||||
{ required: true, message: "请选择标签类型", trigger: "change" },
|
||||
],
|
||||
dimension: [
|
||||
{ required: true, message: "请选择纬度", trigger: "change" },
|
||||
],
|
||||
tags: [{ required: true, message: "请选择标签", trigger: ["change","blur"] }]
|
||||
},
|
||||
dimensions: [],
|
||||
tagList: [],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
TagSelector,
|
||||
},
|
||||
methods: {
|
||||
// 请求种类下的纬度列表数据
|
||||
getTagDimensionsList() {
|
||||
this.tagList = [];
|
||||
API.getAnimeAllLatitude({
|
||||
type: this.form.type,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.dimensions = res.data.list || [];
|
||||
} else {
|
||||
this.dimensions = [];
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.dimensions = [];
|
||||
});
|
||||
},
|
||||
// 获取标签
|
||||
getTagList() {
|
||||
this.tagList = [];
|
||||
if (!this.form.type) {
|
||||
this.$message.error("请选择类型");
|
||||
return;
|
||||
}
|
||||
if (!this.form.dimension) {
|
||||
this.$message.error("请选择纬度");
|
||||
return;
|
||||
}
|
||||
const param = {
|
||||
type: this.form.type,
|
||||
kind: this.form.kind,
|
||||
dimension: this.form.dimension,
|
||||
};
|
||||
API.getMediaTagByKindDimension(param).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.tagList = res.data || [];
|
||||
}
|
||||
});
|
||||
},
|
||||
submitDate() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$confirm(`确定修改标签？`, "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(() => {
|
||||
this.flag = true;
|
||||
this.form.tags = this.form.tags.map(item => item.id);
|
||||
API.setMediaStatus(this.form)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "修改成功",
|
||||
type: "success",
|
||||
});
|
||||
this.handleClose();
|
||||
this.$emit("close");
|
||||
} else {
|
||||
this.$message.error("修改失败！");
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.flag = false;
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
handleClose() {
|
||||
this.flag = false;
|
||||
this.dialogVisible = false;
|
||||
this.form.type = "";
|
||||
this.form.kind = "";
|
||||
this.form.dimension = "";
|
||||
this.form.tags = [];
|
||||
this.form.ids = [];
|
||||
this.tagList = [];
|
||||
this.dimensions = [];
|
||||
this.$refs.form.resetFields();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,764 @@
|
||||
<template>
|
||||
<div class="tag-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-input
|
||||
v-model="params.name"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
size="small"
|
||||
class="param-input"
|
||||
style="width: 220px"
|
||||
></el-input>
|
||||
<el-select
|
||||
placeholder="请选择类型"
|
||||
clearable
|
||||
size="small"
|
||||
v-model="params.type"
|
||||
@change="getAllLatitude()"
|
||||
>
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in types"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
clearable
|
||||
size="small"
|
||||
v-model="params.kind"
|
||||
placeholder="请选择种类"
|
||||
>
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in kinds"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
placeholder="请选择纬度"
|
||||
clearable
|
||||
size="small"
|
||||
v-model="params.dimension"
|
||||
>
|
||||
<el-option
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
v-for="item in latitudes"
|
||||
:key="item.name"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
placeholder="请选择是否激活"
|
||||
clearable
|
||||
size="small"
|
||||
v-model="params.active"
|
||||
>
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in actives"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="el-icon-search"
|
||||
@click="getList('status')"
|
||||
style="margin-right: 20px"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="addAndEdit('add')"
|
||||
style="margin-right: 20px"
|
||||
>新增</el-button
|
||||
>
|
||||
</div>
|
||||
<!--数据表格-->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
border
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
height="600"
|
||||
>
|
||||
<el-table-column prop="id" label="ID" align="center" min-width="210">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.id || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称" align="center" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.name || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="类型" align="center" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
style="background-color: #ecf5ff;color: #409eff;border: 1px solid #d9ecff;"
|
||||
v-if="scope.row.type == 1"
|
||||
>动漫</el-tag
|
||||
>
|
||||
<el-tag type="success" v-else-if="scope.row.type == 2">漫画</el-tag>
|
||||
<el-tag type="danger" v-else-if="scope.row.type == 3"
|
||||
>文本小说</el-tag
|
||||
>
|
||||
<el-tag type="warning" v-else-if="scope.row.type == 4"
|
||||
>有声小说</el-tag
|
||||
>
|
||||
<el-tag type="info" v-else-if="scope.row.type == 5">短剧</el-tag>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="kind" label="种类" align="center" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
style="background-color: #ecf5ff;color: #409eff;border: 1px solid #d9ecff;"
|
||||
v-if="scope.row.kind === 1"
|
||||
>哩番</el-tag
|
||||
>
|
||||
<el-tag type="success" v-else-if="scope.row.kind === 2">3D</el-tag>
|
||||
<el-tag type="danger" v-else-if="scope.row.kind === 3"
|
||||
>同人动画</el-tag
|
||||
>
|
||||
<el-tag type="warning" v-else-if="scope.row.kind === 4"
|
||||
>单行本</el-tag
|
||||
>
|
||||
<el-tag type="info" v-else-if="scope.row.kind === 5">连载漫画</el-tag>
|
||||
<el-tag plain type="success" v-else-if="scope.row.kind === 6"
|
||||
>韩漫</el-tag
|
||||
>
|
||||
<el-tag plain type="danger" v-else-if="scope.row.kind === 7"
|
||||
>小说</el-tag
|
||||
>
|
||||
<el-tag plain type="info" v-else-if="scope.row.kind === 8"
|
||||
>剧场/短剧</el-tag
|
||||
>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="dimension" label="维度" align="center" width="240">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.dimension || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="active" label="是否激活" align="center" width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" v-if="scope.row.active">激活</el-tag>
|
||||
<el-tag v-else>未激活</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="isDiscovery"
|
||||
label="是否推荐发现"
|
||||
align="center"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" v-if="scope.row.isDiscovery">是</el-tag>
|
||||
<el-tag v-else>否</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sort" label="排序" align="center" width="80">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.sort || 0 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="updatedAct"
|
||||
label="操作人"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.updatedAct || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="updateTime"
|
||||
label="修改时间"
|
||||
align="center"
|
||||
min-width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ changeTime(scope.row.updateTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="createdAt"
|
||||
label="创建时间"
|
||||
align="center"
|
||||
min-width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ changeTime(scope.row.createdAt) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
min-width="280"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="success"
|
||||
icon="el-icon-edit"
|
||||
@click="addAndEdit(scope.row)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
@click="del(scope.row)"
|
||||
>删除</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="!scope.row.isDiscovery"
|
||||
type="warning"
|
||||
size="mini"
|
||||
@click="handelDiscovery('add', scope.row)"
|
||||
>推送推荐发现</el-button
|
||||
>
|
||||
<el-button
|
||||
v-else
|
||||
type="info"
|
||||
size="mini"
|
||||
@click="handelDiscovery('del', scope.row)"
|
||||
>移除推荐发现</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
:page-sizes="[10, 15, 20, 30]"
|
||||
:current-page="params.pageNumber"
|
||||
:page-size="params.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
@size-change="changeSize"
|
||||
@current-change="changeCurrent"
|
||||
></el-pagination>
|
||||
<!-- 新增、修改 -->
|
||||
<el-dialog
|
||||
:title="dialogTitle"
|
||||
:visible.sync="dialogVisible"
|
||||
width="560px"
|
||||
@before-close="handleClose"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form :model="form" label-width="100px" :rules="rules" ref="form">
|
||||
<el-form-item
|
||||
label="名称:"
|
||||
size="small"
|
||||
prop="name"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
size="small"
|
||||
label="类型:"
|
||||
prop="type"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-select
|
||||
@change="getAllLatitude()"
|
||||
v-model="form.type"
|
||||
placeholder="请选择类型"
|
||||
>
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in types"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
size="small"
|
||||
label="种类:"
|
||||
prop="kind"
|
||||
style="width: 480px"
|
||||
v-if="form.type"
|
||||
>
|
||||
<el-select
|
||||
v-model="form.kind"
|
||||
placeholder="请选择种类"
|
||||
v-if="form.type == 1"
|
||||
>
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in kinds1"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="form.kind"
|
||||
placeholder="请选择种类"
|
||||
v-else-if="form.type == 2"
|
||||
>
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in kinds2"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="form.kind"
|
||||
placeholder="请选择种类"
|
||||
v-else-if="form.type == 5"
|
||||
>
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in kinds4"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="form.kind" placeholder="请选择种类" v-else>
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in kinds3"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="维度:"
|
||||
size="small"
|
||||
prop="dimension"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-select v-model="form.dimension">
|
||||
<el-option
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
v-for="item in latitudes"
|
||||
:key="item.name"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
size="small"
|
||||
label="排序:"
|
||||
prop="sort"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-input v-model.number="form.sort"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
size="small"
|
||||
label="是否激活:"
|
||||
prop="active"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-select v-model="form.active" placeholder="请选择是否激活">
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in actives"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose" size="small">取 消</el-button>
|
||||
<el-button type="primary" size="small" @click="onSubmit()"
|
||||
>确 定</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import { uniteDate } from "@/utils/validator.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 表格数据加载动画
|
||||
loading: false,
|
||||
// 列表数据
|
||||
tableData: [],
|
||||
total: 0,
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
active: undefined, // 是否激活
|
||||
dimension: undefined, // 纬度
|
||||
name: undefined, // 名称
|
||||
type: undefined, // 类型
|
||||
kind: undefined, // 种类
|
||||
},
|
||||
rules: {
|
||||
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
||||
},
|
||||
actives: [
|
||||
{
|
||||
label: "是",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
label: "否",
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
types: [
|
||||
{
|
||||
label: "动漫",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "漫画",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "文本小说",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
label: "有声小说",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
label: "短剧",
|
||||
value: 5,
|
||||
},
|
||||
],
|
||||
kinds: [
|
||||
{
|
||||
label: "哩番",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "3D",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "同人动画",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
label: "单行本",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
label: "连载漫画",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
label: "韩漫",
|
||||
value: 6,
|
||||
},
|
||||
{
|
||||
label: "文本小说",
|
||||
value: 7,
|
||||
},
|
||||
{
|
||||
label: "有声小说",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
label: "剧场/短剧",
|
||||
value: 9,
|
||||
},
|
||||
],
|
||||
kinds1: [
|
||||
{
|
||||
label: "哩番",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "3D",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "同人动画",
|
||||
value: 3,
|
||||
},
|
||||
],
|
||||
kinds2: [
|
||||
{
|
||||
label: "单行本",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
label: "连载漫画",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
label: "韩漫",
|
||||
value: 6,
|
||||
},
|
||||
],
|
||||
kinds3: [
|
||||
{
|
||||
label: "小说",
|
||||
value: 7,
|
||||
},
|
||||
],
|
||||
kinds4: [
|
||||
{
|
||||
label: "剧场/短剧",
|
||||
value: 8,
|
||||
},
|
||||
],
|
||||
latitudes: [], // 纬度数组
|
||||
dialogTitle: "",
|
||||
dialogVisible: false,
|
||||
form: {
|
||||
id: undefined,
|
||||
name: undefined, // 名称
|
||||
dimension: undefined, // 维度
|
||||
sort: 0, // 排序
|
||||
type: 1, // 类型 1动漫 2漫画 3小说 4cos 5禁播)
|
||||
active: true, // 是否激活
|
||||
kind: undefined, // 种类
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
getAllLatitude() {
|
||||
API.getAnimeAllLatitude({
|
||||
type: this.form.type,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.latitudes = res.data.list || [];
|
||||
} else {
|
||||
this.latitudes = [];
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
getList(type) {
|
||||
if (type === "status") {
|
||||
this.params.pageNumber = 1;
|
||||
}
|
||||
API.getAnimeTagList(this.params)
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.tableData = res.data.list;
|
||||
this.total = res.data.total;
|
||||
} else {
|
||||
this.tableData = [];
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 新增播单
|
||||
addAndEdit(param) {
|
||||
if (param === "add") {
|
||||
this.dialogTitle = "新增";
|
||||
} else {
|
||||
this.dialogTitle = "编辑";
|
||||
// 把数据回显给表单
|
||||
this.form.id = param.id;
|
||||
this.form.name = param.name;
|
||||
this.form.dimension = param.dimension;
|
||||
this.form.sort = param.sort;
|
||||
this.form.type = param.type;
|
||||
this.form.active = param.active;
|
||||
this.form.kind = param.kind;
|
||||
}
|
||||
this.getAllLatitude();
|
||||
this.dialogVisible = true; // 打开新增、编辑对话框
|
||||
},
|
||||
// 新增、修改提交
|
||||
onSubmit() {
|
||||
if (this.dialogTitle === "新增") {
|
||||
this.add();
|
||||
} else {
|
||||
this.edit();
|
||||
}
|
||||
},
|
||||
// 新增方法
|
||||
add() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
API.addAnimeTag(this.form).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "新增成功",
|
||||
});
|
||||
this.handleClose();
|
||||
this.getList();
|
||||
} else {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "新增失败",
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 修改方法
|
||||
edit() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
API.updateAnimeTag(this.form).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "编辑成功",
|
||||
});
|
||||
this.handleClose();
|
||||
this.getList();
|
||||
} else {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "编辑失败",
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
del(param) {
|
||||
this.$confirm(
|
||||
`确认是否删除<span style='color:blue'>${param.name}</span>, 是否继续?`,
|
||||
"提示",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
dangerouslyUseHTMLString: true,
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
let delData = {
|
||||
id: param.id,
|
||||
};
|
||||
API.delAnimeTag(delData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "删除成功!",
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "删除失败!",
|
||||
});
|
||||
}
|
||||
this.getList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消删除",
|
||||
});
|
||||
});
|
||||
},
|
||||
handelDiscovery(type, row) {
|
||||
let req = {
|
||||
isDiscovery: false,
|
||||
id: row.id,
|
||||
};
|
||||
if (type === "add") {
|
||||
req.isDiscovery = true;
|
||||
}
|
||||
API.updateAnimeTag(req)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "操作成功",
|
||||
type: "success",
|
||||
});
|
||||
this.getList();
|
||||
} else {
|
||||
this.$message.error("操作失败");
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
// 关闭窗口清除数据
|
||||
handleClose() {
|
||||
this.form.id = undefined;
|
||||
this.form.name = undefined;
|
||||
this.form.dimension = undefined;
|
||||
this.form.sort = 0;
|
||||
this.form.type = 1;
|
||||
this.form.active = true;
|
||||
this.form.kind = undefined;
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
// 分页条数改变回调
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.getList();
|
||||
},
|
||||
// 分页页码改变回调
|
||||
changeCurrent(pageNumber) {
|
||||
this.params.pageNumber = pageNumber;
|
||||
this.getList();
|
||||
},
|
||||
// 更换时间格式
|
||||
changeTime(time) {
|
||||
return uniteDate(time);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.dialog-footer {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
}
|
||||
/deep/ .el-form-item__content {
|
||||
display: flex;
|
||||
}
|
||||
/deep/ .el-select {
|
||||
width: 100%;
|
||||
}
|
||||
/deep/ .el-date-editor.el-input,
|
||||
.el-date-editor.el-input__inner {
|
||||
width: 100%;
|
||||
}
|
||||
/deep/ .el-upload-list--picture-card .el-upload-list__item {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
/deep/ .el-upload--picture-card {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
line-height: 130px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,890 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="添加任务"
|
||||
:visible.sync="isShow"
|
||||
width="1200px"
|
||||
center
|
||||
@close="$emit('close')"
|
||||
:show-close="false"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div class="add-video-warp-box">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<div class="flex-item">
|
||||
<el-form-item label="上传类型:" prop="mediaType">
|
||||
<el-select
|
||||
@change="handleType()"
|
||||
v-model="form.mediaType"
|
||||
size="small"
|
||||
placeholder="请选择上传类型"
|
||||
clearable
|
||||
>
|
||||
<el-option value="video" label="视频"></el-option>
|
||||
<el-option value="image" label="漫画"></el-option>
|
||||
<el-option value="text" label="小说"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select
|
||||
@change="getTagDimensionsList()"
|
||||
v-model="form.type"
|
||||
placeholder="请选择类型"
|
||||
size="small"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="k in types"
|
||||
:key="k.value"
|
||||
:label="k.label"
|
||||
:value="k.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="维度" prop="dimension">
|
||||
<el-select
|
||||
@change="getTagList"
|
||||
v-model="form.dimension"
|
||||
placeholder="请选择维度"
|
||||
size="small"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="k in dimensions"
|
||||
:key="k.id"
|
||||
:label="k.name"
|
||||
:value="k.name"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="排版方向:" prop="direction">
|
||||
<el-select
|
||||
v-model="form.direction"
|
||||
size="small"
|
||||
placeholder="请选择排版方向"
|
||||
clearable
|
||||
>
|
||||
<el-option :value="0" label="横"></el-option>
|
||||
<el-option :value="1" label="竖"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<el-form-item label="售卖类型:" prop="sellType">
|
||||
<el-select
|
||||
v-if="form.mediaType === 'video'"
|
||||
v-model="form.sellType"
|
||||
size="small"
|
||||
placeholder="请选择售卖类型"
|
||||
clearable
|
||||
>
|
||||
<el-option :value="0" label="单集"></el-option>
|
||||
<el-option :value="1" label="整部"></el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-else
|
||||
:disabled="true"
|
||||
v-model="form.sellType"
|
||||
size="small"
|
||||
placeholder="请选择售卖类型"
|
||||
clearable
|
||||
>
|
||||
<el-option :value="0" label="单集"></el-option>
|
||||
<el-option :value="1" label="整部"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否激活:" prop="isActive">
|
||||
<el-select
|
||||
v-if="form.mediaType !== 'video'"
|
||||
v-model="form.isActive"
|
||||
size="small"
|
||||
placeholder="请选择是否激活"
|
||||
clearable
|
||||
>
|
||||
<el-option :value="true" label="是"></el-option>
|
||||
<el-option :value="false" label="否"></el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-else
|
||||
:disabled="true"
|
||||
v-model="form.isActive"
|
||||
size="small"
|
||||
placeholder="请选择是否激活"
|
||||
clearable
|
||||
>
|
||||
<el-option :value="true" label="是"></el-option>
|
||||
<el-option :value="false" label="否"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="收费类型:" prop="listenPermission">
|
||||
<el-select
|
||||
v-model="form.listenPermission"
|
||||
size="small"
|
||||
placeholder="请选择收费类型"
|
||||
clearable
|
||||
>
|
||||
<el-option :value="0" label="会员"></el-option>
|
||||
<el-option :value="1" label="金币"></el-option>
|
||||
<el-option :value="2" label="免费"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="更新状态" prop="dimension">
|
||||
<el-select
|
||||
@change="changeUpdateSta"
|
||||
v-model="form.updateStatus"
|
||||
placeholder="请选择状态"
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
v-for="k in updateTypes"
|
||||
:key="k.value"
|
||||
:label="k.label"
|
||||
:value="k.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div
|
||||
class="flex-item"
|
||||
v-if="form.mediaType === 'video' || form.mediaType === 'video_adv'"
|
||||
>
|
||||
<el-form-item label="上传视频:">
|
||||
<input
|
||||
type="file"
|
||||
@change="changeFile"
|
||||
accept="video/*"
|
||||
id="inputFile"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="横版封面上传:" prop="horizontalCover">
|
||||
<base-upload
|
||||
:cover="form.horizontalCover"
|
||||
:action="action"
|
||||
@successCallback="successCallbackHeng"
|
||||
:id="form.sourceID"
|
||||
:wSize="640"
|
||||
:hSize="360"
|
||||
:width="'213px'"
|
||||
:height="'120px'"
|
||||
></base-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="竖版封面上传:" prop="verticalCover">
|
||||
<base-upload
|
||||
:cover="form.verticalCover"
|
||||
:action="action"
|
||||
@successCallback="successCallbackShu"
|
||||
:id="form.sourceID"
|
||||
:wSize="360"
|
||||
:hSize="640"
|
||||
:width="'120px'"
|
||||
:height="'213px'"
|
||||
></base-upload>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="flex-item" v-if="form.mediaType === 'text'">
|
||||
<el-form-item label="小说类型" prop="mediaSubType">
|
||||
<el-select
|
||||
v-model="form.mediaSubType"
|
||||
placeholder="请选择小说类型"
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
v-for="k in mediaSubTypes"
|
||||
:key="k.value"
|
||||
:label="k.label"
|
||||
:value="k.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="作者:">
|
||||
<el-input
|
||||
type="text"
|
||||
placeholder="请输入作者"
|
||||
v-model="form.author"
|
||||
size="small"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="背景颜色" prop="style">
|
||||
<el-select
|
||||
v-model="form.style"
|
||||
placeholder="请选择背景颜色"
|
||||
size="small"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="k in styles"
|
||||
:key="k.value"
|
||||
:label="k.label"
|
||||
:value="k.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="背景色预览:">
|
||||
<div
|
||||
class="previewColorBox"
|
||||
:class="{
|
||||
color1: form.style == 1,
|
||||
color2: form.style == 2,
|
||||
color3: form.style == 3,
|
||||
color4: form.style == 4,
|
||||
color5: form.style == 5,
|
||||
color6: form.style == 6,
|
||||
color7: form.style == 7,
|
||||
color8: form.style == 8,
|
||||
color9: form.style == 9,
|
||||
color10: form.style == 10,
|
||||
}"
|
||||
></div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<el-form-item
|
||||
style="width: 1100px"
|
||||
label="上传图集:"
|
||||
prop="cover"
|
||||
v-if="form.mediaType === 'image'"
|
||||
>
|
||||
<!--上传图集-->
|
||||
<imgs-upload
|
||||
:cover="form.cover"
|
||||
:action="actionPics"
|
||||
@successCallback="successCallbackPic"
|
||||
:id="form.sourceID"
|
||||
:wSize="180"
|
||||
:hSize="320"
|
||||
:width="'100px'"
|
||||
:height="'100px'"
|
||||
ref="uploadImgs"
|
||||
></imgs-upload>
|
||||
</el-form-item>
|
||||
<!--小说音频上传-->
|
||||
<el-upload
|
||||
accept="audio/mp3"
|
||||
class="upload-demo"
|
||||
:action="actionAudio"
|
||||
:headers="header"
|
||||
:on-success="handleTrialChange"
|
||||
:file-list="fileList"
|
||||
:limit="1"
|
||||
v-if="form.mediaType === 'text' && form.mediaSubType == 1"
|
||||
>
|
||||
<el-button size="small" type="success" class="uploadMp3"
|
||||
>点击上传</el-button
|
||||
>
|
||||
</el-upload>
|
||||
<el-form-item
|
||||
style="width: 400px"
|
||||
label="小说内容:"
|
||||
prop="cover"
|
||||
v-if="form.mediaType === 'text'"
|
||||
>
|
||||
<!--小说-->
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="10"
|
||||
placeholder="请输入小说内容"
|
||||
v-model="form.text"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="横版封面上传:"
|
||||
prop="horizontalCover"
|
||||
v-if="form.mediaType === 'image' || form.mediaType === 'text'"
|
||||
>
|
||||
<base-upload
|
||||
:cover="form.horizontalCover"
|
||||
:action="action"
|
||||
@successCallback="successCallbackHeng"
|
||||
:id="form.sourceID"
|
||||
:wSize="640"
|
||||
:hSize="360"
|
||||
:width="'213px'"
|
||||
:height="'120px'"
|
||||
></base-upload>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="竖版封面上传:"
|
||||
prop="verticalCover"
|
||||
v-if="form.mediaType === 'image' || form.mediaType === 'text'"
|
||||
>
|
||||
<base-upload
|
||||
:cover="form.verticalCover"
|
||||
:action="action"
|
||||
@successCallback="successCallbackShu"
|
||||
:id="form.sourceID"
|
||||
:wSize="360"
|
||||
:hSize="640"
|
||||
:width="'120px'"
|
||||
:height="'213px'"
|
||||
></base-upload>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item
|
||||
label="更新描述:"
|
||||
class="updatedDesc"
|
||||
v-if="form.updateStatus != 0"
|
||||
>
|
||||
<el-input
|
||||
type="text"
|
||||
placeholder="请输入更新描述"
|
||||
v-model="form.updatedDesc"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<div class="flex-item" v-if="form.listenPermission === 1">
|
||||
<el-form-item label="帖子定价:" prop="coins">
|
||||
<el-input v-model.number="form.coins" size="small"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<el-form-item label="种类" prop="kind">
|
||||
<el-select
|
||||
v-model="form.kind"
|
||||
placeholder="请选择种类"
|
||||
size="small"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="k in kinds"
|
||||
:key="k.value"
|
||||
:label="k.label"
|
||||
:value="k.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="总集数:" prop="totalEpisode">
|
||||
<el-input
|
||||
v-model.number="form.totalEpisode"
|
||||
size="small"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="集数:" prop="episodeNumber">
|
||||
<el-input
|
||||
:disabled="true"
|
||||
v-model.number="form.episodeNumber"
|
||||
size="small"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="集数名:" prop="episodeNumberName">
|
||||
<el-input v-model="form.episodeNumberName" size="small"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<el-form-item label="标题:">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入标题"
|
||||
v-model="form.title"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="简介:">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入媒体简介"
|
||||
v-model="form.summary"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<el-form-item label="标签:" prop="tag">
|
||||
<tag-selector v-model="tag" :tagList="tagList"></tag-selector>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="small" @click="submitDate"
|
||||
>立即添加</el-button
|
||||
>
|
||||
<el-button size="small" @click="cancel">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { validatorIndex } from "@/utils/validator";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import local from "@/utils/localStroage";
|
||||
import API from "@/api";
|
||||
import TagSelector from "@/components/mediaTagSelector";
|
||||
export default {
|
||||
props: ["isShow"],
|
||||
data() {
|
||||
return {
|
||||
SeriesCover: [],
|
||||
trackId: "",
|
||||
show: false,
|
||||
// 封面上传地址
|
||||
action: baseConfig.baseServerUrl + "/vid/uploadStatic",
|
||||
//图集上传
|
||||
actionPics: baseConfig.baseServerUrl + "/vid/uploadStaticBatch",
|
||||
// 音频上传地址
|
||||
actionAudio: baseConfig.baseServerUrl + "/vid/upload/audio",
|
||||
// 视频播放地址
|
||||
videoBaseUrl: baseConfig.playVideoUrl,
|
||||
header: {
|
||||
Authorization: local.get("userInfo").token,
|
||||
},
|
||||
isFree: true,
|
||||
flag: false,
|
||||
player: "",
|
||||
files: null,
|
||||
tag: [],
|
||||
// 表单数据
|
||||
form: {
|
||||
title: "",
|
||||
author: "",
|
||||
mediaType: "", //上传文件类型
|
||||
horizontalCover: "",
|
||||
verticalCover: "",
|
||||
tags: [],
|
||||
summary: "",
|
||||
totalEpisode: undefined,
|
||||
episodeNumber: 1,
|
||||
episodeNumberName: "",
|
||||
kind: undefined,
|
||||
dimension: undefined,
|
||||
price: 0,
|
||||
direction: 0,
|
||||
sellType: undefined,
|
||||
isActive: false,
|
||||
text: "", //小说专用
|
||||
mediaSubType: undefined, // 0-默认文本小说 1-有声小说
|
||||
sourceID: "",
|
||||
filename: "",
|
||||
resolution: "",
|
||||
md5: "",
|
||||
seriesCover: [],
|
||||
listenPermission: 0,
|
||||
updateStatus: 1,
|
||||
updatedDesc: undefined,
|
||||
},
|
||||
dimensions: [],
|
||||
fileList: [],
|
||||
tagList: [], //标签列表：包含标签名称和标签id
|
||||
mediaSubTypes: [
|
||||
{ label: "文本小说", value: 0 },
|
||||
{ label: "有声小说", value: 1 },
|
||||
],
|
||||
updateTypes: [
|
||||
{ label: "更新中", value: 1 },
|
||||
{ label: "已完结", value: 2 },
|
||||
],
|
||||
types: [
|
||||
{
|
||||
label: "动漫",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "漫画",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "小说",
|
||||
value: 3,
|
||||
},
|
||||
],
|
||||
kinds: [
|
||||
{ label: "哩番", value: 1 },
|
||||
{ label: "3D", value: 2 },
|
||||
{ label: "同人动画", value: 3 },
|
||||
{ label: "单行本", value: 4 },
|
||||
{ label: "连载漫画", value: 5 },
|
||||
{ label: "韩漫", value: 6 },
|
||||
{ label: "有声小说", value: 7 },
|
||||
{ label: "剧场/短剧", value: 8 },
|
||||
],
|
||||
styles: [
|
||||
{ label: "酱色", value: 1 },
|
||||
{ label: "黛紫", value: 2 },
|
||||
{ label: "紺青", value: 3 },
|
||||
{ label: "砺茶", value: 4 },
|
||||
{ label: "黛绿", value: 5 },
|
||||
{ label: "胭脂", value: 6 },
|
||||
{ label: "桔梗", value: 7 },
|
||||
{ label: "海涛", value: 8 },
|
||||
{ label: "土豪", value: 9 },
|
||||
{ label: "绿铜", value: 10 },
|
||||
],
|
||||
rules: {
|
||||
title: [{ required: true, message: "请输入标题", trigger: "blur" }],
|
||||
mediaType: [
|
||||
{ required: true, message: "请选择上传类型", trigger: "blur" },
|
||||
],
|
||||
kind: [{ required: true, message: "请选择种类", trigger: "blur" }],
|
||||
direction: [
|
||||
{ required: true, message: "请选择排版方向", trigger: "blur" },
|
||||
],
|
||||
sellType: [
|
||||
{ required: true, message: "请选择售卖类型", trigger: "blur" },
|
||||
],
|
||||
totalEpisode: [
|
||||
{ required: true, message: "请输入总集数", trigger: "blur" },
|
||||
{ validator: validatorIndex, trigger: "blur" },
|
||||
],
|
||||
episodeNumber: [
|
||||
{ required: true, message: "请输入集数", trigger: "blur" },
|
||||
{ validator: validatorIndex, trigger: "blur" },
|
||||
],
|
||||
episodeNumberName: [
|
||||
{ required: true, message: "请输入集数名", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
TagSelector,
|
||||
},
|
||||
// created() {
|
||||
// console.log(213123)
|
||||
// },
|
||||
methods: {
|
||||
changeUpdateSta() {
|
||||
if (this.form.updateStatus == 1) {
|
||||
this.form.updatedDesc = "更新至X话";
|
||||
} else if (this.form.updateStatus == 2) {
|
||||
this.form.updatedDesc = "已完结X话";
|
||||
} else {
|
||||
this.form.updatedDesc = undefined;
|
||||
}
|
||||
},
|
||||
changeFile(event) {
|
||||
let files = event.target.files[0];
|
||||
this.files = files;
|
||||
},
|
||||
cancel() {
|
||||
this.cleanForm();
|
||||
this.$emit("close");
|
||||
},
|
||||
handleType() {
|
||||
if (this.form.mediaType === "video") {
|
||||
this.form.sellType = 0;
|
||||
} else {
|
||||
this.form.sellType = 1;
|
||||
}
|
||||
},
|
||||
getTagList() {
|
||||
this.tagList = [];
|
||||
if (this.form.type === undefined) {
|
||||
this.$message.error("请选择类型");
|
||||
return;
|
||||
}
|
||||
if (this.form.dimension === undefined || this.form.dimension === "") {
|
||||
this.$message.error("请选择维度");
|
||||
return;
|
||||
}
|
||||
const param = {
|
||||
kind: this.form.kind,
|
||||
dimension: this.form.dimension,
|
||||
};
|
||||
API.getMediaTagByKindDimension(param).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.tagList = res.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 请求种类下的维度列表数据
|
||||
getTagDimensionsList() {
|
||||
this.tagList = [];
|
||||
API.getAnimeAllLatitude({
|
||||
type: this.form.kind,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.dimensions = res.data.list || [];
|
||||
} else {
|
||||
this.dimensions = [];
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.dimensions = [];
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 处理音频
|
||||
handleTrialChange(res) {
|
||||
if (res.data.code === 200) {
|
||||
this.form.audioUrl = res.data.data.fileName;
|
||||
} else {
|
||||
this.fileList = [];
|
||||
}
|
||||
},
|
||||
// 提交验证
|
||||
submitDate() {
|
||||
if (this.tag.length <= 0 && this.form.mediaType != "text") {
|
||||
this.$message.error("请选择标签");
|
||||
return false;
|
||||
}
|
||||
for (const t of this.tag) {
|
||||
this.form.tags.push(t.id);
|
||||
}
|
||||
if (this.form.mediaType === "video" && !this.files) {
|
||||
this.$message.error("请选择视频");
|
||||
return false;
|
||||
}
|
||||
if (this.form.mediaType === "text" && !this.form.mediaSubType) {
|
||||
this.$message.error("请选择小说类型");
|
||||
return false;
|
||||
}
|
||||
if (this.form.mediaSubType == 1 && !this.form.audioUrl) {
|
||||
this.$message.error("有声小说请上传音频");
|
||||
return false;
|
||||
}
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
let data = {
|
||||
files: this.files || null,
|
||||
form: { ...this.form },
|
||||
time: new Date().getTime(),
|
||||
};
|
||||
this.$emit("addTaskSuccess", data);
|
||||
this.$emit("close");
|
||||
this.cleanForm();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
cleanForm() {
|
||||
this.files = null;
|
||||
let dom = document.querySelector("#inputFile");
|
||||
if (dom) {
|
||||
dom.value = "";
|
||||
}
|
||||
|
||||
// this.form = {
|
||||
// title: "",
|
||||
// mediaType: "", //上传文件类型
|
||||
// horizontalCover: "",
|
||||
// verticalCover: "",
|
||||
// tags: [],
|
||||
// summary: "",
|
||||
// totalEpisode: undefined,
|
||||
// episodeNumber: 1,
|
||||
// episodeNumberName: "",
|
||||
// kind: undefined,
|
||||
// dimension: undefined,
|
||||
// price: 0,
|
||||
// direction: 0,
|
||||
// sellType: undefined,
|
||||
// isActive: false,
|
||||
// text: "",//小说专用
|
||||
// sourceID: "",
|
||||
// filename: "",
|
||||
// resolution: "",
|
||||
// md5: "",
|
||||
// seriesCover: [],
|
||||
// listenPermission: 0,
|
||||
// updatedDesc: undefined,
|
||||
// updateStatus: 0,
|
||||
// };
|
||||
|
||||
this.form.title = "";
|
||||
this.form.horizontalCover = "";
|
||||
this.form.verticalCover = "";
|
||||
this.form.tags = [];
|
||||
this.form.summary = "";
|
||||
this.form.author = "";
|
||||
this.form.totalEpisode = undefined;
|
||||
this.form.episodeNumber = 1;
|
||||
this.form.episodeNumberName = "";
|
||||
this.form.price = 0;
|
||||
// this.form.sellType = undefined;
|
||||
this.form.isActive = false;
|
||||
this.form.text = ""; //小说专用
|
||||
this.form.sourceID = "";
|
||||
this.form.filename = "";
|
||||
this.form.resolution = "";
|
||||
this.form.md5 = "";
|
||||
this.form.seriesCover = [];
|
||||
this.form.listenPermission = 0;
|
||||
this.form.updateStatus = 1;
|
||||
this.form.updatedDesc = undefined;
|
||||
this.form.cover = [];
|
||||
this.form.mediaSubType = undefined;
|
||||
if (this.$refs.uploadImgs) {
|
||||
this.$refs.uploadImgs.clearImg();
|
||||
}
|
||||
// this.$refs.uploadImgs.clearImg();
|
||||
// console.log(this.$refs.uploadImgs)
|
||||
|
||||
// this.tagList = [];
|
||||
// this.tag = [];
|
||||
},
|
||||
// 封面图上传成功回调
|
||||
successCallbackHeng(res) {
|
||||
this.form.horizontalCover = res.data.coverImg;
|
||||
},
|
||||
successCallbackShu(res) {
|
||||
this.form.verticalCover = res.data.coverImg;
|
||||
},
|
||||
// 封面图上传成功回调
|
||||
successCallbackPic(seriesCover) {
|
||||
this.form.seriesCover = seriesCover;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add-video-warp-box {
|
||||
/deep/ .el-form-item__content {
|
||||
display: flex;
|
||||
}
|
||||
.flex-item {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.el-upload .el-upload--picture-card {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.el-textarea {
|
||||
width: 500px;
|
||||
}
|
||||
.el-input {
|
||||
width: 250px;
|
||||
}
|
||||
.uploader-drop {
|
||||
background: none;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
.uploader-file {
|
||||
border-bottom: 1px dashed #ccc;
|
||||
}
|
||||
.uploader-btn {
|
||||
background: #e63765;
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
font-size: 13px;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
&:hover {
|
||||
background: #eb5f84;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
overflow: hidden;
|
||||
color: #666;
|
||||
margin-bottom: 15px;
|
||||
cursor: pointer;
|
||||
i {
|
||||
&:hover {
|
||||
color: #e63765;
|
||||
}
|
||||
}
|
||||
span {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.upload-video {
|
||||
width: 300px !important;
|
||||
.circle-bar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
.el-progress-circle {
|
||||
margin: 0 auto;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
.video-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.avatar-uploader {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
border: 1px dashed #e63765;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
&:hover {
|
||||
color: 1px dashed #e63765 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.show {
|
||||
left: 20px;
|
||||
transition: left 0.2s linear;
|
||||
}
|
||||
.upload-demo {
|
||||
display: flex;
|
||||
margin: 5px 0 0 50px;
|
||||
}
|
||||
// .uploadMp3 {
|
||||
// margin-right: 20px;
|
||||
// }
|
||||
.previewColorBox {
|
||||
height: 30px;
|
||||
width: 70px;
|
||||
}
|
||||
.color1 {
|
||||
background: rgb(108, 21, 6);
|
||||
}
|
||||
.color2 {
|
||||
background: rgb(60, 46, 70);
|
||||
}
|
||||
.color3 {
|
||||
background: rgb(15, 51, 90);
|
||||
}
|
||||
.color4 {
|
||||
background: rgb(119, 78, 67);
|
||||
}
|
||||
.color5 {
|
||||
background: rgb(56, 97, 102);
|
||||
}
|
||||
.color6 {
|
||||
background: rgb(156, 45, 61);
|
||||
}
|
||||
.color7 {
|
||||
background: rgb(133, 60, 131);
|
||||
}
|
||||
.color8 {
|
||||
background: rgb(0, 85, 151);
|
||||
}
|
||||
.color9 {
|
||||
background: rgb(198, 143, 84);
|
||||
}
|
||||
.color10 {
|
||||
background: rgb(74, 150, 136);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,458 @@
|
||||
<template>
|
||||
<div class="movie_warp">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="isShow = true"
|
||||
class="taskBtn"
|
||||
>新增任务</el-button
|
||||
>
|
||||
<div class="movide_box">
|
||||
<div class="left">
|
||||
<h3>上传媒体列表</h3>
|
||||
<!--视频分片上传-->
|
||||
<uploader
|
||||
:options="options"
|
||||
:fileStatusText="fileStatusText"
|
||||
class="uploader-example"
|
||||
ref="uploader"
|
||||
@file-added="fileAdd"
|
||||
@file-success="onFileSuccess"
|
||||
>
|
||||
<uploader-unsupport></uploader-unsupport>
|
||||
<uploader-list class="upload_list" style="height: 600px">
|
||||
<div class="file-panel" slot-scope="props">
|
||||
<ul class="file-list">
|
||||
<li v-for="file in props.fileList" :key="file.id">
|
||||
<uploader-file
|
||||
:class="'file_' + file.id"
|
||||
ref="files"
|
||||
:file="file"
|
||||
:list="true"
|
||||
></uploader-file>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</uploader-list>
|
||||
</uploader>
|
||||
</div>
|
||||
<div class="right">
|
||||
<h3>任务上传列表</h3>
|
||||
<div class="right_content">
|
||||
<el-table :data="taskList" style="width: 100%" stripe>
|
||||
<el-table-column prop="type" label="类型" width="90" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
v-if="scope.row.form && scope.row.form.mediaType === 'video'"
|
||||
>
|
||||
视频
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="
|
||||
scope.row.form && scope.row.form.mediaType === 'video_adv'
|
||||
"
|
||||
>
|
||||
视频广告
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="scope.row.form && scope.row.form.mediaType === 'image'"
|
||||
>
|
||||
漫画
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="scope.row.form && scope.row.form.mediaType === 'text'"
|
||||
>
|
||||
小说
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="title"
|
||||
label="标题"
|
||||
min-width="180"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ (scope.row.form && scope.row.form.title) || "未知" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="size"
|
||||
label="文件大小"
|
||||
width="90"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{
|
||||
(scope.row.files && getSize(scope.row.files.size)) ||
|
||||
(scope.row.form.size && getSize(scope.row.form.size)) ||
|
||||
""
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="status"
|
||||
label="状态"
|
||||
width="120"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="info" v-if="scope.row.status == 'wait'"
|
||||
>等待上传</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="warning"
|
||||
v-else-if="scope.row.status == 'video_uploaded'"
|
||||
>视频上传中</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="warning"
|
||||
v-else-if="scope.row.status == 'video_success'"
|
||||
>视频上传完成</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="warning"
|
||||
v-else-if="scope.row.status == 'img_success'"
|
||||
>图集上传完成</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="warning"
|
||||
v-else-if="scope.row.status == 'text_success'"
|
||||
>小说上传完成</el-tag
|
||||
>
|
||||
<el-tag type="success" v-else-if="scope.row.status == 'success'"
|
||||
>上传成功</el-tag
|
||||
>
|
||||
<el-tag type="error" v-else-if="scope.row.status == 'error'"
|
||||
>上传失败</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="error"
|
||||
v-else-if="scope.row.status == 'error_post'"
|
||||
>提交失败</el-tag
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
label="操作"
|
||||
align="center"
|
||||
width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="deleteTask(scope.$index)"
|
||||
type="text"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
<el-button
|
||||
type="text"
|
||||
v-if="scope.row.status == 'error_post'"
|
||||
@click="rest(scope.row, scope.$index)"
|
||||
size="small"
|
||||
>重试</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<addVideo
|
||||
v-show="isShow"
|
||||
:isShow="isShow"
|
||||
@close="isShow = false"
|
||||
@addTaskSuccess="addTaskSuccess"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import local from "@/utils/localStroage.js";
|
||||
import addVideo from "./addMedia.vue";
|
||||
import API from "@/api";
|
||||
import SparkMD5 from "spark-md5";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
addVideo,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
trackId: "",
|
||||
isUploading: false, //是否正在上传
|
||||
fileStatusText: {
|
||||
success: "上传成功",
|
||||
error: "上传失败",
|
||||
uploading: "正在上传",
|
||||
paused: "暂停上传",
|
||||
waiting: "等待上传",
|
||||
},
|
||||
attrs: {
|
||||
accept: [
|
||||
".mp4",
|
||||
".qlv",
|
||||
".qsv",
|
||||
".ogg",
|
||||
".flv",
|
||||
".avi",
|
||||
".wmv",
|
||||
".rmvb",
|
||||
], //接受文件类型
|
||||
},
|
||||
taskList: [],
|
||||
fileList: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
options() {
|
||||
return {
|
||||
target: baseConfig.baseServerUrl + "/vid/uploadDotStream", //上传地址
|
||||
testChunks: false, //是否开启服务器分片校验
|
||||
method: "application/json",
|
||||
headers: {
|
||||
// 额外请求头
|
||||
Authorization: local.get("userInfo")
|
||||
? local.get("userInfo").token
|
||||
: "",
|
||||
},
|
||||
fileParameterName: "upload", //文件名参数，默认为file
|
||||
query: this.uploadQuery, //额外参数
|
||||
singleFile: false, //单文件上传
|
||||
chunkSize: 2048000, //分片大小，默认1M
|
||||
simultaneousUploads: 6,
|
||||
maxChunkRetries: 9, //失败重试次数
|
||||
// 把英文时间转成中文
|
||||
parseTimeRemaining: function(timeRemaining, parsedTimeRemaining) {
|
||||
return parsedTimeRemaining
|
||||
.replace(/\syears?/, "年")
|
||||
.replace(/\days?/, "天")
|
||||
.replace(/\shours?/, "小时")
|
||||
.replace(/\sminutes?/, "分钟")
|
||||
.replace(/\sseconds?/, "秒");
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
deleteTask(index) {
|
||||
this.taskList.splice(index, 1);
|
||||
},
|
||||
async rest(row, index) {
|
||||
let from = row.form;
|
||||
let res = await API.uploadMedia(from);
|
||||
if (res.code === 200) {
|
||||
this.taskList[index].status = "success";
|
||||
return;
|
||||
}
|
||||
this.taskList[index].status = "error_post";
|
||||
},
|
||||
// 获取文件大小
|
||||
getSize(byte) {
|
||||
let MB = (byte / 1024 / 1024).toFixed(2);
|
||||
return MB + "M" || "未知";
|
||||
},
|
||||
addTaskSuccess(info) {
|
||||
let repeatFile = this.taskList.filter((file) => {
|
||||
return info.files && info.files.name == file.filename;
|
||||
});
|
||||
if (repeatFile.length) {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "视频名重复,添加失败",
|
||||
});
|
||||
return;
|
||||
}
|
||||
info.status = "wait";
|
||||
console.log("-------");
|
||||
console.log(info);
|
||||
console.log("-------");
|
||||
if (info.files) {
|
||||
info.filename = info.files.name;
|
||||
this.$refs.uploader.uploader.addFile(info.files);
|
||||
this.taskList.push(info);
|
||||
} else if (info.form.text) {
|
||||
//小说上传完成
|
||||
info.status = "text_success";
|
||||
this.taskList.push(info);
|
||||
this.uploadPost();
|
||||
} else {
|
||||
//图集上传完成
|
||||
info.status = "img_success";
|
||||
this.taskList.push(info);
|
||||
this.uploadPost();
|
||||
}
|
||||
this.$message.success("任务添加成功");
|
||||
},
|
||||
//视频上传选中时
|
||||
fileAdd(file) {
|
||||
this.computeMD5(file);
|
||||
},
|
||||
//定义视频上传唯一标识符id
|
||||
generateTaskId() {
|
||||
const time = new Date().getTime();
|
||||
this.trackId = time;
|
||||
},
|
||||
computeMD5(file) {
|
||||
let fileReader = new FileReader();
|
||||
let blobSlice =
|
||||
File.prototype.slice ||
|
||||
File.prototype.mozSlice ||
|
||||
File.prototype.webkitSlice;
|
||||
let currentChunk = 0;
|
||||
const chunkSize = 10 * 1024 * 1000;
|
||||
let chunks = Math.ceil(file.size / chunkSize);
|
||||
let spark = new SparkMD5.ArrayBuffer();
|
||||
|
||||
//校验MD5 文件先暂停
|
||||
file.pause();
|
||||
|
||||
loadNext();
|
||||
// 实时展示MD5的计算进度
|
||||
this.$nextTick(() => {
|
||||
let dom = document.querySelector(
|
||||
`.file_${file.id} .uploader-file-status span`
|
||||
);
|
||||
fileReader.onload = (e) => {
|
||||
spark.append(e.target.result);
|
||||
if (currentChunk < chunks) {
|
||||
currentChunk++;
|
||||
loadNext();
|
||||
// 实时展示MD5的计算进度
|
||||
dom.innerHTML =
|
||||
"校验MD5 " + ((currentChunk / chunks) * 100).toFixed(0) + "%";
|
||||
} else {
|
||||
let md5 = spark.end();
|
||||
this.computeMD5Success(md5, file);
|
||||
}
|
||||
};
|
||||
});
|
||||
fileReader.onerror = function() {
|
||||
this.$message.error(`文件${file.name}读取出错，请检查该文件`);
|
||||
file.cancel();
|
||||
};
|
||||
|
||||
function loadNext() {
|
||||
let start = currentChunk * chunkSize;
|
||||
let end =
|
||||
start + chunkSize >= file.size ? file.size : start + chunkSize;
|
||||
fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
|
||||
}
|
||||
},
|
||||
computeMD5Success(md5, file) {
|
||||
file.fileMd5 = md5;
|
||||
file.resume();
|
||||
},
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
onFileSuccess(rootFile, file, response, chunk) {
|
||||
this.$refs.uploader.uploader.removeFile(file);
|
||||
let res = JSON.parse(response);
|
||||
let fileName = file.name;
|
||||
let fIndex = this.taskList.findIndex(
|
||||
(el) => el.files && el.files.name == fileName
|
||||
);
|
||||
if (res.code === 200) {
|
||||
if (fIndex > -1) {
|
||||
this.taskList[fIndex].status = "video_success";
|
||||
this.taskList[fIndex].form.filename = res.data.filename;
|
||||
this.taskList[fIndex].form.size = res.data.size;
|
||||
this.taskList[fIndex].form.md5 = res.data.md5;
|
||||
this.taskList[fIndex].form.mimeType = res.data.mimeType;
|
||||
this.taskList[fIndex].form.sourceID = res.data.sourceID;
|
||||
this.taskList[fIndex].form.sourceURL = res.data.sourceURL;
|
||||
this.taskList[fIndex].form.resolution = res.data.resolution;
|
||||
this.taskList[fIndex].form.playTime = res.data.playTime;
|
||||
this.taskList[fIndex].files = null;
|
||||
}
|
||||
this.uploadPost();
|
||||
} else {
|
||||
if (fIndex > -1) {
|
||||
this.taskList[fIndex].status = "error";
|
||||
this.$message.error(`文件${fileName}上传失败`);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
//上传帖子
|
||||
async uploadPost() {
|
||||
if (this.isUploading) return;
|
||||
const result = this.taskList.filter(
|
||||
(item) =>
|
||||
item.status == "img_success" ||
|
||||
item.status == "video_success" ||
|
||||
item.status == "text_success"
|
||||
);
|
||||
if (result.length == 0) {
|
||||
this.$message.success("当前任务执行完毕，等待视频上传完成");
|
||||
return;
|
||||
}
|
||||
let taskItem = result[0];
|
||||
let form = taskItem.form;
|
||||
try {
|
||||
this.isUploading = true;
|
||||
let res = await API.uploadMedia(form);
|
||||
if (res.code === 200) {
|
||||
taskItem.status = "success";
|
||||
return;
|
||||
}
|
||||
taskItem.status = "error_post";
|
||||
} catch (err) {
|
||||
taskItem.status = "error_post";
|
||||
} finally {
|
||||
this.isUploading = false;
|
||||
this.uploadPost();
|
||||
}
|
||||
},
|
||||
//视频上传额外参数
|
||||
uploadQuery(file, chunk) {
|
||||
return {
|
||||
pos: chunk.offset,
|
||||
id: file.fileMd5,
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.movie_warp {
|
||||
h3 {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.movide_box {
|
||||
display: flex;
|
||||
height: 600px;
|
||||
|
||||
.left {
|
||||
flex: 1;
|
||||
min-width: 500px;
|
||||
|
||||
.upload_list {
|
||||
border: 1px dashed #ccc;
|
||||
background-color: #f5f5f5;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: 20px;
|
||||
flex: 1;
|
||||
min-width: 500px;
|
||||
|
||||
.right_content {
|
||||
border: 1px dashed #ccc;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
|
||||
.right_item {
|
||||
height: 30px;
|
||||
background: #6aebb4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,486 @@
|
||||
<template>
|
||||
<div class="tag-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-input
|
||||
v-model="params.name"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
size="small"
|
||||
class="param-input"
|
||||
style="width: 220px"
|
||||
></el-input>
|
||||
<el-select
|
||||
placeholder="请选择类型"
|
||||
clearable
|
||||
size="small"
|
||||
v-model="params.type"
|
||||
>
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in types"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
placeholder="请选择是否开启"
|
||||
clearable
|
||||
size="small"
|
||||
v-model="params.status"
|
||||
>
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in statuses"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="el-icon-search"
|
||||
@click="getList('status')"
|
||||
style="margin-right: 20px"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="addAndEdit('add')"
|
||||
style="margin-right: 20px"
|
||||
>新增</el-button
|
||||
>
|
||||
</div>
|
||||
<!--数据表格-->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
border
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
height="600"
|
||||
>
|
||||
<el-table-column prop="id" label="ID" align="center" min-width="210">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.id || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称" align="center" width="240">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.name || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="类型" align="center" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
style="background-color: #ecf5ff;color: #409eff;border: 1px solid #d9ecff;"
|
||||
v-if="scope.row.type == 1"
|
||||
>动漫</el-tag
|
||||
>
|
||||
<el-tag type="success" v-else-if="scope.row.type == 2">漫画</el-tag>
|
||||
<el-tag type="danger" v-else-if="scope.row.type == 3"
|
||||
>文本小说</el-tag
|
||||
>
|
||||
<el-tag type="warning" v-else-if="scope.row.type == 4"
|
||||
>有声小说</el-tag
|
||||
>
|
||||
<el-tag type="info" v-else-if="scope.row.type == 5">短剧</el-tag>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="status"
|
||||
label="是否开启"
|
||||
align="center"
|
||||
width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" v-if="scope.row.status == 1">是</el-tag>
|
||||
<el-tag v-else>否</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sortCode" label="排序" align="center" width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.sortCode || 0 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="updatedAct"
|
||||
label="操作人"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.updatedAct || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="updateTime"
|
||||
label="修改时间"
|
||||
align="center"
|
||||
min-width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ changeTime(scope.row.updateTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="createdAt"
|
||||
label="创建时间"
|
||||
align="center"
|
||||
min-width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ changeTime(scope.row.createdAt) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
min-width="280"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="success"
|
||||
icon="el-icon-edit"
|
||||
@click="addAndEdit(scope.row)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
@click="del(scope.row)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
:page-sizes="[10, 15, 20, 30]"
|
||||
:current-page="params.pageNumber"
|
||||
:page-size="params.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
@size-change="changeSize"
|
||||
@current-change="changeCurrent"
|
||||
></el-pagination>
|
||||
<!-- 新增、修改 -->
|
||||
<el-dialog
|
||||
:title="dialogTitle"
|
||||
:visible.sync="dialogVisible"
|
||||
width="560px"
|
||||
@before-close="handleClose"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form :model="form" label-width="100px" :rules="rules" ref="form">
|
||||
<el-form-item
|
||||
label="名称:"
|
||||
size="small"
|
||||
prop="name"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
size="small"
|
||||
label="排序:"
|
||||
prop="sortCode"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-input v-model.number="form.sortCode"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
size="small"
|
||||
label="类型:"
|
||||
prop="type"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-select v-model="form.type" placeholder="请选择类型">
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in types"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
size="small"
|
||||
label="是否开启:"
|
||||
prop="status"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-select v-model="form.status" placeholder="请选择是否开启">
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in statuses"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose" size="small">取 消</el-button>
|
||||
<el-button type="primary" size="small" @click="onSubmit()"
|
||||
>确 定</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import { uniteDate } from "@/utils/validator.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 表格数据加载动画
|
||||
loading: false,
|
||||
// 列表数据
|
||||
tableData: [],
|
||||
total: 0,
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
status: undefined, // 状态
|
||||
name: undefined, // 名称
|
||||
type: undefined, // 状态
|
||||
},
|
||||
rules: {
|
||||
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
||||
},
|
||||
statuses: [
|
||||
{
|
||||
label: "开启",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "关闭",
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
types: [
|
||||
{
|
||||
label: "动漫",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "漫画",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "文本小说",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
label: "有声小说",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
label: "短剧",
|
||||
value: 5,
|
||||
},
|
||||
],
|
||||
dialogTitle: "",
|
||||
dialogVisible: false,
|
||||
form: {
|
||||
id: undefined,
|
||||
name: undefined, // 名称
|
||||
sortCode: 0, // 排序
|
||||
status: 1, // 是否开启
|
||||
type: 1, // 类型
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
getList(type) {
|
||||
if (type === "status") {
|
||||
this.params.pageNumber = 1;
|
||||
}
|
||||
API.getLatitudeList(this.params)
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.tableData = res.data.list;
|
||||
this.total = res.data.total;
|
||||
} else {
|
||||
this.tableData = [];
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 新增播单
|
||||
addAndEdit(param) {
|
||||
if (param === "add") {
|
||||
this.dialogTitle = "新增";
|
||||
} else {
|
||||
this.dialogTitle = "编辑";
|
||||
// 把数据回显给表单
|
||||
this.form.id = param.id;
|
||||
this.form.name = param.name;
|
||||
this.form.type = param.type;
|
||||
this.form.sortCode = param.sortCode;
|
||||
this.form.status = param.status;
|
||||
}
|
||||
this.dialogVisible = true; // 打开新增、编辑对话框
|
||||
},
|
||||
// 新增、修改提交
|
||||
onSubmit() {
|
||||
if (this.dialogTitle === "新增") {
|
||||
this.add();
|
||||
} else {
|
||||
this.edit();
|
||||
}
|
||||
},
|
||||
// 新增方法
|
||||
add() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
API.addLatitude(this.form).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "新增成功",
|
||||
});
|
||||
this.handleClose();
|
||||
this.getList();
|
||||
} else {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "新增失败",
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 修改方法
|
||||
edit() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
API.updateLatitude(this.form).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "编辑成功",
|
||||
});
|
||||
this.handleClose();
|
||||
this.getList();
|
||||
} else {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "编辑失败",
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
del(param) {
|
||||
this.$confirm(
|
||||
`确认是否删除<span style='color:blue'>${param.name}</span>, 是否继续?`,
|
||||
"提示",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
dangerouslyUseHTMLString: true,
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
let delData = {
|
||||
id: param.id,
|
||||
};
|
||||
API.delLatitude(delData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "删除成功!",
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "删除失败!",
|
||||
});
|
||||
}
|
||||
this.getList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消删除",
|
||||
});
|
||||
});
|
||||
},
|
||||
// 关闭窗口清除数据
|
||||
handleClose() {
|
||||
this.form.id = undefined;
|
||||
this.form.name = undefined;
|
||||
this.form.sortCode = 0;
|
||||
this.form.type = 1;
|
||||
this.form.status = 1;
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
// 分页条数改变回调
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.getList();
|
||||
},
|
||||
// 分页页码改变回调
|
||||
changeCurrent(pageNumber) {
|
||||
this.params.pageNumber = pageNumber;
|
||||
this.getList();
|
||||
},
|
||||
// 更换时间格式
|
||||
changeTime(time) {
|
||||
return uniteDate(time);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.dialog-footer {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
}
|
||||
/deep/ .el-form-item__content {
|
||||
display: flex;
|
||||
}
|
||||
/deep/ .el-select {
|
||||
width: 100%;
|
||||
}
|
||||
/deep/ .el-date-editor.el-input,
|
||||
.el-date-editor.el-input__inner {
|
||||
width: 100%;
|
||||
}
|
||||
/deep/ .el-upload-list--picture-card .el-upload-list__item {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
/deep/ .el-upload--picture-card {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
line-height: 130px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div class="tags-box">
|
||||
<el-dialog
|
||||
:title="'图集详情'"
|
||||
:visible.sync="dialogVisible"
|
||||
width="680px"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div class="picturePopup">
|
||||
<decrypt-img
|
||||
v-for="url in fileList"
|
||||
:key="url"
|
||||
style="width: 150px; height: 150px"
|
||||
:src="url"
|
||||
:preview-src-list="fileList"
|
||||
>
|
||||
</decrypt-img>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
fileList: [], // 用于图片回显
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 打开弹窗
|
||||
open(pictureArr) {
|
||||
this.fileList = pictureArr.map((item) => {
|
||||
return this.imgUrl + item;
|
||||
});
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.fileList = [];
|
||||
this.pics = undefined;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.tags-box {
|
||||
.picturePopup {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
max-height: 580px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,293 @@
|
||||
<template>
|
||||
<div class="edit-tag-box">
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="400px"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
ref="form"
|
||||
:model="params"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="标签名:" prop="name">
|
||||
<el-input v-model="params.name" size="small" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="种类" prop="types">
|
||||
<el-select v-model="params.types" placeholder="请选择" clearable>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="关联的模块" prop="kind">
|
||||
<el-select
|
||||
v-model="params.kind"
|
||||
placeholder="请选择关联的模块"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in kinds"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="标签排序:" prop="sortCode">
|
||||
<el-input v-model.number="params.sortCode" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model.number="params.remark" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开关" prop="enable">
|
||||
<el-switch
|
||||
v-model="params.enable"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
>
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose" size="small">取 消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="submitForm()"
|
||||
:loading="flag"
|
||||
size="small"
|
||||
>确 认</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { validatorIndex, validatorLanguage } from "@/utils/validator";
|
||||
import API from "@/api";
|
||||
// import baseConfig from '@/utils/serverUrlConfig'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
labelPosition: "right",
|
||||
dialogVisible: false,
|
||||
title: "",
|
||||
type: "",
|
||||
id: "",
|
||||
// 提交状态
|
||||
flag: false,
|
||||
value: false,
|
||||
// 表单数据
|
||||
params: {
|
||||
name: "",
|
||||
sortCode: 0,
|
||||
types: 0,
|
||||
kind: 1,
|
||||
enable: true,
|
||||
remark: "",
|
||||
},
|
||||
value1: "",
|
||||
options: [
|
||||
{
|
||||
value: 3,
|
||||
label: "动漫片库",
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: "漫画片库",
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
label: "acg搜索",
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
label: "短视频",
|
||||
},
|
||||
],
|
||||
kinds: [
|
||||
{
|
||||
label: "视频",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "acg",
|
||||
value: 1,
|
||||
},
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: "请输入标签名称", trigger: "blur" },
|
||||
{ validator: validatorLanguage, trigger: "blur" },
|
||||
],
|
||||
sortCode: [
|
||||
{ required: true, message: "请输入排序(整数))", trigger: "blur" },
|
||||
{ validator: validatorIndex, trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 表单验证提交
|
||||
submitForm() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.flag = true;
|
||||
if (this.type === "add") {
|
||||
this.addTags();
|
||||
} else {
|
||||
this.editTag();
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
//添加标签
|
||||
addTags() {
|
||||
API.addRecmdList(this.params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "添加成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerTagList");
|
||||
} else {
|
||||
this.$message.error("添加失败");
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
//编辑标签
|
||||
editTag() {
|
||||
if (!isNaN(this.params.remark)) {
|
||||
this.params.remark = this.params.remark.toString();
|
||||
}
|
||||
if (this.params.remark === "") {
|
||||
this.params.remark = "ZERO_VALUE";
|
||||
}
|
||||
let params = Object.assign(this.params, { id: this.id });
|
||||
API.editRecmdList(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "编辑成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerTagList");
|
||||
} else {
|
||||
this.$message.error("编辑失败");
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
//关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.$refs.form.resetFields();
|
||||
this.params = {
|
||||
name: "",
|
||||
sortCode: 0,
|
||||
types: 0,
|
||||
kind: 1,
|
||||
enable: true,
|
||||
remark: "",
|
||||
};
|
||||
},
|
||||
//打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(type, data) {
|
||||
this.dialogVisible = true;
|
||||
this.type = type;
|
||||
if (type === "edit") {
|
||||
if (data.enable === "关闭") {
|
||||
this.params.enable = false;
|
||||
} else {
|
||||
this.params.enable = true;
|
||||
}
|
||||
this.title = "编辑标签";
|
||||
this.id = data.id;
|
||||
this.params.name = data.name;
|
||||
switch (this.params.types) {
|
||||
case "默认":
|
||||
this.params.types = 0;
|
||||
break;
|
||||
case "最热":
|
||||
this.params.types = 1;
|
||||
break;
|
||||
case "最新":
|
||||
this.params.types = 2;
|
||||
break;
|
||||
}
|
||||
this.params.sortCode = data.sortCode;
|
||||
this.params.remark = data.remark;
|
||||
} else {
|
||||
this.title = "新增标签";
|
||||
// this.params.name = data.data.name
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.edit-tag-box {
|
||||
.el-dialog {
|
||||
margin-top: 100px !important;
|
||||
}
|
||||
.el-input {
|
||||
width: 150px;
|
||||
}
|
||||
.avatar-uploader {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
border: 1px dashed #e63765;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
&:hover {
|
||||
color: 1px dashed #e63765 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,296 @@
|
||||
<template>
|
||||
<div class="tagList-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-input
|
||||
placeholder="标签名"
|
||||
size="small"
|
||||
v-model="params.name"
|
||||
class="param-input"
|
||||
clearable
|
||||
></el-input>
|
||||
<el-select
|
||||
v-model="params.types"
|
||||
placeholder="请选择种类"
|
||||
size="small"
|
||||
@change="getTagList('status')"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in wonder"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<!-- <el-select
|
||||
v-model="params.kind"
|
||||
placeholder="请选择关联的模块"
|
||||
size="small"
|
||||
@change="getTagList('status')"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in kinds"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select> -->
|
||||
<el-button type="primary" size="small" @click="getTagList"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button type="primary" size="small" @click="tagsAction('add')"
|
||||
>+新增标签</el-button
|
||||
>
|
||||
</div>
|
||||
<!--数据表格-->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
border
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
>
|
||||
<el-table-column prop="types" label="种类" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" v-if="scope.row.types == 3">动漫片库</el-tag>
|
||||
<el-tag type="warning" v-else-if="scope.row.types == 4"
|
||||
>漫画片库</el-tag
|
||||
>
|
||||
<el-tag type="info" v-else-if="scope.row.types == 5">acg搜索</el-tag>
|
||||
<el-tag type="danger" v-else-if="scope.row.types == 6">短视频</el-tag>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" size="mini" effect="plain" class="tags">{{
|
||||
"#" + scope.row.name
|
||||
}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sortCode"
|
||||
label="倒序"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="enable"
|
||||
label="开关"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<!-- <el-table-column
|
||||
prop="kind"
|
||||
label="关联的模块"
|
||||
align="center"
|
||||
width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.kind === 0">视频帖子</el-tag>
|
||||
<el-tag type="success" v-else-if="scope.row.kind === 2">acg</el-tag>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column prop="remark" label="备注" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.remark || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!--
|
||||
<el-table-column prop="sortCode" label="标签排序" align="center" width="140" :sortable="'custom'">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.sortCode || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
-->
|
||||
<el-table-column label="操作" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="success"
|
||||
class="el-icon-edit"
|
||||
size="mini"
|
||||
@click="tagsAction('edit', scope.row)"
|
||||
></el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
@click="remove(scope.row)"
|
||||
></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
:page-sizes="[5, 10, 15, 20]"
|
||||
:current-page="params.pageNumber"
|
||||
:page-size="params.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
v-if="total > 5"
|
||||
@size-change="changeSize"
|
||||
@current-change="changeCurrent"
|
||||
></el-pagination>
|
||||
<!--新增、编辑tag弹窗-->
|
||||
<tag-action ref="tagAction" @handlerTagList="handlerTagList"></tag-action>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import TagAction from "./components/addTag";
|
||||
// import { sortEscape } from '@/utils/global'
|
||||
import API from "@/api";
|
||||
// import baseConfig from '@/utils/serverUrlConfig'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
loading: false,
|
||||
total: 0,
|
||||
wonder: [
|
||||
{
|
||||
value: 3,
|
||||
label: "动漫片库",
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: "漫画片库",
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
label: "acg搜索",
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
label: "短视频",
|
||||
},
|
||||
],
|
||||
kinds: [
|
||||
{
|
||||
label: "视频",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "acg",
|
||||
value: 1,
|
||||
},
|
||||
],
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
name: "",
|
||||
types: "",
|
||||
// kind: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
TagAction,
|
||||
},
|
||||
mounted() {
|
||||
this.getTagList();
|
||||
if (JSON.stringify(this.$route.query) !== "{}") {
|
||||
this.tagsAction("add", this.$route.query);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 请求tag列表数据
|
||||
getTagList(type) {
|
||||
if (type) {
|
||||
this.params.pageNumber = 1;
|
||||
}
|
||||
this.loading = true;
|
||||
API.getRecmdList(this.params)
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data.list) {
|
||||
this.tableData = res.data.list;
|
||||
for (var i = 0; i < this.tableData.length; i++) {
|
||||
if (this.tableData[i].enable === false) {
|
||||
this.tableData[i].enable = "关闭";
|
||||
} else {
|
||||
this.tableData[i].enable = "开启";
|
||||
}
|
||||
if (this.tableData[i].types === 0) {
|
||||
this.tableData[i].types = "默认";
|
||||
}
|
||||
if (this.tableData[i].types === 1) {
|
||||
this.tableData[i].types = "最热";
|
||||
}
|
||||
if (this.tableData[i].types === 2) {
|
||||
this.tableData[i].types = "最新";
|
||||
}
|
||||
}
|
||||
|
||||
this.total = res.data.total;
|
||||
} else {
|
||||
this.tableData = [];
|
||||
this.total = 0;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.tableData = [];
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 数据排序
|
||||
// handleSortChange(column) {
|
||||
// if (column.order) {
|
||||
// this.params.value = sortEscape(column.order)
|
||||
// this.params.key = column.prop;
|
||||
// } else {
|
||||
// this.params.value = ''
|
||||
// this.params.key = '';
|
||||
// }
|
||||
// this.getTagList()
|
||||
// },
|
||||
// 分页条数发生变化时触发
|
||||
changeSize(number) {
|
||||
this.params.pageSize = number;
|
||||
this.getTagList();
|
||||
},
|
||||
// 当前页发生变化时触发
|
||||
changeCurrent(number) {
|
||||
this.params.pageNumber = number;
|
||||
this.getTagList();
|
||||
},
|
||||
// 监听编辑、或者添加成功过后重新拉去数据
|
||||
handlerTagList() {
|
||||
this.params.pageNumber = 1;
|
||||
this.params.pageSize = 10;
|
||||
this.getTagList();
|
||||
},
|
||||
// 删除tags
|
||||
remove(row) {
|
||||
if (row.isActive === true) {
|
||||
this.$message.error("当前标签为开启状态，不能删除！");
|
||||
return false;
|
||||
}
|
||||
this.$confirm("您确定要删除当前标签吗？", "删除提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(() => {
|
||||
API.deleteRecmdList({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "删除成功",
|
||||
type: "success",
|
||||
});
|
||||
this.getTagList();
|
||||
} else {
|
||||
this.$message.error("删除失败！");
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
// 新增、编辑tags
|
||||
tagsAction(type, data) {
|
||||
this.$refs.tagAction.open(type, data);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,503 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="添加子媒体任务"
|
||||
:visible.sync="isShow"
|
||||
width="80%"
|
||||
center
|
||||
@close="$emit('close')"
|
||||
:show-close="false"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div class="add-video-warp-box">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<div class="flex-item">
|
||||
<el-form-item label="父媒体ID:" prop="mediaId">
|
||||
<el-input v-model="form.mediaId" size="small"></el-input>
|
||||
<el-button type="primary" size="small" @click="findFatherInfo()"
|
||||
>查询父级媒体</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
<el-form-item label="父媒体标题:" prop="mediaTitle">
|
||||
<el-input
|
||||
:disabled="true"
|
||||
v-model="mediaTitle"
|
||||
size="small"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<el-form-item label="上传类型:" prop="mediaType">
|
||||
<el-select
|
||||
:disabled="true"
|
||||
v-model="form.mediaType"
|
||||
size="small"
|
||||
placeholder="请选择上传类型"
|
||||
clearable
|
||||
>
|
||||
<el-option value="video" label="视频"></el-option>
|
||||
<el-option value="video_adv" label="视频广告"></el-option>
|
||||
<el-option value="image" label="漫画"></el-option>
|
||||
<el-option value="text" label="小说"></el-option>
|
||||
<el-option value="drama" label="短剧"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="封面上传:" prop="cover" style="display: flex;">
|
||||
<base-upload
|
||||
:cover="form.cover"
|
||||
:action="action"
|
||||
@successCallback="successCallback"
|
||||
:id="form.sourceID"
|
||||
:hide="true"
|
||||
:width="'90px'"
|
||||
:height="'120px'"
|
||||
></base-upload>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<el-form-item label="集数:" prop="episodeNumber">
|
||||
<el-input
|
||||
:disabled="isPermission"
|
||||
v-model.number="form.episodeNumber"
|
||||
size="small"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="章节名:" prop="name">
|
||||
<el-input
|
||||
:disabled="isPermission"
|
||||
v-model="form.name"
|
||||
size="small"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<el-form-item label="是否激活:" prop="isActive">
|
||||
<el-select
|
||||
:disabled="isPermission"
|
||||
v-model="form.isActive"
|
||||
size="small"
|
||||
placeholder="请选择是否激活"
|
||||
>
|
||||
<el-option :value="true" label="是"></el-option>
|
||||
<el-option :value="false" label="否"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="收费类型:" prop="listenPermission">
|
||||
<el-select
|
||||
:disabled="isPermission"
|
||||
v-model="form.listenPermission"
|
||||
size="small"
|
||||
placeholder="请选择收费类型"
|
||||
>
|
||||
<el-option
|
||||
v-if="form.mediaType !== 'drama'"
|
||||
:value="0"
|
||||
label="会员"
|
||||
></el-option>
|
||||
<el-option :value="1" label="金币"></el-option>
|
||||
<el-option :value="2" label="免费"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:disabled="isPermission"
|
||||
label="购买价格:"
|
||||
prop="price"
|
||||
v-if="form.listenPermission == 1"
|
||||
>
|
||||
<el-input v-model.number="form.price" size="small"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<el-form-item
|
||||
label="上传视频:"
|
||||
v-if="
|
||||
form.mediaType === 'video' ||
|
||||
form.mediaType === 'video_adv' ||
|
||||
form.mediaType === 'drama'
|
||||
"
|
||||
>
|
||||
<input
|
||||
:disabled="isPermission"
|
||||
type="file"
|
||||
@change="changeFile"
|
||||
accept="video/*"
|
||||
id="inputFile"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
style="width: 1100px"
|
||||
label="上传图集:"
|
||||
prop="cover"
|
||||
v-if="form.mediaType === 'image'"
|
||||
>
|
||||
<!--上传图集-->
|
||||
<imgs-upload
|
||||
:cover="form.cover"
|
||||
:action="actionPics"
|
||||
@successCallback="successCallbackPic"
|
||||
:id="form.sourceID"
|
||||
:wSize="180"
|
||||
:hSize="320"
|
||||
:width="'100px'"
|
||||
:height="'100px'"
|
||||
></imgs-upload>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
style="width: 1100px"
|
||||
label="小说内容:"
|
||||
prop="text"
|
||||
v-if="form.mediaType === 'text'"
|
||||
>
|
||||
<!--小说-->
|
||||
<el-input
|
||||
:disabled="isPermission"
|
||||
type="textarea"
|
||||
:rows="10"
|
||||
placeholder="请输入小说内容"
|
||||
v-model="form.text"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="flex-item" v-if="form.mediaType === 'text'">
|
||||
<!--小说音频上传-->
|
||||
<el-upload
|
||||
accept="audio/mp3"
|
||||
class="upload-demo"
|
||||
:action="actionAudio"
|
||||
:headers="header"
|
||||
:on-success="handleTrialChange"
|
||||
:file-list="fileList"
|
||||
:limit="1"
|
||||
>
|
||||
<el-button size="small" type="success" class="uploadMp3"
|
||||
>点击上传</el-button
|
||||
>
|
||||
</el-upload>
|
||||
</div>
|
||||
<el-form-item class="bottomBtn">
|
||||
<el-button
|
||||
:disabled="isPermission"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="submitDate"
|
||||
>立即添加</el-button
|
||||
>
|
||||
<el-button size="small" @click="cancel">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { validatorIndex } from "@/utils/validator";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import local from "@/utils/localStroage";
|
||||
import API from "@/api";
|
||||
export default {
|
||||
props: ["isShow"],
|
||||
data() {
|
||||
return {
|
||||
isPermission: true,
|
||||
SeriesCover: [],
|
||||
trackId: "",
|
||||
show: false,
|
||||
// 封面上传地址
|
||||
action: baseConfig.baseServerUrl + "/vid/uploadStatic",
|
||||
//图集上传
|
||||
actionPics: baseConfig.baseServerUrl + "/vid/uploadStaticBatch",
|
||||
// 视频播放地址
|
||||
videoBaseUrl: baseConfig.playVideoUrl,
|
||||
// 音频上传地址
|
||||
actionAudio: baseConfig.baseServerUrl + "/vid/upload/audio",
|
||||
header: {
|
||||
Authorization: local.get("userInfo").token,
|
||||
},
|
||||
isFree: true,
|
||||
flag: false,
|
||||
player: "",
|
||||
files: null,
|
||||
// 表单数据
|
||||
mediaTitle: "", //父级媒体标题
|
||||
form: {
|
||||
mediaId: "", //父级媒体id
|
||||
mediaType: "video", //上传文件类型
|
||||
episodeNumber: "", // 第几集
|
||||
listenPermission: 0, // 收听权限 0:会员 1:金币购买 2:免费
|
||||
price: 0, // 价格
|
||||
cover: "", // 封面图
|
||||
name: "", // 章节名
|
||||
text: "", // 小说专用
|
||||
audioUrl: "", // 小说专用
|
||||
md5: "", // 媒体md5
|
||||
sourceID: "", // 视频唯一id,对应文件服
|
||||
videoUrl: "",
|
||||
filename: "",
|
||||
isActive: false, //是否激活
|
||||
urlSet: [], // 图集
|
||||
},
|
||||
rules: {
|
||||
title: [{ required: true, message: "请输入标题", trigger: "blur" }],
|
||||
mediaType: [
|
||||
{ required: true, message: "请选择上传类型", trigger: "blur" },
|
||||
],
|
||||
mediaId: [
|
||||
{ required: true, message: "请输入父级媒体ID", trigger: "blur" },
|
||||
],
|
||||
name: [{ required: true, message: "请输入章节名", trigger: "blur" }],
|
||||
price: [{ required: true, message: "请输入购买价格", trigger: "blur" }],
|
||||
text: [{ required: true, message: "请输入小说内容", trigger: "blur" }],
|
||||
episodeNumber: [
|
||||
{ required: true, message: "请输入集数", trigger: "blur" },
|
||||
{ validator: validatorIndex, trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// console.log('创建')
|
||||
},
|
||||
methods: {
|
||||
changeFile(event) {
|
||||
let files = event.target.files[0];
|
||||
this.files = files;
|
||||
},
|
||||
cancel() {
|
||||
this.cleanForm();
|
||||
this.$emit("close");
|
||||
},
|
||||
findFatherInfo() {
|
||||
if (this.form.mediaId === undefined || this.form.mediaId === "") {
|
||||
this.$message.error("请输入父级媒体id");
|
||||
return false;
|
||||
}
|
||||
API.getMediaInfo({ id: this.form.mediaId })
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data) {
|
||||
console.log(res.data);
|
||||
if (res.data.isExist === true) {
|
||||
this.isPermission = false;
|
||||
this.form.mediaType = res.data.mediaType;
|
||||
this.mediaTitle = res.data.mediaTitle;
|
||||
if (res.data.mediaType === "drama") {
|
||||
this.form.listenPermission = 2;
|
||||
this.form.price = 0;
|
||||
}
|
||||
} else {
|
||||
this.$message.error("父级媒体不存在");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.isPermission = true;
|
||||
});
|
||||
},
|
||||
// 处理音频
|
||||
handleTrialChange(res) {
|
||||
if (res.data.code === 200) {
|
||||
this.form.audioUrl = res.data.data.fileName;
|
||||
} else {
|
||||
this.fileList = [];
|
||||
}
|
||||
},
|
||||
// 提交验证
|
||||
submitDate() {
|
||||
if (
|
||||
(this.form.mediaType === "video" || this.form.mediaType === "drama") &&
|
||||
!this.files
|
||||
) {
|
||||
this.$message.error("请选择视频");
|
||||
return false;
|
||||
}
|
||||
if (this.form.mediaType === "image" && this.form.urlSet.length <= 0) {
|
||||
this.$message.error("请选择漫画图集");
|
||||
return false;
|
||||
}
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.form.mediaType === "drama" && this.form.listenPermission === 0) {
|
||||
this.form.listenPermission = 2;
|
||||
}
|
||||
if (this.form.listenPermission !== 1) {
|
||||
this.form.price = 0;
|
||||
}
|
||||
let data = {
|
||||
files: this.files || null,
|
||||
form: this.form,
|
||||
time: new Date().getTime(),
|
||||
};
|
||||
this.$emit("addTaskSuccess", data);
|
||||
this.$emit("close");
|
||||
this.cleanForm();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
cleanForm() {
|
||||
this.files = null;
|
||||
let dom = document.querySelector("#inputFile");
|
||||
if (dom) {
|
||||
dom.value = "";
|
||||
}
|
||||
this.isPermission = true;
|
||||
this.mediaTitle = "";
|
||||
this.form = {
|
||||
mediaId: this.form.mediaId, //父级媒体id
|
||||
mediaType: "video", //上传文件类型
|
||||
episodeNumber: 1, // 第几集
|
||||
listenPermission: 0, // 收听权限 0:会员 1:金币购买 2:免费
|
||||
price: 0, // 价格
|
||||
name: "", // 章节名
|
||||
text: "", // 小说专用
|
||||
md5: "", // 媒体md5
|
||||
sourceID: "", // 视频唯一id,对应文件服
|
||||
videoUrl: "",
|
||||
filename: "",
|
||||
isActive: false, //是否激活
|
||||
urlSet: [], // 图集
|
||||
};
|
||||
},
|
||||
// 封面图上传成功回调
|
||||
successCallbackHeng(res) {
|
||||
this.form.horizontalCover = res.data.coverImg;
|
||||
},
|
||||
successCallbackShu(res) {
|
||||
this.form.verticalCover = res.data.coverImg;
|
||||
},
|
||||
// 封面图上传成功回调
|
||||
successCallbackPic(seriesCover) {
|
||||
this.form.urlSet = seriesCover;
|
||||
},
|
||||
// 封面图上传成功回调
|
||||
successCallback(res) {
|
||||
this.form.cover = res.data.coverImg;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add-video-warp-box {
|
||||
/deep/ .el-select--small {
|
||||
width: 250px !important;
|
||||
}
|
||||
.bottomBtn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 14px;
|
||||
}
|
||||
.flex-item {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.el-upload .el-upload--picture-card {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.el-textarea {
|
||||
width: 500px;
|
||||
}
|
||||
.el-input {
|
||||
width: 250px;
|
||||
}
|
||||
.uploader-drop {
|
||||
background: none;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
.uploader-file {
|
||||
border-bottom: 1px dashed #ccc;
|
||||
}
|
||||
.uploader-btn {
|
||||
background: #e63765;
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
font-size: 13px;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
&:hover {
|
||||
background: #eb5f84;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
overflow: hidden;
|
||||
color: #666;
|
||||
margin-bottom: 15px;
|
||||
cursor: pointer;
|
||||
i {
|
||||
&:hover {
|
||||
color: #e63765;
|
||||
}
|
||||
}
|
||||
span {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.upload-video {
|
||||
width: 300px !important;
|
||||
.circle-bar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
.el-progress-circle {
|
||||
margin: 0 auto;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
.video-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.avatar-uploader {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
border: 1px dashed #e63765;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
&:hover {
|
||||
color: 1px dashed #e63765 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.show {
|
||||
left: 20px;
|
||||
transition: left 0.2s linear;
|
||||
}
|
||||
.upload-demo {
|
||||
display: flex;
|
||||
margin: 0 0 0 50px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,461 @@
|
||||
<template>
|
||||
<div class="movie_warp">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="isShow = true"
|
||||
class="taskBtn"
|
||||
>新增任务</el-button
|
||||
>
|
||||
<div class="movide_box">
|
||||
<div class="left">
|
||||
<h3>上传子媒体列表</h3>
|
||||
<!--视频分片上传-->
|
||||
<uploader
|
||||
:options="options"
|
||||
:fileStatusText="fileStatusText"
|
||||
class="uploader-example"
|
||||
ref="uploader"
|
||||
@file-added="fileAdd"
|
||||
@file-success="onFileSuccess"
|
||||
>
|
||||
<uploader-unsupport></uploader-unsupport>
|
||||
<uploader-list class="upload_list" style="height: 600px">
|
||||
<div class="file-panel" slot-scope="props">
|
||||
<ul class="file-list">
|
||||
<li v-for="file in props.fileList" :key="file.id">
|
||||
<uploader-file
|
||||
:class="'file_' + file.id"
|
||||
ref="files"
|
||||
:file="file"
|
||||
:list="true"
|
||||
>
|
||||
</uploader-file>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</uploader-list>
|
||||
</uploader>
|
||||
</div>
|
||||
<div class="right">
|
||||
<h3>任务上传列表</h3>
|
||||
<div class="right_content">
|
||||
<el-table :data="taskList" style="width: 100%" stripe>
|
||||
<el-table-column prop="type" label="类型" width="90" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
v-if="scope.row.form && scope.row.form.mediaType === 'video'"
|
||||
>
|
||||
视频
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="
|
||||
scope.row.form && scope.row.form.mediaType === 'video_adv'
|
||||
"
|
||||
>
|
||||
视频广告
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="scope.row.form && scope.row.form.mediaType === 'image'"
|
||||
>
|
||||
漫画
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="scope.row.form && scope.row.form.mediaType === 'text'"
|
||||
>
|
||||
小说
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="scope.row.form && scope.row.form.mediaType === 'drama'"
|
||||
>
|
||||
短剧
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="章节名"
|
||||
min-width="180"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ (scope.row.form && scope.row.form.name) || "未知" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="size"
|
||||
label="文件大小"
|
||||
width="90"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{
|
||||
(scope.row.files && getSize(scope.row.files.size)) ||
|
||||
(scope.row.form.size && getSize(scope.row.form.size)) ||
|
||||
""
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="status"
|
||||
label="状态"
|
||||
width="120"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="info" v-if="scope.row.status == 'wait'"
|
||||
>等待上传</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="warning"
|
||||
v-else-if="scope.row.status == 'video_uploaded'"
|
||||
>视频上传中</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="warning"
|
||||
v-else-if="scope.row.status == 'video_success'"
|
||||
>视频上传完成</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="warning"
|
||||
v-else-if="scope.row.status == 'img_success'"
|
||||
>图集上传完成</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="warning"
|
||||
v-else-if="scope.row.status == 'text_success'"
|
||||
>小说上传完成</el-tag
|
||||
>
|
||||
<el-tag type="success" v-else-if="scope.row.status == 'success'"
|
||||
>上传成功</el-tag
|
||||
>
|
||||
<el-tag type="error" v-else-if="scope.row.status == 'error'"
|
||||
>上传失败</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="error"
|
||||
v-else-if="scope.row.status == 'error_post'"
|
||||
>提交失败</el-tag
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
label="操作"
|
||||
align="center"
|
||||
width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="deleteTask(scope.$index)"
|
||||
type="text"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
<el-button
|
||||
type="text"
|
||||
v-if="scope.row.status == 'error_post'"
|
||||
@click="rest(scope.row, scope.$index)"
|
||||
size="small"
|
||||
>重试</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<addVideo
|
||||
v-show="isShow"
|
||||
:isShow="isShow"
|
||||
@close="isShow = false"
|
||||
@addTaskSuccess="addTaskSuccess"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import local from "@/utils/localStroage.js";
|
||||
import addVideo from "./addMedia.vue";
|
||||
import API from "@/api";
|
||||
import SparkMD5 from "spark-md5";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
addVideo,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
trackId: "",
|
||||
isUploading: false, //是否正在上传
|
||||
fileStatusText: {
|
||||
success: "上传成功",
|
||||
error: "上传失败",
|
||||
uploading: "正在上传",
|
||||
paused: "暂停上传",
|
||||
waiting: "等待上传",
|
||||
},
|
||||
attrs: {
|
||||
accept: [
|
||||
".mp4",
|
||||
".qlv",
|
||||
".qsv",
|
||||
".ogg",
|
||||
".flv",
|
||||
".avi",
|
||||
".wmv",
|
||||
".rmvb",
|
||||
], //接受文件类型
|
||||
},
|
||||
taskList: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
options() {
|
||||
return {
|
||||
target: baseConfig.baseServerUrl + "/vid/uploadDotStream", //上传地址
|
||||
testChunks: false, //是否开启服务器分片校验
|
||||
method: "application/json",
|
||||
headers: {
|
||||
// 额外请求头
|
||||
Authorization: local.get("userInfo")
|
||||
? local.get("userInfo").token
|
||||
: "",
|
||||
},
|
||||
fileParameterName: "upload", //文件名参数，默认为file
|
||||
query: this.uploadQuery, //额外参数
|
||||
singleFile: false, //单文件上传
|
||||
chunkSize: 2048000, //分片大小，默认1M
|
||||
simultaneousUploads: 6,
|
||||
maxChunkRetries: 9, //失败重试次数
|
||||
// 把英文时间转成中文
|
||||
parseTimeRemaining: function(timeRemaining, parsedTimeRemaining) {
|
||||
return parsedTimeRemaining
|
||||
.replace(/\syears?/, "年")
|
||||
.replace(/\days?/, "天")
|
||||
.replace(/\shours?/, "小时")
|
||||
.replace(/\sminutes?/, "分钟")
|
||||
.replace(/\sseconds?/, "秒");
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
deleteTask(index) {
|
||||
this.taskList.splice(index, 1);
|
||||
},
|
||||
async rest(row, index) {
|
||||
let from = row.form;
|
||||
let res = await API.uploadMedia(from);
|
||||
if (res.code === 200) {
|
||||
this.taskList[index].status = "success";
|
||||
return;
|
||||
}
|
||||
this.taskList[index].status = "error_post";
|
||||
},
|
||||
// 获取文件大小
|
||||
getSize(byte) {
|
||||
let MB = (byte / 1024 / 1024).toFixed(2);
|
||||
return MB + "M" || "未知";
|
||||
},
|
||||
addTaskSuccess(info) {
|
||||
let repeatFile = this.taskList.filter((file) => {
|
||||
return info.files && info.files.name == file.filename;
|
||||
});
|
||||
if (repeatFile.length) {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "视频名重复,添加失败",
|
||||
});
|
||||
return;
|
||||
}
|
||||
info.status = "wait";
|
||||
if (info.files) {
|
||||
info.filename = info.files.name;
|
||||
this.$refs.uploader.uploader.addFile(info.files);
|
||||
this.taskList.push(info);
|
||||
} else if (info.form.text) {
|
||||
//小说上传完成
|
||||
info.status = "text_success";
|
||||
this.taskList.push(info);
|
||||
this.uploadPost();
|
||||
} else {
|
||||
//图集上传完成
|
||||
info.status = "img_success";
|
||||
this.taskList.push(info);
|
||||
this.uploadPost();
|
||||
}
|
||||
this.$message.success("任务添加成功");
|
||||
},
|
||||
//视频上传选中时
|
||||
fileAdd(file) {
|
||||
this.computeMD5(file);
|
||||
},
|
||||
//定义视频上传唯一标识符id
|
||||
generateTaskId() {
|
||||
const time = new Date().getTime();
|
||||
this.trackId = time;
|
||||
},
|
||||
computeMD5(file) {
|
||||
let fileReader = new FileReader();
|
||||
let blobSlice =
|
||||
File.prototype.slice ||
|
||||
File.prototype.mozSlice ||
|
||||
File.prototype.webkitSlice;
|
||||
let currentChunk = 0;
|
||||
const chunkSize = 10 * 1024 * 1000;
|
||||
let chunks = Math.ceil(file.size / chunkSize);
|
||||
let spark = new SparkMD5.ArrayBuffer();
|
||||
|
||||
//校验MD5 文件先暂停
|
||||
file.pause();
|
||||
|
||||
loadNext();
|
||||
// 实时展示MD5的计算进度
|
||||
this.$nextTick(() => {
|
||||
let dom = document.querySelector(
|
||||
`.file_${file.id} .uploader-file-status span`
|
||||
);
|
||||
fileReader.onload = (e) => {
|
||||
spark.append(e.target.result);
|
||||
if (currentChunk < chunks) {
|
||||
currentChunk++;
|
||||
loadNext();
|
||||
// 实时展示MD5的计算进度
|
||||
dom.innerHTML =
|
||||
"校验MD5 " + ((currentChunk / chunks) * 100).toFixed(0) + "%";
|
||||
} else {
|
||||
let md5 = spark.end();
|
||||
this.computeMD5Success(md5, file);
|
||||
}
|
||||
};
|
||||
});
|
||||
fileReader.onerror = function() {
|
||||
this.$message.error(`文件${file.name}读取出错，请检查该文件`);
|
||||
file.cancel();
|
||||
};
|
||||
|
||||
function loadNext() {
|
||||
let start = currentChunk * chunkSize;
|
||||
let end =
|
||||
start + chunkSize >= file.size ? file.size : start + chunkSize;
|
||||
fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
|
||||
}
|
||||
},
|
||||
computeMD5Success(md5, file) {
|
||||
file.fileMd5 = md5;
|
||||
file.resume();
|
||||
},
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
onFileSuccess(rootFile, file, response, chunk) {
|
||||
this.$refs.uploader.uploader.removeFile(file);
|
||||
let res = JSON.parse(response);
|
||||
let fileName = file.name;
|
||||
let fIndex = this.taskList.findIndex(
|
||||
(el) => el.files && el.files.name == fileName
|
||||
);
|
||||
if (res.code === 200) {
|
||||
if (fIndex > -1) {
|
||||
this.taskList[fIndex].status = "video_success";
|
||||
this.taskList[fIndex].form.filename = res.data.filename;
|
||||
this.taskList[fIndex].form.size = res.data.size;
|
||||
this.taskList[fIndex].form.md5 = res.data.md5;
|
||||
this.taskList[fIndex].form.mimeType = res.data.mimeType;
|
||||
this.taskList[fIndex].form.sourceID = res.data.sourceID;
|
||||
this.taskList[fIndex].form.videoUrl = res.data.sourceURL;
|
||||
this.taskList[fIndex].form.resolution = res.data.resolution;
|
||||
this.taskList[fIndex].form.playTime = res.data.playTime;
|
||||
this.taskList[fIndex].files = null;
|
||||
}
|
||||
this.uploadPost();
|
||||
} else {
|
||||
if (fIndex > -1) {
|
||||
this.taskList[fIndex].status = "error";
|
||||
this.$message.error(`文件${fileName}上传失败`);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
//上传帖子
|
||||
async uploadPost() {
|
||||
if (this.isUploading) return;
|
||||
const result = this.taskList.filter(
|
||||
(item) =>
|
||||
item.status == "img_success" ||
|
||||
item.status == "video_success" ||
|
||||
item.status == "text_success"
|
||||
);
|
||||
if (result.length == 0) {
|
||||
this.$message.success("当前任务执行完毕，等待视频上传完成");
|
||||
return;
|
||||
}
|
||||
let taskItem = result[0];
|
||||
let form = taskItem.form;
|
||||
// console.log(form)
|
||||
try {
|
||||
this.isUploading = true;
|
||||
let res = await API.subUploadMedia(form);
|
||||
if (res.code === 200) {
|
||||
taskItem.status = "success";
|
||||
return;
|
||||
}
|
||||
taskItem.status = "error_post";
|
||||
} catch (err) {
|
||||
taskItem.status = "error_post";
|
||||
} finally {
|
||||
this.isUploading = false;
|
||||
this.uploadPost();
|
||||
}
|
||||
},
|
||||
//视频上传额外参数
|
||||
uploadQuery(file, chunk) {
|
||||
return {
|
||||
pos: chunk.offset,
|
||||
id: file.fileMd5,
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.movie_warp {
|
||||
h3 {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.movide_box {
|
||||
display: flex;
|
||||
height: 600px;
|
||||
|
||||
.left {
|
||||
flex: 1;
|
||||
min-width: 500px;
|
||||
|
||||
.upload_list {
|
||||
border: 1px dashed #ccc;
|
||||
background-color: #f5f5f5;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: 20px;
|
||||
flex: 1;
|
||||
min-width: 500px;
|
||||
|
||||
.right_content {
|
||||
border: 1px dashed #ccc;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
|
||||
.right_item {
|
||||
height: 30px;
|
||||
background: #6aebb4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div class="tags-box">
|
||||
<el-dialog :title="'图集详情'" :visible.sync="dialogVisible" width="680px" :before-close="handleClose" :close-on-click-modal="false">
|
||||
<div class="picturePopup">
|
||||
<decrypt-img
|
||||
v-for="url in fileList"
|
||||
:key="url"
|
||||
style="width: 150px; height: 150px"
|
||||
:src="url"
|
||||
:preview-src-list="fileList">
|
||||
</decrypt-img>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import baseConfig from '@/utils/serverUrlConfig'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
fileList: [], // 用于图片回显
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 打开弹窗
|
||||
open(pictureArr) {
|
||||
this.fileList = pictureArr.map((item) => {
|
||||
return this.imgUrl + item;
|
||||
});
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.fileList = [];
|
||||
this.pics = undefined;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.tags-box {
|
||||
.picturePopup {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
max-height: 580px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,713 @@
|
||||
<template>
|
||||
<div class="tag-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-input
|
||||
v-model="params.recommendId"
|
||||
placeholder="请输入推荐活动ID"
|
||||
clearable
|
||||
size="small"
|
||||
class="param-input"
|
||||
></el-input>
|
||||
<el-select
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
size="small"
|
||||
v-model="params.status"
|
||||
@change="getList('status')"
|
||||
>
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in statuses"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="el-icon-search"
|
||||
@click="getList('status')"
|
||||
style="margin-right: 20px"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="addAndEdit('add')"
|
||||
style="margin-right: 20px"
|
||||
>新增</el-button
|
||||
>
|
||||
</div>
|
||||
<!--数据表格-->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
border
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
height="600"
|
||||
>
|
||||
<el-table-column prop="id" label="ID" align="center" min-width="210">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.id || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="title" label="标题" align="center" min-width="140">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.title || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="targetEnum"
|
||||
label="目标类型"
|
||||
align="center"
|
||||
min-width="140"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.targetEnum == 1">购买子集</el-tag>
|
||||
<el-tag type="warning" v-else>购买整本</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="target"
|
||||
label="任务目标"
|
||||
align="center"
|
||||
min-width="140"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.target }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="awardList"
|
||||
label="奖励列表"
|
||||
align="center"
|
||||
min-width="140"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div v-for="item in scope.row.awardList" :key="item.type">
|
||||
<span v-if="item.type == 0">积分：</span>
|
||||
<span>{{ item.num }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="任务类型" align="center" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.type == 1">每日推荐</el-tag>
|
||||
<el-tag type="warning" v-else>一次性任务</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" align="center" width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" v-if="scope.row.status == 1">开启</el-tag>
|
||||
<el-tag v-else>关闭</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="objId" label="媒体ID" align="center" width="220">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.objId || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="recommendId"
|
||||
label="推荐ID"
|
||||
align="center"
|
||||
width="220"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.recommendId || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="icon" label="任务图标" align="center" width="100">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="!scope.row.icon">暂无任务图标</span>
|
||||
<div
|
||||
v-else
|
||||
class="picturePreview"
|
||||
@click="handlePictureCardPreview({ url: imgUrl + scope.row.icon })"
|
||||
>
|
||||
<decrypt-img
|
||||
style="width: 80px; height: 80px"
|
||||
:src="imgUrl + scope.row.icon"
|
||||
fit="fill"
|
||||
></decrypt-img>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="startTime"
|
||||
label="开始时间"
|
||||
align="center"
|
||||
min-width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ changeTime(scope.row.startTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="endTime"
|
||||
label="结束时间"
|
||||
align="center"
|
||||
min-width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ changeTime(scope.row.endTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sortCode"
|
||||
label="排序"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.sortCode || 0 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="updatedAct"
|
||||
label="操作人"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.updatedAct || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="updateAt"
|
||||
label="修改时间"
|
||||
align="center"
|
||||
min-width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ changeTime(scope.row.updateAt) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="createdAt"
|
||||
label="创建时间"
|
||||
align="center"
|
||||
min-width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ changeTime(scope.row.createdAt) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
min-width="200"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="success"
|
||||
icon="el-icon-edit"
|
||||
@click="addAndEdit(scope.row)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
@click="del(scope.row)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
:page-sizes="[10, 15, 20, 30]"
|
||||
:current-page="params.pageNumber"
|
||||
:page-size="params.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
@size-change="changeSize"
|
||||
@current-change="changeCurrent"
|
||||
></el-pagination>
|
||||
<!-- 新增、修改 -->
|
||||
<el-dialog
|
||||
:title="dialogTitle"
|
||||
:visible.sync="dialogVisible"
|
||||
width="550px"
|
||||
@before-close="handleClose"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form :model="form" label-width="100px" :rules="rules" ref="form">
|
||||
<el-form-item
|
||||
size="small"
|
||||
label="标题:"
|
||||
prop="title"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-input v-model="form.title"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
size="small"
|
||||
label="推荐活动id:"
|
||||
prop="recommendId"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-input
|
||||
v-model="form.recommendId"
|
||||
@blur="getRecommendInfo"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
size="small"
|
||||
label="目标类型:"
|
||||
prop="targetEnum"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-select v-model="form.targetEnum" placeholder="请选择目标枚举">
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in targetEnums"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
size="small"
|
||||
label="任务目标:"
|
||||
prop="target"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-input v-model.number="form.target"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
size="small"
|
||||
label="类型:"
|
||||
prop="type"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-select v-model="form.type" placeholder="请选择类型">
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in types"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
size="small"
|
||||
label="奖品类型:"
|
||||
prop="awardType"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-select v-model="awardType" placeholder="请选择奖品类型">
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in awardTypes"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
size="small"
|
||||
label="奖品数量:"
|
||||
prop="awardNums"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-input v-model.number="awardNums"></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item
|
||||
size="small"
|
||||
label="状态:"
|
||||
prop="status"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-select v-model="form.status" placeholder="请选择状态">
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in statuses"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item
|
||||
size="small"
|
||||
label="排序:"
|
||||
prop="sortCode"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-input v-model.number="form.sortCode"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
size="small"
|
||||
label="任务图标:"
|
||||
prop="icon"
|
||||
style="width: 480px"
|
||||
>
|
||||
<base-upload
|
||||
:cover="form.icon"
|
||||
:action="uploadUrl"
|
||||
@successCallback="uploadIcon"
|
||||
:width="'120px'"
|
||||
:height="'120px'"
|
||||
:hide="true"
|
||||
></base-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose" size="small">取 消</el-button>
|
||||
<el-button type="primary" size="small" @click="onSubmit()"
|
||||
>确 定</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-dialog :visible.sync="dialogVisiblePreview">
|
||||
<img width="100%" :src="dialogImageUrl" alt="" />
|
||||
</el-dialog>
|
||||
<!-- 图集预览窗口 -->
|
||||
<preview-picture ref="previewPicture"></preview-picture>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import { uniteDate } from "@/utils/validator.js";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import local from "@/utils/localStroage";
|
||||
import PreviewPicture from "./components/previewPicture";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PreviewPicture,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 表格数据加载动画
|
||||
loading: false,
|
||||
// 封面上传地址
|
||||
uploadUrl: baseConfig.baseServerUrl + "/vid/uploadStatic",
|
||||
header: {
|
||||
Authorization: local.get("userInfo").token,
|
||||
},
|
||||
dialogImageUrl: undefined, // 放大图地址
|
||||
dialogVisiblePreview: false, // 放大图
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
// 列表数据
|
||||
tableData: [],
|
||||
total: 0,
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
recommendId: undefined, // 关联推荐活动id
|
||||
},
|
||||
rules: {
|
||||
title: [{ required: true, message: "请输入标题", trigger: "blur" }],
|
||||
recommendId: [
|
||||
{ required: true, message: "请输入推荐活动id", trigger: "blur" },
|
||||
],
|
||||
icon: [{ required: true, message: "请上传任务图标", trigger: "blur" }],
|
||||
},
|
||||
types: [
|
||||
{
|
||||
label: "一次性任务",
|
||||
value: 0,
|
||||
},
|
||||
],
|
||||
awardTypes: [
|
||||
{
|
||||
label: "积分",
|
||||
value: 0,
|
||||
},
|
||||
],
|
||||
targetEnums: [
|
||||
{
|
||||
label: "购买子集",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "购买整本",
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
statuses: [
|
||||
{
|
||||
label: "关闭",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "开启",
|
||||
value: 1,
|
||||
},
|
||||
],
|
||||
dialogTitle: "",
|
||||
dialogVisible: false,
|
||||
awardType: 0,
|
||||
awardNums: 0,
|
||||
form: {
|
||||
id: undefined,
|
||||
title: undefined, // 标题
|
||||
icon: undefined, // 任务图标
|
||||
recommendId: undefined, // 关联的推荐活动id
|
||||
sortCode: 0, // 排序字段
|
||||
target: 0, // 任务目标
|
||||
targetEnum: 1, // 目标类型 1-购买子集 2-购买整本
|
||||
type: 0, // 任务类型 0一次性任务
|
||||
awardList: undefined, // 奖励列表
|
||||
// status: 0, //状态 0-关闭，1-开启
|
||||
},
|
||||
recommendInfo: undefined, // 当前输入的推荐信息
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
// 标题图片上传成功
|
||||
uploadIcon(res) {
|
||||
this.form.icon = res.data.coverImg;
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url;
|
||||
this.dialogVisiblePreview = true;
|
||||
},
|
||||
getList(type) {
|
||||
if (type === "status") {
|
||||
this.params.pageNumber = 1;
|
||||
}
|
||||
API.getMediaTaskList(this.params)
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.tableData = res.data.list;
|
||||
this.total = res.data.total;
|
||||
} else {
|
||||
this.tableData = [];
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
getRecommendInfo() {
|
||||
if (!this.form.recommendId) return;
|
||||
API.getMediaRecommendInfo({
|
||||
id: this.form.recommendId,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.recommendInfo = res.data.info;
|
||||
if (this.recommendInfo.type != 2) {
|
||||
this.$message.error("该推荐活动id不可用，请选择单篇推荐活动");
|
||||
}
|
||||
} else {
|
||||
this.$message.error("该推荐活动id不可用，请选择单篇推荐活动");
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.error("该推荐活动id不可用，请选择单篇推荐活动");
|
||||
});
|
||||
},
|
||||
// 新增推荐
|
||||
addAndEdit(param) {
|
||||
if (param === "add") {
|
||||
this.dialogTitle = "新增";
|
||||
} else {
|
||||
this.dialogTitle = "编辑";
|
||||
// 把数据回显给表单
|
||||
this.form.id = param.id;
|
||||
this.form.title = param.title;
|
||||
this.form.icon = param.icon;
|
||||
this.form.recommendId = param.recommendId;
|
||||
this.form.sortCode = param.sortCode;
|
||||
this.form.target = param.target;
|
||||
this.form.targetEnum = param.targetEnum;
|
||||
this.form.type = param.type;
|
||||
// this.form.status = param.status;
|
||||
this.getRecommendInfo();
|
||||
// 根据后端的需求所设，如果奖品类型扩展，此代码需要相应更改
|
||||
if (param.awardList && param.awardList.length) {
|
||||
this.awardType = param.awardList[0].type;
|
||||
this.awardNums = param.awardList[0].num;
|
||||
} else {
|
||||
this.awardType = 0;
|
||||
this.awardNums = 0;
|
||||
}
|
||||
}
|
||||
this.dialogVisible = true; // 打开新增、编辑对话框
|
||||
},
|
||||
// 新增、修改提交
|
||||
onSubmit() {
|
||||
// 首先判断推荐id是否符合要求
|
||||
if (!(this.recommendInfo && this.recommendInfo.type == 2))
|
||||
return this.$message.error("该推荐活动id不可用，请选择单篇推荐活动");
|
||||
// 组装奖品数据
|
||||
this.form.awardList = [
|
||||
{
|
||||
type: this.awardType,
|
||||
num: this.awardNums,
|
||||
},
|
||||
];
|
||||
if (this.dialogTitle === "新增") {
|
||||
this.add();
|
||||
} else {
|
||||
this.edit();
|
||||
}
|
||||
},
|
||||
// 新增方法
|
||||
add() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
API.addMediaTask(this.form).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "新增成功",
|
||||
});
|
||||
this.handleClose();
|
||||
this.getList();
|
||||
} else {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "新增失败",
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 修改方法
|
||||
edit() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
API.updateMediaTask(this.form).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "编辑成功",
|
||||
});
|
||||
this.handleClose();
|
||||
this.getList();
|
||||
} else {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "编辑失败",
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
del(param) {
|
||||
this.$confirm(
|
||||
`确认是否删除<span style='color:blue'>${param.title}</span>任务, 是否继续?`,
|
||||
"提示",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
dangerouslyUseHTMLString: true,
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
let delData = {
|
||||
ids: [param.id],
|
||||
};
|
||||
API.delMediaTask(delData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "删除成功!",
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "删除失败!",
|
||||
});
|
||||
}
|
||||
this.getList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消删除",
|
||||
});
|
||||
});
|
||||
},
|
||||
// 关闭窗口清除数据
|
||||
handleClose() {
|
||||
this.form.id = undefined;
|
||||
this.form.title = undefined;
|
||||
this.form.icon = undefined;
|
||||
this.form.recommendId = undefined;
|
||||
this.form.sortCode = 0;
|
||||
this.form.target = 0;
|
||||
this.form.targetEnum = 1;
|
||||
this.form.type = 0;
|
||||
this.form.awardList = undefined;
|
||||
// this.form.status = 0;
|
||||
this.awardType = 0;
|
||||
this.awardNums = 0;
|
||||
this.recommendInfo = {};
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
// 分页条数改变回调
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.getList();
|
||||
},
|
||||
// 分页页码改变回调
|
||||
changeCurrent(pageNumber) {
|
||||
this.params.pageNumber = pageNumber;
|
||||
this.getList();
|
||||
},
|
||||
// 更换时间格式
|
||||
changeTime(time) {
|
||||
return uniteDate(time);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.dialog-footer {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
}
|
||||
/deep/ .el-form-item__content {
|
||||
display: flex;
|
||||
}
|
||||
/deep/ .el-select {
|
||||
width: 100%;
|
||||
}
|
||||
/deep/ .el-date-editor.el-input,
|
||||
.el-date-editor.el-input__inner {
|
||||
width: 100%;
|
||||
}
|
||||
/deep/ .el-upload-list--picture-card .el-upload-list__item {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
/deep/ .el-upload--picture-card {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
line-height: 130px;
|
||||
}
|
||||
.itemBox {
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
}
|
||||
.tagBox {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user