canrd-outside / order-erp-front · Files

<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, watch } from 'vue';
  import { checkAnalysis, exportCheckAnalysis } from '@/api/project/invoice';
  import { BasicColumn, useTable, BasicTable, ColumnChangeParam } from '/@/components/Table';
  // 处理弹窗的确定按钮点击事件
  import axios from 'axios';
  import { store } from '/@/store';
  import { useOrderStoreWithOut } from '/@/store/modules/order';
  import { useUserStoreWithOut } from '/@/store/modules/user';

  const userStore = useUserStoreWithOut();
  const columnsAnalysis: BasicColumn[] = [
    {
      title: '生产科名称',
      dataIndex: 'productionDepartment',
      width: 150,
      customRender: (res) => {
        return res.record.exportVOS[0].productionDepartment;
      },
    },
    {
      title: '生产科总价汇总￥',
      dataIndex: 'checkProductionDepartmentTotalPrice',
      width: 150,
      customRender: (res) => {
        return res.record.productionDepartmentTotalPrice.toFixed(2);
      },
    },
    {
      title: '生产科扣款金额汇总￥',
      dataIndex: 'deductAmount',
      width: 160,
      customRender: (res) => {
        return res.record.deductAmount.toFixed(2);
      },
    },
    {
      title: '生产科实际应付金额￥',
      dataIndex: 'calculateActualPayedAmount',
      width: 160,
      customRender: (res) => {
        return res.record.calculateActualPayedAmount.toFixed(2);
      },
    },
    {
      title: '实际付款金额汇总￥',
      dataIndex: 'actualPayedAmount',
      width: 160,
      customRender: (res) => {
        return res.record.actualPayedAmount.toFixed(2);
      },
    },
    {
      title: '未付金额￥',
      dataIndex: 'unPayedAmount',
      width: 150,
      customRender: (res) => {
        return res.record.unPayedAmount.toFixed(2);
      },
    },
  ];
  // const ids = ref<number[]>([]);
  const ids = ref();
  const orderIds = ref();
  // const res = ref();
  const dataStore = useOrderStoreWithOut(); // 获取 store 实例
  const queryVO = ref();
  watch(
    () => store.state, // 监控 queryVO
    (newQueryVO, oldQueryVO) => {
      queryVO.value = dataStore.getQueryVO;
      // 在这里可以根据 queryVO 的变化进行其他操作，比如重新请求数据等
    },
    { deep: true }, // 深度监控 queryVO 数组或对象的变化
  );

  const [register, { closeModal }] = useModalInner(async (data) => {
    // ids.value = data.data;
    ids.value = data.data;
    orderIds.value = data.id;
    setTimeout(() => {
      reload();
    }, 50);
  });
  const [registerTable, { reload }] = useTable({
    // api: () => invoiceAnalysis({ ids: ids.value }),
    api: async () => {
      const res = await checkAnalysis({
        ids: ids.value,
        orderIds: orderIds.value,
        queryVO: queryVO.value,
      });
      // 计算合计行
      const sum = {
        productionDepartmentTotalPrice: 0,
        deductAmount: 0,
        calculateActualPayedAmount: 0,
        actualPayedAmount: 0,
        unPayedAmount: 0,
        exportVOS: res[0].exportVOS ? JSON.parse(JSON.stringify(res[0].exportVOS)) : [],
      };

      res.forEach((item: any) => {
        sum.productionDepartmentTotalPrice += item.productionDepartmentTotalPrice || 0;
        sum.deductAmount += item.deductAmount || 0;
        sum.calculateActualPayedAmount += item.calculateActualPayedAmount || 0;
        sum.actualPayedAmount += item.actualPayedAmount || 0;
        sum.unPayedAmount += item.unPayedAmount || 0;
      });
      if (sum.exportVOS && sum.exportVOS[0]) {
        sum.exportVOS[0].productionDepartment = '合计';
      }
      res.push(sum);
      return res;
    },
    columns: columnsAnalysis,
    bordered: true,
  });
  function handleShow(visible: boolean) {
    reload();
  }
  const searchData = ref({});
  async function handleOk() {
    // 构造符合 API 要求的参数
    // const ids = [23];
    // const requestData = {
    //   ids: ids.value,
    // };
    const idss = ids.value;
    const token = userStore.getToken;
    // await exportCheckAnalysis({ ids: ids });
    axios
      .post(
        '/basic-api/order/erp/check_bill/export',
        { ids: idss, orderIds: orderIds.value, queryVO: queryVO.value },
        {
          headers: {
            Authorization: `${token}`, // 去掉引号
          },
          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);
      });
    reload();
    closeModal();
  }
</script>
<style scoped>
  .divAll {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>