修改

zhouwx

2024-11-06 db7b0541b3fbecaeda7b44129b7af3215296ec6d

 src/views/onlineEducation/classCertManage/index.vue

@@ -1,11 +1,19 @@
<template>
  <div class="app-container">
    <div style="margin-left: -35px;margin-top: 15px">
      <el-button
        size="small"
        type="primary"
        style="margin-bottom: 10px;margin-left: 20px"
      >批量导出</el-button>
    <div style="margin-left: -20px;margin-top: 15px;display: flex">
      <json-excel
        class="export-excel-wrapper"
        :data="jsonData"
        :fields="json_fields"
        type="xls"
        name="学时证书.xls">
        <el-button
          size="small"
          type="primary"
          style="margin-bottom: 10px;margin-left: 20px"
          @click="exportData"
        >批量导出</el-button>
      </json-excel>
      <el-date-picker
        v-model="time"
        size="small"
@@ -17,22 +25,24 @@
        style="margin-left: 30px;"
      >
      </el-date-picker>
      <el-select v-model="queryParams.institutionId"  size="small" style="margin-left: 40px;" placeholder="请选择平台">
      <el-input size="small" style="margin-left: 30px;width: 200px" v-model="queryParams.idcard" placeholder="请输入身份证号"></el-input>
      <el-select v-model="queryParams.institutionName"  size="small" style="margin-left: 40px;" placeholder="请选择平台">
        <el-option
          v-for="item in platformList"
          :key="item.id"
          :label="item.institutionalName"
          :value="item.id">
          :value="item.institutionalName">
        </el-option>
      </el-select>
      <el-select v-model="queryParams.trainOrgId"  size="small" style="margin-left: 40px;" placeholder="请选择培训机构">
        <el-option
          v-for="item in trainOrgList"
          :key="item.id"
          :label="item.trainOrgName"
          :value="item.id">
        </el-option>
      </el-select>
      <el-input size="small" style="margin-left: 30px;width: 200px" v-model="queryParams.trainOrgName" placeholder="请输入机构"></el-input>
<!--      <el-select v-model="queryParams.trainOrgId"  size="small" style="margin-left: 40px;" placeholder="请选择培训机构">-->
<!--        <el-option-->
<!--          v-for="item in trainOrgList"-->
<!--          :key="item.id"-->
<!--          :label="item.trainOrgName"-->
<!--          :value="item.id">-->
<!--        </el-option>-->
<!--      </el-select>-->
      <el-button
        size="small"
        type="primary"
@@ -47,20 +57,20 @@
        @click="resetQuery()"
      >重置</el-button>
    </div>
    <el-table v-loading="loading" :data="expertList" style="margin-top: 10px">
    <el-table v-loading="loading" :data="expertList" style="margin-top: 10px" @selection-change="changeCheckBoxValue">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="ID" align="center" prop="id" />
      <el-table-column label="姓名" align="center" prop="name" />
      <el-table-column label="身份证号" align="center" prop="idCard" />
      <el-table-column label="身份证号" align="center" prop="idcard" />
      <el-table-column label="推送平台" align="center" prop="institutionName" />
      <el-table-column label="所属机构" align="center" prop="trainOrgName" />
      <el-table-column label="批次" align="center" prop="batch" />
      <el-table-column label="证书生成时间" align="center" prop="certCreateTime" />
      <el-table-column label="批次" align="center" prop="batchName" />
      <el-table-column label="证书生成时间" align="center" prop="certTime" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button size="mini" type="text" style="color: #1890ff">查看</el-button>
          <el-button size="mini" type="text" style="color: #1890ff">下载</el-button>
          <el-button size="mini" type="text" style="color: #1890ff">打印</el-button>
          <el-button size="mini" type="text" style="color: #1890ff" @click="viewPic(scope.row)">查看</el-button>
          <el-button size="mini" type="text" style="color: #1890ff" @click="downloadByBlob(scope.row)">下载</el-button>
          <el-button size="mini" type="text" style="color: #1890ff" @click="print(scope.row)">打印</el-button>
        </template>
      </el-table-column>
    </el-table>
@@ -71,18 +81,48 @@
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog
      :visible.sync="picDialog"
      width="500px"
      :before-close="handleClose">
      <div style="display: flex;justify-content: center">
        <el-image
          style="width: 450px; height: auto"
          :src="viewUrl"
          :preview-src-list="srcList">
        </el-image>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="printDialog"
      width="500px"
      :before-close="handlePrintClose">
      <div style="display: flex;flex-direction: column;align-items: flex-end">
        <el-button type="primary" style="margin-bottom: 5px" v-print="'#printPic'">打印</el-button>
      </div>
      <div style="display: flex;justify-content: center" ref="printPic" id="printPic">
        <el-image
          style="width: 85%; height: auto;margin-top: 10px"
          :src="printUrl"
          >
        </el-image>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { listBatch, listQuestion } from '@/api/onlineEducation/student'
import { listPlatSelect } from '@/api/onlineEducation/plat'
import moment from 'moment/moment'
import JsonExcel from 'vue-json-excel'
import { getSubject } from '@/api/onlineEducation/count'
import { getCert } from '@/api/onlineEducation/question'
export default {
  name: "nPeopleManage",
  dicts: [],
  components: { },
  components: { JsonExcel },
  data() {
    return {
      time: [],
@@ -97,36 +137,67 @@
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        institutionId: '',
        idcard: '',
        institutionName: '',
        startTime: '',
        endTime: '',
        trainOrgId: ''
        trainOrgName: ''
      },
      trainOrgList: []
      trainOrgList: [],
      jsonData: [],
      json_fields: {
        'ID': {
          field: 'id',
          callback: value => {
            return '&nbsp;'+value
          }
        },
        '姓名': "name",
        '身份证号': {
          field: 'idcard',
          callback: value => {
            return '&nbsp;'+value
          }
        },
        '推送平台': "institutionName",
        '所属机构': {
          field: 'trainOrgName',
          callback: value => {
            return '&nbsp;'+value
          }
        },
        '批次': "batchName",
        '证书生成时间': "certTime",
      },
      picDialog: false,
      viewUrl: '',
      srcList: [],
      printDialog: false,
      printUrl: '',
    };
  },
  created() {
    this.setDate();
    // this.getList();
    // this.setDate();
    this.getList();
    this.getPlat();
  },
  methods: {
    setDate(){
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      const s = moment(start).format('YYYY-MM-DD')
      const e = moment(end).format('YYYY-MM-DD')
      this.time = [s,e]
    },
    // setDate(){
    //   const end = new Date();
    //   const start = new Date();
    //   start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
    //   const s = moment(start).format('YYYY-MM-DD')
    //   const e = moment(end).format('YYYY-MM-DD')
    //   this.time = [s,e]
    // },
    getList(){
      if(this.time && this.time.length >0){
        this.queryParams.startTime = moment(this.time[0]).format('YYYY-MM-DD')
        this.queryParams.endTime = moment(this.time[1]).format('YYYY-MM-DD')
        this.queryParams.startTime = moment(this.time[0]).format('YYYY-MM-DD') + ' 00:00:00'
        this.queryParams.endTime = moment(this.time[1]).format('YYYY-MM-DD') + ' 00:00:00'
      }

      this.loading = true;
      listBatch( this.queryParams).then((res) => {
      getCert( this.queryParams).then((res) => {
        if (res.code == 200) {
          this.expertList = res.rows.map(item => {
            return {
@@ -134,12 +205,12 @@
              trainOrgName: item.trainOrgName ? item.trainOrgName : '--',
              startTime: item.startTime ? item.startTime : '--',
              endTime: item.endTime ? item.endTime : '--',
              category: item.category ? item.category : '--'
            }
          })
          this.total = res.total
          this.loading = false;
        }
        console.log('this.expertList',this.expertList)
      })
    },
    getPlat() {
@@ -148,6 +219,18 @@
          this.platformList = res.data
        }
      })
    },
    exportData(){
      if(this.jsonData && this.jsonData.length <= 0){
        this.$message({
          message: '请选择要导出的数据',
          type: 'warning'
        })
      }
    },
    changeCheckBoxValue(val) {
      console.log('val',val)
      this.jsonData = val;
    },
    handleChange(){

@@ -160,14 +243,68 @@
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        institutionId: '',
        institutionName: '',
        idcard: '',
        startTime: '',
        endTime: '',
        trainOrgId: ''
        trainOrgName: ''
      }
      this.time = [];
      this.getList();
    },
    viewPic(val){
      this.viewUrl = val.certUrl
      this.srcList[0] = val.certUrl
      this.picDialog = true
    },
    handleClose() {
      this.viewUrl = ''
      // this.srcList = []
      this.picDialog = false
    },
    handlePrintClose() {
      this.printUrl = ''
      this.printDialog = false
    },
    print(val){
      this.printUrl = val.certUrl

      this.printDialog = true
    },
    downloadByBlob(val) {
      let image = new Image()
      image.setAttribute('crossOrigin', 'anonymous')
      image.src = val.certUrl
      image.onload = () => {
        let canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        let ctx = canvas.getContext('2d')
        ctx.drawImage(image, 0, 0, image.width, image.height)
        canvas.toBlob((blob) => {
          let url = URL.createObjectURL(blob)
          this.download(url,val.name + '_学时证书')
          // 用完释放URL对象
          URL.revokeObjectURL(url)
        })
      }
    },
    download(href, name) {
      let eleLink = document.createElement('a')
      eleLink.download = name
      eleLink.href = href
      eleLink.click()
      eleLink.remove()
    }
  }
};
</script>
<style media="printPic" scoped>
@page {
  margin: 0; /* this affects the margin in the printer settings */
  display: block;
  width: 100%;
  overflow: hidden;
}

</style>