| | |
| | | <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; |
| | | } |