c46a339c by 任超
2 parents 58bf119e 68c6b9ef
......@@ -22,6 +22,7 @@
"normalize.css": "7.0.0",
"nprogress": "0.2.0",
"vue": "2.6.10",
"vue-quill-editor": "^3.0.6",
"vue-router": "3.0.2",
"vue-seamless-scroll": "^1.1.23",
"vuex": "3.1.0"
......
......@@ -27,6 +27,13 @@ import store from './store'
import router from './router'
import _ from 'lodash'
import VueQuillEditor from 'vue-quill-editor'//调用编辑器
// 样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
import * as filters from './filters' // global filters
import './permission' // permission control
Vue.use(Element, { size: 'small', zIndex: 1000 })
......
<template>
<dialogBox title="新增系统通知" @submitForm="submitForm" saveButton="保存" :isFullscreen="false" width="50%"
<dialogBox title="新增系统通知" @submitForm="submitForm" saveButton="保存" :isFullscreen="false" width="60%"
@closeDialog="closeDialog" v-model="value">
<el-form ref="ruleForm" :model="ruleForm" label-width="100px" :rules="rules">
<el-row>
......@@ -10,16 +10,33 @@
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="通知来源:" prop="noticeSource">
<el-input v-model="ruleForm.noticeSource"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="通知内容:" prop="noticeContent">
<el-input v-model="ruleForm.noticeContent" type="textarea" :rows="16"></el-input>
<quill-editor
v-model="ruleForm.noticeContent"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)"
@ready="onEditorReady($event)"
>
</quill-editor>
<!-- <el-input v-model="ruleForm.noticeContent" type="textarea" :rows="16"></el-input> -->
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="附件:" prop="noticeFileUrl">
<el-upload action="" :file-list="fileList" multiple :auto-upload="false" :limit="1"
<el-upload action="" multiple :auto-upload="false" :limit="1"
:on-change="handleChange" :before-upload="beforeUpload">
<el-button icon="el-icon-upload" type="primary">上传</el-button>
<div slot="tip" class="el-upload__tip">文件大小不超过20MB</div>
......@@ -27,6 +44,13 @@
</el-form-item>
</el-col>
</el-row>
<div v-show="false">
<el-upload action="" multiple :auto-upload="false"
:on-change="RichTexthandleChange" :before-upload="beforeUpload" class="richUpload">
<el-button icon="el-icon-upload" type="primary">上传</el-button>
<div slot="tip" class="el-upload__tip">文件大小不超过20MB</div>
</el-upload>
</div>
</el-form>
</dialogBox>
</template>
......@@ -34,16 +58,19 @@
<script>
import { addSysNotice } from "@/api/notice.js"
import { upload } from "@/api/system.js"
import { quillEditor } from "vue-quill-editor";
export default {
props: {
value: { type: Boolean, default: false },
},
components: { quillEditor },
data () {
return {
ruleForm: {
noticeTitle: '',
noticeContent: '',
noticeFileUrl: '',
noticeSource: '',
noticeType: '1'
},
rules: {
......@@ -52,11 +79,69 @@ export default {
],
noticeContent: [
{ required: true, message: '请输入通知内容', trigger: 'blur' }
],
noticeSource: [
{ required: true, message: '请输入通知来源', trigger: 'blur' }
]
},
// 富文本编辑器配置
editorOption: {
theme: "snow", // or 'bubble'
modules: {
toolbar: {
container: [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
["blockquote", "code-block"], // 引用 代码块
[{ header: 1 }, { header: 2 }], // 1、2 级标题
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
[{ script: "sub" }, { script: "super" }], // 上标/下标
[{ indent: "-1" }, { indent: "+1" }], // 缩进
[{ direction: "rtl" }], // 文本方向
[{ size: ['small', false, 'large', 'huge'] }], // 字体大小
[{ header: [1, 2, 3, 4, 5, 6] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
// [{ font: ['songti'] }], // 字体种类
[{ align: [] }], // 对齐方式
["clean"], // 清除文本格式
["image", "video"], // 链接、图片、视频
],
handlers: {
image: function(value) {
if (value) {
// 用upload的点击事件代替文本编辑器的图片上传事件
document.querySelector('.richUpload input').click();
} else {
this.quill.format('image', false);
}
}
}
}
},
placeholder: "请输入正文",
},
}
},
mounted() {
// 自定义粘贴图片功能
let quill = this.$refs.myQuillEditor.quill;
quill.root.addEventListener("paste",evt => {
console.log(1111);
if (evt.clipboardData && evt.clipboardData.files &&evt.clipboardData.files.length) {
console.log(2222);
evt.preventDefault();
[].forEach.call(evt.clipboardData.files, file => {
console.log(33333);
if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
return;
}
console.log(4444);
this.RichTexthandleChange(File);
});
}
},
false
);
},
methods: {
submitForm () {
let that = this;
......@@ -91,6 +176,7 @@ export default {
beforeUpload (file) {
return true
},
//附件上传事件
async handleChange (file) {
var formdata = new FormData();
formdata.append("file", file.raw);
......@@ -98,9 +184,53 @@ export default {
this.ruleForm.noticeFileUrl = res.message
})
},
//富文本图片上传事件
async RichTexthandleChange (file) {
let that = this;
var formdata = new FormData();
formdata.append("file", file.raw);
upload(formdata).then(res => {
//editor对象
const quill = that.$refs.myQuillEditor.quill;
// 如果上传成功
// 获取光标所在位置
const length = quill.selection.savedRange.index;
// 插入图片
quill.insertEmbed(length, 'image', res.message);
// 调整光标到最后
quill.setSelection(length + 1);
//that.quillUpdateImg = false;
})
},
onSubmit() {
//console.log("submit!");
},
// 失去焦点事件
onEditorBlur(quill) {
//console.log("editor blur!", quill);
},
// 获得焦点事件
onEditorFocus(quill) {
//console.log("editor focus!", quill);
},
// 准备富文本编辑器
onEditorReady(quill) {
//console.log("editor ready!", quill);
},
// 内容改变事件
onEditorChange({ quill, html, text }) {
//console.log("editor change!", quill, html, text);
//this.content = html;
},
}
}
</script>
<style scoped lang="scss">
// .ql-editor{
// height:500px;
// }
/deep/.ql-editor {
padding: 0px;
height: 500px;
}
</style>
\ No newline at end of file
......
......@@ -9,7 +9,14 @@
<el-row :gutter="8">
<el-col :span="24" class="margin-top-middle">
通知内容:
<el-input type="textarea" :rows="20" v-model="formData.item.noticeContent"></el-input>
<!-- <span v-html="formData.item.noticeContent"></span> -->
<quill-editor class="ql-editor"
v-model="formData.item.noticeContent"
ref="myQuillEditor"
:options="editorOption"
>
</quill-editor>
<!-- <el-input type="textarea" :rows="20" v-model="formData.item.noticeContent"></el-input> -->
</el-col>
</el-row>
<el-row :gutter="8">
......@@ -21,9 +28,16 @@
</div>
</template>
<script>
import { quillEditor } from "vue-quill-editor";
export default {
components: { quillEditor },
data () {
return {
// 富文本编辑器配置
editorOption: {
theme: "snow", // or 'bubble'
placeholder: "请输入正文",
},
};
},
components: {},
......@@ -49,4 +63,7 @@ export default {
.margin-top-middle {
margin-top: 10px
}
/deep/.ql-editor {
padding: 0px;
}
</style>
\ No newline at end of file
......
......@@ -59,6 +59,11 @@ class data extends filter {
}
},
{
prop: "creater",
label: "操作人",
width: '100'
},
{
prop: "createtime",
label: "报错时间",
width: '200'
......