修改发布通知公告图片上传问题

operationSupport/src/components/Tinymce/index.vue

@@ -1,6 +1,7 @@
 <template>
     <div :class="{ fullscreen: fullscreen }" class="tinymce-container" :style="{ width: containerWidth }">
         <textarea :id="tinymceId" class="tinymce-textarea" />
+
         <!-- <div class="editor-custom-btn-container"> -->
         <!-- <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" /> -->
         <!-- </div> -->
@@ -17,6 +18,7 @@
 import plugins from './plugins';
 import toolbar from './toolbar';
 import load from './dynamicLoadScript';
+import envConfig from '../../../src/config';
 
 // why use this cdn, detail see https://github.com/PanJiaChen/tinymce-all-in-one
 const tinymceCDN = 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js';
@@ -55,6 +57,7 @@ export default {
     },
     data() {
         return {
+            times: null,
             hasChange: false,
             hasInit: false,
             tinymceId: this.id,
@@ -82,8 +85,11 @@ export default {
     },
     watch: {
         value(val) {
+            console.log('tinymceValue============', val);
             if (!this.hasChange && this.hasInit) {
-                this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val || ''));
+                this.$nextTick(() => {
+                    window.tinymce.get(this.tinymceId).setContent(val || '');
+                });
             }
         },
         language() {
@@ -116,6 +122,42 @@ export default {
                 this.initTinymce();
             });
         },
+        onPaste(event) {
+            new Promise((resolve) => {
+                const items = (event.clipboardData || window.clipboardData).items;
+                if (items[0].type.indexOf('image') !== -1) {
+                    console.log('粘贴的是图片类型');
+                    const file = items[0].getAsFile();
+                    const formData = new FormData();
+                    formData.append('file', file);
+                    var imageUrl = '';
+                    // 上传图片
+                    this.$http.post('/sc-community-web/upload/uploadFile', formData).then((res) => {
+                        console.log('onPaste', res);
+                        if (res.status === 0) {
+                            // 放到内容当中
+                            let img = `<img class="wscnph" src="${res.data}" />`;
+                            // let img = `<div class="wscnph" id="${res.data}" >[图片]</div>`;
+                            window.tinymce.get(this.tinymceId).insertContent(img);
+                            // window.tinymce.get(this.tinymceId).insertContent(`<img class="wscnph" src="${res.data}" />`);
+                            // let content = window.tinymce.get(this.tinymceId).getContent();
+                            // let newContent = content.replace(/<img \s*class="wscnph"\s*src="[\s\S]*"\/>/g, '2');
+                            // window.tinymce.get(this.tinymceId).setContent(newContent);
+                            resolve && resolve();
+                        } else {
+                            this.$message.error(res.msg);
+                        }
+                    });
+                } else {
+                    console.log('粘贴的不是图片，不能上传');
+                }
+            }).then(() => {
+                let content = window.tinymce.get(this.tinymceId).getContent();
+                let newContent = content.replace(/<img *src="data.*?\/>/g, '');
+                window.tinymce.get(this.tinymceId).setContent(newContent);
+            });
+        },
+
         initTinymce() {
             const _this = this;
             window.tinymce.init({
@@ -140,16 +182,22 @@ export default {
                 // imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
                 default_link_target: '_blank',
                 link_title: false,
-                // nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugin
                 init_instance_callback: (editor) => {
                     if (_this.value) {
                         editor.setContent(_this.value);
                     }
                     _this.hasInit = true;
                     editor.on('NodeChange Change KeyUp SetContent', () => {
+                        this.times = null;
                         this.hasChange = true;
+                        // const val = editor.getContent().replace(/<p><img\s?src="data.*?<\/p>/g, '')
                         this.$emit('input', editor.getContent());
                     });
+                    editor.on('paste', (evt) => {
+                        console.log('粘贴paste');
+                        // 监听粘贴事件
+                        this.onPaste(evt);
+                    });
                 },
                 setup(editor) {
                     editor.on('FullscreenStateChanged', (e) => {
@@ -159,40 +207,60 @@ export default {
                 // it will try to keep these URLs intact
                 // https://www.tiny.cloud/docs-3x/reference/configuration/Configuration3x@convert_urls/
                 // https://stackoverflow.com/questions/5196205/disable-tinymce-absolute-to-relative-url-conversions
-                convert_urls: false
+                convert_urls: false,
+                paste_data_images: false // 粘贴的同时能把内容里的图片自动上传
                 // 整合七牛上传
                 // images_dataimg_filter(img) {
-                //   setTimeout(() => {
-                //     const $image = $(img);
-                //     $image.removeAttr('width');
-                //     $image.removeAttr('height');
-                //     if ($image[0].height && $image[0].width) {
-                //       $image.attr('data-wscntype', 'image');
-                //       $image.attr('data-wscnh', $image[0].height);
-                //       $image.attr('data-wscnw', $image[0].width);
-                //       $image.addClass('wscnph');
-                //     }
-                //   }, 0);
-                //   return img
-                // },
+                //     setTimeout(() => {
+                //         const $image = $(img);
+                //         $image.removeAttr('width');
+                //         $image.removeAttr('height');
+                //         if ($image[0].height && $image[0].width) {
+                //             $image.attr('data-wscntype', 'image');
+                //             $image.attr('data-wscnh', $image[0].height);
+                //             $image.attr('data-wscnw', $image[0].width);
+                //             $image.addClass('wscnph');
+                //         }
+                //     }, 0);
+                //     console.log(' images_dataimg_filter', img);
+                //     return img;
+                // }
                 // images_upload_handler(blobInfo, success, failure, progress) {
-                //   progress(0);
-                //   const token = _this.$store.getters.token;
-                //   getToken(token).then(response => {
-                //     const url = response.data.qiniu_url;
-                //     const formData = new FormData();
-                //     formData.append('token', response.data.qiniu_token);
-                //     formData.append('key', response.data.qiniu_key);
-                //     formData.append('file', blobInfo.blob(), url);
-                //     upload(formData).then(() => {
-                //       success(url);
-                //       progress(100);
-                //     })
-                //   }).catch(err => {
-                //     failure('出现未知问题，刷新页面，或者联系程序员')
-                //     console.log(err);
-                //   });
-                // },
+                //     // progress(0);
+                //     // console.log('images_upload_handler========', blobInfo, success, failure, progress);
+                //     // const formData = new FormData();
+                //     // formData = formData.append('file', blobInfo.blob(), blobInfo.filename());
+                //     // this.$http
+                //     //     .post('/sc-community-web/upload/uploadFile', formData)
+                //     //     .then((res) => {
+                //     //         success(url);
+                //     //         progress(100);
+                //     //         console.log('====================================');
+                //     //         console.log('res', res);
+                //     //         console.log('====================================');
+                //     //     })
+                //     //     .catch((err) => {
+                //     //         failure('出现未知问题，刷新页面，或者联系程序员');
+                //     //         console.log(err);
+                //     //     });
+                //     // const token = _this.$store.getters.token;
+                //     // getToken(token)
+                //     //     .then((response) => {
+                //     //         const url = '/sc-community-web/upload/uploadFile';
+                //     //         const formData = new FormData();
+                //     //         formData.append('token', response.data.qiniu_token);
+                //     //         formData.append('key', response.data.qiniu_key);
+                //     //         formData.append('file', blobInfo.blob(), url);
+                //     //         upload(formData).then(() => {
+                //     //             success(url);
+                //     //             progress(100);
+                //     //         });
+                //     //     })
+                //     //     .catch((err) => {
+                //     //         failure('出现未知问题，刷新页面，或者联系程序员');
+                //     //         console.log(err);
+                //     //     });
+                // }
             });
         },
         destroyTinymce() {
@@ -228,7 +296,7 @@ export default {
                 if (img.length >= 3) {
                     return this.$message.warning('最多插入三张图片');
                 }
-                arr.forEach((v) => window.tinymce.get(this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`));
+                arr.forEach((v) => window.tinymce.get(this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" />`));
             }
         }
     }
@@ -236,6 +304,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+/deep/ .wscnph {
+    width: 200px !important;
+    height: 100px;
+    vertical-align: middle;
+}
 .tinymce-container {
     position: relative;
     line-height: normal;

operationSupport/src/utils/filters.js

@@ -38,4 +38,13 @@ let filterHtml = (val) => {
     // }
     return content;
 };
-export default { filterTime, filterTimeNumber, filterComplaintStatus, filtercomplaintType, filterHtml };
+// 替换富文本图片
+let filterHtmlImage = (val) => {
+    let content = val.match(/<div id=".*" class="wscnph">\[图片\]<\/div>/g);
+
+    // if (content.length >= 20) {
+    //     content = content.substring(0, 20) + '...';
+    // }
+    return 'content';
+};
+export default { filterTime, filterTimeNumber, filterComplaintStatus, filtercomplaintType, filterHtml, filterHtmlImage };

operationSupport/src/views/propertyManagement/index.vue

@@ -166,6 +166,7 @@
                             </el-select>
                         </div>
                     </div>
+                    <div></div>
                     <el-form :model="replayForm" ref="replayForm" label-width="80px" class="demo-ruleForm" v-if="rowData.handleStatus != 2">
                         <el-form-item
                             label="物业回复"

operationSupport/src/views/propertyManagement/inform.vue

@@ -498,11 +498,40 @@ export default {
         }
     },
     mounted() {},
-    watch: {},
+    watch: {
+        ruleForm(val) {}
+    },
+    computed: {
+        // 过滤富文本
+        ruleFormEditorContents() {
+            if (this.ruleForm.editorContents) {
+                console.log('this.ruleForm.editorContents', this.ruleForm.editorContents);
+                let formResult = null;
+                let container = null;
+                let imageUrl = this.ruleForm.editorContents.match(/<div id=".*" class="wscnph">\[图片\].*<\/div>.*/g);
+                let text = this.ruleForm.editorContents.match(/\[图片\].*/g);
+                if (Array.isArray(text) && text.length > 0) {
+                    container = text[0].substr(4, text[0].length - 10);
+                }
+
+                console.log('imageUrl', imageUrl);
+                if (Array.isArray(imageUrl) && imageUrl.length > 0) {
+                    let url = imageUrl[0].substr(9, imageUrl[0].length - 36 + container.length);
+                    formResult = this.ruleForm.editorContents.replace(
+                        /<div id=".*" class="wscnph">\[图片\].*<\/div>/g,
+                        `<img class="wscnph" src="${url}" />`
+                    );
+                }
+                console.log('formResult', formResult);
+                console.log('container', container);
+                return `${formResult ? formResult : ''} <div>${container}</div>`;
+            }
+        }
+    },
     methods: {
         // 弹框关闭事件
         handleDialogClose(e) {
-            console.log('handleDialogClose=========', e);
+            // console.log('handleDialogClose=========', e);
             this.$refs.previeInform.closeDialog();
         },
         // 人员树
@@ -511,13 +540,13 @@ export default {
         // },
         // 上传文件
         handleRemove(file, fileList) {
-            console.log('上传文件', file, fileList);
+            // console.log('上传文件', file, fileList);
         },
         handlePreview(file) {
-            console.log('点击文件', file);
+            // console.log('点击文件', file);
         },
         successFile(file, fileLists) {
-            console.log('上传文件successFile', fileLists);
+            // console.log('上传文件successFile', fileLists);
 
             let obj = {};
             // this.fileList.push(fileLists.name);
@@ -538,15 +567,11 @@ export default {
             });
             this.fileList = removeName;
             this.uploadFileUrl = removeName;
-            console.log('点击移除', this.fileList);
         },
 
         /**上传图片*/
         successImageList(arr) {
             this.successImageLists = arr;
-            console.log('====================================');
-            console.log('上传图片', arr);
-            console.log('====================================');
         },
         imageSuccessCBK(arr) {
             this.$refs.endit.imageSuccessCBK(arr);
@@ -555,16 +580,11 @@ export default {
             this.$refs.endit.deleteImage(val);
         },
 
-        handleRemove(file) {
-            console.log(file);
-        },
+        handleRemove(file) {},
 
-        handleDownload(file) {
-            console.log(file);
-        },
+        handleDownload(file) {},
         // 添加弹框下拉框变化
         changeCommunity(val) {
-            console.log('添加弹框下拉框变化', val);
             this.$http
                 .get('/sc-community/assets/tree/community/find', { buildingType: this.buildingType })
                 .then(({ status, data, msg }) => {
@@ -593,7 +613,6 @@ export default {
                     // this.$message('获取房间失败');
                 }
             });
-            console.log('选中的房间inval', val);
         },
         // 选择的人员
         selectPeople(val) {
@@ -602,7 +621,6 @@ export default {
             // }
             this.selectDataPeopleTreeData.userList = [];
             this.selectDataPeopleTreeData = val;
-            console.log('选择的人员inform', val);
         },
         /**监听指定房间单选框变化*/
         changeRadioRoom(val) {
@@ -617,11 +635,9 @@ export default {
                 this.ruleForm.disabledRoom = false;
                 this.$refs.selectTreeHouse.selectAllHouse();
             }
-            console.log('监听房间单选框变化', val);
         },
         //选择员工复选框变化
         changeCheckboxStaffRoom(val) {
-            console.log('选择员工复选框变化', val);
             if (!this.ruleForm.popCommunityId) {
                 this.ruleForm.issueRoom.staff = false;
                 return this.$message.warning('请先选择社区');
@@ -691,8 +707,6 @@ export default {
             if (!!this.$refs.endit) {
                 this.$refs.endit.setContent('');
             }
-
-            console.log('发布活动类型', val);
         },
         // 清空
         clear() {
@@ -752,7 +766,6 @@ export default {
                 this.mixins_query.startTime = this.$moment(new Date()).subtract(1, 'months').format('YYYY-MM-DDTHH:mm:ss');
                 this.mixins_query.endTime = this.$moment(new Date()).format('YYYY-MM-DDTHH:mm:ss');
             }
-            console.log('点击查询', this.searchTime);
             this.mixins_search();
         },
         /**
@@ -772,7 +785,6 @@ export default {
                         if (img.length > 3) {
                             return this.$message.warning('最多插入三张图片');
                         }
-                        console.log('this.selectDataHouseTreeData.userList', this.selectDataHouseTreeData.userList);
                         if (
                             this.selectDataHouseTreeData.userList.length === 0 &&
                             this.selectDataPeopleTreeData &&
@@ -810,9 +822,6 @@ export default {
                             }
                         }
 
-                        console.log('image======this.successImageLists=======', this.successImageLists);
-                        console.log('arr1=======', arr1);
-                        console.log('arr2=======', arr2);
                         let query = {
                             communityId: this.ruleForm.popCommunityId,
                             content: this.ruleForm.editorContents,
@@ -841,6 +850,7 @@ export default {
                             // ]
                             // userType: userType
                         };
+                        console.log('query========', query);
                         this.$http.post('/sc-community-web/notice/add', query).then((res) => {
                             if (res.status === 0) {
                                 this.mixins_search();
@@ -893,7 +903,6 @@ export default {
             var onOption = '';
             this.$http.get('/sc-community/assets/community/list', {}).then((res) => {
                 // this.$store.commit('setAreaSelect', res.data);
-                console.log('获取社区列表', res);
                 res.data.map((res) => {
                     onOption = {
                         label: res.communityName,
@@ -1018,16 +1027,10 @@ export default {
                         });
 
                         if (arr.length > 0) {
-                            // this.houseData = arr;
                             this.dimension(arr);
                             this.clearTreeChildren(arr);
                             this.houseData = arr;
-                            // this.dimension(this.houseData);
-                            // console.log(arr);
-                            // console.log(this.houseData);
-
                             this.filterName(this.houseData);
-                            let h = [...new Set(this.houseNames)];
                             this.houseDataNames = this.houseNames.toString();
                         }
                     }

operationSupport/src/views/workbench/index.vue

@@ -346,12 +346,32 @@ export default {
                     this.peopleData = data;
                     this.filterPeople(this.peopleData);
                     this.filterPeopleName(this.peopleData);
+                    this.clearTreeChildrenPeople(data);
                     this.houseDataNamesPeople = this.PeopleNames.toString();
                 } else {
                     this.$message(warning, '获取人员失败,请稍后重试');
                 }
             });
         },
+        clearTreeChildrenPeople(arr) {
+            arr.map((item, index) => {
+                if (!!item.children && item.children.length > 0) {
+                    this.clearTreeChildrenPeople(item.children);
+                } else {
+                    if (!!item.children && item.children.length == 0) {
+                        this.clearTreeChildrenPeopleArr(arr, index);
+                    }
+                }
+            });
+        },
+        clearTreeChildrenPeopleArr(arr, index) {
+            arr.splice(index, 1);
+            arr.map((item, indexs) => {
+                if (!!item.children && item.children.length == 0) {
+                    this.clearTreeChildrenPeopleArr(arr, indexs);
+                }
+            });
+        },
         dimension(arr) {
             arr.map((item, index) => {
                 if (item.children) {
@@ -380,6 +400,17 @@ export default {
                 }
             });
         },
+        clearTreeChildren(arr) {
+            arr.map((item, index) => {
+                if (!!item.children && item.children.length > 0) {
+                    this.clearTreeChildren(item.children);
+                } else {
+                    if (!!item.children) {
+                        arr.splice(index, 1);
+                    }
+                }
+            });
+        },
 
         // 获取房间
         getOrgTreeList() {
@@ -388,21 +419,21 @@ export default {
                 .get('/sc-community/assets/tree/community/find', { buildingType: this.buildingType })
                 .then(({ status, data, msg }) => {
                     if (status === 0 && data) {
-                        console.log('houseData=1', this.houseData);
                         var arr = data.filter((item) => {
                             return item.id == this.rowDetail.communityId;
                         });
-                        this.houseData = arr;
-                        this.dimension(this.houseData);
-                        this.filterName(this.houseData);
-                        let h = [...new Set(this.houseNames)];
-                        console.log('====================================');
-                        console.log('houseNames', this.houseData);
-                        console.log('====================================');
-                        this.houseDataNames = this.houseNames.toString();
+
+                        if (arr.length > 0) {
+                            this.dimension(arr);
+                            this.clearTreeChildren(arr);
+                            this.houseData = arr;
+                            this.filterName(this.houseData);
+                            this.houseDataNames = this.houseNames.toString();
+                        }
                     }
                 });
         },
+
         // 打开新页  跳转的路径
         goPath(path, showDialog, id) {
             this.$router.push({ path, query: { showDialog: showDialog, id: id } });