FEV2 / fw-cms

import React, { useState, useEffect } from "react";
import { Button, Form, InputNumber, message, Card, Table, Space, Popconfirm, Spin, Divider, Radio, Row } from "antd";
import useInitial from "@/hooks/useInitail";
import { PlusOutlined, MinusCircleOutlined } from "@ant-design/icons";
import { saveSignUpApi, getSignUpDetail, saveChangeSignUpApi } from "../../api"; //保存报名有礼
import { useStore } from "@/pages/mkt/ActivityCreate/index";
import SignupGifts from "./SignupGifts";

export default function index() {
  const { baseInfo, readOnly, getFlowConfig, getACarList } = useStore();
  const { activityNo, bizType, changeEnable } = baseInfo;
  const { data, errMsg, loading } = useInitial(getSignUpDetail, {}, { activityNo, change: changeEnable });
  const [form] = Form.useForm();
  const [saveLoading, setSaveLoading] = useState<boolean>(false);

  useEffect(() => {
    if (!errMsg) {
      form.setFieldsValue({
        ...data,
        ladderReward: data.ladderReward != null ? Number(data.ladderReward) : 0,
        awardConfigs: data.awardConfigs ? data.awardConfigs : [{ sortOrder: 1, lotteryMinLimit: 1, awardWay: 1, gifts: [{ parcelType: 2, awardName: "报名有礼", winningNum: 100, giftItems: [] }] }]
      });
    }
  }, [data]);

  //增加名额
  function addRewardTimes(_index?: number) {
    const list = form.getFieldValue("awardConfigs");
    const pa = {
      sortOrder: list.length + 1,
      awardWay: 1,
      lotteryMinLimit: list.length ? list[list.length - 1].lotteryMaxLimit + 1 : 1,
      gifts: [{ parcelType: 2, awardName: "报名有礼", winningNum: 100, giftItems: [] }]
    };
    list.push(pa);
    form.setFieldsValue({ awardConfigs: list });
  }

  const editDisabled = (key: number) => {
    return changeEnable ? (key <= (data.awardConfigs || []).length - 1) : readOnly;
  };
  // 保存报名有礼
  const _onFinish = () => {
    form.validateFields()
      .then((fileds) => {
        const pa = {
          ...fileds,
          activityNo,
        };
        const changePa: any = {};
        if (changeEnable && pa.awardConfigs) {
          if (pa.ladderReward == 1 && pa.joinLimitNum !== pa.awardConfigs[pa.awardConfigs.length - 1].lotteryMaxLimit) {
            message.info("报名人数限制变更，请确保最后一轮奖品发放名次与限制人数保持一致", 5);
            return;

            // pa.awardConfigs.
          }
          changePa.joinLimitNum = pa.joinLimitNum;
          changePa.signUpPrice = pa.signUpPrice;
          changePa.saleOrderAmount = pa.saleOrderAmount;
          changePa.awardConfigs = pa.awardConfigs;
          changePa.activityNo = activityNo;
        }
        // 调接口保存
        setSaveLoading(true);
        const saveApi = changeEnable ? saveChangeSignUpApi : saveSignUpApi;
        saveApi(changeEnable ? changePa : pa).then((res) => {
          message.success("保存成功");
          getFlowConfig(activityNo);
        })
          .catch((err) => message.error(err.message))
          .finally(() => setSaveLoading(false));
      })
      .catch((error) => console.log(error.message));
  };

  const checkPrice = (_: any, value: number) => {
    if (value && value > 0) {
      return Promise.resolve();
    }
    return Promise.reject(new Error('请输入大于0的数'));
  };

  async function check(rule: any, value: any): Promise<any> {
    if (!value) {
      return Promise.reject(new Error(`请输入`));
    }
    const configs = form.getFieldValue('awardConfigs');
    const key = rule.field.split('.')[1];
    if (key === 0 || configs.length === 1) {
      return Promise.resolve();
    } else {
      const field = rule.field.split('.')[2];
      const currentValues = field == "lotteryMinLimit" ? (configs[key - 1] && configs[key - 1].lotteryMaxLimit || 0) : configs[key].lotteryMinLimit;
      if (field === "lotteryMinLimit" && value <= currentValues) {
        return Promise.reject(new Error(`请输入大于${currentValues}的数`));
      }
      if (field === "lotteryMaxLimit" && value < currentValues) {
        return Promise.reject(new Error(`请输入大于${currentValues}的数`));
      }
    }
  }

  function giftsCheck(rule: any, value: any): Promise<any> {
    if (!value || value[0].giftItems.length === 0) {
      return Promise.reject(new Error(`请添加优惠券`));
    }
    return Promise.resolve();
  }

  return (
    <>
      <Spin spinning={loading}>
        {errMsg ? (
          <div>{errMsg || "加载错误"}</div>
        ) : (
          <Form style={{ marginLeft: 30, width: "80%" }} onFinish={_onFinish} form={form}>
            <Form.Item
              style={{ width: "100%" }}
              rules={[{ required: true, message: "请输入报名人数" }]}
              label="报名人数限制"
              name="joinLimitNum"
            >
              <InputNumber
                min={1}
                addonAfter="人"
                style={{ width: "100%" }}
                disabled={readOnly && !changeEnable}
              />
            </Form.Item>
            <Form.Item
              style={{ width: "100%" }}
              label="报名缴纳费用"
              name="signUpPrice"
              rules={[
                {
                  required: true,
                  validator: checkPrice
                },
              ]}
            >
              <InputNumber
                precision={2}
                addonAfter="元"
                style={{ width: "100%" }}
                disabled={readOnly && !changeEnable}
              />
            </Form.Item>
            {bizType === 2 && (
              <Form.Item
                style={{ width: "80%" }}
                label="活动期间售后工单金额>"
                name="saleOrderAmount"
                rules={[
                  {
                    pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/,
                    message: "请输入大于0的数",
                  },
                ]}
              >
                <InputNumber
                  min={0}
                  precision={2}
                  addonAfter="元"
                  style={{ width: "100%" }}
                  disabled={readOnly && !changeEnable}
                />
              </Form.Item>
            )}

            {/* 优惠券部分 */}
            <Divider orientation="left">报名成功后赠送优惠券</Divider>
            <Form.Item
              style={{ width: "100%" }}
              label="发券方式"
              name="ladderReward"
              rules={[{ required: true }]}
            >
              <Radio.Group disabled={readOnly}>
                <Radio value={0}>报名成功则送相同优惠券</Radio>
                <Radio value={1}>按报名顺序不同赠送不同优惠券</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item
              noStyle
              shouldUpdate={(prevValues, currentValues) => prevValues.ladderReward !== currentValues.ladderReward}
            >
              {({ getFieldValue }) => {
                return (
                  <Form.List name="awardConfigs">
                    {(fields, { add, remove }) => {
                      const _mulLottery = form.getFieldValue("ladderReward");
                      return (
                        <>
                          {fields.map(({ key, name, ...restField }, index) => (
                            <Space
                              key={key}
                              style={{ display: "flex", marginBottom: 8 }}
                              direction="vertical"
                            >
                              <>
                                {/* 按顺序 */}
                                {!!_mulLottery && (
                                  <Divider>配置{index + 1}</Divider>
                                )}
                                {!!_mulLottery && (
                                  <>
                                    <Space key={key} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8, height: 35 }} align="baseline">
                                      <Row style={{ alignItems: 'baseline' }}>
                                        <span><span style={{ color: 'red' }}>* </span>报名成功：</span>
                                        <Form.Item
                                          {...restField}
                                          name={[name, 'lotteryMinLimit']}
                                          rules={[{ required: true, validator: check }]}
                                        >
                                          <InputNumber placeholder="请输入" disabled={readOnly} precision={0} min={1} />
                                        </Form.Item>
                                        <span>~</span>
                                        <Form.Item
                                          {...restField}
                                          name={[name, 'lotteryMaxLimit']}
                                          rules={[{ required: true, validator: check }]}
                                        >
                                          <InputNumber placeholder="请输入" disabled={!(data.awardConfigs && data.awardConfigs[index]?.changeType) && editDisabled(index)} precision={0} min={0} />
                                        </Form.Item>
                                        <span>名</span>
                                      </Row>
                                      {!editDisabled(index) && <MinusCircleOutlined onClick={() => remove(name)} style={{ color: 'red' }} />}
                                    </Space>
                                  </>
                                )}
                                <Form.Item
                                  {...restField}
                                  noStyle
                                  shouldUpdate={(prevValues, currentValues) => prevValues.awardConfigs !== currentValues.awardConfigs}
                                >
                                  {({ getFieldValue }) => {
                                    let _awardWay = getFieldValue("awardConfigs")[index];
                                    return (
                                      <Form.Item name={[name, "gifts"]} rules={[{ required: true, validator: giftsCheck }]}>
                                        <SignupGifts disabled={!_awardWay.changeType && editDisabled(index)} />
                                      </Form.Item>
                                    );
                                  }}
                                </Form.Item>
                              </>
                            </Space>
                          ))}
                          {!!_mulLottery && (
                            <Button
                              type="dashed"
                              onClick={() => addRewardTimes()}
                              block
                              icon={<PlusOutlined />}
                              disabled={readOnly && !changeEnable}
                            >
                              增加名额配置
                            </Button>
                          )}
                        </>
                      );
                    }}
                  </Form.List>
                );
              }}
            </Form.Item>
            <Form.Item style={{ marginTop: 30, textAlign: "center" }}>
              <Button
                htmlType="submit"
                type="primary"
                loading={saveLoading}
                disabled={readOnly && !changeEnable}
              >
                报名有礼保存
              </Button>
            </Form.Item>
          </Form>
        )}
      </Spin>
    </>
  );
}