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

<template>
    <div class="prev" v-if="dataDetail">
        <div>
            <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">
                    发布对象: <span>{{ houseDataNames }}</span>
                </div>
                <div v-if="showTree">
                    <div class="detail-right" v-if="dataDetail.userType == 0">
                        <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">{{ data.name }}</span>
                            </span>
                        </el-tree>
                    </div>
                    <div class="detail-right" v-else>
                        <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">{{ data.label }}</span>
                            </span>
                        </el-tree>
                    </div>
                </div>

                <div @click="clickDetail()" class="click-prev">{{ showTree ? '关闭详情' : '查看详情' }}</div>
            </div>
            <div class="prev-text">
                <span>通知类型: </span
                ><span class="text-right">{{ dataDetail.type == 0 ? '物业通知' : dataDetail.type == 1 ? '社区活动' : '其他' }}</span>
            </div>
            <div class="prev-text">
                <span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 标题:</span><span class="text-right">{{ dataDetail.title }}</span>
            </div>
            <div class="prev-text">
                <span>是否紧急:</span><span class="text-right">{{ dataDetail.urgentFlag ? '是' : '否' }}</span>
            </div>
            <div class="prev-text image-content" v-if="dataDetail.type">
                <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>
                    <!-- <img v-for="(item, index) of successImageLists" :key="index" :src="item.url" alt="" /> -->
                    <!-- <img src="https://a.storyblok.com/f/88751/1734x1092/c3cde09986/storyblok-editor-1.jpg/m/900x0/" alt="" /> -->
                    <!-- <img src="https://a.storyblok.com/f/88751/1734x1092/c3cde09986/storyblok-editor-1.jpg/m/900x0/" alt="" /> -->
                    <!-- <img src="https://a.storyblok.com/f/88751/1734x1092/c3cde09986/storyblok-editor-1.jpg/m/900x0/" alt="" /> -->
                </div>
                <div class="prev-text-none" v-else>暂无图片</div>
            </div>
            <div class="prev-text files">
                <div>文件上传:</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 style="margin-left: 25px">暂无文件</div>
            </div>
            <div class="prev-text html-content">
                <div class="html-left">通知内容:</div>
                <GeminiScrollbar class="my-scroll-bar" :autoshow="true">
                    <!-- <div class="html-right"> -->
                    <div v-html="dataDetail.content"></div>
                    <!-- </div> -->
                </GeminiScrollbar>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'previeInform',
    props: {
        houseDataNames: '',
        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 {
            showTree: false,
            dialogVisibleHouse: false,
            dialogVisiblePeople: false,
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            defaultPropsPeople: {
                children: 'children',
                label: 'value'
            }
        };
    },
    created() {},
    computed: {},
    methods: {
        filter(arr) {
            arr.map((item) => {});
        },
        // 关闭节点事件
        closeTree(e) {
            console.log('e', e);
            if (e.type == 'community') {
                this.showTree = false;
            }
        },
        // 点击显示发布对象详情
        clickDetail() {
            this.showTree = !this.showTree;
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        }
    }
};
</script>
<style lang="scss" scoped>
.prev {
    width: 100%;
    .prev-text {
        width: 100%;
        font-size: 12px;
        color: #424656;
        margin: 34px 20px;
        .text-right {
            margin-left: 25px;
        }
    }
    .prev-obj {
        max-width: 60%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        span {
            margin-left: 25px;
        }
    }
    .detail {
        display: flex;
        position: relative;
        .detail-right {
            position: absolute;
            top: -5px;
            right: 4%;
            background: #eee;
        }
        .click-prev {
            color: #0eaeff;
            cursor: pointer;
            // margin-left: 5px;
        }
    }
    .files {
        display: flex;
    }
    .prev-text-none {
        font-size: 12px;
    }
    .image-content {
        width: 100%;
        display: flex;
        .image-text {
            width: 12%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .right-image {
            max-height: 120px;
            display: flex;
            :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;
        .html-left {
            margin-right: 5%;
        }
    }
    // 弹框自定义滚动条
    .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;
    }
    .el-tree {
        background: #fff;
        padding: 0 20px;
        height: 50vh;
        overflow: auto;
    }
}
</style>