| <template> | 
|     <GlobalWindow | 
|         :title="title" | 
|         :showConfirm="false" | 
|         :visible.sync="visible" | 
|         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;" v-if="form.dealStatus === 2">已关闭</el-tag> | 
|                 </div> | 
|                 <el-button @click="handleDetail" v-if="form.dealStatus === 1">查看工单</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> | 
|         </div> | 
|         <!--    工单详情    --> | 
|         <Detail v-if="showDetail" ref="DetailRef" @close="showDetail = false" /> | 
|     </GlobalWindow> | 
| </template> | 
|   | 
| <script> | 
|   import BaseOpera from '@/components/base/BaseOpera' | 
|   import GlobalWindow from '@/components/common/GlobalWindow' | 
|   import Detail from './detail' | 
|   import { getById } from '@/api/ywProblem' | 
|   export default { | 
|     name: "problemReportingDetails", | 
|     extends: BaseOpera, | 
|     components: { GlobalWindow, Detail }, | 
|     data() { | 
|       return { | 
|         form: {}, | 
|         showDetail: false, | 
|       } | 
|     }, | 
|     methods: { | 
|       open (title, target) { | 
|         this.title = title | 
|         this.form = target | 
|         getById(target.id) | 
|             .then(res => { | 
|               this.form = res | 
|               this.visible = true | 
|             }) | 
|       }, | 
|       handleDetail() { | 
|         this.showDetail = true | 
|         this.$nextTick(() => { | 
|           this.$refs.DetailRef.visible = true | 
|           this.$refs.DetailRef.id = this.form.workorderId | 
|           this.$refs.DetailRef.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> |