ticket-system/src/views/invoiceInOut/clientC/index.vue

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { usePageSearch, type PageHooks, type PageEvents } from "/@/hooks/page";
import OrderImportModal from "./components/OrderImportModal/index.vue"
import { orderTemplate } from "./components/OrderImportModal/columns-config"
import { useRenderIcon } from "/@/components/ReIcon/src/hooks"
import contentConfig from "./config/content.config";
import searchConfig from "./config/search.config";
import { utils, writeFile } from "xlsx";
import { ElButton } from "element-plus";


const PageName = "inOutManager";
const router = useRouter();

const state = reactive({ orderImportVisible: false, notOrderImportVisible: false })
const hooks: PageHooks = { pageSearchHook: () => usePageSearch(undefined, undefined, searchConfig) };

const pageContentRef = ref(null)

const events: PageEvents = {
  content: {
    create: () => router.push('/invoiceInOut/clinetCDetail'),
    preview: ({ id }) => router.push("/invoiceInOut/clinetCDetail?id=" + id)
  }
};

function handleDownloadTemplate(){
  const workBook = utils.book_new()
  const workSheet = utils.json_to_sheet(orderTemplate)
  utils.book_append_sheet(workBook, workSheet, 'sheet');
  writeFile(workBook, 'C端无发票订单出库模板.xlsx', { bookType: 'xlsx' })
}
</script>

<template>
  <PageAuth :pageName="PageName">
    <PageContainer :hooks="hooks" :events="events" :searchConfig="searchConfig" :contentConfig="contentConfig"
      :get-content-ref="ref => pageContentRef = ref">
      <template #content_header>
        <ElButton 
          size="small" 
          type="primary" 
          style="margin-right: 10px;margin-top:1px"
          :icon="useRenderIcon('arrow-up-line')" 
          @click="state.orderImportVisible = true"
        >C端无发票订单出库导入
        </ElButton>

        <ElButton 
          size="small" 
          style="margin-right: 10px;margin-top:1px" 
          @click="handleDownloadTemplate"
          :icon="useRenderIcon('arrow-down-line')"
        >C端无发票订单出库模板
        </ElButton>
 
        <ElButton 
          size="small" 
          type="primary"
          @click="router.push('/invoiceInOut/clinetCDetail')"
        >批量审核
        </ElButton>
      </template>

      <!-- <template #content_action="{ row }">
        <ElButton type="danger" :icon="useRenderIcon('delete')" />
      </template> -->
    </PageContainer>

    <OrderImportModal v-model:visible="state.orderImportVisible" @refresh="pageContentRef?.onSearch()" />
  </PageAuth>
</template>