Project-Annex/operationSupport/src/views/propertyManagement/common/previeInform.vue

<template>
    <div class="prev" v-if="dataDetail">
        <!-- <div class="dialog-header" v-show="showrightPhone">
            <div class="dialogTitle">{{ dataDetail.type == 0 ? '物业通知' : '社区活动' }}详情</div>
        </div> -->
        <!-- 详情左侧部分 -->
        <div class="detail-left">
            <div class="prev-text" style="margin-top: 0">
                <span>所属社区:</span><span class="text-right">{{ dataDetail.communityName }}</span>
            </div>
            <div class="prev-text detail">
                <div class="prev-obj">
                    <div class="files-text">发布对象:</div>
                    <div v-if="userType == 2">
                        <div class="prev-obj-right">
                            <div class="prev-obj-text">社区住户/{{ '指定房间' }}/{{ houseDataNames }}</div>
                            <div @click="clickDetailHouse()" class="click-prev">{{ showTreeHouse ? '关闭详情' : '查看详情' }}</div>
                        </div>
                        <div class="prev-obj-right">
                            <div class="prev-obj-text">
                                社区员工/{{ '指定员工' }}/{{ peopleData[0].value }}/
                                {{ houseDataNamesPeople }}
                            </div>
                            <div @click="clickDetailPeople()" class="click-prev">{{ showTreePeople ? '关闭详情' : '查看详情' }}</div>
                        </div>
                    </div>
                    <div class="prev-obj-right" v-else>
                        <div class="prev-obj-text" v-if="userType == 0">社区住户/{{ '指定房间' }}/{{ houseDataNames }}</div>
                        <div class="prev-obj-text" v-else>社区员工/{{ '指定员工' }}/{{ houseDataNamesPeople }}</div>
                        <div @click="clickDetail()" class="click-prev">{{ showTree ? '关闭详情' : '查看详情' }}</div>
                    </div>
                </div>
                <div v-if="showTree">
                    <div>
                        <!-- 社区住户 -->
                        <div class="prev-detail-right" v-if="(userType == 0 || userType == 2) && showTreeHouse">
                            <GeminiScrollbar class="prev-my-scroll-bar" :autoshow="true">
                                <el-tree
                                    class="filter-tree"
                                    ref="filterHouse"
                                    node-key="id"
                                    :data="houseData"
                                    :props="defaultProps"
                                    :default-expand-all="true"
                                    :filter-node-method="filterNode"
                                    @node-collapse="closeTree"
                                >
                                    <span class="custom-tree-node" slot-scope="{ node, data }">
                                        <span v-if="data.children == null || data.children.length > 0">
                                            <span class="circle"></span>
                                            {{ data.name }}</span
                                        >
                                    </span>
                                </el-tree>
                            </GeminiScrollbar>
                        </div>
                        <!-- 社区人员 -->
                        <div
                            :class="{ 'prev-detail-right': true, 'prev-detail-right-two': userType == 2 }"
                            v-if="(userType == 1 || userType == 2) && showTreePeople"
                        >
                            <GeminiScrollbar class="prev-my-scroll-bar" :autoshow="true">
                                <el-tree
                                    class="filter-tree"
                                    ref="filterHouse"
                                    node-key="id"
                                    :data="peopleData"
                                    :props="defaultPropsPeople"
                                    :default-expand-all="true"
                                    :filter-node-method="filterNode"
                                    @node-collapse="closeTree"
                                >
                                    <span class="custom-tree-node" slot-scope="{ node, data }">
                                        <span v-if="data.children == null || data.children.length > 0">
                                            <span class="circle"></span>{{ data.label }}</span
                                        >
                                    </span>
                                </el-tree>
                            </GeminiScrollbar>
                        </div>
                    </div>
                </div>
            </div>

            <div class="prev-text">
                <span class="files-text">通知类型: </span
                ><span class="text-right">{{ dataDetail.type == 0 ? '物业通知' : dataDetail.type == 1 ? '社区活动' : '其他' }} </span>
            </div>
            <div class="prev-text" v-if="dataDetail.type == 1">
                <span class="files-text">活动时间: </span
                ><span class="text-right">{{ dataDetail.startTime }} - {{ dataDetail.endTime }}</span>
            </div>
            <div class="prev-text">
                <span class="files-text"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 标题:</span
                ><span class="text-right">{{ dataDetail.title }}</span>
            </div>
            <div class="prev-text">
                <span class="files-text">是否紧急:</span><span class="text-right">{{ dataDetail.urgentFlag ? '是' : '否' }}</span>
            </div>
            <div class="prev-text image-content" v-if="dataDetail.type == 1">
                <div class="image-text">主题图片:</div>
                <div class="right-image" v-if="successImageLists.length > 0">
                    <el-image
                        class="images"
                        v-for="(item, index) of successImageLists"
                        :key="index"
                        :src="item.url"
                        :preview-src-list="[item.url]"
                    ></el-image>
                </div>
                <div class="prev-text-none" v-else>暂无图片</div>
            </div>
            <div class="prev-text files">
                <div class="files-text">文件上传:</div>
                <div v-if="filePath.length > 0" class="files-content">
                    <div v-for="(item, index) of filePath" :key="index" class="prev-text-file">
                        <div class="prev-text-right"><i class="el-icon-paperclip"></i> {{ item.name }}</div>
                    </div>
                </div>
                <div class="prev-text-none" v-else>暂无文件</div>
            </div>
            <div class="prev-text html-content">
                <div class="files-text" style="margin-right: 25px">通知内容:</div>
                <GeminiScrollbar class="my-scroll-bar" :autoshow="true">
                    <!-- <div class="html-right"> -->
                    <div v-html="dataDetail.content"></div>
                    <!-- </div> -->
                </GeminiScrollbar>
            </div>
        </div>
        <!-- 右侧手机部分 -->
        <div class="detail-right" v-show="showrightPhone">
            <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>{{ dataDetail.type == 0 ? '物业通知' : '社区活动' }}</div>
                </div>
                <div class="center-padding"></div>
                <GeminiScrollbar class="my-scroll-bar-right" :autoshow="true">
                    <div class="dialog-right-content">
                        <div class="dialog-title">
                            <div class="dialog-titles">
                                {{ dataDetail.title }}
                            </div>
                            <div>
                                <div class="dialog-urgency" v-if="dataDetail.urgentFlag">紧急</div>
                            </div>
                            <!-- ruleForm.exigencyOr -->
                        </div>
                        <div class="dialog-right-time">{{ dataDetail.pubDate }}</div>
                        <div></div>
                        <div class="content">
                            <div class="content-text">
                                <div v-html="dataDetail.content" id="content" />
                            </div>
                            <div class="content-inform"></div>
                            <div v-if="filePath.length > 0">
                                <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>
</template>
<script>
export default {
    name: 'previeInform',
    props: {
        houseDataNamesPeople: '',
        showrightPhone: false,
        houseDataNames: '',
        userType: '',
        dataDetail: {
            type: Object,
            default: () => {}
        },
        houseData: {
            type: Array,
            default: () => []
        },
        peopleData: {
            type: Array,
            default: () => []
        },
        detailPeople: {
            type: Array,
            default: () => []
        },
        filePath: {
            type: Array,
            default: () => []
        },
        successImageLists: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        dataDetail(val) {
            this.showTree = false;
        }
    },
    computed: {},
    data() {
        return {
            index: 99,
            showTreeHouse: false,
            showTreePeople: false,
            showTree: false,
            dialogVisibleHouse: false,
            dialogVisiblePeople: false,
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            defaultPropsPeople: {
                children: 'children',
                label: 'value'
            }
        };
    },
    created() {},
    computed: {},
    methods: {
        // 关闭弹框事件
        closeDialog() {
            this.showTreeHouse = false;
            this.showTreePeople = false;
        },
        // 关闭节点事件
        closeTree(e) {
            console.log('e', e);
            if (e.type == 'community') {
                this.showTree = false;
            }
        },
        // 点击显示发布对象详情
        clickDetail(val) {
            this.showTree = !this.showTree;
            this.showTreeHouse = !this.showTreeHouse;
            this.showTreePeople = !this.showTreePeople;
        },
        clickDetailHouse(val) {
            this.showTree = !this.showTree;
            this.showTreeHouse = !this.showTreeHouse;
        },
        clickDetailPeople() {
            this.showTree = !this.showTree;
            this.showTreePeople = !this.showTreePeople;
            // this.showTreeHouse = false;
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        }
    }
};
</script>
<style lang="scss" scoped>
@import '../style.scss';

.prev {
    width: 100%;
    display: flex;
    position: relative;

    // 弹框自定义滚动条
    .my-scroll-bar-right {
        height: 438px;
        /deep/ .gm-scrollbar.-horizontal .thumb {
            height: 0;
        }
    }
    .el-tree {
        padding: 5px;
        .circle {
            display: block;
        }
        /deep/ .el-tree-node__expand-icon.is-leaf {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: #7a7d88;
            margin: 6px;
            padding: 0px;
        }
        .el-tree-node:focus > .el-tree-node__content {
            background: #fff;
        }
    }
    // 右侧部分
    .detail-right {
        .dialog-right {
            width: 283px;
            height: 570px;
            border-radius: 24px;
            border: 1px solid #e0e1e3;
            margin: 20px 40px 70px;
            background-color: #fafcff;
            .dialog-right-top {
                text-align: center;
                background: white;
                border-top-right-radius: 28px;
                border-top-left-radius: 28px;
                border-bottom: none;
                padding: 4px;
                img {
                    background: white;
                    width: 100%;
                    width: 234px;
                    height: 8px;
                    text-align: center;
                }
            }
            .dialog-right-header {
                width: 100%;
                padding: 24px 14px;
                background: white;
                :first-child {
                    float: left;
                    line-height: 20px;
                }
                :last-child {
                    font-weight: bold;
                    text-align: center;
                }
            }
            .center-padding {
                padding: 5px 0;
            }

            .dialog-right-content {
                background: white;
                padding: 11px;
                .dialog-title {
                    display: flex;
                    .dialog-titles {
                        font-size: 14px;
                        color: #424656;
                    }
                    .dialog-urgency {
                        border-radius: 15px;
                        width: 36px;
                        height: 15px;
                        line-height: 15px;
                        background-image: linear-gradient(to right, #f65b5b, #ffa3a3);
                        font-size: 12px;
                        -webkit-transform-origin-x: 0;
                        -webkit-transform: scale(0.8);
                        margin-left: 2px;
                        margin-top: 2px;
                        color: white;
                        text-align: center;
                    }
                }
                .dialog-right-time {
                    font-size: 10px;
                    -webkit-transform-origin-x: 0;
                    -webkit-transform: scale(0.9);
                    color: #9ba6af;
                    padding: 3px 0;
                }
                .dialog-right-time + div {
                    width: 100%;
                    border-bottom: 1px solid #eeeeee;
                    margin-bottom: 10px;
                }
                .content {
                    width: 110%;
                    font-size: 10px;
                    color: #e0e1e3;
                    background-color: #fff;
                    -webkit-transform-origin-x: 0;
                    -webkit-transform: scale(0.92);
                    .content-text {
                        width: 100%;
                        color: #686b78;
                        background-color: #fff;
                        /deep/ img {
                            // width: 100%;
                            max-width: 100%;
                            max-height: 750px;
                        }
                    }
                    .content-inform {
                        width: 100%;
                        text-align: center;
                        margin: 50px;
                        :first-child {
                            color: #373b49;
                        }
                    }
                    .file-name {
                        margin: 5px;
                        border-radius: 24px;
                        width: 90%;
                        background: #fafcff;
                        .file-name-left {
                            color: #0eaeff;
                            font-size: 14px;
                        }
                        .file-name-right {
                            color: #424656;
                        }
                    }
                }
            }
        }
    }
    // 左侧部分
    .detail-left {
        width: 100%;
        padding: 27px 20px 40px 24px;
        .prev-text {
            width: 100%;
            font-size: 12px;
            color: #424656;
            margin: 34px 20px;
            .text-right {
                margin-left: 25px;
                min-width: 60px;
            }
        }
        .prev-obj {
            width: 100%;
            display: flex;
            .prev-obj-right {
                display: flex;
                .prev-obj-text {
                    max-width: 495px;
                    margin-left: 25px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    margin-bottom: 10px;
                }
                .click-prev {
                    color: #0eaeff;
                    cursor: pointer;
                    margin-left: 5px;
                }
            }
        }
        .detail {
            display: flex;
            position: relative;

            .prev-detail-right {
                position: absolute;
                top: 24px;
                left: 11%;
                background: #fff;
                width: 559px;
                height: 55vh;
                z-index: 99;
                box-shadow: 0px 2px 10px 0px #e6ebf4;
                // border-radius: 4px;
                // .prev-my-scroll-bar {
                // }
            }
            .prev-detail-right-two {
                top: 44px !important;
            }
        }
        .files {
            display: flex;
            .files-text {
                min-width: 60px;
            }
        }
        .prev-text-none {
            margin-left: 20px;
            font-size: 12px;
        }
        .image-content {
            width: 100%;
            display: flex;
            .image-text {
                min-width: 60px;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
            .right-image {
                max-height: 120px;
                display: flex;
                margin-left: 15px;
                :last-child {
                    margin-right: 0;
                }
                .images {
                    display: block;
                    float: left;
                    width: 180px;
                    height: 100px;
                    border: 1px solid #ccc;
                    border-radius: 4px;
                    min-width: 100px;
                    margin-right: 10px;
                }
            }
        }
        .files-content {
            min-width: 150px;
            display: flex;
            .prev-text-file {
                background: #f8fcff;
                border-radius: 4px;
                font-size: 14px;
                margin-left: 25px;
                padding: 2px 8px;
                .prev-text-right {
                    overflow: hidden;
                    white-space: nowrap;
                    -o-text-overflow: ellipsis; //浏览器兼容
                    text-overflow: ellipsis;
                }
            }
        }
        .html-content {
            display: flex;
            width: 100%;
            max-height: 200px;
        }
        // 弹框自定义滚动条
        .my-scroll-bar {
            width: 86%;
            height: 200px;
            max-height: 218px;
            /deep/ .gm-scrollbar.-horizontal .thumb {
                height: 0;
            }
        }
        /deep/ .wscnph {
            max-width: 200px;
            max-height: 200px;
            vertical-align: middle;
        }
    }
}
</style>