jcyjdt_studio/src/views/center/studio/info/export.vue

<template>
  <div id="info">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <el-col :span="24" class="one">
          <c-search :is_back="true" @toBack="toBack()">
            <template v-slot="custombtn">
              <el-button type="success" size="small" @click="toExport()">导出</el-button>
              <!-- <el-button type="success" size="small" v-print="{ id: 'demo', popTitle: info.name }">打印</el-button> -->
            </template>
          </c-search>
        </el-col>
        <el-col :span="24" class="two" id="demo" ref="print" style="box-shadow: 0 0 10px #f1f1f1; margin: 0 0 10px 0; padding: 10px 200px">
          <el-col :span="24" class="two_1" style="text-align: center; margin: 10px 0 15px 0; font-weight: none; font-size: 48px; font-family: 仿宋">
            吉林省科学家工作室申报基本信息表
          </el-col>
          <el-col :span="24" class="two_2" style="padding: 0 0%">
            <table border="1" style="border-spacing: 0; width: 100%">
              <tr>
                <td rowspan="2" class="key" style="font-weight: none; font-size: 28px; font-family: 仿宋; padding: 8px">科学家工作室</td>
                <td class="key" style="font-weight: none; font-size: 28px; font-family: 仿宋; padding: 8px">名称</td>
                <td style="font-size: 28px; font-family: 仿宋; padding: 8px">{{ info.name }}</td>
              </tr>
              <tr>
                <td class="key" style="font-weight: none; font-size: 28px; font-family: 仿宋; padding: 8px">专业领域</td>
                <td style="font-size: 28px; font-family: 仿宋; padding: 8px">{{ info.zy_fields_name }}</td>
              </tr>
              <tr>
                <td rowspan="3" class="key" style="font-weight: none; font-size: 28px; font-family: 仿宋; padding: 8px">依托单位</td>
                <td class="key" style="font-weight: none; font-size: 28px; font-family: 仿宋; padding: 8px">名称</td>
                <td style="font-size: 28px; font-family: 仿宋; padding: 8px">{{ info.company_name }}</td>
              </tr>
              <tr>
                <td class="key" style="font-weight: none; font-size: 28px; font-family: 仿宋; padding: 8px">联系人</td>
                <td style="font-size: 28px; font-family: 仿宋; padding: 8px">{{ info.company_contact }}</td>
              </tr>
              <tr>
                <td class="key" style="font-weight: none; font-size: 28px; font-family: 仿宋; padding: 8px">联系方式</td>
                <td style="font-size: 28px; font-family: 仿宋; padding: 8px">{{ info.company_contact_phone }}</td>
              </tr>
              <tr>
                <td :rowspan="sci_num" class="key" style="font-weight: none; font-size: 28px; font-family: 仿宋; padding: 8px">入驻科学家</td>
                <td class="key" style="font-weight: none; font-size: 28px; font-family: 仿宋; padding: 8px">姓名</td>
                <td style="font-size: 28px; font-family: 仿宋; padding: 8px">{{ info.scientist_name }}</td>
              </tr>
              <tr>
                <td class="key" style="font-weight: none; font-size: 28px; font-family: 仿宋; padding: 8px">所在单位</td>
                <td style="font-size: 28px; font-family: 仿宋; padding: 8px">{{ info.scientistinfo_company }}</td>
              </tr>
              <tr>
                <td class="key" style="font-weight: none; font-size: 28px; font-family: 仿宋; padding: 8px">联系方式</td>
                <td style="font-size: 28px; font-family: 仿宋; padding: 8px">{{ info.scientistinfo_phone }}</td>
              </tr>
              <tr>
                <td :rowspan="info.team.length + 1" class="key" style="font-weight: none; font-size: 28px; font-family: 仿宋; padding: 8px">团队成员</td>
              </tr>
              <tr v-for="(t, tindex) in info.team" :key="tindex">
                <td class="team" style="font-size: 28px; font-family: 仿宋; padding: 8px">
                  <p style="margin: 0 0 5px 0; font-size: 28px">{{ t.name }}</p>
                  <p style="margin: 0 0 5px 0; font-size: 28px">职称：{{ t.zc }}</p>
                  <p style="margin: 0 0 5px 0; font-size: 28px">工作单位：{{ t.company }}</p>
                </td>
              </tr>
              <tr>
                <td class="key" style="font-weight: none; font-size: 28px; font-family: 仿宋; padding: 8px">申报日期</td>
                <td colspan="2" style="font-size: 28px; font-family: 仿宋; padding: 8px">{{ info.apply_time }}</td>
              </tr>
            </table>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('studio');
const { mapActions: scientistsettle } = createNamespacedHelpers('scientistsettle');
const { mapActions: sysdictdata } = createNamespacedHelpers('sysdictdata');
const { mapActions: unitStudioApply } = createNamespacedHelpers('unitStudioApply');
const { mapActions: userStudioApply } = createNamespacedHelpers('userStudioApply');
import htmlToPdf from '@common/src/util/htmlToPdf.js';
export default {
  name: 'info',
  props: {},
  components: {},
  data: function () {
    return {
      // 依托单位基本信息
      unitInfo: {},
      // 科学家信息
      sciInfo: {},
      info: { team: [], zy_fields: [] },
      fieldList: [],
      // 入驻科学家入驻条数
      sci_num: 0,
      loading: false,
    };
  },
  async created() {
    await this.searchOther();
    await this.searchunitBasic();
    await this.searchsciBasic();
    await this.search();
  },
  methods: {
    ...mapActions(['fetch']),
    ...scientistsettle(['query']),
    ...sysdictdata({ dQuery: 'query' }),
    ...unitStudioApply({ uFetch: 'fetch' }),
    ...userStudioApply({ sFetch: 'fetch' }),
    // 查询企业基本信息
    async searchunitBasic() {
      if (this.company_id) {
        let res = await this.uFetch(this.company_id);
        if (this.$checkRes(res)) {
          this.$set(this, `unitInfo`, res.data);
        }
      }
    },
    // 查询科学家基本信息
    async searchsciBasic() {
      if (this.scientistinfo_id) {
        let res = await this.sFetch(this.scientistinfo_id);
        if (this.$checkRes(res)) {
          this.$set(this, `sciInfo`, res.data);
        }
      }
    },
    async search() {
      if (this.id) {
        let res = await this.fetch(this.id);
        if (this.$checkRes(res)) {
          let info = res.data;
          info.team = await this.sarchTeam();
          if (info.zy_fields && info.zy_fields.length > 0) info.zy_fields_name = this.searchDict(info.zy_fields, 'fieldList');
          info.company_contact = this.unitInfo.unit_contact;
          info.company_contact_phone = this.unitInfo.unit_phone.phone;
          info.scientistinfo_company = this.sciInfo.company;
          info.scientistinfo_phone = this.sciInfo.phone.phone;
          this.$set(this, `sci_num`, 4 + info.team.length);
          this.$set(this, `info`, info);
        }
      }
    },
    // 查询团队信息
    async sarchTeam() {
      let list = [];
      let res = await this.query({ studio_id: this.id });
      if (this.$checkRes(res)) {
        if (res.total > 0) {
          let data = res.data[0];
          list = data.team;
        }
      }
      return list;
    },
    searchDict(e, type) {
      let data = [];
      for (const val of e) {
        let info = this[type].find((i) => i.dict_value == val);
        if (info) data.push(info.dict_label);
      }
      return data.join(',');
    },
    // 导出
    toExport() {
      let that = this;
      this.$confirm('您确认要导出此信息吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          that.loading = true;
          let ele = document.querySelector('#demo');
          let pdfName = this.info.name;
          htmlToPdf.createPDF(ele, pdfName);
          that.loading = false;
        })
        .catch(() => {});
    },
    // 返回
    toBack() {
      window.history.go('-1');
    },
    // 查询其他信息
    async searchOther() {
      let res;
      // 专业领域
      res = await this.dQuery({ dict_type: 'studio_field' });
      if (this.$checkRes(res)) {
        this.$set(this, `fieldList`, res.data);
      }
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
    company_id() {
      return this.$route.query.company_id;
    },
    scientistinfo_id() {
      return this.$route.query.scientistinfo_id;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="scss" scoped>
// .main {
//   .two {
//     box-shadow: 0 0 10px #f1f1f1;
//     margin: 0 0 10px 0;
//     padding: 10px 20px;
//     .two_1 {
//       text-align: center;
//       margin: 0 0 1vw 0;
//       font-weight: none;
//       font-size: 30px;
//       font-family: 仿宋;
//     }
//     .two_2 {
//       padding: 0 14%;
//       table {
//         tr {
//           td {
//             font-size: 28px;
//             font-family: 仿宋;
//             padding: 8px;
//           }
//           .team {
//             p {
//               margin: 0 0 5px 0;
//               font-size: 14px;
//             }
//           }
//           .key {
//             font-weight: none;
//           }
//         }
//       }
//     }
//   }
// }
</style>