c46a339c by 任超
2 parents 58bf119e 68c6b9ef
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
22 "normalize.css": "7.0.0", 22 "normalize.css": "7.0.0",
23 "nprogress": "0.2.0", 23 "nprogress": "0.2.0",
24 "vue": "2.6.10", 24 "vue": "2.6.10",
25 "vue-quill-editor": "^3.0.6",
25 "vue-router": "3.0.2", 26 "vue-router": "3.0.2",
26 "vue-seamless-scroll": "^1.1.23", 27 "vue-seamless-scroll": "^1.1.23",
27 "vuex": "3.1.0" 28 "vuex": "3.1.0"
......
...@@ -27,6 +27,13 @@ import store from './store' ...@@ -27,6 +27,13 @@ import store from './store'
27 import router from './router' 27 import router from './router'
28 import _ from 'lodash' 28 import _ from 'lodash'
29 29
30 import VueQuillEditor from 'vue-quill-editor'//调用编辑器
31 // 样式
32 import 'quill/dist/quill.core.css'
33 import 'quill/dist/quill.snow.css'
34 import 'quill/dist/quill.bubble.css'
35 Vue.use(VueQuillEditor)
36
30 import * as filters from './filters' // global filters 37 import * as filters from './filters' // global filters
31 import './permission' // permission control 38 import './permission' // permission control
32 Vue.use(Element, { size: 'small', zIndex: 1000 }) 39 Vue.use(Element, { size: 'small', zIndex: 1000 })
......
1 <template> 1 <template>
2 <dialogBox title="新增系统通知" @submitForm="submitForm" saveButton="保存" :isFullscreen="false" width="50%" 2 <dialogBox title="新增系统通知" @submitForm="submitForm" saveButton="保存" :isFullscreen="false" width="60%"
3 @closeDialog="closeDialog" v-model="value"> 3 @closeDialog="closeDialog" v-model="value">
4 <el-form ref="ruleForm" :model="ruleForm" label-width="100px" :rules="rules"> 4 <el-form ref="ruleForm" :model="ruleForm" label-width="100px" :rules="rules">
5 <el-row> 5 <el-row>
...@@ -10,16 +10,33 @@ ...@@ -10,16 +10,33 @@
10 </el-col> 10 </el-col>
11 </el-row> 11 </el-row>
12 <el-row> 12 <el-row>
13 <el-col :span="12">
14 <el-form-item label="通知来源:" prop="noticeSource">
15 <el-input v-model="ruleForm.noticeSource"></el-input>
16 </el-form-item>
17 </el-col>
18 </el-row>
19 <el-row>
13 <el-col :span="24"> 20 <el-col :span="24">
14 <el-form-item label="通知内容:" prop="noticeContent"> 21 <el-form-item label="通知内容:" prop="noticeContent">
15 <el-input v-model="ruleForm.noticeContent" type="textarea" :rows="16"></el-input> 22 <quill-editor
23 v-model="ruleForm.noticeContent"
24 ref="myQuillEditor"
25 :options="editorOption"
26 @blur="onEditorBlur($event)"
27 @focus="onEditorFocus($event)"
28 @change="onEditorChange($event)"
29 @ready="onEditorReady($event)"
30 >
31 </quill-editor>
32 <!-- <el-input v-model="ruleForm.noticeContent" type="textarea" :rows="16"></el-input> -->
16 </el-form-item> 33 </el-form-item>
17 </el-col> 34 </el-col>
18 </el-row> 35 </el-row>
19 <el-row> 36 <el-row>
20 <el-col :span="8"> 37 <el-col :span="8">
21 <el-form-item label="附件:" prop="noticeFileUrl"> 38 <el-form-item label="附件:" prop="noticeFileUrl">
22 <el-upload action="" :file-list="fileList" multiple :auto-upload="false" :limit="1" 39 <el-upload action="" multiple :auto-upload="false" :limit="1"
23 :on-change="handleChange" :before-upload="beforeUpload"> 40 :on-change="handleChange" :before-upload="beforeUpload">
24 <el-button icon="el-icon-upload" type="primary">上传</el-button> 41 <el-button icon="el-icon-upload" type="primary">上传</el-button>
25 <div slot="tip" class="el-upload__tip">文件大小不超过20MB</div> 42 <div slot="tip" class="el-upload__tip">文件大小不超过20MB</div>
...@@ -27,6 +44,13 @@ ...@@ -27,6 +44,13 @@
27 </el-form-item> 44 </el-form-item>
28 </el-col> 45 </el-col>
29 </el-row> 46 </el-row>
47 <div v-show="false">
48 <el-upload action="" multiple :auto-upload="false"
49 :on-change="RichTexthandleChange" :before-upload="beforeUpload" class="richUpload">
50 <el-button icon="el-icon-upload" type="primary">上传</el-button>
51 <div slot="tip" class="el-upload__tip">文件大小不超过20MB</div>
52 </el-upload>
53 </div>
30 </el-form> 54 </el-form>
31 </dialogBox> 55 </dialogBox>
32 </template> 56 </template>
...@@ -34,16 +58,19 @@ ...@@ -34,16 +58,19 @@
34 <script> 58 <script>
35 import { addSysNotice } from "@/api/notice.js" 59 import { addSysNotice } from "@/api/notice.js"
36 import { upload } from "@/api/system.js" 60 import { upload } from "@/api/system.js"
61 import { quillEditor } from "vue-quill-editor";
37 export default { 62 export default {
38 props: { 63 props: {
39 value: { type: Boolean, default: false }, 64 value: { type: Boolean, default: false },
40 }, 65 },
66 components: { quillEditor },
41 data () { 67 data () {
42 return { 68 return {
43 ruleForm: { 69 ruleForm: {
44 noticeTitle: '', 70 noticeTitle: '',
45 noticeContent: '', 71 noticeContent: '',
46 noticeFileUrl: '', 72 noticeFileUrl: '',
73 noticeSource: '',
47 noticeType: '1' 74 noticeType: '1'
48 }, 75 },
49 rules: { 76 rules: {
...@@ -52,11 +79,69 @@ export default { ...@@ -52,11 +79,69 @@ export default {
52 ], 79 ],
53 noticeContent: [ 80 noticeContent: [
54 { required: true, message: '请输入通知内容', trigger: 'blur' } 81 { required: true, message: '请输入通知内容', trigger: 'blur' }
82 ],
83 noticeSource: [
84 { required: true, message: '请输入通知来源', trigger: 'blur' }
55 ] 85 ]
56 }, 86 },
87 // 富文本编辑器配置
88 editorOption: {
89 theme: "snow", // or 'bubble'
90 modules: {
91 toolbar: {
92 container: [
93 ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
94 ["blockquote", "code-block"], // 引用 代码块
95 [{ header: 1 }, { header: 2 }], // 1、2 级标题
96 [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
97 [{ script: "sub" }, { script: "super" }], // 上标/下标
98 [{ indent: "-1" }, { indent: "+1" }], // 缩进
99 [{ direction: "rtl" }], // 文本方向
100 [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
101 [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
102 [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
103 // [{ font: ['songti'] }], // 字体种类
104 [{ align: [] }], // 对齐方式
105 ["clean"], // 清除文本格式
106 ["image", "video"], // 链接、图片、视频
107 ],
108 handlers: {
109 image: function(value) {
110 if (value) {
111 // 用upload的点击事件代替文本编辑器的图片上传事件
112 document.querySelector('.richUpload input').click();
113 } else {
114 this.quill.format('image', false);
115 }
116 }
117 }
57 } 118 }
58 }, 119 },
59 120 placeholder: "请输入正文",
121 },
122 }
123 },
124 mounted() {
125 // 自定义粘贴图片功能
126 let quill = this.$refs.myQuillEditor.quill;
127 quill.root.addEventListener("paste",evt => {
128 console.log(1111);
129 if (evt.clipboardData && evt.clipboardData.files &&evt.clipboardData.files.length) {
130 console.log(2222);
131 evt.preventDefault();
132 [].forEach.call(evt.clipboardData.files, file => {
133 console.log(33333);
134 if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
135 return;
136 }
137 console.log(4444);
138 this.RichTexthandleChange(File);
139 });
140 }
141 },
142 false
143 );
144 },
60 methods: { 145 methods: {
61 submitForm () { 146 submitForm () {
62 let that = this; 147 let that = this;
...@@ -91,6 +176,7 @@ export default { ...@@ -91,6 +176,7 @@ export default {
91 beforeUpload (file) { 176 beforeUpload (file) {
92 return true 177 return true
93 }, 178 },
179 //附件上传事件
94 async handleChange (file) { 180 async handleChange (file) {
95 var formdata = new FormData(); 181 var formdata = new FormData();
96 formdata.append("file", file.raw); 182 formdata.append("file", file.raw);
...@@ -98,9 +184,53 @@ export default { ...@@ -98,9 +184,53 @@ export default {
98 this.ruleForm.noticeFileUrl = res.message 184 this.ruleForm.noticeFileUrl = res.message
99 }) 185 })
100 }, 186 },
187 //富文本图片上传事件
188 async RichTexthandleChange (file) {
189 let that = this;
190 var formdata = new FormData();
191 formdata.append("file", file.raw);
192 upload(formdata).then(res => {
193 //editor对象
194 const quill = that.$refs.myQuillEditor.quill;
195 // 如果上传成功
196 // 获取光标所在位置
197 const length = quill.selection.savedRange.index;
198 // 插入图片
199 quill.insertEmbed(length, 'image', res.message);
200 // 调整光标到最后
201 quill.setSelection(length + 1);
202 //that.quillUpdateImg = false;
203 })
204 },
205 onSubmit() {
206 //console.log("submit!");
207 },
208 // 失去焦点事件
209 onEditorBlur(quill) {
210 //console.log("editor blur!", quill);
211 },
212 // 获得焦点事件
213 onEditorFocus(quill) {
214 //console.log("editor focus!", quill);
215 },
216 // 准备富文本编辑器
217 onEditorReady(quill) {
218 //console.log("editor ready!", quill);
219 },
220 // 内容改变事件
221 onEditorChange({ quill, html, text }) {
222 //console.log("editor change!", quill, html, text);
223 //this.content = html;
224 },
101 } 225 }
102 } 226 }
103 </script> 227 </script>
104 <style scoped lang="scss"> 228 <style scoped lang="scss">
105 229 // .ql-editor{
230 // height:500px;
231 // }
232 /deep/.ql-editor {
233 padding: 0px;
234 height: 500px;
235 }
106 </style> 236 </style>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -9,7 +9,14 @@ ...@@ -9,7 +9,14 @@
9 <el-row :gutter="8"> 9 <el-row :gutter="8">
10 <el-col :span="24" class="margin-top-middle"> 10 <el-col :span="24" class="margin-top-middle">
11 通知内容: 11 通知内容:
12 <el-input type="textarea" :rows="20" v-model="formData.item.noticeContent"></el-input> 12 <!-- <span v-html="formData.item.noticeContent"></span> -->
13 <quill-editor class="ql-editor"
14 v-model="formData.item.noticeContent"
15 ref="myQuillEditor"
16 :options="editorOption"
17 >
18 </quill-editor>
19 <!-- <el-input type="textarea" :rows="20" v-model="formData.item.noticeContent"></el-input> -->
13 </el-col> 20 </el-col>
14 </el-row> 21 </el-row>
15 <el-row :gutter="8"> 22 <el-row :gutter="8">
...@@ -21,9 +28,16 @@ ...@@ -21,9 +28,16 @@
21 </div> 28 </div>
22 </template> 29 </template>
23 <script> 30 <script>
31 import { quillEditor } from "vue-quill-editor";
24 export default { 32 export default {
33 components: { quillEditor },
25 data () { 34 data () {
26 return { 35 return {
36 // 富文本编辑器配置
37 editorOption: {
38 theme: "snow", // or 'bubble'
39 placeholder: "请输入正文",
40 },
27 }; 41 };
28 }, 42 },
29 components: {}, 43 components: {},
...@@ -49,4 +63,7 @@ export default { ...@@ -49,4 +63,7 @@ export default {
49 .margin-top-middle { 63 .margin-top-middle {
50 margin-top: 10px 64 margin-top: 10px
51 } 65 }
66 /deep/.ql-editor {
67 padding: 0px;
68 }
52 </style> 69 </style>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -59,6 +59,11 @@ class data extends filter { ...@@ -59,6 +59,11 @@ class data extends filter {
59 } 59 }
60 }, 60 },
61 { 61 {
62 prop: "creater",
63 label: "操作人",
64 width: '100'
65 },
66 {
62 prop: "createtime", 67 prop: "createtime",
63 label: "报错时间", 68 label: "报错时间",
64 width: '200' 69 width: '200'
......