v3-lab-web/src/views/safetyCheck/components/initiateInspect/rectificationComponent.vue

<!--整改-->
<template>
  <div class="page-container initiateInspect-rectificationComponent">
    <!--当前整改-->
    <el-form class="add-form-box" :model="addForm" ref="addForm" :rules="rules" label-width="110px">
      <p class="content-right-title-min-p">
        隐患整改
        <span :class="itemShowType?'el-icon-arrow-down':'el-icon-arrow-up'" @click="itemShowButton()"></span>
      </p>
      <div v-if="itemShowType" style="margin-top:20px;">
        <el-form-item label="整改结果" prop="rectifyResult">
          <div class="right-text-box">
            <div :class="addForm.rectifyResult == 1?'right-check-box':'right-no-check-box'" @click="checkButton(1)">
              <div>
                <p></p>
              </div>
              <p class="right-check-title-p">已整改</p>
            </div>
            <div :class="addForm.rectifyResult == 0?'right-check-box':'right-no-check-box'" @click="checkButton(0)">
              <div>
                <p></p>
              </div>
              <p class="right-check-title-p">暂无法整改</p>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="整改措施" prop="rectifyMeasure">
          <el-input placeholder="立整立改的请填写相关文字及整改前后照片对比等，不能立整立改的请说明因并附整改计划、措施等" maxlength='500' type="textarea" style="width:704px;"
                    resize="none" v-model="addForm.rectifyMeasure" :show-word-limit="true" :rows="3"></el-input>
        </el-form-item>
        <el-form-item label="现场照片" prop="rectifyUploadList">
          <div class="snapshotManagement-for-img-box" v-for="(img,imgIndex) in addForm.rectifyUploadList" :key="imgIndex">
            <img class="for-img" :src="img.fileUrl" @click="lookImg(addForm.rectifyUploadList,imgIndex)">
            <p class="for-del-button el-icon-circle-close" @click="delImg(imgIndex)"></p>
          </div>
          <el-upload
            v-if="addForm.rectifyUploadList.length<6"
            style="display: inline-block;overflow: hidden"
            class="avatar-uploader"
            :action="uploadImgUrl"
            :show-file-list="false"
            :on-success="(res)=>handleAvatarSuccess('img',res)"
            :headers="headers"
            :before-upload="(res)=>beforeAvatarUpload('img',res)">
            <p class="el-icon-plus up-img-p" style="display: inline-block"></p>
          </el-upload>
          <p class="up-img-text">支持jpg/png/bmp/gif格式，且不超过2M，最多上传6张</p>
        </el-form-item>
        <!--<div v-if="addForm.rectifyResult == 0">-->
          <!--<el-form-item label="整改方案" prop="rectifyMaterialUrl">-->
            <!--<div class="up-file-button" v-if="!addForm.rectifyMaterialUrl">-->
              <!--<el-upload-->
                <!--v-if="addForm.rectifyUploadList.length<6"-->
                <!--style="display: inline-block;overflow: hidden"-->
                <!--class="avatar-uploader"-->
                <!--:action="uploadImgUrl"-->
                <!--:show-file-list="false"-->
                <!--:on-success="(res)=>handleAvatarSuccess('file',res)"-->
                <!--:headers="headers"-->
                <!--:before-upload="(res)=>beforeAvatarUpload('file',res)">-->
                <!--<p class="up-file-min-button">+ 上传文件</p>-->
              <!--</el-upload>-->
              <!--<p class="up-file-text">支持docx/xlsx/pdf格式文件</p>-->
            <!--</div>-->
            <!--<div class="up-file-box" v-if="addForm.rectifyMaterialUrl">-->
              <!--<img src="@/assets/ZDimages/safetyCheck/icon_dr_wj.png">-->
              <!--<p @click="lookFile">{{addForm.rectifyMaterialName}}</p>-->
              <!--<p class="el-icon-close" @click="delFileButton"></p>-->
            <!--</div>-->
          <!--</el-form-item>-->
        <!--</div>-->
      </div>
    </el-form>
  </div>
</template>

<script>
  import { getToken } from "@/utils/auth";
  export default {
    name: 'rectificationComponent',
    props:{
      rectificationComponentPropsData:{},
    },
    data(){
      return{
        loading:false,
        //上传相关
        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
        headers: {
          Authorization:getToken(),
        },
        //图片组件数据
        fullScreenViewProps:[],
        itemShowType:true,
        addForm:{
          rectifyResult:null,
          rectifyMeasure:'',
          rectifyUploadList:[],
          rectifyMaterialUrl:'',
        },
        rules:{
          rectifyResult: [
            { required: true, message: "请选择整改结果", trigger: "blur" },
          ],
          rectifyMeasure: [
            { required: true, message: "请输入整改措施", trigger: "blur" },
            { required: true, message: "请输入整改措施", validator: this.spaceJudgment, trigger: "blur" }
          ],
          rectifyUploadList: [
            { required: true, message: "请上传现场照片", trigger: "blur" },
          ],
          rectifyMaterialUrl: [
            { required: true, message: "请上传整改方案", trigger: "blur" },
          ],
        },
        upDataName:'',
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      submitData(){
        return new Promise(resolve=>{
          this.$refs["addForm"].validate(valid => {
            if (valid) {
              resolve(this.addForm)
            }
          })
        })
      },
      //子项展开隐藏按钮
      itemShowButton(){
        this.$set(this,'itemShowType',!this.itemShowType);
      },
      //整改选择按钮
      checkButton(type){
        if(this.addForm.rectifyResult != type){
          this.$set(this.addForm,'rectifyResult',type);
          this.$forceUpdate();
        }
      },
      /*==========上传相关==========*/
      handleAvatarSuccess(srt,res) {
        this.$set(this,'loading',false);
        if(srt == 'img'){
          if(this.addForm.rectifyUploadList.length>5){
            this.msgError('最多只可上传6张')
            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,
            fileType:2,
          };
          this.addForm.rectifyUploadList.push(obj);
        } else if(srt == 'file'){
          this.$set(this,'loading',false);
          let suffixName= this.upDataName.split('.')[this.upDataName.split('.').length - 2]
          //判断文件名中是否有逗号和分号
          if(suffixName.indexOf(',')==-1 && suffixName.indexOf(';')==-1){
          }else{
            this.msgError('文件名里包含逗号或分号，请修改后重新上传！')
            return
          }
          this.$set(this.addForm,'rectifyMaterialUrl',res.data.url);
          this.$set(this.addForm,'rectifyMaterialName',suffixName);
        }
        this.$forceUpdate()
      },
      beforeAvatarUpload(srt,file) {
        if(srt == 'img'){
          if(this.addForm.rectifyUploadList.length>5){
            this.msgError('最多只可上传6张')
            return false
          }
          let type = false;
          if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/jpg' || 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('仅支持jpeg/jpg/png/bmp/gif格式')
            type = false;
          }
          return type;
        }else if(srt == 'file'){
          let type = false;
          let num = 0;
          for(let i=0;i<file.name.length;i++){
            if(file.name[i] == '.'){
              num++
            }
          }
          if(num != 1){
            this.msgError('文件名称不能包含 " . "')
            return false
          }
          if (file.type == 'application/pdf' || file.type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' || file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
            if(file.size> 5250000){
              this.msgError('上传大小不能超过5M')
              return false
            }
            this.$set(this,'loading',true);
            this.upDataName = file.name;
            type = true;
          }else{
            this.msgError('只能上传docx/xlsx/pdf格式');
            type = false;
          }
          return type;
        }
      },
      //删除文件
      delFileButton(){
        this.$set(this.addForm,'rectifyMaterialUrl','');
        this.$set(this.addForm,'rectifyMaterialName','');
      },
      //删除照片
      delImg(imgIndex){
        this.addForm.rectifyUploadList.splice(imgIndex,1);
      },
      //照片预览
      lookImg(list,index){
        this.$parent.fullScreenViewClick(list,index);
      },
      //文件预览
      lookFile(){
        let obj = {
          fileName:this.addForm.rectifyMaterialName,
          fileUrl:this.addForm.rectifyMaterialUrl,
        };
        this.$parent.fullScreenFileLookClick(obj);
      },
    },
  }
</script>

<style scoped lang="scss">
  .initiateInspect-rectificationComponent{
    .add-form-box{
      border:1px solid #E0E0E0;
      border-top:none;
      .content-right-title-min-p{
        line-height:40px;
        background: #F5F5F5;
        padding-left:23px;
        border-top:1px solid #E0E0E0;
        border-bottom:1px solid #E0E0E0;
        span{
          float: right;
          font-size:20px;
          line-height:40px;
          margin-right:20px;
          cursor: pointer;
        }
      }
      .right-text-box{
        display: flex;
        .right-text-name-p{
          width:90px;
          line-height:40px;
          text-align: right;
          margin-right:14px;
          font-size:16px;
        }
        .right-text-title-box{
          font-size:14px;
          width:300px;
          padding:10px 20px;
          background-color: #f5f5f5;
          border: 1px solid #E0E0E0;
          border-radius: 4px 4px 4px 4px;
          p{
            line-height:20px;
            /*单行省略号*/
            display:block;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
        }
        .right-text-text-box{
          font-size:14px;
          width:300px;
          padding:10px 20px;
          background-color: #f5f5f5;
          border: 1px solid #E0E0E0;
          border-radius: 4px 4px 4px 4px;
          p{
            line-height:20px;
          }
        }
        .right-no-check-box{
          height:40px;
          margin-right:20px;
          overflow: hidden;
          display: flex;
          cursor: pointer;
          div{
            margin:13px 0 0;
            width:16px;
            height:16px;
            border:1px solid #999;
            border-radius:50%;
            p{
              height:10px;
              width:10px;
              margin:2px;
              border-radius:50%;
            }
          }
          .right-check-title-p{
            margin-left:8px;
            height:40px;
            line-height:40px;
            color:#333;
            font-size:16px;
          }
        }
        .right-check-box{
          height:40px;
          margin-right:20px;
          overflow: hidden;
          display: flex;
          cursor: pointer;
          div{
            margin:13px 0 0;
            width:16px;
            height:16px;
            border:1px solid #0183FA;
            border-radius:50%;
            p{
              height:10px;
              width:10px;
              margin:2px;
              border-radius:50%;
              background-color: #0183FA;
            }
          }
          .right-check-title-p{
            margin-left:8px;
            height:40px;
            line-height:40px;
            color:#0183FA;
            font-size:16px;
          }
        }
        img{
          cursor: pointer;
          display: block;
          width:100px;
          height:100px;
          margin-right:20px;
        }
      }
      ::v-deep .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;
        }
      }
      ::v-deep .up-img-p{
        height:80px;
        width:80px;
        line-height:80px;
        text-align: center;
        font-size:16px;
        border-radius:4px;
        border:1px dashed #E0E0E0;
      }
      .up-img-text{
        line-height:40px;
        font-size:14px;
        color:#999;
      }
      .up-file-button{
        display: flex;
      }
      .up-file-min-button{
        border:1px solid #0183FA;
        color:#0183FA;
        border-radius:4px;
        height:30px;
        line-height:30px;
        width:100px;
        text-align: center;
        margin:5px 20px 0 0;
      }
      .up-file-text{
        color:#999;
        height:40px;
        line-height:40px;
      }
      .up-file-box{
        display: flex;
        height:40px;
        img{
          margin-top:12px;
          width:16px;
          height:16px;
          display: block;
        }
        p:nth-child(2){
          line-height:40px;
          font-size:14px;
          margin:0 30px 0 15px;
          cursor: pointer;
        }
        p:nth-child(3){
          cursor: pointer;
          color:red;
          font-size:16px;
          height:16px;
          width:16px;
          line-height:16px;
          margin-top:12px;
          text-align: center
        }
      }
    }
  }
</style>