You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2162 lines
64 KiB
2162 lines
64 KiB
<template>
|
|
<div style="padding:10px;">
|
|
<!-- 搜索栏 -->
|
|
<div class="search">
|
|
<el-form :inline="true">
|
|
<el-form-item label="剧本标题:" style="margin-right:50px;">
|
|
<el-input
|
|
v-model="queryParams.query.title"
|
|
style="height:30px;"
|
|
placeholder="请输入剧本标题"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="工作室:" style="margin-right:50px;">
|
|
<el-input
|
|
v-model="queryParams.query.studioName"
|
|
style="height:30px;"
|
|
placeholder="请输入工作室"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="标签:" style="margin-right:50px;">
|
|
<el-input
|
|
v-model="queryParams.query.labelName"
|
|
style="height:30px;"
|
|
placeholder="请输入标签"
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="search-button">
|
|
<el-button
|
|
size="medium"
|
|
type="primary"
|
|
style="height:36px;width:100px;"
|
|
@click="search"
|
|
>搜索</el-button
|
|
>
|
|
<el-button
|
|
size="medium"
|
|
style="margin-left:20px;height:36px;width:100px;"
|
|
@click="refresh"
|
|
>重置</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="add-button">
|
|
<el-button
|
|
size="medium"
|
|
type="primary"
|
|
style="height:36px;width:100px;"
|
|
@click="handleAdd"
|
|
>新建</el-button
|
|
>
|
|
</div>
|
|
<!-- 列表 -->
|
|
<div class="content">
|
|
<el-table
|
|
v-loading="loading"
|
|
ref="singleTable"
|
|
:data="tableData"
|
|
border
|
|
style="width: 100%"
|
|
>
|
|
<el-table-column align="center" type="index" label="序号" width="50" />
|
|
<el-table-column align="center" property="title" label="剧本标题" />
|
|
<el-table-column align="center" property="studioName" label="工作室" />
|
|
<el-table-column align="center" property="labelName" label="标签" />
|
|
<el-table-column
|
|
align="center"
|
|
property="createTime"
|
|
label="创建时间"
|
|
/>
|
|
<el-table-column align="center" label="操作">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" size="mini" @click="handleView(scope.row)"
|
|
><div style="color:#000;">查看</div></el-button
|
|
>
|
|
<el-button type="text" size="mini" @click="handleEdit(scope.row)"
|
|
><div style="color:#02A7F0;">编辑</div></el-button
|
|
>
|
|
<el-button type="text" size="mini" @click="handleTips(scope.row)"
|
|
>Tips维护</el-button
|
|
>
|
|
<el-button type="text" size="mini" @click="hanDel(scope.row)"
|
|
><div style="color:#D9001B;">删除</div></el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<pagination
|
|
v-show="total > 0"
|
|
:total="total"
|
|
:page.sync="queryParams.pageNum"
|
|
:limit.sync="queryParams.pageSize"
|
|
@pagination="queryList"
|
|
/>
|
|
</div>
|
|
<!-- 新增表单 -->
|
|
<el-dialog
|
|
@open="openDialog"
|
|
:title="dialog.title"
|
|
:visible.sync="dialog.Visible"
|
|
width="1000px"
|
|
:before-close="handleClose"
|
|
>
|
|
<el-form
|
|
ref="ruleForm"
|
|
:model="ruleForm"
|
|
:rules="rules"
|
|
:inline="true"
|
|
label-width="100px"
|
|
class="demo-ruleForm"
|
|
>
|
|
<h3 class="form-title">基本信息</h3>
|
|
<el-form-item label="剧本标题:" prop="title" style="width:45%">
|
|
<el-input
|
|
:disabled="disabled"
|
|
v-model="ruleForm.title"
|
|
style="width:300px;"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="工作室:" prop="studioName" style="width:45%">
|
|
<el-input
|
|
:disabled="disabled"
|
|
v-model="ruleForm.studioName"
|
|
style="width:300px;"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="标签:" prop="labelName" style="width:100%">
|
|
<el-input
|
|
:disabled="disabled"
|
|
v-model="ruleForm.labelName"
|
|
style="width:300px;"
|
|
/>
|
|
</el-form-item>
|
|
<h3 class="form-title">剧本图片</h3>
|
|
<el-form-item label="封面" prop="cover">
|
|
<el-image
|
|
v-if="type == 'view'"
|
|
style="width: 146px; height: 146px"
|
|
:src="ruleForm.cover"
|
|
fit="fill"
|
|
>
|
|
</el-image>
|
|
<el-upload
|
|
v-if="type == 'add' || type == 'edit'"
|
|
class="avatar-uploader"
|
|
action
|
|
:show-file-list="false"
|
|
:auto-upload="false"
|
|
:on-change="uploadImg"
|
|
:on-success="handleAvatar"
|
|
:before-upload="beforeAvatarUpload"
|
|
>
|
|
<img v-if="ruleForm.cover" :src="ruleForm.cover" class="avatar" />
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
</el-upload>
|
|
</el-form-item>
|
|
<el-form-item label="其它图片" style="width:100%">
|
|
<div
|
|
v-for="(item, l) in dataImg"
|
|
:key="l"
|
|
class="imgdata"
|
|
style="margin-left:10px;"
|
|
>
|
|
<el-image
|
|
style="width: 146px; height: 146px"
|
|
:src="item"
|
|
fit="fill"
|
|
>
|
|
</el-image>
|
|
<div class="imgdialog" v-if="type == 'add' || type == 'edit'">
|
|
<p>
|
|
<i
|
|
class="el-icon-delete"
|
|
@click="delDataImg(item, l)"
|
|
style="font-size: 20px;"
|
|
></i>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<el-upload
|
|
v-if="type == 'add' || type == 'edit'"
|
|
class="avatar-uploader"
|
|
style="float:left;margin-left: 10px;"
|
|
action
|
|
list-type="picture-card"
|
|
:show-file-list="false"
|
|
:http-request="changeImgs"
|
|
>
|
|
<i class="el-icon-plus"></i>
|
|
</el-upload>
|
|
<!-- <el-upload
|
|
v-if="type == 'add' || type == 'edit'"
|
|
action
|
|
class="avatar-uploader"
|
|
list-type="picture-card"
|
|
:auto-upload="false"
|
|
:on-change="changeImgs"
|
|
:on-success="handleAvatarSuccess"
|
|
:before-upload="beforeAvatarUpload"
|
|
:file-list="dataImgs"
|
|
>
|
|
<i class="el-icon-plus" />
|
|
<div slot="file" slot-scope="{ file }">
|
|
<img
|
|
class="el-upload-list__item-thumbnail"
|
|
:src="file.url"
|
|
alt=""
|
|
/>
|
|
<span class="el-upload-list__item-actions">
|
|
<span
|
|
v-if="!disabled"
|
|
class="el-upload-list__item-delete"
|
|
@click="handleRemove(file)"
|
|
>
|
|
<i class="el-icon-delete"></i>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</el-upload> -->
|
|
</el-form-item>
|
|
<h3 class="form-title">剧本简介</h3>
|
|
<el-form-item label="简介" prop="introduction" style="width:100%">
|
|
<!-- <el-input
|
|
v-if="type == 'view'"
|
|
:disabled="disabled"
|
|
v-model="ruleForm.introduction"
|
|
style="width:700px"
|
|
rows="10"
|
|
type="textarea"
|
|
/> -->
|
|
<div
|
|
v-if="type == 'view'"
|
|
style="width:700px;height:400px;border:1px solid #ddd;padding:10px;"
|
|
v-html="ruleForm.introduction"
|
|
></div>
|
|
<!-- <Tinymce
|
|
v-if="type == 'add' || type == 'edit'"
|
|
ref="editor"
|
|
v-model="ruleForm.introduction"
|
|
:height="400"
|
|
:width="700"
|
|
/> -->
|
|
<el-input
|
|
type="textarea"
|
|
v-if="type == 'add' || type == 'edit'"
|
|
style="width:700px"
|
|
rows="10"
|
|
placeholder="请输入内容"
|
|
v-model="ruleForm.introduction"
|
|
></el-input>
|
|
</el-form-item>
|
|
<h3 class="form-title">开本流程</h3>
|
|
<div v-if="type == 'add' || type == 'edit'">
|
|
<el-table
|
|
:header-cell-style="{ background: '#eee', color: '#606266' }"
|
|
:data="ruleForm.processesList"
|
|
border
|
|
style="width: 90%;margin-left:30px;"
|
|
>
|
|
<el-table-column
|
|
align="center"
|
|
type="index"
|
|
label="序号"
|
|
width="50"
|
|
/>
|
|
<el-table-column
|
|
align="center"
|
|
property="title"
|
|
label="流程标题"
|
|
width="130"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-input
|
|
v-model="ruleForm.processesList[scope.$index].title"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
property="code"
|
|
label="流程编号"
|
|
width="100"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-input
|
|
@input="changCode"
|
|
v-model.number="ruleForm.processesList[scope.$index].code"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
property="introduction"
|
|
label="简介"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-input
|
|
v-model="ruleForm.processesList[scope.$index].introduction"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
property="sort"
|
|
label="排序"
|
|
width="100"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-input
|
|
type="number"
|
|
@input="changSort"
|
|
@mousewheel.native.prevent
|
|
@keyup.native="prevent($event)"
|
|
v-model="ruleForm.processesList[scope.$index].sort"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="操作" width="100">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" size="mini" @click="Del(scope.$index)"
|
|
>删除</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
|
|
<div v-if="type == 'view'">
|
|
<el-table
|
|
:header-cell-style="{ background: '#eee', color: '#606266' }"
|
|
:data="ruleForm.processesList"
|
|
border
|
|
style="width: 90%;margin-left:30px;"
|
|
>
|
|
<el-table-column
|
|
align="center"
|
|
type="index"
|
|
label="序号"
|
|
width="50"
|
|
/>
|
|
<el-table-column align="center" property="title" label="流程标题">
|
|
</el-table-column>
|
|
<el-table-column align="center" property="code" label="流程编号">
|
|
</el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
property="introduction"
|
|
label="简介"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
property="sort"
|
|
label="排序"
|
|
width="50"
|
|
>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div style="margin-top:15px;" v-if="type == 'add' || type == 'edit'">
|
|
<el-button
|
|
type="success"
|
|
:disabled="disabledButton"
|
|
style="height:36px;width:100px;margin-left:30px;color:#fff;background:#33DB99"
|
|
@click="handleAddK"
|
|
>新增</el-button
|
|
>
|
|
</div>
|
|
<h3 class="form-title">剧本资源</h3>
|
|
<!-- <el-form-item label="图片" prop="imgUrls" style="width: 100%;">
|
|
<el-radio-group
|
|
:disabled="disabled"
|
|
v-model="radioImg"
|
|
@change="changeImg"
|
|
>
|
|
<el-radio :label="1">本地上传</el-radio>
|
|
<el-radio :label="2">网易云地址</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item> -->
|
|
<el-form-item
|
|
label="图片"
|
|
prop="imgUrls"
|
|
style="width: 100%;"
|
|
:style="dialog.title != '查看剧本' ? '' : 'pointer-events:none'"
|
|
v-if="radioImg == 1"
|
|
>
|
|
<div v-for="(item, s) in imgData" :key="s" class="imgdata">
|
|
<el-image
|
|
style="width: 146px; height: 146px"
|
|
:src="item.url"
|
|
fit="fill"
|
|
>
|
|
</el-image>
|
|
<div class="imgdialog">
|
|
<p>
|
|
<i
|
|
class="el-icon-delete"
|
|
@click="deldialogimg(item, s, 'img')"
|
|
style="font-size: 20px;"
|
|
></i>
|
|
</p>
|
|
</div>
|
|
<div class="sz_container" style="text-align:center">
|
|
<span>{{ item.processNames }}</span>
|
|
</div>
|
|
<div
|
|
v-if="type == 'add' || type == 'edit'"
|
|
class="sz_container"
|
|
style="text-align:center"
|
|
>
|
|
<el-button size="mini" type="text" @click="setLc(item, s, 'img')"
|
|
>关联流程</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
<el-upload
|
|
v-if="type == 'add' || type == 'edit'"
|
|
class="avatar-uploader"
|
|
style="float:left;margin-left:60px"
|
|
action
|
|
list-type="picture-card"
|
|
:show-file-list="false"
|
|
:http-request="labeluploadimg"
|
|
>
|
|
<i class="el-icon-plus"></i>
|
|
</el-upload>
|
|
<el-dialog :visible.sync="dialogVisible">
|
|
<img width="100%" :src="dialogImageUrl" alt="" />
|
|
</el-dialog>
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="radioImg == 2"
|
|
style="width: 100%;"
|
|
class="urlTable"
|
|
>
|
|
<el-table
|
|
ref="img"
|
|
v-if="type == 'add' || type == 'edit'"
|
|
:data="ruleForm.radioImg"
|
|
border
|
|
style="width: 80%;margin-left:100px;"
|
|
>
|
|
<el-table-column
|
|
align="center"
|
|
type="index"
|
|
label="序号"
|
|
width="50"
|
|
/>
|
|
<el-table-column align="center" property="date" label="资源标题">
|
|
<template slot-scope="scope">
|
|
<el-input v-model="ruleForm.radioImg[scope.$index].title" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" property="url" label="资源URL">
|
|
<template slot-scope="scope">
|
|
<el-input v-model="ruleForm.radioImg[scope.$index].url" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
property="processId"
|
|
label="关联流程"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-select
|
|
v-model="ruleForm.radioImg[scope.$index].processId"
|
|
clearable
|
|
multiple
|
|
@change="changePro('img')"
|
|
placeholder="请选择流程"
|
|
>
|
|
<el-option
|
|
v-for="(item, o) in ruleForm.processesList"
|
|
:key="o"
|
|
:label="item.title"
|
|
:value="item.code"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="操作">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" size="mini" @click="DelImg(scope.$index)"
|
|
>删除</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-table
|
|
v-if="type == 'view'"
|
|
:data="ruleForm.radioImg"
|
|
border
|
|
style="width: 80%;margin-left:100px;"
|
|
>
|
|
<el-table-column
|
|
align="center"
|
|
type="index"
|
|
label="序号"
|
|
width="50"
|
|
/>
|
|
<el-table-column align="center" property="title" label="资源标题" />
|
|
<el-table-column align="center" property="url" label="资源URL" />
|
|
<el-table-column
|
|
align="center"
|
|
property="processId"
|
|
label="关联流程"
|
|
>
|
|
<template slot-scope="scope">
|
|
{{ scope.row.processNames }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div style="margin-top:15px;" v-if="type == 'add' || type == 'edit'">
|
|
<el-button
|
|
type="success"
|
|
style="height:36px;width:100px;margin-left:30px;color:#fff;background:#33DB99"
|
|
@click="handleAddImg"
|
|
>新增</el-button
|
|
>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="音频" prop="imgUrls" style="width: 100%;">
|
|
<el-radio-group
|
|
:disabled="disabled"
|
|
v-model="radioMusic"
|
|
@change="changeMusic"
|
|
>
|
|
<el-radio :label="1">本地上传</el-radio>
|
|
<el-radio :label="2">网易云地址</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item
|
|
style="margin-left: 100px;"
|
|
class="audioUpload"
|
|
v-if="radioMusic == 1"
|
|
>
|
|
<div v-for="(item, i) in musicData" :key="i" class="imgdata">
|
|
<!-- <el-image
|
|
style="width: 146px; height: 146px"
|
|
:src="item.url"
|
|
fit="fill"
|
|
>
|
|
</el-image> -->
|
|
<audio
|
|
:src="item.url"
|
|
width="178px"
|
|
height="178px"
|
|
controls="controls"
|
|
v-if="musicData.length > 0"
|
|
></audio>
|
|
<!-- <audio
|
|
style="width: 146px; height: 146px"
|
|
:src="item.url"
|
|
v-if="musicData.length > 0 "
|
|
></audio> -->
|
|
<!-- <div class="imgdialog">
|
|
<p>
|
|
<i class="el-icon-zoom-in" style="font-size: 20px"></i>
|
|
<i
|
|
class="el-icon-delete"
|
|
@click="deldialogimg(item, i, 'music')"
|
|
style="font-size: 20px; padding-left: 30px"
|
|
></i>
|
|
</p>
|
|
</div> -->
|
|
<div class="sz_container" style="text-align:center">
|
|
<span>{{ item.processNames }}</span>
|
|
</div>
|
|
<div
|
|
v-if="type == 'add' || type == 'edit'"
|
|
class="sz_container"
|
|
style="display: flex;justify-content: space-around;"
|
|
>
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
@click="setLc(item, i, 'music')"
|
|
>关联流程</el-button
|
|
>
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
@click="deldialogimg(item, i, 'music')"
|
|
>删除音频</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
<el-upload
|
|
v-if="type == 'add' || type == 'edit'"
|
|
class="avatar-uploader"
|
|
style="float:left;margin-left:60px"
|
|
action
|
|
list-type="picture-card"
|
|
:show-file-list="false"
|
|
:before-upload="uploadAudio"
|
|
:http-request="labeluploadmusic"
|
|
element-loading-text="正在上传..."
|
|
v-loading="loadingAudio"
|
|
>
|
|
<i class="el-icon-plus"></i>
|
|
</el-upload>
|
|
<el-dialog :visible.sync="dialogVisible">
|
|
<img width="100%" :src="dialogImageUrl" alt="" />
|
|
</el-dialog>
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="radioMusic == 2"
|
|
style="width: 100%;"
|
|
class="urlTable"
|
|
>
|
|
<el-table
|
|
ref="music"
|
|
v-if="type == 'add' || type == 'edit'"
|
|
:data="ruleForm.radioMusic"
|
|
border
|
|
style="width: 80%;margin-left:100px;"
|
|
>
|
|
<el-table-column
|
|
align="center"
|
|
type="index"
|
|
label="序号"
|
|
width="50"
|
|
/>
|
|
<el-table-column align="center" property="title" label="资源标题">
|
|
<template slot-scope="scope">
|
|
<el-input v-model="ruleForm.radioMusic[scope.$index].title" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" property="url" label="资源URL">
|
|
<template slot-scope="scope">
|
|
<el-input v-model="ruleForm.radioMusic[scope.$index].url" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
property="processId"
|
|
label="关联流程"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-select
|
|
v-model="ruleForm.radioMusic[scope.$index].processId"
|
|
clearable
|
|
multiple
|
|
@change="changePro('music')"
|
|
placeholder="请选择流程"
|
|
>
|
|
<el-option
|
|
v-for="item in ruleForm.processesList"
|
|
:key="item.value"
|
|
:label="item.title"
|
|
:value="item.code"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="操作">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
type="text"
|
|
size="mini"
|
|
@click="DelMusic(scope.$index)"
|
|
>删除</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-table
|
|
v-if="type == 'view'"
|
|
:data="ruleForm.radioMusic"
|
|
border
|
|
style="width: 80%;margin-left:100px;"
|
|
>
|
|
<el-table-column
|
|
align="center"
|
|
type="index"
|
|
label="序号"
|
|
width="50"
|
|
/>
|
|
<el-table-column align="center" property="title" label="资源标题">
|
|
<template>
|
|
<div>
|
|
11111111
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" property="url" label="资源URL" />
|
|
<el-table-column
|
|
align="center"
|
|
property="processId"
|
|
label="关联流程"
|
|
>
|
|
<template slot-scope="scope">
|
|
{{ scope.row.processNames }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div style="margin-top:15px;" v-if="type == 'add' || type == 'edit'">
|
|
<el-button
|
|
type="success"
|
|
style="height:36px;width:100px;margin-left:30px;color:#fff;background:#33DB99"
|
|
@click="handleAddMusic"
|
|
>新增</el-button
|
|
>
|
|
</div>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="视频" prop="imgUrls" style="width: 100%;">
|
|
<el-radio-group
|
|
:disabled="disabled"
|
|
v-model="radioVideo"
|
|
@change="changeVideo"
|
|
>
|
|
<el-radio :label="1">本地上传</el-radio>
|
|
<el-radio :label="2">网易云地址</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item> -->
|
|
<el-form-item
|
|
label="视频"
|
|
prop="imgUrls"
|
|
style="width: 100%;"
|
|
class="videoUpload"
|
|
v-if="radioVideo == 1"
|
|
>
|
|
<div v-for="(item, idx) in videoData" :key="idx" class="imgdata">
|
|
<!-- <el-image
|
|
style="width: 146px; height: 146px"
|
|
:src="item.url"
|
|
fit="fill"
|
|
>
|
|
</el-image> -->
|
|
<video
|
|
:src="item.url"
|
|
width="178px"
|
|
height="178px"
|
|
controls="controls"
|
|
v-if="videoData.length > 0"
|
|
></video>
|
|
<!-- <div class="imgdialog">
|
|
<p>
|
|
<i class="el-icon-zoom-in" @click="handleView(item,idx)" style="font-size: 20px"></i>
|
|
<i
|
|
class="el-icon-delete"
|
|
@click="deldialogimg(item, idx, 'video')"
|
|
style="font-size: 20px; padding-left: 30px"
|
|
></i>
|
|
</p>
|
|
</div> -->
|
|
<div
|
|
class="sz_container"
|
|
style="width:178px; text-align:center;margin-right:20px;"
|
|
>
|
|
<span>{{ item.processNames }}</span>
|
|
</div>
|
|
<div
|
|
v-if="type == 'add' || type == 'edit'"
|
|
class="sz_container"
|
|
style="width:178px"
|
|
>
|
|
<el-button
|
|
style="margin-right:60px;"
|
|
size="mini"
|
|
type="text"
|
|
@click="setLc(item, idx, 'video')"
|
|
>关联流程</el-button
|
|
>
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
@click="deldialogimg(item, idx, 'video')"
|
|
>删除视频</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
<el-upload
|
|
v-if="type == 'add' || type == 'edit'"
|
|
class="avatar-uploader"
|
|
style="float:left;margin-left:60px"
|
|
action
|
|
list-type="picture-card"
|
|
:show-file-list="false"
|
|
:before-upload="uploadVideo"
|
|
:http-request="labeluploadvideo"
|
|
element-loading-text="正在上传..."
|
|
v-loading="loading"
|
|
>
|
|
<i class="el-icon-plus"></i>
|
|
</el-upload>
|
|
<el-dialog :visible.sync="dialogVideo"> </el-dialog>
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="radioVideo == 2"
|
|
style="width: 100%;"
|
|
class="urlTable"
|
|
>
|
|
<el-table
|
|
ref="video"
|
|
v-if="type == 'add' || type == 'edit'"
|
|
:data="ruleForm.radioVideo"
|
|
border
|
|
style="width: 80%;margin-left:100px;"
|
|
>
|
|
<el-table-column
|
|
align="center"
|
|
type="index"
|
|
label="序号"
|
|
width="50"
|
|
/>
|
|
<el-table-column align="center" property="title" label="资源标题">
|
|
<template slot-scope="scope">
|
|
<el-input v-model="ruleForm.radioVideo[scope.$index].title" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" property="url" label="资源URL">
|
|
<template slot-scope="scope">
|
|
<el-input v-model="ruleForm.radioVideo[scope.$index].url" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
property="processId"
|
|
label="关联流程"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-select
|
|
v-model="ruleForm.radioVideo[scope.$index].processId"
|
|
clearable
|
|
multiple
|
|
@change="changePro('video')"
|
|
placeholder="请选择流程"
|
|
>
|
|
<el-option
|
|
v-for="(item, u) in ruleForm.processesList"
|
|
:key="u"
|
|
:label="item.title"
|
|
:value="item.code"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="操作">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
type="text"
|
|
size="mini"
|
|
@click="DelVideo(scope.$index)"
|
|
>删除</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-table
|
|
v-if="type == 'view'"
|
|
:data="ruleForm.radioVideo"
|
|
border
|
|
style="width: 80%;margin-left:100px;"
|
|
>
|
|
<el-table-column
|
|
align="center"
|
|
type="index"
|
|
label="序号"
|
|
width="50"
|
|
/>
|
|
<el-table-column align="center" property="title" label="资源标题" />
|
|
<el-table-column align="center" property="url" label="资源URL" />
|
|
<el-table-column
|
|
align="center"
|
|
property="processId"
|
|
label="关联流程"
|
|
>
|
|
<template slot-scope="scope">
|
|
{{ scope.row.processNames }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div v-if="type == 'add' || type == 'edit'" style="margin-top:15px;">
|
|
<el-button
|
|
type="success"
|
|
style="height:36px;width:100px;margin-left:30px;color:#fff;background:#33DB99"
|
|
@click="handleAddVideo"
|
|
>新增</el-button
|
|
>
|
|
</div>
|
|
</el-form-item>
|
|
<!-- <el-form-item>
|
|
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
|
|
<el-button @click="resetForm('ruleForm')">重置</el-button>
|
|
</el-form-item> -->
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="subEsc">取 消</el-button>
|
|
<el-button
|
|
v-if="type == 'add' || type == 'edit'"
|
|
type="primary"
|
|
@click="subMit"
|
|
>确 定</el-button
|
|
>
|
|
</span>
|
|
</el-dialog>
|
|
<!-- 关联流程 -->
|
|
<el-dialog
|
|
title="关联流程"
|
|
:visible.sync="process.Visible"
|
|
width="30%"
|
|
center
|
|
>
|
|
<el-form>
|
|
<el-form-item label="关联流程">
|
|
<el-select
|
|
v-model="processId"
|
|
clearable
|
|
multiple
|
|
placeholder="请选择流程"
|
|
@change="changeLiuc"
|
|
>
|
|
<el-option
|
|
v-for="(item, y) in ruleForm.processesList"
|
|
:key="y"
|
|
:label="item.title"
|
|
:value="item.code"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="process.Visible = false">取 消</el-button>
|
|
<el-button type="primary" @click="subMitLc">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Tinymce from "@/components/Tinymce";
|
|
import {
|
|
queryJbInfo,
|
|
addJbInfo,
|
|
updateJbInfo,
|
|
queryJbDetail,
|
|
deleteJbInfo,
|
|
queryFindList //获取流程列表
|
|
} from "@/api/sce/sce.js";
|
|
import { uploadFile, delFile } from "@/api/upload/upload.js";
|
|
const baseUrl = process.env.VUE_APP_BASE_API;
|
|
export default {
|
|
components: { Tinymce },
|
|
data() {
|
|
return {
|
|
loadingAudio: false,
|
|
baseUrl,
|
|
loading: true,
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
query: {
|
|
title: undefined,
|
|
studioName: undefined,
|
|
labelName: undefined
|
|
}
|
|
},
|
|
tableData: [],
|
|
rules: {
|
|
title: [{ required: true, message: "请输入标题名称", trigger: "blur" }],
|
|
labelName: [
|
|
{ required: true, message: "请输入标签名称", trigger: "blur" }
|
|
],
|
|
cover: [{ required: true, message: "请选择封面", trigger: "blur" }],
|
|
introduction: [
|
|
{ required: true, message: "请输入简介", trigger: "blur" }
|
|
]
|
|
},
|
|
dialog: {
|
|
title: "新增剧本",
|
|
Visible: false
|
|
},
|
|
ruleForm: {
|
|
processesList: [],
|
|
imgUrl: "",
|
|
imgUrls: [],
|
|
radioImg: [],
|
|
radioMusic: [],
|
|
radioVideo: [],
|
|
resourcesList: []
|
|
},
|
|
dialogVisible: false,
|
|
active: "",
|
|
imageUrl: "",
|
|
total: 0,
|
|
dialogVisible: false,
|
|
dialogImageUrl: "",
|
|
dataImg: [],
|
|
dataImgs: [],
|
|
lcData: [],
|
|
radioImg: "1",
|
|
radioMusic: "1",
|
|
radioVideo: "1",
|
|
type: "",
|
|
imgData: [],
|
|
musicData: [],
|
|
videoData: [],
|
|
processId: [],
|
|
process: {
|
|
Visible: false
|
|
},
|
|
list: {},
|
|
typeUrl: "",
|
|
imgType: false,
|
|
musicType: false,
|
|
videoType: false,
|
|
imgIndex: "",
|
|
musicIdnex: "",
|
|
videoIndex: "",
|
|
dataList: {},
|
|
disabled: false,
|
|
disabledButton: false,
|
|
dialogVideo: false
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
this.queryList();
|
|
// this.queryFindList();
|
|
},
|
|
methods: {
|
|
changeLiuc(e){
|
|
// console.log(e);
|
|
},
|
|
//音频校验
|
|
uploadAudio(file) {
|
|
console.log(file);
|
|
if (
|
|
[
|
|
"audio/mpeg"
|
|
// "video/ogg",
|
|
// "video/flv",
|
|
// "video/avi",
|
|
// "video/rmvb",
|
|
// "video/mkv",
|
|
// "video/x-matroska"
|
|
].indexOf(file.type) == -1
|
|
) {
|
|
this.$message.error("上传视频只能是 mp3格式!");
|
|
return false;
|
|
}
|
|
const isLt2G = file.size / 1024 / 1024 < 2000000;
|
|
if (!isLt2G) {
|
|
this.$message.error("上传文件大小不能超过 2GB!");
|
|
}
|
|
return isLt2G;
|
|
},
|
|
//视频上传格式校验
|
|
uploadVideo(file) {
|
|
if (
|
|
[
|
|
"video/mp4",
|
|
"video/ogg",
|
|
"video/flv",
|
|
"video/avi",
|
|
"video/rmvb",
|
|
"video/mkv",
|
|
"video/x-matroska"
|
|
].indexOf(file.type) == -1
|
|
) {
|
|
this.$message.error(
|
|
"上传视频只能是 mp4、ogg、flv、avi、rmvb 、x-matroska格式!"
|
|
);
|
|
return false;
|
|
}
|
|
const isLt2G = file.size / 1024 / 1024 < 2000000;
|
|
if (!isLt2G) {
|
|
this.$message.error("上传文件大小不能超过 2GB!");
|
|
}
|
|
return isLt2G;
|
|
},
|
|
//新增剧本流程数据
|
|
openDialog() {
|
|
if (this.dialog.title == "新增剧本") {
|
|
//随机生成4位数函数
|
|
function rand(min, max) {
|
|
return Math.floor(Math.random() * (max - min)) + min;
|
|
}
|
|
this.queryFindList();
|
|
this.ruleForm.processesList.push(
|
|
{
|
|
title: "开场", //标题
|
|
// code: 1233, //随机4位数
|
|
code: rand(1000, 9999), //随机4位数
|
|
introduction: "开场", //介绍
|
|
sort: "1", //排序
|
|
type: "1" //类型
|
|
},
|
|
{
|
|
title: "选角",
|
|
code: rand(1000, 9999),
|
|
introduction: "选角",
|
|
sort: "2",
|
|
type: "2"
|
|
},
|
|
{
|
|
title: "复盘",
|
|
code: rand(1000, 9999),
|
|
introduction: "复盘",
|
|
sort: "99",
|
|
type: "9"
|
|
}
|
|
);
|
|
console.log('type',this.ruleForm.processesList)
|
|
}
|
|
},
|
|
mapForChannel(e) {
|
|
for (var i = 0; i < this.lcData.length; i++) {
|
|
if (this.lcData[i].id == e) {
|
|
return this.lcData[i].title;
|
|
}
|
|
}
|
|
},
|
|
ForChannel(e) {
|
|
var a = e.split(",");
|
|
var tmp = [];
|
|
for (var i = 0; i < this.ruleForm.processesList.length; i++) {
|
|
for (var s = 0; s < a.length; s++) {
|
|
if (this.ruleForm.processesList[i].code == e[s]) {
|
|
tmp.push(this.ruleForm.processesList[i].title);
|
|
return tmp;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
handleClose(done) {
|
|
this.$confirm("确认关闭？")
|
|
.then(_ => {
|
|
done();
|
|
this.type = "";
|
|
})
|
|
.catch(_ => {});
|
|
},
|
|
changSort(val) {
|
|
if (this.ruleForm.processesList.length > 1) {
|
|
for (var i = 0; i < this.ruleForm.processesList.length; i++) {
|
|
let s = i + 1;
|
|
if (
|
|
s < this.ruleForm.processesList.length ||
|
|
s == this.ruleForm.processesList.length
|
|
) {
|
|
if (
|
|
this.ruleForm.processesList[i].sort ==
|
|
this.ruleForm.processesList[s].sort
|
|
) {
|
|
// this.$message({
|
|
// message: "输入的流程排序有重复,请重新输入",
|
|
// type: "error"
|
|
// });
|
|
// this.ruleForm.processesList[s].sort = "";
|
|
// console.log(val);
|
|
// this.disabledButton = true;
|
|
} else {
|
|
this.disabledButton = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
changCode(val) {
|
|
if (this.ruleForm.processesList.length > 1) {
|
|
for (var i = 0; i < this.ruleForm.processesList.length; i++) {
|
|
let s = i + 1;
|
|
if (
|
|
s < this.ruleForm.processesList.length ||
|
|
s == this.ruleForm.processesList.length
|
|
) {
|
|
if (
|
|
this.ruleForm.processesList[i].code ==
|
|
this.ruleForm.processesList[s].code
|
|
) {
|
|
this.$message({
|
|
message: "输入的流程编号有重复,请重新输入",
|
|
type: "error"
|
|
});
|
|
this.ruleForm.processesList[s].code = "";
|
|
console.log(val);
|
|
this.disabledButton = true;
|
|
} else {
|
|
this.disabledButton = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
//获取列表
|
|
async queryList() {
|
|
this.loading = true;
|
|
try {
|
|
let res = await queryJbInfo(this.queryParams);
|
|
this.tableData = res.data.rows;
|
|
this.total = res.data.total;
|
|
this.loading = false;
|
|
} catch (err) {}
|
|
},
|
|
//搜索
|
|
search() {
|
|
this.queryList();
|
|
},
|
|
//重置
|
|
refresh() {
|
|
this.queryParams = {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
query: {
|
|
title: undefined,
|
|
studioName: undefined,
|
|
labelName: undefined
|
|
}
|
|
};
|
|
this.queryList();
|
|
},
|
|
//跳转Tips维护
|
|
handleTips(row) {
|
|
this.$router.push({
|
|
name: "Tips/index",
|
|
query: { scenarioId: row.id, type: "sceinfo" }
|
|
});
|
|
},
|
|
//获取流程
|
|
async queryFindList() {
|
|
try {
|
|
let res = await queryFindList({});
|
|
this.lcData = res.data;
|
|
} catch (err) {}
|
|
},
|
|
//获取详情
|
|
async queryListDetail(id) {
|
|
try {
|
|
this.ruleForm = {
|
|
studioName: "",
|
|
title: "",
|
|
labelName: "",
|
|
imgUrl: "",
|
|
cover: "",
|
|
introduction: "",
|
|
processesList: [],
|
|
imgUrl: "",
|
|
radioImg: [],
|
|
radioMusic: [],
|
|
radioVideo: [],
|
|
resourcesList: []
|
|
};
|
|
this.imgData = [];
|
|
this.musicData = [];
|
|
this.videoData = [];
|
|
this.radioMusic = 1;
|
|
this.radioVideo = 1;
|
|
this.radioImg = 1;
|
|
let res = await queryJbDetail(id);
|
|
this.ruleForm = res.data;
|
|
if (this.ruleForm.imgUrl != null) {
|
|
this.dataImg = this.ruleForm.imgUrl.split(",");
|
|
}
|
|
|
|
var img = [];
|
|
var music = [];
|
|
var video = [];
|
|
for (var i in res.data.resourcesList) {
|
|
if (
|
|
res.data.resourcesList[i].mediaType == 1 &&
|
|
res.data.resourcesList[i].sourceType == 2
|
|
) {
|
|
this.radioImg = 2;
|
|
img.push(res.data.resourcesList[i]);
|
|
}
|
|
if (
|
|
res.data.resourcesList[i].mediaType == 1 &&
|
|
res.data.resourcesList[i].sourceType == 1
|
|
) { //图片
|
|
this.radioImg = 1;
|
|
img.push(res.data.resourcesList[i]);
|
|
}
|
|
}
|
|
if (this.radioImg == 1) {
|
|
this.imgData = img;
|
|
} else if (this.radioImg == 2) {
|
|
this.ruleForm.radioImg = img.map(n => {
|
|
return {
|
|
mediaType: n.mediaType,
|
|
sourceType: n.sourceType,
|
|
title: n.title,
|
|
url: n.url,
|
|
processNames: n.processNames,
|
|
processId: n.processId.split(",")
|
|
};
|
|
});
|
|
}
|
|
for (var i in res.data.resourcesList) {
|
|
if (
|
|
res.data.resourcesList[i].mediaType == 2 &&
|
|
res.data.resourcesList[i].sourceType == 2
|
|
) {
|
|
this.radioMusic = 2;
|
|
music.push(res.data.resourcesList[i]);
|
|
}
|
|
if (
|
|
res.data.resourcesList[i].mediaType == 2 &&
|
|
res.data.resourcesList[i].sourceType == 1
|
|
) {
|
|
this.radioMusic = 1;
|
|
music.push(res.data.resourcesList[i]);
|
|
}
|
|
}
|
|
if (this.radioMusic == 1) {
|
|
this.musicData = music;
|
|
} else if (this.radioMusic == 2) {
|
|
this.ruleForm.radioMusic = music.map(n => {
|
|
return {
|
|
mediaType: n.mediaType,
|
|
sourceType: n.sourceType,
|
|
title: n.title,
|
|
url: n.url,
|
|
processNames: n.processNames,
|
|
processId: n.processId.split(",")
|
|
};
|
|
});
|
|
}
|
|
for (var i in res.data.resourcesList) {
|
|
if (
|
|
res.data.resourcesList[i].mediaType == 3 &&
|
|
res.data.resourcesList[i].sourceType == 2
|
|
) {
|
|
this.radioVideo = 2;
|
|
video.push(res.data.resourcesList[i]);
|
|
}
|
|
if (
|
|
res.data.resourcesList[i].mediaType == 3 &&
|
|
res.data.resourcesList[i].sourceType == 1
|
|
) {
|
|
this.radioVideo = 1;
|
|
video.push(res.data.resourcesList[i]);
|
|
}
|
|
}
|
|
if (this.radioVideo == 1) {
|
|
this.videoData = video;
|
|
} else if (this.radioVideo == 2) {
|
|
this.ruleForm.radioVideo = video.map(n => {
|
|
return {
|
|
mediaType: n.mediaType,
|
|
sourceType: n.sourceType,
|
|
title: n.title,
|
|
url: n.url,
|
|
processNames: n.processNames,
|
|
processId: n.processId.split(",")
|
|
};
|
|
});
|
|
}
|
|
// res.data.resourcesList.map(n => {
|
|
// var a = [];
|
|
// var b = [];
|
|
// var c = [];
|
|
// if (n.mediaType == 2 && n.sourceType == 1) {
|
|
// consooe.log(1111);
|
|
// b.push(n);
|
|
// this.musicData = b;
|
|
// this.radioMusic = 1;
|
|
// }
|
|
// if (n.mediaType == 2 && n.sourceType == 2) {
|
|
// b.push(n);
|
|
// this.ruleForm.radioMusic = b.map(n => {
|
|
// return {
|
|
// mediaType: n.mediaType,
|
|
// sourceType: n.sourceType,
|
|
// title: n.title,
|
|
// url: n.url,
|
|
// processNames: n.processNames,
|
|
// processId: n.processId.split(",")
|
|
// };
|
|
// });
|
|
// this.radioMusic = 2;
|
|
// }
|
|
// if (n.mediaType == 3 && n.sourceType == 1) {
|
|
// c.push(n);
|
|
// this.videoData = c;
|
|
// this.radioVideo = 1;
|
|
// }
|
|
// if (n.mediaType == 3 && n.sourceType == 2) {
|
|
// c.push(n);
|
|
// this.ruleForm.radioVideo = c.map(n => {
|
|
// return {
|
|
// mediaType: n.mediaType,
|
|
// sourceType: n.sourceType,
|
|
// title: n.title,
|
|
// url: n.url,
|
|
// processNames: n.processNames,
|
|
// processId: n.processId.split(",")
|
|
// };
|
|
// });
|
|
// this.radioVideo = 2;
|
|
// }
|
|
// });
|
|
} catch (err) {}
|
|
},
|
|
// 新增
|
|
handleAdd() {
|
|
this.type = "add";
|
|
this.ruleForm = {
|
|
studioName: "",
|
|
title: "",
|
|
labelName: "",
|
|
imgUrl: "",
|
|
cover: "",
|
|
introduction: "",
|
|
processesList: [],
|
|
imgUrl: "",
|
|
radioImg: [],
|
|
radioMusic: [],
|
|
radioVideo: [],
|
|
resourcesList: []
|
|
};
|
|
this.dataImg = [];
|
|
this.imgData = [];
|
|
this.musicData = [];
|
|
this.videoData = [];
|
|
this.radioMusic = 1;
|
|
this.radioVideo = 1;
|
|
this.radioImg = 1;
|
|
this.disabled = false;
|
|
this.dialog.title = "新增剧本";
|
|
setTimeout(() => {
|
|
this.dialog.Visible = true;
|
|
}, 500);
|
|
},
|
|
async subMit() {
|
|
// if (this.imgType == true && this.radioImg == 1) {
|
|
// this.$message({
|
|
// message: "请绑定图片相关流程",
|
|
// type: "error"
|
|
// });
|
|
// return false;
|
|
// }
|
|
// if (this.musicType == true && this.radioMusic == 1) {
|
|
// this.$message({
|
|
// message: "请绑定音频相关流程",
|
|
// type: "error"
|
|
// });
|
|
// return false;
|
|
// }
|
|
// if (this.videoType == true && this.radioVideo == 1) {
|
|
// this.$message({
|
|
// message: "请绑定视频相关流程",
|
|
// type: "error"
|
|
// });
|
|
// return false;
|
|
// }
|
|
this.ruleForm.imgUrl = this.dataImg.join(",");
|
|
if (this.radioImg == 1) {
|
|
this.ruleForm.radioImg = this.imgData;
|
|
}
|
|
if (this.radioMusic == 1) {
|
|
this.ruleForm.radioMusic = this.musicData;
|
|
}
|
|
if (this.radioVideo == 1) {
|
|
this.ruleForm.radioVideo = this.videoData;
|
|
}
|
|
let data = this.ruleForm.radioImg
|
|
.concat(this.ruleForm.radioMusic)
|
|
.concat(this.ruleForm.radioVideo);
|
|
let a = [];
|
|
let b = this.ruleForm.processesList.map(n => {
|
|
if (n.title != "") {
|
|
a.push(n);
|
|
}
|
|
});
|
|
this.ruleForm.processesList = a.map(n => {
|
|
return {
|
|
title: n.title,
|
|
code: n.code,
|
|
introduction: n.introduction,
|
|
sort: n.sort,
|
|
type:n.type,
|
|
};
|
|
});
|
|
let list = [];
|
|
data.map(n => {
|
|
if (n.url != "") {
|
|
list.push(n);
|
|
}
|
|
});
|
|
this.ruleForm.resourcesList = list.map(n => {
|
|
let type = typeof n.processId;
|
|
var processId = "";
|
|
if (type == "string") {
|
|
processId = n.processId;
|
|
} else if (type == "object") {
|
|
processId = n.processId.join(",");
|
|
}
|
|
return {
|
|
mediaType: n.mediaType,
|
|
sourceType: n.sourceType,
|
|
title: n.title,
|
|
url: n.url,
|
|
processId: processId
|
|
};
|
|
});
|
|
try {
|
|
this.$refs["ruleForm"].validate(async valid => {
|
|
if (valid) {
|
|
if (this.type == "add") {
|
|
var res = await addJbInfo(this.ruleForm);
|
|
if (res.code == 200) {
|
|
this.$message.success("新增成功");
|
|
this.dialog.Visible = false;
|
|
this.queryList();
|
|
} else {
|
|
this.$message({
|
|
message: res.msg,
|
|
type: "error"
|
|
});
|
|
}
|
|
} else if (this.type == "edit") {
|
|
var res = await updateJbInfo(this.ruleForm);
|
|
if (res.code == 200) {
|
|
this.$message.success("编辑成功");
|
|
this.dialog.Visible = false;
|
|
this.queryList();
|
|
} else {
|
|
this.$message({
|
|
message: res.msg,
|
|
type: "error"
|
|
});
|
|
}
|
|
}
|
|
}
|
|
});
|
|
} catch (err) {}
|
|
},
|
|
subEsc() {
|
|
this.type = "";
|
|
this.ruleForm = {
|
|
studioName: "",
|
|
title: "",
|
|
labelName: "",
|
|
imgUrl: "",
|
|
cover: "",
|
|
introduction: "",
|
|
processesList: [],
|
|
imgUrl: "",
|
|
radioImg: [],
|
|
radioMusic: [],
|
|
radioVideo: [],
|
|
resourcesList: []
|
|
};
|
|
this.radioImg = 1;
|
|
this.radioMusic = 1;
|
|
this.radioVideo = 1;
|
|
this.dialog.Visible = false;
|
|
},
|
|
dealRdata(attchments, keyname) {
|
|
//attchments:数组，键值
|
|
let list = [...attchments];
|
|
let result = [];
|
|
let obj = {};
|
|
for (let i = 0; i < list.length; i++) {
|
|
if (!obj[list[i][keyname]]) {
|
|
result.push(list[i]);
|
|
obj[list[i].wjDx] = true;
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
// 编辑
|
|
handleEdit(row) {
|
|
this.queryListDetail(row.id);
|
|
this.type = "edit";
|
|
this.disabled = false;
|
|
this.dialog.title = "编辑剧本";
|
|
setTimeout(() => {
|
|
this.dialog.Visible = true;
|
|
}, 500);
|
|
},
|
|
// 查看
|
|
handleView(row) {
|
|
console.log(this.type, 41231);
|
|
this.type = "view";
|
|
this.dialog.title = "查看剧本";
|
|
console.log(this.type, 41231222);
|
|
this.queryListDetail(row.id);
|
|
this.disabled = true;
|
|
setTimeout(() => {
|
|
this.dialog.Visible = true;
|
|
}, 500);
|
|
},
|
|
// 删除
|
|
async hanDel(row) {
|
|
try {
|
|
await this.$confirm("此操作将永久删除该剧本,是否继续?", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning"
|
|
});
|
|
let res = await deleteJbInfo(row.id);
|
|
if (res.code == 200) {
|
|
this.$message.success("删除成功");
|
|
this.queryList();
|
|
} else {
|
|
this.$message({
|
|
message: res.msg,
|
|
type: "error"
|
|
});
|
|
}
|
|
} catch (err) {}
|
|
},
|
|
handleAvatar(res, file, fileList) {
|
|
// console.log(res, file, "整个");
|
|
},
|
|
handleAvatarSuccess(res, file) {
|
|
// console.log(res, file, "成功了吗");
|
|
},
|
|
//上传图片
|
|
async uploadImg(file, fileList) {
|
|
try {
|
|
let formData = new FormData();
|
|
let type = file.raw.type;
|
|
formData.append("file", file.raw);
|
|
formData.append("type", type);
|
|
let res = await uploadFile(formData);
|
|
// this.ruleForm.cover = res.data.wjUrl;
|
|
this.$set(this.ruleForm, "cover", res.data.wjUrl);
|
|
} catch (err) {}
|
|
},
|
|
changeImgs({ file }) {
|
|
let formData = new FormData();
|
|
formData.append("file", file);
|
|
formData.append("type", "product");
|
|
uploadFile(formData).then(res => {
|
|
this.dataImg.push(res.data.wjUrl);
|
|
});
|
|
},
|
|
beforeAvatarUpload(file) {
|
|
const isJPG = file.type;
|
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
if (!isLt2M) {
|
|
this.$message.error("上传头像图片大小不能超过 2MB!");
|
|
}
|
|
return isJPG && isLt2M;
|
|
},
|
|
// 开本流程新增
|
|
handleAddK() {
|
|
//为空不能进行添加
|
|
let list = this.ruleForm.processesList;
|
|
if(list.length!=0){
|
|
if (list[list.length-1].title=="" || list[list.length-1].code=="" ||list[list.length-1].introduction=="" ||list[list.length-1].sort=="" ) {
|
|
this.$message({
|
|
message: '一次只能添加一条',
|
|
type: 'warning'
|
|
});
|
|
return false
|
|
}
|
|
}
|
|
|
|
this.ruleForm.processesList.push({
|
|
title: "",
|
|
code: "",
|
|
introduction: "",
|
|
sort: "",
|
|
type: "5"
|
|
});
|
|
},
|
|
//同步流程
|
|
tongbuliuchen(){
|
|
//删除图片
|
|
this.imgData.forEach((item,index)=>{
|
|
let imgprocessId=this.imgData[index].processId?this.imgData[index].processId.split(","):[]
|
|
let data=[]
|
|
let name=[]
|
|
if(this.ruleForm.processesList.length<1){
|
|
this.imgData[index].processId=null
|
|
this.imgData[index].processNames=null
|
|
}else{
|
|
for(let x=0;x<this.ruleForm.processesList.length;x++){
|
|
for(let y=0;y<imgprocessId.length;y++){
|
|
if(this.ruleForm.processesList[x].code.indexOf(imgprocessId[y])>-1 ){
|
|
data.push(imgprocessId[y])
|
|
}
|
|
if(this.ruleForm.processesList[x].code==imgprocessId[y]){
|
|
name.push(this.ruleForm.processesList[x].title)
|
|
}
|
|
|
|
}
|
|
this.imgData[index].processId=data.join(",")
|
|
this.imgData[index].processNames=name.join(",")
|
|
}
|
|
}
|
|
|
|
})
|
|
//删除音频
|
|
this.musicData.forEach((item,index)=>{
|
|
let imgprocessId=this.musicData[index].processId?this.musicData[index].processId.split(","):[]
|
|
let data=[]
|
|
let name=[]
|
|
for(let x=0;x<this.ruleForm.processesList.length;x++){
|
|
for(let y=0;y<imgprocessId.length;y++){
|
|
if(this.ruleForm.processesList[x].code.indexOf(imgprocessId[y])>-1 ){
|
|
data.push(imgprocessId[y])
|
|
}
|
|
if(this.ruleForm.processesList[x].code==imgprocessId[y]){
|
|
name.push(this.ruleForm.processesList[x].title)
|
|
}
|
|
}
|
|
this.musicData[index].processId=data.join(",")
|
|
this.musicData[index].processNames=name.join(",")
|
|
}
|
|
})
|
|
//删除视频
|
|
this.videoData.forEach((item,index)=>{
|
|
let imgprocessId=this.videoData[index].processId?this.videoData[index].processId.split(","):[]
|
|
let data=[]
|
|
let name=[]
|
|
for(let x=0;x<this.ruleForm.processesList.length;x++){
|
|
for(let y=0;y<imgprocessId.length;y++){
|
|
if(this.ruleForm.processesList[x].code.indexOf(imgprocessId[y])>-1 ){
|
|
data.push(imgprocessId[y])
|
|
}
|
|
if(this.ruleForm.processesList[x].code==imgprocessId[y]){
|
|
name.push(this.ruleForm.processesList[x].title)
|
|
}
|
|
}
|
|
this.videoData[index].processId=data.join(",")
|
|
this.videoData[index].processNames=name.join(",")
|
|
}
|
|
})
|
|
|
|
},
|
|
// 开本流程删除
|
|
Del(index) {
|
|
this.$confirm("此操作将永久删除该剧本流程,是否继续?", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning"
|
|
})
|
|
.then(() => {
|
|
this.ruleForm.processesList.splice(index, 1),
|
|
this.tongbuliuchen();
|
|
this.$message({
|
|
type: "success",
|
|
message: "删除成功!"
|
|
});
|
|
})
|
|
.catch(() => {
|
|
this.$message({
|
|
type: "error",
|
|
message: "已取消删除"
|
|
});
|
|
});
|
|
},
|
|
// 图片预览
|
|
dialogimg(e) {
|
|
this.dialogVisible = true;
|
|
this.dialogImageUrl = this.ruleForm.imgUrls[e];
|
|
},
|
|
//资源删除
|
|
DelImg(index) {
|
|
this.ruleForm.radioImg.splice(index, 1);
|
|
},
|
|
DelMusic(index) {
|
|
this.ruleForm.radioMusic.splice(index, 1);
|
|
},
|
|
DelVideo(index) {
|
|
this.ruleForm.radioVideo.splice(index, 1);
|
|
},
|
|
handleRemove(file) {
|
|
// delFile({ wjUrl: item.url }).then(res => {
|
|
// if (res.code == 200) {
|
|
// this.$message.success("删除成功");
|
|
// }
|
|
// });
|
|
},
|
|
// 图片删除
|
|
deldialogimg(index) {
|
|
this.ruleForm.imgUrls.splice(index, 1);
|
|
var img = this.ruleForm.imgUrl[index];
|
|
// proUpdate({ wjUrl: img }).then((res) => {
|
|
// if (res.code == 200) {
|
|
// that.back();
|
|
// }
|
|
// });
|
|
},
|
|
changeImg(val) {
|
|
this.radioImg = val;
|
|
this.ruleForm.radioImg = [];
|
|
this.imgData = [];
|
|
},
|
|
changeMusic(val) {
|
|
this.radioMusic = val;
|
|
this.ruleForm.radioMusic = [];
|
|
this.musicData = [];
|
|
},
|
|
changeVideo(val) {
|
|
this.radioVideo = val;
|
|
this.ruleForm.radioVideo = [];
|
|
this.videoData = [];
|
|
},
|
|
changePro(type) {
|
|
if (type == "img") {
|
|
this.imgType = false;
|
|
} else if (type == "music") {
|
|
this.musicType = false;
|
|
} else if (type == "video") {
|
|
this.videoType = false;
|
|
}
|
|
},
|
|
//新增图片资源
|
|
handleAddImg() {
|
|
this.ruleForm.radioImg.push({
|
|
title: "",
|
|
url: "",
|
|
processId: [],
|
|
mediaType: 1,
|
|
sourceType: this.radioImg
|
|
});
|
|
|
|
if (this.$refs.img.data.length == 0) {
|
|
this.$refs.img.data = this.ruleForm.radioImg;
|
|
}
|
|
},
|
|
handleAddMusic() {
|
|
this.ruleForm.radioMusic.push({
|
|
title: "",
|
|
url: "",
|
|
processId: [],
|
|
mediaType: 2,
|
|
sourceType: this.radioMusic
|
|
});
|
|
if (this.$refs.music.data.length == 0) {
|
|
this.$refs.music.data = this.ruleForm.radioMusic;
|
|
}
|
|
},
|
|
handleAddVideo() {
|
|
this.ruleForm.radioVideo.push({
|
|
title: "",
|
|
url: "",
|
|
processId: [],
|
|
mediaType: 3,
|
|
sourceType: this.radioVideo
|
|
});
|
|
if (this.$refs.video.data.length == 0) {
|
|
this.$refs.video.data = this.ruleForm.radioVideo;
|
|
}
|
|
},
|
|
// 上传资源蹄片
|
|
labeluploadimg({ file }) {
|
|
const formdata = new FormData();
|
|
formdata.append("file", file);
|
|
formdata.append("type", "product");
|
|
uploadFile(formdata).then(res => {
|
|
this.imgData.push({
|
|
url: res.data.wjUrl,
|
|
processNames: "",
|
|
title: res.data.wjDx,
|
|
mediaType: 1,
|
|
sourceType: 1
|
|
});
|
|
this.imgType = true;
|
|
});
|
|
},
|
|
labeluploadmusic({ file }) {
|
|
this.loadingAudio = true;
|
|
const formdata = new FormData();
|
|
formdata.append("file", file);
|
|
formdata.append("type", "product");
|
|
uploadFile(formdata).then(res => {
|
|
this.musicData.push({
|
|
url: res.data.wjUrl,
|
|
processNames: "",
|
|
title: res.data.wjDx,
|
|
mediaType: 2,
|
|
sourceType: 1
|
|
});
|
|
this.loadingAudio = false;
|
|
this.musicType = true;
|
|
});
|
|
},
|
|
labeluploadvideo({ file }) {
|
|
this.loading = true;
|
|
const formdata = new FormData();
|
|
formdata.append("file", file);
|
|
formdata.append("type", "product");
|
|
uploadFile(formdata).then(res => {
|
|
this.videoData.push({
|
|
url: res.data.wjUrl,
|
|
processNames: "",
|
|
title: res.data.wjDx,
|
|
mediaType: 3,
|
|
sourceType: 1
|
|
});
|
|
this.loading = false; //取消加载
|
|
this.radioType = true;
|
|
this.findvideocover(res.data.wjUrl, file);
|
|
});
|
|
},
|
|
delDataImg(item, index) {
|
|
this.$confirm("此操作将永久删除图片,是否继续?", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning"
|
|
})
|
|
.then(() => {
|
|
this.dataImg.splice(index, 1);
|
|
delFile({ wjUrl: item }).then(res => {
|
|
if (res.code == 200) {
|
|
this.$message.success("删除成功");
|
|
}
|
|
});
|
|
this.$message({
|
|
type: "success",
|
|
message: "删除成功!"
|
|
});
|
|
})
|
|
.catch(() => {
|
|
this.$message({
|
|
type: "error",
|
|
message: "已取消删除"
|
|
});
|
|
});
|
|
},
|
|
// 图片删除
|
|
deldialogimg(item, index, type) {
|
|
this.$confirm("此您确定要删除吗,是否继续?", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning"
|
|
})
|
|
.then(() => {
|
|
switch (type) {
|
|
case "img":
|
|
this.imgData.splice(index, 1);
|
|
break;
|
|
case "music":
|
|
this.musicData.splice(index, 1);
|
|
break;
|
|
case "video":
|
|
this.videoData.splice(index, 1);
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
delFile({ wjUrl: item.url }).then(res => {
|
|
if (res.code == 200) {
|
|
this.$message.success("删除成功");
|
|
}
|
|
});
|
|
})
|
|
.catch(() => {
|
|
this.$message({
|
|
type: "error",
|
|
message: "已取消删除"
|
|
});
|
|
});
|
|
},
|
|
//关联流程
|
|
setLc(item, i, type) {
|
|
console.log('item',item);
|
|
console.log('i',i);
|
|
console.log('type',type);
|
|
if (this.ruleForm.processesList.length == 0) {
|
|
this.$message({
|
|
message: "请新建流程",
|
|
type: "error"
|
|
});
|
|
return false;
|
|
}
|
|
if (type == "img") {
|
|
this.imgIndex = i;
|
|
try{
|
|
this.processId = this.imgData[i].processId.split(',')
|
|
}catch(err){}
|
|
} else if (type == "music") {
|
|
this.musicIndex = i;
|
|
try{
|
|
this.processId = this.musicData[i].processId.split(',')
|
|
}catch(err){}
|
|
} else if (type == "video") {
|
|
this.videoIndex = i;
|
|
try{
|
|
this.processId = this.videoData[i].processId.split(',')
|
|
}catch(err){}
|
|
}
|
|
this.list = item;
|
|
this.typeUrl = type;
|
|
// this.processId = "";
|
|
this.process.Visible = true;
|
|
|
|
},
|
|
subMitLc() {
|
|
this.process.Visible = false;
|
|
if (this.typeUrl == "img") {
|
|
this.imgType = false;
|
|
var tmp = [];
|
|
for (var i = 0; i < this.ruleForm.processesList.length; i++) {
|
|
for (var s = 0; s < this.processId.length; s++) {
|
|
if (this.ruleForm.processesList[i].code == this.processId[s]) {
|
|
tmp.push(this.ruleForm.processesList[i].title);
|
|
}
|
|
}
|
|
}
|
|
this.imgData[this.imgIndex].processNames = tmp.join(",");
|
|
this.imgData[this.imgIndex].processId = this.processId;
|
|
this.imgData[this.imgIndex].mediaType = 1;
|
|
this.imgData[this.imgIndex].sourceType = this.radioImg;
|
|
}
|
|
if (this.typeUrl == "music") {
|
|
this.musicType = false;
|
|
var tmp = [];
|
|
for (var i = 0; i < this.ruleForm.processesList.length; i++) {
|
|
for (var s = 0; s < this.processId.length; s++) {
|
|
if (this.ruleForm.processesList[i].code == this.processId[s]) {
|
|
tmp.push(this.ruleForm.processesList[i].title);
|
|
}
|
|
}
|
|
}
|
|
this.musicData[this.musicIndex].processNames = tmp.join(",");
|
|
this.musicData[this.musicIndex].processId = this.processId;
|
|
this.musicData[this.musicIndex].mediaType = 2;
|
|
this.musicData[this.musicIndex].sourceType = this.radioMusic;
|
|
}
|
|
if (this.typeUrl == "video") {
|
|
this.videoType = false;
|
|
var tmp = [];
|
|
for (var i = 0; i < this.ruleForm.processesList.length; i++) {
|
|
for (var s = 0; s < this.processId.length; s++) {
|
|
if (this.ruleForm.processesList[i].code == this.processId[s]) {
|
|
tmp.push(this.ruleForm.processesList[i].title);
|
|
}
|
|
}
|
|
}
|
|
this.videoData[this.videoIndex].processNames = tmp.join(",");
|
|
this.videoData[this.videoIndex].processId = this.processId;
|
|
this.videoData[this.videoIndex].mediaType = 3;
|
|
this.videoData[this.videoIndex].sourceType = this.radioVideo;
|
|
}
|
|
},
|
|
prevent(e) {
|
|
var keynum = window.event ? e.keyCode : e.which; //获取键盘码
|
|
if (keynum == 189 || keynum == 190 || keynum == 109 || keynum == 110) {
|
|
this.$message.warning("禁止输入小数以及负数");
|
|
e.target.value = "";
|
|
}
|
|
},
|
|
//查看视频
|
|
// handleView(item) {
|
|
// console.log(item, "视频地址");
|
|
// }
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.content {
|
|
background: #fff;
|
|
margin-top: 15px;
|
|
}
|
|
.add-button {
|
|
margin-top: 15px;
|
|
}
|
|
/deep/ .el-input__inner {
|
|
height: 30px;
|
|
}
|
|
.search-button {
|
|
display: flex;
|
|
}
|
|
.form-title {
|
|
margin-left: 30px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #000;
|
|
}
|
|
/deep/ .avatar-uploader .el-upload {
|
|
border: 1px dashed #000;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
/deep/ .avatar-uploader .el-upload:hover {
|
|
border-color: #409eff;
|
|
}
|
|
/deep/ input::-webkit-outer-spin-button,
|
|
/deep/ input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none !important;
|
|
}
|
|
/deep/ input[type="number"] {
|
|
-moz-appearance: textfield !important;
|
|
}
|
|
.avatar-uploader-icon {
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 178px;
|
|
height: 178px;
|
|
line-height: 178px;
|
|
text-align: center;
|
|
}
|
|
.avatar {
|
|
width: 178px;
|
|
height: 178px;
|
|
display: block;
|
|
}
|
|
.urlTable /deep/ .el-form-item__content {
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
<style lang="scss" scope>
|
|
.imgdata {
|
|
position: relative;
|
|
// display: inline-block;
|
|
float: left;
|
|
margin-left: 60px;
|
|
|
|
.imgdialog {
|
|
width: 146px;
|
|
height: 146px;
|
|
display: none;
|
|
position: absolute;
|
|
background: rgba(127, 127, 127, 0.5);
|
|
top: 0;
|
|
left: 0;
|
|
justify-content: space-between;
|
|
align-content: center;
|
|
|
|
p {
|
|
margin: auto;
|
|
|
|
i {
|
|
cursor: pointer;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.imgdata:hover .imgdialog {
|
|
display: flex !important;
|
|
}
|
|
|
|
.audioUpload {
|
|
.el-form-item__content {
|
|
display: flex;
|
|
// flex-direction: column-reverse;
|
|
flex-wrap: wrap;
|
|
.imgdata {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.videoUpload {
|
|
.el-form-item__content {
|
|
margin-left: 100px;
|
|
display: flex;
|
|
// flex-direction: column-reverse;
|
|
flex-wrap: wrap;
|
|
.imgdata {
|
|
margin-top: 20px;
|
|
display: block !important;
|
|
flex-wrap: nowrap;
|
|
}
|
|
}
|
|
}
|
|
</style>
|