| | |
| | | <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> |
| | | <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="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="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> |
| | | </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 { |