canrd-main / canrd-erp-front · Files

import {
  postOrderErpOrderStagesAdd,
  postOrderErpOrderStagesPayWaySaveOrUpdate,
  postOrderErpOrderStagesSearch,
  postOrderErpOrderStagesUpload,
} from '@/services';
import { PlusOutlined } from '@ant-design/icons';
import {
  ModalForm,
  ProCard,
  ProForm,
  ProFormDatePicker,
  ProFormText,
  ProFormTextArea,
  ProFormUploadButton,
} from '@ant-design/pro-components';
import { Button, Form, message } from 'antd';
import { RcFile } from 'antd/es/upload';
import { useEffect, useState } from 'react';
import PayWayDetail from '../payWayDetail/payWayDetail';
import ProductDetail from '../productDetail/productDetail';

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

export default ({ toReload }) => {
  const [form] = Form.useForm<{ name: string; company: string }>();
  const [contextBody, setContextBody] = useState<OrderStagesWithListItem>({
    id: undefined,
    contract: undefined,
    dateRange: undefined,
    terminal: undefined,
    orderStagesDeviceVoList: [],
    totalPrice: undefined,
    payWay: '30/30/30/10',
    annex: undefined,
    remark: undefined,
  });
  const [editProductBody, setEditProductBody] = useState([]);
  const [total, setTotal] = useState(0);
  const [payWayBody, setPayWayBody] = useState([]);
  const [otherBody, setOtherBody] = useState([]);
  const [isDis] = useState(true);

  type OrderStagesWithListItem = {
    //文件编号
    id?: number;
    //合同编号
    contract?: string;
    //供应商名称
    vendor?: string;
    //签合同日期
    dateRange?: Date;
    //终端名称
    terminal?: string;
    orderStagesDeviceVoList: orderStagesDevice[];
    //合同总金额
    totalPrice?: number;
    //付款方式
    payWay?: string;
    //附件
    annex?: string;
    //备注
    remark?: string;
  };

  type orderStagesDevice = {
    //设备id
    dId: number;
    //设备名称
    deviceName: string;
    //设备型号
    deviceModel: string;
    //数量
    count: number;
    //单价
    unitPrice: number;
    //总价
    price: number;
  };

  function setSave(value) {
    setOtherBody(value);
  }

  useEffect(() => {
    setContextBody({ ...contextBody, totalPrice: total });
    form.setFieldValue('totalPrice', total);
  }, [total]);

  const handleInputChange = (value: string, no: number, priceNow?: number) => {
    if (value === '') {
      message.info('请输入比例!');
    } else {
      let totalPay = 0;
      const payValue: string[] = value.split('/');
      let body:
        | ((prevState: never[]) => never[])
        | { proportion: string; payPrice: number }[] = [];
      if (no === 1) {
        if (payValue.length !== 4) {
          message.warning('比例个数总和不为4个!');
        } else {
          payValue.forEach((item) => {
            totalPay += Number(item);
          });
        }
        if (totalPay !== 100) {
          message.warning('比例总和不为100!');
        } else {
          message.success('输入有效!');
          payValue.forEach((item) => {
            body.push({
              proportion: item + '%',
              payPrice: (Number(item) * total) / 100,
            });
          });
          setPayWayBody(body);
        }
      } else {
        payValue.forEach((item) => {
          totalPay += Number(item);
        });
        payValue.forEach((item) => {
          body.push({
            proportion: item + '%',
            payPrice: (Number(item) * priceNow) / 100,
          });
        });
        setPayWayBody(body);
      }
    }
  };

  function getEditProductBody(value) {
    setEditProductBody(value);
    let price = 0;
    value.map((obj) => (price += obj.count * obj.unitPrice));
    setTotal(price);
    setContextBody({ ...contextBody, orderStagesDeviceVoList: value });
    if (contextBody.payWay === '') {
      handleInputChange('30/30/30/10', 0, price);
    } else {
      handleInputChange(contextBody.payWay, 0, price);
    }
  }

  function refresh() {
    setEditProductBody([]);
    setContextBody({
      id: undefined,
      contract: undefined,
      dateRange: undefined,
      terminal: undefined,
      orderStagesDeviceVoList: [],
      totalPrice: undefined,
      payWay: '30/30/30/10',
      annex: undefined,
      remark: undefined,
    });
    handleInputChange('30/30/30/10', 0, 0);
  }

  return (
    <ModalForm<OrderStagesWithListItem>
      title="新建"
      trigger={
        <Button
          key="button"
          icon={<PlusOutlined />}
          type="primary"
          onClick={() => refresh()}
        >
          新增
        </Button>
      }
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        if (editProductBody.length === 0) {
          message.error('请填写产品数据');
          return false;
        }
        let remakeValue = [];

        const formData = new FormData();
        let toSendEdit = {
          id: values.id || contextBody.id,
          contract: values.contract || contextBody.contract,
          vendor: values.vendor || contextBody.vendor,
          dateRange: values.dateRange || contextBody.dateRange,
          terminal: values.terminal || contextBody.terminal,
          orderStagesDeviceDoList:
            values.orderStagesDeviceVoList ||
            contextBody.orderStagesDeviceVoList,
          totalPrice: values.totalPrice || contextBody.totalPrice,
          payWay: values.payWay || contextBody.payWay,
          annex: contextBody.annex,
          remark: values.remark || contextBody.remark,
          createByName: null,
        };
        if (values.annex) {
          formData.append('file', values.annex[0].originFileObj as RcFile);
          const res = await postOrderErpOrderStagesUpload({
            data: formData,
            headers: {
              'Content-Type':
                'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
            },
          });
          if (res.data) {
            toSendEdit.annex = res.data;
          }
        }
        toSendEdit.createByName = JSON.parse(
          localStorage.getItem('userInfo'),
        ).username;
        const isSaveOrUpdate = await postOrderErpOrderStagesAdd({
          data: { ...toSendEdit },
        });

        if (isSaveOrUpdate) {
          const promises = [];

          otherBody.forEach((item) => {
            let remakeItem = {
              ossId: contextBody.id,
              number: item.id,
              dateRange: item.payDate,
              fileName: item.fileName,
              fileUrl: item.fileUrl,
            };
            // if (
            //   typeof item.fileUrl === 'object' &&
            //   item.fileUrl instanceof File
            // ) {
            //   const formData = new FormData();
            //   formData.append('file', item.fileUrl as RcFile);
            //   const uploadPromise = async () => {
            //     const res = await postOrderErpOrderStagesUpload({
            //       data: formData,
            //       headers: {
            //         'Content-Type':
            //           'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
            //       },
            //     });
            //     if (res.data) {
            //       remakeItem.fileUrl = res.data;
            //     }
            //   };
            //   promises.push(uploadPromise());
            // }
            remakeValue.push(remakeItem);
          });

          let makeEnd = [];
          const getRetrunIDPromise = async () => {
            let returnOssID = await postOrderErpOrderStagesSearch({
              data: { contract: values.contract || contextBody.contract },
            });
            if (returnOssID) {
              makeEnd = remakeValue.map((item) => {
                return { ...item, ossId: returnOssID.data.data[0].id };
              });
            }
          };

          promises.push(getRetrunIDPromise());
          Promise.all(promises).then(async () => {
            await postOrderErpOrderStagesPayWaySaveOrUpdate({
              data: makeEnd,
            });
          });
          toReload();
        }
        await waitTime(2000);
        message.success('提交成功');
        return true;
      }}
    >
      <ProCard title="基本信息" headerBordered bordered>
        <ProForm.Group>
          <ProFormText
            width="md"
            name="vendor"
            rules={[{ required: true, message: '此项为必填项' }]}
            label="供应商名称"
            placeholder="请输入"
            initialValue={contextBody.vendor}
          />

          <ProFormText
            width="md"
            name="terminal"
            rules={[{ required: true, message: '此项为必填项' }]}
            label="终端名称"
            placeholder="请输入"
            initialValue={contextBody.terminal}
          />

          <ProFormDatePicker
            name="dateRange"
            width="md"
            label="签合同日期"
            placeholder="请选择日期"
            fieldProps={{
              format: (value) => value.format('YYYY-MM-DD'),
            }}
            initialValue={contextBody.dateRange}
          />

          <ProFormText
            width="md"
            name="payWay"
            rules={[{ required: true, message: '此项为必填项' }]}
            label="付款比例"
            placeholder="请输入"
            initialValue={contextBody.payWay}
            disabled={!isDis}
            onBlur={(e) => {
              setContextBody({ ...contextBody, payWay: e.target.value });
              handleInputChange(e.target.value, 1);
            }}
          />

          <ProFormText
            width="md"
            name="contract"
            rules={[{ required: true, message: '此项为必填项' }]}
            label="合同编号"
            placeholder="请输入"
            initialValue={contextBody.contract}
          />

          <ProFormUploadButton
            width="md"
            name="annex"
            max={1}
            label="合同附件"
          />

          <ProFormText
            width="md"
            name="totalPrice"
            label="合同金额"
            placeholder="请输入"
            disabled={isDis}
            initialValue={'0'}
          />
        </ProForm.Group>
      </ProCard>
      <ProCard
        title={
          <>
            <span style={{ color: 'red' }}>*</span>产品明细
          </>
        }
        style={{ marginTop: 10 }}
        headerBordered
        bordered
      >
        <ProductDetail
          productBody={[]}
          EditProductBody={getEditProductBody}
        ></ProductDetail>
      </ProCard>

      <ProCard
        title="付款信息"
        style={{ marginTop: 10 }}
        headerBordered
        bordered
      >
        <PayWayDetail
          payBody={payWayBody}
          thisId={null}
          currtSave={setSave}
        ></PayWayDetail>
      </ProCard>

      <ProCard style={{ marginTop: 10 }} headerBordered bordered>
        <ProFormTextArea
          label="备注"
          name="remark"
          initialValue={contextBody.remark}
        />
      </ProCard>
    </ModalForm>
  );
};