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: '任务推送方式',
              tooltip: '内容穿创建后，推送任务给员工的方式',
              valueEnum: CustomerMomentsPushTypeEnum,
              required: true,
              colProps: { span: 12 },
            }),
            {
              name: ['push_type'],
              valueType: 'dependency',
              columns: ({ push_type }: any) => {
                return push_type === 'ScheduledPush'
                  ? [
                      {
                        key: 'scheduled_time',
                        title: '定时推送时间',
                        valueType: 'dateTime',
                        colProps: { span: 12 },
                      },
                    ]
                  : [];
              },
            },
          ],
        },
        {
          valueType: 'group',
          colProps: { span: 24 },
          columns: [
            MyFormItems.EnumRadio({
              key: 'task_end_type',
              title: '任务结束类型',
              valueEnum: CustomerMomentsTaskEndTypeEnum,
              required: true,
              colProps: { span: 12 },
            }),
            {
              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: [
        {
          key: 'title',
          title: '标题',
          formItemProps: { ...rulesHelper.text },
          colProps: { span: 24 },
        },
        MyFormItems.EnumRadio({
          key: 'content_type',
          title: '内容类型',
          valueEnum: CustomerMomentsContentTypeEnum,
          required: true,
          colProps: { span: 24 },
          fieldProps: {
            onChange: (e: any) => {
              setContentType(e?.target?.value);
            },
          },
        }),
        {
          name: ['content_type'],
          valueType: 'dependency',
          columns: ({ content_type }: any) => {
            return content_type === CustomerMomentsContentTypeEnum.Image.value
              ? [
                  {
                    key: 'content',
                    title: '发送文案',
                    valueType: 'textarea',
                    colProps: { span: 24 },
                    formItemProps: { ...rulesHelper.text },
                  },
                  MyFormItems.UploadImages({
                    key: 'attachments',
                    title: '上传图片',
                    // uploadType: 'file',
                    required: true,
                    tooltip: '限9张图片10M以内',
                    max: 9,
                    colProps: { span: 24 },
                  }),
                ]
              : content_type === CustomerMomentsContentTypeEnum.Video.value
              ? [
                  {
                    key: 'content',
                    title: '发送文案',
                    valueType: 'textarea',
                    colProps: { span: 24 },
                    formItemProps: { ...rulesHelper.text },
                  },
                  MyFormItems.UploadImages({
                    key: 'attachments',
                    title: '上传视频',
                    required: true,
                    tooltip: '限1个视频10M以内，格式要求：mp4',
                    uploadType: 'video',
                    max: 1,
                    colProps: { span: 24 },
                  }),
                ]
              : content_type === CustomerMomentsContentTypeEnum.Link.value ||
                content_type ===
                  CustomerMomentsContentTypeEnum.MiniProgram.value
              ? [
                  {
                    key: 'content',
                    title: '发送文案',
                    valueType: 'textarea',
                    colProps: { span: 24 },
                    formItemProps: { ...rulesHelper.text },
                  },
                  {
                    name: ['content_type'],
                    valueType: 'dependency',
                    columns: ({ content_type }: any) => {
                      return content_type === 'MiniProgram'
                        ? [
                            {
                              key: 'mini_program_app_id',
                              title: '小程序APPID',
                              formItemProps: { ...rulesHelper.text },
                              colProps: { span: 12 },
                            },
                            {
                              key: 'skip_url',
                              title: '链接地址',
                              formItemProps: { ...rulesHelper.text },
                              colProps: { span: 12 },
                            },
                          ]
                        : [
                            {
                              key: 'skip_url',
                              title: '链接地址',
                              formItemProps: { ...rulesHelper.text },
                              colProps: { span: 24 },
                            },
                          ];
                    },
                  },

                  {
                    key: 'desc',
                    title: '链接标题',
                    colProps: { span: 24 },
                    formItemProps: { ...rulesHelper.text },
                  },
                  MyFormItems.UploadImages({
                    key: 'cover_image',
                    tooltip: '限1张图片10M以内',
                    title: '设置封面',
                    required: true,
                    max: 1,
                  }),
                ]
              : content_type === CustomerMomentsContentTypeEnum.Link.value ||
                content_type ===
                  CustomerMomentsContentTypeEnum.MiniProgram.value
              ? [
                  {
                    key: 'skip_url',
                    title: '链接',
                    formItemProps: { ...rulesHelper.text },
                    colProps: { span: 24 },
                  },
                ]
              : [];
          },
        },
      ],
    },
  ];

  const handleNext = async () => {
    // 这里可以添加表单验证逻辑
    setCurrent(1);
    console.log('next', current);
  };

  // 处理上一步
  const handlePrev = () => {
    setCurrent(0);
    console.log('Prev', current);
  };

  return (
    <MyModal
      title={`创建${props.title}`}
      type="primary"
      size={'middle'}
      myRef={modalRef}
      width="580px"
      node={
        <Space direction="vertical">
          <div style={{ width: '666px' }}>
            <Steps
              style={{ padding: '20px 200px 20px 20px' }}
              current={current}
              items={steps}
            />
          </div>
          <Space align="start">
            <div style={{ width: '500px' }}>
              <BetaSchemaForm<ApiTypes.Customer.CustomerMomentCategories.Store>
                {...MyModalFormProps.props}
                title={`添加${props.title}`}
                wrapperCol={{ span: 24 }}
                // width="1200px"
                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>
            <MyinfoPreview item={{ type: getContentType }} />
          </Space>
        </Space>
      }
    />
  );
}