General-AI-Platform-Web/src/pages/Setting/components/AlarmSetForm.tsx

import {
  ProForm,
  ProFormCheckbox,
  ProFormDependency,
  ProFormGroup,
  ProFormList,
  ProFormRadio,
  ProFormSelect,
  ProFormSwitch,
} from '@ant-design/pro-components';
import { Form } from 'antd';
import type { NamePath } from 'antd/lib/form/interface';
import { useEffect } from 'react';
type AlarmSetFormProps = {
  values?: Record<string, any>;
};
const AlarmSetForm: React.FC<AlarmSetFormProps> = (props) => {
  const [form] = Form.useForm<API.DeviceCategory>();

  const initialValues = {
    label: 1,
    value: 2,
  };
  const depName1: NamePath[] = [['ways']];

  useEffect(() => {
    form.setFieldValue('ways', [
      {
        label: '短信',
        value: [],
        isChecked: true,
      },
      {
        label: '邮件',
        value: [],
        isChecked: false,
      },
    ]);
  }, []);
  return (
    // TODO 模拟提交告警设置
    <ProForm form={form} initialValues={initialValues} >
      <ProFormGroup>
        <ProFormGroup title="通知方式">
          <ProFormList
            name={['ways']}
            creatorButtonProps={false}
            copyIconProps={false}
            deleteIconProps={false}
          >
            {(f, index, action) => {
              console.log('isChecked_value', f, index, action);
              return (
                <ProFormGroup key="group">
                  {/* <Checkbox checked={false}>
                    {form.getFieldValue('ways')[index].label}{' '}
                  </Checkbox> */}

                  <ProFormSwitch name="isChecked"></ProFormSwitch>
                  <ProFormCheckbox.Group name="isChecked">
                    {form.getFieldValue('ways')[index].label}
                  </ProFormCheckbox.Group>
                  <ProFormDependency name={['isChecked']}>
                    {({ isChecked }) => {
                      return (
                        <ProFormSelect
                          mode="multiple"
                          name="value"
                          debounceTime={1000}
                          disabled={!isChecked}
                          request={async () => {
                            //   const resp = await postCurrentIP();
                            const resp = ['test001', 'test002', 'test003'];
                            return resp?.map((v: any) => {
                              return {
                                label: v,
                                value: v,
                              };
                            });
                          }}
                        />
                      );
                    }}
                  </ProFormDependency>
                  {/* <ProFormText
                    name="value"
                  /> */}
                </ProFormGroup>
              );
            }}
          </ProFormList>
        </ProFormGroup>
      </ProFormGroup>
      {/* <ProFormGroup
        title={`收集依赖值（情形1) <ProFormDependency name={${JSON.stringify(depName1)}}>`}
      >
        <ProFormDependency name={depName1}>
          {(depValues) => (
            <pre>
              <code>{JSON.stringify(depValues)}</code>
            </pre>
          )}
        </ProFormDependency>
      </ProFormGroup> */}
      <ProFormGroup title="通知频次">
        <ProFormRadio.Group
          name="type"
          initialValue={props.values?.type || '0'}
          options={[
            {
              label: '每次',
              value: '0',
            },
            {
              label: '每天',
              value: '1',
            },
            {
              label: '每周',
              value: '2',
            },
            {
              label: '每月',
              value: '3',
            },
          ]}
        ></ProFormRadio.Group>
      </ProFormGroup>
    </ProForm>
  );
};

export default AlarmSetForm;