Project-Annex/operationSupport/src/views/propertyManagement/inform.vue

<template>
    <div class="inform">
        <div class="search">
            <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-select>
            <el-date-picker
                v-model="searchTime"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                :editable="false"
            ></el-date-picker>
            <el-button type="primary" placeholder="状态" class="search-btn" @click="searchInfo" icon="el-icon-search">查询 </el-button>
            <div class="add">
                <img src="../../assets/img/btn_tianjia@2x.png" alt="" @click="add" />
            </div>
        </div>
        <div class="content">
            <div class="roles-wrap">
                <zz-table
                    :cols="cols"
                    :settings="{ showNumber: true, stripe: true, showNumberWidth: '100' }"
                    :data="mixins_list"
                    :pageset="mixins_pageset"
                    @page-change="pageChange"
                    :loading="mixins_onQuery"
                >
                    <template slot="pubPeople" slot-scope="scope">
                        {{ scope.row.pubPeople }}
                    </template>
                    <template slot-scope="scope" slot="releaseTime">
                        <div>
                            {{ scope.row.pubDate }}
                        </div>
                    </template>
                    <template slot-scope="scope" slot="opt">
                        <div class="opt" @click="clickDatail(scope.row)">
                            <img src="../../assets/img/icon_biaodan@2x.png" alt="" />
                        </div>
                    </template>
                </zz-table>
            </div>
            <!-- 添加弹框 -->
            <div class="dialog-info">
                <el-dialog :visible.sync="centerDialogVisible" width="1086px" :close-on-press-escape="false" :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>
                            <div class="dialogTitle" v-if="showDetail">
                                物业通知发布(
                                <span style="color: #ff7f7f"> *</span>
                                为必填项)
                            </div>
                            <div class="dialogTitle" v-else>{{ rowDetail.type == 0 ? '物业通知' : '社区活动' }}详情</div>
                        </div>

                        <div class="dialog-contents">
                            <div class="dialog-left">
                                <div v-if="showDetail">
                                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="101px" class="demo-ruleForm">
                                        <el-form-item label="所属社区" prop="popCommunityId">
                                            <el-select
                                                placeholder="请选择所属社区"
                                                v-model="ruleForm.popCommunityId"
                                                clearable
                                                class="dialog-select"
                                                @change="changeCommunity"
                                            >
                                                <el-option
                                                    v-for="(item, index) in communityList"
                                                    :key="index"
                                                    :label="item.label"
                                                    :value="item.id"
                                                ></el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="发布对象" prop="issueRoom">
                                            <div class="issueRoom">
                                                <div class="radio-room">
                                                    <el-checkbox
                                                        label="社区住户"
                                                        name="type"
                                                        v-model="ruleForm.issueRoom.checkAll"
                                                        @change="changeCheckboxRoom"
                                                    ></el-checkbox>
                                                    <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" v-show="ruleForm.issueRoom.checkAll">
                                                    <tree-house
                                                        :buildingType="1"
                                                        :showCheckboxTree="true"
                                                        :defaultExpandAllTree="false"
                                                        :accordion="true"
                                                        :selectAll="true"
                                                        @selectData="selectDataHouseTree"
                                                        :disabledHouse="disabledHouse"
                                                        ref="selectTreeHouse"
                                                    ></tree-house>
                                                </div>
                                            </div>
                                            <div class="issueRoom">
                                                <div class="radio-room">
                                                    <el-checkbox
                                                        label="物业员工"
                                                        name="type"
                                                        v-model="ruleForm.issueRoom.staff"
                                                        @change="changeCheckboxStaffRoom"
                                                    ></el-checkbox>
                                                    <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" v-show="ruleForm.issueRoom.staff">
                                                    <tree-house
                                                        ref="selectTreePeoples"
                                                        :buildingType="1"
                                                        :showCheckboxTree="true"
                                                        :defaultExpandAllTree="false"
                                                        :showHouseTree="false"
                                                        :accordionPeople="true"
                                                        :selectAll="true"
                                                        @dataPeople="dataPeople"
                                                        @selectPeople="selectPeople"
                                                        :disabled="disabledPeople"
                                                    ></tree-house>
                                                </div>
                                            </div>
                                        </el-form-item>
                                        <el-form-item label="通知类型" prop="informType">
                                            <el-select
                                                v-model="ruleForm.informType"
                                                @change="changeInformType"
                                                clearable
                                                class="dialog-select"
                                                placeholder="请选择通知类型"
                                            >
                                                <el-option
                                                    v-for="(item, index) in informTypes"
                                                    :key="index"
                                                    :label="item.label"
                                                    :value="item.status"
                                                    >{{ item.label }}</el-option
                                                >
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="标题" prop="title">
                                            <el-input v-model="ruleForm.title" placeholder="不能超过20字" maxlength="20"></el-input>
                                        </el-form-item>
                                        <el-form-item label="是否紧急" prop="exigencyOr">
                                            <el-radio-group v-model="ruleForm.exigencyOr" @change="changeRadioExigencyOr">
                                                <el-radio label="是"></el-radio>
                                                <el-radio label="否"></el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                        <el-form-item label="选择时间" prop="activeTime" v-if="showUploadImage">
                                            <el-date-picker
                                                v-model="ruleForm.activeTime"
                                                type="datetimerange"
                                                range-separator="至"
                                                start-placeholder="开始日期"
                                                end-placeholder="结束日期"
                                                :picker-options="pickerOptions"
                                                :editable="false"
                                            ></el-date-picker>
                                        </el-form-item>
                                        <el-form-item label="主题图片" prop="image" v-if="showUploadImage">
                                            <div class="up-image">
                                                <up-image
                                                    color="#1890ff"
                                                    class="editor-upload-btn"
                                                    @successCBK="imageSuccessCBK"
                                                    @deleteImage="deleteImage"
                                                    @successImageList="successImageList"
                                                    @clearImageList="clearImageList"
                                                    ref="upImages"
                                                ></up-image>
                                            </div>
                                        </el-form-item>
                                        <el-form-item label="通知内容" prop="editorContents">
                                            <!-- tinymce-editor 富文本编辑器   -->
                                            <div class="editor-container">
                                                <tinymce v-model="ruleForm.editorContents" ref="endit" :height="150" />
                                            </div>
                                        </el-form-item>
                                        <el-form-item label="文件上传" prop="fill">
                                            <div>
                                                <el-upload
                                                    class="upload-fill"
                                                    action="/sc-community-web/upload/uploadFile"
                                                    :on-preview="handlePreview"
                                                    :on-remove="handleRemove"
                                                    :before-remove="beforeRemove"
                                                    multiple
                                                    :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">
                                                        支持格式：.rar .zip .doc .docx .pdf ，单个文件不能超过20MB
                                                    </div>
                                                </el-upload>
                                            </div>
                                        </el-form-item>

                                        <el-form-item class="dialog-footer">
                                            <span>
                                                <el-button type="primary" @click="dialogButton('clear')" plain>取消</el-button>
                                                <el-button type="primary" @click="dialogButton('prev')">发布</el-button>
                                            </span>
                                        </el-form-item>
                                    </el-form>
                                </div>
                                <div v-if="!showDetail">
                                    <!-- 详情显示 -->
                                    <previe-inform
                                        :dataDetail="rowDetail"
                                        :filePath="filePath"
                                        :successImageLists="successImageLists"
                                        :houseData="houseData"
                                        :peopleData="peopleData"
                                        :houseDataNames="houseDataNames"
                                        ref="filterHouse"
                                    ></previe-inform>
                                </div>
                            </div>

                            <div class="dialog-right">
                                <div class="dialog-right-top">
                                    <img src="../../assets/img/phoneHeader.png" alt="" />
                                </div>
                                <div class="dialog-right-header">
                                    <i class="el-icon-arrow-left"></i>
                                    <div v-if="showDetail">{{ this.showUploadImage ? '社区活动' : '物业通知' }}</div>
                                    <div v-else>{{ rowDetail.type == 0 ? '物业通知' : '社区活动' }}</div>
                                </div>
                                <div class="center-padding"></div>
                                <GeminiScrollbar class="my-scroll-bar" :autoshow="true">
                                    <div class="dialog-right-content">
                                        <div class="dialog-title">
                                            <div class="dialog-titles" v-if="showDetail">
                                                {{ ruleForm.title ? ruleForm.title : '标题' }}
                                            </div>
                                            <div class="dialog-titles" v-else>
                                                {{ rowDetail.title ? rowDetail.title : '标题' }}
                                            </div>
                                            <div v-if="showDetail">
                                                <div class="dialog-urgency" v-if="ruleForm.exigencyOr == '是'">紧急</div>
                                            </div>
                                            <div v-else>
                                                <div class="dialog-urgency" v-if="rowDetail.urgentFlag">紧急</div>
                                            </div>
                                            <!-- ruleForm.exigencyOr -->
                                        </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" v-if="showDetail">
                                                <div v-html="ruleForm.editorContents" id="content" />
                                            </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="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">
                                                        {{ item.name }}
                                                    </span>
                                                </div>
                                            </div>
                                            <div v-else>
                                                <div class="file-name" v-for="(item, index) of filePath" :key="index">
                                                    <span class="file-name-left"><i class="el-icon-paperclip"></i> </span>
                                                    <span class="file-name-right">
                                                        {{ item.name }}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div></div>
                                    </div>
                                </GeminiScrollbar>
                            </div>
                        </div>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<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 = '';
export default {
    mixins: [list],
    components: { previeInform, Tinymce, upImage },
    data() {
        let _this = this;
        return {
            disabledHouse: true,
            disabledPeople: true,
            organList: [],
            popCommunityName: '',
            fileList: [],
            // 显示图片上传
            showUploadImage: false,
            dialogImageUrl: '',
            // 显示详情
            showDetail: true,
            rowDetail: '',
            contentHtml: '',
            // 查询的时间
            searchTime: [],
            // 添加弹框信息
            ruleForm: {
                popCommunityId: '', //所属社区
                //发布对象
                issueRoom: {
                    checkAll: false,
                    radioRoom: '',
                    staff: false,
                    radioStaff: ''
                },
                disabledRoom: false, //单选框是否禁用
                disabledStaffRoom: false,
                informType: '', //通知类型
                title: '', //标题
                exigencyOr: '是', //是否紧急
                exigencyText: true,
                activeTime: [],
                editorContents: '',
                // informContent: content, //通知内容
                informContent: '', //通知内容
                upload: '' // 文件上传
            },
            rules: {
                popCommunityId: [{ required: true, message: '请选择社区', trigger: 'change' }],
                radioRoom: [{ required: true, message: '请选择房间', trigger: 'change' }],
                informType: [{ required: true, message: '请选择通知类型', trigger: 'change' }],
                title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
                exigencyOr: [{ required: true, message: '请选择是否紧急', trigger: 'change' }],
                activeTime: [{ required: true, message: '请选择时间', trigger: 'change' }],
                issueRoom: [{ required: true, message: '请选择发布对象', trigger: 'change' }],
                editorContents: [{ required: true, message: '请发布内容', trigger: 'blur' }] //通知内容
            },
            // 输入地址
            location: '',
            // 通知类型
            informTypes: [
                {
                    status: 0,
                    label: '物业通知'
                },
                {
                    status: 1,
                    label: '社区活动'
                }
            ],
            cols: [
                {
                    label: '标题',
                    prop: 'title'
                },
                {
                    label: '所属社区',
                    prop: 'communityName'
                },
                {
                    label: '通知类型',
                    prop: 'type',
                    format(val) {
                        if (val == 0) {
                            return '物业通知';
                        } else if (val == 1) {
                            return '社区活动';
                        } else {
                            return '其他';
                        }
                    }
                },
                {
                    label: '是否紧急',
                    prop: 'urgentFlag',
                    format(val) {
                        if (val == 0) {
                            return '不紧急';
                        } else if (val == 1) {
                            return '紧急';
                        } else {
                            return '---';
                        }
                    }
                },
                {
                    label: '发布时间',
                    prop: 'pubDate',
                    slot: 'releaseTime'
                },
                {
                    label: '状态',
                    prop: 'status',
                    format(val) {
                        return val ? val : '已发布';
                    }
                },
                {
                    label: '发布人',
                    prop: 'pubPeople',
                    slot: 'pubPeople'
                },
                {
                    label: '操作',
                    prop: 'id',
                    slot: 'opt'
                }
            ],
            mixins_post: 'post',
            // 显隐弹框
            centerDialogVisible: false,
            // 获取的房间信息
            houseData: [],
            houseDataNames: '',
            peopleData: [],
            // 选中的房间
            selectDataHouseTreeData: {
                checkData: [],
                userID: [],
                userList: []
            },
            houseNames: [],
            PeopleNames: [],
            // 选中的人员
            selectDataPeopleTreeData: {
                checkData: [],
                userList: []
            },
            // 文件上传地址
            uploadFileUrl: []
        };
    },
    created() {
        this.getCommunityList();

        this.mixins_post;
        this.mixins_dataUrl = '/sc-community-web/notice/page';
        this.mixins_query = {};
        this.mixins_search();
        this.getOrgTreeList();
        // 显示弹框
        // this.getPeople();
        if (this.$route.query.showDialog && this.$route.query.id && !this.$route.query.closeDialog) {
            let row = {
                id: this.$route.query.id
            };
            this.clickDatail(row);
        }
    },
    mounted() {},
    watch: {},
    methods: {
        // 人员树
        // dataPeople(data) {
        //     this.peopleData = data;
        // },
        // 上传文件
        handleRemove(file, fileList) {
            console.log('上传文件', file, fileList);
        },
        handlePreview(file) {
            console.log('点击文件', file);
        },
        successFile(file, fileLists) {
            console.log('上传文件successFile', fileLists);

            let obj = {};
            // this.fileList.push(fileLists.name);
            let resName = fileLists.response.data;
            obj.oldName = resName;
            obj.name = fileLists.name;
            // this.uploadFileUrl= this.uploadFileUrl.concat(newName + ',');
            this.uploadFileUrl.push(obj);
        },
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
            );
        },
        beforeRemove(file, fileList) {
            let removeName = this.fileList.filter((item) => {
                return item.name != file.name;
            });
            this.fileList = removeName;
            this.uploadFileUrl = removeName;
            console.log('点击移除', this.fileList);
        },

        /**上传图片*/
        successImageList(arr) {
            this.successImageLists = arr;
            console.log('====================================');
            console.log('上传图片', arr);
            console.log('====================================');
        },
        imageSuccessCBK(arr) {
            this.$refs.endit.imageSuccessCBK(arr);
        },
        deleteImage(val) {
            this.$refs.endit.deleteImage(val);
        },

        handleRemove(file) {
            console.log(file);
        },

        handleDownload(file) {
            console.log(file);
        },
        // 添加弹框下拉框变化
        changeCommunity(val) {
            console.log('添加弹框下拉框变化', val);
            this.$http
                .get('/sc-community/assets/tree/community/find', { buildingType: this.buildingType })
                .then(({ status, data, msg }) => {
                    if (status === 0 && data) {
                        this.$refs.selectTreeHouse.filterhouse(val, data);
                        this.ruleForm.issueRoom.checkAll = true;
                        this.ruleForm.issueRoom.radioRoom = '全部房间';
                        this.ruleForm.issueRoom.radioStaff = '';
                        this.ruleForm.issueRoom.staff = false;
                    } else {
                        this.$message.warning('获取房间失败');
                    }
                });
        },

        // 选中的房间
        selectDataHouseTree(val) {
            this.selectDataHouseTreeData.userID = [];
            this.selectDataHouseTreeData.userID = val.userList;
            // this.selectDataHouseTreeData = val;
            // 获取房间下的usid
            this.$http.post('/sc-community-web/notice/queryHouseUser', val.userList).then((res) => {
                if (res.status === 0) {
                    this.selectDataHouseTreeData.userList = res.data;
                } else {
                    // this.$message('获取房间失败');
                }
            });
            console.log('选中的房间val', val);
        },
        // 选择的人员
        selectPeople(val) {
            this.selectDataPeopleTreeData = val;
            console.log('选择的人员inform', val);
        },
        /**监听指定房间单选框变化*/
        changeRadioRoom(val) {
            if (!this.ruleForm.popCommunityId) {
                return this.$message.warning('请先选择所属社区');
            }
            if (val == '指定房间') {
                this.ruleForm.disabledRoom = true;
                this.$refs.selectTreeHouse.selectHouseOr();
            } else {
                this.ruleForm.disabledRoom = false;
                this.$refs.selectTreeHouse.selectAllHouse();
            }
            console.log('监听房间单选框变化', val);
        },
        //选择员工复选框变化
        changeCheckboxStaffRoom(val) {
            if (!this.ruleForm.popCommunityId) {
                this.ruleForm.issueRoom.staff = false;
                return this.$message.warning('请先选择社区');
            }
            if (val) {
                this.ruleForm.issueRoom.radioStaff = '全部员工';
                this.ruleForm.issueRoom.checkAll = false;
                this.ruleForm.issueRoom.radioRoom = '';
                this.$refs.selectTreePeoples.selectAllPeople();
                this.$refs.selectTreeHouse.selectHouseOr();
            } else {
                this.ruleForm.issueRoom.radioStaff = '';
                this.ruleForm.issueRoom.checkAll = true;
                this.ruleForm.issueRoom.radioRoom = '全部房间';
                this.$refs.selectTreePeoples.selectPeopleOr();
                this.$refs.selectTreeHouse.selectAllHouse();
            }
        },
        // 选择房间复选框变化
        changeCheckboxRoom(val) {
            if (!this.ruleForm.popCommunityId) {
                this.ruleForm.issueRoom.checkAll = false;
                return this.$message.warning('请先选择社区');
            }
            if (val) {
                this.ruleForm.issueRoom.staff = false;
                this.ruleForm.issueRoom.checkAll = true;
                this.ruleForm.issueRoom.radioRoom = '全部房间';
                this.ruleForm.issueRoom.radioStaff = '';
                this.$refs.selectTreeHouse.selectAllHouse();
            } else {
                this.ruleForm.issueRoom.radioRoom = '';
                this.$refs.selectTreeHouse.selectHouseOr();
            }
        },
        // 指定员工
        changeRadioStaffRoom(val) {
            if (val == '指定员工') {
                this.ruleForm.disabledStaffRoom = true;
                this.$refs.selectTreePeoples.selectPeopleOr();
            } else {
                this.ruleForm.disabledStaffRoom = false;
                this.$refs.selectTreePeoples.selectAllPeople();
            }
        },
        // 是否紧急
        changeRadioExigencyOr(val) {
            if (val == '否') {
                this.ruleForm.exigencyText = false;
            } else {
                this.ruleForm.exigencyText = true;
            }
        },
        // 发布活动类型
        changeInformType(val) {
            this.successImageLists = '';
            if (val) {
                this.showUploadImage = true;
            } else {
                this.showUploadImage = false;
            }
            this.rowDetail = '';
            this.showDetail = true;
            this.centerDialogVisible = true;
            this.$refs.upImages.clearImageList('');
            this.$refs.endit.setContent('');

            console.log('发布活动类型', val);
        },
        // 清空
        clear() {
            this.rowDetail = '';
            this.showUploadImage = false;
            this.ruleForm.issueRoom.staff = false;
            this.ruleForm.issueRoom.checkAll = false;
            // this.showDetail = false;
            this.filePath = '';
            this.uploadFileUrl = [];
            this.fileList = [];
            this.ruleForm.exigencyText = true;
            this.contentHtml = '';
            this.setContent = '';
            this.$refs.endit.setContent('');
            this.$refs['ruleForm'].resetFields();
        },
        /**添加按钮 */
        add() {
            this.centerDialogVisible = true;
            this.showDetail = true;
            this.rowDetail = '';
            this.showUploadImage = false;
            this.ruleForm.issueRoom.checkAll = false;
            this.ruleForm.issueRoom.radioRoom = '';
            this.ruleForm.issueRoom.staff = false;
            this.ruleForm.issueRoom.radioStaff = '';

            this.filePath = '';
            this.uploadFileUrl = [];
            this.fileList = [];
            this.$refs.endit.setContent('');
            this.$refs['ruleForm'].resetFields();
            if (this.showUploadImage) {
                this.$refs.upImages.clearImageList('');
            }
        },
        /**查询按钮*/
        searchInfo() {
            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 d = '00:00:00';
            let dEnd = '23:59:59';
            if (this.searchTime && this.searchTime.length) {
                this.mixins_query.startTime = `${this.searchTime[0]}T${d}`;
                this.mixins_query.endTime = `${this.searchTime[1]}T${dEnd}`;
            } else {
                this.mixins_query.startTime = this.$moment(new Date()).subtract(1, 'months').format('YYYY-MM-DDTHH:mm:ss');
                this.mixins_query.endTime = this.$moment(new Date()).format('YYYY-MM-DDTHH:mm:ss');
            }
            console.log('点击查询', this.searchTime);
            this.mixins_search();
        },
        /**
         * 弹框按钮
         * @param type 类型
         * @return {void}
         * */
        dialogButton(type) {
            if (type === 'prev') {
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        let content = this.ruleForm.editorContents;
                        let img = [];
                        content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, function (match, capture) {
                            img.push(capture);
                        });
                        if (img.length >= 3) {
                            return this.$message.warning('最多插入三张图片');
                        }
                        if (
                            this.selectDataHouseTreeData.userList.length === 0 &&
                            this.selectDataPeopleTreeData &&
                            this.selectDataPeopleTreeData.userList.length === 0
                        ) {
                            return this.$message.warning('所选房间暂无住户，不可发布');
                        }
                        // this.showDetail = false;
                        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.ruleForm.editorContents,
                            startTime: this.showUploadImage ? startTime : '',
                            endTime: this.showUploadImage ? endTime : '',
                            filePath: JSON.stringify(this.uploadFileUrl),
                            id: 1,
                            pubDate: this.$moment(new Date()).format(`YYYY-MM-DDTHH:mm:ss`),
                            //   pubPeople:ruleForm.informType,
                            //   pubStatus: "",
                            themePictrue: JSON.stringify(this.successImageLists),
                            userId: this.ruleForm.issueRoom.checkAll
                                ? this.selectDataHouseTreeData.userList
                                : this.selectDataPeopleTreeData.userList,
                            treeData: this.ruleForm.issueRoom.checkAll
                                ? JSON.stringify(this.selectDataHouseTreeData.userID)
                                : JSON.stringify(this.selectDataPeopleTreeData.userList),
                            title: this.ruleForm.title,
                            type: this.ruleForm.informType,
                            urgentFlag: this.ruleForm.exigencyOr == '是' ? 1 : 0,
                            userType: this.ruleForm.issueRoom.checkAll ? 0 : 1
                        };
                        this.$http.post('/sc-community-web/notice/add', query).then((res) => {
                            if (res.status === 0) {
                                this.$message.success('发布成功');
                                this.$refs.endit.setContent('');
                                this.$refs['ruleForm'].resetFields();
                                this.successImageList = [];

                                this.clear();
                                this.$refs['ruleForm'].resetFields();
                                if (this.showUploadImage) {
                                    this.$refs.upImages.clearImageList('');
                                }
                                this.mixins_search();
                            } else {
                                this.$message('发布失败,请稍后重试');
                                this.successImageList = [];
                                this.contentHtml = '';
                                this.clear();
                            }
                            this.centerDialogVisible = false;
                            console.log('点击发布', res);
                        });
                    } else {
                        return false;
                    }
                });
            } else if (type == 'clear') {
                if (this.$route.query.showDialog) {
                    this.$router.replace('/workbench/index');
                }
                this.centerDialogVisible = false;
                this.clear();
                this.$refs['ruleForm'].resetFields();
                if (this.showUploadImage) {
                    this.$refs.upImages.clearImageList('');
                }
            } else {
                this.centerDialogVisible = false;
                this.clear();
                this.$refs['ruleForm'].resetFields();
                if (this.showUploadImage) {
                    this.$refs.upImages.clearImageList('');
                }
            }
        },
        /** 获取社区列表*/
        getCommunityList() {
            this.communityList = [];
            var onOption = '';
            this.$http.get('/sc-community/assets/community/list', {}).then((res) => {
                // this.$store.commit('setAreaSelect', res.data);
                console.log('获取社区列表', res);
                res.data.map((res) => {
                    onOption = {
                        label: res.communityName,
                        id: res.id
                    };
                    this.communityList.push(onOption);
                });
            });
        },
        filterPeople(arr) {
            arr.map((item, index) => {
                if (item.children && item.children.length > 0) {
                    this.filterPeople(item.children);
                } else if (item.children == null) {
                    this.filterArrPeople(arr, item, index);
                }
            });
        },
        filterArrPeople(arr, item, index) {
            if (!this.rowDetail.treeData.includes(Number(item.id))) {
                arr.splice(index, 1);
                arr.map((item) => {
                    this.filterArrPeople(arr, item, index);
                });
            }
        },
        filterPeopleName(array) {
            console.log('====================================');
            console.log(' filterPeopleName(array', array);
            console.log('====================================');
            var that = this;
            // array.map((item) => {
            //     if (item.children && item.children.length > 0) {
            //         that.filterName(item.children);
            //         that.houseNames.push(item.name);
            //     } else if (item.type == 'room') {
            //         that.houseNames.push(item.name);
            //     }
            // });
            array.map((item) => {
                if (item.children) {
                    that.filterPeopleName(item.children);
                } else if (item.children == null) {
                    that.PeopleNames.push(item.value);
                }
            });
        },
        // 获取人员
        getPeopleList() {
            this.PeopleNames = [];
            this.$http.get('/sc-user-center/user/findUserList').then(({ status, data, msg }) => {
                if (status === 0) {
                    this.peopleData = data;
                    this.filterPeople(this.peopleData);
                    this.filterPeopleName(this.peopleData);
                    this.houseDataNames = this.PeopleNames.toString();
                } else {
                    this.$message(warning, '获取人员失败,请稍后重试');
                }
            });
        },
        dimension(arr) {
            arr.map((item, index) => {
                if (item.children) {
                    this.dimension(item.children);
                } else if (item.type == 'room') {
                    this.filterArr(arr, item, index);
                }
            });
        },
        filterArr(arr, item, index) {
            if (!this.rowDetail.treeData.includes(Number(item.value))) {
                arr.splice(index, 1);
                arr.map((item) => {
                    this.filterArr(arr, item, index);
                });
            }
        },
        filterName(array) {
            var that = this;
            array.map((item) => {
                if (item.children && item.children.length > 0) {
                    that.houseNames.push(item.name);
                    that.filterName(item.children);
                } else if (item.type == 'room') {
                    that.houseNames.push(item.name);
                }
            });
        },

        // 获取房间
        getOrgTreeList() {
            this.houseNames = [];
            this.$http
                .get('/sc-community/assets/tree/community/find', { buildingType: this.buildingType })
                .then(({ status, data, msg }) => {
                    if (status === 0 && data) {
                        var arr = data.filter((item) => {
                            return item.id == this.rowDetail.communityId;
                        });
                        this.houseData = arr;
                        this.dimension(this.houseData);
                        this.filterName(this.houseData);
                        let h = [...new Set(this.houseNames)];
                        this.houseDataNames = this.houseNames.toString();
                    }
                });
        },

        /** 查看详情*/
        clickDatail(row) {
            // this.rowDetail = [];
            this.$http.get('/sc-community-web/notice/find/' + row.id).then((res) => {
                if (res.status === 0) {
                    this.rowDetail = res.data;
                    this.rowDetail.treeData = JSON.parse(res.data.treeData);
                    // this.rowDetail.newName = this.houseNames.toString();
                    if (res.data.userType == 0) {
                        this.getOrgTreeList();
                    } else {
                        this.getPeopleList();
                    }
                    // let fileArr = row.filePath.split(',');
                    // this.filePath = fileArr.slice(0, fileArr.length - 1);
                    this.filePath = JSON.parse(res.data.filePath);
                    this.successImageLists = JSON.parse(res.data.themePictrue);
                    this.contentHtml = res.data.content;
                    this.centerDialogVisible = true;
                    this.showDetail = false;
                } else {
                    return this.$message('获取详情失败！请稍后重试');
                }
            });
        }
    }
};
</script>
<style lang="scss" scoped>
@import './style.scss';
/deep/ .html-left {
    width: 16%;
}
</style>