FE-V2-PC/src/views/securityCheck/checkRecord/CheckRecordInfoUp.vue

<!--问题整改详情提交-->
<template>
    <div class="CheckRecordInfoUp">
      <div class="CheckRecordInfoUp-page scrollbar-box">
        <div class="center-for-box" v-for="(item,index) in infoData" :key="index">
          <p class="position-left-p" v-if="item.isZg==0||item.isZg==1">{{item.isZg == 0?'完成整改':(item.isZg == 1?'暂无法整改':'')}}</p>
          <div class="center-for-top-box">
            <div class="center-for-left-box">
              <p class="for-title-p">{{item.jcxName}}</p>
              <div class="for-text-box" v-if="item.isLingshi == 1">
                <p>条款：</p>
                <p>临时检查项</p>
              </div>
              <div class="for-text-box" v-if="item.isLingshi == 0">
                <p>条款：</p>
                <p>{{item.allCheckOptionName}}</p>
              </div>
              <div class="for-text-box">
                <p>隐患描述：</p>
                <p>{{item.yhMs}}</p>
              </div>
              <div class="for-text-box" v-if="item.zgMs">
                <p>整改描述：</p>
                <p>{{item.zgMs}}</p>
              </div>
            </div>
            <div class="center-for-right-box">
              <div class="for-img-max-box">
                <p class="for-img-max-title-p" v-if="!item.yhImg[0]">未上传隐患照片</p>
                <p class="for-img-max-title-p" v-if="item.yhImg[0]">整改前照片：</p>
                <div class="for-img-box">
                  <img v-for="(itemImg,imgIndex) in item.yhImg" :key="imgIndex" :src="itemImg" @click="lockImg(1,itemImg)">
                </div>
              </div>
              <div class="for-img-max-box" v-if="item.isZg == 1">
                <p class="for-img-max-title-p">证明材料：</p>
                <div class="for-img-box">
                  <img v-for="(itemImg,imgIndex) in item.zmClImg" :key="imgIndex" :src="itemImg" @click="lockImg(2,itemImg)">
                </div>
              </div>
              <div class="for-img-max-box" v-if="item.isZg == 0">
                <p class="for-img-max-title-p">整改后照片：</p>
                <div class="for-img-box">
                  <img v-for="(itemImg,imgIndex) in item.yhZghImg" :key="imgIndex" :src="itemImg" @click="lockImg(2,itemImg)">
                </div>
              </div>
            </div>
          </div>
          <div class="center-for-bottom-box">
            <p></p>
            <p class="add-button-one-90" @click="goDialog(1,index)">暂无法整改</p>
            <p class="add-button-one-90" @click="goDialog(2,index)">完成整改</p>
            <p></p>
          </div>
        </div>
      </div>
      <div class="bottom-button-box">
        <p></p>
        <p class="reset-button-one" @click="backPage">返回</p>
        <p class="inquire-button-one" style="width:120px;" @click="upClick">提交</p>
        <p></p>
      </div>
      <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <div class="prove-box scrollbar-box" style="height:700px;overflow-y: scroll" v-if="dialogType == 1">
            <p style="margin:0 0 20px;font-size:16px;">不能立即整立改的隐患,请在下方上传或填写整改计划及措施等相关材料。</p>
            <el-form-item label="证明信息" prop="zmClMs"label-width="100px">
              <el-input type="textarea" maxlength="50" v-model="form.zmClMs" placeholder="请输入相关证明信息" rows="3" resize="none" style="width:430px"></el-input>
            </el-form-item>
            <div style="width:500px;margin:20px auto;position: relative" v-for="(url,index) in form.proveImg" :key="index">
              <img style="display:block;width:500px;margin:20px auto;" :src="url">
              <i style="position: absolute;top:0;right:0;width:40px;height:40px;line-height:40px;text-align:center;cursor:pointer;" class="el-icon-close" @click="delImg(index)"></i>
            </div>
            <el-upload
              v-if="!form.proveImg[8]"
              style="display:block;width:500px;margin:0 auto;font-size:24px;color:#999;"
              class="certificate-avatar-uploader"
              :action="uploadImgUrl"
              :show-file-list="false"
              accept="image/jpeg,image/gif,image/png"
              :on-success="handleAvatarSuccess"
              :headers="headers"
              :before-upload="beforeAvatarUpload">
              <i style="display:block;width:500px;margin:0 auto;" class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <div class="scrollbar-box" v-if="dialogType == 2" style="height:700px;overflow-y: scroll">
            <el-form-item v-if="newData.zgType == 0" label="整改描述" prop="zgMs" label-width="100px">
              <el-input type="textarea" maxlength="50" v-model="form.zgMs" placeholder="请输入整改描述" rows="3" resize="none" style="width:430px"></el-input>
            </el-form-item>
            <el-form-item v-if="newData.zgType == 1" label="原因分析" prop="zgYyfx" label-width="100px">
              <el-input type="textarea" maxlength="50" v-model="form.zgYyfx" placeholder="请输入原因分析" rows="3" resize="none" style="width:430px"></el-input>
            </el-form-item>
            <el-form-item v-if="newData.zgType == 1" label="整改措施" prop="zgCs" label-width="100px">
              <el-input type="textarea" maxlength="50" v-model="form.zgCs" placeholder="请输入整改措施" rows="3" resize="none" style="width:430px"></el-input>
            </el-form-item>
            <el-form-item label="" prop="proveImg" label-width="0px">
              <div style="width:500px;margin:20px auto;position: relative" v-for="(url,index) in form.proveImg" :key="index">
                <img style="display:block;width:500px;margin:20px auto;" :src="url">
                <i style="position: absolute;top:0;right:0;width:40px;height:40px;line-height:40px;text-align:center;cursor:pointer;" class="el-icon-close" @click="delImg(index)"></i>
              </div>
              <el-upload
                v-if="!form.proveImg[8]"
                style="display:block;width:500px;margin:0 auto;font-size:24px;color:#999;"
                class="certificate-avatar-uploader"
                :action="uploadImgUrl"
                :show-file-list="false"
                accept="image/jpeg,image/gif,image/png"
                :on-success="handleAvatarSuccess"
                :headers="headers"
                :before-upload="beforeAvatarUpload">
                <i style="display:block;width:500px;margin:0 auto;" class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  import { checkRecordUpdate } from "@/api/laboratory/checkRecord";
  import { getToken } from "@/utils/auth";
  export default {
    name: 'CheckRecordInfoUp',
    props:{
      newData:{},
      // newData:{},
    },
    data() {
      return {
        infoData:{},
        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        //整改窗口相关
        open:false,
        dialogType:"",
        dialogIndex:"",
        title:"",
        form:{
          zgCs:"",
          zgMs:"",
          zgYyfx:"",
          proveImg:[],
        },
        rules:{
          zmClMs: [
            { required: true, message: "请输入相关证明信息", trigger: "blur" },
            { required: true, message: "请输入相关证明信息", validator: this.spaceJudgment, trigger: "blur" }
          ],
          zgCs: [
            { required: true, message: "请输入整改措施", trigger: "blur" },
            { required: true, message: "请输入整改措施", validator: this.spaceJudgment, trigger: "blur" }
          ],
          zgMs: [
            { required: true, message: "请输入整改描述", trigger: "blur" },
            { required: true, message: "请输入整改描述", validator: this.spaceJudgment, trigger: "blur" }
          ],
          zgYyfx: [
            { required: true, message: "请输入原因分析", trigger: "blur" },
            { required: true, message: "请输入原因分析", validator: this.spaceJudgment, trigger: "blur" }
          ],
          proveImg: [
            { required: true, message: "请上传图片", trigger: "blur" }
          ],
        }

      }
    },
    created() {
      this.infoData = JSON.parse(JSON.stringify(this.newData.detailsList))
    },
    methods: {
      delImg(index){
        this.form.proveImg.splice(index,1);
        this.$forceUpdate();
      },
      upClick(){
        let self = this;
        let num = 0;
        let list = JSON.parse(JSON.stringify(this.infoData))
        let newList = [];
        let age = 0;
        for(let i=0;i<list.length;i++){
          if(list[i].isZg!=1 && list[i].isZg!=0){
            num++
          }else{
            let obj = {
              id:list[i].id,
              isZg:list[i].isZg,
            };
            if(list[i].isZg == 1){
              age++
              obj.zmClMs = list[i].zmClMs;
              obj.zmClImg = list[i].zmClImg+'';
            }else if(list[i].isZg == 0){
              if(self.newData.zgType == 0){
                obj.zgMs = list[i].zgMs;
                obj.yhZghImg = list[i].yhZghImg+'';
              }else if(self.newData.zgType == 1){
                obj.zgYyfx = list[i].zgYyfx;
                obj.zgCs = list[i].zgCs;
                obj.yhZghImg = list[i].yhZghImg+'';
              }
            }
            newList.push(obj);
          }
        }
        let newObj = {
          id:this.newData.id,
          fzrId:this.newData.fzrId,
          detailsList:newList
        };
        if (age == 0){
          newObj.zgStatus = 1;
        } else {
          newObj.zgStatus = 3;
        }
        if(num != 0){
          this.msgError("请整改所有隐患后提交");
          return
        }
        //detailsList
        checkRecordUpdate(newObj).then( response => {
          this.msgSuccess("提交成功")
          this.backPage();
        });
      },
      //整改弹窗
      goDialog(type,index){
        let obj={
          zmClMs:"",
          zgCs:"",
          zgMs:"",
          zgYyfx:"",
          proveImg:[],
        };
        this.$set(this,'form',obj);
        this.dialogIndex = index;
        if(type == 1){
          this.dialogType = 1;
          this.title = "提供证明材料";
        }else if(type == 2){
          this.dialogType = 2;
          if(this.newData.zgType == 0){
            this.title = "一般整改";
          }else if(this.newData.zgType == 1){
            this.title = "重大整改";
          }
        }
        if(this.infoData[index].isZg == 0){
          if(this.newData.zgType == 0){
            this.$set(this.form,'zgMs',this.infoData[index].zgMs);
          }else if(this.newData.zgType == 1){
            this.$set(this.form,'zgYyfx',this.infoData[index].zgYyfx);
            this.$set(this.form,'zgCs',this.infoData[index].zgCs);
          }
          if(this.infoData[index].yhZghImg&&this.infoData[index].yhZghImg!='undefined'&&this.infoData[index].yhZghImg!='unll'){
            this.$set(this.form,'proveImg',this.infoData[index].yhZghImg);
          }else{
            this.$set(this.form,'proveImg',[]);
          }
        }else if(this.infoData[index].isZg == 1){
          this.$set(this.form,'zmClMs',this.infoData[index].zmClMs);
          if(this.infoData[index].zmClImg&&this.infoData[index].zmClImg!='undefined'&&this.infoData[index].zmClImg!='unll'){
            this.$set(this.form,'proveImg',this.infoData[index].zmClImg);
          }else{
            this.$set(this.form,'proveImg',[]);
          }
        }else{
          this.$set(this.form,'proveImg',[]);
        }
        this.open = true;
      },
      //关闭
      cancel(){
        this.open = false;
      },
      //确定按钮
      submitForm(){
        this.$refs["form"].validate(valid => {
          if (valid) {
            if(!this.form.proveImg[0]){
              this.msgError('请添加图片');
              return
            }
            if(this.dialogType == 1){
              //无法整改
              this.$set(this.infoData[this.dialogIndex],'isZg',1)
              this.$set(this.infoData[this.dialogIndex],'zmClMs',JSON.parse(JSON.stringify(this.form.zmClMs)))
              this.$set(this.infoData[this.dialogIndex],'zmClImg',JSON.parse(JSON.stringify(this.form.proveImg)))
            }else if(this.dialogType == 2){
              //整改
              if(this.newData.zgType == 0){
                //一般整改s
                this.$set(this.infoData[this.dialogIndex],'isZg',0)
                this.$set(this.infoData[this.dialogIndex],'zgMs',JSON.parse(JSON.stringify(this.form.zgMs)))
                this.$set(this.infoData[this.dialogIndex],'yhZghImg',JSON.parse(JSON.stringify(this.form.proveImg)))
              }else if(this.newData.zgType == 1){
                //重大整改
                this.$set(this.infoData[this.dialogIndex],'isZg',0)
                this.$set(this.infoData[this.dialogIndex],'zgYyfx',JSON.parse(JSON.stringify(this.form.zgYyfx)))
                this.$set(this.infoData[this.dialogIndex],'zgCs',JSON.parse(JSON.stringify(this.form.zgCs)))
                this.$set(this.infoData[this.dialogIndex],'yhZghImg',JSON.parse(JSON.stringify(this.form.proveImg)))
              }
            }
            this.open = false;
          }
        });
      },
      //返回
      backPage(){
        this.$parent.auditButton(1);
      },
      //上传
      handleAvatarSuccess(res, file) {
        console.log(this.form)
        console.log(this.form.proveImg)
        this.form.proveImg.push(res.data.url);
        this.$forceUpdate()
      },
      beforeAvatarUpload(file) {
        let type = false;
        // console.log('file',file);
        if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
          type = true;
        }else{
          this.$message.error('只能上传png/jpeg/gif格式图片');
          type = false;
        }
        return type;
      },
    },
  }
</script>

<style scoped lang="scss">
  .CheckRecordInfoUp{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .CheckRecordInfoUp-page{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow-y: scroll;
      .center-for-box{
        margin-top:20px;
        border:1px solid #dedede;
        padding:20px;
        position: relative;
        .position-left-p{
          position: absolute;
          left:0;
          top:0;
          line-height:30px;
          padding:0 10px;
          text-align: center;
          background: #dedede;
          font-size:16px;
          color:#999;
        }
        p{
          margin:0;
          font-weight:500;
        }
        .center-for-top-box{
          display: flex;
          .center-for-left-box{
            width:500px;
            .for-title-p{
              margin-top:20px;
              line-height:20px;
              font-size:16px;
              margin-bottom:10px;
            }
            .for-text-box{
              display: flex;
              font-size:14px;
              p:nth-child(1){
                width:80px;
                line-height:30px;
              }
              p:nth-child(2){
                flex:1;
                padding-top:5px;
                line-height:20px;
              }
            }
          }
          .center-for-right-box{
            margin-left:40px;
            flex:1;
            .for-img-max-box{
              display: flex;
              .for-img-max-title-p{
                line-height:80px;
                width:120px;
              }
              .for-img-box{
                flex:1;
                img{
                  cursor: pointer;
                  height:80px;
                  width:80px;
                  margin:0 10px 10px 0;
                }
              }
            }
          }
        }
        .center-for-bottom-box{
          display: flex;
          p:nth-child(1){
            flex:1;
          }
          p:nth-child(2){
            width:100px;
            margin-right:40px;
          }
          p:nth-child(3){
            width:100px;
          }
          p:nth-child(4){
            flex:1;
          }
        }
      }
    }
    .bottom-button-box{
      display: flex;
      height:60px;
      padding:20px 0 0;
      p{
        width:90px!important;
      }
      p:nth-child(1){
        flex:1;
      }
      p:nth-child(3){
        margin-left:20px;
      }
      p:nth-child(4){
        flex:1;
      }
    }
  }
</style>