Project-Annex/operationSupport/src/views/propertyManagement/neighbor.vue

<template>
    <div class="neighbor">
        <div class="search">
            <el-input
                placeholder="请输入发布人/手机号"
                maxlength="11"
                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-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>
        <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>
                                <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" style="margin-left: 12px">发布人：</span>
                                <span class="complaint-content-right">{{ rowData.name }}</span>
                            </span>
                            <span>
                                <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.status | filtercomplaintType }}</span> -->
                            </span>
                            <span>
                                <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>
                            <!-- <el-image src="/sc-community-web/upload/2021/12/15/db4376cf4ab541f9a282145a5ddf2919.jpeg"></el-image> -->
                            <span v-if="srcList">
                                <span v-for="(item, index) in imgList" :key="index">
                                    <el-image class="images" :src="item" :preview-src-list="imgList"> </el-image
                                ></span>
                                <span @click="clickVideo">
                                    <video
                                        id="video"
                                        v-for="(item, index) in videoList"
                                        :key="index"
                                        :controls="videoControls"
                                        class="videos"
                                    >
                                        <source :src="item" type="video/mp4" />
                                        您的浏览器暂不支持播放视频
                                    </video></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">
                            <!-- v-for="(item, index) in 3" :key="index" -->
                            <!-- <div>
                                <div class="recored-detali-row last-row">
                                    <div>
                                        <img class="circle" src="../../assets/img/point_yiwancheng@2x.png" alt="" />
                                        <span>2021-09-22 10:01:01</span>
                                    </div>
                                    <el-button class="last-row-right" type="primary" plain @click="deletes">删除</el-button>
                                </div>
                                <div class="recored-detali-rows">
                                    <span class="font-size-small">欢迎欢迎</span>
                                </div>
                            </div> -->
                            <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">
                                    <span class="font-size-small">{{ item.content }}</span>
                                </div>
                            </div>
                        </div>
                        <div v-if="!detailData.commentList" 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 {
            // 弹框显示图片
            srcList: [],
            imgList: [],
            videoList: [],
            // 视频获得焦点
            videoControls: false,
            // 查询的时间
            searchTime: [],
            // 删除弹框信息
            deleteName: '',
            dialogVisibleDelete: false,
            // 输入地址
            location: '',
            //社区列表
            communityList: [],
            cols: [
                {
                    label: '所属社区',
                    prop: 'communityName'
                },
                {
                    label: '房间',
                    prop: 'address'
                },
                {
                    label: '发布人',
                    prop: 'name'
                },

                {
                    label: '联系电话',
                    prop: 'phone'
                },
                {
                    label: '动态内容',
                    prop: 'content'
                },
                {
                    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-web/neighbourhood/page';
        this.mixins_query = {};
        this.mixins_search();
    },
    mounted() {},
    methods: {
        /**查询按钮*/
        searchInfo() {
            if (this.searchTime && this.searchTime.length) {
                this.mixins_query.startDate = this.$moment(this.searchTime[0]).format('YYYYMMDD');
                this.mixins_query.endDate = this.$moment(this.searchTime[1]).format('YYYYMMDD');
            } else {
                this.mixins_query.startDate = this.$moment(new Date()).subtract(1, 'months').format('YYYYMMDD');
                this.mixins_query.endDate = this.$moment(new Date()).format('YYYYMMDD');
            }
            this.mixins_search();
        },
        // 删除评论按钮
        deletes(val) {
            console.log('删除', val);
            this.$http.post('/sc-community-web/neighbourhood/comment/delete/' + val).then((res) => {
                this.message(res.status, '删除');
            });
        },
        // // 删除行按钮
        // deleteDetail() {
        //     this.$http.post('/sc-community-web/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: 'warning'
                });
            }
        },
        /** 获取社区列表*/
        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) {
            if (type == 'endit') {
                this.rowData = row;
                this.$http.get('/sc-community-web/neighbourhood/find/' + row.id).then((res) => {
                    if (res.status === 0) {
                        if (res.data.file) {
                            let file = res.data.file;
                            let files = file.split(',');
                            this.srcList = files;
                            console.log('file', this.srcList);

                            this.imgList = files.filter((item) => {
                                return item.substr(-3) == 'png' || item.substr(-3) == 'jpg' || item.substr(-4) == 'jpeg';
                            });
                            this.videoList = files.filter((item) => {
                                return item.substr(-3) === 'mp4';
                            });
                            this.centerDialogVisible = true;
                            this.enditShow = true;
                            this.detailData = res.data;
                        }
                    } else {
                        this.$message('获取详情失败！请稍后重试');
                    }
                });
            } 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-web/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';
</style>