<template>
|
<div class="page-container page-article-edit">
|
<div class="nav colorfff">
|
<img
|
class="nav-icon"
|
:src="require('@/assets/safety/location.png')"
|
alt=""
|
/>
|
<div class="nav-content">
|
<span>安全管理 </span>
|
<i class="el-icon el-icon-arrow-right"></i>
|
<span> 编辑内容</span>
|
</div>
|
</div>
|
<div class="content">
|
<div class="detail-wrap">
|
<div class="title">
|
<span class="title-text colorfff">编辑内容</span>
|
</div>
|
|
<div class="form-wrap">
|
<el-form
|
:inline="true"
|
:model="articleForm"
|
ref="articleForm"
|
label-width="100px"
|
>
|
<el-form-item label="标题：">
|
<el-input
|
style="width: 14vw"
|
v-model="articleForm.title"
|
popper-class="safety-report-filter"
|
placeholder="请输入内容标题"
|
>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="信息类型：">
|
<el-select
|
style="width: 14vw"
|
v-model="articleForm.type"
|
popper-class="safety-report-filter"
|
>
|
<el-option
|
v-for="item in typeOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option
|
></el-select>
|
</el-form-item>
|
<el-form-item label="信息来源：">
|
<el-cascader style="width: 14vw" :show-all-levels="false" :options="deptList" :props="{label: 'name', value: 'id', checkStrictly: true}" v-model="articleForm.infoSourcesId"></el-cascader>
|
</el-form-item>
|
<el-form-item label="发布范围：">
|
<el-select
|
style="width: 14vw"
|
v-model="articleForm.publishScope"
|
popper-class="safety-report-filter"
|
>
|
<el-option
|
v-for="item in rangeOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option
|
></el-select>
|
</el-form-item>
|
</el-form>
|
<div></div>
|
<el-form
|
:inline="true"
|
:model="articleForm"
|
ref="articleForm"
|
label-width="100px"
|
>
|
<el-form-item label="发布内容：">
|
<quill-editor
|
v-model="articleForm.publishContent"
|
ref="editor"
|
:options="editorOptions"
|
></quill-editor>
|
</el-form-item>
|
</el-form>
|
<el-form
|
:inline="true"
|
:model="articleForm"
|
ref="articleForm"
|
label-width="100px"
|
>
|
<el-form-item label="上传附件：">
|
<el-upload
|
class="upload-demo"
|
ref="upload"
|
:action="$exportBase + 'sys/oss/upload'"
|
:file-list="fileList"
|
:data="{token: token}"
|
:on-remove="handleRemove"
|
:on-success="handleSuccess"
|
>
|
<div class="action-bar">
|
<div class="action-item orange pointer" slot="trigger">
|
选取文件
|
</div>
|
</div>
|
<div slot="tip" class="el-upload__tip"></div>
|
</el-upload>
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<div class="action-bar">
|
<div class="action-item blue pointer" @click="submitArticle">保存</div>
|
<div class="action-item orange pointer" @click="$router.go(-1)">取消</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { quillEditor } from "vue-quill-editor";
|
import "quill/dist/quill.core.css";
|
import "quill/dist/quill.snow.css";
|
import "quill/dist/quill.bubble.css";
|
const toolbarTips = [
|
{Choice:'.ql-bold',title:'加粗'},
|
{Choice:'.ql-italic',title:'倾斜'},
|
{Choice:'.ql-underline',title:'下划线'},
|
{Choice:'.ql-header',title:'段落格式'},
|
{Choice:'.ql-strike',title:'删除线'},
|
{Choice:'.ql-blockquote',title:'块引用'},
|
{Choice:'.ql-code-block',title:'插入代码段'},
|
{Choice:'.ql-size',title:'字体大小'},
|
{Choice:'.ql-list[value="ordered"]',title:'编号列表'},
|
{Choice:'.ql-list[value="bullet"]',title:'项目列表'},
|
{Choice:'.ql-header[value="1"]',title:'h1'},
|
{Choice:'.ql-header[value="2"]',title:'h2'},
|
{Choice:'.ql-align',title:'对齐方式'},
|
{Choice:'.ql-color',title:'字体颜色'},
|
{Choice:'.ql-background',title:'背景颜色'},
|
{Choice:'.ql-image',title:'图像'},
|
{Choice:'.ql-video',title:'视频'},
|
{Choice:'.ql-link',title:'添加链接'},
|
{Choice:'.ql-formula',title:'插入公式'},
|
{Choice:'.ql-clean',title:'清除格式'},
|
{Choice:'.ql-indent[value="-1"]',title:'向左缩进'},
|
{Choice:'.ql-indent[value="+1"]',title:'向右缩进'},
|
{Choice:'.ql-header .ql-picker-label',title:'标题大小'},
|
{Choice:'.ql-header .ql-picker-item[data-value="1"]',title:'标题一'},
|
{Choice:'.ql-header .ql-picker-item[data-value="2"]',title:'标题二'},
|
{Choice:'.ql-header .ql-picker-item[data-value="3"]',title:'标题三'},
|
{Choice:'.ql-header .ql-picker-item[data-value="4"]',title:'标题四'},
|
{Choice:'.ql-header .ql-picker-item[data-value="5"]',title:'标题五'},
|
{Choice:'.ql-header .ql-picker-item[data-value="6"]',title:'标题六'},
|
{Choice:'.ql-header .ql-picker-item:last-child',title:'标准'},
|
{Choice:'.ql-size .ql-picker-item[data-value="small"]',title:'小号'},
|
{Choice:'.ql-size .ql-picker-item[data-value="large"]',title:'大号'},
|
{Choice:'.ql-size .ql-picker-item[data-value="huge"]',title:'超大号'},
|
{Choice:'.ql-size .ql-picker-item:nth-child(2)',title:'标准'},
|
{Choice:'.ql-align .ql-picker-item:first-child',title:'居左对齐'},
|
{Choice:'.ql-align .ql-picker-item[data-value="center"]',title:'居中对齐'},
|
{Choice:'.ql-align .ql-picker-item[data-value="right"]',title:'居右对齐'},
|
{Choice:'.ql-align .ql-picker-item[data-value="justify"]',title:'两端对齐'},
|
{Choice:'.ql-script',title:'角标'},
|
{Choice:'.ql-font',title:'字体'},
|
{Choice:'.ql-direction',title:'文字方向'},
|
];
|
export default {
|
name: "accidentReportDetail",
|
components: { quillEditor },
|
data() {
|
return {
|
id: "",
|
articleForm: {
|
title: "",
|
type: "1",
|
infoSourcesId: "",
|
publishScope: "1",
|
publishContent: ''
|
},
|
typeOptions: [
|
{ label: "服务月报", value: "1" },
|
{ label: "安全月报", value: "2" },
|
{ label: "安全学习", value: "3" },
|
{ label: "规章制度", value: "4" },
|
{ label: "公告通知", value: "5" },
|
{ label: "疫情防控", value: "6" },
|
],
|
rangeOptions: [
|
{ label: "集团", value: "1" },
|
{ label: "分公司", value: "2" },
|
],
|
editorOptions: {},
|
fileList: [],
|
uploadList: {},
|
deptList: [],
|
token: ''
|
};
|
},
|
created() {
|
this.getDept();
|
this.token = localStorage.getItem('mtoken');
|
},
|
mounted() {
|
document.getElementsByClassName('ql-editor')[0].dataset.placeholder = '';
|
toolbarTips.forEach(item => {
|
let tip = document.querySelector('.quill-editor ' + item.Choice);
|
if(tip){
|
tip.setAttribute('title', item.title);
|
}
|
})
|
},
|
activated() {
|
this.fileList = [];
|
this.uploadList = {};
|
this.articleForm = {
|
title: "",
|
type: "1",
|
infoSourcesId: "",
|
publishScope: "1",
|
publishContent: ''
|
};
|
if(this.$route.query.type) this.articleForm.type = this.$route.query.type;
|
const userInfo = JSON.parse(localStorage.getItem('userInfo'));
|
if(userInfo && !this.$route.query.id){
|
this.articleForm.infoSourcesId = userInfo.deptId;
|
}
|
if(this.$route.query.id){
|
this.getArtDetail();
|
}
|
},
|
methods: {
|
getDept(){
|
this.$axios.get(this.$Interface.deptList).then(_res => {
|
this.deptList = _res.data;
|
});
|
},
|
handleRemove(file, fileList){
|
delete this.uploadList[file.uid];
|
},
|
handleSuccess(res, file, fileList){
|
this.uploadList[file.uid] = res.data.id;
|
},
|
getArtDetail(){
|
this.$axios.get(this.$Interface.safetyArticle.detail, {
|
params: {id: this.$route.query.id}
|
}).then(res => {
|
const temp = res.data;
|
temp.type += '';
|
delete temp.fileList;
|
this.articleForm = temp;
|
})
|
},
|
submitArticle(){
|
const temp = [];
|
for(let key in this.uploadList){
|
temp.push(this.uploadList[key])
|
}
|
if(temp.length > 0){
|
this.articleForm.sysOssIds = temp.join(',');
|
}
|
if(!this.articleForm.title || (this.articleForm.title && this.articleForm.title.trim() == '')){
|
this.$message({
|
message: '请输入内容标题！',
|
type: 'warning'
|
})
|
return
|
}
|
if(!this.articleForm.publishContent || (this.articleForm.publishContent && this.articleForm.publishContent.trim() == '')){
|
this.$message({
|
message: '请输入内容！',
|
type: 'warning'
|
})
|
return
|
}
|
if(!this.articleForm.type){
|
this.$message({
|
message: '请选择内容类型！',
|
type: 'warning'
|
})
|
}
|
|
const article = JSON.parse(JSON.stringify(this.articleForm));
|
article.publishContent = encodeURIComponent(article.publishContent);
|
if(Array.isArray(article.infoSourcesId)){
|
article.infoSourcesId = article.infoSourcesId[article.infoSourcesId.length - 1];
|
}
|
|
if(this.$route.query.id){ //修改
|
this.$axios.put(this.$Interface.safetyArticle.update, article).then(res => {
|
this.$message({
|
message: '保存成功！',
|
type: 'success'
|
});
|
this.$router.go(-1);
|
})
|
}else { //新增
|
this.$axios.post(this.$Interface.safetyArticle.add, article).then(res => {
|
this.$message({
|
message: '保存成功！',
|
type: 'success'
|
});
|
this.$router.push('/safetyArticleList');
|
})
|
}
|
}
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
@import url("../../assets/css/common.css");
|
@orange: #1cd1d3;
|
@blue: #3e89d3;
|
.pointer {
|
cursor: pointer;
|
}
|
.page-container {
|
padding: 20px 30px;
|
padding-bottom: 0;
|
.nav {
|
display: flex;
|
font-size: 14px;
|
width: 100%;
|
height: 20px;
|
align-items: center;
|
.nav-icon {
|
width: 18px;
|
margin-left: 11px;
|
flex-shrink: 0;
|
margin-right: 11px;
|
}
|
.nav-content {
|
flex: 1;
|
}
|
}
|
.content {
|
margin-top: 30px;
|
.detail-wrap {
|
width: 96vw;
|
height: calc(100vh - 300px);
|
border: 2px solid #415788;
|
backdrop-filter: blur(2px);
|
margin: auto;
|
position: relative;
|
.title {
|
background: #090f1d;
|
height: 60px;
|
padding: 1px;
|
display: flex;
|
align-items: center;
|
.title-text {
|
margin: 17px 20px;
|
margin-right: 8px;
|
width: 120px;
|
height: 29px;
|
background: #0c1a35;
|
border: 1px solid #47598f;
|
border-radius: 4px;
|
font-size: 14px;
|
line-height: 20px;
|
padding: 5px 10px;
|
text-align: center;
|
}
|
}
|
.icon-close {
|
position: absolute;
|
top: 0;
|
right: -3px;
|
width: 42px;
|
cursor: pointer;
|
}
|
.action-bar {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
color: #fff;
|
font-size: 14px;
|
.action-item:first-child {
|
margin-right: 96px;
|
}
|
.action-item {
|
padding: 8px 30px;
|
border-left: 2px solid;
|
border-right: 2px solid;
|
opacity: 0.8;
|
}
|
.orange {
|
border-color: @orange;
|
background-color: rgba(28, 209, 211, 0.1);
|
}
|
.blue {
|
border-color: @blue;
|
background-color: rgba(62, 137, 211, 0.1);
|
}
|
}
|
}
|
}
|
.form-wrap {
|
padding: 28px 24px;
|
padding-top: 10px;
|
padding-bottom: 0;
|
/deep/input {
|
height: 32px;
|
background: rgba(0, 131, 250, 0.1);
|
border: 1px solid rgba(20, 131, 242, 0.6);
|
border-radius: 0;
|
font-size: 12px;
|
::placeholder {
|
font-size: 12px;
|
}
|
color: #fff !important;
|
}
|
/deep/.el-icon-arrow-up:before {
|
content: "\e78f";
|
}
|
/deep/.el-form-item__label {
|
color: #fff;
|
font-size: 14px;
|
}
|
/deep/.el-icon-date::before {
|
content: "" !important;
|
}
|
/deep/.el-range-editor.el-input__inner {
|
background: none;
|
height: 32px;
|
background: rgba(0, 131, 250, 0.1);
|
border: 1px solid rgba(20, 131, 242, 0.6);
|
border-radius: 0;
|
font-size: 12px;
|
margin-top: 6px;
|
input {
|
border: none;
|
background: none;
|
}
|
.el-range-separator {
|
color: #fff;
|
line-height: 20px;
|
}
|
.el-range__close-icon {
|
line-height: 24px;
|
}
|
}
|
}
|
}
|
/deep/.el-upload-list{
|
display: flex;
|
align-items: center;
|
}
|
</style>
|
|
<style scoped lang="less">
|
.quill-editor {
|
width: 85vw;
|
// background: #fff;
|
line-height: normal;
|
/deep/.ql-toolbar {
|
border: 0px solid rgba(17, 133, 226, 0.4) !important;
|
// background: #fff;
|
}
|
/deep/.ql-container {
|
border: 0px solid rgba(17, 133, 226, 0.4) !important;
|
margin-top: 12px;
|
height: calc(100vh - 680px);
|
background: rgba(60,129,255,0.04);
|
color: #fff;
|
}
|
/deep/.ql-editor.ql-blank::before {
|
content: "请输入内容";
|
color: #fff;
|
}
|
}
|
/deep/.el-upload .action-bar {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
color: #fff;
|
font-size: 14px;
|
.action-item:first-child {
|
margin-right: 30px!important;
|
}
|
.action-item {
|
padding: 0 30px!important;
|
border-left: 2px solid;
|
border-right: 2px solid;
|
opacity: 0.8;
|
height: 37px;
|
line-height: 37px;
|
}
|
}
|
</style>
|
<style lang="less">
|
.page-article-edit{
|
.ql-snow .ql-stroke{
|
stroke: #fff;
|
}
|
.ql-snow .ql-picker{
|
color: #fff;
|
}
|
|
.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill{
|
fill: #fff;
|
}
|
|
.ql-snow .ql-picker-item.ql-selected .ql-stroke{
|
stroke: #06c!important;
|
}
|
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{
|
border-color: rgba(20, 131, 242, 0.6);
|
}
|
.ql-snow .ql-picker-options{
|
background-color: #06203f !important;
|
border-color: rgba(20, 131, 242, 0.6)!important;
|
color: #ffffff;
|
}
|
}
|
</style>
|
