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

<template>
    <div class="neighbor">
        <div class="search">
            <el-input
                placeholder="请输入发布人/手机号"
                maxlength="11"
                class="search-input"
                clearable
                v-model.trim="mixins_query.name"
            ></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="yyyyMMdd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                @change="timeToggle"
                :editable="false"
            ></el-date-picker>
            <el-button type="primary" placeholder="状态" class="search-btn" @click="mixins_search" icon="el-icon-search">查询 </el-button>
        </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"
                    @selection-change="selectionChange"
                    :loading="mixins_onQuery"
                >
                    <template slot-scope="scope" slot="opt">
                        <div class="opt">
                            <img src="../../assets/img/icon_bianji@2x.png" alt="" @click="clickEdit('endit', scope.row)" />
                            <img src="../../assets/img/icon_shanchu@2x.png" alt="" @click="clickEdit('del', scope.row)" />
                        </div>
                    </template>
                </zz-table>
            </div>
            <!-- 详情弹框 -->
            <el-dialog title="动态内容" :visible.sync="centerDialogVisible" width="700px">
                <div class="complaint">
                    <div v-if="rowData">
                        <div class="complaint-title">
                            <div class="complaint-title-left"></div>
                            <span class="complaint-title-right">动态信息 </span>
                        </div>
                        <p class="complaint-content">
                            <span>
                                <span class="complaint-content-left">所属社区：</span>
                                <span class="complaint-content-right">{{ rowData.communityName }}</span>
                            </span>
                            <span class="width">
                                <span class="complaint-content-left">房间地址：</span>
                                <span class="complaint-content-right">{{ rowData.address }}</span>
                            </span>
                        </p>
                        <p class="complaint-content">
                            <span>
                                <span class="complaint-content-left" >发布人：</span>
                                <span class="complaint-content-right">{{ rowData.name }}</span>
                            </span>
                            <span class="width">
                                <span class="complaint-content-left">联系电话：</span>
                                <span class="complaint-content-right">{{ rowData.phone }}</span>
                            </span>
                        </p>
                        <p class="complaint-content">
                            <span>
                                <span class="complaint-content-left">住户类型：</span>
                                <span class="complaint-content-right">{{ rowData.householdType | filterHouseType }}</span>
                            </span>
                            <span class="width">
                                <span class="complaint-content-left">发布时间：</span>
                                <span class="complaint-content-right">{{ rowData.createDate | filterTime }}</span>
                            </span>
                        </p>
                        <div class="complaint-content">
                            <span>
                                <span class="complaint-content-left">发布内容：</span>
                                <span class="complaint-content-right" style="margin: 0">{{ rowData.content }}</span>
                            </span>
                        </div>
                        <div class="complaint-content complaint-images">
                            <span class="complaint-content-left">图片/视频：</span>
                            <span v-if="mediaList.length > 0" class="complaint-content-media">
                                <span v-for="(item, index) in mediaList" :key="index" class="media">
                                    <video
                                        v-if="typeVideo(item)"
                                        id="video"
                                        class="images videos"
                                        :src="item"
                                        @click="lookVideos(item)"
                                    ></video>
                                    <el-image v-else class="images" :src="item" :preview-src-list="srcList"></el-image>
                                </span>
                            </span>
                            <span v-else> 暂无图片/视频 </span>
                        </div>
                    </div>
                    <div class="complaint-title">
                        <div class="complaint-title-left"></div>
                        <span class="complaint-title-right">评论</span>
                    </div>
                    <div class="record">
                        <div class="recored-detali" v-if="detailData">
                            <div v-for="(item, index) of detailData.commentList" :key="index">
                                <div class="recored-detali-row last-row">
                                    <div>
                                        <img class="circle" src="../../assets/img/point_yiwancheng@2x.png" alt="" />
                                        <span>{{ item.name }}</span> <span> {{ item.createDate | filterTimeNumber }}</span>
                                    </div>
                                    <el-button class="last-row-btn" type="primary" plain @click="deletes(item.id)">删除</el-button>
                                </div>
                                <div
                                    :class="{
                                        'recored-detali-rows': true,
                                        borders: detailData.commentList.length > 1 && index != detailData.commentList.length - 1
                                    }"
                                >
                                    <span class="font-size-small">{{ item.content }}</span>
                                </div>
                            </div>
                        </div>
                        <div v-if="detailData.commentList && detailData.commentList.length == 0" style="padding: 10px; text-align: center">
                            暂无评论
                        </div>
                    </div>
                </div>
            </el-dialog>
            <!-- 删除弹框 -->
            <div class="dialog-delete">
                <el-dialog title="确认提示" :visible.sync="dialogVisibleDelete" width="30%">
                    <div class="dialog-deletecontent">
                        <img src="../../assets/img/icon-warning.png" alt="" class="dialog-icon" />
                        <div>
                            <p>确认删除</p>
                            <p>
                                是否删除 &nbsp;---&nbsp;<span class="delete-name">{{ deleteName }}</span>
                            </p>
                        </div>
                    </div>

                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisibleDelete = false" type="primary" plain>取 消</el-button>
                        <el-button type="primary" @click="deleteDetail">确 定</el-button>
                    </span>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
import list from '@utils/list.js';
export default {
    mixins: [list],
    data() {
        let _this = this;
        return {
            // 媒体
            mediaList: [],
            srcList: [],
            // 视频获得焦点
            videoControls: false,
            // 查询的时间
            searchTime: [],
            // 删除弹框信息
            deleteName: '',
            dialogVisibleDelete: false,
            //社区列表
            communityList: [],
            cols: [
                {
                    label: '所属社区',
                    prop: 'communityName'
                },
                {
                    label: '房间',
                    prop: 'address'
                },
                {
                    label: '发布人',
                    prop: 'name'
                },

                {
                    label: '联系电话',
                    prop: 'phone'
                },
                {
                    label: '动态内容',
                    prop: 'content',
                    width: 300
                },
                {
                    label: '评论',
                    prop: 'commentNum'
                },
                {
                    label: '点赞',
                    prop: 'likeNum'
                },
                {
                    label: '发布时间',
                    prop: 'createDate'
                },
                {
                    label: '操作',
                    prop: 'id',
                    slot: 'opt'
                }
            ],
            mixins_post: 'get',
            // 显隐弹框
            centerDialogVisible: false,
            // 编辑按钮
            enditShow: false,
            // 删除的id
            rowId: '',
            // 弹框评论
            detailData: []
        };
    },

    created() {
        this.getCommunityList();
        this.mixins_dataUrl = '/sc-community/neighbourhood/page';
        this.mixins_query = {};
        this.mixins_search();
    },
    mounted() {},
    methods: {
        typeVideo(str) {
            if (str) {
                let type = str.slice(str.lastIndexOf('.') + 1, str.length);
                let videoType = ['mp4'];
                return videoType.includes(type);
            }
        },
        lookVideos(src) {
            new Promise((resolve) => {
                this.$store.dispatch('addPopup', {
                    url: '/lookVideo.vue',
                    width: '600px',
                    height: '500px',
                    props: {
                        src: src,
                        callback: resolve
                    },
                    showConfirmButton: true,
                    showCancelButton: true,
                    hideStar: true,
                    title: '查看视频'
                });
            }).then(() => {
                this.mixins_search();
            });
        },
        timeToggle(e) {
            if (!!e) {
                this.mixins_query.startDate = `${e[0]}`;
                this.mixins_query.endDate = `${e[1]}`;
            } else {
                this.mixins_query.startDate = ``;
                this.mixins_query.endDate = ``;
            }
        },
        // 删除评论按钮
        deletes(val) {
            console.log('删除', val);
            this.$http.post('/sc-community/neighbourhood/comment/delete/' + val).then((res) => {
                this.message(res.status, res.msg);
            });
        },
        // // 删除行按钮
        // deleteDetail() {
        //     this.$http.post('/sc-community/neighbourhood/delete/' + this.rowData.id).then((res) => {
        //         this.message(res.status, '删除');
        //     });
        // },
        // 提示消息
        message(status, text) {
            if (status === 0) {
                this.$message({
                    message: `${text}`,
                    type: 'success'
                });
                this.centerDialogVisible = false;
                this.dialogVisibleDelete = false;
                this.mixins_search();
            } else {
                this.$message({
                    message: `${text}`,
                    type: 'error'
                });
            }
        },
        /** 获取社区列表*/
        getCommunityList() {
            this.communityList = [];
            let onOption = '';
            this.$http.get('/sc-community/assets/community/list', {}).then((res) => {
                console.log('获取社区列表', res);
                this.$store.commit('setAreaSelect', res.data);
                res.data.map((res) => {
                    onOption = {
                        label: res.communityName,
                        id: res.id
                    };
                    this.communityList.push(onOption);
                });
            });
        },
        /** 查看处理详情*/
        clickEdit(type, row) {
            this.mediaList = [];
            if (type == 'endit') {
                this.$http.get('/sc-community/neighbourhood/find/' + row.id).then((res) => {
                    if (res.status === 0) {
                        if (res.data.file) {
                            let file = res.data.file;
                            this.mediaList = file.split(',');
                            if (this.mediaList.length >= 3) {
                                this.mediaList.length = 3;
                            }

                            this.srcList = this.mediaList.filter((item) => {
                                return item !== 'mp4';
                            });
                        }
                        this.rowData = res.data;
                        this.centerDialogVisible = true;
                        this.enditShow = true;
                        this.detailData = res.data;
                    } else {
                        this.$message.error('获取详情失败！请稍后重试');
                    }
                });
            } else {
                // this.deleteName = row.name;
                // this.dialogVisibleDelete = true;
                // const { communityName, buildingName, unitName, roomNumber } = row;
                // let title = `是否确定删除对应的记录${communityName}${buildingName}${unitName}${telephone}”`;
                let title = `是否确定删除对应的记录`;
                this.$msgBox(title)
                    .then(() => {
                        this.$http
                            .post('/sc-community/neighbourhood/delete/' + row.id)
                            .then(({ status, msg }) => {
                                if (0 === status) {
                                    this.$message.success(msg);
                                    this.mixins_search();
                                } else {
                                    this.$message.error(msg);
                                }
                            })
                            .catch(() => {});
                    })
                    .catch(() => {});
            }
        },

        /** 点击视频按钮*/
        clickVideo() {
            this.videoControls = !this.videoControls;
            if (this.videoControls) {
                try {
                    if (document.pictureInPictureElement) {
                        document.exitPictureInPicture();
                    } else {
                        video.requestPictureInPicture();
                    }
                } catch (err) {
                    // Video failed to enter/leave Picture-in-Picture mode.
                    console.log('浏览器不支持播放');
                }
            }
        }
    }
};
</script>
<style lang="scss" scoped>
@import './style.scss';
.videos {
    width: 25%;
    height: 90px;
    vertical-align: middle;
    border-radius: 4px;
    margin-right: 10px;
}
.complaint-content-left{
    width: 70px;
    text-align: right;
    display: inline-block;
}
.width{
    width: 210px;
}
</style>