index.tsx 4.77 KB
import React, { useState, useEffect } from "react";
import { Button, Card, Form, message, Modal, Spin } from "antd";
import FullReduce from "@/pages/coupon/CouponConfig/components/FullReduce";
import * as api from "./api";

interface Props extends MktConponSpace.CouponProps {

}

export default function UpsertCoupon({ visible, onCancel, onSave, remark, disabled, confNo, limitCoupon, carSelectApi, expires, expiresDay, getCouponDetailsApi, ...others }: Props) {
  const [form] = Form.useForm();
  const [info, setInfo] = useState<MktConponSpace.ConListParams>({} as MktConponSpace.ConListParams);
  const [loading, setLoading] = useState<boolean>(false);
  const [saveLoading, setSaveLoading] = useState<boolean>(false);

  useEffect(() => {
    if (!confNo) {
      return;
    }
    getDetails(confNo);
  }, [confNo]);

  function getDetails(no: string) {
    setLoading(true);
    const detailApi = getCouponDetailsApi || api.fetchCasView;
    detailApi(no).then((res) => {
      const data = res.data || {} as any;
      setInfo(data);
      form.setFieldsValue({
        ...data,
        expires: expiresDay,
        classifyCode: data.classifyCode ? { value: data.classifyCode, label: data.classifyName } : undefined,
        exchangeTypeId: data.exchangeTypeId ? { value: data.exchangeTypeId, label: data.exchangeTypeName } : undefined,
        orgList: data.orgList ? data.orgList.map((i) => ({ value: i.orgId, label: i.orgName })) : undefined,
        amsCode: data.amsCode ? [{ code: data.amsCode, name: data.amsName, spec: data.amsSpec }] : undefined,
      });
      setLoading(false);
    }).catch((e) => {
      setLoading(false);
      message.error(e.message);
    });
  }

  function deleteItem() {
    Modal.confirm({
      title: `优惠券删除后不可恢复,是否删除该优惠券配置?`,
      okText: "确定",
      okType: "danger",
      cancelText: "取消",
      onOk: () => {
        api
          .deleteConfigList(confNo)
          .then((res) => {
            message.success("删除成功");
            onSave && onSave();
          })
          .catch((e) => {
            message.error(e.message);
          });
      },
    });
  }

  function formSubmit(fields?: any) {
    form.validateFields().then((fields) => {
      const params = {
        id: info.id,
        confNo: info.confNo,
        ...fields,
        orgList: fields.orgList ? fields.orgList.map((i: { value: any; label: any }) => ({ orgId: i.value, orgName: i.label })) : [],
        classifyCode: fields.classifyCode.value,
        classifyName: fields.classifyCode.label,
        exchangeTypeId: fields.exchangeTypeId && fields.exchangeTypeId.value,
        exchangeTypeName: fields.exchangeTypeId && fields.exchangeTypeId.label,
        schemeList: fields.schemeList ? fields.schemeList.map((i: MktConponSpace.LimitList) => ({ ...i, externalRely: i.externalRely || false })) : [],
        amsCode: fields.amsCode && fields.amsCode.map((i: { code: string; }) => i.code).join(','),
        remark,
      };
      setSaveLoading(true);
      const saveApi = others.saveChangeCouponApi || api.saveConpon;
      saveApi(params)
        .then((res) => {
          const result = {
            ...res,
            confNo: res.data && res.data.confNo || info.confNo,
            classifyCode: res.data && res.data.classifyCode,
            classifyName: params.classifyName,
            exchangeTypeId: params.exchangeTypeId,
            exchangeTypeName: params.exchangeTypeName,
            aliasName: params.aliasName,
            amount: params.amount,
            orgType: params.orgType,
            discountsType: info.discountsType,
            expires: params.expires,
            //  aliasName: params.aliasName,
          };
          message.success("保存成功");
          setInfo({});
          onCancel();
          form.resetFields();
          onSave && onSave(result);
          setSaveLoading(false);
        })
        .catch((e) => {
          message.error(e.message);
          setSaveLoading(false);
        });
    });
  }

  return (
    <Modal
      title="优惠券配置"
      visible={visible}
      width="60%"
      afterClose={() => form.resetFields()}
      confirmLoading={loading || saveLoading}
      onOk={formSubmit}
      footer={disabled && !others.changeEditKeys ? false : undefined}
      onCancel={() => { onCancel(); setInfo({}); }}
    >
      <Card>
        <Spin spinning={loading}>
          <FullReduce
            {...others}
            limitCoupon={limitCoupon}
            info={info}
            readonly={!!disabled}
            confNo={confNo}
            form={form}
            carSelectApi={carSelectApi}
            expires={expires}
            getCouponType={(pa: number) => {
              setInfo({ ...info, discountsType: pa });
            }}
          />
        </Spin>
      </Card>
    </Modal>
  );
}