accout-vue3-ui/src/views/InvoiceSales/invoiceQuery/components/purchase.vue

<script setup lang="ts">
import { ref } from "vue";
import contentConfig from "./purchase-config/content.config";
import searchConfig from "./purchase-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 { PageContent } from "/@/components/PageContent";

const PageName = "query";
const baseUrl = "/purchase/ticketReturnDetail";
const invStatus = ["3", "4", "5", "6", "9", "10", "12"];

const pageContentRef = ref<InstanceType<typeof PageContent> | null>(null);
const invoiceModalRef = ref<any>(null);

const { push } = useRouter();

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

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

<template>
  <PageAuth :pageName="PageName">
    <PageContainer
      :hooks="hooks"
      :events="events"
      :contentConfig="contentConfig"
      :search-config="searchConfig"
      :get-content-ref="(ref:any) => (pageContentRef = ref)"
    >
      <template #content_action="row">
        <ElButton
          v-if="invStatus.includes(String(row.status))"
          link
          type="primary"
          :icon="useRenderIcon('scaletooriginal')"
          @click="() => invoiceModalRef.onDisplay(row.invoiceNumber)"
        />
      </template>
    </PageContainer>

    <InvoiceModal inv-type="purchase" ref="invoiceModalRef" />
  </PageAuth>
</template>