|  |  |  | 
|---|
|  |  |  | <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" | 
|---|
|  |  |  | <!-- <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-if="item.type == 0" style="width:80px; height: 80px" :src="item.fileurlFull" | 
|---|
|  |  |  | :preview-src-list="[item.fileurlFull]"> | 
|---|
|  |  |  | </el-image> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div v-if="info.fileList && info.fileList.length > 0 && info.fileList.filter(i => i.type == 1).length > 0" | 
|---|
|  |  |  | class="item max"> | 
|---|
|  |  |  | <div class="la">问题视频</div> | 
|---|
|  |  |  | <div class="value"> | 
|---|
|  |  |  | <div v-for="item in info.fileList" :key="item.id" style="display: inline;margin-right: 20px"> | 
|---|
|  |  |  | <video v-if="item.type == 1" ref="videoRef" controls preload="auto" | 
|---|
|  |  |  | style="width: 240px;height: 160px;object-fit: contain;" :src="item.fileurlFull" /> | 
|---|
|  |  |  | </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="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> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="title">{{ info.dealStatus == 0 || info.dealStatus == 1 ? '工单处理' : '处理结果' }}</div> | 
|---|
|  |  |  | <div class="title" | 
|---|
|  |  |  | v-if="info.dealStatus == 2 || info.dealStatus == 0 || (info.dealStatus == 1 && info.dealUserId === userInfo.id)"> | 
|---|
|  |  |  | {{ info.dealStatus == 0 || info.dealStatus == 1 ? '工单处理' : '处理结果' }}</div> | 
|---|
|  |  |  | <el-form :model="param" ref="form" :rules="rules"> | 
|---|
|  |  |  | <template v-if="info.dealStatus == 0 || info.dealStatus == null"> | 
|---|
|  |  |  | <el-form-item label="处理方式" prop="dealType"> | 
|---|
|  |  |  | 
|---|
|  |  |  | <el-radio v-model="param.dealType" :label="0">指派</el-radio> | 
|---|
|  |  |  | <el-radio v-model="param.dealType" :label="1">直接回复</el-radio> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item v-if="param.dealType == 0" label="指派给" prop="dealUserId"> | 
|---|
|  |  |  | <el-select v-model="param.dealUserId" clearable filterable class="w400"> | 
|---|
|  |  |  | <el-option v-for="item in staffList" :label="item.realname" :value="item.id"></el-option> | 
|---|
|  |  |  | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="现场图片"> | 
|---|
|  |  |  | <div class="file_list"> | 
|---|
|  |  |  | <el-upload class="avatar-uploader" :data="uploadData" :auto-upload="true" | 
|---|
|  |  |  | :action="uploadImgUrl" :show-file-list="false" :on-success="uploadAvatarSuccess" :on-error="uploadError" | 
|---|
|  |  |  | <el-upload class="avatar-uploader" :data="uploadData" :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> | 
|---|
|  |  |  | 
|---|
|  |  |  | const { id } = this | 
|---|
|  |  |  | detailById(id).then(res => { | 
|---|
|  |  |  | this.info = res | 
|---|
|  |  |  | if(this.info.dealStatus == 1){ | 
|---|
|  |  |  | this.$set(this.param, 'getDate',dayjs().format('YYYY-MM-DD HH:mm:ss') ) | 
|---|
|  |  |  | if (this.info.dealStatus == 1) { | 
|---|
|  |  |  | this.$set(this.param, 'getDate', dayjs().format('YYYY-MM-DD HH:mm:ss')) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .primaryColor { | 
|---|
|  |  |  | border: 1px solid rgba(63, 126, 239,.2); | 
|---|
|  |  |  | background-color: rgba(63, 126, 239,.2); | 
|---|
|  |  |  | border: 1px solid rgba(63, 126, 239, .2); | 
|---|
|  |  |  | background-color: rgba(63, 126, 239, .2); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .green{ | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .green { | 
|---|
|  |  |  | background-color: rgba(83, 183, 148, .2); | 
|---|
|  |  |  | border: 1px solid rgba(83, 183, 148, .2); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .gray { | 
|---|
|  |  |  | color: #333333; | 
|---|
|  |  |  | background-color: rgba(128, 128, 128, .2); | 
|---|
|  |  |  | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | .la{ | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .la { | 
|---|
|  |  |  | margin-bottom: 0; | 
|---|
|  |  |  | width: 72px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .main_content{ | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .main_content { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | .side{ | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .side { | 
|---|
|  |  |  | width: 370px; | 
|---|
|  |  |  | .title{ | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .title { | 
|---|
|  |  |  | font-size: 14px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .flow_list{ | 
|---|
|  |  |  | .item{ | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .flow_list { | 
|---|
|  |  |  | .item { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | .icon{ | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .icon { | 
|---|
|  |  |  | width: 28px; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | flex-direction: column; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | .dian{ | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .dian { | 
|---|
|  |  |  | width: 12px; | 
|---|
|  |  |  | height: 12px; | 
|---|
|  |  |  | border-radius: 50%; | 
|---|
|  |  |  | background-color: #e89e42; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .line{ | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .line { | 
|---|
|  |  |  | width: 1px; | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  | background-color: #e89e42; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .content{ | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .content { | 
|---|
|  |  |  | font-size: 12px; | 
|---|
|  |  |  | color: #999999; | 
|---|
|  |  |  | padding-bottom: 12px; | 
|---|
|  |  |  | .name{ | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .name { | 
|---|
|  |  |  | font-size: 13px; | 
|---|
|  |  |  | color: #333333; | 
|---|
|  |  |  | } | 
|---|