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" />

        <Note @register="registerNote" @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),
                    },
                  ]
                : []),

              {
                label: '添加备注',
                onClick: handleNote.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 Note from './Note.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 [registerNote, { openModal: openNote }] = 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);
        }
      }
    }
  }

  // 全选函数
  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);
          }
        }
      });
    }

  }

  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 handleNote(record) {
    openNote(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>