FE-V2-PC/src/views/safetyCheck/snapshotManagement/infoPage.vue

<template>
  <div class="snapshotManagement-infoPage" v-loading.fullscreen.lock="loading">
    <div class="title-box">
      <p>随手拍详情</p>
      <p class="add-button-one-90" @click="outButton" style="width:100px;margin-right:10px;">返回</p>
    </div>
    <div class="content-box scrollbar-box">
      <div class="info-box">
        <div class="info-box-text">
          <p>学院</p>
          <p>{{infoData.deptName}}</p>
        </div>
        <div class="info-box-text">
          <p>实验室</p>
          <p>{{infoData.subName}}</p>
        </div>
        <div class="info-box-text">
          <p>隐患描述</p>
          <p>{{infoData.hazardDescribe}}</p>
        </div>
        <div class="info-box-img">
          <p>隐患照片</p>
          <div>
            <img :src="imgItem.fileUrl" @click="lookImg(infoData.yhDtoList,index)"
                 v-for="(imgItem,index) in infoData.yhDtoList" :key="index">
          </div>
        </div>
        <div class="info-box-text-two">
          <div class="left-box">
            <p>上报人</p>
            <p>{{infoData.createName}}</p>
          </div>
          <div class="right-box">
            <p>上报时间</p>
            <p>{{infoData.createTime}}</p>
          </div>
        </div>
      </div>
      <div class="type-box" v-if="infoData.rectifyStatus == 1 || infoData.rectifyStatus == 2">
        <div class="info-box-type">
          <p>整改结果</p>
          <p>{{infoData.rectifyStatus == 1?'已整改':(infoData.rectifyStatus == 2?'暂无法整改':'')}}</p>
        </div>
        <div class="info-box-text">
          <p>{{infoData.rectifyStatus == 1?'整改措施':(infoData.rectifyStatus == 2?'原因描述':'')}}</p>
          <p>{{infoData.rectifyDescribe}}</p>
        </div>
        <div class="info-box-img">
          <p>上传照片</p>
          <div>
            <img :src="imgItem.fileUrl" @click="lookImg(infoData.zgDtoList,index)"
                 v-for="(imgItem,index) in infoData.zgDtoList" :key="index">
            <p v-if="!infoData.zgDtoList[0]" style="font-size:14px;color:#999;">未上传照片</p>
          </div>
        </div>
        <div class="info-box-text-two">
          <div class="left-box">
            <p>整改人</p>
            <p>{{infoData.rectifyPeople}}</p>
          </div>
          <div class="right-box">
            <p>整改时间</p>
            <p>{{infoData.rectifyTime}}</p>
          </div>
        </div>
      </div>
      <div class="up-data-box" v-if="infoData.rectifyStatus == 0 && infoData.rectifyGentle">
        <el-form ref="addDialogForm" :model="upFormData" :rules="rules" label-width="140px">
          <el-form-item label="整改结果：" prop="rectifyStatus">
            <el-radio-group v-model="upFormData.rectifyStatus" style="margin-top:5px;">
              <el-radio :label="1">已整改</el-radio>
              <el-radio :label="2">暂无法整改</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="upFormData.rectifyStatus==1?'整改措施：':(upFormData.rectifyStatus==2?'原因描述：':'')" prop="rectifyDescribe">
            <el-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 4}"
              :placeholder="upFormData.rectifyStatus==1?'请输入整改措施':(upFormData.rectifyStatus==2?'请输入原因描述':'')"
              v-model="upFormData.rectifyDescribe"
              maxlength="100"
              resize="none"
              show-word-limit
              style="width:548px;">
            </el-input>
          </el-form-item>
          <el-form-item label="上传照片:" prop="imgDtoList">
            <div class="snapshotManagement-for-img-box" v-for="(img,imgIndex) in upFormData.imgDtoList" :key="imgIndex">
              <img class="for-img" :src="img.fileUrl">
              <p class="for-del-button el-icon-circle-close" @click="delImg(imgIndex)"></p>
            </div>
            <el-upload
              v-if="upFormData.imgDtoList.length<5"
              style="display: inline-block;overflow: hidden"
              class="avatar-uploader"
              :action="uploadImgUrl"
              :show-file-list="false"
              :on-success="(res)=>handleAvatarSuccess(res)"
              :headers="headers"
              :before-upload="(res)=>beforeAvatarUpload(res)">
              <p class="el-icon-plus up-img-p" style="display: inline-block"></p>
            </el-upload>
            <p class="dialog-material-text">支持jpg/png/bmp/gif格式，最多上传5张</p>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="button-box dialog-footer-box" v-if="infoData.rectifyStatus == 0 && infoData.rectifyGentle">
      <p class="dialog-footer-button-null"></p>
      <p class="dialog-footer-button-info" @click="outButton">取消</p>
      <p class="dialog-footer-button-primary" @click="upDataButton">确定</p>
      <p class="dialog-footer-button-null"></p>
    </div>
    <lookImgDialog ref="lookImgDialog"></lookImgDialog>
  </div>
</template>

<script>
  import { findById,clapApprove } from '@/api/safetyCheck/index'
  import lookImgDialog from '@/components/lookImgDialog/lookImgDialog.vue'
  import { getToken } from "@/utils/auth";
  export default {
    name: 'infoPage',
    props:{
      infoPropsData:{},
    },
    components: {
      lookImgDialog
    },
    data(){
      return{
        loading:false,
        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        infoData:{},
        upFormData:{
          rectifyStatus:1,
          rectifyDescribe:"",
          imgDtoList:[],
        },
        upDataName:"",
        rules:{
          rectifyStatus: [
            { required: true, message: "请选择整改结果", trigger: "change" },
          ],
        }
      }
    },
    created(){
      this.findById();
    },
    mounted(){

    },
    methods:{
      //提交整改
      upDataButton(){
        let self = this;
        this.$refs["addDialogForm"].validate(valid => {
          if (valid) {
            this.$confirm('确定提交?', "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
              let obj = JSON.parse(JSON.stringify(self.upFormData))
              obj.id = self.infoPropsData.id;
              clapApprove(obj).then(response => {
                self.msgSuccess(response.msg)
                self.$parent.goPage(4);
              })
            }).then(() => {
            }).catch(() => {});
          }
        })
      },
      //查询详情
      findById(){
        findById({id:this.infoPropsData.id}).then(response => {
          this.$set(this,'infoData',response.data);
        })
      },
      outButton(){
        this.$parent.goPage(1);
      },
      lookImg(list,index){
        for(let i=0;i<list.length;i++){
          list[i].name = list[i].fileName;
          list[i].url = list[i].fileUrl;
        }
        this.$refs.lookImgDialog.lookImgDialogOpen(1,list,index);
      },
      /*==========上传相关==========*/
      handleAvatarSuccess(res) {
        this.$set(this,'loading',false);
        if(this.upFormData.imgDtoList.length>4){
          this.msgError('最多只可上传5张')
          return
        }
        let suffixName= this.upDataName.split('.')[this.upDataName.split('.').length - 2]
        //判断文件名中是否有逗号和分号
        if(suffixName.indexOf(',')==-1 && suffixName.indexOf(';')==-1){
        }else{
          this.msgError('文件名里包含逗号或分号，请修改后重新上传！')
          return
        }
        let obj ={
          fileName:this.upDataName,
          fileUrl:res.data.url,
        };
        this.upFormData.imgDtoList.push(obj);
        this.$forceUpdate()
      },
      beforeAvatarUpload(file) {
        if(this.upFormData.imgDtoList.length>4){
          this.msgError('最多只可上传5张')
          return false
        }
        let type = false;
        if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif' || file.type == 'image/bmp') {
          if(file.size> 2100000){
            this.msgError('上传图片大小不能超过2M')
            return false
          }
          this.$set(this,'loading',true);
          this.upDataName = file.name;
          type = true;
        }else{
          this.msgError('仅支持jpg/png/bmp/gif格式')
          type = false;
        }
        return type;
      },
      //删除照片
      delImg(imgIndex){
        this.upFormData.imgDtoList.splice(imgIndex,1);
      },
    }
  }
</script>

<style scoped lang="scss">
  .snapshotManagement-infoPage{
    flex: 1;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    *{
      font-weight:500;
    }
    .title-box{
      border-bottom:1px solid #dedede;
      display: flex;
      p:nth-child(1){
        line-height:80px;
        margin-left:30px;
        flex:1;
        color:#0045AF;
      }
      p:nth-child(2){
        width:70px;
        height:40px;
        line-height:40px;
        margin:20px 30px;
      }
    }
    .content-box{
      flex:1;
      .info-box{
        margin:0 32px;
        padding:40px 50px;
        .info-box-text{
          display: flex;
          margin-bottom:20px;
          p:nth-child(1){
            width:70px;
            font-size:16px;
            color:#333;
            margin-right:30px;
            line-height:40px;
            text-align: right;
          }
          p:nth-child(2){
            padding:12px 20px;
            background-color: #F5F5F5;
            width:953px;
            border-radius:4px;
            font-size:14px;
            color:#333;
          }
        }
        .info-box-img{
          display: flex;
          margin-bottom:20px;
          p:nth-child(1){
            width:70px;
            font-size:16px;
            color:#333;
            margin-right:30px;
            line-height:40px;
            text-align: right;
          }
          div{
            img{
              width:80px;
              height:80px;
              border-radius:4px;
              margin-right:10px;
              cursor: pointer;
            }
          }
        }
        .info-box-text-two{
          display: flex;
          .left-box{
            display: flex;
            p:nth-child(1){
              width:70px;
              font-size:16px;
              color:#333;
              margin-right:30px;
              line-height:40px;
              text-align: right;
            }
            p:nth-child(2){
              padding:12px 20px;
              background-color: #F5F5F5;
              width:425px;
              border-radius:4px;
              font-size:14px;
              color:#333;
            }
          }
          .right-box{
            display: flex;
            p:nth-child(1){
              width:90px;
              font-size:16px;
              color:#333;
              margin-right:13px;
              line-height:40px;
              text-align: right;
            }
            p:nth-child(2){
              padding:12px 20px;
              background-color: #F5F5F5;
              width:425px;
              border-radius:4px;
              font-size:14px;
              color:#333;
            }
          }
        }
      }
      .type-box{
        margin:0 32px;
        padding:40px 50px;
        border-top: 1px dashed #D8D8D8;
        .info-box-type{
          display: flex;
          margin-bottom:20px;
          p:nth-child(1){
            width:70px;
            font-size:16px;
            color:#333;
            margin-right:30px;
            line-height:40px;
            text-align: right;
          }
          p:nth-child(2){
            padding:12px 20px;
            font-size:14px;
            color:#0183FA;
          }
        }
        .info-box-text{
          display: flex;
          margin-bottom:20px;
          p:nth-child(1){
            width:70px;
            font-size:16px;
            color:#333;
            margin-right:30px;
            line-height:40px;
            text-align: right;
          }
          p:nth-child(2){
            padding:12px 20px;
            background-color: #F5F5F5;
            width:953px;
            border-radius:4px;
            font-size:14px;
            color:#333;
          }
        }
        .info-box-img{
          display: flex;
          margin-bottom:20px;
          p:nth-child(1){
            width:70px;
            font-size:16px;
            color:#333;
            margin-right:30px;
            line-height:40px;
            text-align: right;
          }
          div{
            img{
              width:80px;
              height:80px;
              border-radius:4px;
              margin-right:10px;
              cursor: pointer;
            }
          }
        }
        .info-box-text-two{
          display: flex;
          .left-box{
            display: flex;
            p:nth-child(1){
              width:70px;
              font-size:16px;
              color:#333;
              margin-right:30px;
              line-height:40px;
              text-align: right;
            }
            p:nth-child(2){
              padding:12px 20px;
              background-color: #F5F5F5;
              width:425px;
              border-radius:4px;
              font-size:14px;
              color:#333;
            }
          }
          .right-box{
            display: flex;
            p:nth-child(1){
              width:90px;
              font-size:16px;
              color:#333;
              margin-right:13px;
              line-height:40px;
              text-align: right;
            }
            p:nth-child(2){
              padding:12px 20px;
              background-color: #F5F5F5;
              width:425px;
              border-radius:4px;
              font-size:14px;
              color:#333;
            }
          }
        }
      }
      .up-data-box{
        margin:0 32px;
        padding:40px 50px;
        border-top: 1px dashed #D8D8D8;
      }
    }
    .up-data-box{

      .snapshotManagement-for-img-box{
        width:80px;
        height:80px;
        border-radius:4px;
        display: inline-block;
        overflow: hidden;
        margin-right:20px;
        position: relative;
        .for-img{
          width:80px;
          height:80px;
          display: inline-block;
          overflow: hidden;
        }
        .for-del-button{
          background: rgba(0,0,0,0.7);
          width:20px;
          height:20px;
          line-height: 20px;
          text-align: center;
          color:#fff;
          border-bottom-left-radius:4px;
          cursor: pointer;
          position: absolute;
          top:0;
          right:0;
        }
      }
      .up-img-p{
        height:80px;
        width:80px;
        line-height:80px;
        text-align: center;
        font-size:16px;
        border-radius:4px;
        border:1px dashed #E0E0E0;
      }
    }
    .button-box{
      padding:20px;
      display: flex;
    }
  }
</style>