QualifInfo.vue 2.68 KB
<template>
    <div class="qualif-info">
      <el-table v-loading="loading" :data="qualifList" style="width: 100%">
        <el-table-column label="资质名称" prop="qualifName" align="center" />
        <el-table-column label="资质类型" prop="qualifType" align="center" />
        <el-table-column label="资质等级" prop="qualifLevel" align="center" />
        <el-table-column label="发证日期" align="center" prop="issueDate" >
            <template slot-scope="scope">
            <span>{{ parseTime(scope.row.issueDate,'{y}-{m}-{d}') }}</span>
            </template>
        </el-table-column>
        <el-table-column label="有效期" align="center" prop="expirationDate" >
            <template slot-scope="scope">
            <span>{{ parseTime(scope.row.expirationDate,'{y}-{m}-{d}') }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="attachment"  align="center"  label="附件" >
          <template slot-scope="scope">
            <a @click="handleViewAttachment(scope.row.attachment)" v-if="scope.row.attachment !='' && scope.row.attachment!=null" class="underline">查看</a>
            <div v-else>无</div>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :visible.sync="quailifAttachInfo" title="预览" append-to-body>
        <attachment-preview :filePath="filePath" :fileType="fileType" />
      </el-dialog>
    </div>
</template>
  
  <script>
  import { getQualifInfo } from "@/api/resource/person";
  
  export default {
    name: "QualifInfo",
    props: {
      personId: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        loading: false,
        qualifList: [],
        quailifAttachInfo: false,
        filePath: '',
        fileType: ''
      };
    },
    created() {
      this.getQualif();
    },
    methods: {
      getQualif() {
        this.loading = true;
        getQualifInfo(this.personId).then(response => {
          this.qualifList = response.data;
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      },
      handleViewAttachment(filePath) {
        this.filePath = filePath;
        this.fileType = filePath.split('.').pop();  
        if(this.fileType == 'pdf') {
          this.fileType = 'pdf';
        } else {
          this.fileType = 'image';
        } 
        this.quailifAttachInfo = true;
      }
    }
  };
  </script>
  
  <style scoped>
  .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
    font-size: 30px;
  }

  .underline {
    text-decoration: underline;
  }
  </style>