detail.vue

<template>
  <div>
    <el-dialog title="查看详情" :visible.sync="isShow" v-if="isShow" :close-on-click-modal='false' width="1000px" class="manage-dialog dialog_lj" :before-close="closeDialog">
      <div class="header">
        <el-row>
          <el-col :span="6">
            <span>得分/总分：</span><span class="count">{{detailObj.hadScore}}/{{detailObj.totalScore}}</span>
          </el-col>
          <el-col :span="6">
            <span>合格/总数：</span><span class="count">{{detailObj.qualified}}/{{detailObj.total}}</span>
          </el-col>
        </el-row>
        <el-steps class="stepStatus" :active="detailObj.stepStatus" style="margin-top: 10px;">
          <el-step title="巡检人" >
            <template slot="description">
              <span>{{detailObj.createByName}}</span><br />
              <span>{{detailObj.createTime}}</span>
            </template>
          </el-step>
          <el-step title="待处理" v-if="detailObj.handler">
            <template slot="description">
              <span>{{detailObj.handlerName}}</span><br />
              <span>{{detailObj.lastHandleTime}}</span>
            </template>
          </el-step>
          <el-step title="待复查" v-if="detailObj.handler">
            <template slot="description">
              <span v-if="detailObj.lastRecheckTime">{{detailObj.createByName}}</span><br />
              <span v-if="detailObj.lastRecheckTime">{{detailObj.lastRecheckTime}}</span>
            </template>
          </el-step>
          <el-step title="已完成" :description="detailObj.closeTime"></el-step>
        </el-steps>
      </div>
      <div >
        <el-row :gutter="20" class="body">
          <el-col :span="12">
            <div class="itemBox">
              <p class="title"><img src="~@/assets/img/videoShop/icon1.png" >基础数据</p>
              <p>
                <span>订单编号：{{detailObj.sn}}</span>
                <span style="margin-left: 15px;">监控点：{{detailObj.gateName}}</span>
              </p>
            </div>
            <div class="itemBox" v-if="isEdit=='edit'">
              <p class="title"><img src="~@/assets/img/videoShop/icon1.png" >{{detailObj.status==1?'处理结果':'复查结果'}}</p>
              <div id="canvas_show" class="canvas_show"></div>
              <p class="itemTitle">备注：</p>
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                maxlength="200"
                v-model="formObj.remark">
              </el-input>
            </div>
            <div class="itemBox">
              <p class="title"><img src="~@/assets/img/videoShop/icon1.png" >巡检内容</p>
              <el-row class="scoreList">
                <el-col :span="4">
                  <p class="name">得分/总分</p>
                  <p class="count">{{detailObj.hadScore}}/{{detailObj.totalScore}}</p>
                </el-col>
                <el-col :span="4">
                  <p class="name">总巡检项</p>
                  <p >{{detailObj.total}}条</p>
                </el-col>
                <el-col :span="4">
                  <p class="name">合格</p>
                  <p class="status1">{{detailObj.qualified}}条</p>
                </el-col>
                <el-col :span="4">
                  <p class="name">不合格</p>
                  <p class="status0">{{detailObj.noQualified}}条</p>
                </el-col>
                <el-col :span="4">
                  <p class="name lastOne">不适用</p>
                  <p class="lastOne status2">{{detailObj.noSuit}}条</p>
                </el-col>
              </el-row>
              <div class="itemDetail" v-for="(item,index) in detailObj.sops" :key="index">
                <el-row>
                  <el-col :span="20">
                    <p><span class="itemTitle">{{item.sopTypeName}}：</span><span class="itemContent">{{item.name}}</span></p>
                    <p class="overLength"><span class="itemTitle">描述：</span><span class="itemContent" :title="item.intro">{{item.intro}}</span></p>
                    <p><span class="itemTitle">分值：</span> <span class="count">{{item.score}}</span></p>
                  </el-col>
                  <el-col :span="4">
                    <p class="status" :class="'status'+item.status">{{formatStatus(item.status)}}</p>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="itemBox">
              <p class="itemTitle">巡检图：</p>
              <el-image class="tourImg"
                  style="width: 100px; height: 100px"
                  :src="detailObj.pic"
                  :preview-src-list="detailObj.picList">
                </el-image>
              <p><span class="itemTitle">备注：</span><span></span>{{detailObj.remark}}</span></p>
            </div>
          </el-col>
          <el-col :span="12" class="steps">
            <el-steps direction="vertical" :active="detailObj.handleRecords.length">
              <el-step v-for="(item,index) in detailObj.handleRecords" :key="index">
                <template slot="title">
                  <el-row>
                    <el-col :span="6">
                      <span v-if="item.result==0">巡查了工单</span>
                      <span v-if="item.result==1">处理了工单</span>
                      <span v-if="item.result==2">复查了工单</span>
                      <span v-if="item.result==3">完成了工单</span>
                    </el-col>
                    <el-col :span="12">
                      <el-divider class='divider'></el-divider>
                    </el-col>
                    <el-col :span="6">
                      <span class="statusTitle">状态：{{formatOrderStatus(item.status)}}</span>
                    </el-col>
                  </el-row>
                </template>
                <template slot="description">
                  <div class="itemBox">
                    <p><span class="itemTitle">{{item.result==1?'处理人':'巡检人'}}：</span><span>{{item.handlerName}}  {{item.createTime}}</span></p>
                    <p class="itemTitle">图片：</p>
                    <el-row>
                      <el-col :span="8" v-for="img in item.picList" :key="img">
                        <!-- <img class="img" :src= 'picUrl+img'> -->
                        <el-image class="tourImg"
                            style="width: 100px; height: 100px"
                            :src="img"
                            :preview-src-list="item.picList">
                          </el-image>
                      </el-col>
                    </el-row>
                    <p><span class="itemTitle">备注：</span><span>{{item.remark}}</span></p>
                  </div>
                </template>
              </el-step>
            </el-steps>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-if="isEdit=='edit'&&detailObj.status==1"  @click="addSubmit(1)" class="dialog-btn dialog-confirm-btn">
          {{$t('dialog.confirm')}}</el-button>
        <el-button type="primary" v-if="isEdit=='edit'&&detailObj.status==2"  @click="addSubmit(2)" class="dialog-btn dialog-confirm-btn">
          不通过</el-button>
        <el-button type="primary" v-if="isEdit=='edit'&&detailObj.status==2"  @click="addSubmit(3)" class="dialog-btn dialog-confirm-btn">
          通过并完成</el-button>
        <el-button @click="closeDialog" class="dialog-btn">{{$t('dialog.cancel')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import closeImg from '@/assets/img/videoShop/close.png'
  export default {
    data() {
      return {
        remark:'',
        picUrl: window._vionConfig.picUrl,
        isShow: false,
        detailObj:'',
        userList:[],
        fileList:[],
        isEdit:'',
        statusList:[
          {
            name:'不适用',
            value:'-1'
          },
          {
            name:'不合格',
            value:'0'
          },
          {
            name:'合格',
            value:'1'
          }
        ],
        orderStatusList:[
          {
            name:'待处理',
            value:'1'
          },
          {
            name:'待复查',
            value:'2'
          },
          {
            name:'已关闭',
            value:'3'
          }
        ],
        formObj:{},
        imgList:[],
        canvasList:[]
      }
    },
    methods: {
      dialogInit(val,type) {
        this.formObj = {
          recordId:val,
          remark:'',
          result:'',
          pics:[]
        }
        this.isEdit = type;
        this.getUserList()
        this.getDetail(val)
      },
      formatOrderStatus(cellValue){
        const formaterVal = this.orderStatusList.find(item => item.value == cellValue)
        return formaterVal && formaterVal.name || ''
      },
      formatStatus(cellValue){
        const formaterVal = this.statusList.find(item => item.value == cellValue)
        return formaterVal && formaterVal.name || ''
      },
      formatUser(cellValue){
        const formaterVal = this.userList.find(item => item.loginName == cellValue)
        return formaterVal && formaterVal.realName || ''
      },
      getUserList(){
        let tabelParams = {
          accountId: this.$cookie.get("accountId"),
          page: 1,
          pageSize: 9999999,
        };
        this.$api.management.userList(tabelParams)
          .then(data => {
            const result = data.data;
            this.userList = result.data.list;
          })
      },
      handleChange(file,fileList){
        const isJPG = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png');
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 jpg/png 格式!');
          return false;
        }else{
          this.formObj.pics = fileList
        }
      },
      addSubmit(val){
        if(this.imgList.length<1){
          this.$message.error(`请上传图片`)
          return
        }
        let form = new FormData()
        let status = true
        this.imgList.forEach(item => {
           form.append('pics[]', item.val)
        })
        if (!status) {
          return false
        }
        form.append('recordId',this.formObj.recordId)
        form.append('remark',this.formObj.remark)
        form.append('result',val)
        this.$api.videoShopTourReport.confirmPatrolRecordHandle(form,{
          headers: {
            'Content-type': 'application/x-www-form-urlencoded;charset=utf-8'    //multipart/form-data; charset=utf-8
          }
        }).then(data => {
          let result = data.data;
          if(result.code == '200'){
            this.formObj = {}
            this.$message({
              message: result.msg,
              type: 'success'
            });
            this.$parent.getTableData()
            this.isShow = false;
          }else{
              this.$message({
                message: result.msg,
                type: 'error'
              });
            }
        })
      },
      getDetail(val){
        this.$api.videoShopTourReport.getPatrolRecordDetail({
          id:val
        }).then(res => {
          let data = res.data
          if(data.code==200){
            this.isShow = true;
            this.detailObj = data.data
            this.detailObj.picList = [window._vionConfig.picUrl + this.detailObj.pic]
            this.detailObj.pic = window._vionConfig.picUrl + this.detailObj.pic
            this.detailObj.stepStatus = this.detailObj.status==3?10:this.detailObj.status;
            this.detailObj.handleRecords.forEach(item=>{
              item.picList = []
              item.pics.forEach(itemPic=>{
                item.picList.push(window._vionConfig.picUrl + itemPic)
              })
            })
          }
        })
      },
      closeDialog() {
        this.isShow = false;
      }
    }
  }
</script>
<style lang="less" scoped="scoped">
  .dialog_lj{
    min-height: 500px;
  }
  /deep/.el-upload-list--picture-card{
    .el-upload-list__item{
      width: 145px;
    }
  }
  .stepStatus{
    /deep/.el-step__description{
       color: #000;
    }
  }
  .divider{
    height: 0;
    margin: 12px 0;
    border: 1px dashed #2674E9;
  }
  .img{
    width: 80%;
  }
  .overLength{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }
  .status{
    margin-top: 32px;
    text-align: center;
    color: #597EF7;
  }
  .status0{
    color: #E02020;
  }
  .status1{
    color: #06CE66;
  }
  .status2{
    color: #597EF7;
  }
  .count{
    color: #2674E9;
  }
  .header{
    .count{
      font-size: 28px;
    }
  }
  .tourImg{
    max-width: 200px;
    min-width: 100px;
  }
  .body{
    height: 600px;
    overflow-y: auto;
    .statusTitle{
      float: right;
      margin-right: 15px;
      font-size: 12px;
      color: #6D7278;
    }
  }
  .steps{
    .itemBox{
      color: #000;
    }
  }
  .scoreList{
    margin-bottom: 10px;
    /deep/.el-col{
      width: 20%;
    }
    p{
      height: 32px;
      line-height: 32px;
      text-align: center;
      border: 1px solid #D9D9D9;
      border-right-width: 0;
    }
    .name{
      border-bottom-width: 0;
      background-color: #E1EBFC;
    }
    .lastOne{
      border-right-width: 1px;
    }
  }
  .itemBox{
    p{
      line-height: 32px;
    }
    .title{
      font-weight: 500;
      color: #2674E9;
      font-size: 14px;
      img{
        vertical-align: middle;
        width: 16px;
        margin-right: 5px;
      }
    }
    .itemDetail{
      border: 1px solid #D9D9D9;
      margin-bottom: 10px;
      padding: 0 10px;
      .count{
        font-size: 20px;
      }
    }
    .itemTitle{
      font-weight: 900;
    }

  }
</style>