Merge branch 'master' of http://yun.pashanhoo.com:9090/bdc/bdcdj-web
Showing
5 changed files
with
166 additions
and
6 deletions
... | @@ -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' | ... | ... |
-
Please register or sign in to post a comment