canrd-outside / order-erp-front · Files

<template>
  <BasicTable @register="registerTable" className="p-0">
    <template #form-custom> custom-slot </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'picUrl'">
        <img
          :width="50"
          :height="50"
          :src="record?.orderBaseInfo?.smallPicUrl"
          @click="handlePreview(record?.orderBaseInfo?.picUrl)"
        />
      </template>
      <template v-if="column.key === 'action'">
        <TableAction
          v-if="!isApproved"
          :actions="[
            {
              label: '审核',
              // icon: 'ic:outline-delete-outline',
              onClick: handleDetail.bind(null, record),
            },
          ]"
        />
        <TableAction
          v-if="isApproved"
          :actions="[
            {
              label: '详情',
              // icon: 'ic:outline-delete-outline',
              onClick: handleDetail.bind(null, record),
            },
          ]"
        />
      </template>
    </template>
  </BasicTable>
  <BasicModal
    :formFooter="!isApproved && role === ROLE.ADMIN"
    @register="registerModal"
    title="申请信息"
    okText="通过"
    width="1000px"
    @ok="handleTrue"
    @visible-change="handleShow"
    :showCancelBtn="!isApproved && role === ROLE.ADMIN"
    :showOkBtn="!isApproved && role === ROLE.ADMIN"
  >
    <!-- <Description
      class="mt-4"
      layout="vertical"
      :collapseOptions="{ canExpand: true, helpMessage: 'help me' }"
      :column="2"
      :data="mockData"
      :schema="schema"
    /> -->
    <table
      v-if="!showInvoice"
      style="
        width: 100%;
        border-collapse: collapse;
        text-align: center;
        border: 1px solid black;
        font-size: 16px;
      "
    >
      <thead>
        <!-- <tr>
          <th colspan="4" style="border: 1px solid black">净利润分析表</th>
        </tr> -->
      </thead>
      <tbody>
        <tr
          ><td colspan="7" style="text-align: center; font-weight: bold; font-size: 24px"
            >收款单</td
          ></tr
        >
        <tr>
          <td style="border: 1px solid black; width: 14%">Invoice编号</td>
          <td style="border: 1px solid black; width: 14%">实际收款金额汇总</td>
          <td style="border: 1px solid black; width: 14%">客户总价金额汇总</td>
          <td style="border: 1px solid black; width: 14%">发生扣款金额汇总</td>
          <td style="border: 1px solid black; width: 14%">必须回款日期</td>
          <td style="border: 1px solid black; width: 14%">实际回款日期</td>
          <td style="border: 1px solid black; width: 14%">其他费用汇总</td>
        </tr>
        <tr>
          <td style="border: 1px solid black; width: 14%">{{ invoiceNo }}</td>
          <td style="border: 1px solid black; width: 14%">${{ totalPayAmount }}</td>
          <td style="border: 1px solid black; width: 14%">${{ totalCustomerAmount }}</td>
          <td style="border: 1px solid black; width: 14%">${{ deductAmount }}</td>
          <td style="border: 1px solid black; width: 14%">{{ backRefundDate }}</td>
          <td style="border: 1px solid black; width: 14%">{{ actualRefundDate }}</td>
          <td style="border: 1px solid black; width: 14%">${{ otherAmount }}</td>
        </tr>
        <tr>
          <td colspan="7" style="border: 1px solid black; padding: 10px">
            <div style="display: flex; justify-content: space-between">
              <span style="width: 20%">收款单位：</span>
              <span style="width: 80%">
                {{ payee }}
              </span>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <template #appendFooter>
      <a-button v-if="!isApproved && role === ROLE.ADMIN" @click="handleFalse"> 不通过</a-button>
      <a-button @click="handleExport"> 导出</a-button>
    </template>
  </BasicModal>
  <MsgModal v-if="msgVisible" @msg-modal-close="handleMsgModalClose" />
</template>
<script lang="ts">
  import MsgModal from './MsgModal.vue';
  import { computed, defineComponent, ref } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { BasicModal, useModal } from '/@/components/Modal';
  import axios from 'axios';

  import { approveAuditApi, getApprovedListApi, getWaitListApi } from '/@/api/project/approve';
  import { FIELDS_BASE_INFO, FIELDS_PROFIT_INFO, FIELDS_REPORT_INFO } from '../order/tableData';
  import { ROLE } from '../order//type.d';
  import { useUserStoreWithOut } from '/@/store/modules/user';
  import BaseInfo from './BaseInfo.vue';
  import { createImgPreview } from '/@/components/Preview';
  import { getFormConfig } from './data';
  import { Description, DescItem, useDescription } from '@/components/Description';

  const userStore = useUserStoreWithOut();

  export default defineComponent({
    components: {
      BasicTable,
      BasicModal,
      TableAction,
      Description,
      BaseInfo,
      MsgModal,
    },
    props: {
      isApproved: { type: Boolean },
    },
    setup(props) {
      // visible 用于msgModal显示隐藏
      const msgVisible = ref(false);
      const checkedKeys = ref<Array<string | number>>([]);
      const currentKey = ref('1');
      const [registerModal, { openModal, closeModal }] = useModal();
      const fieldInfos = ref({});
      const baseInfos = ref({});
      const id = ref('');
      const invoiceNo = ref(); // 实际收款金额汇总
      const totalPayAmount = ref(); // 实际收款金额汇总
      const totalCustomerAmount = ref(); // 客户总价金额汇总
      const deductAmount = ref(); // 发生扣款金额汇总
      const backRefundDate = ref(); // 必须回款日期
      const actualRefundDate = ref(); // 实际回款日期
      const otherAmount = ref(); // 其他费用汇总
      const payee = ref(); // 其他费用汇总

      const mockData = ref();
      const schema: DescItem[] = [
        {
          field: 'totalPayAmount',
          label: '实际收款金额汇总',
        },
        {
          field: 'totalCustomerAmount',
          label: '客户总价金额汇总',
        },
        {
          field: 'deductAmount',
          label: '发生扣款金额汇总',
        },
        {
          field: 'backRefundDate',
          label: '必须回款日期',
        },
        {
          field: 'actualRefundDate',
          label: '实际回款日期',
        },
        {
          field: 'otherAmount',
          label: '其他费用汇总',
        },
      ];
      // const [register] = useDescription({
      //   title: 'useDescription',
      //   data: mockData,
      //   schema: schema,
      // });

      let columns = [
        {
          title: '申请人',
          dataIndex: 'createBy',
          width: 150,
        },
        {
          title: 'INVOICE编号',
          dataIndex: 'invoiceNo',
          width: 150,
          customRender: (column) => {
            const { record } = column || {};
            return record?.fieldInfos?.invoiceBillOrderDO?.invoiceNo;
          },
        },
        {
          title: '内部编号',
          dataIndex: 'innerNo',
          width: 150,
          customRender: (column) => {
            const { record } = column || {};
            return record?.orderBaseInfo?.innerNo;
          },
        },
        // {
        //   title: '内部编号',
        //   dataIndex: 'innerNo',
        //   width: 150,
        //   customRender: (column) => {
        //     const { record } = column || {};
        //     return record?.fieldInfos?.invoiceBillOrderDO?.innerNo;
        //   },
        // },
      ];

      if (props.isApproved) {
        columns = columns.concat([
          {
            title: '状态',
            dataIndex: 'status',
            width: 150,
            customRender: (column) => {
              const { record } = column || {};

              return record.status === 10 ? '通过' : '拒绝';
            },
          },
          { title: '拒绝原因', dataIndex: 'refuseRemark', width: 250 },
        ]);
      }

      const [registerTable, { reload }] = useTable({
        api: props.isApproved ? getApprovedListApi : getWaitListApi,
        searchInfo: { type: 30 },
        // scroll: {
        //   scrollToFirstRowOnChange: true,
        // },
        columns,
        useSearchForm: true,
        formConfig: getFormConfig(),
        rowKey: 'id',
        actionColumn: {
          width: 160,
          title: 'Action',
          dataIndex: 'action',
          // slots: { customRender: 'action' },
        },
      });

      function onSelect(record, selected) {
        if (selected) {
          checkedKeys.value = [...checkedKeys.value, record.id];
        } else {
          checkedKeys.value = checkedKeys.value.filter((id) => id !== record.id);
        }
      }
      function onSelectAll(selected, selectedRows, changeRows) {
        const changeIds = changeRows.map((item) => item.id);
        if (selected) {
          checkedKeys.value = [...checkedKeys.value, ...changeIds];
        } else {
          checkedKeys.value = checkedKeys.value.filter((id) => {
            return !changeIds.includes(id);
          });
        }
      }
      function handleEdit(record, e) {
        e?.stopPropagation();
        return false;
      }

      function handleProfitModal() {}

      async function handleDetail(data) {
        openModal(true, { data });
        mockData.value = data.fieldInfos.invoiceBillOrderDO;
        id.value = data.id;
        totalPayAmount.value = mockData.value.totalPayAmount;
        totalCustomerAmount.value = mockData.value.totalCustomerAmount;
        deductAmount.value = mockData.value.deductAmount;
        backRefundDate.value = mockData.value.backRefundDate;
        actualRefundDate.value = mockData.value.actualRefundDate;
        otherAmount.value = mockData.value.otherAmount;
        invoiceNo.value = mockData.value.invoiceNo;
        payee.value = mockData.value.payee;
      }

      async function handleTrue() {
        await approveAuditApi({ status: 10, id: id.value });
        reload();
        closeModal();
      }

      async function handleFalse() {
        msgVisible.value = true;
        // await approveAuditApi({ status: 20, id: id.value });
        // reload();
        // closeModal();
      }

      function handleShow(visible: boolean) {
        if (!visible) {
        }
      }

      const role = computed(() => {
        return userStore.getUserInfo?.roleSmallVO?.code;
      });

      // 定义MsgModalClose的事件，方便子组件调用
      const handleMsgModalClose = async (data) => {
        if (data) {
          await approveAuditApi({ status: 20, id: id.value, refuseRemark: data });
          reload();
          closeModal();
        }
        msgVisible.value = false;
      };

      const handlePreview = (url) => {
        createImgPreview({ imageList: [url], defaultWidth: 500 });
        return false;
      };

      // 定义处理导出的函数
      const handleExport = async () => {
        try {
          console.log(payee.value, '5656payee.value');
          const response = await axios.post(
            '/basic-api/order/erp/invoice_bill/exportReceipt',
            {
              invoiceNo: invoiceNo.value,
              totalPayAmount: totalPayAmount.value,
              totalCustomerAmount: totalCustomerAmount.value,
              deductAmount: deductAmount.value,
              backRefundDate: backRefundDate.value,
              actualRefundDate: actualRefundDate.value,
              otherAmount: otherAmount.value,
              payee: payee.value,
            },
            {
              responseType: 'blob', // 设置响应类型为 'blob'
            },
          );

          // 创建一个 Blob 对象来保存二进制数据
          const blob = new Blob([response.data], { type: 'application/octet-stream' });

          // 获取格式化的当前日期
          const getFormattedDate = () => {
            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');
            return `${year}-${month}-${day} ${hours}:${minutes}`;
          };

          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);
        }
      };

      return {
        handleProfitModal,
        registerTable,
        checkedKeys,
        currentKey,
        onSelect,
        handleEdit,
        onSelectAll,
        handleDetail,
        registerModal,
        fieldInfos,
        baseInfos,
        handleTrue,
        handleFalse,
        role,
        ROLE,
        msgVisible,
        handleMsgModalClose,
        handlePreview,
        mockData,
        schema,
        totalPayAmount,
        totalCustomerAmount,
        deductAmount,
        backRefundDate,
        actualRefundDate,
        otherAmount,
        invoiceNo,
        payee,
        handleExport,
        handleShow,
      };
    },
  });
</script>