From 4c4ea62754d03a5b1262ae3ded0c315886b42783 Mon Sep 17 00:00:00 2001 From: jameszow Date: Sun, 3 Dec 2023 17:43:43 +0800 Subject: [PATCH] fetch: change export function in collection, expense, income views --- web/src/views/financial/collection/index.vue | 67 ++++++++++++++++---- web/src/views/financial/expense/index.vue | 66 +++++++++++++++---- web/src/views/financial/income/index.vue | 65 +++++++++++++++---- 3 files changed, 159 insertions(+), 39 deletions(-) diff --git a/web/src/views/financial/collection/index.vue b/web/src/views/financial/collection/index.vue index 1264bdb1..3a6b0e8a 100644 --- a/web/src/views/financial/collection/index.vue +++ b/web/src/views/financial/collection/index.vue @@ -40,6 +40,14 @@ + +
+

即将导出{{dataSum}}条数据，请耐心等待。

+

如需导出明细数据（可能耗时较长），请勾选下方复选框。

+ 需要导出明细数据 +
+ @@ -52,22 +60,26 @@ import {defineComponent, ref} from "vue"; import {BasicTable, TableAction, useTable} from "@/components/Table"; import {useMessage} from "@/hooks/web/useMessage"; import {columns, searchFormSchema} from "@/views/financial/collection/collection.data"; -import {exportXlsx} from "@/api/basic/common"; import {useI18n} from "vue-i18n"; -import {getCollectionPageList, deleteBatchCollection, updateCollectionStatus} from "@/api/financial/collection"; -import {Tag} from "ant-design-vue"; +import {getCollectionPageList, deleteBatchCollection, updateCollectionStatus, exportCollection} from "@/api/financial/collection"; +import {Checkbox, Modal, Tag} from "ant-design-vue"; import {useModal} from "@/components/Modal"; import ViewCollectionModal from "@/views/financial/collection/components/ViewCollectionModal.vue"; import AddEditCollectionModal from "@/views/financial/collection/components/AddEditCollectionModal.vue"; +import {getTimestamp} from "@/utils/dateUtil"; export default defineComponent({ name: 'CollectionReceipt', - components: {ViewCollectionModal, Tag, TableAction, BasicTable, AddEditCollectionModal}, + components: {'a-modal': Modal, 'a-checkbox': Checkbox, ViewCollectionModal, Tag, TableAction, BasicTable, AddEditCollectionModal}, setup() { const { t } = useI18n(); const { createMessage } = useMessage(); const addEditModalRef = ref(null); + const exportDetailData = ref(false); + const openExportData = ref(false); + const confirmLoading = ref(false); + const dataSum = ref(0); const [receiptViewModal, {openModal: openReceiptViewModal}] = useModal(); - const [registerTable, { reload, getSelectRows }] = useTable({ + const [registerTable, { reload, getSelectRows, getForm, getDataSource }] = useTable({ title: '收款单列表', rowKey: 'id', api: getCollectionPageList, @@ -169,14 +181,37 @@ export default defineComponent({ } async function handleExport() { - const file = await exportXlsx("收款单列表") - const blob = new Blob([file]); - const link = document.createElement("a"); - link.href = URL.createObjectURL(blob); - const timestamp = getTimestamp(new Date()); - link.download = "收款单数据" + timestamp + ".xlsx"; - link.target = "_blank"; - link.click(); + dataSum.value = getDataSource().length; + if (dataSum.value === 0) { + createMessage.warn('当前查询条件下无数据可导出'); + return; + } + openExportData.value = true; + } + + const handleExportCancel = () => { + confirmLoading.value = false; + openExportData.value = false; + exportDetailData.value = false; + }; + + const handleExportOk = async () => { + confirmLoading.value = true; + const data: any = getForm().getFieldsValue(); + data.isExportDetail = exportDetailData.value; + const file: any = await exportCollection(data) + if (file.size > 0) { + const blob = new Blob([file]); + const link = document.createElement("a"); + link.href = URL.createObjectURL(blob); + const timestamp = getTimestamp(new Date()); + link.download = "收款单数据" + timestamp + ".xlsx"; + link.target = "_blank"; + link.click(); + } + confirmLoading.value = false; + openExportData.value = false; + exportDetailData.value = false; } @@ -195,6 +230,12 @@ export default defineComponent({ handleView, handleOk, handleExport, + openExportData, + confirmLoading, + exportDetailData, + dataSum, + handleExportOk, + handleExportCancel } } }) diff --git a/web/src/views/financial/expense/index.vue b/web/src/views/financial/expense/index.vue index 3e9dc4ff..694924a6 100644 --- a/web/src/views/financial/expense/index.vue +++ b/web/src/views/financial/expense/index.vue @@ -40,6 +40,14 @@ + +
+

即将导出{{dataSum}}条数据，请耐心等待。

+

如需导出明细数据（可能耗时较长），请勾选下方复选框。

+ 需要导出明细数据 +
+ @@ -52,22 +60,25 @@ import {defineComponent, ref} from "vue"; import {BasicTable, TableAction, useTable} from "@/components/Table"; import {useMessage} from "@/hooks/web/useMessage"; import {columns, searchFormSchema} from "@/views/financial/expense/expense.data"; -import {exportXlsx} from "@/api/basic/common"; import {useI18n} from "vue-i18n"; -import {getExpensePageList, deleteBatchExpense, updateExpenseStatus} from "@/api/financial/expense"; +import {getExpensePageList, deleteBatchExpense, updateExpenseStatus, exportExpense} from "@/api/financial/expense"; import AddEditExpenseModal from "@/views/financial/expense/components/AddEditExpenseModal.vue" -import {Tag} from "ant-design-vue"; +import {Checkbox, Modal, Tag} from "ant-design-vue"; import {useModal} from "@/components/Modal"; import ViewExpenseModal from "@/views/financial/expense/components/ViewExpenseModal.vue"; export default defineComponent({ name: 'ExpenseReceipt', - components: {ViewExpenseModal, Tag, TableAction, BasicTable, AddEditExpenseModal}, + components: {'a-modal': Modal, 'a-checkbox': Checkbox, ViewExpenseModal, Tag, TableAction, BasicTable, AddEditExpenseModal}, setup() { const { t } = useI18n(); const { createMessage } = useMessage(); const addEditModalRef = ref(null); + const exportDetailData = ref(false); + const openExportData = ref(false); + const confirmLoading = ref(false); + const dataSum = ref(0); const [receiptViewModal, {openModal: openReceiptViewModal}] = useModal(); - const [registerTable, { reload, getSelectRows }] = useTable({ + const [registerTable, { reload, getSelectRows, getForm, getDataSource }] = useTable({ title: '支出单列表', rowKey: 'id', api: getExpensePageList, @@ -169,14 +180,37 @@ export default defineComponent({ } async function handleExport() { - const file = await exportXlsx("支出单列表") - const blob = new Blob([file]); - const link = document.createElement("a"); - link.href = URL.createObjectURL(blob); - const timestamp = getTimestamp(new Date()); - link.download = "支出单数据" + timestamp + ".xlsx"; - link.target = "_blank"; - link.click(); + dataSum.value = getDataSource().length; + if (dataSum.value === 0) { + createMessage.warn('当前查询条件下无数据可导出'); + return; + } + openExportData.value = true; + } + + const handleExportCancel = () => { + confirmLoading.value = false; + openExportData.value = false; + exportDetailData.value = false; + }; + + const handleExportOk = async () => { + confirmLoading.value = true; + const data: any = getForm().getFieldsValue(); + data.isExportDetail = exportDetailData.value; + const file: any = await exportExpense(data) + if (file.size > 0) { + const blob = new Blob([file]); + const link = document.createElement("a"); + link.href = URL.createObjectURL(blob); + const timestamp = getTimestamp(new Date()); + link.download = "支出单数据" + timestamp + ".xlsx"; + link.target = "_blank"; + link.click(); + } + confirmLoading.value = false; + openExportData.value = false; + exportDetailData.value = false; } @@ -195,6 +229,12 @@ export default defineComponent({ handleView, handleOk, handleExport, + openExportData, + confirmLoading, + exportDetailData, + dataSum, + handleExportOk, + handleExportCancel } } }) diff --git a/web/src/views/financial/income/index.vue b/web/src/views/financial/income/index.vue index 0ec031c6..57db71d1 100644 --- a/web/src/views/financial/income/index.vue +++ b/web/src/views/financial/income/index.vue @@ -40,6 +40,14 @@ + +
+

即将导出{{dataSum}}条数据，请耐心等待。

+

如需导出明细数据（可能耗时较长），请勾选下方复选框。

+ 需要导出明细数据 +
+ @@ -52,22 +60,25 @@ import {defineComponent, ref} from "vue"; import {BasicTable, TableAction, useTable} from "@/components/Table"; import {useMessage} from "@/hooks/web/useMessage"; import {columns, searchFormSchema} from "@/views/financial/income/income.data"; -import {exportXlsx} from "@/api/basic/common"; import {useI18n} from "vue-i18n"; -import {getIncomePageList, deleteBatchIncome, updateIncomeStatus} from "@/api/financial/income"; +import {getIncomePageList, deleteBatchIncome, updateIncomeStatus, exportIncome} from "@/api/financial/income"; import AddEditIncomeModal from "@/views/financial/income/components/AddEditIncomeModal.vue" -import {Tag} from "ant-design-vue"; +import {Checkbox, Modal, Tag} from "ant-design-vue"; import {useModal} from "@/components/Modal"; import ViewIncomeModal from "@/views/financial/income/components/ViewIncomeModal.vue"; export default defineComponent({ name: 'IncomeReceipt', - components: {ViewIncomeModal, Tag, TableAction, BasicTable, AddEditIncomeModal}, + components: {'a-modal': Modal, 'a-checkbox': Checkbox, ViewIncomeModal, Tag, TableAction, BasicTable, AddEditIncomeModal}, setup() { const { t } = useI18n(); const { createMessage } = useMessage(); const addEditModalRef = ref(null); + const exportDetailData = ref(false); + const openExportData = ref(false); + const confirmLoading = ref(false); + const dataSum = ref(0); const [receiptViewModal, {openModal: openReceiptViewModal}] = useModal(); - const [registerTable, { reload, getSelectRows }] = useTable({ + const [registerTable, { reload, getSelectRows, getForm, getDataSource }] = useTable({ title: '收入单列表', rowKey: 'id', api: getIncomePageList, @@ -169,16 +180,38 @@ export default defineComponent({ } async function handleExport() { - const file = await exportXlsx("收入单列表") - const blob = new Blob([file]); - const link = document.createElement("a"); - link.href = URL.createObjectURL(blob); - const timestamp = getTimestamp(new Date()); - link.download = "收入单数据" + timestamp + ".xlsx"; - link.target = "_blank"; - link.click(); + dataSum.value = getDataSource().length; + if (dataSum.value === 0) { + createMessage.warn('当前查询条件下无数据可导出'); + return; + } + openExportData.value = true; } + const handleExportCancel = () => { + confirmLoading.value = false; + openExportData.value = false; + exportDetailData.value = false; + }; + + const handleExportOk = async () => { + confirmLoading.value = true; + const data: any = getForm().getFieldsValue(); + data.isExportDetail = exportDetailData.value; + const file: any = await exportIncome(data) + if (file.size > 0) { + const blob = new Blob([file]); + const link = document.createElement("a"); + link.href = URL.createObjectURL(blob); + const timestamp = getTimestamp(new Date()); + link.download = "收入单数据" + timestamp + ".xlsx"; + link.target = "_blank"; + link.click(); + } + confirmLoading.value = false; + openExportData.value = false; + exportDetailData.value = false; + } return { t, @@ -195,6 +228,12 @@ export default defineComponent({ handleView, handleOk, handleExport, + openExportData, + confirmLoading, + exportDetailData, + dataSum, + handleExportOk, + handleExportCancel } } })