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.
 
 
 
 

751 lines
23 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">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="70%">
<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="封面">
<!-- :action="baseUrl + 'sys/file/upload'" -->
<!-- <el-image v-if="ruleForm.cover" style="width: 146px; height: 146px" :src="ruleForm.cover" fit="fill">
</el-image> -->
<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="简介">
<!-- <el-input
v-model="ruleForm.desc"
style="width:500px"
rows="10"
type="textarea"
/> -->
<Tinymce ref="editor" v-model="ruleForm.introduction" :height="400" />
</el-form-item>
<h3 class="form-title">开本流程</h3>
<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="流程标题">
<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>
<div style="margin-top:15px;">
<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 == 2" style="width: 100%;" class="urlTable">
<el-table
: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
placeholder="请选择流程"
>
<el-option
v-for="item in lcData"
:key="item.value"
:label="item.title"
:value="item.id"
>
</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="Del(scope.$index)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<div style="margin-top:15px;">
<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 == 2" style="width: 100%;" class="urlTable">
<el-table
: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
placeholder="请选择流程"
>
<el-option
v-for="item in lcData"
:key="item.value"
:label="item.title"
:value="item.id"
>
</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>
<div style="margin-top:15px;">
<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 == 2" style="width: 100%;" class="urlTable">
<el-table
: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
placeholder="请选择流程"
>
<el-option
v-for="item in lcData"
:key="item.value"
:label="item.title"
:value="item.id"
>
</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>
<div 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 type="primary" @click="subMit"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import Tinymce from "@/components/Tinymce";
import {
queryJbInfo,
addJbInfo,
updateJbInfo,
queryJbDetail,
deleteJbInfo,
queryFindList
} from "@/api/userInfoApi.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" }
]
},
dialog: {
title: "新增剧本",
Visible: false
},
ruleForm: {
resource: "1",
processesList: [],
imgUrl: "",
data: [],
radioImg:[],
radioMusic:[],
radioVideo:[],
resourcesList:[]
},
dialogVisible: false,
active: "",
imageUrl: "",
total: 0,
dialogVisible: false,
dialogImageUrl: "",
dataImg: [],
lcData: [],
radioImg:"1",
radioMusic:'1',
radioVideo:"1"
};
},
mounted() {
this.queryList();
this.queryFindList();
},
methods: {
//获取列表
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();
},
//获取流程
async queryFindList() {
try {
let res = await queryFindList({});
// console.log(res.data, "流程列表");
this.lcData = res.data;
} catch (err) {
console.log(err);
}
},
//获取详情
async queryListDetail(id) {
try {
let res = await queryJbDetail(id);
console.log(res, "详情");
this.ruleForm = res.data;
} catch (err) {
console.log(err);
}
},
// 新增
handleAdd() {
this.dialog.Visible = true;
this.dialog.title = "新增剧本";
},
async subMit() {
this.ruleForm.imgUrl = this.dataImg.join(",");
this.ruleForm.resourcesList = this.ruleForm.resourcesList.concat(this.ruleForm.radioImg).concat(this.ruleForm.radioMusic).concat(this.ruleForm.radioVideo)
console.log(this.ruleForm, "参数");
try{
let 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"
});
}
}catch(err){
console.log(err)
}
},
// 编辑
handleEdit(row) {
console.log(row);
this.dialog.Visible = true;
this.dialog.title = "编辑剧本";
this.ruleForm = row;
},
// 查看
handleView(row) {
this.queryListDetail(row.id);
},
// 删除
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];
},
// 图片删除
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;
},
changeMusic(val) {
this.radioMusic = val;
},
changeVideo(val) {
this.radioVideo = val;
},
//新增图片资源
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
});
}
}
};
</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>