qa-prevention-gwj-vue/src/views/oneCompany/reflection/components/user.vue

<template>
  <div>
    <el-dialog :visible.sync="visible" :append-to-body="appendToBody" title="相关方安全告知培训合格证" width="370px">
      <div v-for="item in peopleList" :key="item.CLASS_INFO_ID" style="height: 220px">
        <div class="bg_table">
          <div class="title">相关方安全告知培训合格证</div>
          <div class="red">{{ item.CLASS_NO }}</div>
          <table class="table">
            <tr>
              <td style="width: 120px">
                <div class="text textone name">姓名</div>
              </td>
              <td style="width: 100px;">
                <div class="text text1 tcenter">{{ item.NAME }}</div>
              </td>
              <td style="width: 86px">
                <div class="text text2 tcenter">工种</div>
              </td>
              <td style="width: 148px;">
                <div v-if="item.JOBS_TYPE" class="text tcenter ">{{ item.JOBS_TYPE }}</div>
                <div v-else>暂无</div>
              </td>
              <td rowspan="4" style="width: 134px;">
                <img v-if="!getShowPicture(item)" src="../../../../assets/images/peopleHead.png" alt="" style="width: 116px; height: 146px">
                <img v-if="getShowPicture(item)" :src="config.fileUrl + item.PHOTO" alt="" style="width: 116px; height: 146px" @click="openPicture(config.fileUrl + item.PHOTO)">
              </td>
            </tr>
            <tr>
              <td>
                <div class="text textone">资质</div>
              </td>
              <td colspan="3">
                <div v-if="item.CERTIFICATE" class="text">{{ item.CERTIFICATE }}</div>
                <div v-else>暂无</div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="text textone">培训时间</div>
              </td>
              <td colspan="3">
                <div class="text">{{ item.OPENING_TIME }}</div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="text textone">有效期限</div>
              </td>
              <td colspan="3">
                <div class="text">{{ item.VALIDITY_PERIOD_END }}</div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="text textone">所在单位</div>
              </td>
              <td colspan="3">
                <div class="text">{{ item.DEPARTMENT_NAME }}</div>
              </td>
              <td rowspan="3" style="padding-top: 6px" @click="click(config.messageUrl + '?CLASS_INFO_ID=' + item.CLASS_INFO_ID)">
                <vue-qr :text="config.messageUrl + '?CLASS_INFO_ID=' + item.CLASS_INFO_ID" :margin="0" :size="110" color-dark="#000" color-light="#fff"/>
              </td>
            </tr>
            <tr>
              <td>
                <div class="text textone">身份证号</div>
              </td>
              <td colspan="3">
                <div class="text">{{ item.CARD_ID }}</div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="text textone">手机</div>
              </td>
              <td colspan="3">
                <div class="text">{{ item.PHONE }}</div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </el-dialog>
    <QRCode ref="QRcode" append-to-body/>
    <Picture ref="Picture" append-to-body/>
  </div>
</template>

<script>
import { requestFN } from '@/utils/request'
import vueQr from 'vue-qr'
import QRCode from './QRCode.vue'
import Picture from './picture.vue'

export default {
  components: { QRCode, Picture, vueQr },
  props: {
    appendToBody: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      config: config,
      visible: false,
      peopleList: [],
      CLASS_MESSAGE_ID: '',
      CLASS_INFO_ID: '',
      USER_ID: '',
      qrCodeStr: ''
    }
  },
  methods: {
    init(e) {
      console.info(e)
      if (e && e.CLASS_INFO_ID) {
        this.CLASS_INFO_ID = e.CLASS_INFO_ID
      }
      if (e && e.CLASS_MESSAGE_ID) {
        this.CLASS_MESSAGE_ID = e.CLASS_MESSAGE_ID
      }
      if (e && e.USER_ID) {
        this.USER_ID = e.USER_ID
      }
      this.qrCodeStr = config.messageUrl + '?CLASS_INFO_ID=' + this.CLASS_INFO_ID
      this.visible = true
      this.getInfo()
    },
    getInfo() {
      requestFN('/trainusers/getUserinfoList', {
        CLASS_INFO_ID: this.CLASS_INFO_ID,
        CLASS_MESSAGE_ID: this.CLASS_MESSAGE_ID,
        USER_ID: this.USER_ID
      })
        .then((data) => {
          this.peopleList = data.list
        }).catch((e) => {
          console.log(e)
        })
    },
    getShowPicture(row) {
      if (row.PHOTO && row.PHOTO !== '' && (row.PHOTO.indexOf('.jpg') >= 0 || row.PHOTO.indexOf('.png') >= 0 || row.PHOTO.indexOf('.jpeg') >= 0)) {
        return true
      }
    },
    click(e) {
      this.$refs.QRcode.init({ qrCodeStr: e })
    },
    openPicture(src) {
      this.$refs.Picture.init({ src: src })
    }
  }
}
</script>

<style lang="scss" scoped>

.name{
  width: 120px;
  overflow: hidden;//溢出隐藏
  white-space: nowrap; // 强制一行显示
  text-overflow: ellipsis;// 显示。。。省略号
}
.red {
  width: 660px;
  color: #ff0000;
  margin-left: 34px;
  font-size: 24px;
}

.bg_table {
  background: url("../../../../assets/tablebg.jpg") no-repeat bottom center;
  background-size: 100%;
  width: 660px;
  height: 430px;
  border: 4px solid #453d3a;
  transform: scale(0.5);
  transform-origin: top left;

  .title {
    font-size: 28px;
    text-align: center;
    margin-top: 34px;
    font-weight: bold;
    color: #000000;
  }

  .table {
    border-collapse: collapse;
    width: 590px;
    color: #453d3a;
    font-size: 20px;
    margin: 34px;
    text-align: left;
    margin-top: 10px;

    .tcenter {
      text-align: center
    }

    .w60 {
      width: 100px;
    }

    .w74 {
      width: 148px
    }

    th, td {
      border: 2px solid #453d3a;
      text-align: left;
      height: 40px;
      padding: 0 16px;

      box-sizing: border-box;

      .textone {
        width: 80px;
        text-align: justify;
        text-align-last: justify;
        text-justify: distribute-all-lines;
        margin: 0 auto;
      }

      .text1 {
        width: 60px;
        text-align: justify;
        text-align-last: justify;
        text-justify: distribute-all-lines;
        margin: 0 auto;

      }

      .text2 {
        width: 50px;
        text-align: justify;
        text-align-last: justify;
        text-justify: distribute-all-lines;
        margin: 0 auto;

      }

      .text {

      }
    }
  }
}
</style>