pay-company/src/pages/marketing/ad/modals/BannerCreate.tsx

import {
  MyBetaModalFormProps,
  MyButtons,
  MyFormItems,
  MyModalFormProps,
  rulesHelper,
} from '@/common';
import { Selects } from '@/components/Select';
import { Apis } from '@/gen/Apis';
import { BannersRedirectTypeEnum, BannersTypeEnum } from '@/gen/Enums';
import { BetaSchemaForm } from '@ant-design/pro-components';
import { Form, message } from 'antd';

export default function Create(props: MyBetaModalFormProps) {
  const [form] = Form.useForm();
  return (
    <BetaSchemaForm<ApiTypes.Banner.Banners.Store>
      {...MyModalFormProps.props}
      title={`添加Banner`}
      wrapperCol={{ span: 19 }}
      width="600px"
      layout="horizontal"
      labelCol={{ span: 5 }}
      labelAlign="left"
      key={new Date().getTime()}
      trigger={<MyButtons.Create title={`添加Banner`} />}
      form={form}
      onOpenChange={(open: any) => {
        if (open) {
          form.resetFields(); // 清空表单数据
          form.setFieldsValue({
            banner_spaces_id: props.item?.banner_spaces_id,
          });
        }
      }}
      onFinish={async (values: any) =>
        Apis.Banner.Banners.Store(values)
          .then(() => {
            props.reload?.();
            message.success('添加广告内容成功');
            return true;
          })
          .catch(() => false)
      }
      columns={[
        Selects?.GetBannerSpace({
          key: 'banner_spaces_id',
          title: '投放位置',
          colProps: { span: 24 },
          formItemProps: { ...rulesHelper.text },
          fieldProps: {
            showSearch: true,
            optionFilterProp: 'label',
          },
        }),
        {
          key: 'name',
          title: 'Banner名称',
          colProps: { span: 24 },
          formItemProps: { ...rulesHelper.text },
        },
        {
          valueType: 'group',
          columns: [
            MyFormItems.EnumRadio({
              key: 'type',
              title: '展示类型',
              colProps: { span: 24 },
              valueEnum: BannersTypeEnum,
              required: true,
            }),
            {
              name: ['type'],
              valueType: 'dependency',
              columns: ({ type }: any) => {
                return type === 'Text'
                  ? [
                      {
                        title: '文本内容',
                        key: ['source', 0, 'text'],
                        colProps: { span: 24 },
                        formItemProps: { ...rulesHelper.text },
                      },
                    ]
                  : type === 'Image'
                  ? [
                      MyFormItems.UploadImages({
                        key: 'source',
                        title: '广告图片',
                        uploadType: 'file',
                        max: 1,
                        colProps: { span: 24 },
                        formItemProps: { ...rulesHelper.text },
                      }),
                    ]
                  : type === 'Video'
                  ? [
                      MyFormItems.UploadImages({
                        key: 'source',
                        title: '广告视频',
                        uploadType: 'file',
                        max: 1,
                        colProps: { span: 24 },
                        formItemProps: { ...rulesHelper.text },
                      }),
                    ]
                  : [];
              },
            },
          ],
        },
        MyFormItems.EnumRadio({
          key: 'redirect_type',
          title: '跳转类型',
          colProps: { span: 24 },
          valueEnum: BannersRedirectTypeEnum,
          required: false,
        }),
        {
          key: 'redirect_path',
          title: '跳转链接',
          colProps: { span: 24 },
          fieldProps: {
            placeholder: '请输入跳转链接',
          },
        },
        {
          name: ['redirect_type'],
          valueType: 'dependency',
          columns: ({ redirect_type }: any) => {
            return redirect_type === 'AnotherMiniProgram'
              ? [
                  {
                    title: '小程序AppID',
                    dataIndex: 'app_id',
                    colProps: { span: 24 },
                    formItemProps: { ...rulesHelper.text },
                  },
                ]
              : [];
          },
        },

        {
          key: 'start_time',
          title: '开始时间',
          valueType: 'dateTime',
          colProps: { span: 24 },
        },
        {
          key: 'end_time',
          title: '结束时间',
          valueType: 'dateTime',
          colProps: { span: 24 },
        },
        {
          key: 'sort',
          title: '排序',
          valueType: 'digit',
          colProps: { span: 24 },
          fieldProps: {
            placeholder: '数值越大越靠前',
            min: 0,
            style: { width: '100%' },
          },
          initialValue: 0,
        },
      ]}
    />
  );
}