Skip to content

N
national_museum_vod
Commit 96574266 authored by qzhxx's avatar qzhxx
Browse files
Options

视频管理

parent 206d8168
Hide whitespace changes
Inline Side-by-side
Showing with 1853 additions and 145 deletions
config/index.js
View file @ 96574266
......@@ -9,10 +9,10 @@ module.exports = {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: './',
assetsPublicPath: '/',
proxyTable: {
'/mall': {
target: "http://192.168.110.93/chnmuseum-party/",
target: "http://192.168.110.67/mall/",
changeOrigin: true,
pathRewrite: {
'^/mall': '/' // 重写接口
......
src/components/end/top.vue
View file @ 96574266
<template>
<div class="header_container" style="overflow:hidden;">
<div class="headerTitle l-float">中国国家博物馆建党百年展点播院线服务平台</div>
<el-dropdown class="adminlogo r-float H100" @command="handleCommand" trigger="click">
<div class="box">
<span class="el-dropdown-link">
......@@ -175,6 +176,17 @@
width: 100%;
height: 63px;
background-color: #dd44;
.headerTitle {
// width: 100%;
/*height: 8%;*/
height: 63px;
line-height: 63px;
// background: #002140;
font-size: 24px;
font-weight: 600;
// color: rgba(255, 255, 255, 1);
// text-align: center;
}
.header_icon{
line-height:63px;
margin-right:20px;
......
src/page/content/video/content/add.vue 0 → 100644
View file @ 96574266
<template>
<div class="addFormBox">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" class="addForm">
<el-form-item label="版权方名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="版权方有效期" required>
<el-date-picker
v-model="value1"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item class="addTip">
<span>若没有相应的视频分类，请点击</span>
<el-button type="text" @click="addVideoClass">新建视频分类</el-button>
</el-form-item>
<el-form-item label="请选择预设视频分类">
<el-select placeholder="请选择预设视频分类" multiple v-model="department" @change="getSelectDep">
<el-checkbox :style="selfstyle" v-model="checkedThing" @change="selectAllThing">全选</el-checkbox>
<el-option
v-for="(item, index) in departments"
:label="item.label"
:value="item.label"
:key="index"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</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>
<!--新增弹框-->
<el-dialog
title="新建视频分类"
:modal-append-to-body="false"
class="addDialog"
:visible.sync="dialogVisible"
:before-close="close"
>
<div class="form_box">
<el-form :model="classForm" ref="classForm" :rules="rules" id="ruleo" label-position="left">
<el-form-item label="视频分类名称" prop="name">
<el-input v-model="classForm.name"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="classForm.desc"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button class="r-float" size="mini" type="primary" @click="save">确定</el-button>
<el-button class="r-float" size="mini" @click="close">取 消</el-button>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
formLabelWidth: "100px",
form: {
name: ""
},
classForm: {
menuName: "",
menuUrl: "",
parentId: "",
sort: ""
},
value1: "",
ruleForm: {
name: "",
region: "",
date1: "",
date2: "",
delivery: false,
type: [],
resource: "",
desc: ""
},
departments: [
{
value: "Beijing",
label: "北京"
},
{
value: "Shanghai",
label: "上海"
},
{
value: "Nanjing",
label: "南京"
},
{
value: "Chengdu",
label: "成都"
},
{
value: "Shenzhen",
label: "深圳"
},
{
value: "Guangzhou",
label: "广州"
}
],
checkedThing: false,
department: [],
selfstyle: {
textAlign: "right",
width: "100%",
paddingRight: "10px"
},
rules: {
name: [
{ required: true, message: "请输入版权方名称", trigger: "blur" },
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
],
region: [
{ required: true, message: "请选择活动区域", trigger: "change" }
],
date1: [
{
type: "date",
required: true,
message: "请选择日期",
trigger: "change"
}
],
date2: [
{
type: "date",
required: true,
message: "请选择时间",
trigger: "change"
}
],
type: [
{
type: "array",
required: true,
message: "请至少选择一个活动性质",
trigger: "change"
}
],
resource: [
{ required: true, message: "请选择活动资源", trigger: "change" }
],
desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }]
}
};
},
methods: {
// 新建视频分类
addVideoClass() {
this.dialogVisible = true;
},
save() {
this.dialogVisible = false;
},
// 新增关闭
close() {
this.dialogVisible = false;
for (let key in this.classForm) {
this.classForm[key] = null;
}
this.$refs["classForm"].resetFields();
},
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
history.go(-1);
},
getSelectDep(department) {
// debugger
if (department.length === this.departments.length) {
this.checkedThing = true;
} else {
this.checkedThing = false;
}
},
selectAllThing() {
// debugger
this.department = [];
if (this.checkedThing) {
this.departments.map(item => {
this.department.push(item.label);
});
} else {
this.department = [];
}
}
}
};
</script>
<style lang="less">
// @import "../../../../style/common";
.addFormBox {
height: calc(100% - 40px);
width: 100%;
position: relative;
.addForm {
position: absolute;
height: 100%;
width: 600px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 20px;
.addTip {
height:10px;
line-height: 10px;
// background: pink;
color: red;
// position:absolute;
// right:0
// float:right;
}
}
.el-dialog {
width: 360px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
border-radius: 4px;
.el-dialog__header {
padding: 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}
.el-dialog__body {
padding: 0px !important;
border: 1px solid transparent;
.form_box {
padding-bottom: 40px;
.el-form {
margin-bottom: 20px;
.el-form-item {
margin: 10px 50px 20px;
.el-form-item__content {
width: 280px;
}
}
.el-input {
width: 100%;
}
}
.dialog-footer {
// border-top: 1px solid rgba(0,0,0,0.09);
padding-top: 8px;
.el-button {
margin-right: 10px;
padding: 8px 16px;
}
}
}
}
}
}
</style>
\ No newline at end of file
src/page/content/video/content/index.vue
View file @ 96574266
<template>
<h1>视频内容</h1>
</template>
\ No newline at end of file
<div class="menuManagePage H100">
<!-- <div class="head_box">
<h6>内容管理&nbsp;/&nbsp;视频内容管理</h6>
<h4>视频内容管理</h4>
</div>-->
<el-card class="head_box">
<el-form :inline="true" :model="form" class="search-form" onsubmit="return false;">
<el-form-item label="版权方名称">
<el-input
size="mini"
placeholder="请输入版权方名称"
v-model="form.name"
@keyup.enter.native="Search"
clearable
></el-input>
</el-form-item>
<el-form-item label="版权方有效期" required>
<el-date-picker
v-model="value1"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button size="mini" type="primary" class="btn_form_search" @click="Search">查询</el-button>
<el-button size="mini" class="btn_form_search" >重置</el-button>
</el-form-item>
</el-form>
<div class="tipMsg">
<p>页面说明：</p>
<p>可通过版权方、视频分类及视频名称模糊搜索快速筛选视频信息，可对视频信息进行修改、删除。</p>
</div>
</el-card>
<div class="content_box">
<div class="form_box h778px">
<el-button
size="mini"
type="primary"
class="btn_form_add r-float"
icon="el-icon-plus"
@click="addPermis()"
>新&nbsp;&nbsp;&nbsp;建</el-button>
<div class="scrool">
<el-table
style="width:100%;"
ref="multipleTable"
:data="tableData"
@selection-change="handleSelectionChange"
>
<el-table-column type="index" width="55" label="序号"></el-table-column>
<el-table-column show-overflow-tooltip label="视频名称" prop="menuName"></el-table-column>
<el-table-column show-overflow-tooltip label="版权方" prop="menuUrl"></el-table-column>
<el-table-column label="视频分类" prop="sort"></el-table-column>
<el-table-column label="审核状态" prop="sort"></el-table-column>
<el-table-column label="操作" header-align="center" align="center">
<template slot-scope="scope" width="220">
<el-button-group>
<el-button title="删除" type="text" size="mini" @click="handleDelete(scope.row)">删除</el-button>
<el-button
title="编辑"
size="mini"
type="text"
@click="openEdit(scope.row)"
>编辑&nbsp;&nbsp;</el-button>
<el-button
title="编辑"
size="mini"
type="text"
@click="openEdit(scope.row)"
>编辑&nbsp;&nbsp;</el-button>
</el-button-group>
</template>
</el-table-column>
</el-table>
</div>
<el-pagination
small
background
@current-change="handleCurrentChange"
:current-page="page.currentPage"
:page-size="page.pageSize"
layout="prev, pager, next"
:total="page.total"
></el-pagination>
</div>
<!--新增弹框-->
<el-dialog title="新建" class="newPermis" :visible.sync="FormVisible1" :before-close="close1">
<div class="form_box">
<el-form
:model="permisform"
ref="permisform"
:rules="rules"
id="ruleo"
label-position="left"
>
<el-form-item label="排序值：" prop="sort" :label-width="formLabelWidth">
<el-input
size="small"
v-model="permisform.sort"
auto-complete="off"
clearable
placeholder="请输入排序值"
></el-input>
</el-form-item>
<el-form-item label="菜单名称：" prop="menuName" :label-width="formLabelWidth">
<el-input
size="small"
v-model="permisform.menuName"
onkeyup="this.value=this.value.replace(/\s+/g,'')"
auto-complete="off"
clearable
placeholder="请输入您的菜单名称"
></el-input>
</el-form-item>
<el-form-item label="地址：" prop="menuUrl" :label-width="formLabelWidth">
<el-input
size="small"
v-model="permisform.menuUrl"
onkeyup="this.value=this.value.replace(/\s+/g,'')"
auto-complete="off"
clearable
placeholder="请输入您的菜单地址"
></el-input>
</el-form-item>
<el-form-item label="父级菜单：" prop="parentId" :label-width="formLabelWidth">
<el-select
size="small"
v-model="permisform.parentId"
value-key="name"
clearable
placeholder="请选择父级菜单"
>
<el-option
v-for="(item,index) in typeList"
:key="index"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button class="r-float" size="mini" type="primary" @click="permisSave">确定</el-button>
<el-button class="r-float" size="mini" @click="close1">取 消</el-button>
</div>
</div>
</el-dialog>
<!--编辑弹框-->
<el-dialog title="编辑" :visible.sync="FormVisible" :before-close="close">
<div class="form_box">
<el-form :model="editform" ref="editform" :rules="rules">
<el-form-item label="排序值：" prop="sort" :label-width="formLabelWidth">
<el-input
size="small"
v-model="editform.sort"
auto-complete="off"
clearable
placeholder="请输入排序值"
></el-input>
</el-form-item>
<el-form-item label="菜单名称：" prop="menuName" :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="菜单地址：" prop="menuUrl" :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>
<div slot="footer" class="dialog-footer">
<el-button class="r-float" size="mini" type="primary" @click="submitForm('editform')">确定</el-button>
<el-button class="r-float" size="mini" @click="close">取 消</el-button>
</div>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
export default {
data() {
var checkIsNull = (rule, value, callback) => {
if (value) {
if (value.trim() == "") {
callback(new Error("不允许只输入空格"));
} else {
callback();
}
}
};
return {
value1:'',
page: { currentPage: 1, pageSize: 10, total: 0 },
tableData: [],
FormVisible: false,
FormVisible1: false,
formLabelWidth: "100px",
form: {
name: ""
},
editform: {
menuName: "",
menuUrl: "",
parentId: "",
sort: "",
id: ""
},
permisform: {
menuName: "",
menuUrl: "",
parentId: "",
sort: ""
},
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: ""
};
},
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);
}
);
},
// 获得数据接口
getTableData(param) {
let vm = this;
vm.$https(
{
url: "menu/getMenuList",
method: "get",
authType: this.backToken
},
param
)
.then(res => {
let data = res.data;
vm.page.pageSize = data.size;
vm.page.total = data.total;
vm.tableData = data.records;
})
.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,
name: _this.form.name
};
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;
},
// 添加
addPermis() {
this.$router.push({ path: "videoContentAdd", query: { type: "add" } });
// $('.el-dialog__title').html('新建');
// this.FormVisible1 = true;
},
// 添加权限
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: "videoContentUpdate",
query: { type: "Update" }
});
// 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) {
let _this = this;
this.$confirm("此操作将永久删除, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
// _this.$https({
// method: 'delete',
// url: 'menu/delete?menuId='+ 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
})
.then(
res => {
if (res.data.status == 201 || res.data.status == 200) {
this.$message({
type: "success",
message: "删除成功!"
});
}
//重新查询数据
_this.onSearch();
},
error => {}
);
});
} else {
this.$message({
type: "info",
message: "请至少选择一个选项！"
});
}
}
}
};
</script>
<style lang="less">
@import "../../../../style/common";
.tipMsg{
height: 95px;
width:500px;
background:#ddd;
position:absolute;
right: 0;
top: 63px;
}
.menuManagePage {
.content_box {
.btn_form_add {
height: 32px;
text-align: center;
padding: 0 15px;
margin-bottom: 15px;
}
.scrool {
width: 100%;
height: calc(100% - 100px);
overflow-x: hidden;
overflow-y: scroll;
.el-table {
.el-table__header-wrapper {
.el-table__header {
.has-gutter tr th {
background: rgba(250, 250, 250, 1);
}
}
}
.el-table__body-wrapper {
width: 100%;
table tbody tr td {
padding: 6px 0px;
}
}
}
}
/*!*编辑弹框*!*/
.el-dialog {
width: 600px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
border-radius: 4px;
.el-dialog__header {
padding: 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}
.el-dialog__body {
padding: 0px !important;
border: 1px solid transparent;
.form_box {
padding-bottom: 40px;
.el-form {
margin-bottom: 20px;
.el-form-item {
margin: 10px 50px 20px;
.el-form-item__content {
width: 280px;
}
}
.el-input {
width: 100%;
}
}
.dialog-footer {
border-top: 1px solid rgba(0, 0, 0, 0.09);
padding-top: 8px;
.el-button {
margin-right: 10px;
padding: 8px 16px;
}
}
}
}
}
}
}
</style>
src/page/content/video/copyright/add.vue
View file @ 96574266
<template>
<div class="addFormBox">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" class="addForm">
<el-form-item label="版权方名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="版权方有效期" required>
<el-date-picker
v-model="value1"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item class="addTip">
<span>若没有相应的视频分类，请点击</span>
<el-button type="text" @click="addVideoClass">新建视频分类</el-button>
</el-form-item>
<el-form-item label="请选择预设视频分类">
<el-select placeholder="请选择预设视频分类" multiple v-model="department" @change="getSelectDep">
<el-checkbox :style="selfstyle" v-model="checkedThing" @change="selectAllThing">全选</el-checkbox>
<el-option
v-for="(item, index) in departments"
:label="item.label"
:value="item.label"
:key="index"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</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>
<!--新增弹框-->
<el-dialog
title="新建视频分类"
:modal-append-to-body="false"
class="addDialog"
:visible.sync="dialogVisible"
:before-close="close"
>
<div class="form_box">
<el-form :model="classForm" ref="classForm" :rules="rules" id="ruleo" label-position="left">
<el-form-item label="视频分类名称" prop="name">
<el-input v-model="classForm.name"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="classForm.desc"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button class="r-float" size="mini" type="primary" @click="save">确定</el-button>
<el-button class="r-float" size="mini" @click="close">取 消</el-button>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
formLabelWidth: "100px",
form: {
name: ""
},
classForm: {
menuName: "",
menuUrl: "",
parentId: "",
sort: ""
},
value1: "",
ruleForm: {
name: "",
region: "",
date1: "",
date2: "",
delivery: false,
type: [],
resource: "",
desc: ""
},
departments: [
{
value: "Beijing",
label: "北京"
},
{
value: "Shanghai",
label: "上海"
},
{
value: "Nanjing",
label: "南京"
},
{
value: "Chengdu",
label: "成都"
},
{
value: "Shenzhen",
label: "深圳"
},
{
value: "Guangzhou",
label: "广州"
}
],
checkedThing: false,
department: [],
selfstyle: {
textAlign: "right",
width: "100%",
paddingRight: "10px"
},
rules: {
name: [
{ required: true, message: "请输入版权方名称", trigger: "blur" },
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
],
region: [
{ required: true, message: "请选择活动区域", trigger: "change" }
],
date1: [
{
type: "date",
required: true,
message: "请选择日期",
trigger: "change"
}
],
date2: [
{
type: "date",
required: true,
message: "请选择时间",
trigger: "change"
}
],
type: [
{
type: "array",
required: true,
message: "请至少选择一个活动性质",
trigger: "change"
}
],
resource: [
{ required: true, message: "请选择活动资源", trigger: "change" }
],
desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }]
}
};
},
methods: {
// 新建视频分类
addVideoClass() {
this.dialogVisible = true;
},
save() {
this.dialogVisible = false;
},
// 新增关闭
close() {
this.dialogVisible = false;
for (let key in this.classForm) {
this.classForm[key] = null;
}
this.$refs["classForm"].resetFields();
},
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
history.go(-1);
},
getSelectDep(department) {
// debugger
if (department.length === this.departments.length) {
this.checkedThing = true;
} else {
this.checkedThing = false;
}
},
selectAllThing() {
// debugger
this.department = [];
if (this.checkedThing) {
this.departments.map(item => {
this.department.push(item.label);
});
} else {
this.department = [];
}
}
}
};
</script>
<style lang="less">
// @import "../../../../style/common";
.addFormBox {
height: calc(100% - 40px);
width: 100%;
position: relative;
.addForm {
position: absolute;
height: 100%;
width: 600px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 20px;
.addTip {
height:10px;
line-height: 10px;
// background: pink;
color: red;
// position:absolute;
// right:0
// float:right;
}
}
.el-dialog {
width: 360px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
border-radius: 4px;
.el-dialog__header {
padding: 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}
.el-dialog__body {
padding: 0px !important;
border: 1px solid transparent;
.form_box {
padding-bottom: 40px;
.el-form {
margin-bottom: 20px;
.el-form-item {
margin: 10px 50px 20px;
.el-form-item__content {
width: 280px;
}
}
.el-input {
width: 100%;
}
}
.dialog-footer {
// border-top: 1px solid rgba(0,0,0,0.09);
padding-top: 8px;
.el-button {
margin-right: 10px;
padding: 8px 16px;
}
}
}
}
}
}
</style>
\ No newline at end of file
src/page/content/video/copyright/index.vue
View file @ 96574266
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
<el-form-item label="学习内容" prop="ipaddr">
<el-input
v-model="queryParams.ipaddr"
placeholder="请输入学习内容名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="dateRange"
size="small"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
<div class="page-desc">
<el-card>页面说明：可通过学习内容名称搜索进行快速信息筛选。可对每条学习内容进行排序，可对学习内容信息进行修改、查看、删除。</el-card>
<div class="menuManagePage H100">
<!-- <div class="head_box">
<h6>内容管理&nbsp;/&nbsp;视频版权方管理</h6>
<h4>视频版权方管理</h4>
</div>-->
<el-card class="head_box">
<el-form :inline="true" :model="form" class="search-form" onsubmit="return false;">
<el-form-item label="版权方名称">
<el-input
size="mini"
placeholder="请输入版权方名称"
v-model="form.name"
@keyup.enter.native="Search"
clearable
></el-input>
</el-form-item>
<el-form-item label="版权方有效期" required>
<el-date-picker
v-model="value1"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button size="mini" type="primary" class="btn_form_search" @click="Search">查询</el-button>
<el-button size="mini" class="btn_form_search" >重置</el-button>
</el-form-item>
</el-form>
<div class="tipMsg">
<p>页面说明：</p>
<p>展示所有单位的互动频次统计图及统计表格</p>
</div>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:menu:add']"
>新增</el-button>
</el-col>
</el-row>
<el-table
v-loading="loading"
:data="list.slice((pageNum-1)*pageSize,pageNum*pageSize)"
style="width: 100%;"
>
<el-table-column label="序号" type="index" align="center">
<template slot-scope="scope">
<span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column label="学习内容名称" align="center" prop="tokenId" :show-overflow-tooltip="true" />
<el-table-column label="创建时间" align="center" prop="userName" :show-overflow-tooltip="true" />
<el-table-column label="创建者" align="center" prop="deptName" />
<!-- <el-table-column label="登录时间" align="center" prop="loginTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.loginTime) }}</span>
</template>
</el-table-column>-->
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:menu:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleAdd(scope.row)"
v-hasPermi="['system:menu:add']"
>查看详情</el-button>
</el-card>
<div class="content_box">
<div class="form_box h778px">
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:menu:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
type="primary"
class="btn_form_add r-float"
icon="el-icon-plus"
@click="addPermis()"
>新&nbsp;&nbsp;&nbsp;建</el-button>
<div class="scrool">
<el-table
style="width:100%;"
ref="multipleTable"
:data="tableData"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column show-overflow-tooltip label="版权方名称" prop="menuName"></el-table-column>
<el-table-column show-overflow-tooltip label="视频分类" prop="menuUrl"></el-table-column>
<el-table-column label="创建时间" prop="sort"></el-table-column>
<el-table-column label="版权方有效期" prop="sort"></el-table-column>
<el-table-column show-overflow-tooltip label="备注" prop="menuName"></el-table-column>
<el-table-column label="操作" header-align="center" align="center">
<template slot-scope="scope" width="220">
<el-button-group>
<el-button
title="编辑"
size="mini"
type="text"
@click="openEdit(scope.row)"
>编辑&nbsp;&nbsp;</el-button>
<el-button title="删除" type="text" size="mini" @click="handleDelete(scope.row)">删除</el-button>
</el-button-group>
</template>
</el-table-column>
</el-table>
</div>
<el-pagination
small
background
@current-change="handleCurrentChange"
:current-page="page.currentPage"
:page-size="page.pageSize"
layout="prev, pager, next"
:total="page.total"
></el-pagination>
</div>
<!--新增弹框-->
<el-dialog title="新建" class="newPermis" :visible.sync="FormVisible1" :before-close="close1">
<div class="form_box">
<el-form
:model="permisform"
ref="permisform"
:rules="rules"
id="ruleo"
label-position="left"
>
<el-form-item label="排序值：" prop="sort" :label-width="formLabelWidth">
<el-input
size="small"
v-model="permisform.sort"
auto-complete="off"
clearable
placeholder="请输入排序值"
></el-input>
</el-form-item>
<el-form-item label="菜单名称：" prop="menuName" :label-width="formLabelWidth">
<el-input
size="small"
v-model="permisform.menuName"
onkeyup="this.value=this.value.replace(/\s+/g,'')"
auto-complete="off"
clearable
placeholder="请输入您的菜单名称"
></el-input>
</el-form-item>
<el-form-item label="地址：" prop="menuUrl" :label-width="formLabelWidth">
<el-input
size="small"
v-model="permisform.menuUrl"
onkeyup="this.value=this.value.replace(/\s+/g,'')"
auto-complete="off"
clearable
placeholder="请输入您的菜单地址"
></el-input>
</el-form-item>
<el-form-item label="父级菜单：" prop="parentId" :label-width="formLabelWidth">
<el-select
size="small"
v-model="permisform.parentId"
value-key="name"
clearable
placeholder="请选择父级菜单"
>
<el-option
v-for="(item,index) in typeList"
:key="index"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button class="r-float" size="mini" type="primary" @click="permisSave">确定</el-button>
<el-button class="r-float" size="mini" @click="close1">取 消</el-button>
</div>
</div>
</el-dialog>
<!--编辑弹框-->
<el-dialog title="编辑" :visible.sync="FormVisible" :before-close="close">
<div class="form_box">
<el-form :model="editform" ref="editform" :rules="rules">
<el-form-item label="排序值：" prop="sort" :label-width="formLabelWidth">
<el-input
size="small"
v-model="editform.sort"
auto-complete="off"
clearable
placeholder="请输入排序值"
></el-input>
</el-form-item>
<el-form-item label="菜单名称：" prop="menuName" :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="菜单地址：" prop="menuUrl" :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>
<div slot="footer" class="dialog-footer">
<el-button class="r-float" size="mini" type="primary" @click="submitForm('editform')">确定</el-button>
<el-button class="r-float" size="mini" @click="close">取 消</el-button>
</div>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import { list, forceLogout } from "@/api/monitor/online";
export default {
name: "Online",
data() {
return {
// 遮罩层
loading: true,
// 总条数
total: 0,
// 表格数据
list: [],
// 日期范围
dateRange: [],
pageNum: 1,
pageSize: 10,
// 查询参数
queryParams: {
ipaddr: undefined,
userName: undefined
var checkIsNull = (rule, value, callback) => {
if (value) {
if (value.trim() == "") {
callback(new Error("不允许只输入空格"));
} else {
callback();
}
}
};
return {
value1:'',
page: { currentPage: 1, pageSize: 10, total: 0 },
tableData: [],
FormVisible: false,
FormVisible1: false,
formLabelWidth: "100px",
form: {
name: ""
},
editform: {
menuName: "",
menuUrl: "",
parentId: "",
sort: "",
id: ""
},
permisform: {
menuName: "",
menuUrl: "",
parentId: "",
sort: ""
},
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: ""
};
},
created() {
this.getList();
computed: {},
mounted() {
this.onSearch();
this.getPermis();
},
components: {},
methods: {
/** 查询登录日志列表 */
getList() {
this.loading = true;
list(this.queryParams).then(response => {
this.list = response.rows;
this.total = response.total;
this.loading = false;
// 渲染父级权限
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);
}
);
},
// 获得数据接口
getTableData(param) {
let vm = this;
vm.$https(
{
url: "menu/getMenuList",
method: "get",
authType: this.backToken
},
param
)
.then(res => {
let data = res.data;
vm.page.pageSize = data.size;
vm.page.total = data.total;
vm.tableData = data.records;
})
.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,
name: _this.form.name
};
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;
},
// 添加
addPermis() {
this.$router.push({ path: "videoCopyrightAdd", query: { type: "add" } });
// $('.el-dialog__title').html('新建');
// this.FormVisible1 = true;
},
// 添加权限
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
});
}
);
}
});
},
/** 搜索按钮操作 */
handleQuery() {
this.pageNum = 1;
this.getList();
// 编辑关闭
close() {
this.FormVisible = false;
this.$refs["editform"].resetFields();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
// 新增关闭
close1() {
this.FormVisible1 = false;
for (let key in this.permisform) {
this.permisform[key] = null;
}
this.$refs["permisform"].resetFields();
},
// 新增
handleAdd(){
this.$router.push({ name:'JobLog'})
// 编辑弹框
openEdit(row) {
this.$router.push({
path: "videoCopyrightUpdate",
query: { type: "Update" }
});
// 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) {
this.$confirm('是否确认删除?', "警告", {
let _this = this;
this.$confirm("此操作将永久删除, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
// _this.$https({
// method: 'delete',
// url: 'menu/delete?menuId='+ 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(function() {
return delMenu(row.menuId);
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
})
_this
.$https({
url: "menu/batchDel?menuIds=" + str,
method: "DELETE",
authType: this.backToken
})
.then(
res => {
if (res.data.status == 201 || res.data.status == 200) {
this.$message({
type: "success",
message: "删除成功!"
});
}
//重新查询数据
_this.onSearch();
},
error => {}
);
});
} else {
this.$message({
type: "info",
message: "请至少选择一个选项！"
});
}
}
}
};
</script>
<style lang="scss">
.page-desc{
width:320px;
font-size:14px;
position:fixed;
right:0;
top:95px;
<style lang="less">
@import "../../../../style/common";
.tipMsg{
height: 95px;
width:500px;
background:#ddd;
position:absolute;
right: 0;
top: 63px;
}
.menuManagePage {
.content_box {
.btn_form_add {
height: 32px;
text-align: center;
padding: 0 15px;
margin-bottom: 15px;
}
.scrool {
width: 100%;
height: calc(100% - 100px);
overflow-x: hidden;
overflow-y: scroll;
.el-table {
.el-table__header-wrapper {
.el-table__header {
.has-gutter tr th {
background: rgba(250, 250, 250, 1);
}
}
}
.el-table__body-wrapper {
width: 100%;
table tbody tr td {
padding: 6px 0px;
}
}
}
}
/*!*编辑弹框*!*/
.el-dialog {
width: 600px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
border-radius: 4px;
.el-dialog__header {
padding: 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}
.el-dialog__body {
padding: 0px !important;
border: 1px solid transparent;
.form_box {
padding-bottom: 40px;
.el-form {
margin-bottom: 20px;
.el-form-item {
margin: 10px 50px 20px;
.el-form-item__content {
width: 280px;
}
}
.el-input {
width: 100%;
}
}
.dialog-footer {
border-top: 1px solid rgba(0, 0, 0, 0.09);
padding-top: 8px;
.el-button {
margin-right: 10px;
padding: 8px 16px;
}
}
}
}
}
}
}
</style>
\ No newline at end of file
</style>
src/page/end/menuRouter.vue
View file @ 96574266
<template>
<div class="container H100 W100">
<div class="aside H100 l-float">
<div class="logoTitle">机荟虚拟营业厅管理端</div>
<!-- <div class="logoTitle">机荟虚拟营业厅管理端</div> -->
<el-menu :default-active="defaultActive" :unique-opened="true" active-background-color="#545c64"
@open="handleOpen" @close="handleClose" router >
<el-menu-item v-if="item.children.length==0" v-for="item in menuList" :key="item.label" :index="item.menuUrl"
......
src/router/index.js
View file @ 96574266
......@@ -39,7 +39,13 @@ const hotProductsRecord = r => require.ensure([],()=>r(require('@/page/end/hotPr
const popularActiveRecord = r => require.ensure([],()=>r(require('@/page/end/popularActiveRecord')),'popularActiveRecord');
// 内容管理
const videoCopyright = r => require.ensure([],()=>r(require('@/page/content/video/copyright/add')),'videoCopyright');
const videoCopyright = r => require.ensure([],()=>r(require('@/page/content/video/copyright/index')),'videoCopyright');
const videoCopyrightAdd = r => require.ensure([],()=>r(require('@/page/content/video/copyright/add')),'videoCopyrightAdd');
const videoCopyrightUpdate = r => require.ensure([],()=>r(require('@/page/content/video/copyright/add')),'videoCopyrightUpdate');
const videoContent = r => require.ensure([],()=>r(require('@/page/content/video/content/index')),'videoContent');
const videoContentAdd = r => require.ensure([],()=>r(require('@/page/content/video/content/add')),'videoContentAdd');
const videoContentUpdate = r => require.ensure([],()=>r(require('@/page/content/video/content/add')),'videoContentUpdate');
/*跳转的页面*/
// 新建服务指南
......@@ -194,6 +200,32 @@ const router = new Router({
name: '视频版权方管理',
component: videoCopyright
},
{
path: '/videoCopyrightAdd',
name: '新建版权方',
component: videoCopyrightAdd
},
{
path: '/videoCopyrightUpdate',
name: '修改版权方',
component: videoCopyrightUpdate
},
{
path: '/videoContent',
name: '视频内容管理',
component: videoContent
},
{
path: '/videoContentAdd',
name: '新建视频',
component: videoContentAdd
},
{
path: '/videoContentUpdate',
name: '修改视频',
component: videoContentUpdate
},
//新建页面
{
......
src/style/common.less
View file @ 96574266
......@@ -95,6 +95,15 @@ div{
box-sizing: border-box;
background: #fff;
}
.h678{
height: 90%;
width:100%;
//min-width: 815px;
//margin: 24px 24px 0px 24px;
padding: 24px;
box-sizing: border-box;
background: #fff;
}
.el-pagination{
text-align: right;
......@@ -264,6 +273,19 @@ span.el-breadcrumb__separator {
margin-right: 0;
}
}
.el-date-editor.el-input__inner{
width: 300px;
}
.el-date-editor .el-range__icon {
line-height: 25px;
}
.el-date-editor .el-range-separator {
padding: 0 5px;
line-height: 25px;
width: 10%;
color: #303133;
}
@media (max-width: 1200px){
.el-date-editor.el-input,
.el-date-editor.el-input__inner,
......
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