|
@@ -0,0 +1,997 @@
|
|
|
+<style>
|
|
|
+#material-card .ant-tabs-tab {
|
|
|
+ border: 1px solid gainsboro !important;
|
|
|
+}
|
|
|
+#material-card .ant-tabs-top-bar {
|
|
|
+ position: relative;
|
|
|
+ z-index: 100;
|
|
|
+}
|
|
|
+#material-card .ant-badge-count {
|
|
|
+ top: -10px;
|
|
|
+}
|
|
|
+.detail .ant-form-item {
|
|
|
+ margin-bottom: 10px !important;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+@media (min-width: 1024px) {
|
|
|
+ .home-item {
|
|
|
+ border-style: solid;
|
|
|
+ border-width: 1px;
|
|
|
+ border-color: #e4e4e4;
|
|
|
+ width: calc(50% - 10px);
|
|
|
+ padding: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background: #fff;
|
|
|
+ position: relative;
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
+} /*>=1024的设备*/
|
|
|
+
|
|
|
+// @media (min-width: 1100px) {
|
|
|
+// .checkbox_item_container {
|
|
|
+// width:70%
|
|
|
+// }
|
|
|
+// } /*>=1100的设备*/
|
|
|
+@media (min-width: 1280px) {
|
|
|
+ .home-item {
|
|
|
+ border-style: solid;
|
|
|
+ border-width: 1px;
|
|
|
+ border-color: #e4e4e4;
|
|
|
+ width: calc(25% - 10px);
|
|
|
+ padding: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background: #fff;
|
|
|
+ position: relative;
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/*>=1280的设备*/
|
|
|
+
|
|
|
+// @media (min-width: 1366px) {
|
|
|
+// }
|
|
|
+
|
|
|
+// @media (min-width: 1440px) {
|
|
|
+// }
|
|
|
+
|
|
|
+// @media (min-width: 1680px) {
|
|
|
+
|
|
|
+// }
|
|
|
+@media (min-width: 1920px) {
|
|
|
+ .home-item {
|
|
|
+ border-style: solid;
|
|
|
+ border-width: 1px;
|
|
|
+ border-color: #e4e4e4;
|
|
|
+ width: calc(25% - 10px);
|
|
|
+ padding: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background: #fff;
|
|
|
+ position: relative;
|
|
|
+ z-index: 99;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+}
|
|
|
+.actor-photo-list {
|
|
|
+ display: flex;
|
|
|
+ padding-left: 0;
|
|
|
+ li {
|
|
|
+ width: 25%;
|
|
|
+ margin: 10px;
|
|
|
+ position: relative;
|
|
|
+ height: 250px;
|
|
|
+ border: 1px solid #f2f2f2;
|
|
|
+ img,
|
|
|
+ video {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: auto;
|
|
|
+ margin-bottom: auto;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ position: absolute;
|
|
|
+ max-height: 250px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.home-card {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 10px 0px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-right: -10px;
|
|
|
+ .home-right {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .bg:after {
|
|
|
+ content: '';
|
|
|
+ width: 110%;
|
|
|
+ height: 110%;
|
|
|
+ position: absolute;
|
|
|
+ left: -5%;
|
|
|
+ top: -5%;
|
|
|
+ background: inherit;
|
|
|
+ filter: blur(10px);
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+}
|
|
|
+.bh {
|
|
|
+ height: 60px;
|
|
|
+ line-height: 30px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+}
|
|
|
+a {
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<template>
|
|
|
+ <a-card :bordered="false">
|
|
|
+ <!-- 查询区域 -->
|
|
|
+ <div class="table-page-search-wrapper">
|
|
|
+ <a-form layout="inline">
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="选择项目">
|
|
|
+ <a-select placeholder="请输入项目名称" v-model="queryParam.projectId" @change="getList">
|
|
|
+ <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
|
|
|
+ {{ item.projectName }}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <!-- <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="创建者">
|
|
|
+ <a-input placeholder="请输入创建者名称" v-model="queryParam.advertiserId"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col> -->
|
|
|
+ <!-- <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="剪辑">
|
|
|
+ <a-input placeholder="请输入剪辑者名称" v-model="queryParam.advertiserId"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="编导">
|
|
|
+ <a-input placeholder="请输入编导" v-model="queryParam.responsible"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="拍摄">
|
|
|
+ <a-input placeholder="请输入拍摄" v-model="queryParam.responsible"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col> -->
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="时间选择">
|
|
|
+ <a-date-picker v-model="queryParam.createTime" format="YYYY-MM-DD" style="width:100%" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
|
|
+ <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
|
|
+ <a-button type="primary" @click="searchRe" icon="reload" style="margin-left: 8px">重置</a-button>
|
|
|
+ </span>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- table区域-begin -->
|
|
|
+ <!-- <div> -->
|
|
|
+
|
|
|
+ <!-- 操作按钮区域 -->
|
|
|
+
|
|
|
+ <div class="table-operator" style="position:relative;z-index:100">
|
|
|
+ <a-button @click="dirVideoGet" type="primary" icon="plus">新增</a-button>
|
|
|
+ <a-button @click="onCheckAllChange" v-if="active == 'VIDEO_PART'">{{
|
|
|
+ checkAll ? '取消 ( ' + checkArr.length + ' )' : '全选'
|
|
|
+ }}</a-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <a-tabs @change="callbackTwo" v-model="active" type="card" id="material-card">
|
|
|
+ <a-tab-pane :tab="item.tab" v-for="item of examinelList" :key="item.value">
|
|
|
+ <div v-if="dataSource.length > 0">
|
|
|
+ <a-checkbox-group @change="onChangeCheck" v-model="checkArr" class="home-card">
|
|
|
+ <div class="home-item" v-for="(items, index) in dataSource" :key="index" @click="showDetail(items)">
|
|
|
+ <div class="home-right">
|
|
|
+ <a-badge
|
|
|
+ v-if="active == 'VIDEO_PART'"
|
|
|
+ :count="checkArr.indexOf(items.id) > -1 ? checkArr.indexOf(items.id) + 1 : 0"
|
|
|
+ :numberStyle="{ backgroundColor: '#52c41a' }"
|
|
|
+ style="width:100%"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ style="color: #999; fontSize: 16px;padding-bottom:10px;display:block;width:100%;overflow: hidden;text-overflow: ellipsis;"
|
|
|
+ >
|
|
|
+ {{ items.materialName }}
|
|
|
+ </span>
|
|
|
+ </a-badge>
|
|
|
+ <span
|
|
|
+ v-else
|
|
|
+ style="color: #999; fontSize: 16px;padding-bottom:10px;display:block;width:100%;overflow: hidden;text-overflow: ellipsis;"
|
|
|
+ >
|
|
|
+ {{ items.materialName }}
|
|
|
+ </span>
|
|
|
+ <div style="display:flex;justify-content:center;width:100%;height:200px;position:relative">
|
|
|
+ <video
|
|
|
+ :src="items.url"
|
|
|
+ @canplay="a(items)"
|
|
|
+ style="height:200px;max-width:100%;position:absolute;z-index:10;"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="./timg.gif"
|
|
|
+ v-if="!items.showVideo"
|
|
|
+ alt=""
|
|
|
+ style="height:200px;max-width:100%;position:absolute;z-index:11;"
|
|
|
+ @click.stop
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <div v-if="active == '2'" class="bh">驳回原因:{{ items.refuseReason }}</div> -->
|
|
|
+ <span style="color: black; fontSize: 16px;padding-top:10px;display:block;width:100%" @click.stop>
|
|
|
+ {{ items.createTime | getDate }}
|
|
|
+ <a-checkbox :value="items.id" style="float:right"></a-checkbox
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-checkbox-group>
|
|
|
+ <a-pagination
|
|
|
+ size="small"
|
|
|
+ :showTotal="ipagination.showTotal"
|
|
|
+ style="float:right"
|
|
|
+ v-if="dataSource.length > 0"
|
|
|
+ showQuickJumper
|
|
|
+ :pageSize.sync="ipagination.pageSize"
|
|
|
+ :total="ipagination.total"
|
|
|
+ v-model="ipagination.current"
|
|
|
+ @change="getDataSource"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div v-else style="width:100%;height:400px;display:flex;justify-content: center;align-items: center;">
|
|
|
+ <img
|
|
|
+ src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575627350102&di=02972956f2243933bffc0d85099adbfe&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D1095310825%2C1528244349%26fm%3D214%26gp%3D0.jpg"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </a-tab-pane>
|
|
|
+ </a-tabs>
|
|
|
+ <a-modal title="添加素材" v-model="visible" @ok="handleOk" @cancel="close" :maskClosable="false">
|
|
|
+ <a-form :form="form">
|
|
|
+ <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="选择项目">
|
|
|
+ <a-select
|
|
|
+ v-decorator="[
|
|
|
+ 'projectId', // 给表单赋值或拉取表单时,该input对应的key
|
|
|
+ { rules: [{ required: true, message: '请选择项目!' }] }
|
|
|
+ ]"
|
|
|
+ @change="getProjectId"
|
|
|
+ >
|
|
|
+ <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
|
|
|
+ {{ item.projectName }}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="片段种类">
|
|
|
+ <a-select
|
|
|
+ v-decorator="[
|
|
|
+ 'type', // 给表单赋值或拉取表单时,该input对应的key
|
|
|
+ { rules: [{ required: true, message: '请选择片段种类!' }], initialValue: 'VIDEO_HEAD' }
|
|
|
+ ]"
|
|
|
+ @change="getDir"
|
|
|
+ >
|
|
|
+ <a-select-option value="VIDEO_HEAD">片头</a-select-option>
|
|
|
+ <a-select-option value="VIDEO_PART">片段</a-select-option>
|
|
|
+ <a-select-option value="VIDEO_TAIL">片尾</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="视频素材上传">
|
|
|
+ <upload-to-ali
|
|
|
+ :customDomain="customDomain"
|
|
|
+ preview
|
|
|
+ :region="region"
|
|
|
+ :bucket="bucket"
|
|
|
+ :accept="acceptVideo"
|
|
|
+ :max="10"
|
|
|
+ :size="1024000"
|
|
|
+ :accessKeyId="accessKeyId"
|
|
|
+ :accessKeySecret="accessKeySecret"
|
|
|
+ :before-upload="file"
|
|
|
+ :dir="dirVideo"
|
|
|
+ @loaded="overUpload"
|
|
|
+ v-decorator="[
|
|
|
+ 'url', // 给表单赋值或拉取表单时,该input对应的key
|
|
|
+ { rules: [{ required: true, message: '请上传图片!' }] }
|
|
|
+ ]"
|
|
|
+ ></upload-to-ali>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ :label-col="labelCol"
|
|
|
+ :wrapper-col="{
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 18 }
|
|
|
+ }"
|
|
|
+ label="标签"
|
|
|
+ >
|
|
|
+ <template v-for="(tag, index) in tags">
|
|
|
+ <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
|
|
|
+ <a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
|
|
|
+ {{ `${tag.slice(0, 20)}...` }}
|
|
|
+ </a-tag>
|
|
|
+ </a-tooltip>
|
|
|
+ <a-tag v-else :key="tag" :closable="true" :afterClose="() => handleClose(tag)">
|
|
|
+ {{ tag }}
|
|
|
+ </a-tag>
|
|
|
+ </template>
|
|
|
+ <a-input
|
|
|
+ v-if="inputVisible"
|
|
|
+ ref="input"
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ :style="{ width: '78px' }"
|
|
|
+ :value="inputValue"
|
|
|
+ @change="handleInputChange"
|
|
|
+ @blur="handleInputConfirm"
|
|
|
+ @keyup.enter="handleInputConfirm"
|
|
|
+ />
|
|
|
+ <a-tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">
|
|
|
+ <a-icon type="plus" /> New Tag
|
|
|
+ </a-tag>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ :label-col="labelCol"
|
|
|
+ :wrapper-col="{
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 18 }
|
|
|
+ }"
|
|
|
+ label="描述"
|
|
|
+ >
|
|
|
+ <a-textarea
|
|
|
+ placeholder="请输入描述"
|
|
|
+ v-decorator="[
|
|
|
+ 'materialDescribe' // 给表单赋值或拉取表单时,该input对应的key
|
|
|
+ ]"
|
|
|
+ :autosize="{ minRows: 3, maxRows: 10 }"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ </a-modal>
|
|
|
+
|
|
|
+ <a-modal title="素材详情" v-model="visibleDetail" width="70%">
|
|
|
+ <div style="display:flex;height:700px">
|
|
|
+ <div
|
|
|
+ style="width:50%;padding:10px;box-sizing:border-box;display:flex;justify-content:center;border-right:1px solid #f2f2f2"
|
|
|
+ >
|
|
|
+ <video class="video" :src="showUrl" controls="controls" style="width:100%">
|
|
|
+ 您的浏览器不支持 video 标签。
|
|
|
+ </video>
|
|
|
+ </div>
|
|
|
+ <!-- <div style="flex:3;padding:10px;box-sizing:border-box;">
|
|
|
+ <a-form v-if="detail" class="detail">
|
|
|
+ <a-form-item
|
|
|
+ label="视频时长"
|
|
|
+ :label-col="{ span: 6 }"
|
|
|
+ :wrapper-col="{ span: 18 }"
|
|
|
+ v-if="activeKey == 'video'"
|
|
|
+ >
|
|
|
+ {{ detail.parameter.second }}秒
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="尺寸" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
|
|
|
+ {{ detail.parameter.width }}*{{ detail.parameter.height }}
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="大小" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
|
|
|
+ {{ detail.parameter.size }}
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="策划" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
|
|
|
+ {{ detail.ascription.planName }}
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="拍摄" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
|
|
|
+ {{ detail.ascription.shotName }}
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="剪辑"
|
|
|
+ :label-col="{ span: 6 }"
|
|
|
+ :wrapper-col="{ span: 18 }"
|
|
|
+ v-if="detail.ascription.clipName"
|
|
|
+ >
|
|
|
+ {{ detail.ascription.clipName }}
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="标签" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
|
|
|
+ <a-tag v-for="(item, index) of detail.tag" :key="index">{{ item }}</a-tag>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="水印素材下载" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="showUrlWater">
|
|
|
+ <a-button type="primary" @click="downloadByBlob">下载</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="审核人" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="active == '2'">
|
|
|
+ {{ detail.auditorName }}
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="广告语" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="active == '1'">
|
|
|
+ {{ creativeCopywriter ? creativeCopywriter : '无广告语' }}
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="驳回原因" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="active == '2'">
|
|
|
+ {{ refuseReason ? refuseReason : '无原因' }}
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </a-modal>
|
|
|
+
|
|
|
+ <account-check ref="check" @synchro="implement"></account-check>
|
|
|
+ </a-card>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
|
|
+import JEllipsis from '@/components/jeecg/JEllipsis'
|
|
|
+import UploadToAli from '@femessage/upload-to-ali'
|
|
|
+import { fileCheck, fileInsert, fileEdit } from '@/api/actor'
|
|
|
+import { getAction, postAction, postFile } from '@/api/manage'
|
|
|
+
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+import moment from 'moment'
|
|
|
+
|
|
|
+import BMF from 'browser-md5-file'
|
|
|
+
|
|
|
+import accountCheck from './accountCheck'
|
|
|
+export default {
|
|
|
+ name: 'YardList',
|
|
|
+ mixins: [JeecgListMixin],
|
|
|
+ components: {
|
|
|
+ JEllipsis,
|
|
|
+ UploadToAli,
|
|
|
+ accountCheck
|
|
|
+ },
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ inputVisible: false,
|
|
|
+ inputValue: '',
|
|
|
+ labelCol: {
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 6 }
|
|
|
+ },
|
|
|
+ wrapperCol: {
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 12 }
|
|
|
+ },
|
|
|
+ noImgUrl: require('@/assets/img/noImg.png'),
|
|
|
+ queryParam: {},
|
|
|
+ dataElse: [],
|
|
|
+ ascription: {
|
|
|
+ clipId: [], //剪辑人id
|
|
|
+ shotId: [], //拍摄人id
|
|
|
+ planId: [], //策划id
|
|
|
+ planeId: [] //平面id
|
|
|
+ },
|
|
|
+ show: true,
|
|
|
+ visible: false,
|
|
|
+ visibleDetail: false,
|
|
|
+ activeKey: 'video',
|
|
|
+ active: 'VIDEO_HEAD',
|
|
|
+ examinelList: [
|
|
|
+ { value: 'VIDEO_HEAD', tab: '片头' },
|
|
|
+ { value: 'VIDEO_PART', tab: '片段' },
|
|
|
+ { value: 'VIDEO_TAIL', tab: '片尾' }
|
|
|
+ ],
|
|
|
+ // 表头
|
|
|
+ columns: [],
|
|
|
+ urlList: { url: '', md5: '', name: '' },
|
|
|
+ url: {
|
|
|
+ list: '/ctop/materialInfo/list'
|
|
|
+ },
|
|
|
+ detail: false,
|
|
|
+ form: this.$form.createForm(this),
|
|
|
+ tags: [],
|
|
|
+ refuseFile: [],
|
|
|
+ refuseReason: '',
|
|
|
+ creativeCopywriter: '',
|
|
|
+ customDomain: '',
|
|
|
+ region: 'oss-cn-beijing',
|
|
|
+ bucket: 'ctop-part',
|
|
|
+ acceptVideo: 'video/mpeg,video/mp4',
|
|
|
+ acceptImage: 'image/jpeg,image/jpg,image/png',
|
|
|
+ accessKeyId: 'LTAIbNbqWzSOklQV',
|
|
|
+ accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
|
|
|
+ checkArr: [],
|
|
|
+ checkAll: false,
|
|
|
+ showUrl: '',
|
|
|
+ showUrlWater: '',
|
|
|
+ materialDescribe: '',
|
|
|
+ name: '',
|
|
|
+ detail: null,
|
|
|
+ add: true,
|
|
|
+ id: '',
|
|
|
+ role: { roleCode: '', roleName: '' },
|
|
|
+ key: '0',
|
|
|
+ mediaId: null,
|
|
|
+ dirVideo: '',
|
|
|
+ defaultDir: 'VIDEO_HEAD',
|
|
|
+ joinVideo: {
|
|
|
+ head: '',
|
|
|
+ content: [],
|
|
|
+ foot: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ getDate(value) {
|
|
|
+ let date = new Date(value)
|
|
|
+ let y = date.getFullYear()
|
|
|
+ let MM = date.getMonth() + 1
|
|
|
+ MM = MM < 10 ? '0' + MM : MM
|
|
|
+ let d = date.getDate()
|
|
|
+ d = d < 10 ? '0' + d : d
|
|
|
+ return y + '-' + MM + '-' + d
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ dirImg() {
|
|
|
+ let date = new Date()
|
|
|
+ let y = date.getFullYear()
|
|
|
+ let MM = date.getMonth() + 1
|
|
|
+ MM = MM < 10 ? '0' + MM : MM
|
|
|
+ let d = date.getDate()
|
|
|
+ d = d < 10 ? '0' + d : d
|
|
|
+
|
|
|
+ return 'image/' + y + '-' + MM + '-' + d + '/'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.queryParam.type = this.active
|
|
|
+ this.queryParam.userId = this.userInfo().id
|
|
|
+ this.ipagination.pageSize = 8
|
|
|
+ this.getParticipateList()
|
|
|
+ // /sys/user/getRoleInfo
|
|
|
+ getAction('/sys/user/getRoleInfo', { userId: this.userInfo().id }).then(res => {
|
|
|
+ this.role = res
|
|
|
+ })
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ $route: function(n, o) {
|
|
|
+ if (n.path == '/modules/material/materialList') {
|
|
|
+ this.queryParam.userId = this.userInfo().id
|
|
|
+ this.queryParam.type = this.active
|
|
|
+ this.loadData()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ moment,
|
|
|
+ a(item) {
|
|
|
+ item.showVideo = true
|
|
|
+ },
|
|
|
+ getDir(value) {
|
|
|
+ this.defaultDir = value
|
|
|
+ this.setDir()
|
|
|
+ },
|
|
|
+ dirVideoGet() {
|
|
|
+ this.visible = true
|
|
|
+ console.log(this.defaultDir)
|
|
|
+ this.setDir()
|
|
|
+ },
|
|
|
+ setDir() {
|
|
|
+ let date = new Date()
|
|
|
+ let y = date.getFullYear()
|
|
|
+ let MM = date.getMonth() + 1
|
|
|
+ MM = MM < 10 ? '0' + MM : MM
|
|
|
+ let d = date.getDate()
|
|
|
+ d = d < 10 ? '0' + d : d
|
|
|
+
|
|
|
+ this.dirVideo = 'input/' + this.defaultDir + '/' + y + '-' + MM + '-' + d + '/'
|
|
|
+ },
|
|
|
+ tongbu() {
|
|
|
+ this.$refs.check.getData('/ctop/userAllocation/getAccountList', {
|
|
|
+ userId: this.userInfo().id,
|
|
|
+ projectId: this.queryParam.projectId
|
|
|
+ })
|
|
|
+ },
|
|
|
+ implement(data) {
|
|
|
+ var params = {}
|
|
|
+ params.mediaId = this.mediaId
|
|
|
+ params.materialArray = JSON.stringify(this.checkArr)
|
|
|
+ params.accountArray = JSON.stringify(data)
|
|
|
+ postAction('/ctop/materialUpload/uploadAccount', params).then(res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.checkArr = []
|
|
|
+ this.checkAll = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // /ctop/materialUpload/uploadAccount
|
|
|
+ },
|
|
|
+ downloadByBlob() {
|
|
|
+ fetch(this.showUrlWater)
|
|
|
+ .then(res => res.blob())
|
|
|
+ .then(blob => {
|
|
|
+ const a = document.createElement('a')
|
|
|
+ document.body.appendChild(a)
|
|
|
+ a.style.display = 'none'
|
|
|
+ // 使用获取到的blob对象创建的url
|
|
|
+ const url = window.URL.createObjectURL(blob)
|
|
|
+ a.href = url
|
|
|
+ // 指定下载的文件名
|
|
|
+ a.download = this.name
|
|
|
+ a.click()
|
|
|
+ document.body.removeChild(a)
|
|
|
+ // 移除blob对象的url
|
|
|
+ window.URL.revokeObjectURL(url)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ download(href, name) {
|
|
|
+ let eleLink = document.createElement('a')
|
|
|
+ eleLink.download = name
|
|
|
+ eleLink.href = href
|
|
|
+ eleLink.click()
|
|
|
+ eleLink.remove()
|
|
|
+ },
|
|
|
+ ...mapGetters(['nickname', 'avatar', 'userInfo']),
|
|
|
+ onCheckAllChange() {
|
|
|
+ if (this.checkAll) {
|
|
|
+ this.checkArr = []
|
|
|
+ } else {
|
|
|
+ this.checkArr = this.dataSource.map(item => {
|
|
|
+ return item.id
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.checkAll = !this.checkAll
|
|
|
+ this.onChangeCheck(this.checkArr)
|
|
|
+ },
|
|
|
+ searchRe() {
|
|
|
+ this.queryParam.projectId = ''
|
|
|
+ this.queryParam.createTime = ''
|
|
|
+ this.loadData()
|
|
|
+ },
|
|
|
+ getList(value) {
|
|
|
+ this.mediaId = this.dataElse.filter(item => {
|
|
|
+ if (value == item.projectId) {
|
|
|
+ return item
|
|
|
+ }
|
|
|
+ })[0].mediaId
|
|
|
+ this.loadData()
|
|
|
+ },
|
|
|
+ onChangeCheck(checkedList) {
|
|
|
+ // { value: 'VIDEO_HEAD', tab: '片头' },
|
|
|
+ // { value: 'VIDEO_PART', tab: '片段' },
|
|
|
+ // { value: 'VIDEO_TAIL', tab: '片尾' }
|
|
|
+ if (this.active == 'VIDEO_HEAD') {
|
|
|
+ //片头
|
|
|
+ if (this.checkArr.length > 1) {
|
|
|
+ this.checkArr.shift()
|
|
|
+ this.joinVideo.head = checkedList[0]
|
|
|
+ } else if (this.checkArr.length == 1) {
|
|
|
+ this.joinVideo.head = checkedList[0]
|
|
|
+ } else if (this.checkArr.length == 0) {
|
|
|
+ this.joinVideo.head = ''
|
|
|
+ }
|
|
|
+ } else if (this.active == 'VIDEO_TAIL') {
|
|
|
+ //片尾
|
|
|
+ if (this.checkArr.length > 1) {
|
|
|
+ this.checkArr.shift()
|
|
|
+ this.joinVideo.foot = checkedList[0]
|
|
|
+ } else if (this.checkArr.length == 1) {
|
|
|
+ this.joinVideo.foot = checkedList[0]
|
|
|
+ } else if (this.checkArr.length == 0) {
|
|
|
+ this.joinVideo.foot = ''
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ //内容
|
|
|
+ if (checkedList.length == 0) {
|
|
|
+ this.checkAll = false
|
|
|
+ }
|
|
|
+ this.joinVideo.content = checkedList
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleClose(removedTag) {
|
|
|
+ const tags = this.tags.filter(tag => tag !== removedTag)
|
|
|
+ this.tags = tags
|
|
|
+ },
|
|
|
+
|
|
|
+ showInput() {
|
|
|
+ this.inputVisible = true
|
|
|
+ this.$nextTick(function() {
|
|
|
+ this.$refs.input.focus()
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ handleInputChange(e) {
|
|
|
+ this.inputValue = e.target.value
|
|
|
+ },
|
|
|
+
|
|
|
+ handleInputConfirm() {
|
|
|
+ const inputValue = this.inputValue
|
|
|
+ let tags = this.tags
|
|
|
+ if (inputValue && tags.indexOf(inputValue) === -1) {
|
|
|
+ tags = [...tags, inputValue]
|
|
|
+ }
|
|
|
+ Object.assign(this, {
|
|
|
+ tags,
|
|
|
+ inputVisible: false,
|
|
|
+ inputValue: ''
|
|
|
+ })
|
|
|
+ },
|
|
|
+ showDetail(item) {
|
|
|
+ this.visibleDetail = true
|
|
|
+ this.showUrl = item.url
|
|
|
+ this.showUrlWater = item.watermarkUrl ? item.watermarkUrl : null
|
|
|
+ this.name = item.watermarkMaterialName ? item.watermarkMaterialName : null
|
|
|
+ this.id = item.id
|
|
|
+ if (this.active == '2') {
|
|
|
+ this.refuseReason = item.refuseReason
|
|
|
+ this.refuseFile = item.refuseFile ? JSON.parse(item.refuseFile) : null
|
|
|
+ } else if (this.active == '1') {
|
|
|
+ this.creativeCopywriter = item.creativeCopywriter
|
|
|
+ this.refuseReason = ''
|
|
|
+ this.refuseFile = []
|
|
|
+ } else {
|
|
|
+ this.refuseReason = ''
|
|
|
+ this.refuseFile = []
|
|
|
+ }
|
|
|
+ getAction('/ctop/materialInfo/getDetail', { materialId: item.id }).then(res => {
|
|
|
+ this.detail = res
|
|
|
+ })
|
|
|
+ },
|
|
|
+ okEditShow(item, editStatus) {
|
|
|
+ if (editStatus == '2') {
|
|
|
+ var params = {}
|
|
|
+ params.id = item.id
|
|
|
+ params.auditorId = this.userInfo().id
|
|
|
+ params.refuseReason = this.refuseReason
|
|
|
+ var data = this.refuseFile.map(item => {
|
|
|
+ return 'https:' + item
|
|
|
+ })
|
|
|
+ params.refuseFile = JSON.stringify(data)
|
|
|
+ params.status = editStatus
|
|
|
+ fileEdit(params).then(res => {
|
|
|
+ this.refuseFile = []
|
|
|
+ this.refuseReason = ''
|
|
|
+ this.loadData()
|
|
|
+ })
|
|
|
+ } else if (editStatus == '1') {
|
|
|
+ var params = {}
|
|
|
+ params.id = item.id
|
|
|
+ params.auditorId = this.userInfo().id
|
|
|
+ params.creativeCopywriter = this.refuseReason
|
|
|
+ params.status = editStatus
|
|
|
+ fileEdit(params).then(res => {
|
|
|
+ this.refuseReason = ''
|
|
|
+ this.loadData()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ okEdit(e) {
|
|
|
+ this.edit(null, this.active, '2')
|
|
|
+ },
|
|
|
+ edit(item, status, editStatus) {
|
|
|
+ if (status == '0' || status == '1') {
|
|
|
+ if (editStatus == '2') {
|
|
|
+ var params = {}
|
|
|
+ params.id = this.id
|
|
|
+ params.auditorId = this.userInfo().id
|
|
|
+ params.refuseReason = this.refuseReason
|
|
|
+ var data = this.refuseFile.map(item => {
|
|
|
+ return 'https:' + item
|
|
|
+ })
|
|
|
+ params.refuseFile = JSON.stringify(data)
|
|
|
+ params.status = editStatus
|
|
|
+ fileEdit(params).then(res => {
|
|
|
+ this.refuseFile = []
|
|
|
+ this.refuseReason = ''
|
|
|
+ this.loadData()
|
|
|
+ this.visibleDetail = false
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ fileEdit({ id: this.id, status: editStatus, auditorId: this.userInfo().id }).then(res => {
|
|
|
+ this.refuseFile = []
|
|
|
+ this.refuseReason = ''
|
|
|
+ this.loadData()
|
|
|
+ this.visibleDetail = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.add = false
|
|
|
+ this.visible = true
|
|
|
+ this.getProjectId(item.projectId)
|
|
|
+ getAction('/ctop/materialInfo/getDetail', { materialId: item.id }).then(res => {
|
|
|
+ if (this.activeKey == 'image') {
|
|
|
+ this.form.setFieldsValue({
|
|
|
+ projectId: item.projectId,
|
|
|
+ clipId: res.ascription.clipId,
|
|
|
+ planeId: res.ascription.planeId,
|
|
|
+ materialDescribe: item.materialDescribe
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.form.setFieldsValue({
|
|
|
+ projectId: item.projectId,
|
|
|
+ clipId: res.ascription.clipId,
|
|
|
+ planId: res.ascription.planId,
|
|
|
+ shotId: res.ascription.shotId,
|
|
|
+ materialDescribe: item.materialDescribe
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.tags = res.tag
|
|
|
+ this.urlList.url = item.url
|
|
|
+ this.urlList.md5 = item.code
|
|
|
+ this.urlList.name = item.materialName
|
|
|
+ this.watermarkUrl.url = item.watermarkUrl
|
|
|
+ this.watermarkUrl.md5 = item.watermarkCode
|
|
|
+ this.watermarkUrl.name = item.watermarkMaterialName
|
|
|
+ this.id = item.id
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleOk() {
|
|
|
+ this.form.validateFieldsAndScroll((err, values) => {
|
|
|
+ if (err) {
|
|
|
+ // 这里做逻辑处理
|
|
|
+ } else {
|
|
|
+ var params = {}
|
|
|
+ var roleCode = {}
|
|
|
+ for (const key in this.role) {
|
|
|
+ if (key == 'roleCode') {
|
|
|
+ this.role[key] = this.role[key] + 'Id'
|
|
|
+ roleCode[this.role[key]] = this.userInfo().id
|
|
|
+ }
|
|
|
+ }
|
|
|
+ params.id = this.add ? null : this.id
|
|
|
+ params.code = this.urlList.md5
|
|
|
+ params.url = values.url
|
|
|
+ params.materialName = this.urlList.name
|
|
|
+ params.userId = this.userInfo().id
|
|
|
+ params.projectId = values.projectId
|
|
|
+ params.materialDescribe = values.materialDescribe
|
|
|
+ params.ascription = roleCode
|
|
|
+ params.type = values.type
|
|
|
+ params.tag = this.tags
|
|
|
+ if (this.add) {
|
|
|
+ fileInsert(params).then(res => {
|
|
|
+ this.form.resetFields()
|
|
|
+ this.urlList = { url: '', md5: '', name: '' }
|
|
|
+ this.watermarkUrl = { url: '', md5: '', name: '' }
|
|
|
+ this.tags = []
|
|
|
+ this.loadData()
|
|
|
+ this.visible = false
|
|
|
+ this.add = true
|
|
|
+ for (const key in this.role) {
|
|
|
+ if (key == 'roleCode') {
|
|
|
+ this.role[key] = this.role[key].substr(0, this.role[key].length - 2)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ fileEdit({ ...params, status: '0' }).then(res => {
|
|
|
+ this.form.resetFields()
|
|
|
+ this.urlList = { url: '', md5: '', name: '' }
|
|
|
+ this.watermarkUrl = { url: '', md5: '', name: '' }
|
|
|
+ this.tags = []
|
|
|
+ this.loadData()
|
|
|
+ this.visible = false
|
|
|
+ this.add = true
|
|
|
+ for (const key in this.role) {
|
|
|
+ if (key == 'roleCode') {
|
|
|
+ this.role[key] = this.role[key].substr(0, this.role[key].length - 2)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ var that = this
|
|
|
+ that.form.resetFields()
|
|
|
+ that.urlList = { url: '', md5: '', name: '' }
|
|
|
+ that.watermarkUrl = { url: '', md5: '', name: '' }
|
|
|
+ that.tags = []
|
|
|
+ },
|
|
|
+ onChange(date, dateString) {},
|
|
|
+ callbackTwo(key) {
|
|
|
+ this.checkArr = []
|
|
|
+
|
|
|
+ this.queryParam.type = key
|
|
|
+ this.loadData()
|
|
|
+ if (key == 'VIDEO_HEAD') {
|
|
|
+ this.checkArr[0] = this.joinVideo.head
|
|
|
+ } else if (key == 'VIDEO_TAIL') {
|
|
|
+ this.checkArr[0] = this.joinVideo.foot
|
|
|
+ } else if (key == 'VIDEO_PART') {
|
|
|
+ this.checkArr = this.joinVideo.content
|
|
|
+ }
|
|
|
+ if (this.form.getFieldValue('projectId')) {
|
|
|
+ this.form.setFieldsValue({ projectId: '' })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ overUpload(urlAll) {
|
|
|
+ console.log(urlAll)
|
|
|
+ this.form.setFieldsValue({ url: urlAll })
|
|
|
+ },
|
|
|
+ file(file) {
|
|
|
+ var bmf = new BMF()
|
|
|
+ var that = this
|
|
|
+ return new Promise(function(resolve, reject) {
|
|
|
+ bmf.md5(file[0], (err, md5) => {
|
|
|
+ that.urlList.name = file[0].name
|
|
|
+ that.urlList.md5 = md5
|
|
|
+ fileCheck({ code: md5 }).then(res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ that.$message.error('此素材已经上传')
|
|
|
+ reject()
|
|
|
+ } else {
|
|
|
+ resolve()
|
|
|
+ // reject()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ fileWater(file) {
|
|
|
+ var bmf = new BMF()
|
|
|
+ var that = this
|
|
|
+ return new Promise(function(resolve, reject) {
|
|
|
+ bmf.md5(file[0], (err, md5) => {
|
|
|
+ that.watermarkUrl.name = file[0].name
|
|
|
+ that.watermarkUrl.md5 = md5
|
|
|
+ fileCheck({ code: md5 }).then(res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ that.$message.error('此素材已经上传')
|
|
|
+ reject()
|
|
|
+ } else {
|
|
|
+ resolve()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getParticipateList() {
|
|
|
+ getAction('/ctop/projectMember/participateList', { userId: this.userInfo().id }).then(res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.dataElse = res.result
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getProjectId(items) {
|
|
|
+ getAction('/ctop/projectMember/getMemberList', { projectId: items }).then(res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.ascription.clipId = res.result.filter(item => {
|
|
|
+ if (item.roleCode == 'clip') {
|
|
|
+ return { userId: item.userId, userName: item.userName }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.ascription.shotId = res.result.filter(item => {
|
|
|
+ if (item.roleCode == 'shot') {
|
|
|
+ return { userId: item.userId, userName: item.userName }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.ascription.planId = res.result.filter(item => {
|
|
|
+ if (item.roleCode == 'plan') {
|
|
|
+ return { userId: item.userId, userName: item.userName }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.ascription.planeId = res.result.filter(item => {
|
|
|
+ if (item.roleCode == 'plane') {
|
|
|
+ return { userId: item.userId, userName: item.userName }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getDataSource(page, pageSize) {
|
|
|
+ this.ipagination.current = page
|
|
|
+ this.checkArr = []
|
|
|
+ this.checkAll = false
|
|
|
+ this.loadData()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+@import '~@assets/less/common.less';
|
|
|
+</style>
|