pay-company/src/pages/attendance/attendance_shifts/modals/Create.tsx

import {
  MyBetaModalFormProps,
  MyButtons,
  MyFormItems,
  MyModalFormProps,
  rulesHelper,
} from '@/common';
import { Apis } from '@/gen/Apis';
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.Attendance.AttendanceShifts.Store>
      {...MyModalFormProps.props}
      title="新增班次"
      trigger={<MyButtons.Create title="新增班次" />}
      key={new Date().getTime()}
      width="800px"
      wrapperCol={{ span: 24 }}
      form={form}
      onOpenChange={(open: any) => {
        if (open) {
          form.resetFields();
        }
      }}
      onFinish={async (values: any) => {
        const formattedValues = { ...values };

        if (formattedValues.periods) {
          formattedValues.periods = formattedValues.periods.map(
            (period: any) => ({
              ...period,
              work_start_time: period.work_start_time
                ? `${period.work_start_time}:00`
                : '',
              work_end_time: period.work_end_time
                ? `${period.work_end_time}:00`
                : '',
            }),
          );
        }

        if (formattedValues.allow_checkin_start) {
          formattedValues.allow_checkin_start = `${formattedValues.allow_checkin_start}:00`;
        }
        if (formattedValues.allow_checkin_end) {
          formattedValues.allow_checkin_end = `${formattedValues.allow_checkin_end}:00`;
        }

        return Apis.Attendance.AttendanceShifts.Store({
          ...formattedValues,
          is_enabled: true,
        })
          .then(() => {
            props.reload?.();
            message.success('新增成功');
            return true;
          })
          .catch(() => false);
      }}
      columns={[
        {
          title: '班次名称',
          key: 'name',
          formItemProps: { ...rulesHelper.text },
          fieldProps: {
            placeholder: '请输入(如：早班、晚班)',
          },
        },
        {
          valueType: 'formList',
          dataIndex: 'periods',
          title: '设置需打卡时段',
          formItemProps: { ...rulesHelper.array },
          fieldProps: {
            copyIconProps: false,
          },
          columns: [
            {
              valueType: 'group',
              colProps: { span: 24 },
              columns: [
                MyFormItems.EnumSelect({
                  key: 'period_order',
                  valueEnum: {
                    1: '1',
                    2: '2',
                    3: '3',
                    4: '4',
                    5: '5',
                  },
                  required: true,
                  colProps: { span: 4 },
                }),
                {
                  key: 'work_start_time',
                  valueType: 'time',
                  fieldProps: {
                    style: { width: '100%' },
                    placeholder: '请选择班次开始时间',
                    format: 'HH:mm',
                  },
                  colProps: { span: 8 },
                  formItemProps: { ...rulesHelper.text },
                },
                {
                  key: 'work_end_time',
                  valueType: 'time',
                  fieldProps: {
                    style: { width: '100%' },
                    placeholder: '请选择班次结束时间',
                    format: 'HH:mm',
                  },
                  colProps: { span: 8 },
                  formItemProps: { ...rulesHelper.text },
                },
              ],
            },
          ],
        },
        { valueType: 'divider' },
        {
          title: '可打卡开始时间',
          key: 'allow_checkin_start',
          valueType: 'time',
          fieldProps: {
            style: { width: '100%' },
            format: 'HH:mm',
          },
          colProps: { span: 12 },
          formItemProps: { ...rulesHelper.text },
        },
        {
          title: '可打卡结束时间',
          key: 'allow_checkin_end',
          fieldProps: {
            style: { width: '100%' },
            format: 'HH:mm',
          },
          valueType: 'time',
          colProps: { span: 12 },
          formItemProps: { ...rulesHelper.text },
        },
        {
          title: '备注',
          key: 'remark',
          valueType: 'textarea',
          colProps: { span: 24 },
        },
      ]}
    />
  );
}