Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
7d1060f8 by renchao@pashanhoo.com
Options

style:系统通知

1 parent bbdd382c
Inline Side-by-side
Showing 2 changed files with 313 additions and 300 deletions
...@@ -54,317 +54,318 @@ ...@@ -54,317 +54,318 @@
54 </el-form> 54 </el-form>
55 </template> 55 </template>
56 <script> 56 <script>
57 import { addSysNotice, updateSysNotice } from "@/api/sysNotice.js"; 57 import { addSysNotice, updateSysNotice } from "@/api/sysNotice.js";
58 import { upload } from "@/api/file.js"; 58 import { upload } from "@/api/file.js";
59 import { quillEditor } from "vue-quill-editor"; 59 import store from '@/store'
60 export default { 60 import { quillEditor } from "vue-quill-editor";
61 props: { 61 export default {
62 formData: { 62 props: {
63 type: Object, 63 formData: {
64 default: () => { } 64 type: Object,
65 } 65 default: () => { }
66 }, 66 }
67 components: { quillEditor }, 67 },
68 data () { 68 components: { quillEditor },
69 return { 69 data () {
70 ruleForm: { 70 return {
71 noticeTitle: "", 71 ruleForm: {
72 noticeContent: "", 72 noticeTitle: "",
73 noticeFileUrl: "", 73 noticeContent: "",
74 noticeSource: "", 74 noticeFileUrl: "",
75 validDays: 14, 75 noticeSource: "",
76 noticeType: "1" 76 validDays: 14,
77 }, 77 noticeType: "1"
78 rules: { 78 },
79 noticeTitle: [ 79 rules: {
80 { required: true, message: "请输入通知标题", trigger: "blur" } 80 noticeTitle: [
81 ], 81 { required: true, message: "请输入通知标题", trigger: "blur" }
82 noticeContent: [ 82 ],
83 { required: true, message: "请输入通知内容", trigger: "blur" } 83 noticeContent: [
84 ], 84 { required: true, message: "请输入通知内容", trigger: "blur" }
85 noticeSource: [ 85 ],
86 { required: true, message: "请输入通知来源", trigger: "blur" } 86 noticeSource: [
87 ] 87 { required: true, message: "请输入通知来源", trigger: "blur" }
88 }, 88 ]
89 // 富文本编辑器配置 89 },
90 editorOption: { 90 // 富文本编辑器配置
91 theme: "snow", // or 'bubble' 91 editorOption: {
92 modules: { 92 theme: "snow", // or 'bubble'
93 toolbar: { 93 modules: {
94 container: [ 94 toolbar: {
95 ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 95 container: [
96 ["blockquote", "code-block"], // 引用 代码块 96 ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
97 [{ header: 1 }, { header: 2 }], // 1、2 级标题 97 ["blockquote", "code-block"], // 引用 代码块
98 [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表 98 [{ header: 1 }, { header: 2 }], // 1、2 级标题
99 [{ script: "sub" }, { script: "super" }], // 上标/下标 99 [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
100 [{ indent: "-1" }, { indent: "+1" }], // 缩进 100 [{ script: "sub" }, { script: "super" }], // 上标/下标
101 [{ direction: "rtl" }], // 文本方向 101 [{ indent: "-1" }, { indent: "+1" }], // 缩进
102 [{ size: ["small", false, "large", "huge"] }], // 字体大小 102 [{ direction: "rtl" }], // 文本方向
103 [{ header: [1, 2, 3, 4, 5, 6] }], // 标题 103 [{ size: ["small", false, "large", "huge"] }], // 字体大小
104 [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色 104 [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
105 // [{ font: ['songti'] }], // 字体种类 105 [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
106 [{ align: [] }], // 对齐方式 106 // [{ font: ['songti'] }], // 字体种类
107 ["clean"], // 清除文本格式 107 [{ align: [] }], // 对齐方式
108 ["image", "video"] // 链接、图片、视频 108 ["clean"], // 清除文本格式
109 ], 109 ["image", "video"] // 链接、图片、视频
110 handlers: { 110 ],
111 image: function (value) { 111 handlers: {
112 if (value) { 112 image: function (value) {
113 // 用upload的点击事件代替文本编辑器的图片上传事件 113 if (value) {
114 document.querySelector(".richUpload input").click(); 114 // 用upload的点击事件代替文本编辑器的图片上传事件
115 } else { 115 document.querySelector(".richUpload input").click();
116 this.quill.format("image", false); 116 } else {
117 this.quill.format("image", false);
118 }
117 } 119 }
118 } 120 }
119 } 121 }
120 } 122 },
121 }, 123 placeholder: "请输入正文"
122 placeholder: "请输入正文" 124 }
125 };
126 },
127 mounted () {
128 this.$nextTick(() => {
129 //创建富文本粘贴事件监听
130 let quill = this.$refs.myQuillEditor.quill;
131 this.$forceUpdate();
132 quill.root.addEventListener(
133 "paste",
134 evt => {
135 if (
136 evt.clipboardData &&
137 evt.clipboardData.files &&
138 evt.clipboardData.files.length
139 ) {
140 evt.preventDefault();
141 [].forEach.call(evt.clipboardData.files, file => {
142 if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
143 return;
144 }
145 that.clipboardPictureChange(file);
146 });
147 }
148 },
149 false
150 )
151 })
152 if (!this.formData.isButtonFlag) {
153 this.getDetailInfo(this.formData)
123 } 154 }
124 }; 155 if (this.formData.edit) {
125 }, 156 this.getDetailInfo(this.formData)
126 mounted () { 157 }
127 this.$nextTick(() => { 158 },
128 //创建富文本粘贴事件监听 159 methods: {
129 let quill = this.$refs.myQuillEditor.quill; 160 /**
130 this.$forceUpdate(); 161 * @description: submitForm
131 quill.root.addEventListener( 162 * @author: renchao
132 "paste", 163 */
133 evt => { 164 submitForm () {
134 if ( 165 let that = this;
135 evt.clipboardData && 166 that.$refs.ruleForm.validate(valid => {
136 evt.clipboardData.files && 167 if (valid) {
137 evt.clipboardData.files.length 168 if (that.ruleForm.bsmNotice) {
138 ) { 169 that.editNotice();
139 evt.preventDefault(); 170 } else {
140 [].forEach.call(evt.clipboardData.files, file => { 171 that.addNotice();
141 if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) { 172 }
142 return; 173 } else {
143 } 174 return false;
144 that.clipboardPictureChange(file);
145 });
146 } 175 }
147 }, 176 });
148 false 177 },
149 ) 178 //关闭窗口
150 }) 179 /**
151 if (!this.formData.isButtonFlag) { 180 * @description: 关闭窗口
152 this.getDetailInfo(this.formData) 181 * @author: renchao
153 } 182 */
154 if (this.formData.edit) { 183 closeDialog () {
155 this.getDetailInfo(this.formData) 184 this.$popupCacel()
156 } 185 this.resetRuleForm();
157 }, 186 },
158 methods: { 187 //新增通知
159 /** 188 /**
160 * @description: submitForm 189 * @description: 新增通知
161 * @author: renchao 190 * @author: renchao
162 */ 191 */
163 submitForm () { 192 addNotice () {
164 let that = this; 193 // 解决报错
165 that.$refs.ruleForm.validate(valid => { 194 // this.ruleForm.noticeType = "1"
166 if (valid) { 195 addSysNotice(this.ruleForm).then(res => {
167 if (that.ruleForm.bsmNotice) { 196 if (res.code == 200) {
168 that.editNotice(); 197 this.$message.success("保存成功");
198 store.dispatch("user/refreshPage", true);
199 this.$popupCacel()
200 this.resetRuleForm();
169 } else { 201 } else {
170 that.addNotice(); 202 this.$message.error(res.message);
171 } 203 }
172 } else { 204 });
173 return false; 205 },
174 } 206 //编辑通知
175 }); 207 /**
176 }, 208 * @description: 编辑通知
177 //关闭窗口 209 * @author: renchao
178 /** 210 */
179 * @description: 关闭窗口 211 editNotice () {
180 * @author: renchao 212 updateSysNotice(this.ruleForm).then(res => {
181 */ 213 if (res.code == 200) {
182 closeDialog () { 214 this.$message.success("编辑成功");
183 this.$popupCacel() 215 this.$popupCacel()
184 this.resetRuleForm(); 216 this.resetRuleForm();
185 }, 217 store.dispatch("user/refreshPage", true);
186 //新增通知 218 } else {
187 /** 219 this.$message.error(res.message);
188 * @description: 新增通知 220 }
189 * @author: renchao 221 });
190 */ 222 },
191 addNotice () { 223 /**
192 // 解决报错 224 * @description: 重置表单
193 // this.ruleForm.noticeType = "1" 225 * @author: renchao
194 addSysNotice(this.ruleForm).then(res => { 226 */
195 if (res.code == 200) { 227 resetRuleForm () {
196 this.$message.success("保存成功"); 228 this.ruleForm = {
197 this.$popupCacel() 229 noticeTitle: "",
198 this.resetRuleForm(); 230 noticeContent: "",
199 this.$parent.queryClick(); 231 noticeFileUrl: "",
200 } else { 232 noticeSource: "",
201 this.$message.error(res.message); 233 validDays: 14,
202 } 234 noticeType: "1"
203 });
204 },
205 //编辑通知
206 /**
207 * @description: 编辑通知
208 * @author: renchao
209 */
210 editNotice () {
211 updateSysNotice(this.ruleForm).then(res => {
212 if (res.code == 200) {
213 this.$message.success("编辑成功");
214 this.$popupCacel()
215 this.resetRuleForm();
216 this.$parent.queryClick();
217 } else {
218 this.$message.error(res.message);
219 } 235 }
220 }); 236 },
221 }, 237 /**
222 //重置表单 238 * @description: beforeUpload
223 /** 239 * @param {*} file
224 * @description: 重置表单 240 * @author: renchao
225 * @author: renchao 241 */
226 */ 242 beforeUpload (file) {
227 resetRuleForm () { 243 return true;
228 this.ruleForm = { 244 },
229 noticeTitle: "", 245 //附件上传事件
230 noticeContent: "", 246 /**
231 noticeFileUrl: "", 247 * @description: 附件上传事件
232 noticeSource: "", 248 * @param {*} file
233 validDays: 14, 249 * @author: renchao
234 noticeType: "1" 250 */
251 async handleChange (file) {
252 var formdata = new FormData();
253 formdata.append("file", file.raw);
254 upload(formdata).then(res => {
255 this.ruleForm.noticeFileUrl = res.message;
256 });
257 },
258 //富文本图片上传事件
259 /**
260 * @description: 富文本图片上传事件
261 * @param {*} file
262 * @author: renchao
263 */
264 RichTexthandleChange (file) {
265 this.uploadPicture(file.raw)
266 },
267 //图片粘贴事件
268 /**
269 * @description: 图片粘贴事件
270 * @param {*} file
271 * @author: renchao
272 */
273 clipboardPictureChange (file) {
274 this.uploadPicture(file)
275 },
276 /**
277 * @description: getDetailInfo
278 * @param {*} item
279 * @author: renchao
280 */
281 getDetailInfo (item) {
282 this.ruleForm = item
283 },
284 /**
285 * @description: uploadPicture
286 * @param {*} file
287 * @author: renchao
288 */
289 uploadPicture (file) {
290 let that = this;
291 var formdata = new FormData();
292 formdata.append("file", file);
293 upload(formdata).then(res => {
294 //editor对象
295 const quill = that.$refs.myQuillEditor.quill;
296 // 如果上传成功
297 // 获取光标所在位置
298 const length = quill.selection.savedRange.index;
299 // 插入图片
300 quill.insertEmbed(length, "image", res.message);
301 // 调整光标到最后
302 quill.setSelection(length + 1);
303 });
304 },
305 /**
306 * @description: onSubmit
307 * @author: renchao
308 */
309 onSubmit () {
310 //console.log("submit!");
311 },
312 // 失去焦点事件
313 /**
314 * @description: 失去焦点事件
315 * @param {*} quill
316 * @author: renchao
317 */
318 onEditorBlur (quill) {
319 //console.log("editor blur!", quill);
320 },
321 // 获得焦点事件
322 /**
323 * @description: 获得焦点事件
324 * @param {*} quill
325 * @author: renchao
326 */
327 onEditorFocus (quill) {
328 //console.log("editor focus!", quill);
329 },
330 // 准备富文本编辑器
331 /**
332 * @description: 准备富文本编辑器
333 * @param {*} quill
334 * @author: renchao
335 */
336 onEditorReady (quill) {
337 //console.log("editor ready!", quill);
338 },
339 // 内容改变事件
340 /**
341 * @description: 内容改变事件
342 * @param {*} quill
343 * @param {*} html
344 * @param {*} text
345 * @author: renchao
346 */
347 onEditorChange ({ quill, html, text }) {
348 //console.log("editor change!", quill, html, text);
349 //this.content = html;
235 } 350 }
236 },
237 /**
238 * @description: beforeUpload
239 * @param {*} file
240 * @author: renchao
241 */
242 beforeUpload (file) {
243 return true;
244 },
245 //附件上传事件
246 /**
247 * @description: 附件上传事件
248 * @param {*} file
249 * @author: renchao
250 */
251 async handleChange (file) {
252 var formdata = new FormData();
253 formdata.append("file", file.raw);
254 upload(formdata).then(res => {
255 this.ruleForm.noticeFileUrl = res.message;
256 });
257 },
258 //富文本图片上传事件
259 /**
260 * @description: 富文本图片上传事件
261 * @param {*} file
262 * @author: renchao
263 */
264 RichTexthandleChange (file) {
265 this.uploadPicture(file.raw)
266 },
267 //图片粘贴事件
268 /**
269 * @description: 图片粘贴事件
270 * @param {*} file
271 * @author: renchao
272 */
273 clipboardPictureChange (file) {
274 this.uploadPicture(file)
275 },
276 /**
277 * @description: getDetailInfo
278 * @param {*} item
279 * @author: renchao
280 */
281 getDetailInfo (item) {
282 this.ruleForm = item
283 },
284 /**
285 * @description: uploadPicture
286 * @param {*} file
287 * @author: renchao
288 */
289 uploadPicture (file) {
290 let that = this;
291 var formdata = new FormData();
292 formdata.append("file", file);
293 upload(formdata).then(res => {
294 //editor对象
295 const quill = that.$refs.myQuillEditor.quill;
296 // 如果上传成功
297 // 获取光标所在位置
298 const length = quill.selection.savedRange.index;
299 // 插入图片
300 quill.insertEmbed(length, "image", res.message);
301 // 调整光标到最后
302 quill.setSelection(length + 1);
303 });
304 },
305 /**
306 * @description: onSubmit
307 * @author: renchao
308 */
309 onSubmit () {
310 //console.log("submit!");
311 },
312 // 失去焦点事件
313 /**
314 * @description: 失去焦点事件
315 * @param {*} quill
316 * @author: renchao
317 */
318 onEditorBlur (quill) {
319 //console.log("editor blur!", quill);
320 },
321 // 获得焦点事件
322 /**
323 * @description: 获得焦点事件
324 * @param {*} quill
325 * @author: renchao
326 */
327 onEditorFocus (quill) {
328 //console.log("editor focus!", quill);
329 },
330 // 准备富文本编辑器
331 /**
332 * @description: 准备富文本编辑器
333 * @param {*} quill
334 * @author: renchao
335 */
336 onEditorReady (quill) {
337 //console.log("editor ready!", quill);
338 },
339 // 内容改变事件
340 /**
341 * @description: 内容改变事件
342 * @param {*} quill
343 * @param {*} html
344 * @param {*} text
345 * @author: renchao
346 */
347 onEditorChange ({ quill, html, text }) {
348 //console.log("editor change!", quill, html, text);
349 //this.content = html;
350 } 351 }
351 } 352 };
352 };
353 </script> 353 </script>
354 <style scoped lang="scss"> 354 <style scoped lang="scss">
355 @import "~@/styles/dialogBoxheader.scss"; 355 @import "~@/styles/dialogBoxheader.scss";
356 356
357 .quill-editor { 357 .quill-editor {
358 padding: 0; 358 padding: 0;
359 } 359 }
360 360
361 .ql-editor { 361 .ql-editor {
362 height: auto !important; 362 height: auto !important;
363 } 363 }
364 364
365 /deep/.ql-container { 365 /deep/.ql-container {
366 padding: 0; 366 padding: 0;
367 max-height: 400px; 367 max-height: 400px;
368 min-height: 160px; 368 min-height: 160px;
369 overflow-y: scroll; 369 overflow-y: scroll;
370 }</style> 370 }
371 </style>
......
...@@ -38,6 +38,7 @@ ...@@ -38,6 +38,7 @@
38 </template> 38 </template>
39 <script> 39 <script>
40 import table from "@/utils/mixin/table"; 40 import table from "@/utils/mixin/table";
41 import { mapGetters } from 'vuex'
41 import { datas, sendThis } from "./xttzdata"; 42 import { datas, sendThis } from "./xttzdata";
42 import { getSysNoticeList, deleteSysNotice, publishNotice, unPublishNotice } from "@/api/sysNotice.js" 43 import { getSysNoticeList, deleteSysNotice, publishNotice, unPublishNotice } from "@/api/sysNotice.js"
43 import addDialog from "./components/addDialog.vue"; 44 import addDialog from "./components/addDialog.vue";
...@@ -73,6 +74,17 @@ ...@@ -73,6 +74,17 @@
73 isDiglog: false 74 isDiglog: false
74 } 75 }
75 }, 76 },
77 computed: {
78 ...mapGetters(['isRefresh'])
79 },
80 watch: {
81 isRefresh: {
82 handler (newVal, oldVal) {
83 if (newVal) this.queryClick()
84 },
85 immediate: true
86 }
87 },
76 methods: { 88 methods: {
77 // 列表渲染接口 89 // 列表渲染接口
78 /** 90 /**
...@@ -90,7 +102,6 @@ ...@@ -90,7 +102,6 @@
90 } 102 }
91 }) 103 })
92 }, 104 },
93 //打开新增弹窗
94 /** 105 /**
95 * @description: 打开新增弹窗 106 * @description: 打开新增弹窗
96 * @param {*} item 107 * @param {*} item
...@@ -102,6 +113,7 @@ ...@@ -102,6 +113,7 @@
102 } else { 113 } else {
103 this.$popupDialog("新增系统通知", "system/xttz/components/addDialog", { "isButtonFlag": true }, "50%") 114 this.$popupDialog("新增系统通知", "system/xttz/components/addDialog", { "isButtonFlag": true }, "50%")
104 } 115 }
116 this.$store.dispatch("user/refreshPage", false);
105 }, 117 },
106 //删除 118 //删除
107 delNotice (item) { 119 delNotice (item) {
......