Commit a78d1e58 authored by 乐宝呗666's avatar 乐宝呗666

修改展板内容

parent 78a5d931
......@@ -38,6 +38,7 @@
class="text-center"
drag
:action="uploadUrl"
:headers ="headers"
:on-success="handleAvatarSuccess"
:before-upload="handleBeforeUpload"
:file-list="fileList"
......@@ -64,6 +65,7 @@ export default {
return {
uploadUrl:'http://192.168.110.67/mall/file/upload/allType',
formVisible: false,
headers:{Authorization: localStorage.getItem('backToken')},
formItem: {},
fileList: [],
rules: {
......
......@@ -14,6 +14,7 @@
action="http://192.168.110.67/mall/file/image/upload"
:on-success="uploadPageImg"
:before-upload="handleBeforeUpload"
:headers ="headers"
:file-list="dirList"
>
<el-button type="default">上传背景图</el-button>
......@@ -45,6 +46,7 @@
action="http://192.168.110.67/mall/file/image/upload"
:on-success="uploadRunImg"
:before-upload="handleBeforeUpload"
:headers ="headers"
:file-list="fileRunList"
>
<el-button type="default">上传背景图</el-button>
......@@ -86,6 +88,7 @@ export default {
components: { Swiper, SwiperSlide },
data() {
return {
headers:{Authorization: localStorage.getItem('backToken')},
radioPage: "", // 选中项
radioRun: "",
dirList: [], // 上传列表
......
......@@ -23,20 +23,25 @@
<script>
export default {
props:{
fileList:{
type:Array,
default:[]
},
},
data() {
return {
filedata:[],
filedata: [],
fileArr: [],
fileList:[],
// fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
};
},
mounted(){
console.log("uploadAudio",this.fileList)
},
methods: {
submitUpload() { // 导入
let tempData = this.filedata
submitUpload() {
this.filedata = new FormData() // 用FormData存放上传文件
this.$refs.upload.submit() // 会循环调用uploadFile方法,多个文件调用多次
let _this = this;
_this
.$https(
......@@ -52,15 +57,13 @@ export default {
console.log(res)
if (resData.resultCode == "200") {
// alert("上传成功");
console.log(resData.data.fileList)
const data = resData.data.fileList
console.log(data)
let newArray = data.map((item) => {
return item.id;
})
this.$emit('audioList', newArray)
let newArray = data.map((item) => item.id)
let editArray =[]
if(this.fileList.length){
editArray = this.fileList.map(item=>item.id)
}
this.$emit('audioList', [...newArray,...editArray])
} else {
_this.$message.error(resData.msg || resData.message);
}
......
<template>
<div>
<!-- accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" -->
<div>
<!-- accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" -->
<!-- :show-file-list="false" -->
<!-- :file-list="fileList" -->
<!-- action="http://192.168.110.67/mall/file/video/content/upload" -->
......@@ -14,28 +14,37 @@
:before-upload="beforeAvatarUpload"
>
<i class="el-icon-plus fileUpload"></i>
</el-upload>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
</div>
<el-button
style="margin-left: 10px"
size="small"
type="success"
@click="submitUpload"
>上传到服务器</el-button
>
</div>
</template>
<script>
export default {
props:{
fileList:{
type:Array,
default:[]
},
},
data() {
return {
filedata:[],
filedata: [],
fileArr: [],
fileList:[],
// fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
};
},
mounted(){
},
methods: {
submitUpload() { // 导入
let tempData = this.filedata
this.filedata = new FormData() // 用FormData存放上传文件
this.$refs.upload.submit() // 会循环调用uploadFile方法,多个文件调用多次
submitUpload() {
this.filedata = new FormData(); // 用FormData存放上传文件
this.$refs.upload.submit(); // 会循环调用uploadFile方法,多个文件调用多次
let _this = this;
_this
......@@ -43,37 +52,31 @@ export default {
{
method: "post",
url: "file/datum/upload",
authType: this.backToken
authType: this.backToken,
},
this.filedata
)
.then(res => {
.then((res) => {
let resData = res.data;
console.log(res)
if (resData.resultCode == "200") {
// alert("上传成功");
console.log(resData.data.fileList)
const data = resData.data.fileList
console.log(data)
let newArray = data.map((item) => {
return item.id;
})
this.$emit('datumList', newArray)
const data = resData.data.fileList;
let newArray = data.map((item) => item.id);
let editArray =[]
if(this.fileList.length){
editArray = this.fileList.map(item=>item.id)
}
this.$emit("datumList", [...newArray,...editArray]);
} else {
_this.$message.error(resData.msg || resData.message);
}
})
.catch(err => {
.catch((err) => {
console.log(err);
_this.$message.error(err.msg || err.message);
});
},
uploadFile(file) {
this.filedata.append('file', file.file)
this.filedata.append("file", file.file);
},
beforeAvatarUpload(file) {
const isLt5M = file.size / 1024 / 1024 < 5;
......@@ -81,8 +84,8 @@ export default {
this.$message.error("上传文件大小不能超过 5MB!");
}
return isLt5M;
}
}
},
},
};
</script>
......
......@@ -7,6 +7,9 @@
:on-remove="handleRemove"
:on-success="handleAvatarSuccess"
:headers="headers"
:file-list="fileList"
:limit="1"
:multiple ="false"
>
<i class="el-icon-plus"></i>
</el-upload>
......@@ -18,6 +21,12 @@
<script>
export default {
props:{
fileList:{
type:Array,
default:[]
},
},
data() {
return {
dialogImageUrl: "",
......@@ -26,18 +35,13 @@ export default {
},
computed: {
headers() {
// return { 'token': this.backToken }
return {Authorization: localStorage.getItem('backToken')}
}
},
methods: {
// 图片上传成功的返回值
handleAvatarSuccess(res, file) {
console.log(res)
console.log(res.data.url)
this.$emit('imgUrl', res.data.url)
// console.log(data.fileList[0].url)
// this.imageUrl = URL.createObjectURL(file.raw);
},
handleRemove(file, fileList) {
console.log(file, fileList);
......
......@@ -7,6 +7,9 @@
:on-remove="handleRemove"
:on-success="handleAvatarSuccess"
:headers="headers"
:file-list="fileList"
:limit="1"
:multiple ="false"
>
<i class="el-icon-plus"></i>
</el-upload>
......@@ -18,6 +21,12 @@
<script>
export default {
props:{
fileList:{
type:Array,
default:[]
},
},
data() {
return {
dialogImageUrl: "",
......@@ -26,7 +35,7 @@ export default {
},
computed: {
headers() {
// return { 'token': this.backToken }
return {Authorization: localStorage.getItem('backToken')}
}
},
methods: {
......
<template>
<div class="listPage H100">
<div class="search-container">
<el-form :inline="true" :model="form" ref="form" class="search-form" onsubmit="return false;">
<el-form-item label="版权方名称">
<el-form
:inline="true"
:model="form"
ref="form"
onsubmit="return false;"
>
<el-form-item label="分类名称">
<el-input
size="mini"
placeholder="请输入版权方名称"
placeholder="请输入分类名称"
v-model="form.nameOrCode"
@keyup.enter.native="Search"
@keyup.enter.native="onSearch"
clearable
></el-input>
</el-form-item>
<el-form-item label="版权方有效期">
<el-date-picker
value-format="yyyy-MM-dd"
v-model="value1"
v-model="form.dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
......@@ -23,14 +27,22 @@
</el-form-item>
<el-form-item>
<div class="btn-group">
<el-button size="mini" type="primary" class="btn_form_search" @click="Search">查询</el-button>
<el-button size="mini" class="btn_form_search" @click="Reset">重置</el-button>
<el-button
type="primary"
class="btn_form_search"
@click="onSearch"
>查询</el-button
>
<el-button class="btn_form_search" @click="Reset">重置</el-button
>
</div>
</el-form-item>
</el-form>
<div class="page-tip">
<span class="page-tip-title">页面说明:</span>
<span class="page-tips">可通过创建时间、展板分类名称模糊搜索快速筛选展板分类信息,可对展板分类信息进行修改、删除。可新增视频分类。</span>
<span class="page-tips"
>可通过创建时间、展板分类名称模糊搜索快速筛选展板分类信息,可对展板分类信息进行修改、删除。可新增视频分类。</span
>
</div>
</div>
<div class="table-content">
......@@ -40,14 +52,23 @@
<div class="party-table">
<el-table
border
style="width: 100%;height:100%" height="100%"
style="width: 100%; height: 100%"
height="100%"
ref="multipleTable"
:data="tableData"
@selection-change="handleSelectionChange"
>
<el-table-column type="index" width="120" label="序号"></el-table-column>
<el-table-column
type="index"
width="120"
label="序号"
><template slot-scope="scope">
<span>{{ (page._index - 1) * 10 + scope.$index + 1 }}</span>
</template></el-table-column>
<el-table-column label="展板分类名称" prop="name"></el-table-column>
<el-table-column label="版权方" prop="copyrightOwnerNames"></el-table-column>
<el-table-column
label="版权方"
prop="copyrightOwnerNames"
></el-table-column>
<el-table-column label="创建时间" prop="createTime"></el-table-column>
<el-table-column label="备注" prop="remarks"></el-table-column>
<el-table-column label="操作" header-align="center" align="center">
......@@ -68,20 +89,16 @@
</el-table-column>
</el-table>
</div>
<div class="partyt-pagination">
<el-pagination
small
background
@current-change="handleCurrentChange"
:current-page="page.currentPage"
:page-size="page.pageSize"
layout="prev, pager, next, jumper"
:total="page.total"
></el-pagination>
</div>
<party-pagination :page="page" @changePage="handleCurrentChange" />
</div>
<!--新增弹框-->
<el-dialog title="新建" custom-class="party-dialog" width="468px" :visible.sync="FormVisible1" :before-close="close1">
<el-dialog
:title="type?'新建版权方':'编辑版权方'"
custom-class="party-dialog"
width="468px"
:visible.sync="FormVisible"
:before-close="close"
>
<div class="dialog-content">
<el-form
:model="classForm"
......@@ -101,250 +118,126 @@
</el-form>
</div>
<div slot="footer" class="dialog-footer btn-group">
<el-button size="mini" v-show="type" type="primary" @click="permisSave">确定</el-button>
<el-button size="mini" v-show="!type" type="primary" @click="permisEdit">确定</el-button>
<el-button size="mini" @click="close1">取 消</el-button>
</div>
</el-dialog>
<!--编辑-->
<el-dialog custom-class="party-dialog" title="编辑" width="468px" :visible.sync="FormVisible" :before-close="close" >
<div class="dialog-content">
<el-form :model="editform" disabled class="party-form" ref="editform" label-width="80px" label-position="right" :rules="rules">
<el-form-item label="审核层级:" :label-width="formLabelWidth">
<el-input
size="small"
v-model="editform.sort"
auto-complete="off"
clearable
></el-input>
</el-form-item>
<el-form-item label="审核时间:" :label-width="formLabelWidth">
<el-input
size="small"
v-model="editform.menuName"
auto-complete="off"
clearable
onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"
></el-input>
</el-form-item>
<el-form-item label="审核结果:" :label-width="formLabelWidth">
<el-input
size="small"
v-model="editform.menuUrl"
auto-complete="off"
clearable
onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"
></el-input>
</el-form-item>
<el-form-item label="驳回原因:" :label-width="formLabelWidth">
<el-input type="textarea" v-model="editform.desc"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer btn-group">
<el-button size="mini" type="primary" @click="submitForm('editform')">确定</el-button>
<el-button size="mini" v-show="type" type="primary" @click="permisSave"
>确定</el-button
>
<el-button size="mini" v-show="!type" type="primary" @click="permisEdit"
>确定</el-button
>
<el-button size="mini" @click="close">取 消</el-button>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import { partyPagination } from "@/components/index";
export default {
components: { partyPagination },
data() {
var checkIsNull = (rule, value, callback) => {
if (value) {
if (value.trim() == "") {
callback(new Error("不允许只输入空格"));
} else {
callback();
}
}
};
return {
type:true,
value1: "",
page: { currentPage: 1, pageSize: 10, total: 0 },
type: true,
page: { _index: 1, _size: 10, total: 0 },
tableData: [],
FormVisible: false,
FormVisible1: false,
formLabelWidth: "100px",
form: {
name: ""
},
editform: {
id: ""
dateRange:[]
},
classForm: {
},
typeList: [],
rule:{
classForm: {},
rule: {
name: [
{ required: true, message: "请输入展板分类名称", trigger: "blur" }
],
},
rules: {
sort: [
{ required: true, message: "请输入顺序值", trigger: "change" },
{ pattern: /^(\d{1,5})?$/, message: "排序值为低于5位数的纯数字" }
{ required: true, message: "请输入展板分类名称", trigger: "blur" },
],
menuName: [
{ required: true, message: "请输入菜单名称", trigger: "change" },
{ max: 20, message: "不能超过20个字符", trigger: "change" },
{ validator: checkIsNull, trigger: "blur" }
],
menuUrl: [
{ required: true, message: "请输入菜单地址", trigger: "change" },
{ validator: checkIsNull, trigger: "blur" }
],
parentId: [
{ required: true, message: "请输入父级菜单", trigger: "change" }
]
},
value: "",
name: ""
name: "",
};
},
computed: {},
mounted() {
this.onSearch();
// this.getPermis();
},
components: {},
methods: {
// 渲染父级权限
getPermis() {
let vm = this;
vm.$https({
method: "get",
url: "menu/getRoleMenu?roleId=" + sessionStorage.getItem("roleId"),
authType: this.backToken
}).then(
res => {
let data = res.data;
vm.typeList = data.map((e, i) => {
return {
id: e.id,
name:
e.menuName.indexOf("-") == -1
? e.menuName
: e.menuName.split("-")[1]
};
});
},
error => {
console.log(error);
}
);
onSearch() {
this.page._index = 1;
this.getTableData();
},
// 获得数据接口
getTableData(param) {
getTableData() {
let vm = this;
let param = {
_index: this.page._index,
_size: this.page._size,
nameOrCode:this.form.nameOrCode,
startDate: this.form.dateRange.length ? this.form.dateRange[0] : "",
endDate: this.form.dateRange.length ? this.form.dateRange[1] : "",
};
vm.$https(
{
url: "exhibitionBoardCat/getPageList",
method: "post",
authType: this.backToken
authType: this.backToken,
},
vm.$qs.stringify(param)
// param
)
.then(res => {
.then((res) => {
let data = res.data.data;
vm.page.pageSize = data.size;
vm.page.total = data.total;
vm.tableData = data.records;
})
.catch(function(err) {
.catch(function (err) {
console.log(err);
});
},
// 分页
handleCurrentChange(val) {
let _this = this;
_this.page.currentPage = val;
_this.onSearch();
},
onSearch() {
let _this = this;
let param = _this.getSearchQuery();
_this.getTableData(param);
},
Search() {
let _this = this;
_this.page.currentPage = 1;
let searchObj = {
_index: 1,
_size: _this.page.pageSize,
nameOrCode: _this.form.nameOrCode,
startDate:this.value1?this.value1[0]:"",
endDate:this.value1?this.value1[1]:"",
};
this.getTableData(searchObj);
this.page._index = val;
this.onSearch();
},
// 重置
Reset(){
// this.$refs["form"].resetFields();
this.form = {}
this.Search()
},
// // 获取当前查询参数
getSearchQuery() {
let _this = this;
let searchObj = {
_index: _this.page.currentPage,
_size: _this.page.pageSize
};
for (let key in _this.form) {
if (_this.form[key]) {
searchObj[key] = _this.form[key];
}
}
return searchObj;
Reset() {
this.form = { dateRange:[]};
this.onSearch();
},
// 添加
addPermis() {
// this.$router.push({ path: "videoContentAdd", query: { type: "add" } });
$('.el-dialog__title').html('新建');
this.FormVisible1 = true;
this.type = true
this.FormVisible = true;
this.type = true;
this.classForm = {}
},
// 新建展板分类确认保存
permisSave() {
let _this = this;
_this.$refs.classForm.validate(valid => {
_this.$refs.classForm.validate((valid) => {
if (valid) {
const params ={
name: this.classForm.name,
remarks: this.classForm.remarks,
}
_this
.$https(
{ url: "exhibitionBoardCat/save", method: "post", authType: this.backToken },
_this.$qs.stringify(_this.classForm)
// _this.classForm
{
url: "exhibitionBoardCat/save",
method: "post",
authType: this.backToken,
},
_this.$qs.stringify(params)
)
.then(
res => {
if (res.data.resultCode == 200 || res.data.resultCode == 201) {
_this.$message({
type: "success",
message: '新建成功!'
});
(res) => {
if (res.data.resultCode === '200') {
_this.$message.success("新建成功!");
//跳回用户列表
_this.onSearch();
_this.FormVisible1 = false;
for (let key in _this.classForm) {
_this.classForm[key] = null;
}
_this.$refs["classForm"].resetFields();
_this.close()
} else {
_this.$message({
type: "error",
message: res.data.msg
});
_this.$message.error(res.data.msg);
}
},
error => {
(error) => {
_this.$message({
type: "error",
message: error
message: error,
});
}
);
......@@ -354,99 +247,50 @@ export default {
// 编辑展板分类确认保存
permisEdit() {
let _this = this;
_this.$refs.classForm.validate(valid => {
_this.$refs.classForm.validate((valid) => {
if (valid) {
_this
.$https(
{ url: "exhibitionBoardCat/update", method: "put", authType: this.backToken },
{
url: "exhibitionBoardCat/update",
method: "put",
authType: this.backToken,
},
_this.$qs.stringify(_this.classForm)
// _this.classForm
)
.then(
res => {
if (res.data.resultCode == 200 || res.data.resultCode == 201) {
_this.$message({
type: "success",
message: '修改成功!'
});
(res) => {
if (res.data.resultCode === '200') {
_this.$message.success("修改成功!");
//跳回用户列表
_this.onSearch();
_this.FormVisible1 = false;
for (let key in _this.classForm) {
_this.classForm[key] = null;
}
_this.$refs["classForm"].resetFields();
_this.close()
} else {
_this.$message({
type: "error",
message: res.data.msg
});
_this.$message.error(res.data.msg);
}
},
error => {
(error) => {
_this.$message({
type: "error",
message: error
message: error,
});
}
);
}
});
},
// 编辑关闭
// 关闭
close() {
this.FormVisible1 = false;
for (let key in this.classForm) {
this.classForm[key] = null;
}
this.$refs["classForm"].resetFields();
// this.FormVisible = false;
// this.$refs["editform"].resetFields();
},
// 新增关闭
close1() {
this.FormVisible1 = false;
for (let key in this.classForm) {
this.classForm[key] = null;
}
this.FormVisible = false;
this.classForm = {}
this.$refs["classForm"].clearValidate();
this.$refs["classForm"].resetFields();
},
// 编辑弹框
openEdit(row) {
this.type = false
$('.el-dialog__title').html('编辑');
let _this=this;
//成功之后清除数据
// for (let key in this.editform) {
// _this.editform[key]=null;
// }
// _this.editform= Object.assign({}, row);
_this.FormVisible1 = true;
this.getVideoContentCatInfo(row.id)
},
// 获取展板分类详情
getVideoContentCatInfo(id){
let vm = this;
vm.$https(
{
url: "exhibitionBoardCat/get/" + id,
method: "get",
authType: this.backToken
},
// param
)
.then(res => {
let data = res.data.data;
this.classForm = data
})
.catch(function(err) {
console.log(err);
});
},
openDetails() {
let _this = this;
_this.FormVisible = true;
this.type = false;
this.FormVisible = true;
this.classForm = JSON.parse(JSON.stringify(row));
},
// 删除
handleDelete(row) {
......@@ -454,139 +298,34 @@ export default {
this.$confirm("此操作将永久删除, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
type: "warning",
})
.then(() => {
_this.$https({
method: 'delete',
url: 'exhibitionBoardCat/delete/'+ row.id,
authType: this.backToken
}).then((res) => {
this.$message({type: 'success', message: '删除成功!'});
_this.Search();
}, (error) => {
this.$message({type: 'fail', message: "删除失败!" + error.response.data});
}
)
})
.catch(() => {});
},
// // 保存编辑信息
// submitForm() {
// let _this = this;
// _this.$refs.editform.validate(valid => {
// if (valid) {
// let searchObj = {};
// for (let key in _this.editform) {
// if (this.editform[key]) {
// searchObj[key] = _this.editform[key];
// }
// }
// let str = _this.editform.menuName;
// let index = str.lastIndexOf("-");
// str = str.substring(index + 1, str.length);
// searchObj.menuName = str;
// _this
// .$https(
// {
// url: "menu/edit",
// method: "put",
// authType: this.backToken
// },
// _this.$qs.stringify(searchObj)
// )
// .then(
// res => {
// if (res.data.status == 200 || res.data.status == 201) {
// _this.$message({
// type: "success",
// message: res.data.message
// });
// _this.onSearch();
// _this.FormVisible = false;
// _this.$refs["editform"].resetFields();
// } else {
// _this.$message({
// type: "error",
// message: res.data.message
// });
// }
// },
// error => {
// _this.$message({
// type: "error",
// message: error
// });
// }
// );
// }
// });
// },
// 批量操作
handleSelectionChange(selection) {
let _this = this;
_this.selection = selection;
},
getMultipleSelect() {
let _this = this;
let arr = [];
let str = "";
if (_this.selection) {
_this.selection.forEach(function(e) {
arr.push(e.id);
});
str = arr.join(",");
} else {
str = "";
}
return str;
},
// 批量删除
multipleDelete() {
let _this = this;
let str = _this.getMultipleSelect();
if (str) {
this.$confirm("此操作将删除选中菜单, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
_this
.$https({
url: "menu/batchDel?menuIds=" + str,
method: "DELETE",
authType: this.backToken
method: "delete",
url: "exhibitionBoardCat/delete/" + row.id,
authType: this.backToken,
})
.then(
res => {
if (res.data.status == 201 || res.data.status == 200) {
this.$message({
type: "success",
message: "删除成功!"
});
}
//重新查询数据
(res) => {
this.$message({ type: "success", message: "删除成功!" });
_this.onSearch();
},
error => {}
);
});
} else {
(error) => {
this.$message({
type: "info",
message: "请至少选择一个选项!"
type: "error",
message: "删除失败!" + error.response.data,
});
}
}
}
);
})
.catch(() => {});
},
},
};
</script>
<style lang="less">
// @import "../../../../style/common";
// @import "../../style/list";
@import "../../../../style/dialog.less";
@import '../../../../style/table.less';
@import '../../../../style/pagination.less';
@import "../../../../style/table.less";
</style>
<template>
<div class="info">
<div class="info-header">新建展板</div>
<div class="info info-add">
<!-- <div class="info-header">新建展板</div> -->
<div class="info-container">
<div class="info-wrapper">
<div class="pageTips">
<strong>页面说明:</strong>
可新建视频。“*”为必填项。若没有对应的视频版权方或视频分类可点击图标快速新建。
</div>
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse v-model="activeNames">
<el-collapse-item title="展板基本信息" name="1">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="140px"
class="demo-form-inline party-form"
class="party-form"
:inline="true"
label-position="top"
>
......@@ -22,10 +22,9 @@
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="展板版权方" class="w50">
<el-form-item label="展板版权方" class="w50" prop="boardCopyrightOwnerId">
<el-select
placeholder="请选择展板版权方"
@focus="getBoardCopyrightOwnerId"
v-model="ruleForm.boardCopyrightOwnerId"
>
<el-option
......@@ -36,10 +35,9 @@
></el-option>
</el-select>
</el-form-item>
<el-form-item label="展板分类">
<el-form-item label="展板分类" prop="exhibitionBoardCatId">
<el-select
placeholder="请选择展板分类"
@focus="getExhibitionBoardCatId"
v-model="ruleForm.exhibitionBoardCatId"
>
<el-option
......@@ -50,13 +48,13 @@
></el-option>
</el-select>
</el-form-item>
<el-form-item label="展板图片" class="w50" prop="cover">
<upload-img @imgUrl="imgUrl" ></upload-img>
<el-form-item label="展板图片" class="w50" prop="cover" required>
<upload-img :fileList="ruleForm.imageList" @imgUrl="imgUrl" ></upload-img>
</el-form-item>
<el-form-item label="展板二维码" class prop="qrcodeUrl">
<upload-qrcode @qrcodeUrl="qrcodeUrl" ></upload-qrcode>
<el-form-item label="展板二维码" class prop="qrcodeUrl" required>
<upload-qrcode :fileList="ruleForm.qrcodeList" @qrcodeUrl="qrcodeUrl" ></upload-qrcode>
</el-form-item>
<el-form-item label="展板简介" style="width:640px" prop="introduction">
<el-form-item label="展板简介" style="width:100%" prop="remarks">
<el-input type="textarea" v-model="ruleForm.remarks"></el-input>
</el-form-item>
</el-form>
......@@ -67,14 +65,13 @@
:rules="rules"
ref="ruleForm"
label-width="140px"
class="demo-form-inline party-form"
class="party-form"
:inline="true"
label-position="top"
>
<el-form-item label="请选择视频版权方" class="w50">
<el-form-item label="请选择视频版权方" class="w50" prop="videoContentCopyrightOwnerId">
<el-select
placeholder="请选择视频版权方"
@focus="getVideoContentCopyrightData"
v-model="ruleForm.videoContentCopyrightOwnerId"
>
<el-option
......@@ -85,12 +82,10 @@
></el-option>
</el-select>
</el-form-item>
<el-form-item label="请选择预设视频分类">
<el-form-item label="请选择视频分类" prop="videoContentCatId">
<el-select
placeholder="请选择预设视频分类"
@focus="getVideoContentCatData"
placeholder="请选择视频分类"
v-model="ruleForm.videoContentCatId"
@change="getVideoContentCat"
>
<el-option
v-for="item in videoContentCat"
......@@ -100,10 +95,9 @@
></el-option>
</el-select>
</el-form-item>
<el-form-item label="请选择视频">
<el-form-item label="请选择视频" prop="videoContentId">
<el-select
placeholder="请选择视频"
@focus="getVideoData"
v-model="ruleForm.videoContentId"
>
<el-option
......@@ -114,12 +108,12 @@
></el-option>
</el-select>
</el-form-item>
<el-form-item class="w50" prop="audioIdList"></el-form-item>
<el-form-item label="导览音频" class="w50">
<upload-audio @audioList="audioList"></upload-audio>
<el-form-item></el-form-item>
<el-form-item label="导览音频" class="w50" prop="audioIdList" required>
<upload-audio :fileList="ruleForm.audioList" @audioList="audioList"></upload-audio>
</el-form-item>
<el-form-item label="参考资料" class prop="datumIdList">
<upload-datum @datumList="datumList"></upload-datum>
<el-form-item label="参考资料" prop="datumIdList" required>
<upload-datum :fileList="ruleForm.datumList" @datumList="datumList"></upload-datum>
</el-form-item>
</el-form>
</el-collapse-item>
......@@ -128,10 +122,9 @@
</div>
<div class="info-footer">
<div class="btn-group">
<!-- 确定、取消 -->
<el-button v-show="type === 'add'" size="mini" type="primary" class="btn_form_search" @click="submitForm('ruleForm')">提交审核</el-button>
<el-button v-show="type === 'Update'" size="mini" type="primary" class="btn_form_search" @click="updateForm('ruleForm')">提交审核</el-button>
<el-button size="mini" class="btn_form_search" @click="close">关闭</el-button>
<el-button class="btn_form_search" @click="close">关闭</el-button>
<el-button v-show="type === 'add'" type="primary" class="btn_form_search" @click="submitForm('ruleForm')">提交审核</el-button>
<el-button v-show="type === 'Update'" type="primary" class="btn_form_search" @click="updateForm('ruleForm')">提交审核</el-button>
</div>
</div>
</div>
......@@ -157,104 +150,64 @@ export default {
},
data() {
return {
activeNames: ["1", "2"],
type: this.$route.query.type,
copyrightOwner: [],
boardCopyrightOwnerId:[],
exhibitionBoardCatId:[],
videoContentId:[],
dialogVisible: false,
boardCopyrightOwnerId:[], // 展板版权方
exhibitionBoardCatId:[], // 展板分类
copyrightOwner: [], // 视频版权方
videoContentCat: [], // 视频分类
videoContentId:[], // 视频
formLabelWidth: "100px",
form: {
name: ""
},
classForm: {},
value1: [],
ruleForm: {
name: "",
boardCopyrightOwnerId:"",
videoContentCopyrightOwnerId: "",
videoContentCatId: "",
audioIdList: [],
datumIdList: []
},
videoContentCat: [
{
value: "Beijing",
label: "北京"
},
{
value: "Shanghai",
label: "上海"
}
],
checkedThing: false,
selfstyle: {
textAlign: "right",
width: "100%",
paddingRight: "10px"
datumIdList: [],
datumList:[],
audioList:[],
imageList:[],
qrcodeList:[]
},
rules: {
name: [
{ required: true, message: "请输入版权方名称", trigger: "blur" }
// { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
],
date1: [
{
type: "date",
required: true,
message: "请选择日期",
trigger: "change"
}
boardCopyrightOwnerId: [
{ required: true, message: "请选择展板版权方", trigger: "change" }
],
date2: [
{
type: "date",
required: true,
message: "请选择时间",
trigger: "change"
}
exhibitionBoardCatId: [
{ required: true, message: "请选择展板分类", trigger: "change" }
],
videoContentCopyrightOwnerId: [
{ required: true, message: "请选择视频版权方", trigger: "change" }
],
videoContentCatId: [
{ required: true, message: "请选择视频分类", trigger: "change" }
],
videoContentId: [
{ required: true, message: "请选择视频", trigger: "change" }
],
remarks: [
{ required: true, message: "请输入展板简介", trigger: "change" }
],
},
activeNames: ["1", "2"]
};
},
mounted(){
this.init()
},
methods: {
audioList(list){
this.ruleForm.audioIdList = list;
},
datumList(list){
this.ruleForm.datumIdList = list;
},
// 视频版权方名称id
videoCopyright(idlist) {
this.ruleForm.videoContentCopyrightOwnerId = idlist;
},
// 缩略图地址
imgUrl(url) {
console.log(url, "图片服务器地址");
this.ruleForm.cover = url;
},
// 二维码
qrcodeUrl(url){
this.ruleForm.qrcodeUrl = url
},
getVideoContentCat(data) {
console.log(data);
console.log(this.ruleForm.videoContentCatId);
},
init() {
if (this.$route.query.type === "Update") {
this.getInfo(this.$route.query.id);
this.getVideoContentCatData();
this.getVideoContentCopyrightData();
this.getExhibitionBoardCatId();
this.getBoardCopyrightOwnerId();
this.getVideoData();
if (this.$route.query.type === "Update") {
this.getInfo(this.$route.query.id);
}
},
// 获取版权方详情
......@@ -266,11 +219,8 @@ export default {
method: "get",
authType: this.backToken
}
// param
).then(res => {
let data = res.data.data;
// this.ruleForm = data;
console.log(this.ruleForm)
this.ruleForm = {
videoContentCopyrightOwnerId :data.videoContentCopyrightOwnerId,
videoContentId:data.videoContentId,
......@@ -283,50 +233,37 @@ export default {
qrcodeUrl:data.qrcodeUrl,
remarks:data.remarks,
audioIdList:data.audioIdList,
datumIdList:data.datumIdList
datumIdList:data.datumIdList,
datumList:data.datumList.map(item=>{return {id:item.id,name:item.fileName,url:item.fileUrl}}),
audioList:data.audioList.map(item=>{return {id:item.id,name:item.fileName,url:item.fileUrl}}),
imageList:[{url:data.cover}],
qrcodeList:[{url:data.qrcodeUrl}]
}
console.log(this.ruleForm)
}).catch(function(err) {
console.log(err);
});
},
// 新建视频分类
addVideoClass() {
this.dialogVisible = true;
// 缩略图
imgUrl(url) {
this.ruleForm.cover = url;
},
// 弹窗保存
save(formName) {
this.$refs[formName].validate(valid => {
this.ruleForm.expireDateStart = this.value1[0];
this.ruleForm.expireDateEnd = this.value1[1];
if (valid) {
this.$https(
{
url: "videoContentCat/save",
method: "post",
// headers: {
// 'Content-Type': 'application/json'
// },
authType: this.backToken
// 二维码
qrcodeUrl(url){
this.ruleForm.qrcodeUrl = url
},
this.classForm
).then(res => {
this.$message({ type: "success", message: "新增分类成功!" });
this.dialogVisible = false;
}).catch(function(err) {
this.$message({
type: "fail",
message: "新增失败!" + err.response.data.msg
});
console.log(err);
});
} else {
console.log("error submit!!");
return false;
}
});
// 音频
audioList(list){
this.ruleForm.audioIdList = list;
},
// 资料
datumList(list){
this.ruleForm.datumIdList = list;
},
// 新增
submitForm(formName) {
console.log(this.ruleForm)
this.$refs[formName].validate(valid => {
if (valid) {
this.$https(
......@@ -335,47 +272,42 @@ export default {
method: "post",
authType: this.backToken
},
// this.ruleForm
this.$qs.stringify(this.ruleForm)
).then(res => {
this.$message({ type: "success", message: "新增成功!" });
history.go(-1);
this.$message.success("新增成功!");
this.close()
}).catch(function(err) {
console.log(err);
});
} else {
console.log("error submit!!");
return false;
}
});
},
// 修改版权方
// 修改
updateForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
const params = JSON.parse(JSON.stringify(this.ruleForm))
delete params.datumList
delete params.audioList
delete params.imageList
delete params.qrcodeList
console.log(params)
this.$https(
{
url: "exhibitionBoard/update",
method: "put",
authType: this.backToken
},
this.$qs.stringify(this.ruleForm)
this.$qs.stringify(params)
).then(res => {
this.$message({ type: "success", message: "修改成功!" });
history.go(-1);
this.$message.success("修改成功!");
this.close()
}).catch(function(err) {
console.log(err);
});
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
history.go(-1);
},
// 获取视频版权方
getVideoContentCopyrightData() {
let vm = this;
......@@ -448,15 +380,33 @@ export default {
console.log(err);
});
},
// 关闭
close() {
history.go(-1);
this.$router.go(-1);
},
handleChange(val) {
console.log(val);
}
}
};
</script>
<style lang="less">
<style lang="less" scoped>
.info-add {
/deep/.el-collapse-item__wrap {
padding: 16px;
}
/deep/.el-collapse-item__header {
position: relative;
padding-left: 20px;
font-size: 18px;
color: #333;
&::before {
content: "";
position: absolute;
top: 14px;
left: 0px;
width: 4px;
height: 18px;
background: #000;
}
}
}
</style>
......@@ -272,19 +272,6 @@ export default {
},
reviewFile() {
console.log("点击预览。。。");
// const _this = this;
// this.$confirm("确定要下载该文件?", "提示", {
// confirmButtonText: "确定",
// cancelButtonText: "取消",
// type: "warning",
// center: true,
// })
// .then(() => {
// this.updateVersion(row);
// })
// .catch(() => {
// this.$message("已取消");
// });
},
close() {
this.$router.go(-1);
......
<template>
<div class="listPage H100">
<msg-dialogs ref="msgDialog" :msgInfo="msgInfo" />
<div class="content-list-page H100">
<msg-dialog ref="msgDialog" :msgInfo="msgInfo" />
<div class="search-container">
<el-form :inline="true" :model="form" class="search-form" onsubmit="return false;">
<el-form-item label="版权方名称">
<el-form :inline="true" :model="form" onsubmit="return false;">
<el-form-item label="展板名称">
<el-input
size="mini"
placeholder="请输入版权方名称"
placeholder="请输入展板名称"
v-model="form.nameOrCode"
@keyup.enter.native="Search"
@keyup.enter.native="onSearch"
clearable
></el-input>
</el-form-item>
<el-form-item label="版权方有效期">
<el-date-picker
value-format="yyyy-MM-dd"
v-model="value1"
v-model="form.dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item label="展板版权方">
<el-select v-model="form.boardCopyrightOwnerId" placeholder="请选择展板版权方">
<el-option
v-for="item in copyRightList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="展板分类">
<el-select v-model="form.boardCatId" placeholder="请选择展板分类">
<el-option
v-for="item in classifyList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<div class="btn-group">
<el-button size="mini" type="primary" class="btn_form_search" @click="Search">查询</el-button>
<el-button size="mini" type="primary" class="btn_form_search" @click="onSearch">查询</el-button>
<el-button size="mini" class="btn_form_search" @click="Reset">重置</el-button>
</div>
</el-form-item>
......@@ -45,9 +64,10 @@
height="100%"
ref="multipleTable"
:data="tableData"
@selection-change="handleSelectionChange"
>
<el-table-column type="index" width="120" label="序号"></el-table-column>
<el-table-column type="index" width="120" label="序号"><template slot-scope="scope">
<span>{{ (page._index - 1) * 10 + scope.$index + 1 }}</span>
</template></el-table-column>
<el-table-column show-overflow-tooltip label="展板名称" prop="name"></el-table-column>
<el-table-column show-overflow-tooltip label="展板版权方" prop="boardCopyrightOwnerName"></el-table-column>
<el-table-column label="展板分类" prop="exhibitionBoardCatName"></el-table-column>
......@@ -78,12 +98,12 @@
</el-button>
</el-tooltip>
<el-tooltip content="上架" placement="top">
<el-button circle @click="handlePublish(scope.row,'True')">
<el-button circle :disabled="!!scope.row.published" @click="handlePublish(scope.row,true)">
<i class="icon-table icon-enable"></i>
</el-button>
</el-tooltip>
<el-tooltip content="下架" placement="top">
<el-button circle @click="handlePublish(scope.row,'False')">
<el-button circle :disabled="!scope.row.published" @click="handlePublish(scope.row,false)">
<i class="icon-table icon-disable"></i>
</el-button>
</el-tooltip>
......@@ -102,121 +122,91 @@
</el-table-column>
</el-table>
</div>
<div class="partyt-pagination">
<el-pagination
small
background
@current-change="handleCurrentChange"
:current-page="page.currentPage"
:page-size="page.pageSize"
layout="prev, pager, next, jumper"
:total="page.total"
></el-pagination>
<party-pagination :page="page" @changePage="handleCurrentChange" />
</div>
</div>
</div>
</template>
<script>
// import accountTable from "@/page/accounts/components/accountTable";
import msgDialog from "@/page/content/components/msgDialog.vue";
import { partyPagination } from "@/components/index";
export default {
components: {
msgDialog
},
components: { partyPagination ,msgDialog},
data() {
var checkIsNull = (rule, value, callback) => {
if (value) {
if (value.trim() == "") {
callback(new Error("不允许只输入空格"));
} else {
callback();
}
}
};
return {
msgInfo: {},
value1: "",
page: { currentPage: 1, pageSize: 10, total: 0 },
page: { _index: 1, _size: 10, total: 0 },
tableData: [],
FormVisible: false,
FormVisible1: false,
formLabelWidth: "100px",
form: {
nameOrCode: ""
},
editform: {
menuName: "",
menuUrl: "",
parentId: "",
sort: "",
id: ""
},
permisform: {
menuName: "",
menuUrl: "",
parentId: "",
sort: ""
dateRange:[]
},
typeList: [],
rules: {
sort: [
{ required: true, message: "请输入顺序值", trigger: "change" },
{ pattern: /^(\d{1,5})?$/, message: "排序值为低于5位数的纯数字" }
],
menuName: [
{ required: true, message: "请输入菜单名称", trigger: "change" },
{ max: 20, message: "不能超过20个字符", trigger: "change" },
{ validator: checkIsNull, trigger: "blur" }
],
menuUrl: [
{ required: true, message: "请输入菜单地址", trigger: "change" },
{ validator: checkIsNull, trigger: "blur" }
],
parentId: [
{ required: true, message: "请输入父级菜单", trigger: "change" }
]
},
value: "",
name: ""
copyRightList: [],
classifyList: [],
};
},
computed: {},
mounted() {
this.onSearch();
// this.getPermis();
this.getCopyRightList()
this.getClassifyList()
},
components: {},
methods: {
// 渲染父级权限
getPermis() {
getCopyRightList(){
let vm = this;
vm.$https({
method: "get",
url: "menu/getRoleMenu?roleId=" + sessionStorage.getItem("roleId"),
authType: this.backToken
}).then(
res => {
let data = res.data;
vm.typeList = data.map((e, i) => {
return {
id: e.id,
name:
e.menuName.indexOf("-") == -1
? e.menuName
: e.menuName.split("-")[1]
let param = {
copyrightOwnerType: 'EXHIBITION_BOARD'
};
vm.$https(
{
url: "copyrightOwner/getList",
method: "get",
authType: this.backToken,
},param)
.then((res) => {
if (res.data.resultCode === "200") {
this.copyRightList = res.data.data
} else {
this.$message.error(res.data.message)
}
})
.catch(function (err) {
console.log(err)
});
},
error => {
console.log(error);
getClassifyList(){
let vm = this;
vm.$https(
{
url: "exhibitionBoardCat/getList",
method: "get",
authType: this.backToken,
})
.then((res) => {
if (res.data.resultCode === "200") {
this.classifyList = res.data.data
} else {
this.$message.error(res.data.message)
}
);
})
.catch(function (err) {
console.log(err)
});
},
onSearch() {
this.page._index = 1;
this.getTableData();
},
// 获得数据接口
getTableData(param) {
getTableData() {
let vm = this;
const param ={
_index: this.page._index,
_size: this.page._size,
nameOrCode: this.form.nameOrCode,
boardCopyrightOwnerId:this.form.boardCopyrightOwnerId,
boardCatId:this.form.boardCatId,
startDate: this.form.dateRange.length ? this.form.dateRange[0] : "",
endDate: this.form.dateRange.length ? this.form.dateRange[1] : "",
};
vm.$https(
{
url: "exhibitionBoard/getPageList",
......@@ -224,11 +214,9 @@ export default {
authType: this.backToken
},
vm.$qs.stringify(param)
// param
)
.then(res => {
let data = res.data.data;
vm.page.pageSize = data.size;
vm.page.total = data.total;
vm.tableData = data.records;
})
......@@ -238,50 +226,18 @@ export default {
},
// 分页
handleCurrentChange(val) {
let _this = this;
_this.page.currentPage = val;
_this.onSearch();
},
onSearch() {
let _this = this;
let param = _this.getSearchQuery();
_this.getTableData(param);
this.page._index = val;
this.onSearch();
},
// 重置
Reset() {
// this.$refs["form"].resetFields();
this.form = {};
this.Search();
},
Search() {
let _this = this;
_this.page.currentPage = 1;
let searchObj = {
_index: 1,
_size: _this.page.pageSize,
nameOrCode: _this.form.nameOrCode,
startDate:this.value1?this.value1[0]:"",
endDate:this.value1?this.value1[1]:"",
};
this.getTableData(searchObj);
},
// // 获取当前查询参数
getSearchQuery() {
let _this = this;
let searchObj = {
_index: _this.page.currentPage,
_size: _this.page.pageSize
};
for (let key in _this.form) {
if (_this.form[key]) {
searchObj[key] = _this.form[key];
}
}
return searchObj;
this.form = {dateRange:[]};
this.onSearch();
},
// 添加
addPermis() {
this.$router.push({ path: "displayContentAdd", query: { type: "add" } }); // $('.el-dialog__title').html('新建'); // this.FormVisible1 = true;
this.$router.push({ path: "displayContentAdd", query: { type: "add" } });
},
displayInfo(row) {
this.$router.push({
......@@ -289,75 +245,12 @@ export default {
query: { id: row.id, }
});
},
// 添加权限
permisSave() {
let _this = this;
_this.$refs.permisform.validate(valid => {
if (valid) {
_this
.$https(
{ url: "menu/add", method: "post", authType: this.backToken },
_this.$qs.stringify(_this.permisform)
)
.then(
res => {
if (res.data.status == 200 || res.data.status == 201) {
_this.$message({
type: "success",
message: res.data.message
});
//跳回用户列表
_this.onSearch();
_this.FormVisible1 = false;
for (let key in _this.permisform) {
_this.permisform[key] = null;
}
_this.$refs["permisform"].resetFields();
} else {
_this.$message({
type: "error",
message: res.data.message
});
}
},
error => {
_this.$message({
type: "error",
message: error
});
}
);
}
});
},
// 编辑关闭
close() {
this.FormVisible = false;
this.$refs["editform"].resetFields();
},
// 新增关闭
close1() {
this.FormVisible1 = false;
for (let key in this.permisform) {
this.permisform[key] = null;
}
this.$refs["permisform"].resetFields();
},
// 编辑弹框
openEdit(row) {
this.$router.push({
path: "displayContentUpdate",
query: { type: "Update", id: row.id }
});
// alert('编辑')
// $('.el-dialog__title').html('编辑');
// let _this=this;
// //成功之后清除数据
// for (let key in this.editform) {
// _this.editform[key]=null;
// }
// _this.editform= Object.assign({}, row);
// _this.FormVisible = true;
},
// 删除
handleDelete(row) {
......@@ -377,11 +270,11 @@ export default {
.then(
res => {
this.$message({ type: "success", message: "删除成功!" });
_this.Search();
_this.onSearch();
},
error => {
this.$message({
type: "fail",
type: "error",
message: "删除失败!" + error.response.data
});
}
......@@ -401,86 +294,32 @@ export default {
_this.$qs.stringify({isPublish:isPublish}))
.then(
res => {
// this.$message({ type: "success", message: "删除成功!" });
// alert("已提交审核!")
_this.msgInfo = {
type: "wait",
des: `申请已提交,待审核…`,
};
_this.Search();
},
error => {
this.$message({
type: "fail",
message: "失败!" + error.response.data
});
}
);
},
// 保存编辑信息
submitForm() {
let _this = this;
_this.$refs.editform.validate(valid => {
if (valid) {
let searchObj = {};
for (let key in _this.editform) {
if (this.editform[key]) {
searchObj[key] = _this.editform[key];
}
}
let str = _this.editform.menuName;
let index = str.lastIndexOf("-");
str = str.substring(index + 1, str.length);
searchObj.menuName = str;
_this
.$https(
{
url: "menu/edit",
method: "put",
authType: this.backToken
},
_this.$qs.stringify(searchObj)
)
.then(
res => {
if (res.data.status == 200 || res.data.status == 201) {
_this.$message({
type: "success",
message: res.data.message
});
_this.onSearch();
_this.FormVisible = false;
_this.$refs["editform"].resetFields();
} else {
_this.$message({
type: "error",
message: res.data.message
});
}
},
error => {
_this.$message({
this.$message({
type: "error",
message: error
message: "失败!" + error.response.data
});
}
);
}
});
},
// 批量操作
handleSelectionChange(selection) {
let _this = this;
_this.selection = selection;
}
}
};
</script>
<style lang="less">
// @import "../../../../style/common";
// @import "../../style/list";
@import "../../../../style/table.less";
@import "../../../../style/pagination.less";
.content-list-page {
.search-container {
height: 160px;
}
.table-content {
height: calc(100% - 180px);
}
}
</style>
<template>
<div class="listPage H100">
<div class="search-container">
<el-form :inline="true" :model="form" ref="form" class="search-form" onsubmit="return false;">
<el-form
:inline="true"
:model="form"
ref="form"
onsubmit="return false;"
>
<el-form-item label="版权方名称">
<el-input
size="mini"
placeholder="请输入版权方名称"
v-model="form.nameOrCode"
@keyup.enter.native="Search"
@keyup.enter.native="onSearch"
clearable
></el-input>
</el-form-item>
<el-form-item label="版权方有效期">
<el-date-picker
value-format="yyyy-MM-dd"
v-model="value1"
v-model="form.dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
......@@ -23,14 +27,22 @@
</el-form-item>
<el-form-item>
<div class="btn-group">
<el-button size="mini" type="primary" class="btn_form_search" @click="Search">查询</el-button>
<el-button size="mini" class="btn_form_search" @click="Reset">重置</el-button>
<el-button
type="primary"
class="btn_form_search"
@click="onSearch"
>查询</el-button
>
<el-button class="btn_form_search" @click="Reset">重置</el-button
>
</div>
</el-form-item>
</el-form>
<div class="page-tip">
<span class="page-tip-title">页面说明:</span>
<span class="page-tips">可对展板版权方信息进行筛选、修改及删除。可新建版权方信息</span>
<span class="page-tips"
>可对展板版权方信息进行筛选、修改及删除。可新建版权方信息</span
>
</div>
</div>
<div class="table-content">
......@@ -40,17 +52,33 @@
<div class="party-table">
<el-table
border
style="width: 100%;height:100%" height="100%"
style="width: 100%; height: 100%"
height="100%"
ref="multipleTable"
:data="tableData"
@selection-change="handleSelectionChange"
>
<el-table-column type="index" width="120" label="序号"></el-table-column>
<el-table-column
type="index"
width="120"
label="序号"
><template slot-scope="scope">
<span>{{ (page._index - 1) * 10 + scope.$index + 1 }}</span>
</template></el-table-column>
<el-table-column label="版权方名称" prop="name"></el-table-column>
<el-table-column label="展板分类" prop="videoContentCatNames"></el-table-column>
<el-table-column
label="展板分类"
prop="videoContentCatNames"
></el-table-column>
<el-table-column label="创建时间" prop="createTime"></el-table-column>
<el-table-column label="版权方有效期" prop="expireDateEnd" width="200">
<template slot-scope="scope">{{scope.row.expireDateStart}}{{scope.row.expireDateEnd}}</template>
<el-table-column
label="版权方有效期"
prop="expireDateEnd"
width="200"
>
<template slot-scope="scope"
>{{ scope.row.expireDateStart }}
{{ scope.row.expireDateEnd }}</template
>
</el-table-column>
<el-table-column label="备注" prop="remarks"></el-table-column>
<el-table-column label="操作" header-align="center" align="center">
......@@ -71,20 +99,16 @@
</el-table-column>
</el-table>
</div>
<div class="partyt-pagination">
<el-pagination
small
background
@current-change="handleCurrentChange"
:current-page="page.currentPage"
:page-size="page.pageSize"
layout="prev, pager, next, jumper"
:total="page.total"
></el-pagination>
</div>
<party-pagination :page="page" @changePage="handleCurrentChange" />
</div>
<!--新增弹框-->
<el-dialog title="新建版权方" custom-class="party-dialog" width="468px" :visible.sync="FormVisible1" :before-close="close1">
<el-dialog
:title="type?'新建版权方':'编辑版权方'"
custom-class="party-dialog"
width="468px"
:visible.sync="FormVisible"
:before-close="close"
>
<div class="dialog-content">
<el-form
:model="classForm"
......@@ -98,10 +122,10 @@
<el-form-item label="版权方名称" prop="name">
<el-input v-model="classForm.name"></el-input>
</el-form-item>
<el-form-item label="版权方有效期" required>
<el-form-item label="版权方有效期" prop="valueDate">
<el-date-picker
value-format="yyyy-MM-dd"
v-model="valueDate"
v-model="classForm.valueDate"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
......@@ -114,262 +138,139 @@
</el-form>
</div>
<div slot="footer" class="dialog-footer btn-group">
<el-button size="mini" v-show="type" type="primary" @click="permisSave">确定</el-button>
<el-button size="mini" v-show="!type" type="primary" @click="permisEdit">确定</el-button>
<el-button size="mini" @click="close1">取 消</el-button>
</div>
</el-dialog>
<!--编辑-->
<el-dialog custom-class="party-dialog" title="编辑" width="468px" :visible.sync="FormVisible" :before-close="close" >
<div class="dialog-content">
<el-form :model="editform" disabled class="party-form" ref="editform" label-width="80px" label-position="right" :rules="rules">
<el-form-item label="审核层级:" :label-width="formLabelWidth">
<el-input
size="small"
v-model="editform.sort"
auto-complete="off"
clearable
></el-input>
</el-form-item>
<el-form-item label="审核时间:" :label-width="formLabelWidth">
<el-input
size="small"
v-model="editform.menuName"
auto-complete="off"
clearable
onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"
></el-input>
</el-form-item>
<el-form-item label="审核结果:" :label-width="formLabelWidth">
<el-input
size="small"
v-model="editform.menuUrl"
auto-complete="off"
clearable
onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"
></el-input>
</el-form-item>
<el-form-item label="驳回原因:" :label-width="formLabelWidth">
<el-input type="textarea" v-model="editform.desc"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer btn-group">
<el-button size="mini" type="primary" @click="submitForm('editform')">确定</el-button>
<el-button size="mini" v-show="type" type="primary" @click="permisSave"
>确定</el-button
>
<el-button size="mini" v-show="!type" type="primary" @click="permisEdit"
>确定</el-button
>
<el-button size="mini" @click="close">取 消</el-button>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import { partyPagination } from "@/components/index";
export default {
components: { partyPagination },
data() {
var checkIsNull = (rule, value, callback) => {
if (value) {
if (value.trim() == "") {
callback(new Error("不允许只输入空格"));
} else {
callback();
}
}
};
return {
valueDate: [],
type:true,
value1: "",
page: { currentPage: 1, pageSize: 10, total: 0 },
type: true,
page: { _index: 1, _size: 10, total: 0 },
tableData: [],
FormVisible: false,
FormVisible1: false,
formLabelWidth: "100px",
form: {
name: "",
ownerType:'EXHIBITION_BOARD'
},
editform: {
menuName: "",
menuUrl: "",
parentId: "",
sort: "",
id: ""
dateRange:[]
},
classForm: {
ownerType:'EXHIBITION_BOARD',
ownerType: "EXHIBITION_BOARD",
valueDate: [],
},
typeList: [],
rule:{
rule: {
name: [
{ required: true, message: "请输入展板分类名称", trigger: "blur" }
{ required: true, message: "请输入展板分类名称", trigger: "blur" },
],
},
rules: {
sort: [
{ required: true, message: "请输入顺序值", trigger: "change" },
{ pattern: /^(\d{1,5})?$/, message: "排序值为低于5位数的纯数字" }
],
menuName: [
{ required: true, message: "请输入菜单名称", trigger: "change" },
{ max: 20, message: "不能超过20个字符", trigger: "change" },
{ validator: checkIsNull, trigger: "blur" }
],
menuUrl: [
{ required: true, message: "请输入菜单地址", trigger: "change" },
{ validator: checkIsNull, trigger: "blur" }
],
parentId: [
{ required: true, message: "请输入父级菜单", trigger: "change" }
valueDate: [
{ required: true, message: "请选择版权方有效期", trigger: "change" },
]
},
value: "",
name: ""
name: "",
};
},
computed: {},
mounted() {
this.onSearch();
// this.getPermis();
},
components: {},
methods: {
// 渲染父级权限
getPermis() {
let vm = this;
vm.$https({
method: "get",
url: "menu/getRoleMenu?roleId=" + sessionStorage.getItem("roleId"),
authType: this.backToken
}).then(
res => {
let data = res.data;
vm.typeList = data.map((e, i) => {
return {
id: e.id,
name:
e.menuName.indexOf("-") == -1
? e.menuName
: e.menuName.split("-")[1]
};
});
},
error => {
console.log(error);
}
);
onSearch() {
this.page._index = 1;
this.getTableData();
},
// 获得数据接口
getTableData(param) {
getTableData() {
let vm = this;
let param = {
_index: this.page._index,
_size: this.page._size,
nameOrCode:this.form.nameOrCode,
ownerType: "EXHIBITION_BOARD",
startDate: this.form.dateRange.length ? this.form.dateRange[0] : "",
endDate: this.form.dateRange.length ? this.form.dateRange[1] : "",
};
vm.$https(
{
url: "copyrightOwner/getPageList",
method: "post",
authType: this.backToken
authType: this.backToken,
},
vm.$qs.stringify(param)
// param
)
.then(res => {
.then((res) => {
let data = res.data.data;
vm.page.pageSize = data.size;
vm.page.total = data.total;
vm.tableData = data.records;
})
.catch(function(err) {
.catch(function (err) {
console.log(err);
});
},
// 分页
handleCurrentChange(val) {
let _this = this;
_this.page.currentPage = val;
_this.onSearch();
},
onSearch() {
let _this = this;
let param = _this.getSearchQuery();
_this.getTableData(param);
},
Search() {
let _this = this;
_this.page.currentPage = 1;
let searchObj = {
_index: 1,
_size: _this.page.pageSize,
nameOrCode: _this.form.nameOrCode,
ownerType:'EXHIBITION_BOARD',
startDate:this.value1?this.value1[0]:"",
endDate:this.value1?this.value1[1]:"",
};
this.getTableData(searchObj);
this.page._index = val;
this.onSearch();
},
// 重置
Reset(){
// this.$refs["form"].resetFields();
this.form = { ownerType:'EXHIBITION_BOARD'}
this.Search()
},
// // 获取当前查询参数
getSearchQuery() {
let _this = this;
let searchObj = {
_index: _this.page.currentPage,
_size: _this.page.pageSize,
};
for (let key in _this.form) {
if (_this.form[key]) {
searchObj[key] = _this.form[key];
}
}
return searchObj;
Reset() {
this.form = { dateRange:[]};
this.onSearch();
},
// 添加
addPermis() {
// this.$router.push({ path: "videoContentAdd", query: { type: "add" } });
$('.el-dialog__title').html('新建');
this.FormVisible1 = true;
this.type = true
this.FormVisible = true;
this.type = true;
this.classForm = {
ownerType: "EXHIBITION_BOARD",
valueDate: [],
}
},
// 新建视频分类确认保存
permisSave() {
this.classForm.ownerType = 'EXHIBITION_BOARD'
this.classForm.expireDateEnd = this.valueDate[1];
this.classForm.expireDateStart = this.valueDate[0];
let _this = this;
_this.$refs.classForm.validate(valid => {
_this.$refs.classForm.validate((valid) => {
if (valid) {
const params ={
name: this.classForm.name,
remarks: this.classForm.remarks,
ownerType: "EXHIBITION_BOARD",
expireDateEnd : this.classForm.valueDate.length ? this.classForm.valueDate[1] : "",
expireDateStart : this.classForm.valueDate.length ? this.classForm.valueDate[0] : ""
}
_this
.$https(
{ url: "copyrightOwner/save", method: "post", authType: this.backToken },
_this.$qs.stringify(_this.classForm)
// _this.classForm
{
url: "copyrightOwner/save",
method: "post",
authType: this.backToken,
},
_this.$qs.stringify(params)
)
.then(
res => {
if (res.data.resultCode == 200 || res.data.resultCode == 201) {
_this.$message({
type: "success",
message: '新建成功!'
});
(res) => {
if (res.data.resultCode === '200') {
_this.$message.success("新建成功!");
//跳回用户列表
_this.onSearch();
_this.FormVisible1 = false;
for (let key in _this.classForm) {
_this.classForm[key] = null;
}
_this.$refs["classForm"].resetFields();
_this.valueDate = []
_this.close()
} else {
_this.$message({
type: "error",
message: res.data.msg
});
_this.$message.error(res.data.msg);
}
},
error => {
(error) => {
_this.$message({
type: "error",
message: error
message: error,
});
}
);
......@@ -378,104 +279,60 @@ export default {
},
// 编辑视频分类确认保存
permisEdit() {
this.classForm.ownerType = 'EXHIBITION_BOARD'
this.classForm.expireDateEnd = this.valueDate[1];
this.classForm.expireDateStart = this.valueDate[0];
let _this = this;
_this.$refs.classForm.validate(valid => {
_this.$refs.classForm.validate((valid) => {
if (valid) {
this.classForm.ownerType = "EXHIBITION_BOARD";
this.classForm.expireDateEnd = this.classForm.valueDate.length ? this.classForm.valueDate[1] : "";
this.classForm.expireDateStart = this.classForm.valueDate.length ? this.classForm.valueDate[0] : "";
delete this.classForm.valueDate
_this
.$https(
{ url: "copyrightOwner/update", method: "put", authType: this.backToken },
{
url: "copyrightOwner/update",
method: "put",
authType: this.backToken,
},
_this.$qs.stringify(_this.classForm)
// _this.classForm
)
.then(
res => {
if (res.data.resultCode == 200 || res.data.resultCode == 201) {
_this.$message({
type: "success",
message: '修改成功!'
});
(res) => {
if (res.data.resultCode === '200') {
_this.$message.success("修改成功!");
//跳回用户列表
_this.onSearch();
_this.FormVisible1 = false;
for (let key in _this.classForm) {
_this.classForm[key] = null;
}
_this.$refs["classForm"].resetFields();
_this.close()
} else {
_this.$message({
type: "error",
message: res.data.msg
});
_this.$message.error(res.data.msg);
}
},
error => {
(error) => {
_this.$message({
type: "error",
message: error
message: error,
});
}
);
}
});
},
// 编辑关闭
// 关闭
close() {
this.FormVisible1 = false;
for (let key in this.classForm) {
this.classForm[key] = null;
}
this.$refs["classForm"].resetFields();
// this.FormVisible = false;
// this.$refs["editform"].resetFields();
},
// 新增关闭
close1() {
this.FormVisible1 = false;
for (let key in this.classForm) {
this.classForm[key] = null;
this.FormVisible = false;
this.classForm = {
ownerType: "EXHIBITION_BOARD",
valueDate: [],
}
this.$refs["classForm"].clearValidate();
this.$refs["classForm"].resetFields();
},
// 编辑弹框
openEdit(row) {
this.type = false
$('.el-dialog__title').html('编辑');
let _this=this;
//成功之后清除数据
// for (let key in this.editform) {
// _this.editform[key]=null;
// }
// _this.editform= Object.assign({}, row);
_this.FormVisible1 = true;
this.getVideoContentCatInfo(row.id)
},
// 获取视频分类详情
getVideoContentCatInfo(id){
let vm = this;
vm.$https(
{
url: "copyrightOwner/get/" + id,
method: "get",
authType: this.backToken
},
// param
)
.then(res => {
let data = res.data.data;
this.valueDate = [data.expireDateStart, data.expireDateEnd];
this.classForm = data
})
.catch(function(err) {
console.log(err);
});
},
openDetails() {
let _this = this;
_this.FormVisible = true;
this.type = false;
this.FormVisible = true;
this.classForm = JSON.parse(JSON.stringify(row));
this.classForm.valueDate =[row.expireDateStart,row.expireDateEnd]
this.classForm = {...this.classForm}
},
// 删除
handleDelete(row) {
......@@ -483,139 +340,34 @@ export default {
this.$confirm("此操作将永久删除, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
type: "warning",
})
.then(() => {
_this.$https({
method: 'delete',
url: 'copyrightOwner/delete/'+ row.id,
authType: this.backToken
}).then((res) => {
this.$message({type: 'success', message: '删除成功!'});
_this.Search();
}, (error) => {
this.$message({type: 'fail', message: "删除失败!" + error.response.data});
}
)
})
.catch(() => {});
},
// // 保存编辑信息
// submitForm() {
// let _this = this;
// _this.$refs.editform.validate(valid => {
// if (valid) {
// let searchObj = {};
// for (let key in _this.editform) {
// if (this.editform[key]) {
// searchObj[key] = _this.editform[key];
// }
// }
// let str = _this.editform.menuName;
// let index = str.lastIndexOf("-");
// str = str.substring(index + 1, str.length);
// searchObj.menuName = str;
// _this
// .$https(
// {
// url: "menu/edit",
// method: "put",
// authType: this.backToken
// },
// _this.$qs.stringify(searchObj)
// )
// .then(
// res => {
// if (res.data.status == 200 || res.data.status == 201) {
// _this.$message({
// type: "success",
// message: res.data.message
// });
// _this.onSearch();
// _this.FormVisible = false;
// _this.$refs["editform"].resetFields();
// } else {
// _this.$message({
// type: "error",
// message: res.data.message
// });
// }
// },
// error => {
// _this.$message({
// type: "error",
// message: error
// });
// }
// );
// }
// });
// },
// 批量操作
handleSelectionChange(selection) {
let _this = this;
_this.selection = selection;
},
getMultipleSelect() {
let _this = this;
let arr = [];
let str = "";
if (_this.selection) {
_this.selection.forEach(function(e) {
arr.push(e.id);
});
str = arr.join(",");
} else {
str = "";
}
return str;
},
// 批量删除
multipleDelete() {
let _this = this;
let str = _this.getMultipleSelect();
if (str) {
this.$confirm("此操作将删除选中菜单, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
_this
.$https({
url: "menu/batchDel?menuIds=" + str,
method: "DELETE",
authType: this.backToken
method: "delete",
url: "copyrightOwner/delete/" + row.id,
authType: this.backToken,
})
.then(
res => {
if (res.data.status == 201 || res.data.status == 200) {
this.$message({
type: "success",
message: "删除成功!"
});
}
//重新查询数据
(res) => {
this.$message({ type: "success", message: "删除成功!" });
_this.onSearch();
},
error => {}
);
});
} else {
(error) => {
this.$message({
type: "info",
message: "请至少选择一个选项!"
type: "error",
message: "删除失败!" + error.response.data,
});
}
}
}
);
})
.catch(() => {});
},
},
};
</script>
<style lang="less">
// @import "../../../../style/common";
// @import "../../style/list";
@import "../../../../style/dialog.less";
@import '../../../../style/table.less';
@import '../../../../style/pagination.less';
@import "../../../../style/table.less";
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment