ticket-system/src/views/invoiceInOut/inManager/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 NotOrderImportModal from "./components/NotOrderImportModal/index.vue"
import OrderImportModal from "./components/OrderImportModal/index.vue"
import { notOrderTemplate } from "./components/NotOrderImportModal/columns-config"
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 { useUserInfo } from "/@/hooks/core/useUser";
import { httpDelete } from "/@/api/invoiceInOut/inOutManager";
import { useTask } from "/@/hooks/core";
import { ElButton, ElMessage } 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 { isSuperUser } = useUserInfo()

const selection = ref([])


const deleteTask = useTask({ success(){
  ElMessage.success('取消成功')
  pageContentRef?.value.onSearch()
} })

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

function onDownload(type = 'notOrder'){
  const data = type === 'notOrder' ? notOrderTemplate : orderTemplate
  const title = type === 'notOrder' ? '非订单商品模板.xlsx' : '订单商品模板.xlsx'
  const workBook = utils.book_new();
  const workSheet = utils.json_to_sheet(data);
  utils.book_append_sheet(workBook, workSheet, "sheet");
  writeFile(workBook, title, { bookType: "xlsx" });
}


function handleRefresh() {
  if (selection.value.length === 0) {
    ElMessage.warning('请选择至少一条状态为 "待审核" 或 "异常" 的数据')
    return
  }

  const isStatusNotOk = selection.value.some(({ status }) => status != '1' && status != '4')

  if (isStatusNotOk) {
    ElMessage.warning('只能选择状态为 "待审核" 或 "异常" 的数据')
    return
  }

  deleteTask.run(httpDelete({ id: selection.value.map(({ id }) => id) }))
}
</script>

<template>
  <PageAuth :pageName="PageName">
    <PageContainer
      :hooks="hooks"
      :events="events"
      :searchConfig="searchConfig"
      :contentConfig="contentConfig"
      :get-content-ref="ref => pageContentRef = ref"
      @content-select-change="selects => selection = selects"
    >
      <template #content_header>
        <ElButton
          style="margin-right: 10px"
          size="small" 
          type="primary"
          @click="handleRefresh"
        >批量取消</ElButton>

        <ElDropdown  v-if="!isSuperUser">
          <ElButton
            size="small" 
            type="primary"
            style="margin-right: 10px;margin-top:1px"
            :icon="useRenderIcon('arrow-up-line')"
          >商品导入
          </ElButton>
          
          <template #dropdown>
            <ElDropdownMenu>
              <ElDropdownItem @click="state.orderImportVisible = true">订单商品</ElDropdownItem>
              <ElDropdownItem @click="state.notOrderImportVisible = true">非订单商品</ElDropdownItem>
            </ElDropdownMenu>
          </template>
        </ElDropdown>

        <ElDropdown>
          <ElButton 
            size="small" 
            style="margin-right: 10px;margin-top:1px"
            :icon="useRenderIcon('arrow-down-line')"
          >商品导入模板下载</ElButton>
          
          <template #dropdown>
            <ElDropdownMenu>
              <ElDropdownItem @click="onDownload('order')">订单商品</ElDropdownItem>
              <ElDropdownItem @click="onDownload('notOrder')">非订单商品</ElDropdownItem>
            </ElDropdownMenu>
          </template>
        </ElDropdown>
      </template>
      <!-- <template #content_action="row">
        <ElTooltip content="取消操作" placement="top" v-if="row.status == '1'">
          <ElButton 
            :icon="useRenderIcon('refresh')"
            @click="handleRefresh(row)"
            type="danger"
            link
          />
        </ElTooltip>
      </template> -->
    </PageContainer>

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

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