You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
599 lines
20 KiB
599 lines
20 KiB
<template> |
|
<div> |
|
<div class="photocontent" v-if="show == 1"> |
|
<div class="top"> |
|
<span class="title"><i class="el-icon-tickets"></i>新增文章</span> |
|
<div> |
|
<span @click="back()">< 返回</span> |
|
</div> |
|
</div> |
|
<div class="contentbottom"> |
|
<el-form :model="photoForm" :rules="rules" ref="photoForm"> |
|
<el-form-item label="封面图" :label-width="formLabelWidth" prop="bgImgUrl"> |
|
<el-upload |
|
class="avatar-uploader" |
|
:action="joggle" |
|
:show-file-list="false" |
|
:on-success="handlePhotoSuccess" |
|
:before-upload="beforeAvatarUpload"> |
|
<img v-if="photoForm.bgImgUrl" :src="photoForm.bgImgUrl" class="avatar" width="200px"/> |
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
|
</el-upload> |
|
<!-- <img id="preview" :src="imageUrl" width="250px" height="60px"/> |
|
<a href="javascript:;" class="file gradient"> |
|
<input id="pop_file" type="file" accept=".jpg,.jpeg,.png" v-on:change="uploadFile($event)" name="fileTrans" ref="file" value="" />选择文件</a> --> |
|
</el-form-item> |
|
<el-form-item label="文章标题" :label-width="formLabelWidth" prop="title"> |
|
<el-input v-model="photoForm.title" autocomplete="off"></el-input> |
|
</el-form-item> |
|
<el-form-item label="日期" :label-width="formLabelWidth"> |
|
<el-col> |
|
<el-date-picker type="date" placeholder="选择日期" v-model="photoForm.createTime" style="width: 100%;"></el-date-picker> |
|
</el-col> |
|
</el-form-item> |
|
<el-form-item label="来源" :label-width="formLabelWidth" prop="description"> |
|
<el-input v-model="photoForm.description" autocomplete="off"></el-input> |
|
</el-form-item> |
|
<el-form-item label="文章内容" :label-width="formLabelWidth" prop="textContent"> |
|
<quill :border="true" v-model="photoForm.textContent" :height="300" /> |
|
</el-form-item> |
|
|
|
<div class="footer"> |
|
<el-button type="primary" @click="photoAdd('photoForm')">确认</el-button> |
|
<el-button type="info" @click="cancel()">取消</el-button> |
|
</div> |
|
</el-form> |
|
</div> |
|
</div> |
|
<div class="photocontent" v-else-if="show== 0"> |
|
<div class="top"> |
|
<span class="title"><i class="el-icon-tickets"></i>新增文章</span> |
|
<div> |
|
<span @click="back()">< 返回</span> |
|
</div> |
|
</div> |
|
<div class="contentbottom"> |
|
<el-form :model="videoForm" :rules="rules" ref="videoForm"> |
|
<el-form-item label="封面图" :label-width="formLabelWidth" prop="bgImgUrl"> |
|
<el-upload class="avatar-uploader" :action="joggle" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> |
|
<img v-if="videoForm.bgImgUrl" :src="videoForm.bgImgUrl" class="avatar" width="200px"/> |
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
|
</el-upload> |
|
</el-form-item> |
|
<el-form-item label="文章标题" :label-width="formLabelWidth" prop="title"> |
|
<el-input v-model="videoForm.title" autocomplete="off"></el-input> |
|
</el-form-item> |
|
<el-form-item label="日期" :label-width="formLabelWidth"> |
|
<el-col> |
|
<el-date-picker type="date" placeholder="选择日期" v-model="videoForm.createTime" style="width: 100%;"></el-date-picker> |
|
</el-col> |
|
</el-form-item> |
|
<el-form-item label="来源" :label-width="formLabelWidth" prop="description"> |
|
<el-input v-model="videoForm.description" autocomplete="off"></el-input> |
|
</el-form-item> |
|
<el-form-item label="视频" :label-width="formLabelWidth" prop="videoUrl"> |
|
<el-upload |
|
class="avatar-uploader" |
|
:action="joggle" |
|
v-bind:data="{ FoldPath: '上传目录', SecretKey: '安全验证' }" |
|
v-bind:on-progress="uploadVideoProcess" |
|
v-bind:on-success="handleVideoSuccess" |
|
v-bind:before-upload="beforeUploadVideo" |
|
v-bind:show-file-list="false"> |
|
<video v-if="videoForm.videoUrl != '' && !videoFlag" v-bind:src="videoForm.videoUrl" class="avatar video-avatar" controls="controls">您的浏览器不支持视频播放</video> |
|
<i v-else-if="videoForm.videoUrl == '' && !videoFlag" class="el-icon-plus avatar-uploader-icon"></i> |
|
<el-progress v-if="videoFlag == true" type="circle" v-bind:percentage="videoUploadPercent" style="margin-top:7px;"></el-progress> |
|
</el-upload> |
|
</el-form-item> |
|
<el-form-item label="文章内容" :label-width="formLabelWidth" prop="textContent"> |
|
<quill :border="true" v-model="videoForm.textContent" :height="300" /> |
|
</el-form-item> |
|
<div class="footer"> |
|
<el-button type="primary" @click="videoAdd('videoForm')">确认</el-button> |
|
<el-button type="info" @click="cancel()">取消</el-button> |
|
</div> |
|
</el-form> |
|
</div> |
|
</div> |
|
<div class="photocontent" v-if="show== 2"> |
|
<div class="top"> |
|
<span class="title"><i class="el-icon-tickets"></i>新增文章</span> |
|
<div> |
|
<span @click="back()">< 返回</span> |
|
</div> |
|
</div> |
|
<div class="contentbottom"> |
|
<el-form :model="linkForm" :rules="rules" ref="linkForm"> |
|
<el-form-item label="封面图" :label-width="formLabelWidth" prop="bgImgUrl"> |
|
<el-upload class="avatar-uploader" :action="joggle" :show-file-list="false" :on-success="handleLinkSuccess" :before-upload="beforeAvatarUpload"> |
|
<img v-if="linkForm.bgImgUrl" :src="linkForm.bgImgUrl" class="avatar" width="200px"/> |
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
|
</el-upload> |
|
</el-form-item> |
|
<el-form-item label="日期" :label-width="formLabelWidth"> |
|
<el-col> |
|
<el-date-picker type="date" placeholder="选择日期" v-model="linkForm.createTime" style="width: 100%;"></el-date-picker> |
|
</el-col> |
|
</el-form-item> |
|
<el-form-item label="连接类型" :label-width="formLabelWidth" prop="linkType"> |
|
<el-radio-group v-model="linkForm.linkType"> |
|
<el-radio :label="0">站内链接</el-radio> |
|
<el-radio :label="1">站外链接</el-radio> |
|
</el-radio-group> |
|
</el-form-item> |
|
<el-form-item prop="value" label="站内链接" :label-width="formLabelWidth" v-if="linkForm.linkType == 0"> |
|
<el-cascader :change-on-select="true" :props="defaultParams" :options="options" v-model="value" @change="handleChange" :clearable="true"></el-cascader> |
|
</el-form-item> |
|
<el-form-item label="文章" :label-width="formLabelWidth" v-if="linkForm.linkType == 0" prop="linkArticleId"> |
|
<el-select v-model="linkForm.linkArticleId" placeholder="请选择"> |
|
<el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item prop="linkUrl" label="站外链接" :label-width="formLabelWidth" v-if="linkForm.linkType == 1"> |
|
<el-input v-model="linkForm.linkUrl" placeholder="请输入链接"></el-input> |
|
</el-form-item> |
|
<el-form-item label="文章标题" :label-width="formLabelWidth" prop="title"> |
|
<el-input v-model="linkForm.title" autocomplete="off"></el-input> |
|
</el-form-item> |
|
<div class="footer"> |
|
<el-button type="primary" @click="linkAdd('linkForm')">确认</el-button> |
|
<el-button type="info" @click="cancel()">取消</el-button> |
|
</div> |
|
</el-form> |
|
</div> |
|
</div> |
|
<el-upload class="avatar-uploader" |
|
action="http://zxyicloud.com/msdw/aliyun/uploadFiles" |
|
name="img" |
|
:headers="headerObj" |
|
:show-file-list="false" |
|
:on-success="uploadSuccess" |
|
:on-error="uploadError" |
|
:before-upload="beforeAvatarUpload"> </el-upload> |
|
</div> |
|
</template> |
|
<script> |
|
import quill from "@/components/quill"; |
|
import { allColumn } from "@/apis/request.js"; |
|
import moment from "moment"; |
|
import { getColumnarticle } from "@/apis/request.js"; |
|
import { addArticle } from "@/apis/request.js"; |
|
import { getColumnallarticle } from "@/apis/request.js"; |
|
import { joggle } from "@/apis/request.js"; |
|
export default { |
|
components: { |
|
quill, |
|
}, |
|
data() { |
|
return { |
|
rules: { |
|
bgImgUrl: [ |
|
{ required: true, message: "请上传图片", trigger: "change" }, |
|
], |
|
title: [{ required: true, message: "请输入标题", trigger: "blur" }], |
|
// textContent: [ |
|
// { required: true, message: "请输入内容", trigger: "blur" }, |
|
// ], |
|
description: [ |
|
{ required: true, message: "请输入来源", trigger: "blur" }, |
|
], |
|
videoUrl: [{ required: true, message: "请上传视频", trigger: "blur" }], |
|
linkType: [ |
|
{ required: true, message: "请选择链接类型", trigger: "blur" }, |
|
], |
|
value: [{ required: true, message: "请选择站内链接", trigger: "blur" }], |
|
linkArticleId: [ |
|
{ required: true, message: "请选择链接文章", trigger: "blur" }, |
|
], |
|
linkUrl: [ |
|
{ required: true, message: "请输入站外链接", trigger: "blur" }, |
|
], |
|
}, |
|
joggle, |
|
defaultParams: { |
|
label: "columnName", |
|
value: "id", |
|
children: "children", |
|
}, |
|
value: "", |
|
videoFlag: false, |
|
//是否显示进度条 |
|
videoUploadPercent: "", |
|
//进度条的进度， |
|
isShowUploadVideo: false, |
|
//显示上传按钮 |
|
options: [ |
|
{ |
|
value: "zhinan", |
|
label: "指南", |
|
children: [ |
|
{ |
|
value: "shejiyuanze", |
|
label: "设计原则", |
|
children: [ |
|
{ |
|
value: "yizhi", |
|
label: "一致", |
|
}, |
|
{ |
|
value: "fankui", |
|
label: "反馈", |
|
}, |
|
{ |
|
value: "xiaolv", |
|
label: "效率", |
|
}, |
|
{ |
|
value: "kekong", |
|
label: "可控", |
|
}, |
|
], |
|
}, |
|
{ |
|
value: "daohang", |
|
label: "导航", |
|
children: [ |
|
{ |
|
value: "cexiangdaohang", |
|
label: "侧向导航", |
|
}, |
|
{ |
|
value: "dingbudaohang", |
|
label: "顶部导航", |
|
}, |
|
], |
|
}, |
|
], |
|
}, |
|
{ |
|
value: "ziyuan", |
|
label: "资源", |
|
children: [ |
|
{ |
|
value: "axure", |
|
label: "Axure Components", |
|
}, |
|
{ |
|
value: "sketch", |
|
label: "Sketch Templates", |
|
}, |
|
{ |
|
value: "jiaohu", |
|
label: "组件交互文档", |
|
}, |
|
], |
|
}, |
|
], |
|
option: [], |
|
photoForm: { |
|
bgImgUrl: "", |
|
title: "", |
|
createTime: "", |
|
description: "", |
|
textContent: null, |
|
}, |
|
videoForm: { |
|
videoUrl: "", |
|
bgImgUrl: "", |
|
title: "", |
|
createTime: "", |
|
description: "", |
|
textContent: null, |
|
}, |
|
linkForm: { |
|
bgImgUrl: "", |
|
createTime: "2020-08-20", |
|
linkType: 0, |
|
linkUrl: "", |
|
linkColumnId: 0, |
|
columnId: "", |
|
title: "", |
|
linkArticleId: "", |
|
}, |
|
formLabelWidth: "90px", |
|
editorOption: { |
|
scrollingContainer: '#editorcontainer', |
|
placeholder: '', |
|
// or 'bubble' |
|
theme: 'snow', |
|
modules: { |
|
imageResize: { |
|
displayStyles: { |
|
backgroundColor: 'black', border: 'none', color: 'white' |
|
}, |
|
modules: ['Resize', 'DisplaySize', 'Toolbar'] |
|
},toolbar: { |
|
// 工具栏 |
|
container: 'toolbarOptions.toolbarOptions', |
|
handlers: { 'image': function (value) { if (value) { |
|
// upload点击上传事件 |
|
document.querySelector('.avatar-uploader input').click() |
|
} else { |
|
this.quill.format('image', false) |
|
} |
|
} |
|
} |
|
} |
|
} |
|
}, |
|
isClear: false, |
|
headerObj:{} |
|
}; |
|
}, |
|
methods: { |
|
uploadError(){ |
|
|
|
}, |
|
uploadSuccess(res) { |
|
var dt = res.result |
|
let quill = this.$refs.myQuillEditor.quill |
|
// 如果上传成功 |
|
if (dt.meta.status === this.GLB.IMAGE_ADD_SUCCESS && dt.url !== null) { |
|
// 获取光标所在位置 |
|
let length = quill.getSelection().index |
|
// 插入图片 dt.url为服务器返回的图片地址 |
|
quill.insertEmbed(length, 'image', this.glAPI + dt.url) |
|
// 调整光标到最后 |
|
quill.setSelection(length + 1) |
|
} else { |
|
this.$message.error('图片插入失败') |
|
}// loading加载隐藏 |
|
this.quillUpdateImg = false |
|
}, |
|
handleChange(value) { |
|
let index = value.length - 1; |
|
let id = value[index]; |
|
this.linkForm.linkColumnId = value[index]; |
|
getColumnallarticle(id).then((res) => { |
|
this.option = res.map((res) => { |
|
return { |
|
value: res.id, |
|
label: res.title, |
|
}; |
|
}); |
|
console.log(res, 1); |
|
}); |
|
}, |
|
beforeAvatarUpload(file) { |
|
console.log(file); |
|
const isJPG = file.type === "image/jpeg" || "image/jpg" || "image/png"; |
|
const isLt1M = file.size / 1024 / 1024 < 1; |
|
|
|
if (!isJPG) { |
|
this.$message.error("图片格式错误!"); |
|
} |
|
if (!isLt1M) { |
|
this.$message.error("图片大小不能超过 1MB!"); |
|
} |
|
return isJPG && isLt1M; |
|
}, |
|
common() { |
|
allColumn().then((res) => { |
|
this.options = this.getTreeData(res); |
|
}); |
|
}, |
|
getTreeData(data) { |
|
// 循环遍历json数据 |
|
for (var i = 0; i < data.length; i++) { |
|
if (data[i].children.length < 1) { |
|
// children若为空数组，则将children设为undefined |
|
data[i].children = undefined; |
|
} else { |
|
// children若不为空数组，则继续 递归调用 本方法 |
|
this.getTreeData(data[i].children); |
|
} |
|
} |
|
return data; |
|
}, |
|
//上传前回调 |
|
beforeUploadVideo(file) { |
|
var fileSize = file.size / 1024 / 1024 < 50; |
|
if ( |
|
[ |
|
"video/mp4", |
|
"video/ogg", |
|
"video/flv", |
|
"video/avi", |
|
"video/wmv", |
|
"video/rmvb", |
|
"video/mov", |
|
].indexOf(file.type) == -1 |
|
) { |
|
this.$message.error("上传视频格式错误!"); |
|
return false; |
|
} |
|
if (!fileSize) { |
|
this.$message.error("上传视频大小不能超过 50MB!"); |
|
return false; |
|
} |
|
this.isShowUploadVideo = false; |
|
}, |
|
//进度条 |
|
uploadVideoProcess(event, file) { |
|
this.videoFlag = true; |
|
this.videoUploadPercent = file.percentage.toFixed(0) * 1; |
|
}, |
|
//上传成功回调 |
|
handleVideoSuccess(res) { |
|
this.isShowUploadVideo = true; |
|
this.videoFlag = false; |
|
this.videoUploadPercent = 0; |
|
this.videoForm.videoUrl = res.data.fileUrl; |
|
}, |
|
change(val) { |
|
console.log(val); |
|
}, |
|
submit() { |
|
console.log(this.$refs.text.value); |
|
}, |
|
handlePhotoSuccess(res) { |
|
// this.photoForm.bgImgUrl = res.imgUrl; |
|
this.photoForm.bgImgUrl = res.data.fileUrl; |
|
}, |
|
handleAvatarSuccess(res) { |
|
// this.videoForm.bgImgUrl = res.imgUrl; |
|
this.videoForm.bgImgUrl = res.data.fileUrl; |
|
}, |
|
handleLinkSuccess(res) { |
|
// this.linkForm.bgImgUrl = res.imgUrl; |
|
this.linkForm.bgImgUrl = res.data.fileUrl; |
|
}, |
|
back() { |
|
let a=localStorage.getItem('columnid') |
|
this.$router.push("/home/contentmange/" + a); |
|
return false; |
|
}, |
|
photoAdd(formName) { |
|
let a = localStorage.getItem('columnid') |
|
this.$refs[formName].validate((valid) => { |
|
if (valid) { |
|
var form = { ...this.photoForm }; |
|
var date = moment(form.createTime).format("YYYY-MM-DD"); |
|
form.createTime = date; |
|
form.columnId = a; |
|
addArticle(form).then((res) => { |
|
console.log(res); |
|
getColumnarticle(a, 1).then((res) => { |
|
this.$store.state.article = res; |
|
this.$router.push( |
|
"/home/contentmange/" + a |
|
); |
|
}); |
|
}); |
|
} else { |
|
console.log("error submit!!"); |
|
return false; |
|
} |
|
}); |
|
}, |
|
videoAdd(formName) { |
|
let a=localStorage.getItem('columnid') |
|
this.$refs[formName].validate((valid) => { |
|
if (valid) { |
|
var form = { ...this.videoForm }; |
|
var date = moment(form.createTime).format("YYYY-MM-DD"); |
|
form.createTime = date; |
|
form.columnId = a; |
|
addArticle(form).then((res) => { |
|
console.log(res); |
|
getColumnarticle(a, 1).then((res) => { |
|
this.$store.state.article = res; |
|
this.$router.push( |
|
"/home/contentmange/" + a |
|
); |
|
}); |
|
}); |
|
} else { |
|
console.log("error submit!!"); |
|
return false; |
|
} |
|
}); |
|
}, |
|
linkAdd(formName) { |
|
let a=localStorage.getItem('columnid') |
|
this.$refs[formName].validate((valid) => { |
|
if (valid) { |
|
var form = { ...this.linkForm }; |
|
var date = moment(form.createTime).format("YYYY-MM-DD"); |
|
form.createTime = date; |
|
form.columnId = a; |
|
addArticle(form).then((res) => { |
|
console.log(res); |
|
getColumnarticle(a, 1).then((res) => { |
|
this.$store.state.article = res; |
|
this.$router.push( |
|
"/home/contentmange/" + a |
|
); |
|
}); |
|
}); |
|
} else { |
|
console.log("error submit!!"); |
|
return false; |
|
} |
|
}); |
|
}, |
|
cancel() { |
|
let a=localStorage.getItem('columnid') |
|
this.$router.push("/home/contentmange/" + a); |
|
}, |
|
}, |
|
computed: { |
|
show() { |
|
if (localStorage.getItem("style")) { |
|
return localStorage.getItem("style"); |
|
} |
|
else{ |
|
return '' |
|
} |
|
}, |
|
}, |
|
|
|
mounted() { |
|
var date = new Date(); |
|
date = moment(date).format("YYYY-MM-DD"); |
|
this.linkForm.createTime = date; |
|
this.photoForm.createTime = date; |
|
this.videoForm.createTime = date; |
|
this.common(); |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="less"> |
|
.photocontent { |
|
height: 100%; |
|
.top { |
|
display: flex; |
|
justify-content: space-between; |
|
border-bottom: 1px solid #ccc; |
|
height: 50px; |
|
line-height: 50px; |
|
div { |
|
span { |
|
color: skyblue; |
|
} |
|
span:hover { |
|
cursor: pointer; |
|
} |
|
} |
|
} |
|
.contentbottom { |
|
margin-top: 20px; |
|
.el-input__inner { |
|
width: 350px; |
|
} |
|
} |
|
.avatar-uploader .el-upload { |
|
border: 1px dashed #d9d9d9; |
|
border-radius: 6px; |
|
cursor: pointer; |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
.avatar-uploader .el-upload:hover { |
|
border-color: #409eff; |
|
} |
|
.avatar-uploader-icon { |
|
font-size: 28px; |
|
color: #8c939d; |
|
width: 150px; |
|
height: 150px; |
|
line-height: 150px; |
|
text-align: center; |
|
} |
|
.avatar { |
|
height: 178px; |
|
display: block; |
|
} |
|
.video-avatar { |
|
height: 200px; |
|
} |
|
.ql-container { |
|
height: 300px; |
|
} |
|
.footer { |
|
width: 200px; |
|
margin: 40px auto; |
|
} |
|
} |
|
</style>
|
|
|