index.vue 9.46 KB
<template>
  <div class="p-4">
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button
          type="primary"
          @click="handleInvoiceAnalysis"
          :style="{ borderRadius: '5px 5px 5px 5px' }"
          >收款单分析</a-button
        >
        <FinanceEdit @register="registerFinanceEdit" @success="handleSuccess" />
        <InvoiceAnalysis @register="registerInvoiceAnalysis" />
        <TrackEdit @register="registerTrackEdit" @success="handleSuccess" />
        <InvoiceDetail @register="registerInvoiceDetail" />
        <DeductShow @register="registerDeductShow" />
        <Commit @register="registerCommit" @success="handleSuccess" />
        <ReUploadBgUrl @register="registerReUploadBgUrl" />
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: '财务编辑',
                onClick: handleFinanceEdit.bind(null, record),
              },
              {
                label: '跟单编辑',
                onClick: handleTrackEdit.bind(null, record),
              },
              {
                label: '提交审核',
                // popConfirm: {
                //   title: '是否确认提交审核',
                //   placement: 'left',
                //   confirm: handleCommit.bind(null, record),
                // },
                onClick: handleCommit.bind(null, record),
              },
            ]"
            :dropDownActions="[
              {
                label: '订单信息',
                onClick: handleInvoiceDetail.bind(null, record),
              },
              {
                label: '更新报关单',
                onClick: handleReUploadBgUrl.bind(null, record),
              },
              {
                label: '删除',
                popConfirm: {
                  title: '是否确认删除',
                  placement: 'left',
                  confirm: handleDelete.bind(null, record),
                },
                // onClick: handleDelete.bind(null, record),
              },
              {
                label: '扣款单',
                onClick: handleDeductShow.bind(null, record),
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts" setup>
  import { computed, defineComponent, ref } from 'vue';
  import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
  import { searchFormSchema, columns } from './receive.data';
  import FinanceEdit from './FinanceEdit.vue';
  import TrackEdit from './TrackEdit.vue';
  import InvoiceAnalysis from './InvoiceAnalysis.vue';
  import InvoiceDetail from './InvoiceDetail.vue';
  import DeductShow from './DeductShow.vue';
  import Commit from './Commit.vue';
  import ReUploadBgUrl from './ReUploadBgUrl.vue';
  import { useDrawer } from '/@/components/Drawer';
  import { getInvoice, deleteInvoice, commit, getBaseInvoice } from '@/api/project/invoice';
  import { useModal } from '/@/components/Modal';
  import { FilePptOutlined } from '@ant-design/icons-vue';
  import { icon } from 'ant-design-vue';
  import { ROLE } from './type.d';
  import { useUserStoreWithOut } from '/@/store/modules/user';
  import { useMessage } from '/@/hooks/web/useMessage';

  const [registerInvoiceAnalysis, { openModal: openInvoiceAnalysis }] = useModal();

  const [registerFinanceEdit, { openDrawer: openFinanceEdit }] = useDrawer();
  const [registerTrackEdit, { openDrawer: openTrackEdit }] = useDrawer();
  const [registerInvoiceDetail, { openDrawer: openInvoiceDetail }] = useDrawer();
  const [registerCommit, { openModal: openCommit }] = useModal();
  const [registerReUploadBgUrl, { openModal: openReUploadBgUrl }] = useModal();
  const [registerDeductShow, { openModal: openDeductShow }] = useModal();
  const checkedKeys = ref<Array<string | number>>([]);
  const userStore = useUserStoreWithOut();
  const user = userStore.getUserInfo;
  const role = computed(() => {
    return user?.roleSmallVO?.code;
  });
  const [registerTable, { reload }] = useTable({
    title: '',
    api: getInvoice,
    columns: columns,
    bordered: true,
    clickToRowSelect: false,
    rowKey: 'id',
    rowSelection: {
      type: 'checkbox',
      selectedRowKeys: checkedKeys,
      onSelect,
      onSelectAll,
    },
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
      autoSubmitOnEnter: true,
    },
    useSearchForm: true,
    showTableSetting: true,
    showIndexColumn: false,
    tableSetting: {
      setting: false,
    },
    actionColumn: {
      width: 330,
      title: 'Action',
      dataIndex: 'action',
      // slots: { customRender: 'action' },
    },
  });

  type CustomerCodeEntry = [string, number]; // 定义二维数组类型 [customerCode, count]

  const selectedCustomCodes = ref<CustomerCodeEntry[]>([]); // 创建一个二维数组的 ref

  // 选择函数
  async function onSelect(record: any, selected: boolean) {
    if (selected) {
      const res = await getBaseInvoice({ invoiceNo: record.invoiceNo });
      const customerCode = res[0].customerCode;

      const index = selectedCustomCodes.value.findIndex(([code]) => code === customerCode);

      if (index !== -1) {
        // 如果存在,增加计数
        selectedCustomCodes.value[index][1] += 1;
      } else {
        // 如果不存在,添加新项 [customerCode, 1]
        selectedCustomCodes.value.push([customerCode, 1]);
      }

      checkedKeys.value = [...checkedKeys.value, record.id];
    } else {
      const res = await getBaseInvoice({ invoiceNo: record.invoiceNo });
      const customerCode = res[0].customerCode;

      const index = selectedCustomCodes.value.findIndex(([code]) => code === customerCode);

      if (index !== -1) {
        if (selectedCustomCodes.value[index][1] > 1) {
          // 如果计数大于 1,减少计数
          selectedCustomCodes.value[index][1] -= 1;
        } else {
          // 如果计数为 1,移除该项
          selectedCustomCodes.value.splice(index, 1);
        }
      }

      checkedKeys.value = checkedKeys.value.filter((id) => id !== record.id);
    }
    // console.log(selectedCustomCodes.value, 56561);
    // console.log(checkedKeys.value, 56562);
  }

  async function onSelectAll(selected: boolean, selectedRows: any[], changeRows: any[]) {
    const changeIds = changeRows.map((item) => item.id);
    const changeCustomerCodes = await Promise.all(
      changeRows.map(async (item) => {
        const res = await getBaseInvoice({ invoiceNo: item.invoiceNo });
        return res[0].customerCode;
      }),
    );

    if (selected) {
      // 添加到 checkedKeys
      checkedKeys.value = [...checkedKeys.value, ...changeIds];

      // 处理每个 customerCode
      changeCustomerCodes.forEach((code) => {
        const index = selectedCustomCodes.value.findIndex(
          ([customerCode]) => customerCode === code,
        );
        if (index !== -1) {
          // 如果存在,增加计数
          selectedCustomCodes.value[index][1] += 1;
        } else {
          // 如果不存在,添加新项 [customerCode, 1]
          selectedCustomCodes.value.push([code, 1]);
        }
      });
    } else {
      // 从 checkedKeys 中移除
      checkedKeys.value = checkedKeys.value.filter((id) => !changeIds.includes(id));

      // 处理每个 customerCode
      changeCustomerCodes.forEach((code) => {
        const index = selectedCustomCodes.value.findIndex(
          ([customerCode]) => customerCode === code,
        );
        if (index !== -1) {
          if (selectedCustomCodes.value[index][1] > 1) {
            // 如果计数大于 1,减少计数
            selectedCustomCodes.value[index][1] -= 1;
          } else {
            // 如果计数为 1,移除该项
            selectedCustomCodes.value.splice(index, 1);
          }
        }
      });
    }
  }

  function handleFinanceEdit(record) {
    openFinanceEdit(true, {
      data: record,
    });
  }
  function handleTrackEdit(record) {
    openTrackEdit(true, {
      data: record,
    });
  }
  function handleDelete(record) {
    const id: string[] = Array.isArray(record.id) ? record.id : [record.id];
    deleteInvoice({ ids: id });
    setTimeout(() => {
      reload();
    }, 50);
  }
  function handleDeductShow(record) {
    openDeductShow(true, {
      data: record,
    });
  }
  function handleCommit(record) {
    // const currentDate: string = (() => {
    //   const date = new Date();
    //   const year = date.getFullYear();
    //   const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始
    //   const day = String(date.getDate()).padStart(2, '0');
    //   return `${year}-${month}-${day}`;
    // })();
    // commit({ id: record.id, actualRefundDate: currentDate });
    // setTimeout(() => {
    //   reload();
    // }, 50);
    openCommit(true, {
      data: record,
    });
  }
  function handleInvoiceDetail(record) {
    openInvoiceDetail(true, {
      data: record,
    });
  }
  function handleReUploadBgUrl(record) {
    openReUploadBgUrl(true, {
      data: record,
    });
  }
  const { createMessage } = useMessage();
  const { error } = createMessage;
  function handleInvoiceAnalysis(record) {
    if (checkedKeys.value.length == 0) {
      error('请选择订单');
      return;
    }
    openInvoiceAnalysis(true, {
      data: checkedKeys.value,
    });
  }

  function handleSuccess() {
    setTimeout(() => {
      reload();
    }, 50);
  }
</script>