修改物业管理-通知公告插入图片组件

operationSupport/src/components/Tinymce/index.vue

@@ -1,9 +1,9 @@
 <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>
+        <!-- <div class="editor-custom-btn-container"> -->
+        <!-- <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" /> -->
+        <!-- </div> -->
     </div>
 </template>
 
@@ -12,7 +12,8 @@
  * docs:
  * https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html#tinymce
  */
-import editorImage from './components/EditorImage';
+// import editorImage from './components/EditorImage';
+// import editorImage from '../../views/propertyManagement/common/upImage.vue';
 import plugins from './plugins';
 import toolbar from './toolbar';
 import load from './dynamicLoadScript';
@@ -22,7 +23,7 @@ const tinymceCDN = 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymc
 
 export default {
     name: 'Tinymce',
-    components: { editorImage },
+    // components: { editorImage },
     props: {
         id: {
             type: String,
@@ -41,10 +42,6 @@ export default {
                 return [];
             }
         },
-        menubar: {
-            type: String,
-            default: 'file edit insert view format table'
-        },
         height: {
             type: [Number, String],
             required: false,
@@ -53,7 +50,7 @@ export default {
         width: {
             type: [Number, String],
             required: false,
-            default: '500'
+            default: '100%'
         }
     },
     data() {
@@ -67,7 +64,9 @@ export default {
                 zh: 'zh_CN',
                 es: 'es_MX',
                 ja: 'ja'
-            }
+            },
+            // 图片上传
+            imgList: []
         };
     },
     computed: {
@@ -124,23 +123,25 @@ export default {
             window.tinymce.init({
                 language: 'zh_CN',
                 selector: `#${this.tinymceId}`,
+                //状态栏指的是编辑器最底下、左侧显示dom信息、右侧显示Tiny版权链接和调整大小的那一条。默认是显示的，设为false可将其隐藏
+                statusbar: false,
                 height: this.height,
                 branding: false, //去掉底部文本
                 body_class: 'panel-body ',
                 object_resizing: false,
                 toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
-                menubar: this.menubar,
+                menubar: false,
                 plugins: plugins,
                 end_container_on_empty_block: true,
                 powerpaste_word_import: 'clean',
                 code_dialog_height: 450,
-                code_dialog_width: 1000,
-                advlist_bullet_styles: 'square',
-                advlist_number_styles: 'default',
-                imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
+                code_dialog_width: '100%',
+                // advlist_bullet_styles: 'square',
+                // advlist_number_styles: '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
+                // nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugin
                 init_instance_callback: (editor) => {
                     if (_this.value) {
                         editor.setContent(_this.value);
@@ -211,8 +212,27 @@ export default {
         getContent() {
             window.tinymce.get(this.tinymceId).getContent();
         },
+        deleteImage(val) {
+            let content = window.tinymce.get(this.tinymceId).getContent();
+            let reg = new RegExp(`<img class="wscnph" src="${val.response.data}" />`, 'g');
+            let newContent = content.replace(reg, '');
+            window.tinymce.get(this.tinymceId).setContent(newContent);
+        },
         imageSuccessCBK(arr) {
-            arr.forEach((v) => window.tinymce.get(this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`));
+            if (arr) {
+                // 获取内容，允许上传图片的线上大小，个数
+                let content = window.tinymce.get(this.tinymceId).getContent();
+                this.imgList = [];
+                let img = [];
+                content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, function (match, capture) {
+                    img.push(capture);
+                });
+                this.imgList = img;
+                if (img.length >= 3) {
+                    return this.$message.warning('最多插入三张图片');
+                }
+                arr.forEach((v) => window.tinymce.get(this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`));
+            }
         }
     }
 };

operationSupport/src/components/common/buildingTree.vue

@@ -1,8 +1,17 @@
 <template>
     <div class="organ-tree">
         <div v-show="showHouseTree">
-            <el-input v-model="filterText" v-if="!showCheckboxTree" placeholder="请输入关键字" suffix-icon="el-icon-search"></el-input>
-            <el-input v-model="selectHouse" placeholder="选择房间" maxlength="10" suffix-icon="el-icon-search" v-else></el-input>
+            <div>
+                <el-input v-model="filterText" v-if="!showCheckboxTree" placeholder="请输入关键字" suffix-icon="el-icon-search"></el-input>
+                <el-input
+                    v-model="selectHouse"
+                    disabled
+                    placeholder="选择的房间"
+                    maxlength="10"
+                    suffix-icon="el-icon-search"
+                    v-else
+                ></el-input>
+            </div>
             <div class="tree-style-box no-scrollbar">
                 <el-tree
                     class="tree-style"
@@ -18,12 +27,13 @@
                     :filter-node-method="filterNode"
                     :show-checkbox="showCheckboxTree"
                     :accordion="accordion"
+                    :prevDetailData="prevDetailData"
                 >
                 </el-tree>
             </div>
         </div>
         <div v-show="!showHouseTree">
-            <el-input v-model="selectPeople" placeholder="选择人员" maxlength="10" suffix-icon="el-icon-search"></el-input>
+            <el-input v-model="selectPeople" disabled placeholder="选择的人员" maxlength="10" suffix-icon="el-icon-search"></el-input>
             <div class="tree-style-box no-scrollbar">
                 <el-tree
                     class="tree-style"
@@ -40,6 +50,7 @@
                     :show-checkbox="showCheckboxTree"
                     :accordion="accordionPeople"
                     :selectAll="selectAll"
+                    :prevDetailData="prevDetailData"
                 >
                 </el-tree>
             </div>
@@ -77,6 +88,12 @@ export default {
             //人员展开手风琴
             type: Boolean,
             default: false
+        },
+        prevDetailData: {
+            type: Array,
+            default() {
+                return [];
+            }
         }
     },
     data() {
@@ -103,6 +120,14 @@ export default {
     },
     computed: {},
     methods: {
+        // 过滤选中的人员
+        filterPeople(val) {
+            return val
+                ? this.val.filter((item) => {
+                      item.id == val;
+                  })
+                : '暂无人员';
+        },
         // 选中所有房间
         selectAllHouse() {
             this.$nextTick(() => {
@@ -158,12 +183,9 @@ export default {
             return str;
             console.log('getStr', str);
         },
-        // 返回选中房间的数据
+        // 多选框返回选中房间的数据
         clickCheckTree(val) {
             let tree = this.$refs.tree;
-            // let array = tree.getCheckedKeys().concat(tree.getHalfCheckedKeys());
-            // let array = tree.getCheckedKeys();
-            // this.selectHouse = array;
             let nameArr = [];
             let array = tree.getCheckedNodes();
             let arrays = tree.getCheckedKeys();
@@ -174,8 +196,7 @@ export default {
                     nameArr.push(element.name);
                 }
             }
-            console.log('item', JSON.stringify(nameArr));
-
+            // 输入框显示的房间
             this.selectHouse = nameArr;
             var arr = [];
             array.forEach(function (item) {
@@ -183,11 +204,12 @@ export default {
                     arr.push(Number(item.value));
                 }
             });
+            // 选中的房间id
             this.$emit('selectData', arr);
             console.log('arrays', arrays);
             console.log('array', array);
         },
-        // 返回选中人员的数据
+        // 多选框返回选中人员的数据
         clickCheckTreePeople(val) {
             let nameArr = [];
             let tree = this.$refs.treePeople;
@@ -200,7 +222,9 @@ export default {
                     nameArr.push(element.label);
                 }
             }
+            // 输入框显示的人员
             this.selectPeople = nameArr.toString();
+            // 选中的人员id
             this.$emit('selectPeople', arrays);
         },
         dimension(arr) {

operationSupport/src/views/propertyManagement/common/previeInform.vue

@@ -4,10 +4,22 @@
             <div class="prev-text" style="margin-top: 0">
                 <span>所属社区: </span><span class="text-right">{{ dataDetail.communityName }}</span>
             </div>
-            <div class="prev-text">
-                <span>发布对象: </span><span class="text-right">{{ dataDetail.noticeUserVoList }}</span
-                ><span>查看详情</span>
-            </div>
+            <!-- <div class="prev-text detail">
+                <div>发布对象:</div>
+                <div class="detail-right">
+                    <building-tree
+                        ref="filterPeople"
+                        :buildingType="1"
+                        :prevDetailData="dataDetail.noticeUserVoList"
+                        :defaultExpandAllTree="false"
+                        :showHouseTree="false"
+                        :accordionPeople="true"
+                        :selectAll="true"
+                        @filterPeople="filterPeople"
+                    ></building-tree>
+                    <div>查看详情</div>
+                </div>
+            </div> -->
             <div class="prev-text">
                 <span>通知类型: </span
                 ><span class="text-right">{{ dataDetail.type == 0 ? '物业通知' : dataDetail.type == 1 ? '社区活动' : '其他' }}</span>
@@ -18,15 +30,23 @@
             <div class="prev-text">
                 <span>是否紧急:</span><span class="text-right">{{ dataDetail.urgentFlag ? '是' : '否' }}</span>
             </div>
-            <!-- <div class="prev-text"><span>主题图片:</span>
-            <img src="" alt="">
-            </div> -->
-            <div class="prev-text">
-                <span>通知内容:</span><span class="text-right"><div v-html="dataDetail.content"></div></span>
+            <div class="prev-text image-content">
+                <div class="image-text">主题图片:</div>
+                <div class="right-image">
+                    <img v-for="(item, index) of successImageLists" :key="index" :src="item.url" alt="" />
+                    <!-- <img src="https://a.storyblok.com/f/88751/1734x1092/c3cde09986/storyblok-editor-1.jpg/m/900x0/" alt="" /> -->
+                    <!-- <img src="https://a.storyblok.com/f/88751/1734x1092/c3cde09986/storyblok-editor-1.jpg/m/900x0/" alt="" /> -->
+                </div>
+            </div>
+            <div class="prev-text html-content">
+                <div class="html-left">通知内容:</div>
+                <div class="html-right">
+                    <div v-html="dataDetail.content"></div>
+                </div>
             </div>
             <div class="prev-text files">
-                <div style="margin-right: 25px">文件上传:</div>
-                <div v-if="filePath" style="display: flex">
+                <div>文件上传:</div>
+                <div v-if="filePath.length > 0" class="files-content">
                     <div v-for="(item, index) of filePath" :key="index" class="prev-text-file">
                         <div class="prev-text-right"><i class="el-icon-paperclip"></i> {{ item.name }}</div>
                     </div>
@@ -51,6 +71,12 @@ export default {
             default() {
                 return {};
             }
+        },
+        successImageLists: {
+            type: Array,
+            default() {
+                return {};
+            }
         }
     },
 
@@ -58,12 +84,17 @@ export default {
         return {};
     },
 
-    methods: {}
+    methods: {},
+    created() {
+        this.$refs.filterPeople();
+    }
 };
 </script>
 <style lang="scss" scoped>
 .prev {
+    width: 100%;
     .prev-text {
+        width: 100%;
         font-size: 12px;
         color: #424656;
         margin: 34px 20px;
@@ -71,22 +102,63 @@ export default {
             text-align: end;
         }
         .text-right {
-            padding-left: 25px;
+            padding-left: 3%;
         }
     }
+    .detail {
+        display: flex;
+    }
     .files {
         display: flex;
     }
-    .prev-text-file {
-        background: #f8fcff;
-        border-radius: 4px;
-        font-size: 14px;
-        .prev-text-right {
-            width: 150px;
-            overflow: hidden;
-            white-space: nowrap;
-            -o-text-overflow: ellipsis; //浏览器兼容
-            text-overflow: ellipsis;
+    .prev-text-none {
+        font-size: 12px;
+        margin-left: 10%;
+    }
+    .image-content {
+        width: 100%;
+        display: flex;
+        .image-text {
+            padding-top: 4%;
+        }
+        .right-image {
+            width: 92%;
+            img {
+                display: block;
+                float: left;
+                width: 28%;
+                height: 100px;
+                border: 1px solid #ccc;
+                border-radius: 4px;
+                margin-left: 3%;
+                min-width: 100px;
+            }
+        }
+    }
+    .files-content {
+        min-width: 150px;
+        display: flex;
+        .prev-text-file {
+            background: #f8fcff;
+            border-radius: 4px;
+            font-size: 14px;
+            margin-left: 25px;
+            padding: 2px 8px;
+            .prev-text-right {
+                overflow: hidden;
+                white-space: nowrap;
+                -o-text-overflow: ellipsis; //浏览器兼容
+                text-overflow: ellipsis;
+            }
+        }
+    }
+    .html-content {
+        display: flex;
+        width: 100%;
+        .html-left {
+        }
+        .html-right {
+            width: 86%;
         }
     }
 }

operationSupport/src/views/propertyManagement/common/upImage.vue

@@ -0,0 +1,185 @@
+<template>
+    <div class="upload-container">
+        <!-- <el-button class="el-icon-plus" @click="handleSubmit">插入</el-button> -->
+        <el-upload
+            class="upload-image"
+            action="/sc-community-web/upload/uploadFile"
+            list-type="picture-card"
+            :limit="limit"
+            :on-exceed="onExceed"
+            :multiple="false"
+            :file-list="fileList"
+            :before-upload="beforeUpload"
+            :on-success="handleSuccess"
+            :on-remove="handleRemove"
+            :on-preview="handlePictureCardPreview"
+        >
+            <div :class="{ 'upload-text': true }">
+                <el-button type="primary" size="mini">点击上传</el-button>
+            </div>
+            <!-- <div slot="file" slot-scope="{file}">
+                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+                <span class="el-upload-list__item-actions">
+                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
+                        <i class="el-icon-zoom-in"></i>
+                    </span>
+                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleSubmit(file)">
+                        <img src="../../../assets/img/inser_image.png" alt="" />
+                    </span>
+                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
+                        <i class="el-icon-delete"></i>
+                    </span>
+                </span>
+            </div> -->
+        </el-upload>
+        <el-dialog :visible.sync="dialogVisible" :modal="false">
+            <img width="100%" :src="imageUrl" alt="" />
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+// import { getToken } from 'api/qiniu'
+
+export default {
+    name: 'EditorSlideUpload',
+    props: {
+        color: {
+            type: String,
+            default: '#1890ff'
+        },
+        limit: {
+            type: Number,
+            default: 3
+        }
+    },
+    watch: {},
+    data() {
+        return {
+            // 弹框预览
+            dialogVisible: false,
+            // 大图
+            imageUrl: '',
+            //图片地址
+            imageFileList: [],
+            listObj: {},
+            imagefileListAll: [],
+            fileList: []
+        };
+    },
+    methods: {
+        clearImageList() {
+            console.log('clearImageList');
+            this.imageFileList = [];
+            this.fileList = [];
+            this.imagefileListAll = [];
+        },
+        onExceed(files, fileList) {
+            this.$message.warning(`最多可选 ${this.limit}  张图片`);
+        },
+        handleRemove(file) {
+            if (file.response.msg === '成功') {
+                this.$message.success('移除成功');
+            } else {
+                return this.$message.success('移除失败');
+            }
+            console.log('handleRemove', file);
+            let removeName = this.imageFileList.filter((item) => {
+                item.name !== file.name;
+            });
+            let removeNameList = this.imagefileListAll.filter((item) => {
+                item.name !== file.name;
+            });
+            this.imagefileListAll = removeNameList;
+            this.imageFileList = removeName;
+            this.$emit('successImageList', this.imagefileListAll);
+            this.$emit('deleteImage', file);
+            console.log('handleRemove', this.imageFileList);
+        },
+        handlePictureCardPreview(file) {
+            this.dialogImageUrl = file.url;
+            this.dialogVisible = true;
+        },
+        message(status, text) {
+            if (status === 0) {
+                this.$message.success(`${text}成功`);
+            } else {
+                return this.$message(`${text}失败！请稍后重试`);
+            }
+        },
+        handleSuccess(response, file) {
+            this.message(file.response.status, '图片上传');
+            this.imageFileList = [];
+            if (this.imageFileList.length >= 3) {
+                return this.$message.warning(`最多可上传${this.limit}图片`);
+            }
+            let obj = {};
+            obj.name = file.name;
+            obj.url = file.response.data;
+            obj.id = new Date().getTime();
+            this.imageFileList.push(obj);
+            this.imagefileListAll.push(obj);
+            this.$emit('successImageList', this.imagefileListAll);
+            this.imageUrl = obj.url;
+            console.log('============upImage========================');
+            console.log('点击上传图片返回的回调', file);
+            console.log('点击上传图片返回的回调 this.imageFileList', this.imageFileList);
+            console.log('=============upImage=======================');
+            this.$emit('successCBK', this.imageFileList);
+            console.log('this.$emitsuccessCBK', this.imageFileList);
+        },
+
+        beforeUpload(file) {
+            let types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png'];
+            const isImage = types.includes(file.type);
+            let isLt2M = file.size / 1024 / 1024 < 2;
+
+            if (!isImage) {
+                this.$message.error('上传头像图片只能是 JPG、GIF、BMP、PNG  格式!');
+            }
+
+            if (!isLt2M) {
+                this.$message.error('上传头像图片大小不能超过 2MB!');
+            }
+            return isLt2M && isImage;
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.upload-container {
+    width: 100%;
+    /deep/ .el-upload,
+    .el-upload--picture-card {
+        border: none;
+        // width: 100%;
+    }
+    /deep/ .el-upload-list__item,
+    .is-success {
+        width: 100%;
+    }
+    /deep/ .el-upload-list,
+    .el-upload-list--picture-card {
+        display: flex;
+    }
+    .upload-text {
+        font-size: 23px;
+        border: 1px solid #d8d8d8;
+        border-radius: 4px;
+        /deep/ .el-icon-plus {
+            font-size: 23px;
+            vertical-align: middle;
+        }
+        /deep/ span {
+            font-size: 15px;
+            vertical-align: middle;
+            line-height: 15px;
+        }
+    }
+
+    .upload-image {
+        display: flex;
+    }
+}
+</style>

operationSupport/src/views/propertyManagement/inform.vue

@@ -20,7 +20,6 @@
                 <img src="../../assets/img/btn_tianjia@2x.png" alt="" @click="add" />
             </div>
         </div>
-
         <div class="content">
             <div class="roles-wrap">
                 <zz-table
@@ -177,53 +176,23 @@
                                                 :editable="false"
                                             ></el-date-picker>
                                         </el-form-item>
-                                        <!-- <el-form-item label="主题图片" prop="image" v-if="showUploadImage">
-                                            <div>
-                                                <el-upload
-                                                    class="avatar-uploader"
-                                                    action="/sc-community-web/upload/uploadFile"
-                                                    :show-file-list="false"
-                                                    :on-success="handleAvatarSuccess"
-                                                    :before-upload="beforeAvatarUpload"
-                                                >
-                                                    <img v-if="imageUrl" :src="imageUrl" class="prev-image" />
-                                                    <div class="avatar-uploader-icon">
-                                                        <el-button type="primary" @click="clickUploadImage">点击上传</el-button>
-                                                    </div>
-                                                </el-upload>
-                                                <span class="uploader-explain">
-                                                    <el-upload
-                                                        v-if="showImageUrlTwo"
-                                                        class="avatar-uploader"
-                                                        action="/sc-community-web/upload/uploadFile"
-                                                        :show-file-list="false"
-                                                        :on-success="handleAvatarSuccessTwo"
-                                                        :before-upload="beforeAvatarUpload"
-                                                    >
-                                                        <img v-if="imageUrlTwo" :src="imageUrlTwo" class="prev-image" />
-                                                        <div class="avatar-uploader-icon">
-                                                            <el-button type="primary">点击上传</el-button>
-                                                        </div>
-                                                    </el-upload>
-                                                    <span v-if="showUploadImageText">
-                                                        图片像素为670px * 300px，jpg/png图片格式,文件大小在 2M内,最多可上传2张图片</span
-                                                    >
-                                                </span>
-                                            </div></el-form-item
-                                        > -->
+                                        <el-form-item label="主体图片" prop="image" v-show="showUploadImage">
+                                            <div class="up-image">
+                                                <up-image
+                                                    color="#1890ff"
+                                                    class="editor-upload-btn"
+                                                    @successCBK="imageSuccessCBK"
+                                                    @deleteImage="deleteImage"
+                                                    @successImageList="successImageList"
+                                                    ref="upImages"
+                                                ></up-image>
+                                            </div>
+                                        </el-form-item>
                                         <el-form-item label="通知内容" prop="informContent">
-                                            <!-- tui-editor 富文本编辑器   -->
+                                            <!-- tinymce-editor 富文本编辑器   -->
                                             <div class="editor-container">
-                                                <!-- <markdown-editor
-                                                    ref="markdownEditor"
-                                                    v-model="markdownEditorContent"
-                                                    :language="language"
-                                                    height="180px"
-                                                    width="543"
-                                                /> -->
-                                                <tinymce v-model="editorContent" :height="140" :width="510" />
+                                                <tinymce v-model="editorContent" ref="endit" :height="150" />
                                             </div>
-                                            <!-- <el-button type="primary" icon="el-icon-document" @click="getHtml"> 预览 </el-button> -->
                                         </el-form-item>
                                         <el-form-item label="文件上传" prop="fill">
                                             <div>
@@ -257,7 +226,11 @@
                                 </div>
                                 <div v-else>
                                     <!-- 详情显示 -->
-                                    <previe-inform :dataDetail="rowDetail" :filePath="filePath"></previe-inform>
+                                    <previe-inform
+                                        :dataDetail="rowDetail"
+                                        :filePath="filePath"
+                                        :successImageLists="successImageLists"
+                                    ></previe-inform>
                                 </div>
                             </div>
 
@@ -273,27 +246,28 @@
                                 <GeminiScrollbar class="my-scroll-bar" :autoshow="false" :color="red">
                                     <div class="dialog-right-content">
                                         <div class="dialog-title">
-                                            <div class="dialog-titles" v-if="rowDetail">
+                                            <div class="dialog-titles">
                                                 {{ rowDetail.title ? rowDetail.title : '标题' }}
                                             </div>
-                                            <div class="dialog-titles" v-else>{{ ruleForm.title ? ruleForm.title : '标题' }}</div>
                                             <div class="dialog-urgency" v-if="ruleForm.exigencyText">紧急</div>
                                         </div>
-                                        <div class="dialog-right-time" v-if="rowDetail">{{ rowDetail.pubDate }}</div>
+                                        <div class="dialog-right-time" v-if="showDetail">{{ rowDetail.pubDate }}</div>
                                         <div class="dialog-right-time" v-else>{{ new Date() | filterTime }}</div>
                                         <div></div>
                                         <div class="content">
-                                            <div class="content-text">
+                                            <div class="content-text" v-if="showDetail">
                                                 <div v-html="editorContent" id="content" />
                                             </div>
-                                            <!-- <div><img style="width: 100px; height: 100px" :src="imageUrl" alt="" /></div> -->
+                                            <div class="content-text" v-else>
+                                                <div v-html="contentHtml" id="content" />
+                                            </div>
                                             <div class="content-inform">
                                                 <!-- <div>{{ !showDetail ? rowDetail.communityName : popCommunityName }}</div>
                                                 <div v-if="rowDetail">{{ rowDetail.pubDate }}</div>
                                                 <div v-else>{{ new Date() | filterTime }}</div>
                                                 <div>物业电话：{{ $store.state.cruUserInfo.phone }}</div> -->
                                             </div>
-                                            <div v-if="!rowDetail">
+                                            <div v-if="showDetail">
                                                 <div class="file-name" v-for="(item, index) of uploadFileUrl" :key="index">
                                                     <span class="file-name-left"><i class="el-icon-paperclip"></i> </span>
                                                     <span class="file-name-right">
@@ -325,59 +299,44 @@
 <script>
 import list from '@utils/list.js';
 import previeInform from './common/previeInform';
+import upImage from './common/upImage';
 // Tinymce 富文本编辑器
 import Tinymce from '@/components/Tinymce';
 const content = ` <div>
-                                                    &nbsp;&nbsp;您好！为了给大家提供一个舒适、卫生的生活环境，进一步有效控制小区“四害”孳生，减少四害对大家生活影响，管理处计划12月份安排小区公共区域集中消杀4次。
-                                                    <div style="text-align: end; margin-right: 10px; color: #e0e1e3">
-                                                        <div style="margin-right: 30px">xxx物业管理处</div>
-                                                        <div>2022-02-22 02：02：02</div>
-                                                        <div>物业电话：13123123123</div>
-                                                    </div>
-                                                </div>`;
+                         &nbsp;&nbsp;您好！为了给大家提供一个舒适、卫生的生活环境，进一步有效控制小区“四害”孳生，减少四害对大家生活影响，管理处计划12月份安排小区公共区域集中消杀4次。
+                         <div style="text-align: end; margin-right: 10px; color: #e0e1e3">
+                             <div style="margin-right: 30px">xxx物业管理处</div>
+                             <div>2022-02-22 02：02：02</div>
+                             <div>物业电话：13123123123</div>
+                         </div>
+                     </div>`;
 export default {
     mixins: [list],
-    components: { previeInform, Tinymce },
+    components: { previeInform, Tinymce, upImage },
     data() {
         let _this = this;
         return {
             popCommunityName: '',
             fileList: [],
             // 显示图片上传
-            imageUrl: '',
-            imageUrlTwo: '',
             showUploadImage: false,
-            showImageUrlTwo: false,
-            showUploadImageText: true,
             dialogImageUrl: '',
-            disabled: false,
             // 显示详情
             showDetail: true,
             rowDetail: '',
             // 富文本编辑器
             editorContent: content,
-            html: content,
-            languageTypeList: {
-                en: 'en_US',
-                zh: 'zh_CN',
-                es: 'es_ES'
-            },
+            contentHtml: '',
+            contents: ` <div>
+                         &nbsp;&nbsp;您好！为了给大家提供一个舒适、卫生的生活环境，进一步有效控制小区“四害”孳生，减少四害对大家生活影响，管理处计划12月份安排小区公共区域集中消杀4次。
+                         <div style="text-align: end; margin-right: 10px; color: #e0e1e3">
+                             <div style="margin-right: 30px">xxx物业管理处</div>
+                             <div>2022-02-22 02：02：02</div>
+                             <div>物业电话：13123123123</div>
+                         </div>
+                     </div>`,
             // 查询的时间
             searchTime: [],
-            // 选择的房间
-            optionsRoom: [],
-            // 选择的员工
-            selectStaff: [],
-            optionsStaff: [
-                {
-                    value: '选项1',
-                    label: '员工A'
-                },
-                {
-                    value: '选项2',
-                    label: '员工B'
-                }
-            ],
             // 添加弹框信息
             ruleForm: {
                 popCommunityId: '', //所属社区
@@ -480,8 +439,6 @@ export default {
             mixins_post: 'post',
             // 显隐弹框
             centerDialogVisible: false,
-            // 保存上传的文本
-            newConten: '',
             // 获取的房间信息
             houseData: [],
             peopleData: [],
@@ -502,27 +459,12 @@ export default {
         this.mixins_query = {};
         this.mixins_search();
     },
-    computed: {
-        language() {
-            return this.languageTypeList['zh_CN'];
-        }
-    },
     mounted() {},
-    watch: {
-        html(newv, oldv) {
-            console.log('watch', newv, oldv);
-        },
-        newConten(newv, oldv) {
-            console.log('newConten', newv, oldv);
-        }
-    },
+    watch: {},
     methods: {
         // 人员树
         dataPeople(data) {
             this.peopleData = data;
-            console.log('====================================');
-            console.log('人员', data);
-            console.log('====================================');
         },
         // 房间树
         buildingInformation(data) {
@@ -567,51 +509,27 @@ export default {
             });
             this.fileList = removeName;
             this.uploadFileUrl = removeName;
-            console.log('点击一处', this.fileList);
+            console.log('点击移除', this.fileList);
         },
 
         /**上传图片*/
-        clickUploadImage() {
-            this.showImageUrlTwo = true;
-            this.showUploadImageText = false;
-            this.html = this.$refs.markdownEditor.getHtml();
-            console.log('富文本内容', this.editorContent);
+        successImageList(arr) {
+            this.successImageLists = arr;
+            console.log('====================================');
+            console.log('上传图片', arr);
+            console.log('====================================');
         },
-        handleAvatarSuccess(res, file) {
-            // this.imageUrl = URL.createObjectURL(file.raw);
-            this.imageUrl = res.data;
-            let contentText = document.getElementById('content');
-            let image = document.createElement('img');
-            image.src = res.data;
-            contentText.appendChild(image);
-            this.newConten = contentText;
-            console.log('获取最新预览文本内容', contentText);
-            console.log('this.imageUrl', this.imageUrl);
-            console.log('handleAvatarSuccess', res, file);
+        imageSuccessCBK(arr) {
+            this.$refs.endit.imageSuccessCBK(arr);
         },
-        handleAvatarSuccessTwo(res, file) {
-            this.imageUrlTwo = URL.createObjectURL(file.raw);
-            console.log('handleAvatarSuccess', res, file);
+        deleteImage(val) {
+            this.$refs.endit.deleteImage(val);
         },
-        beforeAvatarUpload(file) {
-            const isJPG = file.type === 'image/jpeg';
-            const isPNG = file.type === 'image/png';
-            const isLt2M = file.size / 1024 / 1024 < 2;
 
-            if (!isJPG && !isPNG) {
-                this.$message.error('上传头像图片只能是 JPG或PNG格式!');
-            }
-            if (!isLt2M) {
-                this.$message.error('上传头像图片大小不能超过 2MB!');
-            }
-            return isJPG && isLt2M;
-        },
         handleRemove(file) {
             console.log(file);
         },
-        handlePictureCardPreview(file) {
-            this.dialogImageUrl = file.url;
-        },
+
         handleDownload(file) {
             console.log(file);
         },
@@ -624,35 +542,6 @@ export default {
                 }
             }
         },
-        getSelect(data) {
-            var str = [];
-            const getStr = function (list) {
-                list.forEach(function (row) {
-                    if (row.children) {
-                        getStr(row.children);
-                    } else {
-                        if (row.type !== 'unit') {
-                            str.push(row.value);
-                        }
-                    }
-                });
-            };
-            getStr(data);
-            return str;
-            console.log('getStr', str);
-        },
-        dimension(arr) {
-            var arrs = [];
-            arr.map((item, index) => {
-                if (!!item.children & (item.type !== 'unit')) {
-                    this.dimension(item.children);
-                } else {
-                    if (item.name.indexOf('单元') === -1 && item.type !== 'unit') {
-                        arrs.push(item.value);
-                    }
-                }
-            });
-        },
         // 选中的房间
         selectDataHouseTree(val) {
             // this.selectDataHouseTreeData = val;
@@ -728,17 +617,27 @@ export default {
         },
         // 发布活动类型
         changeInformType(val) {
-            if (val == 0) {
+            if (val) {
                 this.showUploadImage = true;
+                this.showDetail = false;
+                this.rowDetail = '';
+                this.showDetail = true;
+                this.centerDialogVisible = true;
+                this.$refs.upImages.clearImageList();
             } else {
                 this.showUploadImage = false;
+                this.$refs.endit.setContent(this.contents);
             }
             console.log('发布活动类型', val);
         },
         /**添加按钮 */
         add() {
+            this.rowDetail = '';
             this.showDetail = true;
             this.centerDialogVisible = true;
+            this.$refs.endit.setContent(this.contents);
+            this.$refs.upImages.clearImageList();
+            this.$refs['ruleForm'].resetFields();
         },
         /**查询按钮*/
         searchInfo() {
@@ -756,16 +655,6 @@ export default {
             console.log('点击查询', this.searchTime);
             this.mixins_search();
         },
-        /**预览富文本内容*/
-        getHtml() {
-            this.html = this.$refs.markdownEditor.getHtml();
-            console.log('====================, this.markdownEditorContent================');
-            console.log(this.html);
-            let contentText = document.getElementById('content');
-            this.markdownEditorContent = contentText;
-            console.log('获取最新预览文本内容', contentText);
-            console.log('====================================');
-        },
         /**
          * 弹框按钮
          * @param type 类型
@@ -773,8 +662,8 @@ export default {
          * */
         dialogButton(type) {
             if (type === 'prev') {
-                if (this.selectDataHouseTreeData.length < 1) {
-                    this.$message.warning('请选择房间');
+                if (this.selectDataHouseTreeData.length < 1 && this.selectDataPeopleTreeData.length < 1) {
+                    return this.$message.warning('请选择房间');
                 }
                 this.$refs['ruleForm'].validate((valid) => {
                     if (valid) {
@@ -791,7 +680,7 @@ export default {
                             pubDate: this.$moment(new Date()).format(`YYYY-MM-DDTHH:mm:ss`),
                             //   pubPeople:ruleForm.informType,
                             //   pubStatus: "",
-                            // themePictrue: '',
+                            themePictrue: JSON.stringify(this.successImageLists),
                             userId: this.ruleForm.issueRoom.checkAll ? this.selectDataHouseTreeData : this.selectDataPeopleTreeData,
                             title: this.ruleForm.title,
                             type: this.ruleForm.informType,
@@ -805,6 +694,8 @@ export default {
                                 this.mixins_search();
                             } else {
                                 this.$message('发布失败,请重试');
+                                this.successImageList = [];
+                                this.contentHtml = '';
                             }
                             this.centerDialogVisible = false;
 
@@ -816,9 +707,15 @@ export default {
                 });
             } else if (type == 'clear') {
                 this.centerDialogVisible = false;
+                this.rowDetail = '';
+                this.$refs.endit.setContent(this.contents);
+                this.$refs.upImages.clearImageList();
                 this.$refs['ruleForm'].resetFields();
             } else {
                 this.centerDialogVisible = false;
+                this.rowDetail = '';
+                this.$refs.endit.setContent(this.contents);
+                this.$refs.upImages.clearImageList();
                 this.$refs['ruleForm'].resetFields();
             }
         },
@@ -840,15 +737,20 @@ export default {
         /** 查看详情*/
         clickDatail(row) {
             this.rowDetail = [];
-            console.log('查看详情', row);
-            this.centerDialogVisible = true;
-            this.showDetail = false;
             this.$http.get('/sc-community-web/notice/find/' + row.id).then((res) => {
-                this.rowDetail = row;
-                // let fileArr = row.filePath.split(',');
-                // this.filePath = fileArr.slice(0, fileArr.length - 1);
-                this.filePath = JSON.parse(row.filePath);
-                console.log('查看详情', res);
+                if (res.status === 0) {
+                    this.centerDialogVisible = true;
+                    this.showDetail = false;
+                    this.rowDetail = res.data;
+                    // let fileArr = row.filePath.split(',');
+                    // this.filePath = fileArr.slice(0, fileArr.length - 1);
+                    this.filePath = JSON.parse(row.filePath);
+                    this.successImageLists = JSON.parse(row.themePictrue);
+                    this.contentHtml = row.content;
+                    console.log('查看详情', res);
+                } else {
+                    return this.$message('获取详情失败！请稍后重试');
+                }
             });
             // this.ruleForm.title = row.managementName;
             // this.ruleForm.newPhone = row.phone;

operationSupport/src/views/propertyManagement/style.scss

@@ -357,6 +357,10 @@ $fontSizeSmall: 14px;
                 width: 100%;
             }
             }
+            // .up-image{
+            //    width: 223px;
+            //    height: 100px;
+            // }
         .dialog-footer{
             position: absolute;
             right: 24px;
@@ -403,13 +407,13 @@ $fontSizeSmall: 14px;
             .dialog-right-top{
                 text-align: center;
                 background: white;
-                border: 1px solid #E0E1E3;
-                border-top-right-radius: 24px;
-                border-top-left-radius: 24px;
-                border-top: none;
+                border-top-right-radius: 28px;
+                border-top-left-radius: 28px;
                 border-bottom: none;
+                padding: 4px;
                 img{
                 background: white;
+                width: 100%;
                 width: 234px;
                 height: 8px;
                 text-align: center;
@@ -516,37 +520,7 @@ $fontSizeSmall: 14px;
     }
     }
   
-    // 上传图片
-    /deep/ .el-upload {
-        border: 1px solid #D8D8D8;
-        border-radius: 6px;
-        cursor: pointer;
-        position: relative;
-        overflow: hidden;
-        width: 223px;
-      }
-      .avatar-uploader-icon {
-        font-size: 28px;
-        color: #8c939d;
-        line-height: 100px;
-        text-align: center;
-      }
-      /deep/ .avatar-uploader{
-          float: left;
-          margin-right: 10px;
-          .prev-image{
-              width: 100%;
-              height: 100%;
-              object-fit: fill;
-          }
-      }
-
-      .uploader-explain{
-        font-size: 12px;
-        color: #b9b7b7;
-        padding-left: 10px;
-        width: 200px;
-      }
+  
         //   上传文件
         .upload-fill{
             width: 100%;
@@ -559,6 +533,7 @@ $fontSizeSmall: 14px;
           width: 100px;
           height: 32px;
           margin-right: 10px;
+          border: 1px solid #E0E1E3;
           .el-button{
               border: none;
               padding: 11px 17px;
@@ -572,6 +547,7 @@ $fontSizeSmall: 14px;
                position: absolute;
                top: 40px;
                padding-bottom: 100px;
+               width: 100%;
               li{
                   width: 30%;
                     float: left;
@@ -587,6 +563,7 @@ $fontSizeSmall: 14px;
 // 富文本编辑器样式
 .editor-container{
     border-radius: 4px;
+    padding-top: 10px;
 }
 
 /deep/ .mce-panel{