canrd-outside / order-erp-front · Files

<template>
  <div class="p-4">
    <BasicTable @register="registerTable" :pagination="{ pageSize: 20 }">
      <template #toolbar>
        <a-button
          type="primary"
          @click="handleCheckSum"
          :style="{ borderRadius: '5px 5px 5px 5px' }"
          >应付款汇总</a-button
        >
        <FinanceEdit @register="registerFinanceEdit" @success="handleSuccess" />
        <TrackEdit @register="registerTrackEdit" @success="handleSuccess" />
        <CheckSum @register="registerCheckSum" />
        <InvoiceUpload @register="registerInvoiceUpload" @success="handleSuccess" />
        <CheckDetail @register="registerInvoiceDetail" />
        <DeductShow @register="registerDeductShow" />
        <InvoiceShow @register="registerInvoiceShow" />
        <Commit @register="registerCommit" @success="handleSuccess" />
        <EditRefundTime @register="registerEditRefundTime" @success="handleSuccess" />
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            v-if="
              role == ROLE.ADMIN ||
              role == ROLE.FINANCE ||
              role == ROLE.TRACKER ||
              role == ROLE.BUSINESS
            "
            :actions="[
              ...(role == ROLE.ADMIN || role == ROLE.FINANCE
                ? [
                    {
                      label: '财务编辑',
                      onClick: handleFinanceEdit.bind(null, record),
                    },
                  ]
                : []),
              {
                label: '跟单编辑',
                onClick: handleTrackEdit.bind(null, record),
              },
              {
                label: '发票上传',
                onClick: handleInvoiceUpload.bind(null, record),
              },
            ]"
            :dropDownActions="[
              ...(role == ROLE.ADMIN || role == ROLE.FINANCE
                ? [
                    {
                      label: '提交审核',
                      onClick: handleCommit.bind(null, record),
                    },
                  ]
                : []),
              {
                label: '订单信息',
                onClick: handleDetail.bind(null, record),
              },
              {
                label: '删除',
                popConfirm: {
                  title: '是否确认删除',
                  placement: 'left',
                  confirm: handleDelete.bind(null, record),
                },
                // onClick: handleDelete.bind(null, record),
              },
              {
                label: '生产科发票',
                onClick: handleInvoiceShow.bind(null, record),
              },
              {
                label: '扣款单',
                onClick: handleDeductShow.bind(null, record),
              },
              ...(role == ROLE.ADMIN
                ? [
                    {
                      label: '修改应付款日期',
                      onClick: handleEditRefundTime.bind(null, record),
                    },
                  ]
                : []),
            ]"
          />
          <TableAction
            v-if="role == ROLE.PRODUCE"
            :actions="[
              {
                label: '发票上传',
                onClick: handleInvoiceUpload.bind(null, record),
              },
              {
                label: '生产科发票',
                onClick: handleInvoiceShow.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 './pay.data';
  import TrackEdit from './TrackEdit.vue';
  import FinanceEdit from './FinanceEdit.vue';
  import InvoiceUpload from './InvoiceUpload.vue';
  import CheckDetail from './CheckDetail.vue';
  import CheckSum from './CheckSum.vue';
  import DeductShow from './DeductShow.vue';
  import InvoiceShow from './InvoiceShow.vue';
  import Commit from './Commit.vue';
  import EditRefundTime from './EditRefundTime.vue';
  import { useDrawer } from '/@/components/Drawer';
  import { useModal } from '/@/components/Modal';
  import { getCheck, checkDelete, checkCommit, checkDetail } from '@/api/project/invoice';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { ROLE } from './type.d';
  import { getOrderList } from '/@/api/project/order';
  import { useUserStoreWithOut } from '/@/store/modules/user';

  const [registerCheckSum, { openModal: openCheckSum }] = useModal();
  const [registerFinanceEdit, { openDrawer: openFinanceEdit }] = useDrawer();
  const [registerTrackEdit, { openDrawer: openTrackEdit }] = useDrawer();
  const [registerInvoiceUpload, { openModal: openInvoiceUpload }] = useModal();
  const [registerDeductShow, { openModal: openDeductShow }] = useModal();
  const [registerCommit, { openModal: openCommit }] = useModal();
  const [registerEditRefundTime, { openModal: openEditRefundTime }] = useModal();
  const [registerInvoiceShow, { openModal: openInvoiceShow }] = useModal();
  const [registerInvoiceDetail, { openDrawer: openCheckDetail }] = useDrawer();
  const userStore = useUserStoreWithOut();
  const user = userStore.getUserInfo;
  const role = computed(() => {
    return user?.roleSmallVO?.code;
  });
  const checkedKeys = ref<Array<string | number>>([]);
  // 添加分页状态
  const pagination = ref({
    current: 1, // 当前页
    pageSize: 10, // 每页条数
    total: 0, // 数据总数
  });
  const [registerTable, { reload }] = useTable({
    title: '',
    api: getCheck,
    columns: columns,
    bordered: true,
    clickToRowSelect: false,
    rowKey: 'id',
    pagination: {
      pageSize: 10,
    },
    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: 260,
      title: 'Action',
      dataIndex: 'action',
      // slots: { customRender: 'action' },
    },
  });
  //选择算法：创建二维数组，使客户编码和生产科相同
  type CustomerCodeEntry = [string, number]; // 定义二维数组类型 [customerCode, count]
  type ProductionDepartmentEntry = [string, number]; // 定义二维数组类型 [productionDepartment, count]

  const selectedCustomCodes = ref<CustomerCodeEntry[]>([]); // 创建一个二维数组的 ref
  const selectedProductionDepartment = ref<ProductionDepartmentEntry[]>([]); // 创建一个二维数组的 ref
  // const checkedKeys = ref<string[]>([]); // 选中的键值列表

  // 单选函数
  async function onSelect(record, selected: boolean) {
    const res = await checkDetail({ checkNo: record.checkNo });
    const customerCode = res[0].customerCode;
    const productionDepartment = res[0].productionDepartment;

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

    const productionDepartmentIndex = selectedProductionDepartment.value.findIndex(
      ([department]) => department === productionDepartment,
    );

    if (selected) {
      checkedKeys.value = [...checkedKeys.value, record.id];

      // 更新 selectedCustomCodes
      if (customerCodeIndex !== -1) {
        selectedCustomCodes.value[customerCodeIndex][1] += 1;
      } else {
        selectedCustomCodes.value.push([customerCode, 1]);
      }

      // 更新 selectedProductionDepartment
      if (productionDepartmentIndex !== -1) {
        selectedProductionDepartment.value[productionDepartmentIndex][1] += 1;
      } else {
        selectedProductionDepartment.value.push([productionDepartment, 1]);
      }
    } else {
      checkedKeys.value = checkedKeys.value.filter((id) => id !== record.id);

      // 更新 selectedCustomCodes
      if (customerCodeIndex !== -1) {
        if (selectedCustomCodes.value[customerCodeIndex][1] > 1) {
          selectedCustomCodes.value[customerCodeIndex][1] -= 1;
        } else {
          selectedCustomCodes.value.splice(customerCodeIndex, 1);
        }
      }

      // 更新 selectedProductionDepartment
      if (productionDepartmentIndex !== -1) {
        if (selectedProductionDepartment.value[productionDepartmentIndex][1] > 1) {
          selectedProductionDepartment.value[productionDepartmentIndex][1] -= 1;
        } else {
          selectedProductionDepartment.value.splice(productionDepartmentIndex, 1);
        }
      }
    }
    // console.log(checkedKeys.value, 565666666); // 输出当前的 selectedCustomCodes 值
    // console.log(selectedCustomCodes.value, 565666666); // 输出当前的 selectedCustomCodes 值
    // console.log(selectedProductionDepartment.value, 565666666); // 输出当前的 selectedCustomCodes 值
  }

  // 全选函数
  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 checkDetail({ checkNo: item.checkNo });
        return res[0].customerCode;
      }),
    );

    const changeProductionDepartments = await Promise.all(
      changeRows.map(async (item) => {
        const res = await checkDetail({ checkNo: item.checkNo });
        return res[0].productionDepartment;
      }),
    );

    if (selected) {
      checkedKeys.value = [...checkedKeys.value, ...changeIds];

      // 更新 selectedCustomCodes
      changeCustomerCodes.forEach((code) => {
        const index = selectedCustomCodes.value.findIndex(
          ([customerCode]) => customerCode === code,
        );
        if (index !== -1) {
          selectedCustomCodes.value[index][1] += 1;
        } else {
          selectedCustomCodes.value.push([code, 1]);
        }
      });

      // 更新 selectedProductionDepartment
      changeProductionDepartments.forEach((department) => {
        const index = selectedProductionDepartment.value.findIndex(
          ([prodDepartment]) => prodDepartment === department,
        );
        if (index !== -1) {
          selectedProductionDepartment.value[index][1] += 1;
        } else {
          selectedProductionDepartment.value.push([department, 1]);
        }
      });
    } else {
      checkedKeys.value = checkedKeys.value.filter((id) => !changeIds.includes(id));

      // 更新 selectedCustomCodes
      changeCustomerCodes.forEach((code) => {
        const index = selectedCustomCodes.value.findIndex(
          ([customerCode]) => customerCode === code,
        );
        if (index !== -1) {
          if (selectedCustomCodes.value[index][1] > 1) {
            selectedCustomCodes.value[index][1] -= 1;
          } else {
            selectedCustomCodes.value.splice(index, 1);
          }
        }
      });

      // 更新 selectedProductionDepartment
      changeProductionDepartments.forEach((department) => {
        const index = selectedProductionDepartment.value.findIndex(
          ([prodDepartment]) => prodDepartment === department,
        );
        if (index !== -1) {
          if (selectedProductionDepartment.value[index][1] > 1) {
            selectedProductionDepartment.value[index][1] -= 1;
          } else {
            selectedProductionDepartment.value.splice(index, 1);
          }
        }
      });
    }

    // console.log(checkedKeys.value, 565666666); // 输出当前的 selectedCustomCodes 值
    // console.log(selectedCustomCodes.value, 565666666); // 输出当前的 selectedCustomCodes 值
    // console.log(selectedProductionDepartment.value, 565666666); // 输出当前的 selectedCustomCodes 值
  }

  function handleFinanceEdit(record) {
    openFinanceEdit(true, {
      data: record,
    });
  }
  function handleTrackEdit(record) {
    openTrackEdit(true, {
      data: record,
    });
  }
  function handleInvoiceUpload(record) {
    openInvoiceUpload(true, {
      data: record,
    });
  }
  function handleDelete(record) {
    const id: string[] = Array.isArray(record.id) ? record.id : [record.id];
    checkDelete({ ids: id });
    setTimeout(() => {
      reload();
    }, 50);
  }
  function handleInvoiceShow(record) {
    openInvoiceShow(true, {
      data: record,
    });
  }
  function handleDeductShow(record) {
    openDeductShow(true, {
      data: record,
    });
  }
  function handleDetail(record) {
    openCheckDetail(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}`;
    // })();
    // checkCommit({ id: record.id, actualPayedDate: currentDate });
    openCommit(true, {
      data: record,
    });
  }
  function handleEditRefundTime(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}`;
    // })();
    // checkCommit({ id: record.id, actualPayedDate: currentDate });
    openEditRefundTime(true, {
      data: record,
    });
  }

  const { createMessage } = useMessage();
  const { error } = createMessage;
  function handleCheckSum(record) {
    if (checkedKeys.value.length == 0) {
      error('请选择订单');
      return;
    }
    if (selectedProductionDepartment.value.length > 1) {
      error('勾选订单的生产科需一致');
      return;
    }
    openCheckSum(true, {
      data: checkedKeys.value,
    });
  }
  function handleSuccess() {
    setTimeout(() => {
      reload();
    }, 150);
  }
</script>