InvoiceAnalysis.vue 5.68 KB
<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title="收款单分析"
    width="60%"
    okText="导出"
    :isDetail="true"
    :showDetailBack="false"
    @ok="handleOk"
    @visible-change="handleShow"
  >
    <div class="p-4">
      <BasicTable @register="registerTable">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'"> </template>
        </template>
      </BasicTable>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { computed, ref } from 'vue';
  import { invoiceAnalysis, exportAnalysis } from '@/api/project/invoice';
  import { BasicColumn, useTable, BasicTable, ColumnChangeParam } from '/@/components/Table';
  // 处理弹窗的确定按钮点击事件
  import axios from 'axios';

  const columnsAnalysis: BasicColumn[] = [
    {
      title: '客户编码',
      dataIndex: 'actualPayedAmount',
      width: 50,
      customRender: (res) => {
        return res?.record?.exportVOS[0]?.customerCode;
      },
    },
    {
      title: '客户总金额汇总$',
      dataIndex: 'customerTotalPrice',
      width: 50,
      customRender: (res) => {
        return res?.record?.customerTotalPrice.toFixed(2);
      },
    },
    {
      title: '客户扣款金额汇总$',
      dataIndex: 'deductAmount',
      width: 50,
      customRender: (res) => {
        return res?.record?.deductAmount.toFixed(2);
      },
    },
    {
      title: '实际应收款$',
      dataIndex: 'otherAmount',
      width: 50,
      customRender: (res) => {
        return res?.record?.otherAmount.toFixed(2);
      },
    },
    {
      title: '实际收款金额汇总$',
      dataIndex: 'actualReceivableAmount',
      width: 50,
      customRender: (res) => {
        return res?.record?.actualReceivableAmount.toFixed(2);
      },
    },
    {
      title: '其他费用金额汇总$',
      dataIndex: 'otherTotalAmount',
      width: 50,
      customRender: (res) => {
        return res?.record?.otherTotalAmount.toFixed(2);
      },
    },
    {
      title: '未收金额合计$',
      dataIndex: 'actualPayedAmount',
      width: 50,
      customRender: (res) => {
        return res?.record?.actualPayedAmount.toFixed(2);
      },
    },
  ];
  // const ids = ref<number[]>([]);
  const ids = ref();
  const tableData = ref([]);
  // const res = ref();

  const [register, { closeModal }] = useModalInner(async (data) => {
    ids.value = data.data;
    setTimeout(() => {
      reload();
    }, 50);
  });
  const [registerTable, { reload }] = useTable({
    // api: () => invoiceAnalysis({ ids: ids.value }),
    api: async () => {
      // const res = await invoiceAnalysis({ ids: ids.value });
      const arrayRes = ref([]);
      // return res;
      const res = await invoiceAnalysis({ ids: ids.value });
      arrayRes.value.push(res);

      console.log(arrayRes.value, '5656resana');
      // // 计算合计行
      // const sum = {
      //   customerTotalPrice: 0,
      //   deductAmount: 0,
      //   otherAmount: 0,
      //   actualReceivableAmount: 0,
      //   otherTotalAmount: 0,
      //   actualPayedAmount: 0,
      //   exportVOS: res[0].exportVOS,
      // };

      // res.forEach((item: any) => {
      //   sum.customerTotalPrice += item.customerTotalPrice || 0;
      //   sum.deductAmount += item.deductAmount || 0;
      //   sum.otherAmount += item.otherAmount || 0;
      //   sum.actualReceivableAmount += item.actualReceivableAmount || 0;
      //   sum.otherTotalAmount += item.otherTotalAmount || 0;
      //   sum.actualPayedAmount += item.actualPayedAmount || 0;
      // });

      // // 在数据末尾添加合计行
      // tableData.value = [...res, { ...sum, actualPayedAmount: 123 }];
      // arrayRes.value.push(tableData.value);
      console.log(arrayRes.value, '5656arrayRes.value');
      return res;
    },
    columns: columnsAnalysis,
    bordered: true,
  });
  function handleShow(visible: boolean) {
    reload();
  }
  const searchData = ref({});
  async function handleOk() {
    // 构造符合 API 要求的参数
    const idss = ids.value;
    // await exportAnalysis({ ids: ids });
    axios
      .post(
        '/basic-api/order/erp/invoice_bill/export',
        { ids: idss },
        {
          responseType: 'blob', // 设置响应类型为 'blob'
        },
      )
      .then((response) => {
        // 创建一个 Blob 对象来保存二进制数据
        const blob = new Blob([response.data], { type: 'application/zip' });
        const getFormattedDate = (): string => {
          const date = new Date();

          const year = date.getFullYear();
          const month = String(date.getMonth() + 1).padStart(2, '0');
          const day = String(date.getDate()).padStart(2, '0');

          const hours = String(date.getHours()).padStart(2, '0');
          const minutes = String(date.getMinutes()).padStart(2, '0');
          const seconds = String(date.getSeconds()).padStart(2, '0');

          return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        };
        const date = getFormattedDate();
        // 创建一个链接元素用于下载
        const link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = `收款单分析${date}.xlsx`; // 你可以为文件命名
        document.body.appendChild(link);
        link.click(); // 自动点击链接,触发下载
        document.body.removeChild(link); // 下载完成后移除链接
      })
      .catch((error) => {
        console.error(error);
      });
    closeModal();
  }
</script>
<style scoped>
  .divAll {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>