|  |  | 
 |  |  | <template> | 
 |  |  |   <GlobalWindow width="820px" title="工单详情" :visible.sync="visible" :confirm-working="isWorking" @close="close" | 
 |  |  |   <GlobalWindow width="900px" title="工单详情" :visible.sync="visible" :confirm-working="isWorking" @close="close" | 
 |  |  |     @confirm="confirm"> | 
 |  |  |     <div class="main"> | 
 |  |  |       <div class="title"> | 
 |  |  | 
 |  |  |           <div class="status gray" v-if="info.dealStatus == 2">已处理</div> | 
 |  |  |         </div> | 
 |  |  |       </div> | 
 |  |  |       <div class="list"> | 
 |  |  |         <div class="item"> | 
 |  |  |           <div class="la">位置类型</div> | 
 |  |  |           <div class="val">{{ info.areaType == 0 ? '室内维修' : '公共维修' }}</div> | 
 |  |  |       <div class="main_content"> | 
 |  |  |         <div class="list"> | 
 |  |  |           <div class="item"> | 
 |  |  |             <div class="la">位置类型</div> | 
 |  |  |             <div class="val">{{ info.areaType == 0 ? '室内维修' : '公共维修' }}</div> | 
 |  |  |           </div> | 
 |  |  |           <div class="item"> | 
 |  |  |             <div class="la">对应位置</div> | 
 |  |  |             <div class="val">{{ info.buildingName }} / {{ info.roomNum || info.floorName }}</div> | 
 |  |  |           </div> | 
 |  |  |           <div class="item"> | 
 |  |  |             <div class="la">工单类别</div> | 
 |  |  |             <div class="val">{{ info.categoryName }}</div> | 
 |  |  |           </div> | 
 |  |  |           <div class="item"> | 
 |  |  |             <div class="la">上报人</div> | 
 |  |  |             <div class="val">{{ info.creatorName }}</div> | 
 |  |  |           </div> | 
 |  |  |           <div class="item"> | 
 |  |  |             <div class="la">上报人电话</div> | 
 |  |  |             <div class="val">{{ info.creatorPhone }}</div> | 
 |  |  |           </div> | 
 |  |  |           <div class="item"> | 
 |  |  |             <div class="la">上报时间</div> | 
 |  |  |             <div class="val">{{ info.createDate }}</div> | 
 |  |  |           </div> | 
 |  |  |           <div class="item max"> | 
 |  |  |             <div class="la">上门时间</div> | 
 |  |  |             <div class="val">{{ info.getDate }}</div> | 
 |  |  |           </div> | 
 |  |  |           <div class="item max"> | 
 |  |  |             <div class="la">问题描述</div> | 
 |  |  |             <div class="val">{{ info.content }}</div> | 
 |  |  |           </div> | 
 |  |  |           <div class="item max"> | 
 |  |  |             <div class="la">问题图片</div> | 
 |  |  |             <div class="value" v-if="info.fileList == null || !info.fileList.length">无</div> | 
 |  |  |             <div class="value" v-if="info.fileList != null && info.fileList.length"> | 
 |  |  |               <div v-for="item in info.fileList" :key="item.id" style="display: inline;margin-right: 20px"> | 
 |  |  |                 <video v-if="item.fileurlFull && item.fileurlFull.endsWith('.mp4')" ref="videoRef" controls | 
 |  |  |                   preload="auto" style="width: 80px;height: 80px;object-fit: contain;" :src="item.fileurlFull" /> | 
 |  |  |                 <el-image v-else-if="item.fileurlFull" style="width:80px; height: 80px" :src="item.fileurlFull" | 
 |  |  |                   :preview-src-list="[item.fileurlFull]"> | 
 |  |  |                 </el-image> | 
 |  |  |               </div> | 
 |  |  |             </div> | 
 |  |  |           </div> | 
 |  |  |         </div> | 
 |  |  |         <div class="item"> | 
 |  |  |           <div class="la">对应位置</div> | 
 |  |  |           <div class="val">{{ info.buildingName }} / {{ info.roomNum || info.floorName }}</div> | 
 |  |  |         </div> | 
 |  |  |         <div class="item"> | 
 |  |  |           <div class="la">工单类别</div> | 
 |  |  |           <div class="val">{{ info.categoryName }}</div> | 
 |  |  |         </div> | 
 |  |  |         <div class="item"> | 
 |  |  |           <div class="la">上报人</div> | 
 |  |  |           <div class="val">{{ info.creatorName }}</div> | 
 |  |  |         </div> | 
 |  |  |         <div class="item"> | 
 |  |  |           <div class="la">上报人电话</div> | 
 |  |  |           <div class="val">{{ info.creatorPhone }}</div> | 
 |  |  |         </div> | 
 |  |  |         <div class="item"> | 
 |  |  |           <div class="la">上报时间</div> | 
 |  |  |           <div class="val">{{ info.createDate }}</div> | 
 |  |  |         </div> | 
 |  |  |         <div class="item max"> | 
 |  |  |           <div class="la">上门时间</div> | 
 |  |  |           <div class="val">{{ info.getDate }}</div> | 
 |  |  |         </div> | 
 |  |  |         <div class="item max"> | 
 |  |  |           <div class="la">问题描述</div> | 
 |  |  |           <div class="val">{{ info.content }}</div> | 
 |  |  |         </div> | 
 |  |  |         <div class="item max"> | 
 |  |  |           <div class="la">问题图片</div> | 
 |  |  |           <div class="value" v-if="info.fileList == null || !info.fileList.length">无</div> | 
 |  |  |           <div class="value" v-if="info.fileList != null && info.fileList.length"> | 
 |  |  |             <div v-for="item in info.fileList" :key="item.id" style="display: inline;margin-right: 20px"> | 
 |  |  |               <video v-if="item.fileurlFull && item.fileurlFull.endsWith('.mp4')" ref="videoRef" controls preload="auto" | 
 |  |  |                 style="width: 80px;height: 80px;object-fit: contain;" :src="item.fileurlFull" /> | 
 |  |  |               <el-image v-else-if="item.fileurlFull" style="width:80px; height: 80px" :src="item.fileurlFull" | 
 |  |  |                 :preview-src-list="[item.fileurlFull]"> | 
 |  |  |               </el-image> | 
 |  |  |         <div class="side"> | 
 |  |  |           <div class="title">工单流转记录员</div> | 
 |  |  |           <div class="flow_list"> | 
 |  |  |             <div class="item" v-for="item,i in info.logList"> | 
 |  |  |               <div class="icon"> | 
 |  |  |                 <div class="dian"></div> | 
 |  |  |                 <div v-if="i < info.logList.length - 1" class="line"></div> | 
 |  |  |               </div> | 
 |  |  |               <div class="content"> | 
 |  |  |                 <div class="name">{{ item.title }}</div> | 
 |  |  |                 <div class="time">操作时间:{{ item.createDate }}</div> | 
 |  |  |                 <div class="creator">操作人:{{ item.param1 }}</div> | 
 |  |  |               </div> | 
 |  |  |             </div> | 
 |  |  |           </div> | 
 |  |  |         </div> | 
 |  |  | 
 |  |  |           </el-form-item> | 
 |  |  |           <el-form-item label="现场图片"> | 
 |  |  |             <div class="file_list"> | 
 |  |  |               <el-upload class="avatar-uploader" :data="uploadData" multiple :limit="6" :auto-upload="true" :action="uploadImgUrl" | 
 |  |  |                 :show-file-list="false" :on-success="uploadAvatarSuccess" :on-error="uploadError" | 
 |  |  |               <el-upload class="avatar-uploader" :data="uploadData" multiple :limit="6" :auto-upload="true" | 
 |  |  |                 :action="uploadImgUrl" :show-file-list="false" :on-success="uploadAvatarSuccess" :on-error="uploadError" | 
 |  |  |                 :before-upload="beforeUpload"> | 
 |  |  |                 <div class="upload_wrap"> | 
 |  |  |                   <i class="el-icon-plus avatar-uploader-icon"></i> | 
 |  |  | 
 |  |  |         if (valid) { | 
 |  |  |           const { param, id, dealFileList, info } = this | 
 |  |  |           let fn = null | 
 |  |  |           if(info.dealStatus == 0 || info.dealStatus == null){ | 
 |  |  |           if (info.dealStatus == 0 || info.dealStatus == null) { | 
 |  |  |             fn = param.dealType == 0 ? dispatchOrder : dealOrder | 
 |  |  |           }else{ | 
 |  |  |           } else { | 
 |  |  |             fn = dealOrder | 
 |  |  |           } | 
 |  |  |           fn({ | 
 |  |  | 
 |  |  |       width: 100%; | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  |   .main_content{ | 
 |  |  |     display: flex; | 
 |  |  |     .side{ | 
 |  |  |       width: 240px; | 
 |  |  |       .title{ | 
 |  |  |         font-size: 14px; | 
 |  |  |       } | 
 |  |  |       .flow_list{ | 
 |  |  |         .item{ | 
 |  |  |           display: flex; | 
 |  |  |           .icon{ | 
 |  |  |             width: 28px; | 
 |  |  |             display: flex; | 
 |  |  |             flex-direction: column; | 
 |  |  |             align-items: center; | 
 |  |  |             .dian{ | 
 |  |  |               width: 12px; | 
 |  |  |               height: 12px; | 
 |  |  |               border-radius: 50%; | 
 |  |  |               background-color: #e89e42; | 
 |  |  |             } | 
 |  |  |             .line{ | 
 |  |  |               width: 1px; | 
 |  |  |               height: 100%; | 
 |  |  |               background-color: #e89e42; | 
 |  |  |             } | 
 |  |  |           } | 
 |  |  |           .content{ | 
 |  |  |             font-size: 12px; | 
 |  |  |             color: #999999; | 
 |  |  |             padding-bottom: 12px; | 
 |  |  |             .name{ | 
 |  |  |               font-size: 13px; | 
 |  |  |               color: #333333; | 
 |  |  |             } | 
 |  |  |           } | 
 |  |  |         } | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .file_list { |