accout-vue3-ui/src/views/purchase/buyInvoiceQuery/index.vue

<script setup lang="ts">
import { ref } from "vue";
import contentConfig from "./config/content.config";
import searchConfig from "./config/search.config";
import { usePageSearch, type PageHooks, type PageEvents } from "/@/hooks/page";
import InvoiceModal from "./components/invoice-modal.vue";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { useRouter } from "vue-router";
// import { useUserInfo } from "/@/hooks/core/useUser";
import { httpRequsetExport } from "/@/utils/export";
import { useCompany } from "/@/hooks/core/useCompany";
import { PageContent } from "/@/components/PageContent";
import { utils, writeFile } from "xlsx";
import { template } from "./config/xls-template";
import ExeclUpoad from "./components/execl-files-upload/index.vue";
import { usePermission } from "/@/hooks/core/usePermission";
import { useUserInfo } from "/@/hooks/core/useUser";

const PageName = "buyInvoiceQuery";
const baseUrl = "/purchase/ticketReturnDetail";
const invStatus = ["4", "10"];

// { code: "017", name: "导出回票数据" },
// { code: "018", name: "批量导入认证结果" },
// { code: "019", name: "下载回票批量申请模板" },
const { hasPermissionWithCode } = usePermission(PageName);
const { isSuperUser } = useUserInfo();
const pageContentRef = ref<InstanceType<typeof PageContent> | null>(null);

const { push } = useRouter();
const { currentCompany } = useCompany();
const loading = ref(false);
const invoiceModalRef = ref<InstanceType<typeof InvoiceModal>>(null);
const execelUploadRef = ref<InstanceType<typeof ExeclUpoad>>(null);

async function handleDownload() {
  await httpRequsetExport({
    url: "ile",
    name: "回票数据表",
    onStart: () => (loading.value = true),
    onSuccess: () => (loading.value = false),
    onFail: () => (loading.value = false),
    params: {
      companyNo: currentCompany.value.companyNo,
      ...(pageContentRef.value as any).getBasicParams()
    }
  });
}

const hooks: PageHooks = {
  pageSearchHook: () => usePageSearch(undefined, undefined, searchConfig)
};

const events: PageEvents = {
  content: {
    preview: ({ hpNo }) => push(`${baseUrl}?id=${hpNo}`),
    create: () => push(baseUrl)
  }
};

//导出模板
function onDownloadTemplate() {
  //创建数据表
  const workBook = utils.book_new();
  const workSheet = utils.json_to_sheet([template]);
  utils.book_append_sheet(workBook, workSheet, "sheet");

  //导出模板
  writeFile(workBook, "回票批量导入模板.xlsx", {
    bookType: "xlsx"
  });
}
</script>

<template>
  <PageAuth :pageName="PageName">
    <PageContainer
      :hooks="hooks"
      :events="events"
      :contentConfig="contentConfig"
      :search-config="searchConfig"
      :get-content-ref="(ref:any) => (pageContentRef = ref)"
    >
      <template #content_header>
        <ElButton
          size="small"
          v-if="hasPermissionWithCode('017')"
          :icon="useRenderIcon('arrow-down-line')"
          :loading="loading"
          @click="() => handleDownload()"
          >导出回票数据</ElButton
        >

        <ElButton
          size="small"
          v-if="hasPermissionWithCode('018') && !isSuperUser"
          :icon="useRenderIcon('arrow-up-line')"
          @click="() => execelUploadRef.onDisplay()"
          >批量导入认证结果</ElButton
        >

        <ElButton
          size="small"
          v-if="hasPermissionWithCode('019')"
          :icon="useRenderIcon('arrow-down-line')"
          @click="() => onDownloadTemplate()"
          >下载回票批量申请模板</ElButton
        >
      </template>

      <template #content_action="row">
        <ElButton
          v-if="invStatus.includes(String(row.status))"
          link
          type="primary"
          :icon="useRenderIcon('scaletooriginal')"
          @click="() => invoiceModalRef.onDisplay(row)"
        />
      </template>
    </PageContainer>

    <InvoiceModal ref="invoiceModalRef" />
    <ExeclUpoad ref="execelUploadRef" />
  </PageAuth>
</template>