NewWorkPermitDetail.vue

<template>
  <el-dialog title="作业单" :visible.sync="certificateDetailOpen" width="950px" :close-on-click-modal="false" append-to-body :before-close="certificateDetailClose">
    <div class="tags_box">
      <div class="tags">
        <div :class="{isActive:'workPermit'== active}" @click="handelToogel('workPermit')">作业单</div>
      </div>
      <div v-for="item in specialWorkPermits" class="tags">
        <div :class="{isActive:item.specialWorkType==active}" @click="handelToogel(item.specialWorkType)">{{ getTagName(item.specialWorkType) }}</div>
      </div>
    </div>
    <div class="con_box">
      <div v-show="active == 'workPermit'">
        <table id="workPermitPrint">
          <tr>
            <td rowspan="4" colspan="2">作业许可申请人</td>
            <td colspan="2">申请部门/单位</td>
            <td colspan="2">{{certificateData.applyDept}}</td>
            <td colspan="2">申请人及联系方式</td>
            <td colspan="2">{{certificateData.linkMan}}|{{certificateData.linkPhone}}</td>
          </tr>
          <tr>
            <td colspan="2">作业区域范围</td>
            <td colspan="2">{{certificateData.workBound}}</td>
            <td colspan="2">设备名称及编号</td>
            <td colspan="2">{{certificateData.deviceName}}|{{certificateData.deviceNum}}</td>
          </tr>
          <tr>
            <td colspan="2">申请作业时间</td>
            <td colspan="6">
              {{ certificateData.applyWorkStartTime == null ? "-" :certificateData.applyWorkStartTime.split(" ")[0].split("-")[1]}}月{{certificateData.applyWorkStartTime == null ? "-" :certificateData.applyWorkStartTime.split(" ")[0].split("-")[2]}}日{{certificateData.applyWorkStartTime == null ? "-" :certificateData.applyWorkStartTime.split(" ")[1].split(":")[0]}}时{{certificateData.applyWorkStartTime == null ? "-" :certificateData.applyWorkStartTime.split(" ")[1].split(":")[1]}}分至{{certificateData.applyWorkEndTime == null ? "-" :certificateData.applyWorkEndTime.split(" ")[0].split("-")[1]}}月{{certificateData.applyWorkEndTime == null ? "-" :certificateData.applyWorkEndTime.split(" ")[0].split("-")[2]}}日{{certificateData.applyWorkEndTime == null ? "-" :certificateData.applyWorkEndTime.split(" ")[1].split(":")[0]}}时{{certificateData.applyWorkEndTime == null ? "-" :certificateData.applyWorkEndTime.split(" ")[1].split(":")[1]}}分
            </td>
          </tr>
          <tr>
            <td colspan="2">作业内容</td>
            <td colspan="6">{{certificateData.workContent}}</td>
          </tr>
          <tr>
            <td colspan="2">所有相关方讨论</td>
            <td>工作安全分析</td>
            <td style="writing-mode: vertical-rl;">危害识别</td>
            <td colspan="6" style="text-align: left">
              <div><input type="checkbox" disabled v-model="mainDangerousMark.burn">灼伤（低温/高温/化学品灼伤,电弧烧伤,火灾，易燃气/液体，蒸汽，电焊、动火、射线等）</div>
              <div><input type="checkbox" disabled v-model="mainDangerousMark.electricShock">电击（触电，电压，不适当的接地，电气热作业，地下/暗线等）。</div>
              <div><input type="checkbox" disabled v-model="mainDangerousMark.objectStrike">物体打击（爆炸，压力，能量释放，移动/坠落的物体，不正确的存放,设备）</div>
              <div><input type="checkbox" disabled v-model="mainDangerousMark.stifle">窒息/中毒（惰性气体，有毒气体，易挥发的液体溶剂等）</div>
              <div><input type="checkbox" disabled v-model="mainDangerousMark.drop">坠落（高处作业，没有防护的开口，没有固定的梯子，脚手架搭设，无防护的平台等）</div>
              <div><input type="checkbox" disabled v-model="mainDangerousMark.vehicleInjury">车辆伤害（速度过快,疲劳驾驶,车辆故障,缺乏防御性驾驶,能见度差,不寻常的路状，分心等）</div>
              <div><input type="checkbox" disabled v-model="mainDangerousMark.other">其它危害。</div>
              <div>注：如存在以上任一情况，请填写安全措施。</div>
            </td>
          </tr>
          <tr>
            <td rowspan="4" colspan="2">批准人填写</td>
            <td rowspan="4" colspan="2">许可证</td>
            <td colspan="6" style="text-align: left">是否需要进一步的JSA: <input disabled type="checkbox" v-model="licenceInfo.jsa.yes"/>否<input type="checkbox" disabled v-model="licenceInfo.jsa.no"/>是  JSA[<input class="editInput" disabled v-model="licenceInfo.jsa.num" style="width: 250px" placeholder="填写JSA编号"/>]</td>
          </tr>
          <tr>
            <td colspan="6" style="text-align: left"><input disabled type="checkbox" v-model="licenceInfo.specialLicence"/>0无需特殊工作许可</td>
          </tr>
          <tr>
            <td colspan="6" style="text-align: left">
              <div><input type="checkbox" disabled v-model="licenceInfo.lockListing.isChecked"/>1-1锁定挂牌记录表 [<input class="editInput" disabled v-model="licenceInfo.lockListing.num" style="width: 250px" placeholder="填写编号"/>]</div>
              <div><input type="checkbox" disabled v-model="licenceInfo.blindPlate.isChecked"/>1-2盲板抽堵作业许可 [<input class="editInput" disabled v-model="licenceInfo.blindPlate.num" style="width: 250px" placeholder="填写编号"/>]</div>
            </td>
          </tr>
          <tr>
            <td colspan="6" style="text-align: left;">
              <div><input type="checkbox" disabled v-model="licenceInfo.flareUp.isChecked"/>2动火作业许可证 [<input class="editInput" disabled v-model="licenceInfo.flareUp.num" style="width: 250px" placeholder="填写编号"/>]</div>
              <div><input type="checkbox" disabled v-model="licenceInfo.heightWork.isChecked"/>3高处作业许可证 [<input class="editInput" disabled v-model="licenceInfo.heightWork.num" style="width: 250px" placeholder="填写编号"/>]</div>
              <div><input type="checkbox" disabled v-model="licenceInfo.breakGround.isChecked"/>4动土作业许可证 [<input class="editInput" disabled v-model="licenceInfo.breakGround.num" style="width: 250px" placeholder="填写编号"/>]</div>
              <div><input type="checkbox" disabled v-model="licenceInfo.hoisting.isChecked"/>5吊装作业许可证 [<input class="editInput" disabled v-model="licenceInfo.hoisting.num" style="width: 250px" placeholder="填写编号"/>]</div>
              <div><input type="checkbox" disabled v-model="licenceInfo.limitSpace.isChecked"/>6受限空间作业许可证 [<input class="editInput" disabled v-model="licenceInfo.limitSpace.num" style="width: 250px" placeholder="填写编号"/>]</div>
              <div><input type="checkbox" disabled v-model="licenceInfo.electricityUse.isChecked"/>7临时用电许可证 [<input class="editInput" disabled v-model="licenceInfo.electricityUse.num" style="width: 250px" placeholder="填写编号"/>]</div>
              <div><input type="checkbox" disabled v-model="licenceInfo.ray.isChecked"/>8射线探伤许可证 [<input class="editInput" disabled v-model="licenceInfo.ray.num" style="width: 250px" placeholder="填写编号"/>]</div>
            </td>
          </tr>
          <tr>
            <td colspan="2">相关方填写</td>
            <td colspan="4">
              <div style="text-align: left">
                承包商:
                <textarea disabled v-model="relationSign.contractor" style="height: 96px"></textarea>
              </div>

            </td>
            <td colspan="4">
              <div style="text-align: left">
                负责人：
                <textarea disabled v-model="relationSign.personCharge" style="height: 96px"></textarea>
              </div>
            </td>
          </tr>
          <tr v-if="(certificateData.applyStatus-0)>3">
            <td colspan="2">生产班组确认</td>
            <td colspan="8">
              <el-row>
                <el-col :span="8" style="text-align: left">本人已知晓此工作许可证的内容</el-col>
                <el-col :span="8" style="text-align: right">确认签字（当班班长）：</el-col>
                <el-col :span="8"><NewEsign :resultImg.sync ="produceComfirm.monitorName" :isReWrite="false" :width="918" :height="100"/></el-col>
              </el-row>
              <el-row>
                <el-col :span="24" style="text-align: right">日期/时间：<input style="width: 228px" disabled v-model="produceComfirm.date" class="editInput"/></el-col>
              </el-row>
            </td>
          </tr>
        </table>
        <div style="margin-top:10px;float: right"><el-button type="primary" v-print="'#workPermitPrint'">打印</el-button></div>
      </div>
      <div v-for="item in specialWorkPermits" v-show="active == item.specialWorkType">
        <FlareUp v-if="item.specialWorkType == 'flareUp'"
                 :ref="item.specialWorkType"
                 :workPermitId = "item.workPermitId"
                 :licenceNum = "item.licenceNum"
                 applyStatus="4"/>
        <BlindPlate v-if="item.specialWorkType == 'blindPlate'"
                 :ref="item.specialWorkType"
                 :workPermitId = "item.workPermitId"
                 :licenceNum = "item.licenceNum"
                 applyStatus="4"/>
      </div>

    </div>

  </el-dialog>

</template>

<script>
  import NewEsign from "@/components/SaftyWork/NewEsign";
  import FlareUp from "@/components/NewSaftyWork/FlareUp";
  import BlindPlate from "@/components/NewSaftyWork/BlindPlate";
  import { getSpecialWorkPermitByWorkPermitId } from "@/api/workPermit/specialPermit";
  import { listSign } from "@/api/workPermit/workPermitSign";
    export default {
      components: {
        NewEsign,
        FlareUp,
        BlindPlate
      },
      name: "new-work-permit-detail",
      props:{
        certificateDetailOpen:{
          type:Boolean,
          default:false
        },
        certificateData:{
          type:Object
        }
      },
      data(){
        return{
          mainDangerousMark :{
            burn : false,
            electricShock : false,
            objectStrike : false,
            stifle : false,
            drop : false,
            vehicleInjury : false,
            other : false
          },
          licenceInfo : {
            lockListing: {
              num: "",
              isChecked: false
            },
            blindPlate: {
              num: "",
              isChecked: false,
              status: "0"
            },
            breakGround: {
              num: "",
              isChecked: false,
              status: "0"
            },
            limitSpace: {
              num: "",
              isChecked: false,
              status: "0"
            },
            jsa: {
              no: false,
              yes: false,
              num: ""
            },
            specialLicence: false,
            flareUp: {
              num: "",
              isChecked: false,
              status: "0"
            },
            hoisting: {
              num: "",
              isChecked: false,
              status: "0"
            },
            ray: {
              num: "",
              isChecked: false,
              status: "0"
            },
            electricityUse: {
              num: "",
              isChecked: false,
              status: "0"
            },
            heightWork: {
              num: "",
              isChecked: false,
              status: "0"
            }
          },
          relationSign:{
            contractor:"",
            personCharge:""
          },
          produceComfirm:{
            leaderDeptId:"",
            monitorId:"",
            monitorName:"",
            date:""
          },
          active:"workPermit",
          specialWorkPermits:[]
        }
      },
      watch:{
        certificateDetailOpen(newValue){
          if(null != this.certificateData.mainDangerousMark){
            this.mainDangerousMark = JSON.parse(this.certificateData.mainDangerousMark);
          }
          if(null != this.certificateData.licenceInfo){
            this.licenceInfo = JSON.parse(this.certificateData.licenceInfo);
          }
          if(null != this.certificateData.relationSign){
            this.relationSign = JSON.parse(this.certificateData.relationSign);
          }
          if(null != this.certificateData.produceComfirm){
            this.produceComfirm = JSON.parse(this.certificateData.produceComfirm);
          }
          this.specialWorkPermit();
          this.active = "workPermit";
        }
      },
      methods:{
        certificateDetailClose(){
          this.$emit('update:certificateDetailOpen',false);
        },
        handelToogel(item) {
          this.active = item;
        },
        specialWorkPermit(){
          getSpecialWorkPermitByWorkPermitId({workPermitId:this.certificateData.workPermitId}).then(res =>{
            this.specialWorkPermits = res.data.specialWorkPermits;
            for(let key in this.specialWorkPermits ){
              this.$nextTick(() => {
                listSign({ pageNum: 1,pageSize: 99999,permitId:this.specialWorkPermits[key].specialWorkPermitId}).then(res =>{
                  this.$refs[this.specialWorkPermits[key].specialWorkType][0][this.specialWorkPermits[key].specialWorkType] = JSON.parse(this.specialWorkPermits[key].specialWorkData);
                  this.$refs[this.specialWorkPermits[key].specialWorkType][0].specialWorkPermitId = this.specialWorkPermits[key].specialWorkPermitId;
                  this.$refs[this.specialWorkPermits[key].specialWorkType][0].specialWorkPermitSigns = res.rows;
                })
              })
            }
          })
        },
        //获取tag名称
        getTagName(key){
          switch(key){
            case "blindPlate":
              return "盲板抽堵作业许可";
            case "flareUp":
              return "动火作业许可证";
            case "heightWork":
              return "高处作业许可证";
            case "breakGround":
              return "动土作业许可证";
            case "hoisting":
              return "吊装作业许可证";
            case "limitSpace":
              return "受限空间作业许可证";
            case "electricityUse":
              return "临时用电许可证";
            case "ray":
              return "射线探伤许可证";
            default:
              return "";
          }
        },

      }
    }
</script>

<style scoped lang="scss">
  table{
    border-collapse: collapse;
    table-layout: fixed;
    text-align: center;
    width: 100%;
  }
  table td, table th{
    border: 1px solid;
    height: 30px;
  }

  .editInput{
    border: none;
    width: 100%;
    height: 100%;
    text-align: center;
  }

  .editInput:focus{
    outline: none;
  }

  .editLine{
    border-bottom: 1px solid;
    border-top: none;
    border-left: none;
    border-right: none;
    text-align: center;
  }

  .editLine:focus{
    outline: none;
  }


  textarea{
    height: 100%;
    width: 100%;
    border: none;
    resize:none;
  }

  textarea:focus{
    outline: none;
  }


  .tags_box {
    height: 10%;
    display: flex;
  .tags {
  div {
    padding: 10px 20px;
    cursor: pointer;
    border: #cccccc 1px solid;
    #margin-right: 20px;
    #border-radius: 5px;
  }
  .isActive {
    background-color: #409EFF;
    color: white;
  }
  }
  }

  .con_box {
    height: 500px;;
    border: #cccccc 1px solid;
    padding: 10px;
    overflow-y: scroll;
    overflow-x: hidden;
  &::-webkit-scrollbar {
     width:5px;
   }
  &::-webkit-scrollbar-track {
     -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
     border-radius:10px;
   }
  &::-webkit-scrollbar-thumb {
     border-radius:5px;
     background:rgba(0,0,0,0.1);
     -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
   }
  }

</style>