SmartCommunity/operationSupport/src/views/propertyManagement/stepPage/indexEdit.vue

<template>
    <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.buildingName }}{{ rowData.unitName }}{{ rowData.roomNumber }}</span>
                </span>
            </p>
            <p class="complaint-content">
                <span>
                    <span class="complaint-content-left">投诉人：</span>
                    <span class="complaint-content-right">{{ rowData.userName }}</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.typeDict }}</span>
                </span>
                <span class="width">
                    <span class="complaint-content-left">投诉时间：</span>
                    <span class="complaint-content-right">{{ rowData.createDate }}</span>
                </span>
            </p>
            <div class="star-cont" v-if="rowData.type == 6">
                <div class="star-list" v-for="item in toArr(rowData.serviceQuality)" :key="item">
                    <div>{{ item.name }}:</div>
                    <i
                        class="el-icon-star-on"
                        :style="item.value >= ins ? 'color: #ffca3b;' : 'color:#8e897c33'"
                        v-for="ins in 5"
                        :key="ins"
                    ></i>
                    <span>{{ item.desc }}</span>
                </div>
            </div>
            <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-if="mediaList.length > 0">
                    <span v-for="(item, index) in mediaList" :key="index">
                        <span v-if="typeVideo(item)">
                            <video class="images videos" :src="item" @click="lookVideos(item)"></video>
                        </span>
                        <span v-else>
                            <el-image class="images" :src="item" :preview-src-list="[item]"></el-image>
                        </span>
                    </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="rowData">
                <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-show="recordData.length > 1 && index != recordData.length - 1"></div>
                        <span class="font-size-small"
                            >{{ item.replyUserName }}:&nbsp;&nbsp;&nbsp;{{ item.replyContent ? item.replyContent : '--' }}</span
                        >
                    </div>
                </div>
                <div :class="{ 'last-row-right': true, statusColor: rowData.handleStatus == '1' }">
                    {{ rowData.handleStatus | filterComplaintStatus }}
                </div>
            </div>
        </div>
        <template v-if="rowData.handleStatus == 1 || rowData.handleStatus == 3">
            <el-form :model="replayForm" :rules="rules" ref="replayForm" label-width="80px" class="demo-ruleForm">
                <el-form-item label="处理状态" prop="handleStatus" class="replay">
                    <el-select
                        v-model="replayForm.handleStatus"
                        clearable
                        :disabled="rowData.handleStatus == 2 || rowData.handleStatus == 4 || rowData.handleStatus == 5"
                    >
                        <el-option
                            v-for="(item, index) in complaintStatus"
                            :key="index"
                            :label="item.label"
                            :value="item.status"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="物业回复" prop="replay" class="replay" v-if="rowData.handleStatus == 1 || rowData.handleStatus == 3">
                    <el-input
                        v-model="replayForm.replay"
                        type="textarea"
                        placeholder="请输入回复内容"
                        maxlength="100"
                        rows="3"
                        show-word-limit
                    ></el-input>
                </el-form-item>
            </el-form>
        </template>
        <!--用户 评价 -->
        <div v-if="rowData.handleStatus == 5" class="grate">
            <div class="complaint-title">
                <div class="complaint-title-left"></div>
                <span class="complaint-title-right grate-rate-title">用户评价</span>
            </div>
            <div class="grate-rate">
                <i
                    class="el-icon-star-on"
                    style="color: #ffca3b; font-size: 26px; margin-right: 10px"
                    v-for="(item, index) in rowData.evaluation"
                    :key="index"
                ></i>
                <div class="grate-text">
                    {{ rowData.evaluationContent }}
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: ['params'],
    data() {
        let _this = this;
        return {
            // 处理记录
            recordData: [],
            // 视频获得焦点
            videoControls: false,
            mediaList: [],
            // 物业回复
            replayForm: {
                replay: '',
                handleStatus: ''
            },
            complaintStatus: [
                {
                    status: 3,
                    label: '处理中'
                },
                {
                    status: 4,
                    label: '已处理'
                }
            ],
            rules: {
                handleStatus: [{ required: true, message: '请选择处理状态', trigger: 'change' }],
                replay: [{ required: true, message: '请输入内容', trigger: 'blur' }]
            },
            // 行数据
            rowData: ''
        };
    },
    created() {
        this.clickEdit(this.params.row);
    },
    mounted() {},
    methods: {
        toArr(str) {
            if (!!str) {
                return JSON.parse(str);
            }
            return [];
        },
        typeVideo(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();
            });
        },
        /** 点击播放视频*/
        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('浏览器不支持播放');
                }
            }
        },
        submit() {
            this.$refs['replayForm'].validate((valid) => {
                if (valid) {
                    let query = {
                        buildingId: this.rowData.buildingId,
                        communityId: this.rowData.communityId,
                        content: '',
                        handleStatus: this.replayForm.handleStatus,
                        houseId: this.rowData.houseId,
                        id: this.rowData.id
                    };
                    this.$http.post('/sc-community/feedback/update', query).then((res) => {});
                    let querys = {
                        fid: this.rowData.id,
                        replyContent: this.replayForm.replay
                    };
                    this.$http.post('/sc-community/feedback/speed/add', querys).then(({ status, msg }) => {
                        if (status == 0) {
                            this.$message.success(msg);
                            this.params.callback();
                            this.$emit('close');
                        } else {
                            this.$message.error(msg);
                        }
                    });
                }
            });
        },
        reset() {
            this.$refs['replayForm'].resetFields();
        },
        /** 查看处理详情*/
        clickEdit(row) {
            this.mediaList = [];
            // 获取处理内容
            this.$http.post(`/sc-community/feedback/find/${row.id}`).then((res) => {
                if (res.status === 0) {
                    this.rowData = res.data;
                    if (res.data.imageUrl.length > 0) {
                        this.mediaList = res.data.imageUrl.split(',');
                    }
                } else {
                    this.$message.error(msg);
                }
            });
            let query = {
                fid: row.id
            };
            // 获取处理记录
            this.$http.get('/sc-community/feedback/speed/list', query).then((res) => {
                this.recordData = res.data;
            });
        }
    }
};
</script>
<style lang="scss" scoped>
@import '../style.scss';
/deep/ .el-dialog {
    margin-top: 5vh !important;
}
.complaint-content-left {
    width: 70px;
    text-align: right;
    display: inline-block;
}
.width {
    width: 210px;
}
.star-cont {
    font-size: 12px;
    line-height: 26px;
    .star-list {
        display: flex;
        margin: 0 35px;
        & > div {
            margin-right: 20px;
        }
    }
}
.el-icon-star-on {
    font-size: 26px;
    margin-right: 10px;
}
</style>