更改富文本编辑器组件

operationSupport/src/components/Tinymce/components/EditorImage.vue

@@ -0,0 +1,153 @@
+<template>
+    <div class="upload-container">
+        <el-button
+            :style="{ background: color, borderColor: color }"
+            icon="el-icon-upload"
+            size="mini"
+            type="primary"
+            @click="dialogVisible = true"
+        >
+            upload
+        </el-button>
+
+        <el-dialog :visible.sync="dialogVisible" width="30%" :modal="false">
+            <el-upload
+                :multiple="false"
+                :limit="limit"
+                :file-list="fileList"
+                :show-file-list="true"
+                :on-remove="handleRemove"
+                :on-success="handleSuccess"
+                :before-upload="beforeUpload"
+                class="editor-slide-upload"
+                action="https://httpbin.org/post"
+                list-type="picture-card"
+            >
+                <el-button size="small" type="primary"> 点击选择图片 </el-button>
+            </el-upload>
+            <div class="file-img-btn">
+                <el-button @click="dialogVisible = false"> 取消上传 </el-button>
+                <el-button type="primary" @click="handleSubmit"> 确定上传 </el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+// import { getToken } from 'api/qiniu'
+
+export default {
+    name: 'EditorSlideUpload',
+    props: {
+        color: {
+            type: String,
+            default: '#1890ff'
+        },
+        limit: {
+            type: String,
+            default: '2'
+        }
+    },
+    data() {
+        return {
+            dialogVisible: false,
+            listObj: {},
+            fileList: []
+        };
+    },
+    methods: {
+        checkAllSuccess() {
+            return Object.keys(this.listObj).every((item) => this.listObj[item].hasSuccess);
+        },
+        handleSubmit() {
+            const arr = Object.keys(this.listObj).map((v) => this.listObj[v]);
+            if (!this.checkAllSuccess()) {
+                this.$message('请等待所有图片上传成功。 如果有网络问题，请刷新页面并重新上传! ');
+                return;
+            }
+            this.$emit('successCBK', arr);
+            this.listObj = {};
+            this.fileList = [];
+            this.dialogVisible = false;
+        },
+        handleSuccess(response, file) {
+            const uid = file.uid;
+            const objKeyArr = Object.keys(this.listObj);
+            for (let i = 0, len = objKeyArr.length; i < len; i++) {
+                if (this.listObj[objKeyArr[i]].uid === uid) {
+                    this.listObj[objKeyArr[i]].url = response.files.file;
+                    this.listObj[objKeyArr[i]].hasSuccess = true;
+                    return;
+                }
+            }
+        },
+        handleRemove(file) {
+            const uid = file.uid;
+            const objKeyArr = Object.keys(this.listObj);
+            for (let i = 0, len = objKeyArr.length; i < len; i++) {
+                if (this.listObj[objKeyArr[i]].uid === uid) {
+                    delete this.listObj[objKeyArr[i]];
+                    return;
+                }
+            }
+        },
+        beforeUpload(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!');
+            }
+            const _self = this;
+            const _URL = window.URL || window.webkitURL;
+            const fileName = file.uid;
+            this.listObj[fileName] = {};
+            return new Promise((resolve, reject) => {
+                const img = new Image();
+                img.src = _URL.createObjectURL(file);
+                img.onload = function () {
+                    _self.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height };
+                };
+                resolve(true);
+            });
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.editor-slide-upload {
+    margin-bottom: 20px;
+    ::v-deep .el-upload--picture-card {
+        width: 100%;
+    }
+}
+::v-deep .el-dialog__body {
+    padding: 20px;
+    border-radius: 4px;
+    box-shadow: 0px 1px 2px 1px rgb(161, 159, 159);
+}
+::v-deep .el-upload--picture-card {
+    width: 27% !important;
+}
+
+.el-upload-list--picture-card {
+    display: flex;
+}
+.editor-slide-upload {
+    text-align: center;
+    padding: 20px;
+    ul {
+        display: flex;
+    }
+}
+.file-img-btn {
+    text-align: end;
+    padding: 10px;
+}
+</style>

operationSupport/src/components/Tinymce/dynamicLoadScript.js

@@ -0,0 +1,59 @@
+let callbacks = []
+
+function loadedTinymce() {
+  // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2144
+  // check is successfully downloaded script
+  return window.tinymce
+}
+
+const dynamicLoadScript = (src, callback) => {
+  const existingScript = document.getElementById(src)
+  const cb = callback || function() {}
+
+  if (!existingScript) {
+    const script = document.createElement('script')
+    script.src = src // src url for the third-party library being loaded.
+    script.id = src
+    document.body.appendChild(script)
+    callbacks.push(cb)
+    const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd
+    onEnd(script)
+  }
+
+  if (existingScript && cb) {
+    if (loadedTinymce()) {
+      cb(null, existingScript)
+    } else {
+      callbacks.push(cb)
+    }
+  }
+
+  function stdOnEnd(script) {
+    script.onload = function() {
+      // this.onload = null here is necessary
+      // because even IE9 works not like others
+      this.onerror = this.onload = null
+      for (const cb of callbacks) {
+        cb(null, script)
+      }
+      callbacks = null
+    }
+    script.onerror = function() {
+      this.onerror = this.onload = null
+      cb(new Error('Failed to load ' + src), script)
+    }
+  }
+
+  function ieOnEnd(script) {
+    script.onreadystatechange = function() {
+      if (this.readyState !== 'complete' && this.readyState !== 'loaded') return
+      this.onreadystatechange = null
+      for (const cb of callbacks) {
+        cb(null, script) // there is no way to catch loading errors in IE8
+      }
+      callbacks = null
+    }
+  }
+}
+
+export default dynamicLoadScript

operationSupport/src/components/Tinymce/index.vue

@@ -0,0 +1,258 @@
+<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>
+</template>
+
+<script>
+/**
+ * docs:
+ * https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html#tinymce
+ */
+import editorImage from './components/EditorImage';
+import plugins from './plugins';
+import toolbar from './toolbar';
+import load from './dynamicLoadScript';
+
+// 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';
+
+export default {
+    name: 'Tinymce',
+    components: { editorImage },
+    props: {
+        id: {
+            type: String,
+            default: function () {
+                return 'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '');
+            }
+        },
+        value: {
+            type: String,
+            default: ''
+        },
+        toolbar: {
+            type: Array,
+            required: false,
+            default() {
+                return [];
+            }
+        },
+        menubar: {
+            type: String,
+            default: 'file edit insert view format table'
+        },
+        height: {
+            type: [Number, String],
+            required: false,
+            default: 360
+        },
+        width: {
+            type: [Number, String],
+            required: false,
+            default: '500'
+        }
+    },
+    data() {
+        return {
+            hasChange: false,
+            hasInit: false,
+            tinymceId: this.id,
+            fullscreen: false,
+            languageTypeList: {
+                en: 'en',
+                zh: 'zh_CN',
+                es: 'es_MX',
+                ja: 'ja'
+            }
+        };
+    },
+    computed: {
+        language() {
+            return this.languageTypeList[this.$store.getters.language];
+        },
+        containerWidth() {
+            const width = this.width;
+            if (/^[\d]+(\.[\d]+)?$/.test(width)) {
+                // matches `100`, `'100'`
+                return `${width}px`;
+            }
+            return width;
+        }
+    },
+    watch: {
+        value(val) {
+            if (!this.hasChange && this.hasInit) {
+                this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val || ''));
+            }
+        },
+        language() {
+            this.destroyTinymce();
+            this.$nextTick(() => this.initTinymce());
+        }
+    },
+    mounted() {
+        this.init();
+    },
+    activated() {
+        if (window.tinymce) {
+            this.initTinymce();
+        }
+    },
+    deactivated() {
+        this.destroyTinymce();
+    },
+    destroyed() {
+        this.destroyTinymce();
+    },
+    methods: {
+        init() {
+            // dynamic load tinymce from cdn
+            load(tinymceCDN, (err) => {
+                if (err) {
+                    this.$message.error(err.message);
+                    return;
+                }
+                this.initTinymce();
+            });
+        },
+        initTinymce() {
+            const _this = this;
+            window.tinymce.init({
+                language: this.language,
+                selector: `#${this.tinymceId}`,
+                height: this.height,
+                body_class: 'panel-body ',
+                object_resizing: false,
+                toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
+                menubar: this.menubar,
+                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'],
+                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.hasChange = true;
+                        this.$emit('input', editor.getContent());
+                    });
+                },
+                setup(editor) {
+                    editor.on('FullscreenStateChanged', (e) => {
+                        _this.fullscreen = e.state;
+                    });
+                },
+                // 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
+                // 整合七牛上传
+                // 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
+                // },
+                // 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);
+                //   });
+                // },
+            });
+        },
+        destroyTinymce() {
+            const tinymce = window.tinymce.get(this.tinymceId);
+            if (this.fullscreen) {
+                tinymce.execCommand('mceFullScreen');
+            }
+
+            if (tinymce) {
+                tinymce.destroy();
+            }
+        },
+        setContent(value) {
+            window.tinymce.get(this.tinymceId).setContent(value);
+        },
+        getContent() {
+            window.tinymce.get(this.tinymceId).getContent();
+        },
+        imageSuccessCBK(arr) {
+            arr.forEach((v) => window.tinymce.get(this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`));
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.tinymce-container {
+    position: relative;
+    line-height: normal;
+}
+
+.tinymce-container {
+    ::v-deep {
+        .mce-fullscreen {
+            z-index: 10000;
+        }
+    }
+}
+
+.tinymce-textarea {
+    visibility: hidden;
+    z-index: -1;
+}
+
+.editor-custom-btn-container {
+    position: absolute;
+    right: 4px;
+    top: 4px;
+    /*z-index: 2005;*/
+}
+
+.fullscreen .editor-custom-btn-container {
+    z-index: 10000;
+    position: fixed;
+}
+
+.editor-upload-btn {
+    display: inline-block;
+}
+
+::v-deep #mceu_28-body {
+    display: none !important;
+}
+</style>

operationSupport/src/components/Tinymce/plugins.js

@@ -0,0 +1,8 @@
+// Any plugins you want to use has to be imported
+// Detail plugins list see https://www.tinymce.com/docs/plugins/
+// Custom builds see https://www.tinymce.com/download/custom-builds/
+
+const plugins = ['fullscreen'];
+// const plugins = [' anchor autolink autosave code codesample colorpicker colorpicker contextmenu hr  link  noneditable pagebreak paste  print save  spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount']
+
+export default plugins;

operationSupport/src/components/Tinymce/toolbar.js

@@ -0,0 +1,8 @@
+// Here is a list of the toolbar
+// Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
+
+const toolbar = [
+    'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample fullscreen'
+];
+
+export default toolbar;

operationSupport/src/components/common/buildingTree.vue

@@ -1,20 +1,48 @@
 <template>
     <div class="organ-tree">
-        <el-input v-model="filterText" placeholder="请输入关键字" suffix-icon="el-icon-search"></el-input>
-        <div class="tree-style-box no-scrollbar">
-            <el-tree
-                class="tree-style"
-                :data="organList"
-                ref="tree"
-                node-key="id"
-                :highlight-current="true"
-                :props="defaultProps"
-                :expand-on-click-node="false"
-                @node-click="treeClick"
-                default-expand-all
-                :filter-node-method="filterNode"
-            >
-            </el-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"></el-input>
+            <div class="tree-style-box no-scrollbar">
+                <el-tree
+                    class="tree-style"
+                    :data="organList"
+                    ref="tree"
+                    node-key="id"
+                    :highlight-current="true"
+                    :props="defaultProps"
+                    :expand-on-click-node="false"
+                    @node-click="treeClick"
+                    @check="clickCheckTree"
+                    :default-expand-all="defaultExpandAllTree"
+                    :filter-node-method="filterNode"
+                    :show-checkbox="showCheckboxTree"
+                    :accordion="accordion"
+                >
+                </el-tree>
+            </div>
+        </div>
+        <div v-show="!showHouseTree">
+            <el-input v-model="selectPeople" placeholder="选择人员" maxlength="10" suffix-icon="el-icon-search"></el-input>
+            <div class="tree-style-box no-scrollbar">
+                <el-tree
+                    class="tree-style"
+                    :data="dataPeopleList"
+                    ref="treePeople"
+                    node-key="id"
+                    :highlight-current="true"
+                    :props="defaultPropsPeople"
+                    :expand-on-click-node="false"
+                    @node-click="treeClick"
+                    @check="clickCheckTreePeople"
+                    :default-expand-all="defaultExpandAllTree"
+                    :filter-node-method="filterNode"
+                    :show-checkbox="showCheckboxTree"
+                    :accordion="accordionPeople"
+                    :selectAll="selectAll"
+                >
+                </el-tree>
+            </div>
         </div>
     </div>
 </template>
@@ -22,14 +50,49 @@
 <script>
 export default {
     name: 'buildingTree',
-    props: ['buildingType'],
+    props: {
+        buildingType: { type: String, default: 'buildingType' },
+        showCheckboxTree: {
+            //显示多选框
+            type: Boolean,
+            default: false
+        },
+        defaultExpandAllTree: {
+            //是否默认展开所有节点
+            type: Boolean,
+            default: true
+        },
+        showHouseTree: {
+            //显示房间树
+            type: Boolean,
+            default: true
+        },
+
+        accordion: {
+            //房间展开手风琴
+            type: Boolean,
+            default: false
+        },
+        accordionPeople: {
+            //人员展开手风琴
+            type: Boolean,
+            default: false
+        }
+    },
     data() {
         return {
             filterText: '',
+            selectHouse: '',
+            selectPeople: '',
             organList: [],
+            dataPeopleList: [],
             defaultProps: {
                 children: 'children',
                 label: 'name'
+            },
+            defaultPropsPeople: {
+                children: 'children',
+                label: 'label'
             }
         };
     },
@@ -38,7 +101,86 @@ export default {
             this.$refs.tree.filter(val);
         }
     },
+    computed: {},
     methods: {
+        // 选中所有房间
+        selectAllHouse() {
+            this.$nextTick(() => {
+                this.$refs.tree.setCheckedNodes(this.organList);
+                this.clickCheckTree();
+            });
+        },
+        // 选中指定房间
+        selectHouseOr() {
+            this.$nextTick(() => {
+                this.$refs.tree.setCheckedKeys([]);
+                this.clickCheckTree();
+            });
+        },
+        // 选中所有人员
+        selectAllPeople() {
+            this.$nextTick(() => {
+                this.$refs.treePeople.setCheckedNodes(this.dataPeopleList);
+                this.clickCheckTreePeople();
+            });
+        },
+        // 选中指定人员
+        selectPeopleOr() {
+            this.$nextTick(() => {
+                this.$refs.treePeople.setCheckedKeys([]);
+                this.clickCheckTreePeople();
+            });
+        },
+        // 获取人员
+        getPeopleList() {
+            this.$http.get('/sc-user-center/user/findUserList').then(({ status, data, msg }) => {
+                if (status === 0) {
+                    this.dataPeopleList = data;
+                    this.$emit('dataPeople', data);
+                } else {
+                    this.$message(warning, '获取人员失败,请稍后重试');
+                }
+                console.log('获取人员', data);
+            });
+        },
+        getSelect(data) {
+            var str = [];
+            const getStr = function (list) {
+                list.forEach(function (row) {
+                    if (row.children) {
+                        getStr(row.children);
+                    } else {
+                        str.push(row.name);
+                    }
+                });
+            };
+            getStr(data);
+            console.log('getStr', str);
+        },
+        // 返回选中房间的数据
+        clickCheckTree(val) {
+            let tree = this.$refs.tree;
+            let array = tree.getCheckedKeys().concat(tree.getHalfCheckedKeys());
+            let arrays = this.getSelect(tree.getCheckedNodes());
+            this.selectHouse = array;
+            this.$emit('selectData', arrays);
+        },
+        // 返回选中人员的数据
+        clickCheckTreePeople(val) {
+            let nameArr = [];
+            let tree = this.$refs.treePeople;
+            let array = tree.getCheckedNodes();
+            let arrays = tree.getCheckedKeys();
+            for (let index = 0; index < array.length; index++) {
+                const element = array[index];
+                nameArr.push(element.label);
+                if (Array.isArray(element) && element.length > 0) {
+                    nameArr.push(element.label);
+                }
+            }
+            this.selectPeople = nameArr.toString();
+            this.$emit('selectPeople', arrays);
+        },
         dimension(arr) {
             arr.map((item, index) => {
                 if (!!item.children & (item.type !== 'unit')) {
@@ -104,6 +246,7 @@ export default {
     },
     created() {
         this.getOrgTreeList();
+        this.getPeopleList();
     }
 };
 </script>

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

@@ -5,12 +5,11 @@
                 <span>所属社区: </span><span class="text-right">{{ dataDetail.communityName }}</span>
             </div>
             <div class="prev-text">
-                <span>发布对象: </span><span class="text-right">{{ dataDetail }}</span
-                ><span>查看详情</span>
+                <span>发布对象: </span><span class="text-right">{{}}</span><span>查看详情</span>
             </div>
             <div class="prev-text">
                 <span>通知类型: </span
-                ><span class="text-right">{{ dataDetail.type == 0 ? '物业通知' : dataDetail.type == 0 ? '社区活动' : '其他' }}</span>
+                ><span class="text-right">{{ dataDetail.type == 0 ? '物业通知' : dataDetail.type == 1 ? '社区活动' : '其他' }}</span>
             </div>
             <div class="prev-text">
                 <span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 标题:</span><span class="text-right">{{ dataDetail.title }}</span>
@@ -21,7 +20,9 @@
             <div class="prev-text">
                 <span>通知内容:</span><span class="text-right">{{ dataDetail.content }}</span>
             </div>
-            <div class="prev-text"><span>文件上传:</span><span class="text-right">文件名称</span></div>
+            <div class="prev-text">
+                <span>文件上传:</span><span class="text-right">文件名称{{ dataDetail.filePath }}</span>
+            </div>
         </div>
     </div>
 </template>

operationSupport/src/views/propertyManagement/index.vue

@@ -261,13 +261,11 @@ export default {
             cols: [
                 {
                     label: '所属社区',
-                    prop: 'communityName',
-                    width: 160
+                    prop: 'communityName'
                 },
                 {
                     label: '房间地址',
                     prop: 'houseId',
-                    width: 200,
                     slot: 'house'
                 },
                 {
@@ -285,34 +283,28 @@ export default {
                         } else {
                             return '其他';
                         }
-                    },
-                    width: 150
+                    }
                 },
                 {
                     label: '投诉人',
-                    prop: 'userName',
-                    width: 120
+                    prop: 'userName'
                 },
                 {
                     label: '联系电话',
-                    prop: 'phone',
-                    width: 160
+                    prop: 'phone'
                 },
                 {
                     label: '投诉时间',
-                    prop: 'createDate',
-                    width: 200
+                    prop: 'createDate'
                 },
                 {
                     label: '内容',
-                    prop: 'content',
-                    width: 350
+                    prop: 'content'
                 },
                 {
                     label: '状态',
                     prop: 'handleStatus',
-                    slot: 'status',
-                    width: 130
+                    slot: 'status'
                 },
 
                 {

operationSupport/src/views/propertyManagement/inform.vue

@@ -1,10 +1,9 @@
 <template>
     <div class="inform">
         <div class="search">
-            <el-input placeholder="请输入标题" class="search-input" clearable v-model="mixins_query.location"></el-input>
+            <el-input placeholder="请输入标题" class="search-input" clearable v-model="mixins_query.title"></el-input>
             <el-select placeholder="请选择所属社区" v-model="mixins_query.communityId" clearable>
                 <el-option v-for="(item, index) in communityList" :key="index" :label="item.label" :value="item.id"></el-option>
-                <!-- <el-option v-for="(item, index) in communityList" :key="index" :label="item.label" :value="item.regionId"></el-option> -->
             </el-select>
             <el-date-picker
                 v-model="searchTime"
@@ -26,7 +25,7 @@
             <div class="roles-wrap">
                 <zz-table
                     :cols="cols"
-                    :settings="{ showNumber: true, stripe: true, showNumberWidth: '120' }"
+                    :settings="{ showNumber: true, stripe: true, showNumberWidth: '100' }"
                     :data="mixins_list"
                     :pageset="mixins_pageset"
                     @page-change="pageChange"
@@ -46,7 +45,7 @@
             </div>
             <!-- 添加弹框 -->
             <div class="dialog-info">
-                <el-dialog :visible.sync="centerDialogVisible" width="986px" :close-on-click-modal="false">
+                <el-dialog :visible.sync="centerDialogVisible" width="1086px" :close-on-click-modal="false">
                     <div class="dialog">
                         <div class="dialog-header">
                             <i class="el-dialog__close el-icon el-icon-close" @click="dialogButton('clear')"></i>
@@ -68,6 +67,7 @@
                                                 v-model="ruleForm.popCommunityId"
                                                 clearable
                                                 class="dialog-select"
+                                                @change="changeCommunity"
                                             >
                                                 <el-option
                                                     v-for="(item, index) in communityList"
@@ -84,33 +84,28 @@
                                                         label="社区住户"
                                                         name="type"
                                                         v-model="ruleForm.issueRoom.checkAll"
+                                                        @change="changeCheckboxRoom"
                                                     ></el-checkbox>
-                                                    <el-radio-group v-model="ruleForm.issueRoom.radioRoom" @change="changeRadioRoom">
+                                                    <el-radio-group
+                                                        v-model="ruleForm.issueRoom.radioRoom"
+                                                        :disabled="!ruleForm.issueRoom.checkAll"
+                                                        @change="changeRadioRoom"
+                                                    >
                                                         <el-radio label="全部房间"></el-radio>
                                                         <el-radio label="指定房间"></el-radio>
                                                     </el-radio-group>
                                                 </div>
-                                                <div class="selet-room">
-                                                    <!-- <building-tree
+                                                <div class="selet-room" v-show="ruleForm.issueRoom.checkAll">
+                                                    <building-tree
                                                         @buildingInformation="buildingInformation"
                                                         :buildingType="1"
-                                                        v-if="!showaddDialog"
-                                                    ></building-tree> -->
-
-                                                    <el-select
-                                                        multiple
-                                                        v-model="selectRoom"
-                                                        collapse-tags
-                                                        :disabled="!ruleForm.disabledRoom"
-                                                    >
-                                                        <el-option
-                                                            v-for="item in optionsRoom"
-                                                            :key="item.value"
-                                                            :label="item.label"
-                                                            :value="item.value"
-                                                        >
-                                                        </el-option>
-                                                    </el-select>
+                                                        :showCheckboxTree="true"
+                                                        :defaultExpandAllTree="false"
+                                                        :accordion="true"
+                                                        :selectAll="true"
+                                                        @selectData="selectDataHouseTree"
+                                                        ref="selectTreeHouse"
+                                                    ></building-tree>
                                                 </div>
                                             </div>
                                             <div class="issueRoom">
@@ -121,21 +116,28 @@
                                                         v-model="ruleForm.issueRoom.staff"
                                                         @change="changeCheckboxStaffRoom"
                                                     ></el-checkbox>
-                                                    <el-radio-group v-model="ruleForm.issueRoom.radioStaff" @change="changeRadioStaffRoom">
+                                                    <el-radio-group
+                                                        v-model="ruleForm.issueRoom.radioStaff"
+                                                        :disabled="!ruleForm.issueRoom.staff"
+                                                        @change="changeRadioStaffRoom"
+                                                    >
                                                         <el-radio label="全部员工"></el-radio>
                                                         <el-radio label="指定员工"></el-radio>
                                                     </el-radio-group>
                                                 </div>
-                                                <div class="selet-room">
-                                                    <el-select multiple v-model="selectStaff" :disabled="!ruleForm.disabledStaffRoom">
-                                                        <el-option
-                                                            v-for="item in optionsStaff"
-                                                            :key="item.value"
-                                                            :label="item.label"
-                                                            :value="item.value"
-                                                        >
-                                                        </el-option>
-                                                    </el-select>
+                                                <div class="selet-room" v-show="ruleForm.issueRoom.staff">
+                                                    <!-- @buildingInformation="buildingInformation" -->
+                                                    <building-tree
+                                                        ref="selectTreePeoples"
+                                                        :buildingType="1"
+                                                        :showCheckboxTree="true"
+                                                        :defaultExpandAllTree="false"
+                                                        :showHouseTree="false"
+                                                        :accordionPeople="true"
+                                                        :selectAll="true"
+                                                        @dataPeople="dataPeople"
+                                                        @selectPeople="selectPeople"
+                                                    ></building-tree>
                                                 </div>
                                             </div>
                                         </el-form-item>
@@ -145,6 +147,7 @@
                                                 @change="changeInformType"
                                                 clearable
                                                 class="dialog-select"
+                                                placeholder="请选择通知类型"
                                             >
                                                 <el-option
                                                     v-for="(item, index) in informTypes"
@@ -164,11 +167,10 @@
                                                 <el-radio label="否"></el-radio>
                                             </el-radio-group>
                                         </el-form-item>
-                                        <el-form-item label="请选择时间" prop="activeTime">
+                                        <el-form-item label="选择时间" prop="activeTime">
                                             <el-date-picker
                                                 v-model="ruleForm.activeTime"
-                                                value-format="yyyy-MM-dd"
-                                                type="daterange"
+                                                type="datetimerange"
                                                 range-separator="至"
                                                 start-placeholder="开始日期"
                                                 end-placeholder="结束日期"
@@ -176,7 +178,7 @@
                                                 :editable="false"
                                             ></el-date-picker>
                                         </el-form-item>
-                                        <el-form-item label="主题图片" prop="image" v-if="showUploadImage">
+                                        <!-- <el-form-item label="主题图片" prop="image" v-if="showUploadImage">
                                             <div>
                                                 <el-upload
                                                     class="avatar-uploader"
@@ -209,17 +211,18 @@
                                                     >
                                                 </span>
                                             </div></el-form-item
-                                        >
+                                        > -->
                                         <el-form-item label="通知内容" prop="informContent">
                                             <!-- tui-editor 富文本编辑器   -->
                                             <div class="editor-container">
-                                                <markdown-editor
+                                                <!-- <markdown-editor
                                                     ref="markdownEditor"
                                                     v-model="markdownEditorContent"
                                                     :language="language"
                                                     height="180px"
                                                     width="543"
-                                                />
+                                                /> -->
+                                                <tinymce v-model="editorContent" :height="140" :width="510" />
                                             </div>
                                             <!-- <el-button type="primary" icon="el-icon-document" @click="getHtml"> 预览 </el-button> -->
                                         </el-form-item>
@@ -235,6 +238,7 @@
                                                     :limit="3"
                                                     :on-exceed="handleExceed"
                                                     :file-list="fileList"
+                                                    :on-success="successFile"
                                                 >
                                                     <el-button size="small" icon="el-icon-paperclip">选择附件</el-button>
                                                     <div slot="tip" class="el-upload-text">
@@ -243,6 +247,7 @@
                                                 </el-upload>
                                             </div>
                                         </el-form-item>
+
                                         <el-form-item class="dialog-footer">
                                             <span>
                                                 <el-button type="primary" @click="dialogButton('clear')" plain>取消</el-button>
@@ -275,13 +280,21 @@
                                         <div></div>
                                         <div class="content">
                                             <div class="content-text">
-                                                <div v-html="html" id="content" />
+                                                <div v-html="editorContent" id="content" />
                                             </div>
                                             <!-- <div><img style="width: 100px; height: 100px" :src="imageUrl" alt="" /></div> -->
                                             <div class="content-inform">
-                                                <div>滨江华府物业管理公司</div>
-                                                <div>2021-11-11</div>
-                                                <div>物业电话：010-12345678</div>
+                                                <div>{{ !showDetail ? rowDetail.communityName : popCommunityName }}</div>
+                                                <div>{{ new Date() | filterTime }}</div>
+                                                <div>物业电话：{{ $store.state.cruUserInfo.phone }}</div>
+                                            </div>
+                                            <div v-if="fileList">
+                                                <div class="file-name" v-for="(item, index) of fileList" :key="index">
+                                                    <span class="file-name-left"><i class="el-icon-paperclip"></i> </span>
+                                                    <span class="file-name-right">
+                                                        {{ item }}
+                                                    </span>
+                                                </div>
                                             </div>
                                         </div>
                                         <div></div>
@@ -299,16 +312,18 @@
 <script>
 import list from '@utils/list.js';
 import previeInform from './common/previeInform';
-// tuieditor富文本编辑器
-import MarkdownEditor from '@/components/MarkdownEditor';
+// Tinymce 富文本编辑器
+import Tinymce from '@/components/Tinymce';
 const content = `您好！为了给大家提供一个舒适、卫生的生活环境，进一步有效控制小区“四害”孳生，减少四害对大家生活影响，管理处计划12月份安排小区公共区域集中消杀4次。`;
 export default {
     mixins: [list],
-    components: { previeInform, MarkdownEditor },
+    components: { previeInform, Tinymce },
     data() {
         let _this = this;
         return {
+            popCommunityName: '',
             // 文件上传
+            uploadImageUrl: '/sc-community-web/upload/uploadFile',
             fileList: [],
             // 显示图片上传
             imageUrl: '',
@@ -323,7 +338,7 @@ export default {
             showDetail: true,
             rowDetail: '',
             // 富文本编辑器
-            markdownEditorContent: content,
+            editorContent: content,
             html: content,
             languageTypeList: {
                 en: 'en_US',
@@ -333,17 +348,7 @@ export default {
             // 查询的时间
             searchTime: [],
             // 选择的房间
-            selectRoom: [],
-            optionsRoom: [
-                {
-                    value: '选项1',
-                    label: '滨江华府-A栋-10单元-1001,滨江华府-A栋-10单元-1002'
-                },
-                {
-                    value: '选项2',
-                    label: '滨江华府-A栋-10单元-1002'
-                }
-            ],
+            optionsRoom: [],
             // 选择的员工
             selectStaff: [],
             optionsStaff: [
@@ -368,7 +373,7 @@ export default {
                 },
                 disabledRoom: false, //单选框是否禁用
                 disabledStaffRoom: false,
-                informType: '物业通知', //通知类型
+                informType: '', //通知类型
                 title: '', //标题
                 exigencyOr: '是', //是否紧急
                 exigencyText: true,
@@ -390,29 +395,26 @@ export default {
             // 通知类型
             informTypes: [
                 {
-                    status: 1,
+                    status: 0,
                     label: '物业通知'
                 },
                 {
-                    status: 2,
+                    status: 1,
                     label: '社区活动'
                 }
             ],
             cols: [
                 {
                     label: '标题',
-                    prop: 'title',
-                    width: 200
+                    prop: 'title'
                 },
                 {
                     label: '所属社区',
-                    prop: 'communityName',
-                    width: 200
+                    prop: 'communityName'
                 },
                 {
                     label: '通知类型',
                     prop: 'type',
-                    width: 200,
                     format(val) {
                         if (val == 0) {
                             return '物业通知';
@@ -426,7 +428,6 @@ export default {
                 {
                     label: '是否紧急',
                     prop: 'urgentFlag',
-                    width: 210,
                     format(val) {
                         if (val == 0) {
                             return '不紧急';
@@ -440,21 +441,18 @@ export default {
                 {
                     label: '发布时间',
                     prop: 'pubDate',
-                    width: 240,
                     slot: 'releaseTime'
                 },
                 {
                     label: '状态',
                     prop: 'status',
-                    width: 190,
                     format(val) {
                         return val ? val : '已发布';
                     }
                 },
                 {
                     label: '发布人',
-                    prop: 'pubPeople',
-                    width: 210
+                    prop: 'pubPeople'
                 },
                 {
                     label: '操作',
@@ -466,8 +464,16 @@ export default {
             // 显隐弹框
             centerDialogVisible: false,
             // 保存上传的文本
-            newConten: ''
+            newConten: '',
             // 获取的房间信息
+            houseData: [],
+            peopleData: [],
+            // 选中的房间
+            selectDataHouseTreeData: [],
+            // 选中的人员
+            selectDataPeopleTreeData: [],
+            // 文件上传地址
+            uploadFileUrl: []
         };
     },
     created() {
@@ -478,12 +484,6 @@ export default {
         this.mixins_dataUrl = '/sc-community-web/notice/page';
         this.mixins_query = {};
         this.mixins_search();
-        // 获取房间
-        let query = { buildingType: 1 };
-        this.$http.get('/sc-community/assets/tree/community/find', query).then((res) => {
-            this.optionsRoom = res.data;
-            console.log('获取房间', res);
-        });
     },
     computed: {
         language() {
@@ -495,21 +495,22 @@ export default {
         html(newv, oldv) {
             console.log('watch', newv, oldv);
         },
-        markdownEditorContent(newv, oldv) {
-            this.ruleForm.informContent = newv;
-            // if (newv != oldv) {
-            //     this.html = newv;
-            // }
-            console.log('watch markdownEditorContent', newv, oldv);
-            this.html = this.$refs.markdownEditor.getHtml();
-        },
         newConten(newv, oldv) {
             console.log('newConten', newv, oldv);
         }
     },
     methods: {
+        // 人员树
+        dataPeople(data) {
+            this.peopleData = data;
+            console.log('====================================');
+            console.log('人员', data);
+            console.log('====================================');
+        },
         // 房间树
         buildingInformation(data) {
+            this.houseData = data;
+            console.log('buildingInformation', data);
             if (!!data.type && data.type == 'community') {
                 this.mixins_query = { communityId: data.value, buildingType: 1 };
             } else {
@@ -522,10 +523,15 @@ export default {
         },
         // 上传文件
         handleRemove(file, fileList) {
-            console.log(file, fileList);
+            console.log('上传文件', file, fileList);
         },
         handlePreview(file) {
-            console.log(file);
+            console.log('点击文件', file);
+        },
+        successFile(file, fileList) {
+            this.fileList.push(fileList.name);
+            this.uploadFileUrl.push(fileList.response.data);
+            console.log('上传文件successFile', this.uploadFileUrl);
         },
         handleExceed(files, fileList) {
             this.$message.warning(
@@ -533,14 +539,23 @@ export default {
             );
         },
         beforeRemove(file, fileList) {
-            return this.$confirm(`确定移除 ${file.name}？`);
+            let removeName = this.fileList.filter((item) => {
+                return item != file.name;
+            });
+            let removeUrl = this.fileList.filter((item) => {
+                return item != file.name;
+            });
+            this.fileList = removeName;
+            this.uploadFileUrl = removeUrl;
+            console.log('点击一处', this.fileList);
         },
+
         /**上传图片*/
         clickUploadImage() {
             this.showImageUrlTwo = true;
             this.showUploadImageText = false;
             this.html = this.$refs.markdownEditor.getHtml();
-            console.log('富文本内容', this.markdownEditorContent);
+            console.log('富文本内容', this.editorContent);
         },
         handleAvatarSuccess(res, file) {
             // this.imageUrl = URL.createObjectURL(file.raw);
@@ -581,28 +596,69 @@ export default {
         handleDownload(file) {
             console.log(file);
         },
-        /**监听单选框变化*/
+        // 下拉框的变化
+        changeCommunity(val) {
+            for (let index = 0; index < this.communityList.length; index++) {
+                const element = this.communityList[index];
+                if (element.id == val) {
+                    return (this.popCommunityName = element.label);
+                }
+            }
+        },
+        // 选中的房间
+        selectDataHouseTree(val) {
+            this.selectDataHouseTreeData = val;
+            console.log('选中的房间', val);
+        },
+        // 选择的人员
+        selectPeople(val) {
+            this.selectDataPeopleTreeData = val;
+            console.log('选择的人员', val);
+        },
+        /**监听指定房间单选框变化*/
         changeRadioRoom(val) {
+            this.showChangeRoom = false;
             if (val == '指定房间') {
                 this.ruleForm.disabledRoom = true;
+                this.$refs.selectTreeHouse.selectHouseOr();
             } else {
                 this.ruleForm.disabledRoom = false;
+                this.$refs.selectTreeHouse.selectAllHouse();
             }
             console.log('监听房间单选框变化', val);
         },
-        // 监听复选框变化
+        //选择员工复选框变化
         changeCheckboxStaffRoom(val) {
             console.log('监听复选框变化', val);
             if (val) {
                 this.ruleForm.issueRoom.radioStaff = '全部员工';
+                this.ruleForm.issueRoom.checkAll = false;
+                this.ruleForm.issueRoom.radioRoom = '';
+                this.$refs.selectTreePeoples.selectAllPeople();
+            } else {
+                this.ruleForm.issueRoom.radioStaff = '';
+                this.ruleForm.issueRoom.checkAll = true;
+                this.ruleForm.issueRoom.radioRoom = '全部房间';
+            }
+        },
+        // 选择房间复选框变化
+        changeCheckboxRoom(val) {
+            if (val) {
+                this.$refs.selectTreeHouse.selectAllHouse();
+                this.ruleForm.issueRoom.staff = false;
+                this.ruleForm.issueRoom.checkAll = true;
+                this.ruleForm.issueRoom.radioRoom = '全部房间';
+                this.ruleForm.issueRoom.radioStaff = '';
             }
         },
         // 指定员工
         changeRadioStaffRoom(val) {
             if (val == '指定员工') {
                 this.ruleForm.disabledStaffRoom = true;
+                this.$refs.selectTreePeoples.selectPeopleOr();
             } else {
                 this.ruleForm.disabledStaffRoom = false;
+                this.$refs.selectTreePeoples.selectAllPeople();
             }
             console.log('监听员工单选框变化', val, this.ruleForm.issueRoom.staff);
         },
@@ -616,8 +672,10 @@ export default {
         },
         // 发布活动类型
         changeInformType(val) {
-            if (val == 2) {
+            if (val == 0) {
                 this.showUploadImage = true;
+            } else {
+                this.showUploadImage = false;
             }
             console.log('发布活动类型', val);
         },
@@ -658,37 +716,42 @@ export default {
          * @return {void}
          * */
         dialogButton(type) {
+            // 获取发布到的userid
+            // this.$http.get('/sc-community-web/notice/queryHouseUser', this.selectDataHouseTreeData).then((res) => console.log('uid', res));
             console.log('点击发布', this.selectStaff);
-            // console.log('点击发布===========', this.ruleForm.popCommunityId);
+            console.log('点击发布===========', this.ruleForm);
             // console.log('获取富文本内容', this.html);
             if (type === 'prev') {
                 this.$refs['ruleForm'].validate((valid) => {
                     if (valid) {
-                        this.showDetail = false;
+                        // this.showDetail = false;
+
                         let detaH = this.$moment(new Date()).format('HH');
                         let detaM = this.$moment(new Date()).format('mm');
                         let detaS = this.$moment(new Date()).format('ss');
                         let d = detaH + ':' + detaM + ':' + detaS;
-                        let startTime = `${this.ruleForm.activeTime[0]}T${d}`;
-                        let endTime = `${this.ruleForm.activeTime[1]}T${d}`;
-
+                        // let startTime = `${this.ruleForm.activeTime[0]}T${d}`;
+                        // let endTime = `${this.ruleForm.activeTime[1]}T${d}`;
+                        console.log('startTime', this.ruleForm.activeTime);
+                        let startTime = this.$moment(this.ruleForm.activeTime[0]).format(`YYYY-MM-DDTHH:mm:ss`);
+                        let endTime = this.$moment(this.ruleForm.activeTime[1]).format(`YYYY-MM-DDTHH:mm:ss`);
                         let query = {
                             communityId: this.ruleForm.popCommunityId,
-                            content: this.html,
+                            content: this.editorContent,
+                            startTime: startTime,
                             endTime: endTime,
-                            //   filePath": "",
+                            filePath: this.uploadFileUrl,
                             id: 1,
                             pubDate: this.$moment(new Date()).format(`YYYY-MM-DDTHH:mm:ss`),
                             //   pubPeople:ruleForm.informType,
                             //   pubStatus: "",
-                            startTime: startTime,
                             // themePictrue: '',
                             userId: [1, 2, 3],
                             title: this.ruleForm.title,
-                            type: this.ruleForm.informType === '物业通知' ? 0 : 1,
-                            urgentFlag: this.ruleForm.exigencyOr == '是' ? 1 : 0
-                            //   userId: [],
-                            //   userType: 0
+                            type: this.ruleForm.informType,
+                            urgentFlag: this.ruleForm.exigencyOr == '是' ? 1 : 0,
+                            userType:
+                                this.ruleForm.issueRoom.radioStaff == '全部员工' || this.ruleForm.issueRoom.radioStaff == '指定员工' ? 1 : 0
                         };
                         this.$http.post('/sc-community-web/notice/add', query).then((res) => {
                             console.log('点击发布', res);
@@ -724,9 +787,12 @@ export default {
             console.log('查看详情', row);
             this.centerDialogVisible = true;
             this.showDetail = false;
-            this.ruleForm.title = row.managementName;
-            this.ruleForm.newPhone = row.phone;
-            this.rowDetail = row;
+            this.$http.get('/sc-community-web/notice/find/' + row.id).then((res) => {
+                this.rowDetail = row;
+                console.log('查看详情', res);
+            });
+            // this.ruleForm.title = row.managementName;
+            // this.ruleForm.newPhone = row.phone;
         }
     }
 };

operationSupport/src/views/propertyManagement/phone.vue

@@ -150,7 +150,6 @@ export default {
                 {
                     label: '所属社区',
                     prop: 'communityId',
-                    width: 370,
                     format(val) {
                         let va = '';
                         _this.$store.getters['getAreaSelect'].forEach((element) => {
@@ -163,13 +162,11 @@ export default {
                 },
                 {
                     label: '管理处名称',
-                    prop: 'name',
-                    width: 500
+                    prop: 'name'
                 },
                 {
                     label: '电话',
-                    prop: 'telephone',
-                    width: 520
+                    prop: 'telephone'
                 },
                 {
                     label: '操作',

operationSupport/src/views/propertyManagement/style.scss

@@ -368,9 +368,25 @@ $fontSizeSmall: 14px;
                 margin-left: 15px;
             }
         }
+        /deep/ .el-range-editor--small.el-input__inner{
+            width: 100% !important;
+        }
         .issueRoom{
             display: flex;
             justify-content: space-between;
+            .radio-room{
+                margin-right:10px;
+            }
+            .organ-tree{
+                padding: 0 !important;
+                width: auto;
+                /deep/ .tree-style-box{
+                    margin:0px 0 5px 0;
+                    border-radius: 4px;
+                }
+            }
+           
+            // justify-content: space-between;
         }
         }
         .dialog-right{
@@ -462,7 +478,7 @@ $fontSizeSmall: 14px;
                 text-indent: 2em;
                 background-color: #fff;
                /deep/ img{
-                    width: 97%;
+                    width: 100%;
                 }
             }
             .content-inform{
@@ -472,7 +488,21 @@ $fontSizeSmall: 14px;
                 :first-child{
                     color: #373B49;
                 }
+              
              }
+             .file-name{
+                 margin: 5px;
+                border-radius: 24px ;
+                width: 90%;
+                background: #fafcff;
+                .file-name-left{
+                    color: #0EAEFF ;
+                    font-size: 14px;
+                }
+                .file-name-right{
+                    color: #424656;
+                }
+            }
         }
 
             }
@@ -516,13 +546,19 @@ $fontSizeSmall: 14px;
       }
         //   上传文件
         .upload-fill{
+            width: 100%;
             display: flex;
+            position: relative;
+            /deep/  .el-upload-list__item{
+                background: #f9f9f9 ;
+            }
         /deep/ .el-upload--text{
           width: 100px;
-          height: 30px;
+          height: 32px;
           margin-right: 10px;
           .el-button{
               border: none;
+              padding: 11px 17px;
           }
         }
         .el-upload-text{
@@ -530,27 +566,40 @@ $fontSizeSmall: 14px;
             color: #D8D8D8;
            }
           /deep/ .el-upload-list--text{
-               display: block !important;
                position: absolute;
-               top: 24px;
+               top: 40px;
                padding-bottom: 100px;
+              li{
+                  width: 30%;
+                    float: left;
+                    margin-right: 10px;
+                    vertical-align: middle;
+                    margin: 0 10px 0  0;
+              }
+          
            }
       }
       
 }
-// 编辑器样式
-/deep/ .te-markdown-tab-section {
-    display: none !important;
+// 富文本编辑器样式
+.editor-container{
+    border-radius: 4px;
 }
-/deep/.te-mode-switch-section {
-    display: none !important;
+/deep/ mce-branding,mce-widget,mce-label,mce-flow-layout-item,mce-last{
+    display: none;
+}
+/deep/ .mce-panel{
+    border:0 solid #f5f1f1 !important; 
+}
+#mceu_17{
+    display: none;
 }
  // 弹框自定义滚动条
  .my-scroll-bar{
     height: 438px;
-/deep/ .gm-scrollbar.-horizontal .thumb{
-    height: 0 ;
-}
+    /deep/ .gm-scrollbar.-horizontal .thumb{
+        height: 0 ;
+    }
 }
 .opt{
     img{