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

<template>
    <div class="complaint">
        <div class="search">
            <el-input
                placeholder="请输入地址/投诉人"
                maxlength="20"
                class="search-input"
                clearable
                v-model="mixins_query.content"
            ></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-select placeholder="请选择投诉类型" v-model="mixins_query.type" clearable>
                <el-option v-for="(item, index) in complaintType" :key="index" :label="item.label" :value="item.status">{{
                    item.label
                }}</el-option>
            </el-select>
            <el-select placeholder="请选择投诉状态" v-model="mixins_query.handleStatus" clearable>
                <el-option v-for="(item, index) in complaintStatus" :key="index" :label="item.label" :value="item.status">{{
                    item.label
                }}</el-option>
            </el-select>
            <el-date-picker
                v-model="pickerTime"
                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" v-preventReClick
                >查询
            </el-button>
        </div>
        <div class="content">
            <div class="roles-wrap">
                <zz-table
                    :cols="cols"
                    :settings="{ showNumber: true, stripe: true }"
                    :data="mixins_list"
                    :pageset="mixins_pageset"
                    @page-change="pageChange"
                    :loading="mixins_onQuery"
                >
                    <template slot-scope="scope" slot="content">
                        <div>{{ scope.row.content }}</div>
                    </template>
                    <template slot-scope="scope" slot="house">
                        <!-- <div>{{ scope.row.unitName }}{{ roomNumber }}</div> -->
                        <div>{{ scope.row.communityName }}{{ scope.row.unitName }}{{ scope.row.roomNumber }}</div>
                    </template>
                    <template slot-scope="scope" slot="status">
                        <div :class="{ statusColor: scope.row.handleStatus === 1 }">
                            {{ scope.row.handleStatus | filterComplaintStatus }}
                        </div>
                    </template>
                    <template slot-scope="scope" slot="opt">
                        <div class="opt" @click="clickEdit(scope.row)">
                            <img v-if="scope.row.id === 1" src="../../assets/img/icon_chuli@2x.png" alt="" />
                            <img v-else src="../../assets/img/icon_biaodan@2x.png" alt="" />
                        </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.buildingName }}{{ rowData.unitName }}{{ rowData.roomNumber }}</span
                                >
                            </span>
                        </p>
                        <p class="complaint-content">
                            <span>
                                <span class="complaint-content-left" style="margin-left: 12px">投诉人：</span>
                                <span class="complaint-content-right">{{ complaintName }}</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.typeDict }}</span>
                            </span>
                            <span>
                                <span class="complaint-content-left">投诉时间：</span>
                                <span class="complaint-content-right">{{ rowData.createDate }}</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-images complaint-content">
                            <span class="complaint-content-left">图片/视频：</span>
                            <span v-for="(item, index) in mediaList" :key="index">
                                <span v-if="item.type == 1">
                                    <el-image class="images" :src="item.url" :preview-src-list="imgList"> </el-image
                                ></span>
                                <span @click="clickVideo" v-else>
                                    <video id="video" :controls="videoControls" class="videos">
                                        <source :src="item.url" type="video/mp4" />
                                        您的浏览器暂不支持播放视频
                                    </video></span
                                >
                            </span>
                            <span v-els> 暂无图片 </span>
                        </div>
                    </div>
                    <div class="record">
                        <div class="complaint-title">
                            <div class="complaint-title-left"></div>
                            <span class="complaint-title-right">处理记录</span>
                        </div>
                        <div class="recored-detali" v-if="rowData">
                            <!-- v-for="(item, index) in 3" :key="index" -->
                            <div v-for="(item, index) of recordData" :key="index">
                                <div class="recored-detali-row last-row">
                                    <div>
                                        <img class="circle" src="../../assets/img/point_yiwancheng@2x.png" alt="" />
                                        <span>{{ item.replyTime }}</span>
                                    </div>
                                </div>
                                <div class="recored-detali-rows">
                                    <div class="record-left" v-if="rowData.complaintStatus != '1'"></div>
                                    <span class="font-size-small"
                                        >{{ item.replyUserName }}:{{ item.replyContent ? item.replyContent : '--' }}</span
                                    >
                                </div>
                            </div>
                            <div :class="{ 'last-row-right': true, statusColor: rowData.handleStatus == '1' }">
                                {{ rowData.handleStatus | filterComplaintStatus }}
                            </div>
                        </div>
                    </div>

                    <div class="changeStatus">
                        <div class="changeStatus-left">处理状态</div>
                        <div class="changeStatus-right">
                            <el-select
                                :placeholder="rowData.handleStatus | filterComplaintStatus"
                                v-model="mixins_query.complaintStatus"
                                clearable
                            >
                                <el-option v-for="(item, index) in complaintStatus" :key="index" :label="item.label" :value="item.status">{{
                                    item.label
                                }}</el-option>
                            </el-select>
                        </div>
                    </div>
                    <el-form :model="replayForm" ref="replayForm" label-width="80px" class="demo-ruleForm">
                        <el-form-item
                            label="物业回复"
                            prop="replay"
                            class="replay"
                            :rules="[{ required: true, message: '回复内容不能为空' }]"
                        >
                            <el-input
                                v-model="replayForm.replay"
                                type="textarea"
                                placeholder="请输入回复内容"
                                maxlength="100"
                                rows="3"
                                show-word-limit
                            ></el-input>
                        </el-form-item>
                        <el-form-item class="dialog-footer">
                            <span>
                                <el-button type="primary" plain @click="dialogButton('clear')">重置</el-button>
                                <el-button type="primary" @click="dialogButton('submit')">提交</el-button>
                            </span>
                        </el-form-item>
                    </el-form>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import list from '@utils/list.js';
export default {
    mixins: [list],
    data() {
        let _this = this;
        return {
            // 处理记录
            recordData: [],
            // 投诉人
            complaintName: '',
            // 视频获得焦点
            videoControls: false,
            // 弹框显示图片/视频
            imgList: [],
            mediaList: [],
            // 物业回复
            replayForm: {
                replay: ''
            },
            // 输入地址
            location: '',
            //社区列表
            communityList: [],
            // 投诉类型
            complaintType: [
                {
                    status: 1,
                    label: '扰民投诉'
                },
                {
                    status: 2,
                    label: '物业服务'
                },
                {
                    status: 3,
                    label: '公共卫生'
                },
                {
                    status: 4,
                    label: '安全建议'
                },
                {
                    status: 5,
                    label: '其他'
                }
            ],
            // 投诉状态
            complaintStatus: [
                {
                    status: 1,
                    label: '未处理'
                },
                {
                    status: 2,
                    label: '已处理'
                },
                {
                    status: 3,
                    label: '处理中'
                }
            ],
            // 查询的时间
            pickerTime: [],
            cols: [
                {
                    label: '所属社区',
                    prop: 'communityName'
                },
                {
                    label: '房间地址',
                    prop: 'houseId',
                    slot: 'house'
                },
                {
                    label: '投诉类型',
                    prop: 'type',
                    format(val) {
                        if (val == '1') {
                            return '扰民投诉';
                        } else if (val == '2') {
                            return '物业服务';
                        } else if (val == '3') {
                            return '公共卫生';
                        } else if (val == '4') {
                            return '安全建议';
                        } else {
                            return '其他';
                        }
                    }
                },
                {
                    label: '投诉人',
                    prop: 'userName'
                },
                {
                    label: '联系电话',
                    prop: 'phone'
                },
                {
                    label: '投诉时间',
                    prop: 'createDate'
                },
                {
                    label: '内容',
                    prop: 'content',
                    slot: 'content'
                },
                {
                    label: '状态',
                    prop: 'handleStatus',
                    slot: 'status'
                },

                {
                    label: '操作',
                    prop: 'id',
                    slot: 'opt'
                }
            ],
            mixins_post: 'post',
            // 显隐弹框
            centerDialogVisible: false,
            // 行数据
            rowData: '',
            // 回复详情记录
            compRecode: ''
        };
    },
    created() {
        this.getCommunityList();
        this.mixins_dataUrl = '/sc-community-web/feedback/page';
        this.mixins_query = {};
        if (this.$route.query.showDialog && !this.$route.query.closeDialog) {
            this.mixins_query.handleStatus = 1;
        }
        this.mixins_search();
    },
    mounted() {},
    methods: {
        /** 点击播放视频*/
        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('浏览器不支持播放');
                }
            }
        },
        /**
         * 查询按钮
         */
        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;
            if (this.pickerTime && this.pickerTime.length) {
                this.mixins_query.startTime = `${this.pickerTime[0]} ${d}`;
                this.mixins_query.endTime = `${this.pickerTime[1]} ${d}`;
            } else {
                this.mixins_query.startTime = this.$moment(new Date()).subtract(1, 'months').format('YYYY-MM-DD HH:mm:ss');
                this.mixins_query.endTime = this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
            }
            this.mixins_search();
        },
        /**
         *  弹框按钮
         */
        dialogButton(type) {
            console.log('点击保存', this.rowData);
            if (type === 'submit') {
                this.$refs['replayForm'].validate((valid) => {
                    if (valid) {
                        let query = {
                            buildingId: this.rowData.buildingId,
                            communityId: this.rowData.communityId,
                            content: '',
                            handleStatus: this.mixins_query.complaintStatus,
                            houseId: this.rowData.houseId,
                            id: this.rowData.id
                        };

                        this.$http.post('/sc-community-web/feedback/update', query).then((res) => {
                            // this.message(res.status, '回复');
                            // console.log('点击提交', res, this.mixins_query.complaintStatus, this.replayForm.replay);
                        });
                        let querys = {
                            fid: this.rowData.id,
                            replyContent: this.replayForm.replay
                        };
                        this.$http.post('/sc-community-web/feedback/speed/add', querys).then((res) => {
                            this.message(res.status, '回复');
                            this.$refs['replayForm'].resetFields();

                            console.log('点击提交', res, this.mixins_query.complaintStatus, this.replayForm.replay);
                        });
                    } else {
                        return false;
                    }
                });
            } else {
                this.$refs['replayForm'].resetFields();
            }
        },
        /** 获取社区列表*/
        getCommunityList() {
            this.communityList = [];
            let onOption = '';
            this.$http.get('/sc-community/assets/community/list', {}).then((res) => {
                console.log('获取社区列表', res);
                res.data.map((res) => {
                    onOption = {
                        label: res.communityName,
                        id: res.id
                    };
                    this.communityList.push(onOption);
                });
            });
        },
        /** 查看处理详情*/
        clickEdit(row) {
            // 获取处理内容
            this.$http.post(`/sc-community-web/feedback/find/${row.id}`).then((res) => {
                if (res.status === 0) {
                    this.rowData = res.data;
                    this.centerDialogVisible = true;
                    this.complaintName = row.userName;
                    this.mediaList = JSON.parse(res.data.imageUrl);
                    let arr = this.mediaList.filter((item) => {
                        console.log('item', item);
                        return item.url.substr(-3) == 'png' || item.url.substr(-3) == 'jpg' || item.url.substr(-4) == 'jpeg';
                    });
                    arr.map((item) => {
                        if (item.url) {
                            this.imgList.push(item.url);
                        }
                    });
                    console.log(' this.imgList', this.imgList);
                } else {
                    this.rowData = row;
                    this.$message('获取详情失败!请稍后重试');
                }

                console.log('查看处理详情返回rowData', this.rowData);
            });
            let query = {
                fid: row.id
            };
            // 获取处理记录
            this.$http.get('/sc-community-web/feedback/speed/list', query).then((res) => {
                this.recordData = res.data;
            });
            console.log('查看处理详情', row);
        },
        /**提示消息 */
        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'
                });
            }
        }
    }
};
</script>
<style lang="scss" scoped>
@import './style.scss';
/deep/ .el-dialog {
    margin-top: 5vh !important;
}
</style>