|
|
<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>
|
