web-achieve/src/views/adminCenter/adminMeet/file copy.vue

<template>
  <div id="file">
    <el-button type="primary" @click="handleDown">pdf</el-button>
    <el-row>
      <el-col :span="24" style="text-align:center;font-size:32px;margin-bottom:30px;">
        {{ getProp('basic.achieve_name') }}
      </el-col>
    </el-row>
    <div id="demo">
      <el-col :span="24" class="info">
        <page5></page5>
        <!-- <page6></page6> -->
        <!-- <page5></page5>
        <expertList :list="expertList"></expertList> -->
      </el-col>
    </div>
  </div>
</template>

<script>
const _ = require('lodash');
import page5 from '@common/template/page5.vue';
import page6 from '@common/template/page6.vue';
import expertList from '@common/template/expertList.vue';
import htmlToPdf from '@/unit/htmlToPdf.js';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: achieveApply } = createNamespacedHelpers('achieveApply');
const { mapActions: achieveApplyExpert } = createNamespacedHelpers('achieveApplyExpert');
export default {
  name: 'file',
  props: {},
  components: { page5 },
  data: function() {
    return {
      info: {},
      expertList: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    ...achieveApply(['fetch']),
    ...achieveApplyExpert(['query']),
    async init() {
      const apply = await this.fetch(this.id);
      if (this.$checkRes(apply)) {
        this.$set(this, `info`, apply.data);
      }
      const experts = await this.query({ apply_id: this.info.id, type: '2', expert: true });
      if (this.$checkRes(experts)) {
        this.$set(this, `expertList`, experts.data);
      }
    },
    // 证书下载
    handleDown() {
      htmlToPdf.downloadPDF(document.querySelector('#demo'), this.info.basic.achieve_name);
    },
    getProp(prop) {
      return _.get(this.info, prop);
    },
  },
  computed: {
    ...mapState(['user', 'menuParams']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
    id() {
      return this.$route.query.id;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped></style>