canrd-main / canrd-erp-front · Files

import { postOrderErpOrderStagesPayWaySelect } from '@/services';
import type { ProColumns } from '@ant-design/pro-components';
import {
  EditableProTable,
  ProFormDatePicker,
  ProFormRadio,
  ProFormUploadButton,
} from '@ant-design/pro-components';
import { message } from 'antd';
import React, { useEffect, useState } from 'react';
import './payWayDetail.less';

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

type DataSourceType = {
  id: number;
  payStep?: string;
  proportion?: string;
  ossId?: number;
  payPrice?: number;
  payDate?: Date;
  fileName?: string;
  fileUrl?: string;
};

export default ({ payBody, thisId, currtSave }) => {
  const defaultData: DataSourceType[] = [
    {
      id: 1,
      payStep: '预付款',
      proportion: undefined,
      payPrice: undefined,
      ossId: undefined,
      payDate: undefined,
      fileName: undefined,
      fileUrl: undefined,
    },
    {
      id: 2,
      payStep: '发贷款',
      proportion: undefined,
      payPrice: undefined,
      ossId: undefined,
      payDate: undefined,
      fileName: undefined,
      fileUrl: undefined,
    },
    {
      id: 3,
      payStep: '验收款',
      proportion: undefined,
      payPrice: undefined,
      ossId: undefined,
      payDate: undefined,
      fileName: undefined,
      fileUrl: undefined,
    },
    {
      id: 4,
      payStep: '质保金',
      proportion: undefined,
      payPrice: undefined,
      ossId: undefined,
      payDate: undefined,
      fileName: undefined,
      fileUrl: undefined,
    },
  ];

  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
  const [position, setPosition] = useState<'top' | 'bottom' | 'hidden'>(
    'hidden',
  );
  const [payWayDetailBody, setPayWayDetailBody] = useState<
    readonly DataSourceType[]
  >([...defaultData]);
  // const [body, setBody] = useState([])
  const [isAccept, setIsAccept] = useState(null);
  // const [isCurrtSave, setIsCurrtSave] = useState(false);

  async function getOther(value, arr) {
    const res = await postOrderErpOrderStagesPayWaySelect({
      data: { ossId: value },
    });
    if (res.data) {
      const context = res.data;
      const remake = arr.map((obj) => {
        let currt = obj;
        context.forEach((object) => {
          if (object.number === obj.id) {
            currt = {
              ...obj,
              ossId: value,
              payDate: object.dateRange,
              fileName: object.fileName,
              fileUrl: object.fileUrl,
            };
            return currt;
          }
        });
        return currt;
      });
      setPayWayDetailBody(remake);
    }
  }

  function setPayWay(value) {
    const remakeData = payWayDetailBody.map((obj) => {
      return {
        ...obj,
        proportion: value[obj.id - 1]?.proportion,
        payPrice: value[obj.id - 1]?.payPrice,
      };
    });
    // console.log(remakeData);

    setPayWayDetailBody(remakeData);
    // console.log(thisId);

    if (thisId !== null) {
      getOther(thisId, remakeData);
    }
  }
  // useEffect(() => {
  //     getOther(thisId)
  // }, [thisId])

  useEffect(() => {
    setPayWay(payBody);
  }, [payBody]);

  // function setCurrtSave(value) {
  //     // console.log(value);
  //     setIsCurrtSave(payWayDetailBody)
  // }

  const columns: ProColumns<DataSourceType>[] = [
    {
      title: '编号',
      dataIndex: 'id',
      hideInTable: true,
      editable: false,
    },
    {
      title: '付款信息',
      dataIndex: 'payStep',
      editable: false,
    },
    {
      title: '付款比例',
      dataIndex: 'proportion',
      editable: false,
    },
    {
      title: '付款金额',
      dataIndex: 'payPrice',
      editable: false,
    },
    {
      title: '对应的订单',
      dataIndex: 'ossId',
      editable: false,
      hideInTable: true,
    },
    {
      title: '付款时间',
      dataIndex: 'payDate',
      editable: false,
      render: (text, record) => {
        const handleChange = (value) => {
          const updatedDataSource = payWayDetailBody.map((item) => {
            if (item.id === record.id) {
              return {
                ...item,
                payDate: value,
              };
            }
            return item;
          });
          // console.log(updatedDataSource);

          setPayWayDetailBody(updatedDataSource);
          currtSave(updatedDataSource);
        };

        return (
          <ProFormDatePicker
            className="dataChoose"
            initialValue={record.payDate}
            value={record.payDate}
            placeholder={'请填写时间'}
            fieldProps={{
              format: (value) => value.format('YYYY-MM-DD'),
              onChange: handleChange,
            }}
          />
        );
      },
    },
    {
      title: '付款单回执',
      dataIndex: 'fileName',
      render: (text, record) => {
        if (isAccept !== record.id) {
          if (
            typeof record.fileUrl === 'object' &&
            record.fileUrl instanceof File
          ) {
            return (
              <a onClick={() => message.error('请先保存')}>{record.fileName}</a>
            );
          } else {
            return <a href={record.fileUrl}>{record.fileName}</a>;
          }
        } else {
          return (
            <ProFormUploadButton
              name={record.id}
              onChange={(value) => {
                // console.log(value);
                // console.log(payWayDetailBody);
                let remakeBody = [];
                let remakeBodyItem = {};
                payWayDetailBody.forEach((item) => {
                  if (item.id === record.id) {
                    remakeBodyItem = {
                      ...item,
                      fileUrl: value.file.originFileObj,
                      fileName: value.file.name,
                    };
                  } else {
                    remakeBodyItem = { ...item };
                  }
                  // if (value.fileList.length == 0) {
                  //     remakeBodyItem = { ...item, fileUrl: undefined, fileName: undefined }
                  // }
                  remakeBody.push(remakeBodyItem);
                });
                setPayWayDetailBody(remakeBody);
                currtSave(remakeBody);
              }}
              width="md"
              max={1}
            />
          );
        }
      },
    },
    {
      title: '操作',
      valueType: 'option',
      width: 200,
      render: (text, record) => [
        <a
          key="editable"
          onClick={() => {
            if (isAccept !== record.id) {
              setIsAccept(record.id);
            } else {
              setIsAccept(null);
            }
          }}
        >
          {record.fileName !== undefined &&
          record.fileName !== '' &&
          record.fileName !== null
            ? '重新上传'
            : '上传回执'}
        </a>,
      ],
    },
  ];

  return (
    <>
      <EditableProTable<DataSourceType>
        rowKey="id"
        className="payway-detail-index"
        toolbar={{ style: { display: 'none' } }}
        ghost={true}
        scroll={{
          x: 960,
        }}
        recordCreatorProps={
          position !== 'hidden'
            ? {
                position: position as 'top',
                record: () => ({ id: (Math.random() * 1000000).toFixed(0) }),
              }
            : false
        }
        loading={false}
        toolBarRender={() => [
          <ProFormRadio.Group
            key="render"
            fieldProps={{
              value: position,
              onChange: (e) => setPosition(e.target.value),
            }}
          />,
        ]}
        columns={columns}
        request={payWayDetailBody}
        value={payWayDetailBody}
        onChange={(value) => {
          setPayWayDetailBody(value);
          // setCurrtSave(payWayDetailBody)
        }}
        editable={{
          type: 'multiple',
          editableKeys,
          onSave: async () => {
            // console.log(rowKey, data, row);
            await waitTime(2000);
          },
          onChange: setEditableRowKeys,
        }}
      />
    </>
  );
};