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">
          <component :is="partsSearch" :is_back="true" @toBack="toBack()">
            <template v-slot:custombtn>
              <el-button type="success" size="small" @click="toExport()">导出</el-button>
            </template>
          </component>
        </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 lang="ts" setup>
import partsSearch from '@/components/c-search.vue';
import type { Ref } from 'vue';
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessageBox } from 'element-plus';
import htmlToPdf from '@common/src/util/htmlToPdf.ts';
// #region 接口
import { StudioStore } from '@common/src/stores/studio/studios/studio'; // 列表 // 列表
import { DictDataStore } from '@common/src/stores/users/sysdictdata'; // 字典表
import { ScientistsettleStore } from '@common/src/stores/studio/studios/scientistsettle';
import { UnitStudioApplyStore } from '@common/src/stores/studio/role/unitStudioApply';
import { UserStudioApplyStore } from '@common/src/stores/studio/role/userStudioApply';
import type { IQueryResult } from '@/util/types.util';
const studio = StudioStore();
const sysdictdata = DictDataStore();
const scientistsettle = ScientistsettleStore();
const unitStudioApply = UnitStudioApplyStore();
const userStudioApply = UserStudioApplyStore();
let route = useRoute();
interface Item {}
interface teamItem {
  name: string;
  zc: string;
  company: string;
}
// #endregion
// #region 数据
// 依托单位基本信息
let unitInfo: Ref<{ unit_contact: string; unit_phone: { phone: string } }> = ref({ unit_contact: '', unit_phone: { phone: '' } });
// 科学家信息
let sciInfo: Ref<{ company: string; phone: { phone: string } }> = ref({ company: '', phone: { phone: '' } });
let info: Ref<{
  team: Array<teamItem>;
  zy_fields: Array<Item>;
  name: string;
  zy_fields_name: string;
  company_name: string;
  company_contact: string;
  company_contact_phone: string;
  scientist_name: string;
  scientistinfo_company: string;
  scientistinfo_phone: string;
  apply_time: string;
}> = ref({
  team: [],
  zy_fields: [],
  name: '',
  zy_fields_name: '',
  company_name: '',
  company_contact: '',
  company_contact_phone: '',
  scientist_name: '',
  scientistinfo_company: '',
  scientistinfo_phone: '',
  apply_time: '',
});
let fieldList: Ref<any[]> = ref([]);
// 入驻科学家入驻条数
let sci_num: Ref<number> = ref(0);
let loading: Ref<boolean> = ref(false);
let company_id = route.query.company_id;
let scientistinfo_id = route.query.scientistinfo_id;
let id = route.query.id;
// #endregion
onMounted(async () => {
  await searchOther();
  await searchunitBasic();
  await searchsciBasic();
  await search();
});
// 查询企业基本信息
const searchunitBasic = async () => {
  if (company_id) {
    const res: IQueryResult = await unitStudioApply.fetch(company_id);
    unitInfo.value = res.data as { unit_contact: string; unit_phone: { phone: string } };
  }
};
// 查询科学家基本信息
const searchsciBasic = async () => {
  if (scientistinfo_id) {
    const res: IQueryResult = await userStudioApply.fetch(scientistinfo_id);
    sciInfo.value = res.data as { company: string; phone: { phone: string } };
  }
};
const search = async () => {
  if (id) {
    const res: IQueryResult = await studio.fetch(id);
    let infos = res.data as {
      team: Array<teamItem>;
      zy_fields: Array<Item>;
      name: string;
      zy_fields_name: string;
      company_name: string;
      company_contact: string;
      company_contact_phone: string;
      scientist_name: string;
      scientistinfo_company: string;
      scientistinfo_phone: string;
      apply_time: string;
    };
    infos.team = await sarchTeam();
    if (infos.zy_fields && infos.zy_fields.length > 0) infos.zy_fields_name = searchDict(infos.zy_fields, 'fieldList');
    infos.company_contact = unitInfo.value.unit_contact;
    infos.company_contact_phone = unitInfo.value.unit_phone.phone;
    infos.scientistinfo_company = sciInfo.value.company;
    infos.scientistinfo_phone = sciInfo.value.phone.phone;
    sci_num.value = 4 + infos.team.length;
    info.value = infos;
  }
};
// 查询团队信息
const sarchTeam = async () => {
  let list = [];
  let res = await scientistsettle.query({ studio_id: id });
  if (res.total > 0) {
    let data = res.data[0];
    list = data.team;
  }
  return list;
};
const searchDict = (e, type) => {
  let data = [];
  for (const val of e) {
    let info = [type].find((i) => i.dict_value == val);
    if (info) data.push(info.dict_label);
  }
  return data.join(',');
};
// 导出
const toExport = () => {
  ElMessageBox.confirm('您确认要导出此信息吗', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    loading.value = true;
    let ele = document.querySelector('#demo');
    let pdfName = info.value.name;
    htmlToPdf.createPDF(ele, pdfName, { is_water: false, water: ``, is_show: 'p' });
    loading.value = false;
  });
};
// 返回
const toBack = () => {
  window.history.go(-1);
};
// 查询其他信息
const searchOther = async () => {
  // 专业领域
  const p1: IQueryResult = await sysdictdata.query({ dict_type: 'studio_field' });
  fieldList.value = p1.data as [];
};
</script>

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