qa-prevention-gwj-vue/src/views/blindboard/acceptance/components/detail.vue

<template>
  <div>
    <div id="printTest" class="app-container print-work">
      <div class="level-title">
        <h1>盲板抽堵作业许可证</h1>
        <div class="level-btns">编号:{{ pd.CHECK_NO }}</div>
      </div>
      <table class="table-ui">
        <tr>
          <td class="bbg">申请部门</td>
          <td colspan="7">{{ pd.APPLY_DEPARTMENT_NAME }}</td>
          <td colspan="2" class="bgst">申请人</td>
          <td colspan="4">{{ pd.APPLY_USER_NAME }}</td>
        </tr>
        <tr class="bgst">
          <td rowspan="2" align="center">设备管线<br>名称</td>
          <td rowspan="2" class="w-space">介质</td>
          <td rowspan="2" class="w-space">温度</td>
          <td rowspan="2" class="w-space">压力</td>
          <td colspan="3" class="w-space">盲板</td>
          <td colspan="2" class="w-space">实施时间</td>
          <td colspan="2" class="w-space">作业人</td>
          <td colspan="2" class="w-space">监护人</td>
        </tr>
        <tr class="bgst">
          <td class="w-space">材质</td>
          <td class="w-space">规格</td>
          <td class="w-space">编号</td>
          <td class="w-space">装</td>
          <td class="w-space">拆</td>
          <td class="w-space">装</td>
          <td class="w-space">拆</td>
          <td class="w-space">装</td>
          <td class="w-space">拆</td>
        </tr>
        <tr>
          <td>{{ pd.NAME }}</td>
          <td>{{ pd.MEDIUM }}</td>
          <td>{{ pd.TEMPERATURE }}</td>
          <td>{{ pd.PRESSURE }}</td>
          <td>{{ pd.BOARD_MATERIAL }}</td>
          <td>{{ pd.BOARD_SPECIFICATION }}</td>
          <td>{{ pd.BOARD_NO }}</td>
          <td>{{ formatDate(pd.BOARD_INSTALL_TIME) }}</td>
          <td>{{ formatDate(pd.BOARD_DISASSEMBLE_TIME) }}</td>
          <td>{{ pd.BOARD_INSTALL_USER }}</td>
          <td>{{ pd.BOARD_DISASSEMBLE_USER }}</td>
          <td>{{ pd.BOARD_INSTALL_CUSTODY_USER }}</td>
          <td>{{ pd.BOARD_DISASSEMBLE_CUSTODY_USER }}</td>
        </tr>
        <tr>
          <td class="bbg">作业地点</td>
          <td colspan="14">{{ pd.WORK_PLACE }}</td>
        </tr>
        <tr>
          <td class="bbg">经度</td>
          <td colspan="7">{{ pd.LONGITUDE }}</td>
          <td colspan="2" class="bgst">纬度</td>
          <td colspan="4">{{ pd.LATITUDE }}</td>
        </tr>
        <tr>
          <td class="bbg">盲板抽堵<br>位置图</td>
          <td colspan="12">
            <div><span>1、盲板位置图</span></div>
            <div class="disContent">
              <div v-for="item in ImgList" :key="item.IMGFILES_ID" class="img-div">
                <img :src="config.fileUrl + item.FILEPATH" alt="">
                <div class="disContent-hide">
                  <el-tooltip class="item" effect="dark" content="预览" placement="top">
                    <span class="el-icon-zoom-in yuLan">
                      <viewer :images="ImgList">
                        <img :src="config.fileUrl + item.FILEPATH" alt="" class="yuLanImg">
                      </viewer>
                    </span>
                  </el-tooltip>
                </div>
              </div>
            </div>
            <div style="float: right">
              <div>
                编制人签字：
                <span class="print-approval-img">
                  <img v-if="pd.BOARD_SIGNER_PATH" :src="config.fileUrl+pd.BOARD_SIGNER_PATH">
                </span>
              </div>
              <div style="float: right">
                <span v-if="pd.BOARD_SIGNER_TIME">{{ formatTime(pd.BOARD_SIGNER_TIME) }}</span>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="bbg">作业单位负责人</td>
          <td colspan="12">
            <div><span>确认意见：</span></div>
            <div class="disContent">
              {{ pd.CONFIRM_OPINION }}
            </div>
            <div style="float: right">
              <div>
                签字：
                <span class="print-approval-img">
                  <img v-if="pd.CONFIRM_SIGNER_PATH" :src="config.fileUrl+pd.CONFIRM_SIGNER_PATH">
                </span>
              </div>
              <div style="float: right">
                <span v-if="pd.CONFIRM_SIGNER_TIME">{{ formatTime(pd.CONFIRM_SIGNER_TIME) }}</span>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="bbg">分公司（中心）审批</td>
          <td colspan="12">
            <div><span>审批意见：</span></div>
            <div class="disContent">
              {{ pd.APPROVE_OPINION }}
            </div>
            <div style="float: right">
              <div>
                签字：
                <span class="print-approval-img">
                  <img v-if="pd.APPROVE_SIGNER_PATH" :src="config.fileUrl+pd.APPROVE_SIGNER_PATH">
                </span>
              </div>
              <div style="float: right">
                <span v-if="pd.APPROVE_SIGNER_TIME">{{ formatTime(pd.APPROVE_SIGNER_TIME) }}</span>
              </div>
            </div>
          </td>
        </tr>
        <tr v-if="pd.ACCEPT_RESULT">
          <td class="bbg">管理单位负责人验收</td>
          <td colspan="12">
            <div v-show="pd.ACCEPT_CONTENT"><span>验收意见：</span></div>
            <div v-show="pd.ACCEPT_CONTENT" class="disContent">
              {{ pd.ACCEPT_CONTENT }}
            </div>
            <div style="float: right">
              <div>
                验收部门：{{ pd.ACCEPT_DEPARTMENT_NAME }}
              </div>
              <div>
                验收人：{{ pd.ACCEPT_USER_NAME }}
              </div>
              <div style="float: right">
                <span v-if="pd.ACCEPT_USER_SIGNER_TIME">{{ formatTime(pd.ACCEPT_USER_SIGNER_TIME) }}</span>
              </div>
            </div>
          </td>
        </tr>
      </table>

    </div>
    <div class="ui-height" />
    <div class="ui-foot">
      <el-button v-print="'#printTest'" type="primary">打 印</el-button>
      <el-button @click="goBack">返 回</el-button>
    </div>
  </div>
</template>

<script>
import { requestFN } from '@/utils/request'
import dateformat from '@/utils/dateformat'
export default {
  data() {
    return {
      config: config,
      BLINDBOARD_ID: this.$parent.BLINDBOARD_ID, // 主键ID
      pd: [], // 存放字段参数
      ImgList: [],
      measuresList: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    formatTime(date) {
      if (date) {
        return dateformat(date, 'YYYY年MM月DD日HH时mm分')
      } else {
        return ''
      }
    },
    formatDate(date) {
      if (date) {
        return dateformat(date, 'YYYY-MM-DD HH:mm')
      } else {
        return ''
      }
    },
    getRowKey(row) {
      return row.BLINDBOARD_ID
    },
    getData() {
      this.listLoading = true
      requestFN(
        '/blindboard/goEdit',
        {
          BLINDBOARD_ID: this.BLINDBOARD_ID
        }
      ).then((data) => {
        this.listLoading = false
        this.pd = data.pd // 参数map
        this.pd = Object.assign(this.pd, data.Info) // 参数map
        this.ImgList = data.ImgList// 盲板位置图
        this.measuresList = data.measuresList // 参数map
      }).catch((e) => {
        this.listLoading = false
      })
    },
    goBack() {
      this.$parent.activeName = 'List'
    }

  }
}
</script>

<style lang="sass" scoped>
  .print-approval-p10
    padding: 20px 0
    span
      vertical-align: middle
  .disContent
    display: flex
    align-items: center
    flex-wrap: wrap
    .img-div
      position: relative
      margin: 0 10px 0px 0
      width: 108px
      height: 108px
      border-radius: 4px
      overflow: hidden
      &>img
        width: 100%
        height: 100%

  .disContent-hide
    position: absolute
    width: 100%
    height: 100%
    border-radius: 4px
    background-color: rgba(48, 48, 48, 0.59)
    display: none
    top: 0
    left: 0
    line-height: 32px

    .Delete
      position: absolute
      bottom: 14px
      right: 10px
      font-size: 16px
      color: white
      cursor: pointer
    .yuLan
      position: absolute
      bottom: 23px
      right: 50px
      font-size: 16px
      color: white
      cursor: pointer
      .yuLanImg
        position: absolute
        bottom: 0
        right: 0
        width: 100%
        height: 100%
        opacity: 0

  .img-div:hover .disContent-hide
    display: block

  .print-approval-img
    width: 200px
    height: 97px
    display: inline-block
    img
      width: 100%
      height: 100%
</style>