<template> 
 | 
    <GlobalWindow 
 | 
        :title="title" 
 | 
        :showConfirm="false" 
 | 
        :visible.sync="visible" 
 | 
        @close="closeView" 
 | 
        width="100%"> 
 | 
        <div class="wt"> 
 | 
            <div class="wt_head"> 
 | 
                <div class="wt_head_title"> 
 | 
                    <div class="title">问题详情</div> 
 | 
                    <el-tag style="margin-left: 10px;" v-if="form.dealStatus === 0">待处理</el-tag> 
 | 
                    <el-tag style="margin-left: 10px;" v-if="form.dealStatus === 1">已转工单</el-tag> 
 | 
                    <el-tag style="margin-left: 10px;" type="info" v-if="form.dealStatus === 2">已关闭</el-tag> 
 | 
                </div> 
 | 
                <el-button @click="handleDetail" v-if="form.dealStatus === 1 && isShow">查看工单</el-button> 
 | 
            </div> 
 | 
            <div class="wt_content"> 
 | 
                <div class="wt_content_row" style="width: 25%;"> 
 | 
                    位置:{{form.position || '-'}} 
 | 
                </div> 
 | 
                <div class="wt_content_row" style="width: 25%;"> 
 | 
                    上报人:{{form.name || '-'}} 
 | 
                </div> 
 | 
                <div class="wt_content_row" style="width: 50%;"> 
 | 
                    上报人电话:{{form.phone || '-'}} 
 | 
                </div> 
 | 
                <div class="wt_content_row" style="width: 100%; margin-top: 15px;"> 
 | 
                    上报时间:{{form.submitDate || '-'}} 
 | 
                </div> 
 | 
                <div class="wt_content_row" style="width: 100%; margin-top: 15px;"> 
 | 
                    问题描述:{{form.content || '-'}} 
 | 
                </div> 
 | 
                <div class="wt_content_row" style="width: 100%; margin-top: 15px;"> 
 | 
                    <div class="wt_content_row_label">问题图片:</div> 
 | 
                    <div class="wt_content_row_list" v-if="form.fileList && form.fileList.length >= 0"> 
 | 
                        <div class="wt_content_row_list_img" v-for="(item, index) in form.fileList" :key="index"> 
 | 
                            <el-image 
 | 
                                style="width: 80px; height: 80px" 
 | 
                                :src="item.fileurlFull" 
 | 
                                :preview-src-list="form.fileList.map(item => item.fileurlFull)"> 
 | 
                            </el-image> 
 | 
                        </div> 
 | 
                    </div> 
 | 
                </div> 
 | 
            </div> 
 | 
            <div class="wt_head"> 
 | 
                <div class="wt_head_title"> 
 | 
                    <div class="title">处理结果</div> 
 | 
                </div> 
 | 
            </div> 
 | 
            <div class="wt_content"> 
 | 
                <div class="wt_content_row" style="width: 100%;"> 
 | 
                    处理人:{{form.dealUserName}}-{{form.dealUserCompanyName}} 
 | 
                </div> 
 | 
                <div class="wt_content_row" style="width: 100%; margin-top: 15px;"> 
 | 
                    处理时间:{{form.dealDate || '-'}} 
 | 
                </div> 
 | 
                <div class="wt_content_row" style="width: 100%; margin-top: 15px;"> 
 | 
                    处理结果:{{returnText(form.dealStatus)}} 
 | 
                </div> 
 | 
                <div class="wt_content_row" style="width: 100%; margin-top: 15px;" v-if="form.dealStatus === 2"> 
 | 
                    关闭说明:{{form.dealInfo}} 
 | 
                </div> 
 | 
            </div> 
 | 
            <!--    工单详情    --> 
 | 
            <GDDetail ref="GD_Detail" @close="closeDetails" /> 
 | 
        </div> 
 | 
    </GlobalWindow> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
  import BaseOpera from '@/components/base/BaseOpera' 
 | 
  import GlobalWindow from '@/components/common/GlobalWindow' 
 | 
  // import GDDetail from './detail' 
 | 
  // import GDDetail from '@/views/workorder/components/detail' 
 | 
  import { getById } from '@/api/ywProblem' 
 | 
  export default { 
 | 
    name: "problemReportingDetails", 
 | 
    extends: BaseOpera, 
 | 
    components: { 
 | 
      GlobalWindow, 
 | 
      GDDetail: () => import('./detail') 
 | 
    }, 
 | 
    data() { 
 | 
      return { 
 | 
        form: {}, 
 | 
        showDetail: false, 
 | 
        isShow: true, 
 | 
        test: false 
 | 
      } 
 | 
    }, 
 | 
    methods: { 
 | 
      closeView() { 
 | 
        this.$emit('close') 
 | 
        this.visible = false 
 | 
      }, 
 | 
      closeDetails() { 
 | 
        console.log('1') 
 | 
        this.test = false 
 | 
      }, 
 | 
      open (title, target, show) { 
 | 
        this.title = title 
 | 
        this.form = target 
 | 
        this.isShow = show 
 | 
        getById(target.id) 
 | 
            .then(res => { 
 | 
              this.form = res 
 | 
              this.visible = true 
 | 
            }) 
 | 
      }, 
 | 
      handleDetail() { 
 | 
        this.test = true 
 | 
        this.$nextTick(() => { 
 | 
          this.$refs.GD_Detail.open('工单详情', { workorderId: this.form.workorderId }, false) 
 | 
            // this.$refs.GD_Detail.isShow = false 
 | 
            // this.$refs.GD_Detail.visible = true 
 | 
            // this.$refs.GD_Detail.id = this.form.workorderId 
 | 
            // this.$refs.GD_Detail.getDetail() 
 | 
        }) 
 | 
      }, 
 | 
      returnText(status) { 
 | 
        if (status === 0) { 
 | 
          return '待处理' 
 | 
        } else if (status === 1) { 
 | 
          return '已转工单' 
 | 
        } else if (status === 2) { 
 | 
          return '已关闭' 
 | 
        } else { 
 | 
          return '' 
 | 
        } 
 | 
      } 
 | 
    } 
 | 
  } 
 | 
</script> 
 | 
<style lang="scss" scoped> 
 | 
    @import '@/assets/style/variables.scss'; 
 | 
    .title { 
 | 
        font-weight: 500; 
 | 
        font-size: 18px; 
 | 
        color: $primary-color; 
 | 
    } 
 | 
</style> 
 | 
<style lang="scss" scoped> 
 | 
    .wt { 
 | 
        width: 100%; 
 | 
        display: flex; 
 | 
        flex-direction: column; 
 | 
        .wt_head { 
 | 
            width: 100%; 
 | 
            padding: 20px 0; 
 | 
            box-sizing: border-box; 
 | 
            display: flex; 
 | 
            align-items: center; 
 | 
            justify-content: space-between; 
 | 
            .wt_head_title { 
 | 
                display: flex; 
 | 
                align-items: center; 
 | 
                font-size: 16px; 
 | 
                color: black; 
 | 
                margin-right: 10px; 
 | 
            } 
 | 
        } 
 | 
        .wt_content { 
 | 
            width: 100%; 
 | 
            display: flex; 
 | 
            align-items: center; 
 | 
            flex-wrap: wrap; 
 | 
            .wt_content_row { 
 | 
                font-size: 14px; 
 | 
                color: rgb(51, 51, 51); 
 | 
                display: flex; 
 | 
                align-items: self-start; 
 | 
                .wt_content_row_label { 
 | 
                    flex-shrink: 0; 
 | 
                    font-size: 14px; 
 | 
                    color: rgb(51, 51, 51); 
 | 
                } 
 | 
                .wt_content_row_list { 
 | 
                    flex: 1; 
 | 
                    display: flex; 
 | 
                    align-items: center; 
 | 
                    .wt_content_row_list_img { 
 | 
                        width: 106px; 
 | 
                        height: 93px; 
 | 
                        display: flex; 
 | 
                        align-items: center; 
 | 
                        justify-content: center; 
 | 
                        overflow-x: hidden; 
 | 
                        margin-right: 15px; 
 | 
                        &:last-child { 
 | 
                            margin: 0 !important; 
 | 
                        } 
 | 
                        img { 
 | 
                            width: 100%; 
 | 
                        } 
 | 
                    } 
 | 
                } 
 | 
            } 
 | 
        } 
 | 
    } 
 | 
</style> 
 |