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.
1445 lines
44 KiB
1445 lines
44 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)"
|
|
>查看</el-button
|
|
>
|
|
<el-button type="text" size="mini" @click="handleEdit(scope.row)"
|
|
>编辑</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)"
|
|
>删除</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 :title="dialog.title" :visible.sync="dialog.Visible" width="1000px">
|
|
<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 v-model="ruleForm.title" style="width:300px;" />
|
|
</el-form-item>
|
|
<el-form-item label="工作室:" prop="studioName" style="width:45%">
|
|
<el-input v-model="ruleForm.studioName" style="width:300px;" />
|
|
</el-form-item>
|
|
<el-form-item label="标签:" prop="labelName" style="width:100%">
|
|
<el-input v-model="ruleForm.labelName" style="width:300px;" />
|
|
</el-form-item>
|
|
<h3 class="form-title">剧本图片</h3>
|
|
<el-form-item label="封面" prop="cover">
|
|
<el-upload
|
|
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%">
|
|
<el-upload
|
|
action
|
|
class="avatar-uploader"
|
|
list-type="picture-card"
|
|
:auto-upload="false"
|
|
:on-change="changeImgs"
|
|
:on-success="handleAvatarSuccess"
|
|
:before-upload="beforeAvatarUpload"
|
|
>
|
|
<i class="el-icon-plus" />
|
|
</el-upload>
|
|
<el-dialog :visible.sync="dialogVisible">
|
|
<img width="100%" :src="dialogImageUrl" alt="" />
|
|
</el-dialog>
|
|
</el-form-item>
|
|
<h3 class="form-title">剧本简介</h3>
|
|
<el-form-item label="简介" style="width:100%">
|
|
<!-- <el-input
|
|
v-model="ruleForm.desc"
|
|
style="width:500px"
|
|
rows="10"
|
|
type="textarea"
|
|
/> -->
|
|
<Tinymce
|
|
ref="editor"
|
|
v-model="ruleForm.introduction"
|
|
:height="400"
|
|
:width="700"
|
|
/>
|
|
</el-form-item>
|
|
<h3 class="form-title">开本流程</h3>
|
|
<el-table
|
|
v-if="type != 'view'"
|
|
: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="流程标题">
|
|
<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="流程编号">
|
|
<template slot-scope="scope">
|
|
<el-input v-model="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="排序">
|
|
<template slot-scope="scope">
|
|
<el-input v-model="ruleForm.processesList[scope.$index].sort" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="操作">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" size="mini" @click="Del(scope.$index)"
|
|
>删除</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-table
|
|
v-if="type == 'view'"
|
|
: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="排序">
|
|
</el-table-column>
|
|
</el-table>
|
|
<div style="margin-top:15px;" v-if="type != 'view'">
|
|
<el-button
|
|
type="success"
|
|
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 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 v-if="radioImg == 1">
|
|
<div v-for="(item, i) in imgData" :key="i" 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, i, 'img')"
|
|
style="font-size: 20px; padding-left: 30px"
|
|
></i>
|
|
</p>
|
|
</div>
|
|
<div class="sz_container" style="text-align:center">
|
|
<span>{{ item.processName }}</span>
|
|
</div>
|
|
<div class="sz_container" style="text-align:center">
|
|
<el-button size="mini" type="text" @click="setLc(item, i, 'img')"
|
|
>关联流程</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
<el-upload
|
|
v-if="type != 'view'"
|
|
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
|
|
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="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 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="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">
|
|
{{ mapForChannel(scope.row.processId) }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div style="margin-top:15px;" v-if="type != 'view'">
|
|
<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 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 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>
|
|
<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.processName }}</span>
|
|
</div>
|
|
<div class="sz_container" style="text-align:center">
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
@click="setLc(item, i, 'music')"
|
|
>关联流程</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
<el-upload
|
|
v-if="type != 'view'"
|
|
class="avatar-uploader"
|
|
style="float:left;margin-left:60px"
|
|
action
|
|
list-type="picture-card"
|
|
:show-file-list="false"
|
|
:http-request="labeluploadmusic"
|
|
>
|
|
<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
|
|
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 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="资源标题" />
|
|
<el-table-column align="center" property="url" label="资源URL" />
|
|
<el-table-column
|
|
align="center"
|
|
property="processId"
|
|
label="关联流程"
|
|
>
|
|
<template slot-scope="scope">
|
|
{{ mapForChannel(scope.row.processId) }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div style="margin-top:15px;" v-if="type != 'view'">
|
|
<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 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 v-if="radioVideo == 1">
|
|
<div v-for="(item, i) in videoData" :key="i" class="imgdata">
|
|
<el-image
|
|
style="width: 146px; height: 146px"
|
|
:src="item.url"
|
|
fit="fill"
|
|
>
|
|
</el-image>
|
|
<div class="imgdialog">
|
|
<p>
|
|
<i class="el-icon-zoom-in" style="font-size: 20px"></i>
|
|
<i
|
|
class="el-icon-delete"
|
|
@click="deldialogimg(item, i, 'video')"
|
|
style="font-size: 20px; padding-left: 30px"
|
|
></i>
|
|
</p>
|
|
</div>
|
|
<div class="sz_container" style="text-align:center">
|
|
<span>{{ item.processName }}</span>
|
|
</div>
|
|
<div class="sz_container" style="text-align:center">
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
@click="setLc(item, i, 'video')"
|
|
>关联流程</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
<el-upload
|
|
v-if="type != 'view'"
|
|
class="avatar-uploader"
|
|
style="float:left;margin-left:60px"
|
|
action
|
|
list-type="picture-card"
|
|
:show-file-list="false"
|
|
:http-request="labeluploadvideo"
|
|
>
|
|
<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="radioVideo == 2"
|
|
style="width: 100%;"
|
|
class="urlTable"
|
|
>
|
|
<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="资源标题">
|
|
<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 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="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">
|
|
{{ mapForChannel(scope.row.processId) }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div v-if="type != 'view'" 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="dialog.Visible = false">取 消</el-button>
|
|
<el-button v-if="type != 'view'" 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="请选择流程"
|
|
>
|
|
<el-option
|
|
v-for="item in ruleForm.processesList"
|
|
:key="item.value"
|
|
: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 {
|
|
baseUrl,
|
|
loading: true,
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 15,
|
|
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" }]
|
|
},
|
|
dialog: {
|
|
title: "新增剧本",
|
|
Visible: false
|
|
},
|
|
ruleForm: {
|
|
processesList: [],
|
|
imgUrl: "",
|
|
imgUrls: [],
|
|
radioImg: [],
|
|
radioMusic: [],
|
|
radioVideo: [],
|
|
resourcesList: []
|
|
},
|
|
dialogVisible: false,
|
|
active: "",
|
|
imageUrl: "",
|
|
total: 0,
|
|
dialogVisible: false,
|
|
dialogImageUrl: "",
|
|
dataImg: [],
|
|
lcData: [],
|
|
radioImg: "1",
|
|
radioMusic: "1",
|
|
radioVideo: "1",
|
|
type: "add",
|
|
imgData: [],
|
|
musicData: [],
|
|
videoData: [],
|
|
processId: [],
|
|
process: {
|
|
Visible: false
|
|
},
|
|
list: {},
|
|
typeUrl: "",
|
|
imgType: false,
|
|
musicType: false,
|
|
videoType: false,
|
|
imgIndex: "",
|
|
musicIdnex: "",
|
|
videoIndex: "",
|
|
dataList: {}
|
|
};
|
|
},
|
|
mounted() {
|
|
this.queryList();
|
|
this.queryFindList();
|
|
},
|
|
methods: {
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
//获取列表
|
|
async queryList() {
|
|
this.loading = true;
|
|
try {
|
|
let res = await queryJbInfo(this.queryParams);
|
|
console.log(res);
|
|
this.tableData = res.data.rows;
|
|
this.total = res.data.total;
|
|
this.loading = false;
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
},
|
|
//搜索
|
|
search() {
|
|
this.queryList();
|
|
},
|
|
//重置
|
|
refresh() {
|
|
this.queryParams = {
|
|
pageNum: 1,
|
|
pageSize: 15,
|
|
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({});
|
|
// console.log(res.data, "流程列表");
|
|
this.lcData = res.data;
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
},
|
|
//获取详情
|
|
async queryListDetail(id) {
|
|
try {
|
|
this.ruleForm = {
|
|
studioName: "",
|
|
title: "",
|
|
labelName: "",
|
|
imgUrl: "",
|
|
cover: "",
|
|
introduction: "",
|
|
processesList: [],
|
|
imgUrl: "",
|
|
radioImg: [],
|
|
radioMusic: [],
|
|
radioVideo: [],
|
|
resourcesList: []
|
|
};
|
|
let res = await queryJbDetail(id);
|
|
console.log(res, "详情");
|
|
this.ruleForm = res.data;
|
|
res.data.resourcesList.map(n => {
|
|
var a = [];
|
|
var b = [];
|
|
var c = [];
|
|
if (n.mediaType == 1 && n.sourceType == 2) {
|
|
a.push(n);
|
|
this.ruleForm.radioImg = a.map(n => {
|
|
return {
|
|
mediaType: n.mediaType,
|
|
sourceType: n.sourceType,
|
|
title: n.title,
|
|
url: n.url,
|
|
processId: n.processId.split(",")
|
|
};
|
|
});
|
|
this.radioImg = n.sourceType;
|
|
} else if (n.mediaType == 1 && n.sourceType == 1) {
|
|
a.push(n);
|
|
var tmp = []
|
|
this.imgData = a
|
|
|
|
this.radioImg = n.sourceType;
|
|
}
|
|
if (n.mediaType == 2 && n.sourceType == 1) {
|
|
b.push(n);
|
|
this.musicData = b;
|
|
this.radioMusic = n.sourceType;
|
|
} else if (n.mediaType == 2 && n.sourceType == 2) {
|
|
console.log("进来了1");
|
|
b.push(n);
|
|
this.ruleForm.radioMusic = b.map(n => {
|
|
return {
|
|
mediaType: n.mediaType,
|
|
sourceType: n.sourceType,
|
|
title: n.title,
|
|
url: n.url,
|
|
processId: n.processId.split(",")
|
|
};
|
|
});
|
|
this.radioMusic = n.sourceType;
|
|
}
|
|
if (n.mediaType == 3 && n.sourceType == 1) {
|
|
c.push(n);
|
|
this.videoData = c;
|
|
this.radioVideo = n.sourceType;
|
|
} else 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,
|
|
processId: n.processId.split(",")
|
|
};
|
|
});
|
|
this.radioVideo = n.sourceType;
|
|
}
|
|
});
|
|
console.log(
|
|
this.ruleForm,
|
|
this.musicData,
|
|
this.imgData,
|
|
this.videoData,
|
|
"处理后详情"
|
|
);
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
},
|
|
// 新增
|
|
handleAdd() {
|
|
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;
|
|
this.dialog.Visible = true;
|
|
this.type = "add";
|
|
this.dialog.title = "新增剧本";
|
|
},
|
|
async subMit() {
|
|
console.log(this.imgType, this.musicType, this.videoType);
|
|
console.log(this.radioImg, this.radioMusic, this.radioVideo);
|
|
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 list = [];
|
|
data.map(n => {
|
|
if (n.url != "") {
|
|
list.push(n);
|
|
}
|
|
});
|
|
this.ruleForm.resourcesList = list.map(n => {
|
|
return {
|
|
mediaType: n.mediaType,
|
|
sourceType: n.sourceType,
|
|
title: n.title,
|
|
url: n.url,
|
|
processId: n.processId.join(",")
|
|
};
|
|
});
|
|
console.log(this.imgData, "有变化吗");
|
|
console.log(this.ruleForm, "参数");
|
|
try {
|
|
this.$refs["ruleForm"].validate(async valid => {
|
|
if (valid) {
|
|
if (this.type == "add") {
|
|
var res = await addJbInfo(this.ruleForm);
|
|
} 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) {
|
|
console.log(err);
|
|
}
|
|
},
|
|
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.dialog.Visible = true;
|
|
this.type = "edit";
|
|
this.dialog.title = "编辑剧本";
|
|
},
|
|
// 查看
|
|
handleView(row) {
|
|
this.queryListDetail(row.id);
|
|
this.type = "view";
|
|
this.dialog.Visible = true;
|
|
},
|
|
// 删除
|
|
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) {
|
|
console.log(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);
|
|
console.log(this.ruleForm.cover);
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
},
|
|
async changeImgs(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);
|
|
console.log(res, 142131);
|
|
this.dataImg.push(res.data.wjUrl);
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
},
|
|
beforeAvatarUpload(file) {
|
|
console.log(file, 41231);
|
|
const isJPG = file.type;
|
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
if (!isLt2M) {
|
|
this.$message.error("上传头像图片大小不能超过 2MB!");
|
|
}
|
|
return isJPG && isLt2M;
|
|
},
|
|
// 开本流程新增
|
|
handleAddK() {
|
|
this.ruleForm.processesList.push({
|
|
title: "",
|
|
code: "",
|
|
introduction: "",
|
|
sort: ""
|
|
});
|
|
},
|
|
// 开本流程删除
|
|
Del(index) {
|
|
this.ruleForm.processesList.splice(index, 1);
|
|
},
|
|
// 图片预览
|
|
dialogimg(e) {
|
|
console.log(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);
|
|
},
|
|
// 图片删除
|
|
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
|
|
});
|
|
},
|
|
handleAddMusic() {
|
|
this.ruleForm.radioMusic.push({
|
|
title: "",
|
|
url: "",
|
|
processId: [],
|
|
mediaType: 2,
|
|
sourceType: this.radioMusic
|
|
});
|
|
},
|
|
handleAddVideo() {
|
|
this.ruleForm.radioVideo.push({
|
|
title: "",
|
|
url: "",
|
|
processId: [],
|
|
mediaType: 3,
|
|
sourceType: this.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,
|
|
processName: "",
|
|
title: res.data.wjDx
|
|
});
|
|
this.imgType = true;
|
|
});
|
|
},
|
|
labeluploadmusic({ file }) {
|
|
const formdata = new FormData();
|
|
formdata.append("file", file);
|
|
formdata.append("type", "product");
|
|
uploadFile(formdata).then(res => {
|
|
this.musicData.push({
|
|
url: res.data.wjUrl,
|
|
processName: "",
|
|
title: res.data.wjDx
|
|
});
|
|
this.musicType = true;
|
|
});
|
|
},
|
|
labeluploadvideo({ file }) {
|
|
const formdata = new FormData();
|
|
formdata.append("file", file);
|
|
formdata.append("type", "product");
|
|
uploadFile(formdata).then(res => {
|
|
this.videoData.push({
|
|
url: res.data.wjUrl,
|
|
processName: "",
|
|
title: res.data.wjDx
|
|
});
|
|
this.radioType = true;
|
|
});
|
|
},
|
|
// 图片删除
|
|
deldialogimg(item, index, type) {
|
|
console.log(index, type);
|
|
if (type == "img") {
|
|
this.imgData.splice(index, 1);
|
|
}
|
|
if (type == "music") {
|
|
this.musicData.splice(index, 1);
|
|
}
|
|
if (type == "video") {
|
|
this.videoData.splice(index, 1);
|
|
}
|
|
console.log(item);
|
|
delFile({ wjUrl: item.url }).then(res => {
|
|
if (res.code == 200) {
|
|
this.$message.success("删除成功");
|
|
}
|
|
});
|
|
},
|
|
//关联流程
|
|
setLc(item, i, type) {
|
|
console.log(item, i, this.imgData);
|
|
if (this.ruleForm.processesList.length == 0) {
|
|
this.$message({
|
|
message: "请新建流程",
|
|
type: "error"
|
|
});
|
|
return false;
|
|
}
|
|
if (type == "img") {
|
|
this.imgIndex = i;
|
|
} else if (type == "music") {
|
|
this.musicIndex = i;
|
|
} else if (type == "video") {
|
|
this.videoIndex = i;
|
|
}
|
|
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].processName = tmp.join(",");
|
|
this.imgData[this.imgIndex].processId = this.processId;
|
|
this.imgData[this.imgIndex].mediaType = 1;
|
|
this.imgData[this.imgIndex].sourceType = this.radioImg;
|
|
console.log(this.imgData, "处理后img数据");
|
|
}
|
|
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].processName = 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].processName = tmp.join(",");
|
|
this.videoData[this.videoIndex].processId = this.processId;
|
|
this.videoData[this.videoIndex].mediaType = 3;
|
|
this.videoData[this.videoIndex].sourceType = this.radioVideo;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</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;
|
|
}
|
|
.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;
|
|
}
|
|
</style>
|