pay-admin/src/pages/moments/list/modals/Create.tsx

import {
  MyBetaModalFormProps,
  MyButtons,
  MyFormItems,
  MyModalFormProps,
  rulesHelper,
} from '@/common';
import { MomentSelect } from '@/components/MomentCategories';
import { MyModal } from '@/components/MyModal';
import { Selects } from '@/components/Select';
import MyTransferProject from '@/components/TransferProject';
import { Apis } from '@/gen/Apis';
import {
  CustomerMomentsChannelEnum,
  CustomerMomentsContentTypeEnum,
  CustomerMomentsPushTypeEnum,
  CustomerMomentsRangeTypeEnum,
  CustomerMomentsTaskEndTypeEnum,
} from '@/gen/Enums';
import { BetaSchemaForm } from '@ant-design/pro-components';
import { Button, Form, message, Space, Steps } from 'antd';
import { useRef, useState } from 'react';
import MyinfoPreview from '../components/infoPreview';

export default function Create(props: MyBetaModalFormProps) {
  const [current, setCurrent] = useState(0);
  const [getContentType, setContentType] = useState('');
  const [formData, setFormData] = useState<any>({});
  const [form] = Form.useForm();
  const modalRef: any = useRef(null);
  const steps = [
    {
      title: '创建任务',
      columns: [
        MyFormItems.EnumRadio({
          key: 'channel',
          title: '发送渠道',
          valueEnum: CustomerMomentsChannelEnum,
          required: true,
        }),
        Selects?.Companies({
          key: 'companies_id',
          title: '公司',
          colProps: { span: 24 },
          required: true,
        }),
        MomentSelect.MomentCategoriesSelect({
          title: '内容分类',
          formItemProps: { ...rulesHelper.array },
        }),
        {
          valueType: 'group',
          colProps: { span: 24 },
          columns: [
            MyFormItems.EnumRadio({
              key: 'push_type',
              title: '推送类型',
              valueEnum: CustomerMomentsPushTypeEnum,
              required: true,
              colProps: { span: 9 },
            }),
            {
              name: ['push_type'],
              valueType: 'dependency',
              columns: ({ push_type }: any) => {
                return push_type === 'ScheduledPush'
                  ? [
                      {
                        key: 'scheduled_time',
                        title: '定时发送时间',
                        valueType: 'dateTime',
                        colProps: { span: 10 },
                      },
                    ]
                  : [];
              },
            },
          ],
        },
        {
          valueType: 'group',
          colProps: { span: 24 },
          columns: [
            MyFormItems.EnumRadio({
              key: 'task_end_type',
              title: '任务结束类型',
              valueEnum: CustomerMomentsTaskEndTypeEnum,
              required: true,
              colProps: { span: 9 },
            }),
            {
              name: ['task_end_type'],
              valueType: 'dependency',
              columns: ({ task_end_type }: any) => {
                return task_end_type === 'AfterNDays'
                  ? [
                      {
                        key: 'task_days',
                        title: '任务结束天数',
                        colProps: { span: 10 },
                        valueType: 'digit',
                        formItemProps: { ...rulesHelper.number },
                        fieldProps: {
                          suffix: '天结束',
                          style: { width: '200px' },
                        },
                      },
                    ]
                  : task_end_type === 'ScheduledEnd'
                  ? [
                      {
                        key: 'task_end_time',
                        title: '定时结束',
                        valueType: 'dateTime',
                        formItemProps: { ...rulesHelper.text },
                        colProps: { span: 10 },
                      },
                    ]
                  : [];
              },
            },
          ],
        },
        MyFormItems.EnumSelect({
          key: 'range_type',
          title: '范围类型',
          valueEnum: CustomerMomentsRangeTypeEnum,
          required: true,
        }),

        {
          name: ['range_type'],
          valueType: 'dependency',
          columns: ({ range_type }: any) => {
            return range_type === 'Project'
              ? [
                  {
                    key: 'range_data',
                    title: '选择范围',
                    colProps: { span: 24 },
                    formItemProps: { ...rulesHelper.array },
                    renderFormItem: () => <MyTransferProject />,
                  },
                ]
              : [];
          },
        },
      ],
    },
    {
      title: '创建内容',
      columns: [
        MyFormItems.EnumRadio({
          key: 'content_type',
          title: '内容类型',
          valueEnum: CustomerMomentsContentTypeEnum,
          required: true,
          colProps: { span: 24 },
        }),

        {
          key: 'skip_url',
          title: '链接',
          formItemProps: { ...rulesHelper.text },
          colProps: { span: 12 },
        },
        {
          key: 'title',
          title: '标题',
          formItemProps: { ...rulesHelper.text },
          colProps: { span: 12 },
        },
        {
          name: ['content_type'],
          valueType: 'dependency',
          columns: ({ content_type }: any) => {
            setContentType(content_type);
            return content_type === 'MiniProgram'
              ? [
                  {
                    key: 'mini_program_app_id',
                    title: '小程序APPID',
                    formItemProps: { ...rulesHelper.text },
                    colProps: { span: 24 },
                  },
                ]
              : [];
          },
        },
        {
          key: 'content',
          title: '内容',
          valueType: 'textarea',
          colProps: { span: 24 },
          formItemProps: { ...rulesHelper.text },
        },
        {
          key: 'desc',
          title: '描述',
          valueType: 'textarea',
          colProps: { span: 24 },
        },
        MyFormItems.UploadImages({
          key: 'cover_image',
          title: '封面',
          max: 1,
        }),
        MyFormItems.UploadImages({
          key: 'attachments',
          title: '附件',
          uploadType: 'file',
          max: 100,
          colProps: { span: 12 },
        }),
      ],
    },
  ];

  const handleNext = async () => {
    // 这里可以添加表单验证逻辑
    if (current < steps.length - 1) {
      setCurrent(current + 1);
    }
  };

  // 处理上一步
  const handlePrev = () => {
    if (current > 0) {
      setCurrent(current - 1);
    }
  };

  return (
    <MyModal
      title={`创建${props.title}`}
      type="primary"
      size={'middle'}
      myRef={modalRef}
      width="1200px"
      node={
        <Space direction="vertical">
          <div style={{ width: '1160px' }}>
            <Steps
              style={{ padding: '50px 150px 30px 150px' }}
              current={current}
              items={steps}
            />
          </div>
          <Space align="start">
            <div style={{ width: '700px' }}>
              <BetaSchemaForm<ApiTypes.Customer.CustomerMomentCategories.Store>
                {...MyModalFormProps.props}
                title={`添加${props.title}`}
                wrapperCol={{ span: 24 }}
                width="800px"
                form={form}
                layoutType="Form"
                trigger={<MyButtons.Create title={`添加${props.title}`} />}
                onFinish={async (values) => {
                  setFormData(values);
                  if (current < steps.length - 1) {
                    handleNext();
                  } else {
                    let data = { ...formData, ...values };
                    Apis.Customer.CustomerMoments.Store({
                      ...data,
                      one_moment_categories_id:
                        formData?.moment_categories_ids[0],
                      two_moment_categories_id:
                        formData?.moment_categories_ids[1],
                    })
                      .then(() => {
                        props.reload?.();
                        message.success('提交成功！');
                        form.setFieldsValue({});
                        modalRef.current?.close();
                        setCurrent(0);
                        return true;
                      })
                      .catch(() => false);
                  }
                }}
                columns={steps[current].columns}
                submitter={{
                  render: (props) => {
                    return (
                      <Space
                        style={{ display: 'flex', justifyContent: 'flex-end' }}
                      >
                        {current > 0 && (
                          <Button onClick={handlePrev}>上一步</Button>
                        )}
                        {current < steps.length - 1 ? (
                          <Button
                            type="primary"
                            onClick={() => props.form?.submit?.()}
                          >
                            下一步
                          </Button>
                        ) : (
                          <Button
                            type="primary"
                            onClick={() => props.form?.submit?.()}
                          >
                            提交
                          </Button>
                        )}
                      </Space>
                    );
                  },
                }}
              />
            </div>
            {current ? <MyinfoPreview item={{ type: getContentType }} /> : ''}
          </Space>
        </Space>
      }
    />
  );
}