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

<template>
    <div class="inform">
        <div class="search">
            <el-input placeholder="请输入标题" class="search-input" clearable v-model.trim="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="search-icon">
                <el-tooltip class="item" effect="light" placement="bottom" content="物业通知发布">
                    <i class="zoniot_font zoniot-icon-tianjia2" @click="add"></i>
                </el-tooltip>
            </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"
                    @close="handleDialogClose"
                    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="centerDialogVisible = false"></i>
                            <div class="dialogTitle">{{ rowDetail.type == 0 ? '物业通知' : '社区活动' }}详情</div>
                        </div>

                        <div class="dialog-contents">
                            <previe-inform
                                :dataDetail="rowDetail"
                                :filePath="filePath"
                                :successImageLists="successImageLists"
                                :houseData="houseData"
                                :peopleData="peopleData"
                                :houseDataNames="houseDataNames"
                                :houseDataNamesPeople="houseDataNamesPeople"
                                :userType="userType"
                                :showrightPhone="true"
                                ref="previeInform"
                            ></previe-inform>
                        </div>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
import list from '@utils/list.js';
import previeInform from './common/previeInform';
const content = '';
export default {
    mixins: [list],
    components: { previeInform },
    data() {
        let _this = this;
        return {
            // 显示详情
            showDetail: true,
            rowDetail: '',
            contentHtml: '',
            // 查询的时间
            searchTime: [],
            // 输入地址
            location: '',
            // 通知类型
            informTypes: [
                {
                    status: 0,
                    label: '物业通知'
                },
                {
                    status: 1,
                    label: '社区活动'
                }
            ],
            cols: [
                {
                    label: '标题',
                    prop: 'title',
                    width: 300
                },
                {
                    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: '',
            houseDataNamesPeople: '',
            peopleData: [],
            userType: '',
            // 选中的房间
            selectDataHouseTreeData: {
                checkData: [],
                userID: [],
                userList: []
            },
            houseNames: [],
            PeopleNames: []
        };
    },
    created() {
        // if (!!this.$route.params.showPop) {
        //     this.add();
        // }
        this.getCommunityList();
        this.mixins_dataUrl = '/sc-community/notice/page';
        this.mixins_query = {};
        this.mixins_search();
        this.getOrgTreeList();
    },
    mounted() {},
    methods: {
        /**添加按钮 */
        add() {
            new Promise((resolve) => {
                this.$store.dispatch('addPopup', {
                    url: '/propertyManagement/stepPage/informAdd.vue',
                    width: '1100px',
                    height: '600px',
                    props: {
                        callback: resolve,
                        house: this.selectRow
                    },
                    title: '物业通知发布'
                });
            }).then(() => {
                this.mixins_search();
            });
        },
        /**查询按钮*/
        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');
            }
            this.mixins_search();
        },
        /** 获取社区列表*/
        getCommunityList() {
            this.communityList = [];
            var onOption = '';
            this.$http.get('/sc-community/assets/community/list', {}).then((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.treeDataPeople.includes(Number(item.id))) {
                arr.splice(index, 1);
                arr.map((item) => {
                    this.filterArrPeople(arr, item, index);
                });
            }
        },
        filterPeopleName(array) {
            var that = this;
            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.filterPeople(data);
                    this.filterPeopleName(data);
                    this.clearTreeChildrenPeople(data);
                    this.peopleData = data;
                    this.houseDataNamesPeople = this.PeopleNames.toString();
                } else {
                    this.$message(error, res.msg);
                }
            });
        },
        dimension(arr) {
            arr.map((item, index) => {
                if (item.children) {
                    if (item.children.length > 0) {
                        this.dimension(item.children);
                    }
                } else if (item.type == 'room') {
                    this.filterArr(arr, item, index);
                }
            });
        },
        clearTreeChildren(arr) {
            arr.map((item, index) => {
                if (!!item.children && item.children.length > 0) {
                    this.clearTreeChildren(item.children);
                } else {
                    if (!!item.children) {
                        arr.splice(index, 1);
                    }
                }
            });
        },
        clearTreeChildrenPeople(arr) {
            arr.map((item, index) => {
                if (!!item.children && item.children.length > 0) {
                    this.clearTreeChildrenPeople(item.children);
                } else {
                    if (!!item.children && item.children.length == 0) {
                        this.clearTreeChildrenPeopleArr(arr, index);
                    }
                }
            });
        },
        clearTreeChildrenPeopleArr(arr, index) {
            arr.splice(index, 1);
            arr.map((item, indexs) => {
                if (!!item.children && item.children.length == 0) {
                    this.clearTreeChildrenPeopleArr(arr, indexs);
                }
            });
        },
        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;
                        });

                        if (arr.length > 0) {
                            this.dimension(arr);
                            this.clearTreeChildren(arr);
                            this.houseData = arr;
                            this.filterName(this.houseData);
                            this.houseDataNames = this.houseNames.toString();
                        }
                    }
                });
        },

        /** 查看详情*/
        clickDatail(row) {
            this.showDetail = false;
            // 弹框关闭事件
            // this.rowDetail = [];
            this.$http.get('/sc-community/notice/find/' + row.id).then((res) => {
                if (res.status === 0) {
                    // console.log('查看详情res.data.treeData', res.data.treeData);
                    this.rowDetail = res.data;
                    let treeData = JSON.parse(res.data.treeData);
                    this.rowDetail.treeData = JSON.parse(treeData[0]);
                    this.rowDetail.treeDataPeople = JSON.parse(treeData[1]);
                    let userType = '';
                    let arr1 = this.rowDetail.treeData;
                    let arr2 = this.rowDetail.treeDataPeople;
                    if (arr1.length > 0 && arr2.length > 0) {
                        userType = 2;
                    } else if (arr1.length > 0) {
                        userType = 0;
                    } else {
                        userType = 1;
                    }
                    this.userType = userType;
                    // console.log('查看详情this.userType', this.rowDetail.treeData);
                    // console.log('查看详情this.rowDetail.treeData', this.rowDetail.treeData);
                    // console.log('查看详情this.rowDetail.treeDataPeople', this.rowDetail.treeDataPeople);
                    // this.rowDetail.newName = this.houseNames.toString();
                    if (userType == 0) {
                        this.getOrgTreeList();
                    } else if (userType == 1) {
                        this.getPeopleList();
                    } else {
                        this.getOrgTreeList();
                        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;
                    if (!!this.$refs.previeInform) {
                        this.$refs.previeInform.closeDialog();
                    }
                } else {
                    return this.$message.error('获取详情失败！请稍后重试');
                }
            });
        }
    }
};
</script>
<style lang="scss" scoped>
@import './style.scss';
/deep/ .html-left {
    width: 16%;
}
</style>