|
|
|
@ -6,6 +6,28 @@ |
|
|
|
<el-form-item label="标题：" :label-width="formLabelWidth" prop="title"> |
|
|
|
<el-input v-model="form.title" autocomplete="off" placeholder="请输入标题"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="文章类别：" :label-width="formLabelWidth" prop="type"> |
|
|
|
<el-select v-model="form.type" placeholder="请选择文章类型" @change="changeType"> |
|
|
|
<el-option |
|
|
|
v-for="item in sortType" |
|
|
|
:key="item.value" |
|
|
|
:label="item.name" |
|
|
|
:value="item.value"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="是否展示在首页轮播：" :label-width="formLabelWidth" prop="isHomeSlideshow"> |
|
|
|
<el-switch |
|
|
|
v-model="form.isHomeSlideshow" |
|
|
|
@change="checkIsCarousel" |
|
|
|
active-color="#13ce66" |
|
|
|
inactive-color="#ff4949" |
|
|
|
:active-value="1" |
|
|
|
:inactive-value="0"> |
|
|
|
</el-switch> |
|
|
|
|
|
|
|
<span>(如果开启，请上传标题图片)</span> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="标题图片：" :label-width="formLabelWidth" prop="imgUrl"> |
|
|
|
<el-upload |
|
|
|
class="avatar-uploader" |
|
|
|
@ -20,19 +42,10 @@ |
|
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
|
|
|
</el-upload> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="文章类别：" :label-width="formLabelWidth" prop="type"> |
|
|
|
<el-select v-model="form.type" placeholder="请选择文章类型"> |
|
|
|
<el-option |
|
|
|
v-for="item in sortType" |
|
|
|
:key="item.value" |
|
|
|
:label="item.name" |
|
|
|
:value="item.value"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="优先级：" :label-width="formLabelWidth" prop="sort"> |
|
|
|
|
|
|
|
<!-- <el-form-item label="优先级：" :label-width="formLabelWidth" prop="sort"> |
|
|
|
<el-input v-model.number="form.sort" autocomplete="off" placeholder="请输入优先级"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-form-item> --> |
|
|
|
<el-form-item label="是否发布：" :label-width="formLabelWidth" prop="isIssue"> |
|
|
|
<el-switch |
|
|
|
v-model="form.isIssue" |
|
|
|
@ -42,18 +55,6 @@ |
|
|
|
:inactive-value="0"> |
|
|
|
</el-switch> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="是否展示在首页轮播：" :label-width="formLabelWidth" prop="isHomeSlideshow"> |
|
|
|
<el-switch |
|
|
|
v-model="form.isHomeSlideshow" |
|
|
|
@change="checkIsCarousel" |
|
|
|
active-color="#13ce66" |
|
|
|
inactive-color="#ff4949" |
|
|
|
:active-value="1" |
|
|
|
:inactive-value="0"> |
|
|
|
</el-switch> |
|
|
|
|
|
|
|
<span>(如果开启，请上传标题图片)</span> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="生效时间：" :label-width="formLabelWidth" prop="issueStartTime"> |
|
|
|
<el-date-picker |
|
|
|
v-model="form.issueStartTime" |
|
|
|
@ -108,6 +109,8 @@ |
|
|
|
class="ql-editor" |
|
|
|
v-model="form.content" |
|
|
|
ref="myQuillEditor" |
|
|
|
@ready="ready($event)" |
|
|
|
@change="onEditorChange($event)" |
|
|
|
:options="editorOption" |
|
|
|
> |
|
|
|
</quill-editor> |
|
|
|
@ -132,6 +135,7 @@ const Font = Quill.import('formats/font'); |
|
|
|
// We do not add Aref Ruqaa since it is the default |
|
|
|
Font.whitelist =['Arial', 'serif', 'sans-serif', '宋体', '黑体', '微软雅黑']; |
|
|
|
Quill.register(Font, true); |
|
|
|
import { lineHeightStyle } from "@/utils/lineHeight"; |
|
|
|
import {addNoticeInfo, getNoticeInfo, editNoticeInfo,getNoticeTypeList} from "@/api/notice" |
|
|
|
import { getToken } from '@/utils/auth' |
|
|
|
export default { |
|
|
|
@ -163,7 +167,7 @@ export default { |
|
|
|
isIssue:'1', |
|
|
|
accessoryUrl:'', |
|
|
|
isHomeSlideshow:0, |
|
|
|
sort:'' |
|
|
|
// sort:'' |
|
|
|
}, |
|
|
|
rules: { //form校验规则 |
|
|
|
title: [ |
|
|
|
@ -184,9 +188,9 @@ export default { |
|
|
|
issueStartTime: [ |
|
|
|
{required: true, message: '请选择生效日期', trigger: 'click'} |
|
|
|
], |
|
|
|
sort: [ |
|
|
|
{required: true, message: '请输入数字类型优先级', trigger: 'blur'} |
|
|
|
], |
|
|
|
// sort: [ |
|
|
|
// {required: true, message: '请输入数字类型优先级', trigger: 'blur'} |
|
|
|
// ], |
|
|
|
sender: [ |
|
|
|
{message: '请输入作者', trigger: 'blur'} |
|
|
|
], |
|
|
|
@ -213,6 +217,7 @@ export default { |
|
|
|
[{'color': []}, {'background': []}], // 字体颜色，字体背景颜色 |
|
|
|
[{'font': ['Arial', 'serif', 'sans-serif', '宋体', '黑体', '微软雅黑']}], //字体 |
|
|
|
[{'align': []}], //对齐方式 |
|
|
|
[{'lineheight': ["initial", "1", "1.5", "1.75", "2", "3", "4", "5"] }], |
|
|
|
['clean'], //清除字体样式 |
|
|
|
['link','image', 'video','upload'] //上传图片、上传视频 |
|
|
|
], |
|
|
|
@ -225,6 +230,13 @@ export default { |
|
|
|
} else { |
|
|
|
this.quill.format('image', false); |
|
|
|
} |
|
|
|
}, |
|
|
|
lineheight: function(value) { |
|
|
|
if (value) { |
|
|
|
this.quill.format("lineHeight", value); |
|
|
|
} else { |
|
|
|
console.log(value); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -295,7 +307,6 @@ export default { |
|
|
|
vm.$Message.error('图片插入失败') |
|
|
|
} |
|
|
|
}, |
|
|
|
onEditorChange(){}, // 内容改变事件 |
|
|
|
//发送添加请求 |
|
|
|
addNotice() { |
|
|
|
const param = { |
|
|
|
@ -310,7 +321,7 @@ export default { |
|
|
|
isIssue:this.form.isIssue, |
|
|
|
accessoryUrl:this.form.accessoryUrl, |
|
|
|
isHomeSlideshow:this.form.isHomeSlideshow, |
|
|
|
sort:this.form.sort |
|
|
|
// sort:this.form.sort |
|
|
|
} |
|
|
|
let temp1 = this.sortType.filter(item => { |
|
|
|
if(item.value == this.form.type) |
|
|
|
@ -375,6 +386,21 @@ export default { |
|
|
|
} |
|
|
|
return isLt2M; |
|
|
|
}, |
|
|
|
//文章类型变化 |
|
|
|
changeType(value){ |
|
|
|
const TYPE = ['SPZB','ZNZZ','SPAQ','GYHLW','ZNGYL','XLS' ] |
|
|
|
if(TYPE.indexOf(value) != -1) |
|
|
|
{ |
|
|
|
this.rules.imgUrl = [ |
|
|
|
{required: true, message: '请上传标题图片', trigger: 'blur'} |
|
|
|
] |
|
|
|
} else { |
|
|
|
this.rules.imgUrl = [ |
|
|
|
{required: false, message: '请上传标题图片', trigger: 'blur'} |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
//开启首页轮播展示，则验证标题图片为必填 |
|
|
|
checkIsCarousel(value){ |
|
|
|
if(value) |
|
|
|
{ |
|
|
|
@ -412,7 +438,18 @@ export default { |
|
|
|
//附件上传成功回调 |
|
|
|
handleAvatarSuccess(response, file, fileList) { |
|
|
|
this.form.accessoryUrl = response.data |
|
|
|
} |
|
|
|
}, |
|
|
|
ready() { |
|
|
|
Quill.register({ "formats/lineHeight": lineHeightStyle }, true); |
|
|
|
}, |
|
|
|
onEditorChange(editor) { |
|
|
|
// this.editorContent = editor.html; |
|
|
|
this.innerText = editor.text.replace(/[\r\n]$/g, ""); |
|
|
|
this.$emit("onChange", { |
|
|
|
content: editor.html, |
|
|
|
textLength: this.innerText.length |
|
|
|
}); |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
@ -432,8 +469,9 @@ export default { |
|
|
|
<style lang="scss"> |
|
|
|
.ql-editor { |
|
|
|
min-height: 350px !important; |
|
|
|
line-height: normal !important; |
|
|
|
background-color: #ffffff; |
|
|
|
} |
|
|
|
|
|
|
|
.edui-default .edui-toolbar { |
|
|
|
line-height: 20px; |
|
|
|
} |
|
|
|
@ -477,3 +515,204 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
<style> |
|
|
|
.editor { |
|
|
|
line-height: normal !important; |
|
|
|
/* height: 400px; */ |
|
|
|
background-color: #ffffff; |
|
|
|
} |
|
|
|
.ql-snow .ql-tooltip[data-mode="link"]::before { |
|
|
|
content: "请输入链接地址:"; |
|
|
|
} |
|
|
|
.ql-snow .ql-tooltip.ql-editing a.ql-action::after { |
|
|
|
border-right: 0px; |
|
|
|
content: "保存"; |
|
|
|
padding-right: 0px; |
|
|
|
} |
|
|
|
.ql-snow .ql-tooltip a.ql-action::after { |
|
|
|
content: "编辑"; |
|
|
|
} |
|
|
|
.ql-snow .ql-tooltip a.ql-remove::before { |
|
|
|
content: "移除"; |
|
|
|
} |
|
|
|
.ql-snow .ql-tooltip[data-mode="video"]::before { |
|
|
|
content: "请输入视频地址:"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label::before, |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item::before { |
|
|
|
content: "14px"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before, |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before { |
|
|
|
content: "10px"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before, |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before { |
|
|
|
content: "18px"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before, |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before { |
|
|
|
content: "32px"; |
|
|
|
} |
|
|
|
|
|
|
|
.ql-snow .ql-picker.ql-header .ql-picker-label::before, |
|
|
|
.ql-snow .ql-picker.ql-header .ql-picker-item::before { |
|
|
|
content: "文本"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, |
|
|
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { |
|
|
|
content: "标题1"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, |
|
|
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { |
|
|
|
content: "标题2"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, |
|
|
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { |
|
|
|
content: "标题3"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before, |
|
|
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { |
|
|
|
content: "标题4"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before, |
|
|
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before { |
|
|
|
content: "标题5"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before, |
|
|
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before { |
|
|
|
content: "标题6"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-font .ql-picker-label::before, |
|
|
|
.ql-snow .ql-picker.ql-font .ql-picker-item::before { |
|
|
|
content: "标准字体"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before, |
|
|
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before { |
|
|
|
content: "衬线字体"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before, |
|
|
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before { |
|
|
|
content: "等宽字体"; |
|
|
|
} |
|
|
|
/* 编辑器内部出现滚动条 */ |
|
|
|
.ql-container { |
|
|
|
/* overflow-y: auto; */ |
|
|
|
height: 400px !important; |
|
|
|
} |
|
|
|
/*滚动条整体样式*/ |
|
|
|
.ql-container ::-webkit-scrollbar { |
|
|
|
width: 10px; /*竖向滚动条的宽度*/ |
|
|
|
height: 10px; /*横向滚动条的高度*/ |
|
|
|
} |
|
|
|
.ql-container ::-webkit-scrollbar-thumb { |
|
|
|
/*滚动条里面的小方块*/ |
|
|
|
background: #666666; |
|
|
|
border-radius: 5px; |
|
|
|
} |
|
|
|
.ql-container ::-webkit-scrollbar-track { |
|
|
|
/*滚动条轨道的样式*/ |
|
|
|
background: #ccc; |
|
|
|
border-radius: 5px; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before, |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before { |
|
|
|
content: "10px"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="11px"]::before, |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="11px"]::before { |
|
|
|
content: "11px"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before, |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before { |
|
|
|
content: "12px"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="13px"]::before, |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="13px"]::before { |
|
|
|
content: "13px"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before, |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before { |
|
|
|
content: "14px"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="15px"]::before, |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="15px"]::before { |
|
|
|
content: "15px"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before, |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before { |
|
|
|
content: "16px"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="17px"]::before, |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="17px"]::before { |
|
|
|
content: "17px"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before, |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before { |
|
|
|
content: "18px"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="19px"]::before, |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="19px"]::before { |
|
|
|
content: "19px"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before, |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before { |
|
|
|
content: "20px"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="21px"]::before, |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="21px"]::before { |
|
|
|
content: "21px"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before, |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before { |
|
|
|
content: "22px"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="23px"]::before, |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="23px"]::before { |
|
|
|
content: "23px"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before, |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before { |
|
|
|
content: "24px"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="25px"]::before, |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="25px"]::before { |
|
|
|
content: "25px"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before, |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before { |
|
|
|
content: "26px"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-lineheight .ql-picker-label::before{ |
|
|
|
content: "行高"; |
|
|
|
} |
|
|
|
.ql-snow |
|
|
|
.ql-picker.ql-lineheight |
|
|
|
.ql-picker-item[data-value="initial"]::before { |
|
|
|
content: "默认"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1"]::before { |
|
|
|
content: "1"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1.5"]::before { |
|
|
|
content: "1.5"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1.75"]::before { |
|
|
|
content: "1.75"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="2"]::before { |
|
|
|
content: "2"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="3"]::before { |
|
|
|
content: "3"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="4"]::before { |
|
|
|
content: "4"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="5"]::before { |
|
|
|
content: "5"; |
|
|
|
} |
|
|
|
.ql-snow .ql-picker.ql-lineheight { |
|
|
|
width: 70px; |
|
|
|
} |
|
|
|
</style> |
DESKTOP-00SUCB6\Administrator
4 years ago