pay-admin/src/pages/asset/components/modals/ServiceCreate.tsx

import {
  MyBetaModalFormProps,
  MyButtons,
  MyFormItems,
  MyModalFormProps,
  rulesHelper,
} from '@/common';
import { Apis } from '@/gen/Apis';
import { ConvenienceServicesTypeEnum } from '@/gen/Enums';
import { BetaSchemaForm } from '@ant-design/pro-components';
import { Form, message } from 'antd';
import { useRef } from 'react';

export default function Create(props: MyBetaModalFormProps) {
  const [form] = Form.useForm();
  const actionRef = useRef<any>();

  return (
    <BetaSchemaForm<ApiTypes.Common.ConvenienceServices.Store>
      {...MyModalFormProps.props}
      title={`添加便民服务`}
      wrapperCol={{ span: 24 }}
      width="600px"
      trigger={<MyButtons.Create title={`添加便民服务`} />}
      key={new Date().getTime()}
      form={form}
      onOpenChange={(open: any) => {
        if (open) {
          form.resetFields(); // 清空表单数据
        }
      }}
      onFinish={async (values: any) => {
        try {
          // 循环调用接口为每个服务名称创建记录
          for (const service of values.services || []) {
            await Apis.Common.ConvenienceServices.Store({
              type: values.type,
              name: service.name,
              content: service.content,
              asset_projects_id: props.item?.id,
            } as any);
          }
          props.reload?.();
          message.success('添加便民服务成功');
          return true;
        } catch (error) {
          message.error('添加便民服务失败');
          return false;
        }
      }}
      columns={[
        MyFormItems.EnumRadio({
          key: 'type',
          title: '类型',
          colProps: { span: 24 },
          valueEnum: ConvenienceServicesTypeEnum,
          required: true,
        }),
        {
          valueType: 'formList',
          dataIndex: 'services',
          colProps: { span: 24 },
          title: '服务列表（可以一次性添加同一类型下的多个服务）',
          formItemProps: { ...rulesHelper.array },
          initialValue: [
            {
              name: null,
              content: [
                {
                  name: null,
                  phone: null,
                },
              ],
            },
          ],
          fieldProps: {
            actionRef: actionRef,
            copyIconProps: false,
            creatorButtonProps: {
              creatorButtonText: '添加主服务',
              style: {
                backgroundColor: '#1890FF',
                // borderColor: '#00000',
                borderStyle: 'solid',
                // borderWidth: '2px',
                color: '#FFFFFF',
                marginTop: '10px',
              },
            },
          },
          columns: [
            {
              valueType: 'group',
              colProps: { span: 24 },
              fieldProps: {
                style: {
                  border: '1px solid #d9d9d9',
                  borderRadius: '8px',
                  padding: '20px',
                  marginBottom: '10px',
                },
              },
              columns: [
                {
                  key: 'name',
                  colProps: { span: 24 },
                  formItemProps: { ...rulesHelper.text },
                  fieldProps: {
                    addonBefore: '主服务名称',
                  },
                },
                {
                  valueType: 'formList',
                  dataIndex: 'content',
                  title: '主服务名称',
                  formItemProps: {
                    ...rulesHelper.array,
                    style: {
                      borderRadius: '6px',
                      marginBottom: 0,
                    },
                  },
                  initialValue: [
                    {
                      name: null,
                      phone: null,
                    },
                  ],
                  fieldProps: {
                    copyIconProps: false,
                    creatorButtonProps: {
                      creatorButtonText: '添加子服务',
                      style: {
                        color: '#1890FF',
                      },
                    },
                  },
                  columns: [
                    {
                      valueType: 'group',
                      colProps: { span: 24 },
                      columns: [
                        {
                          key: 'name',
                          colProps: { span: 12 },
                          fieldProps: {
                            addonBefore: '子服务名称',
                          },
                          formItemProps: { ...rulesHelper.text },
                        },
                        {
                          key: 'phone',
                          colProps: { span: 12 },
                          fieldProps: {
                            addonBefore: '联系电话',
                          },
                          formItemProps: { ...rulesHelper.text },
                        },
                      ],
                    },
                  ],
                },
              ],
            },
          ],
        },
      ]}
    />
  );
}