提交 5050ed24 编写于 作者: guangjun.yang's avatar guangjun.yang

新建广告位

上级 1e5509eb
...@@ -39,7 +39,6 @@ const reviewAccessManage = r => require.ensure([], () => r(require('../views/cme ...@@ -39,7 +39,6 @@ const reviewAccessManage = r => require.ensure([], () => r(require('../views/cme
const creditSendManage = r => require.ensure([], () => r(require('../views/cme/credit-send-manage.vue')), 'credit-send-manage') const creditSendManage = r => require.ensure([], () => r(require('../views/cme/credit-send-manage.vue')), 'credit-send-manage')
const applyDetail = r => require.ensure([], () => r(require('../views/cme/apply-detail.vue')), 'apply-detail') const applyDetail = r => require.ensure([], () => r(require('../views/cme/apply-detail.vue')), 'apply-detail')
const templateManager = r => require.ensure([], () => r(require('../views/education/template-manager.vue')), 'ctemplate-manager') const templateManager = r => require.ensure([], () => r(require('../views/education/template-manager.vue')), 'ctemplate-manager')
const templateEditor = r => require.ensure([], () => r(require('../views/education/template-editor.vue')), 'template-editor') const templateEditor = r => require.ensure([], () => r(require('../views/education/template-editor.vue')), 'template-editor')
const templateOpen = r => require.ensure([], () => r(require('../views/education/template-open.vue')), 'templateOpen') const templateOpen = r => require.ensure([], () => r(require('../views/education/template-open.vue')), 'templateOpen')
...@@ -47,9 +46,8 @@ const eduRole = r => require.ensure([], () => r(require('../views/education/edu- ...@@ -47,9 +46,8 @@ const eduRole = r => require.ensure([], () => r(require('../views/education/edu-
const editCustom = r => require.ensure([], () => r(require('../views/education/edit-custom.vue')), 'templateOpen') const editCustom = r => require.ensure([], () => r(require('../views/education/edit-custom.vue')), 'templateOpen')
const externalResourceManage = r => require.ensure([], () => r(require('../views/education/external-resource-manage.vue')), 'external-resource-manage') const externalResourceManage = r => require.ensure([], () => r(require('../views/education/external-resource-manage.vue')), 'external-resource-manage')
const auditCustomCourse = r => require.ensure([], () => r(require('../views/education/audit-custom-course.vue')), 'audit-custom-course') const auditCustomCourse = r => require.ensure([], () => r(require('../views/education/audit-custom-course.vue')), 'audit-custom-course')
const advertSimpleManage = r => require.ensure([], () => r(require('../views/education/advert-simple-manage.vue')), 'advert-simple-manage') const advertSimpleManage = r => require.ensure([], () => r(require('../views/education/advert/advert-simple-manage.vue')), 'advert-simple-manage')
const editSimpleManage = r => require.ensure([], () => r(require('../views/education/edit-simple-manage.vue')), 'edit-simple-manage') const editSimpleAdvert = r => require.ensure([], () => r(require('../views/education/advert/edit-simple-advert.vue')), 'edit-simple-advert')
const noticeEditor = r => require.ensure([], () => r(require('../views/education/notice-editor.vue')), 'notice-editor') const noticeEditor = r => require.ensure([], () => r(require('../views/education/notice-editor.vue')), 'notice-editor')
...@@ -241,8 +239,8 @@ export default [{ ...@@ -241,8 +239,8 @@ export default [{
component: advertSimpleManage, component: advertSimpleManage,
}, },
{ {
path: '/edit-simple-manage', path: '/edit-simple-advert',
component: editSimpleManage, component: editSimpleAdvert,
}, },
// { // {
// path: '/followup', // path: '/followup',
......
<template> <template>
<div class="review-access-wrap"> <div class="advert-simple-wrap">
<bread-crumb :curmbFirst="curmbFirst"></bread-crumb> <bread-crumb :curmbFirst="curmbFirst"></bread-crumb>
<div class="review-access screenSet" id="screenSet"> <div class="review-access screenSet" id="screenSet">
<div class="header-title">广告位管理</div> <div class="header-title">广告位管理</div>
<el-form ref="form" :model="searchForm" label-width="100px" class="search-form-wrap"> <el-form ref="form" :model="searchForm" label-width="100px" class="search-form-wrap">
<el-row> <el-row>
<el-form-item label="所属项目:" class="search-item" > <el-form-item label="所属项目:" class="search-item">
<el-input v-model="searchForm.courseName" size="small" class="form-width" placeholder="请输入课程名称"></el-input> <el-input
v-model="searchForm.projectName"
size="small"
class="form-width"
placeholder="请输入项目名称"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="状态:" class="search-item"> <el-form-item label="状态:" class="search-item">
<el-select v-model="searchForm.status" placeholder="请选择" size="small" class="form-width"> <el-select
<el-option v-for="(item, index) in statusList" :key="index" :label="item.name" :value="item.value"></el-option> v-model="searchForm.status"
placeholder="请选择"
size="small"
class="form-width"
>
<el-option
v-for="(item, index) in statusList"
:key="index"
:label="item.name"
:value="item.value"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item class="btn-list"> <el-form-item class="btn-list">
<el-button @click="search()" type="primary" size="small">查询</el-button> <el-button @click="search()" type="primary" size="small"> </el-button>
<el-button @click="reset" size="small">重置</el-button> <el-button @click="reset" size="small"> </el-button>
</el-form-item> </el-form-item>
</el-row> </el-row>
<el-row style="float: right;">
<el-button @click="addAdvert()" type="primary" size="small">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;新建广告位&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
</el-row>
</el-form> </el-form>
<el-table :data="tableList" border style="width: 100%"> <el-table :data="tableList" border style="width: 100%">
<el-table-column align="center" prop="id" label="广告位编号"></el-table-column> <el-table-column align="center" prop="id" label="广告位编号"></el-table-column>
<el-table-column align="center" prop="pageType" label="页面类型" ></el-table-column> <el-table-column align="center" prop="pageType" label="页面类型">
<el-table-column align="center" prop="projectName" label="所属项目" ></el-table-column> <template slot-scope="scope">
<el-table-column align="center" prop="position" label="页面位置" ></el-table-column> <span>{{scope.row.pageType == 0 ? '项目列表页' : '项目详情页'}}</span>
<el-table-column align="center" prop="status" label="审核状态" > </template>
</el-table-column>
<el-table-column align="center" prop="projectName" label="所属项目"></el-table-column>
<el-table-column align="center" prop="position" label="页面位置">
<template slot-scope="scope">
<span>{{scope.row.position == 0 ? '顶部广告位' : '底部广告位'}}</span>
</template>
</el-table-column>
<el-table-column align="center" prop="status" label="审核状态">
<template slot-scope="scope"> <template slot-scope="scope">
<span v-html="getHtmlStatus(scope.row.status)"></span> <span v-html="getHtmlStatus(scope.row.status)"></span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="操作"> <el-table-column align="center" label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button @click="editAdvert(scope.row)" type="text" size="small"><span style="color: #449284;">编辑</span></el-button> <el-button @click="editAdvert(scope.row)" type="text" size="small">
<span style="color: #449284;">编辑</span>
</el-button>
</template> </template>
</el-table-column> </el-table-column>
<div slot="empty"> <div slot="empty">
<div class="table-empty"> <div class="table-empty">
<img src="../../assets/image/no-content1.png"> <img src="../../../assets/image/no-content1.png" />
<p>没有查询到数据</p> <p>没有查询到数据</p>
</div> </div>
</div> </div>
...@@ -52,179 +81,169 @@ ...@@ -52,179 +81,169 @@
:current-page="searchForm.pageNo" :current-page="searchForm.pageNo"
:page-sizes="[15, 30, 50, 100]" :page-sizes="[15, 30, 50, 100]"
:page-size="searchForm.pageSize" :page-size="searchForm.pageSize"
layout="total, sizes, prev, pager, next, jumper"> layout="total, sizes, prev, pager, next, jumper"
</el-pagination> ></el-pagination>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { openLoading, closeLoading } from "../../utils/utils"; import { openLoading, closeLoading } from "../../../utils/utils";
import BreadCrumb from "../../components/breadcrumb.vue"; import BreadCrumb from "../../../components/breadcrumb.vue";
import * as commonUtil from "../../utils/utils"; import * as commonUtil from "../../../utils/utils";
import { import { handleDeleteReq } from "@/utils/cme/cmeApi";
handleDeleteReq,
} from '@/utils/cme/cmeApi'
export default { export default {
data() { data() {
return { return {
curmbFirst: "广告位管理", curmbFirst: "广告位管理",
// curmbSecond: "广告位管理", // curmbSecond: "广告位管理",
totalRows: 0, totalRows: 0,
addEditVisible: false, searchForm: {
isAdd: true, // 新增或编辑状态:新增 true; 编辑 false projectName: "",
deleteVisible: false, status: -1,
currentRow: null, // 当前行数据 pageNo: 1,
searchForm: { pageSize: 15
projectId: '', },
status: -1, statusList: [
pageNo: 1, {
pageSize: 15, name: "全部",
value: -1
},
{
name: "未发布",
value: 0
}, },
auditForm: { {
auditRadio: '', name: "已发布",
desc: '', value: 1
}, },
statusList: [ {
{ name: "已下线",
name: '全部', value: 2
value: -1 }
},{ ],
name: '未发布', tableList: []
value: 0 };
},{ },
name: '已发布',
value: 1 components: {
},{ BreadCrumb
name: '已下线', },
value: 2
} created() {
], this.search();
tableList: [], },
mounted() {
commonUtil.resizeHeight();
},
methods: {
//
getHtmlStatus(status) {
if (status == 0) {
return `<span style="color:#666666;">未发布</span>`;
} else if (status == 1) {
return `<span style="color:#417505;">已发布</span>`;
} else if (status == 2) {
return `<span style="color:#D0021B;">已下线</span>`;
} else {
return "";
} }
}, },
components: { // 查询列表
BreadCrumb, search() {
let searchForm = Object.assign({}, this.searchForm);
this.GET("portal/jump/list", searchForm).then(res => {
if (res.code == "000000") {
this.tableList = (res.data && res.data.list) || [];
this.totalRows = res.data.totalSize || 0;
}
});
}, },
created() { // 重置
this.search(); reset() {
}, this.searchForm = {
mounted() { projectId: "",
commonUtil.resizeHeight(); status: -1,
pageNo: 1,
pageSize: 15
};
}, },
methods: {
// // 新增
getHtmlStatus(status) { addAdvert() {
if(status == 0) { this.$router.push({
return `<span style="color:#666666;">未发布</span>`; path: "edit-simple-advert",
} else if(status == 1) { query: { id: null }
return `<span style="color:#D0021B;">已发布</span>`; });
} else if(status == 2) { },
return `<span style="color:#417505;">已下线</span>`;
} else {
return ''
}
},
// 查询列表
search() {
let searchForm = Object.assign({}, this.searchForm);
this.GET("contents/course/custom/check/v1/list", searchForm).then(res => {
if (res.code == "000000") {
this.tableList = res.data && res.data.courseList || [];
this.totalRows = res.data.totalSize || 0;
// this.protocolInfo = res.data;
}
});
},
// 重置
reset() {
this.searchForm = {
projectId: '',
status: -1,
pageNo: 1,
pageSize: 15,
};
},
// 查看
editAdvert(row) {
this.$router.push({
path: 'edit-simple-manage',
query: {
id: row.id,
}
})
},
// 重置 // 查看
resetForm(formName) { editAdvert(row) {
this.$refs[formName].resetFields(); this.$router.push({
}, path: "edit-simple-advert",
query: { id: row.id }
});
},
// 切换每页个数 // 切换每页个数
handleSizeChange(val){ handleSizeChange(val) {
this.searchForm.pageSize = val; this.searchForm.pageSize = val;
this.search(); this.search();
},
// 切换当前页
handleCurrentChange(val){
this.searchForm.pageNo = val;
this.search();
},
}, },
// 切换当前页
handleCurrentChange(val) {
this.searchForm.pageNo = val;
this.search();
}
} }
};
</script> </script>
<style lang="scss"> <style lang="scss">
.review-access-wrap{ .advert-simple-wrap {
.review-access{ .review-access {
padding: 10px; padding: 10px;
background: #fff; background: #fff;
.el-button--small{ .el-button--small {
font-size: 14px; font-size: 14px;
} }
.header-title { .header-title {
padding: 10px 12px 20px; padding: 10px 12px 20px;
font-size: 14px; font-size: 14px;
color: #606266; color: #606266;
border-bottom: 1px solid #efefef; border-bottom: 1px solid #efefef;
} }
.search-form-wrap{ .search-form-wrap {
padding: 25px 0 20px; padding: 25px 0 20px;
overflow: hidden; overflow: hidden;
// border-bottom: 1px dashed #efefef; // border-bottom: 1px dashed #efefef;
} }
.search-item{ .search-item {
float: left; float: left;
} }
.btn-list{ .btn-list {
float: right; float: right;
.el-form-item__content{ .el-form-item__content {
margin-left: 0 !important; margin-left: 0 !important;
}
} }
.new-add{ }
float: right; .new-add {
margin: 10px 0 20px; float: right;
margin: 10px 0 20px;
}
.table-empty {
img {
width: 100px;
} }
.table-empty { p {
img { margin-top: -50px;
width: 100px;
}
p {
margin-top: -50px;
}
} }
} }
} }
}
</style> </style>
\ No newline at end of file
<template>
<div class="edit-simple-adv-wrap">
<bread-crumb :curmbFirst="curmbFirst"></bread-crumb>
<div class="component-content screenSet" id="screenSet">
<div class="header-title">{{ title }}</div>
<el-form
ref="formData"
:model="formData"
:rules="rules"
label-width="150px"
class="basic-form"
>
<el-form-item label="链接类型:">
<el-col :span="10">
<el-select
v-model="formData.jumpType"
collapse-tags
style="width: 300px"
placeholder="请选择链接类型"
filterable
>
<el-option
label="URL链接"
value="1"
></el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="跳转URL:" prop="jumpUrl">
<el-col :span="13">
<el-input
maxlength="100"
type="input"
placeholder="请输入跳转URL:"
v-model="formData.jumpUrl"
style="width: 300px"
></el-input>
<span class="word-num">{{(formData.jumpUrl).replace(/\s+/g,"").length}}/100</span>
</el-col>
</el-form-item>
<el-form-item label="页面类型:" prop="pageType">
<el-col :span="10">
<el-select
v-model="formData.pageType"
collapse-tags
style="width: 300px"
placeholder="请选择页面类型"
filterable
>
<el-option label="项目详情页" value="1"></el-option>
<!-- <el-option label="项目列表页" value="0"></el-option> -->
</el-select>
</el-col>
</el-form-item>
<el-form-item label="所属项目:" prop="projectId">
<el-col :span="10">
<el-select
v-model="formData.projectId"
style="width: 300px"
placeholder="所属项目"
filterable
>
<el-option
size="small"
v-for="item in optionsProject"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="页面位置:">
<el-col :span="10">
<el-select
v-model="formData.position"
collapse-tags
style="width: 300px"
placeholder="请选择页面位置"
filterable
>
<el-option label="顶部广告位" value="0"></el-option>
<el-option label="底部广告位" value="1"></el-option>
</el-select>
</el-col>
</el-form-item>
<div class="basic-item-icon">
<span class="require">*</span>
<el-form-item label="上传图片:" prop="imageUrl" style="height: 100px;">
<el-upload
style="height: 100px;"
v-model="formData.imageUrl"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadListPic"
>
<img
v-if="formData.imageUrl"
:src="formData.imageUrl"
class="bg-img"
/>
<img
v-if="!formData.imageUrl"
class="bg-img"
src="../../../assets/image/small.png"
/>
<!-- <div
class="img-delete"
v-show="imgMouseOver"
@click.stop="deleteImg(1)"
@mouseout.stop="imgMouseOver=false"
>
<i class="el-icon-delete"></i>
</div> -->
<div class="limit-text">
<p>尺寸:750*120</p>
<p>限制大小: 2.0M</p>
<p>支持.jpg,.png格式</p>
</div>
</el-upload>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="状态:" >
<el-select v-model="formData.status" placeholder="请选择状态" style="width: 300px">
<el-option v-for="(item, index) in statusList" :key="index" :label="item.name" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item class="btn-list" style="margin: 40px 0;">
<el-button @click="submitForm('formData')" type="primary">提 交</el-button>
<el-button @click="goBack">取 消</el-button>
</el-form-item>
</el-form>
</div>
<DialogComponet :dialogObj="dialogObj" @hide="insertOrUpdate" @confirm="dialogObj.visible=false"></DialogComponet>
</div>
</template>
<script>
import BreadCrumb from "../../../components/breadcrumb.vue";
import DialogComponet from "@/components/education/template/dialog";
import { doUpload, getFilePath } from "../../../utils/qiniu-util";
import { mapGetters } from "vuex";
import { openLoading, closeLoading } from "../../../utils/utils";
import * as commonUtil from "../../../utils/utils";
import * as operationData from "../../../utils/operation";
let vm = null;
export default {
components: {
BreadCrumb,
DialogComponet
},
data() {
return {
curmbFirst: "广告位管理",
// curmbSecond: "项目组件",
title: "编辑广告位",
id: null,
uploadImgMessage: false,
imgMouseOver: false,
formData: {
id: "",
jumpType: "1",
jumpUrl: "",
pageType: "1",
position: "0",
projectId: "",
imageUrl: "",
status: 0,
},
optionsProject: [],
statusList: [
{
name: '不发布',
value: 0
},{
name: '发布',
value: 1
},{
name: '下线',
value: 2
}
],
dialogObj: {
visible: false,
title: "",
message: "此位置已存在广告位,是否替换原有的广告位?",
tip: "",
confirmMsg: "取 消",
hideMsg: "确 定"
},
rules: {
jumpUrl: [
{ required: true, message: "请输入跳转URL", trigger: "blur" }
],
projectId: [
{ required: true, message: "请选择所属项目", trigger: "blur" }
],
imageUrl: [
{ required: true, message: "请上传图片", trigger: "blur" }
],
}
};
},
computed: {
},
created() {
vm = this;
vm.id = vm.getUrlSearch(window.location.href, "id");
vm.initTitle();
vm.initOption();
},
mounted: function() {
commonUtil.resizeHeight();
},
methods: {
// 初始化Title
initTitle() {
if (!vm.id) {
vm.title = "新建广告位";
} else {
vm.title = "编辑广告位";
}
},
// 设置信息
setOption(data) {
let list = [];
for(let i = 0; i<data.length ; i++) {
let obj = {
value: data[i].projectId,
label: data[i].projectName,
}
list.push(obj);
}
return list;
},
// 初始化项目选择框
initOption() {
vm.optionsProject = [];
let req = {
status: 4,
type: 2
};
openLoading(vm);
vm.GET("portal/entryInfo/getProjectList", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
console.log('000000');
vm.optionsProject = vm.setOption(res.data);
vm.getAdvertInfo();
}
});
},
// 返回到上一页
goBack() {
vm.$router.back(-1);
},
// 提交前校验
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
this.checkAdvert();
// this.insertOrUpdate();
} else {
console.log("error submit!!");
}
});
},
// 重置
resetForm(formName) {
this.$refs[formName].resetFields();
},
// 删除图片
deleteImg() {
vm.formData.imageUrl = "";
vm.imgMouseOver = false;
},
// 上传
beforeUploadListPic(file) {
let fileLimit = {
width: 750,
height: 120,
size: 2,
sizeText: "2M",
key: "imageUrl",
show: "uploadImgMessage"
};
this.beforeAvatarUpload(file, fileLimit);
},
beforeAvatarUpload(file, fileLimit) {
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
if (!isJPG && !isPNG) {
this.$message.error("图片不符合规范,请根据规范上传图片");
return;
}
if (!isLt2M) {
this.$message.error("图片不符合规范,请根据规范上传图片 ");
return;
}
let _img = new FileReader();
_img.readAsDataURL(file);
_img.onload = function(theFile) {
let image = new Image();
image.src = theFile.target.result;
image.onload = function() {
let _this = this;
if (_this.width != fileLimit.width || _this.height != fileLimit.height) {
vm.$message.error("图片不符合规范,请根据规范上传图片");
} else {
openLoading(vm);
doUpload(
vm,
file,
getFilePath(file, null),
"preview4",
"progress1",
1
).then(function(path) {
closeLoading(vm);
console.log(path);
vm.formData.imageUrl = path.fullPath;
vm.$message.success("上传成功");
});
}
};
};
},
// 获取广告配置详情
getAdvertInfo() {
if (!vm.id) {
return;
}
let req = {
id: vm.id
};
openLoading(vm);
vm.GET(`portal/jump/${vm.id}`, req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
// this.formData = res.data;
vm.setEditData(res.data);
} else {
vm.$message(res.message);
}
});
},
// 添加或修改 结果 0:无替换的配置 1:有需要替换的配置,提示替换
checkAdvert() {
vm.POST("portal/jump/check",
this.formData
).then(res => {
if (res.code == "000000") {
if(res.data == 0) {
this.insertOrUpdate();
} else { // 弹出确认框
this.dialogObj.visible = true;
}
} else {
vm.$message.error(res.message);
}
});
},
// 添加或修改
insertOrUpdate() {
openLoading(vm);
vm.POST("portal/jump/insertOrUpdate",
this.formData
).then(res => {
closeLoading(vm);
if (res.code == "000000") {
vm.$message({
message: '创建成功',
type: 'success'
});
vm.$router.back(-1);
} else {
vm.$message.error(res.message);
}
});
},
// 设置编辑数据
setEditData(resData) {
this.formData = resData;
this.formData.jumpType = resData.jumpType + '';
this.formData.pageType = resData.pageType + '';
this.formData.position = resData.position + '';
},
}
};
</script>
<style lang="scss">
.edit-simple-adv-wrap {
.component-content {
position: relative;
padding: 10px;
background: #fff;
.header-title {
padding: 10px 12px;
font-size: 12px;
color: #449284;
border-bottom: 1px solid #efefef;
}
.basic-form {
height: 100px !important;
::-webkit-scrollbar
{
width: 4px;
height: 20px;
background-color: #D8D8D8;
}
::-webkit-scrollbar-thumb {
background-color: #D8D8D8;
}
position: relative;
margin-top: 10px;
.basic-item-icon {
position: relative;
.require {
position: absolute;
left: 67px;
top: 11px;
color: #f56c6c;
}
.upload-message {
position: absolute;
left: 160px;
top: 105px;
font-size: 12px;
color: #f56c6c;
}
.img-delete {
position: absolute;
left: 0px;
top: 0px;
width: 84px;
height: 100px;
background: #000;
opacity: 0.7;
z-index: 999;
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
}
}
}
.word-num {
font-size: 12px;
color: #999;
padding-top: 5px;
}
.line {
margin-left: 10px;
width: 20px;
}
.bg-uploader {
img {
float: left;
}
.bg-img {
width: 100px;
height: 100px;
}
.limit-text {
float: left;
margin-left: 10px;
margin-top: -10px;
p {
font-size: 12px;
color: #999;
}
}
}
}
}
}
</style>
\ No newline at end of file
<template>
<div class="edit-entry-wrap">
<bread-crumb :curmbFirst="curmbFirst"></bread-crumb>
<div class="component-content screenSet" id="screenSet">
<div class="header-title">{{ title }}</div>
<el-form
ref="formData"
:model="formData"
:rules="rules"
label-width="150px"
class="basic-form"
>
<el-form-item label="链接类型:">
<el-col :span="10">
<el-select
v-model="formData.jumpType"
collapse-tags
style="width: 300px"
placeholder="链接类型"
@change="changeValue"
filterable
>
<el-option
label="链接类型"
value="1"
></el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="所属项目:">
<el-col :span="10">
<el-select
v-model="formData.projectId"
multiple
collapse-tags
style="width: 300px"
placeholder="所属项目"
@change="changeValue"
filterable
>
<el-option
v-for="item in optionsProject"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="入口名称:" prop="entryName">
<el-col :span="13">
<el-input
size="small"
v-model="formData.entryName"
placeholder="请输入名称"
style="width:70%;"
:disabled="peopleLevel == 'L3'"
></el-input>
<span class="word-num">{{(formData.entryName).replace(/\s+/g,"").length}}/24</span>
</el-col>
</el-form-item>
<el-form-item label="入口简介:" prop="entryIntro">
<el-col :span="13">
<el-input
size="small"
type="textarea"
:autosize="{ minRows: 5}"
placeholder="请输入入口简介"
v-model="formData.entryIntro"
style="width:83%;"
:disabled="peopleLevel == 'L3'"
></el-input>
<span class="word-num">{{(formData.entryIntro).replace(/\s+/g,"").length}}/200</span>
</el-col>
</el-form-item>
<div class="basic-item-icon">
<span class="require">*</span>
<el-form-item label="列表图片:">
<el-upload
v-model="formData.attachmentUrl1"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadListPic"
:disabled="peopleLevel == 'L3'"
>
<img
v-if="formData.attachmentUrl1"
@mouseover.stop="imgMouseOver=true && peopleLevel != 'L3'"
:src="formData.attachmentUrl1"
class="bg-img"
/>
<img
v-if="!formData.attachmentUrl1"
class="bg-img"
src="../../assets/image/small.png"
/>
<div
class="img-delete"
v-show="imgMouseOver"
@click.stop="deleteImg(1)"
@mouseout.stop="imgMouseOver=false"
>
<i class="el-icon-delete"></i>
</div>
<div class="limit-text">
<p>尺寸:230*172</p>
<p>限制大小: 500Kb</p>
<p>支持.jpg,.png格式</p>
</div>
</el-upload>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="封面类型:">
<el-radio-group
size="small"
v-model="formData.type"
@change="changeCover"
:disabled="peopleLevel == 'L3'"
>
<el-radio :label="1">图片</el-radio>
<el-radio :label="2">视频</el-radio>
</el-radio-group>
</el-form-item>
<div class="basic-item-icon">
<span class="require">*</span>
<el-form-item label="封面文件:">
<el-upload
v-model="formData.attachmentUrl2"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadCoverPic"
:disabled="peopleLevel == 'L3'"
>
<img
v-if="formData.type == 1 && formData.attachmentUrl2"
:src="formData.attachmentUrl2"
@mouseover.stop="imgMouseOver2=true && peopleLevel != 'L3'"
class="bg-img"
/>
<video
v-if="formData.type == 2 && formData.attachmentUrl2"
width="100"
controls
class="bg-video"
@mouseover.stop="imgMouseOver2=true && peopleLevel != 'L3'"
>
<source :src="formData.attachmentUrl2" type="video/mp4" />浏览器不支持mp4
</video>
<img
v-if="!formData.attachmentUrl2"
class="bg-img"
src="../../assets/image/small.png"
/>
<div
class="img-delete"
v-show="imgMouseOver2"
@click.stop="deleteImg(2)"
@mouseout.stop="imgMouseOver2=false"
>
<i class="el-icon-delete"></i>
</div>
<div v-show="formData.type == 1" class="limit-text">
<p>尺寸:750*420</p>
<p>限制大小: 2.0 Mb</p>
<p>支持.jpg,.png格式</p>
</div>
<div v-show="formData.type == 2" class="limit-text">
<p></p>
<p>限制大小: 500 Mb</p>
<p>支持.mp4</p>
</div>
</el-upload>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage2">请选择封面</p>
</div>
</el-form>
<el-dialog title="确认上架" :visible.sync="dialogUp" width="30%" center>
<p class="dialog_p">该项目已关联<span> 0 </span>个子项目</p>
<p class="dialog_p">继续上架,将在APP端无法显示该项目</p>
<span slot="footer" class="dialog-footer">
<el-button @click="insertOrUpdate(2)">确认上架</el-button>
<el-button type="primary" @click="dialogUp = false">取消</el-button>
</span>
</el-dialog>
</div>
</div>
</template>
<script>
import BreadCrumb from "../../components/breadcrumb.vue";
import { doUpload, getFilePath } from "../../utils/qiniu-util";
import { mapGetters } from "vuex";
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
import * as operationData from "../../utils/operation";
let vm = null;
export default {
components: {
BreadCrumb
},
data() {
let checkProjectStr = (rule, value, callback) => {
if (value.indexOf("\\") != -1) {
callback(new Error("请勿输入字符“ \\ "));
} else if (value.indexOf(".") != -1) {
callback(new Error("请勿输入字符“ . "));
} else {
callback();
}
};
return {
curmbFirst: "广告位管理",
// curmbSecond: "项目组件",
// curmbThird: "编辑广告位",
title: "编辑广告位",
showStorage: false,
entryId: null,
peopleLevel: null,
uploadImgMessage: false,
uploadImgMessage2: false,
imgMouseOver: false,
imgMouseOver2: false,
organizationContent: "云鹊医",
statusValue: 0,
dialogUp: false,
formData: {
entryName: "",
entryBegintime: "",
entryEndtime: "",
entryIntro: "",
type: 1,
attachmentUrl1: "",
attachmentUrl2: "",
attachmentMore1: {},
attachmentMore2: {},
organizationName: "",
organizationNameList: [''],
project: []
},
formData: {
id: "",
imageUrl: "",
jumpType: "",
jumpUrl: "",
name: "",
position: 0,
projectId: "",
projectName: "",
status: 0,
},
orgListIndex: 0,
optionsProject: [],
tagsProject: [],
visibleName: false,
entryOptionData: {},
pickerOptions0: {
disabledDate: time => {
if (
this.formData.entryEndtime != "" &&
this.formData.entryEndtime != null
) {
return (
time.getTime() > new Date(this.formData.entryEndtime).getTime()
);
}
}
},
pickerOptions1: {
disabledDate: time => {
return (
time.getTime() < new Date(this.formData.entryBegintime).getTime()
); //减去一天的时间代表可以选择同一天;
}
},
rules: {
entryName: [
{ required: true, message: "请输入项目名称", trigger: "blur" },
{
min: 2,
max: 24,
message: "输入长度为2-24的内容,可包含中英文、数字及特殊符号",
trigger: "blur"
},
{ validator: checkProjectStr, trigger: "blur" }
],
organizationName: [
{ required: true, message: "请填写发起机构名称", trigger: "blur" },
{
min: 1,
max: 16,
message: "超过12个最大字数限制,请精简字数或使用简称",
trigger: "blur"
}
],
entryBegintime: [
{
required: true,
message: "请选择时间",
trigger: "change"
}
],
entryEndtime: [
{
required: true,
message: "请选择时间",
trigger: "change"
}
],
type: [
{
type: "array",
required: true,
message: "请至少选择一个活动性质",
trigger: "change"
}
],
entryIntro: [
{ required: true, message: "请填写项目简介", trigger: "blur" },
{ min: 1, max: 200, message: "超出可输入的最大长度", trigger: "blur" }
],
attachmentUrl1: [
{ required: true, message: "请选择列表图片", trigger: "blur" }
],
attachmentUrl2: [
{ required: true, message: "请选择封面", trigger: "blur" }
]
}
};
},
computed: {
...mapGetters(["_token"])
},
created() {
vm = this;
vm.entryId = vm.getUrlSearch(window.location.href, "entryId");
vm.peopleLevel = vm.getUrlSearch(window.location.href, "level");
vm.initTitle();
vm.initOption();
// vm.getEntryData();
},
mounted: function() {
commonUtil.resizeHeight();
},
methods: {
plusOrg(index) {
vm.formData.organizationNameList.splice(index + 1, 0, '');
},
deleteOrg(index) {
vm.formData.organizationNameList.splice(index, 1);
},
initTitle() {
if (!vm.id) {
vm.title = "新建广告位";
vm.curmbThird = "新建广告位";
vm.showStorage = true;
} else {
vm.title = "编辑入口";
vm.curmbThird = "编辑入口";
vm.showStorage = false;
}
},
setOption(data) {
let list = [];
for(let i = 0; i<data.length ; i++) {
let obj = {
value: data[i].projectId,
label: data[i].projectName,
}
list.push(obj);
}
return list;
},
initOption() {
vm.optionsProject = [];
let req = {};
openLoading(vm);
vm.GET("portal/entryInfo/getProjectList", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
vm.optionsProject = vm.setOption(res.data);
vm.getEntryData();
}
});
},
checkOrgNameList() {
let nameList = this.formData.organizationNameList;
for(let i = 0; i < nameList.length; i ++) {
if(!nameList[i]) {
this.$message.error('发起机构名称不可以为空');
return false;
}
}
for(let i = 0; i < nameList.length - 1; i ++) {
for(let j = i + 1; j < nameList.length; j ++) {
if(nameList[i] == nameList[j]) {
this.$message.error('发起机构名称不能重复');
return false;
}
}
}
return true;
},
submitForm(formName) {
let flag = null;
this.$refs[formName].validate(valid => {
if (valid) {
flag = true;
} else {
console.log("error submit!!");
flag = false;
}
});
return flag;
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
// 删除图片
deleteImg(type) {
if (type == 1) {
vm.formData.attachmentUrl1 = "";
vm.imgMouseOver = false;
} else {
vm.formData.attachmentUrl2 = "";
vm.imgMouseOver2 = false;
}
},
changeCover(radio) {
this.formData.attachmentUrl2 = "";
},
beforeUploadListPic(file) {
let fileLimit = {
width: 230,
height: 172,
size: 0.5,
sizeText: "500K",
key: "attachmentUrl1",
more: "attachmentMore1",
show: "uploadImgMessage"
};
this.beforeAvatarUpload(file, fileLimit);
},
beforeUploadCoverPic(file) {
let fileLimit = {
width: 750,
height: 420,
size: 2,
sizeText: "2.0M",
key: "attachmentUrl2",
more: "attachmentMore2",
show: "uploadImgMessage2"
};
if (this.formData.type == 1) {
this.beforeAvatarUpload(file, fileLimit);
} else {
this.beforeUploadMp4(file);
}
},
beforeAvatarUpload(file, fileLimit) {
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
if (!isJPG && !isPNG) {
this.$message.error("图片不符合规范,请根据规范上传图片");
return;
}
if (!isLt2M) {
this.$message.error("图片不符合规范,请根据规范上传图片 ");
return;
}
let _img = new FileReader();
_img.readAsDataURL(file);
_img.onload = function(theFile) {
let image = new Image();
image.src = theFile.target.result;
image.onload = function() {
let _this = this;
if (
_this.width != fileLimit.width ||
_this.height != fileLimit.height
) {
vm.$message.error("图片不符合规范,请根据规范上传图片");
} else {
openLoading(vm);
doUpload(
vm,
file,
getFilePath(file, null),
"preview4",
"progress1",
1
).then(function(path) {
closeLoading(vm);
console.log(path);
if (fileLimit.show == "uploadImgMessage") {
vm.uploadImgMessage = false;
} else if (fileLimit.show == "uploadImgMessage2") {
vm.uploadImgMessage2 = false;
}
vm.formData[fileLimit.key] = path.fullPath;
vm.formData[fileLimit.more] = {
attachmentName: path.name,
attachmentExt: path.ext,
attachmentSize: path.size
};
console.log("!!!" + vm.formData[fileLimit.key]);
vm.$message.success("上传成功");
});
}
};
};
return isJPG && isLt2M;
},
beforeUploadMp4(file) {
console.log(file);
const isMP4 = file.type === "video/mp4";
const isLt = file.size / 1024 / 1024 < 500;
if (!isLt) {
this.$message.error("视频不符合规范,请根据规范上传视频");
return;
}
if (!isMP4) {
this.$message.error("视频不符合规范,请根据规范上传视频");
} else {
openLoading(vm);
doUpload(
vm,
file,
getFilePath(file, null),
"preview4",
"progress1",
""
).then(function(path) {
closeLoading(vm);
console.log(path);
vm.uploadImgMessage2 = false;
vm.formData.attachmentUrl2 = path.fullPath;
vm.$message.success("上传成功");
});
}
},
checkDefault() {
// vm.formData.organizationNameList[0] = vm.organizationContent;
vm.formData.organizationNameList.splice(this.orgListIndex, 1, vm.organizationContent);
// vm.formData.organizationNameList.push(vm.organizationContent);
// vm.formData.organizationName = vm.organizationContent;
vm.visibleName = false;
},
blurName() {
vm.visibleName = false;
setTimeout(function() {
// console.log('失去焦点');
vm.submitForm("formData");
}, 200);
},
focusName(index) {
let textLength = vm.formData.organizationNameList[index].length;
if (textLength == 0) {
this.orgListIndex = index;
vm.visibleName = true;
} else {
vm.visibleName = false;
}
},
changeOrganizationName() {
let textLength = vm.formData.organizationName.length;
if (textLength == 0) {
vm.visibleName = true;
} else {
vm.visibleName = false;
}
},
changeValue(value) {
this.tagsProject = [];
let len = 0;
for (let i = 0; i < value.length; i++) {
for (let j = 0; j < this.optionsProject.length; j++) {
if (value[i] == this.optionsProject[j].value) {
this.tagsProject[len] = {};
this.tagsProject[len] = this.optionsProject[j];
this.tagsProject[len].value = this.optionsProject[j].value;
this.tagsProject[len].name = this.optionsProject[j].label;
len++;
}
}
}
},
initTags(value) {
vm.tagsProject = [];
let len = 0;
for (let i = 0; i < value.length; i++) {
for (let j = 0; j < vm.optionsProject.length; j++) {
if (value[i] == vm.optionsProject[j].value) {
vm.tagsProject[len] = {};
vm.tagsProject[len].value = vm.optionsProject[j].value;
vm.tagsProject[len].name = vm.optionsProject[j].label;
len++;
}
}
}
},
//
handleCloseProject(tag) {
if (tag.disabled == true) {
return;
}
vm.tagsProject.splice(vm.tagsProject.indexOf(tag), 1);
vm.formData.project = [];
for (let j = 0; j < vm.tagsProject.length; j++) {
vm.formData.project[j] = vm.tagsProject[j].value;
}
},
getEntryData() {
if (vm.entryId == null) {
return;
}
let req = {
entryId: vm.entryId
};
openLoading(vm);
vm.GET("portal/entryInfo/getEntry", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
vm.setEditData(res.data);
vm.entryOptionData = res.data;
vm.statusValue = res.data.portalEntry.entryStatus;
// console.log("portalEntryUniInfo", vm.entryOptionData);
} else {
vm.$message(res.message);
}
});
},
// 设置编辑数据
setEditData(data) {
if(data.portalEntry.entryStatus === 1) {
vm.showStorage = true;
}
vm.formData = {
entryName: data.portalEntry.entryName,
organizationName: data.portalEntry.organizationName,
organizationNameList: data.portalEntry.organizationNameList,
entryBegintime: data.portalEntry.entryBegintime,
entryEndtime: data.portalEntry.entryEndtime,
entryIntro: data.portalEntry.entryIntro,
// type: 1,
// attachmentUrl1: "",
// attachmentUrl2: "",
type: data.attachments[1].attachmentType,
attachmentUrl1: data.attachments[0].attachmentUrl,
attachmentUrl2: data.attachments[1].attachmentUrl,
attachmentMore1: {
attachmentName: data.attachments[0].attachmentName,
},
attachmentMore2: {
attachmentName: data.attachments[1].attachmentName,
},
project: data.projectIds,
};
let projectEdit = data.projectIds;
vm.initTags(projectEdit);
},
complete(type) {
//1是暂存,2是完成
if (type == 2) {
if(!this.checkOrgNameList()) return;
if (!vm.formData.attachmentUrl1) {
vm.uploadImgMessage = true;
} else {
vm.uploadImgMessage = false;
}
if (!vm.formData.attachmentUrl2) {
vm.uploadImgMessage2 = true;
} else {
vm.uploadImgMessage2 = false;
}
let completeState = vm.submitForm("formData");
if (
completeState === true &&
vm.formData.attachmentUrl1 != "" &&
vm.formData.attachmentUrl2 != ""
) {
if(vm.statusValue === 3 && vm.formData.project.length == 0) {
vm.dialogUp = true;
} else {
vm.insertOrUpdate(type);
}
}
//完成
} else {
//暂存
if(vm.formData.entryName == '') {
vm.$message('请输入入口名称!');
} else {
vm.insertOrUpdate(type);
}
}
},
insertOrUpdate(isCompleted) {
//option
let portalEntryUniInfo = {};
if (vm.entryId == null) {
portalEntryUniInfo = {
portalEntry: {
entryBegintime: vm.formData.entryBegintime,
entryEndtime: vm.formData.entryEndtime,
entryIntro: vm.formData.entryIntro,
entryName: vm.formData.entryName,
organizationName: vm.formData.organizationName,
organizationNameList: vm.formData.organizationNameList
},
attachments: [
{
attachmentType: 1,
attachmentUrl: vm.formData.attachmentUrl1,
attachmentName: vm.formData.attachmentMore1.attachmentName,
// attachmentExt: vm.formData.attachmentMore1.attachmentExt,
// attachmentSize: vm.formData.attachmentMore1.attachmentSize,
kind: 1,
// seqNo: 1
},
{
attachmentType: vm.formData.type,
attachmentUrl: vm.formData.attachmentUrl2,
attachmentName: vm.formData.attachmentMore2.attachmentName,
// attachmentExt: vm.formData.attachmentMore2.attachmentExt,
// attachmentSize: vm.formData.attachmentMore2.attachmentSize,
kind: 2,
// seqNo: 1
}
],
projectIds: []
};
for(let i = 0;i < vm.tagsProject.length ; i++) {
// portalEntryUniInfo.subprojects[i] = {
// projectId: vm.tagsProject[i].value,
// projectName: vm.tagsProject[i].label,
// }
portalEntryUniInfo.projectIds[i] = vm.tagsProject[i].value;
}
} else {
portalEntryUniInfo = {
portalEntry: {
createdId: vm.entryOptionData.portalEntry.createdId,
createdName: vm.entryOptionData.portalEntry.createdName,
createdTime: vm.entryOptionData.portalEntry.createdTime,
deleteFlag: vm.entryOptionData.portalEntry.deleteFlag,
entryBegintime: vm.formData.entryBegintime,
entryEndtime: vm.formData.entryEndtime,
entryIntro: vm.formData.entryIntro,
entryName: vm.formData.entryName,
entryStatus: vm.entryOptionData.portalEntry.entryStatus,
id: vm.entryOptionData.portalEntry.id,
organizationId: 0,
organizationName: vm.formData.organizationName,
organizationNameList: vm.formData.organizationNameList
},
attachments: [
{
attachmentType: 1,
attachmentUrl: vm.formData.attachmentUrl1,
attachmentName: vm.formData.attachmentMore1.attachmentName,
entryId: vm.entryOptionData.portalEntry.id,
id: vm.entryOptionData.portalEntry.id,
kind: 1,
// seqNo: 1
},
{
attachmentType: vm.formData.type,
attachmentUrl: vm.formData.attachmentUrl2,
attachmentName: vm.formData.attachmentMore2.attachmentName,
entryId: vm.entryOptionData.portalEntry.id,
id: vm.entryOptionData.portalEntry.id,
kind: 2,
// seqNo: 1
}
],
projectIds: []
};
for(let i = 0;i < vm.tagsProject.length ; i++) {
// portalEntryUniInfo.subprojects[i] = {
// projectId: vm.tagsProject[i].value,
// projectName: vm.tagsProject[i].label,
// }
portalEntryUniInfo.projectIds[i] = vm.tagsProject[i].value;
}
// console.log('tagsProject',vm.tagsProject);
}
// console.log("portalEntryUniInfo", portalEntryUniInfo);
openLoading(vm);
vm.POST(
"portal/entryInfo/updateInsertEntry?isCompleted=" + isCompleted,
portalEntryUniInfo
).then(res => {
closeLoading(vm);
if (res.code == "000000") {
if(vm.statusValue === 3) {
vm.$message({
message: '发布成功',
type: 'success'
});
}
vm.$router.push("entry-manager");
} else {
if(vm.statusValue === 3) {
vm.$message.error('发布失败');
vm.$message(res.message);
} else {
vm.$message(res.message);
}
}
});
}
}
};
</script>
<style lang="scss">
.edit-entry-wrap {
.component-content {
position: relative;
padding: 10px;
background: #fff;
.dialog_p {
text-align: center;
span{
font-weight: 700;
}
}
.header-title {
padding: 10px 12px;
font-size: 12px;
color: #449284;
border-bottom: 1px solid #efefef;
}
.button-group {
position: absolute;
margin-top: 10px;
right: 5%;
z-index: 999;
}
.basic-form {
::-webkit-scrollbar
{
width: 4px;
height: 20px;
background-color: #D8D8D8;
}
::-webkit-scrollbar-thumb {
background-color: #D8D8D8;
}
position: relative;
margin-top: 10px;
.basic-item-icon {
position: relative;
.require {
position: absolute;
left: 67px;
top: 11px;
color: #f56c6c;
}
.upload-message {
position: absolute;
left: 160px;
top: 105px;
font-size: 12px;
color: #f56c6c;
}
.img-delete {
position: absolute;
left: 0px;
top: 0px;
width: 84px;
height: 100px;
background: #000;
opacity: 0.7;
z-index: 999;
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
}
}
}
.word-num {
font-size: 12px;
color: #999;
padding-top: 5px;
}
.line {
margin-left: 10px;
width: 20px;
}
.bg-uploader {
img {
float: left;
}
.bg-img {
width: 84px;
height: 100px;
}
.bg-video {
float: left;
width: 84px;
height: 100px;
}
.limit-text {
float: left;
margin-left: 10px;
margin-top: -10px;
p {
font-size: 12px;
color: #999;
}
}
}
.el-popover--plain {
padding: 18px 20px;
top: 40px;
}
.check-project {
top: 95%;
right: 5%;
position: absolute;
z-index: 999;
.tags-list {
border: 1px #e8e8e8 solid;
height: 350px;
min-width: 280px;
overflow-y: scroll;
.el-tag {
margin-top: 5px;
display: table;
background-color: #e6f1fc;
color: #389efe;
}
.tags-project-online {
color: #9aceff;
background-color: #f3f8fe;
border-color: #d5eafe;
}
}
}
}
}
}
.popover-content {
position: relative;
top: 0;
left: 0;
}
</style>
\ No newline at end of file
...@@ -473,11 +473,11 @@ ...@@ -473,11 +473,11 @@
vm.items[1].subs.push(itemComponent); vm.items[1].subs.push(itemComponent);
vm.items[1].subs.push(templateManager); vm.items[1].subs.push(templateManager);
vm.items[1].subs.push(followSider); vm.items[1].subs.push(followSider);
vm.items[1].subs.push(advertSimpleManage);
vm.items.push(eduRole); vm.items.push(eduRole);
vm.items.push(cme); vm.items.push(cme);
vm.items.push(yqRange); vm.items.push(yqRange);
vm.items.push(outResourceManage); vm.items.push(outResourceManage);
vm.items.push(advertSimpleManage);
}, },
goToMessageSendPage(checkAuth) { goToMessageSendPage(checkAuth) {
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册