Project-Annex/operationSupport/src/views/workOrders/popups/details.vue

<template>
    <div class="lookDetail">
        <div class="left">
            <div class="list-item">
                <div class="formContent-item_title">工单信息</div>
                <el-form ref="form" label-width="110px">
                    <template v-for="(item, index) in formLook">
                        <el-col :span="!!item.span ? item.span : 12" :key="index">
                            <el-form-item :label="item.label">
                                <template v-if="item.slot">
                                    <template v-if="item.slot === 'orderType'">
                                        <span v-if="thisItem['orderType'] == 1">业主报修</span>
                                        <span v-else-if="thisItem['orderType'] == 2">内部报修</span>
                                        <span v-else>--</span>
                                    </template>
                                    <template v-if="item.slot === 'repairFile' && !!thisItem['repairFile']">
                                        <div class="imgVdio" v-for="item in thisItem['repairFile'].split(',')" :key="item">
                                            <video v-if="typeVideo(item)" :src="item" @click="lookVideos(item)"></video>
                                            <el-image class="imgs" v-else :src="item" :preview-src-list="[item]"></el-image>
                                        </div>
                                    </template>
                                </template>
                                <template v-else>{{ thisItem[item.prop] || '--' }}</template>
                            </el-form-item>
                        </el-col>
                    </template>
                </el-form>
            </div>
            <div class="list-item">
                <div class="formContent-item_title">处理信息</div>
                <el-form ref="form" label-width="110px">
                    <template v-for="(item, index) in formLook2">
                        <el-col :span="!!item.span ? item.span : 12" :key="index">
                            <el-form-item :label="item.label">
                                <template v-if="item.slot">
                                    <template v-if="item.slot === 'urgencyDegree'">
                                        <span v-if="thisItem['urgencyDegree'] == 2" class="redText">紧急</span>
                                        <span v-else-if="thisItem['urgencyDegree'] == 1">普通</span>
                                        <span v-else>--</span>
                                    </template>
                                    <template v-if="item.slot === 'handleResult'">
                                        <span v-if="thisItem['handleResult'] == 2" class="redText">无法处理</span>
                                        <span v-else-if="thisItem['handleResult'] == 1" class="greenText">成功处理</span>
                                        <span v-else>--</span>
                                    </template>
                                    <template v-if="item.slot === 'handleFile' && !!thisItem['handleFile']">
                                        <div class="imgVdio" v-for="item in thisItem['handleFile'].split(',')" :key="item">
                                            <video v-if="typeVideo(item)" :src="item" @click="lookVideos(item)"></video>
                                            <el-image class="imgs" v-else :src="item" :preview-src-list="[item]"></el-image>
                                        </div>
                                    </template>
                                </template>
                                <template v-else>{{ thisItem[item.prop] || '--' }}</template>
                            </el-form-item>
                        </el-col>
                    </template>
                </el-form>
            </div>
        </div>
        <div class="right">
            <div class="list-item">
                <div class="formContent-item_title">工单进度追踪</div>
                <template v-for="(item, index) in thisItem['progressList']">
                    <div class="steps" :key="index">
                        <div class="steps-left">
                            <img src="@assets/img/point_yiwancheng@2x.png" alt />
                            <div class="steps-left-line" v-if="index !== thisItem['progressList'].length - 1"></div>
                        </div>
                        <div class="steps-right">
                            <div class="steps-right-title">
                                <span>{{ item.createDate }}</span>
                                <span class="status" v-if="index === thisItem['progressList'].length - 1">{{
                                    thisItem.orderStatus | filterWorkStatus
                                }}</span>
                            </div>
                            <div class="steps-right-content" v-if="item.type == 1">
                                <span>报修人：</span>
                                <span>{{ thisItem['repairName'] }}</span>
                            </div>
                            <template v-else>
                                <div class="steps-right-content">
                                    <span>处理人：</span>
                                    <span>{{ item.name }}</span>
                                </div>
                                <div class="steps-right-content" v-if="!!item.operation">
                                    <span>操作：</span>
                                    <span>{{ item.operation }}</span>
                                </div>
                            </template>
                        </div>
                    </div>
                </template>
                <!-- <div v-if="thisItem.orderStatus == 5">待评价</div> -->
                <div v-if="thisItem.orderStatus == 6" class="grate">
                    <div class="grate-rate">
                        <div style="margin-top: 3px">评价星级：</div>
                        <div>
                            <i
                                class="el-icon-star-on"
                                style="color: #ffca3b; font-size: 26px; margin-right: 5px"
                                v-for="(item, index) in thisItem.evaluation"
                                :key="index"
                            ></i>
                        </div>
                    </div>
                    <div class="grate-rate">评价内容： {{ thisItem.evaluationContent }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: ['params'],
    data() {
        return {
            formLook: [
                {
                    label: '所属社区:',
                    prop: 'communityName'
                },
                {
                    label: '地址:',
                    prop: 'address'
                },
                {
                    label: '报修人:',
                    prop: 'repairName'
                },
                {
                    label: '手机号:',
                    prop: 'repairPhone'
                },
                {
                    label: '报修时间:',
                    prop: 'createDate'
                },
                {
                    label: '工单类型:',
                    prop: 'orderType',
                    slot: 'orderType'
                },
                {
                    label: '报修内容:',
                    prop: 'repairContent',
                    span: 24
                },
                {
                    label: '图片/视频:',
                    prop: 'repairFile',
                    slot: 'repairFile',
                    span: 24
                }
            ],
            formLook2: [
                {
                    label: '维修人员:',
                    prop: 'handleName'
                },
                {
                    label: '紧急程度:',
                    prop: 'urgencyDegree',
                    slot: 'urgencyDegree'
                },
                {
                    label: '预期完成时间:',
                    prop: 'expectCompletionTime'
                },
                {
                    label: '实际完成时间:',
                    prop: 'completionTime'
                },
                {
                    label: '处理结果:',
                    prop: 'handleResult',
                    slot: 'handleResult',
                    span: 24
                },
                {
                    label: '图片/视频:',
                    prop: 'handleFile',
                    slot: 'handleFile',
                    span: 24
                }
            ],
            thisItem: {},
            thisActive: 0
        };
    },

    methods: {
        getDatali(id) {
            this.$http
                .get('/sc-community/workOrder/find/' + id)
                .then(({ data, msg, status }) => {
                    if (status == 0) {
                        this.thisItem = data;
                        this.thisActive = !!data.progressList.length ? Number(data.progressList.length) - 1 : 0;
                    }
                })
                .catch(() => {});
        },
        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();
            });
        }
    },
    created() {
        this.getDatali(this.params.id);
    }
};
</script>
<style lang="scss" scoped>
@import '@assets/css/public-style.scss';
.lookDetail {
    /deep/ .el-form-item__label,
    /deep/.el-form-item__content {
        font-size: 12px;
    }
    /deep/ .el-step__title.is-finish,
    /deep/ .el-step__title.is-process,
    /deep/ .el-step__description.is-finish {
        font-weight: 500 !important;
        color: #424656 !important;
    }

    display: flex;
    justify-content: space-between;
    .formContent-item_title {
        clear: both;
    }
    .left {
        width: 600px;
    }
    .right {
        width: calc(100% - 620px);
    }
    .list-item {
        clear: inherit;
    }
}
.imgVdio {
    width: 80px;
    height: 60px;
    display: inline-block;
    margin-right: 10px;
    video,
    img {
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
}

.steps {
    display: flex;
    img {
        width: 20px;
        vertical-align: -webkit-baseline-middle;
    }
    .steps-left {
        margin-right: 10px;
        .steps-left-line {
            width: 2px;
            height: calc(100% - 40px);
            margin: 10px auto;
            background-color: $mainBgColor;
        }
    }
    .steps-right {
        width: 100%;
        line-height: 30px;
        // margin-bottom: 10px;
        .steps-right-title {
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            .status {
                color: $mainBgColor;
                font-weight: 400;
            }
        }
        .steps-right-content {
            font-size: 12px;
            color: #303133;
            display: flex;
            span:first-child {
                margin-right: 10px;
            }
        }
    }
}
.grate {
    margin-left: 30px;
    .grate-rate {
        display: -webkit-box;
        align-items: center;
        font-size: 12px;
        color: #303133;
        margin-bottom: 10px;
    }
}
</style>