SmartCommunity/operationSupport/src/views/propertyManagement/inform.vue

<template>
    <div class="inform">
        <div class="search">
            <el-input placeholder="请输入标题" class="search-input" clearable v-model="mixins_query.location"></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"
                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: '120' }"
                    :data="mixins_list"
                    :pageset="mixins_pageset"
                    @page-change="pageChange"
                >
                    <!-- :loading="mixins_onQuery" -->
                    <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="986px" :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>物业通知发布</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"
                                            >
                                                <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"
                                                    ></el-checkbox>
                                                    <el-radio-group v-model="ruleForm.issueRoom.radioRoom" @change="changeRadioRoom">
                                                        <el-radio label="全部房间"></el-radio>
                                                        <el-radio label="指定房间"></el-radio>
                                                    </el-radio-group>
                                                </div>
                                                <div class="selet-room">
                                                    <!-- <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>
                                                </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" @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>
                                            </div>
                                        </el-form-item>
                                        <el-form-item label="通知类型" prop="informType">
                                            <el-select
                                                v-model="ruleForm.informType"
                                                @change="changeInformType"
                                                clearable
                                                class="dialog-select"
                                            >
                                                <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">
                                            <el-date-picker
                                                v-model="ruleForm.activeTime"
                                                value-format="yyyy-MM-dd"
                                                type="daterange"
                                                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>
                                                <el-upload
                                                    class="avatar-uploader"
                                                    action="/sc-community-web/upload/uploadFile"
                                                    :show-file-list="false"
                                                    :on-success="handleAvatarSuccess"
                                                    :before-upload="beforeAvatarUpload"
                                                >
                                                    <img v-if="imageUrl" :src="imageUrl" class="prev-image" />
                                                    <div class="avatar-uploader-icon">
                                                        <el-button type="primary" @click="clickUploadImage">点击上传</el-button>
                                                    </div>
                                                </el-upload>
                                                <span class="uploader-explain">
                                                    <el-upload
                                                        v-if="showImageUrlTwo"
                                                        class="avatar-uploader"
                                                        action="/sc-community-web/upload/uploadFile"
                                                        :show-file-list="false"
                                                        :on-success="handleAvatarSuccessTwo"
                                                        :before-upload="beforeAvatarUpload"
                                                    >
                                                        <img v-if="imageUrlTwo" :src="imageUrlTwo" class="prev-image" />
                                                        <div class="avatar-uploader-icon">
                                                            <el-button type="primary">点击上传</el-button>
                                                        </div>
                                                    </el-upload>
                                                    <span v-if="showUploadImageText">
                                                        图片像素为670px * 300px，jpg/png图片格式,文件大小在 2M内,最多可上传2张图片</span
                                                    >
                                                </span>
                                            </div></el-form-item
                                        >
                                        <el-form-item label="通知内容" prop="informContent">
                                            <!-- tui-editor 富文本编辑器   -->
                                            <div class="editor-container">
                                                <markdown-editor
                                                    ref="markdownEditor"
                                                    v-model="markdownEditorContent"
                                                    :language="language"
                                                    height="180px"
                                                    width="543"
                                                />
                                            </div>
                                            <!-- <el-button type="primary" icon="el-icon-document" @click="getHtml"> 预览 </el-button> -->
                                        </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"
                                                >
                                                    <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-else>
                                    <previe-inform :dataDetail="rowDetail"></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>社区活动</div>
                                </div>
                                <div class="center-padding"></div>
                                <GeminiScrollbar class="my-scroll-bar" :autoshow="false" :color="red">
                                    <div class="dialog-right-content">
                                        <div class="dialog-title">
                                            <div class="dialog-titles">{{ ruleForm.title ? ruleForm.title : '标题' }}</div>
                                            <div class="dialog-urgency" v-if="ruleForm.exigencyText">紧急</div>
                                        </div>
                                        <div class="dialog-right-time">{{ new Date() | filterTime }}</div>
                                        <div></div>
                                        <div class="content">
                                            <div class="content-text">
                                                <div v-html="html" 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>
                                        </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';
// tuieditor富文本编辑器
import MarkdownEditor from '@/components/MarkdownEditor';
const content = `您好！为了给大家提供一个舒适、卫生的生活环境，进一步有效控制小区“四害”孳生，减少四害对大家生活影响，管理处计划12月份安排小区公共区域集中消杀4次。`;
export default {
    mixins: [list],
    components: { previeInform, MarkdownEditor },
    data() {
        let _this = this;
        return {
            // 文件上传
            fileList: [],
            // 显示图片上传
            imageUrl: '',
            imageUrlTwo: '',
            showUploadImage: false,
            showImageUrlTwo: false,
            showUploadImageText: true,
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            // 显示详情
            showDetail: true,
            rowDetail: '',
            // 富文本编辑器
            markdownEditorContent: content,
            html: content,
            languageTypeList: {
                en: 'en_US',
                zh: 'zh_CN',
                es: 'es_ES'
            },
            // 查询的时间
            searchTime: [],
            // 选择的房间
            selectRoom: [],
            optionsRoom: [
                {
                    value: '选项1',
                    label: '滨江华府-A栋-10单元-1001,滨江华府-A栋-10单元-1002'
                },
                {
                    value: '选项2',
                    label: '滨江华府-A栋-10单元-1002'
                }
            ],
            // 选择的员工
            selectStaff: [],
            optionsStaff: [
                {
                    value: '选项1',
                    label: '员工A'
                },
                {
                    value: '选项2',
                    label: '员工B'
                }
            ],
            // 添加弹框信息
            ruleForm: {
                popCommunityId: '', //所属社区
                //发布对象
                issueRoom: {
                    checkAll: true,
                    radioRoom: '全部房间',
                    staff: false,
                    radioStaff: ''
                },
                disabledRoom: false, //单选框是否禁用
                disabledStaffRoom: false,
                informType: '物业通知', //通知类型
                title: '', //标题
                exigencyOr: '是', //是否紧急
                exigencyText: true,
                activeTime: [],
                informContent: content, //通知内容
                upload: '' // 文件上传
            },
            rules: {
                popCommunityId: [{ required: true, message: '请选择社区', trigger: 'change' }],
                issueRoom: [{ 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' }],
                informContent: [{ required: true, message: '请选择内容', trigger: 'blur' }] //通知内容
            },
            // 输入地址
            location: '',
            // 通知类型
            informTypes: [
                {
                    status: 1,
                    label: '物业通知'
                },
                {
                    status: 2,
                    label: '社区活动'
                }
            ],
            cols: [
                {
                    label: '标题',
                    prop: 'title',
                    width: 200
                },
                {
                    label: '所属社区',
                    prop: 'communityName',
                    width: 200
                },
                {
                    label: '通知类型',
                    prop: 'type',
                    width: 200,
                    format(val) {
                        if (val == 0) {
                            return '物业通知';
                        } else if (val == 1) {
                            return '社区活动';
                        } else {
                            return '其他';
                        }
                    }
                },
                {
                    label: '是否紧急',
                    prop: 'urgentFlag',
                    width: 210,
                    format(val) {
                        if (val == 0) {
                            return '不紧急';
                        } else if (val == 1) {
                            return '紧急';
                        } else {
                            return '---';
                        }
                    }
                },
                {
                    label: '发布时间',
                    prop: 'pubDate',
                    width: 240,
                    slot: 'releaseTime'
                },
                {
                    label: '状态',
                    prop: 'status',
                    width: 190,
                    format(val) {
                        return val ? val : '已发布';
                    }
                },
                {
                    label: '发布人',
                    prop: 'pubPeople',
                    width: 210
                },
                {
                    label: '操作',
                    prop: 'id',
                    slot: 'opt'
                }
            ],
            mixins_post: 'post',
            // 显隐弹框
            centerDialogVisible: false,
            // 保存上传的文本
            newConten: ''
            // 获取的房间信息
        };
    },
    created() {
        this.mixins_post;
        if (this.$store.getters['getAreaSelect'].length === 0) {
            this.getCommunityList();
        }
        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() {
            return this.languageTypeList['en'];
        }
    },
    mounted() {},
    watch: {
        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: {
        // 房间树
        buildingInformation(data) {
            if (!!data.type && data.type == 'community') {
                this.mixins_query = { communityId: data.value, buildingType: 1 };
            } else {
                this.mixins_query.communityId = data.communityId;
                this.mixins_query.id = data.roomId;
                this.mixins_query.buildingId = data.buildingId;
                this.mixins_query.unitName = data.unitId;
            }
            this.mixins_search();
        },
        // 上传文件
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
            );
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        /**上传图片*/
        clickUploadImage() {
            this.showImageUrlTwo = true;
            this.showUploadImageText = false;
            this.html = this.$refs.markdownEditor.getHtml();
            console.log('富文本内容', this.markdownEditorContent);
        },
        handleAvatarSuccess(res, file) {
            // this.imageUrl = URL.createObjectURL(file.raw);
            this.imageUrl = res.data;
            let contentText = document.getElementById('content');
            let image = document.createElement('img');
            image.src = res.data;
            contentText.appendChild(image);
            this.newConten = contentText;
            console.log('获取最新预览文本内容', contentText);
            console.log('this.imageUrl', this.imageUrl);
            console.log('handleAvatarSuccess', res, file);
        },
        handleAvatarSuccessTwo(res, file) {
            this.imageUrlTwo = URL.createObjectURL(file.raw);
            console.log('handleAvatarSuccess', res, file);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isPNG = file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG && !isPNG) {
                this.$message.error('上传头像图片只能是 JPG或PNG格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        handleRemove(file) {
            console.log(file);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleDownload(file) {
            console.log(file);
        },
        /**监听单选框变化*/
        changeRadioRoom(val) {
            if (val == '指定房间') {
                this.ruleForm.disabledRoom = true;
            } else {
                this.ruleForm.disabledRoom = false;
            }
            console.log('监听房间单选框变化', val);
        },
        // 监听复选框变化
        changeCheckboxStaffRoom(val) {
            console.log('监听复选框变化', val);
            if (val) {
                this.ruleForm.issueRoom.radioStaff = '全部员工';
            }
        },
        // 指定员工
        changeRadioStaffRoom(val) {
            if (val == '指定员工') {
                this.ruleForm.disabledStaffRoom = true;
            } else {
                this.ruleForm.disabledStaffRoom = false;
            }
            console.log('监听员工单选框变化', val, this.ruleForm.issueRoom.staff);
        },
        // 是否紧急
        changeRadioExigencyOr(val) {
            if (val == '否') {
                this.ruleForm.exigencyText = false;
            } else {
                this.ruleForm.exigencyText = true;
            }
        },
        // 发布活动类型
        changeInformType(val) {
            if (val == 2) {
                this.showUploadImage = true;
            }
            console.log('发布活动类型', val);
        },
        /**添加按钮 */
        add() {
            this.showDetail = true;
            this.centerDialogVisible = true;
        },
        /**查询按钮*/
        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;
            if (this.searchTime && this.searchTime.length) {
                this.mixins_query.startTime = `${this.searchTime[0]}T${d}`;
                this.mixins_query.endTime = `${this.searchTime[1]}T${d}`;
            } 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();
        },
        /**预览富文本内容*/
        getHtml() {
            this.html = this.$refs.markdownEditor.getHtml();
            console.log('====================, this.markdownEditorContent================');
            console.log(this.html);
            let contentText = document.getElementById('content');
            this.markdownEditorContent = contentText;
            console.log('获取最新预览文本内容', contentText);
            console.log('====================================');
        },
        /**
         * 弹框按钮
         * @param type 类型
         * @return {void}
         * */
        dialogButton(type) {
            console.log('点击发布', this.selectStaff);
            // console.log('点击发布===========', this.ruleForm.popCommunityId);
            // console.log('获取富文本内容', this.html);
            if (type === 'prev') {
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        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 query = {
                            communityId: this.ruleForm.popCommunityId,
                            content: this.html,
                            endTime: endTime,
                            //   filePath": "",
                            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
                        };
                        this.$http.post('/sc-community-web/notice/add', query).then((res) => {
                            console.log('点击发布', res);
                        });
                    } else {
                        return false;
                    }
                });
            } else if (type == 'clear') {
                this.centerDialogVisible = false;
            } else {
                this.centerDialogVisible = false;
                this.$refs['ruleForm'].resetFields();
            }
        },
        /** 获取社区列表*/
        getCommunityList() {
            this.communityList = [];
            let onOption = '';
            this.$http.get('/sc-community/assets/community/list', {}).then((res) => {
                console.log('获取社区列表', res);
                res.data.map((res) => {
                    onOption = {
                        label: res.communityName,
                        id: res.id
                    };
                    this.communityList.push(onOption);
                });
            });
        },
        /** 查看详情*/
        clickDatail(row) {
            console.log('查看详情', row);
            this.centerDialogVisible = true;
            this.showDetail = false;
            this.ruleForm.title = row.managementName;
            this.ruleForm.newPhone = row.phone;
            this.rowDetail = row;
        }
    }
};
</script>
<style lang="scss" scoped>
@import './style.scss';
</style>