General-AI-Platform-Web/src/pages/Alarm/AlarmWays/components/UpdateForm.tsx

/* eslint-disable @typescript-eslint/no-unused-vars */
/*
 * @Author: zhoux zhouxia@supervision.ltd
 * @Date: 2023-11-01 13:56:33
 * @LastEditors: zhoux zhouxia@supervision.ltd
 * @LastEditTime: 2023-12-28 14:38:52
 * @FilePath: \general-ai-platform-web\src\pages\Device\DeviceCategoryList\components\UpdateForm.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { postDeviceGroupGetDeviceGroupFkSelect } from '@/services/device/DeviceGroup';
import { CloseOutlined, SnippetsOutlined } from '@ant-design/icons';
import {
  ProForm,
  ProFormList,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Form } from 'antd';
import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
import {
  proFormListActionButtonProps,
  proFormListCreatorButtonProps,
  proFormSmallItemStyleProps,
} from '../../../../../config/defaultForm';
export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.DeviceCategory>;

export type UpdateFormProps = {
  ref: any;
  values: Record<string, any>;
  reload: any;
};
const UpdateForm = forwardRef((props: UpdateFormProps, ref: React.Ref<any> | undefined) => {
  const intl = useIntl();
  const [form] = Form.useForm<API.DeviceCategory>();
  //   modalProps={{
  //     destroyOnClose: true,
  //     onCancel: () => props.handleModal(),
  //   }}
  //       submitTimeout={2000}

  // 最关键的代码: 第二个参数返回一个对象 —— 定义 父组件可以调用这个组件 的方法
  const initSubmitForm = () => {
    console.log('调用子组件方法', form);
    form.submit();
  };

  useImperativeHandle(
    ref,
    () => ({
      initSubmitForm,
    }),
    [],
  );
  // 数据变更给表单设置初始值
  useEffect(() => {
    form.setFieldsValue({
      ...props.values,
    });
  }, [props.values]);

  return (
    <div>
      <ProForm
        form={form}
        autoFocusFirstInput
        submitter={{
          render: false, // 隐藏提交按钮
        }}
        onFinish={async (values) => {
          // TODO 需要对接更新告警方式接口
          console.log('onFinish_values', values);
          // putDeviceCategoryUpdateDeviceCategory(values)
          //   .then(() => {
          //     message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
          //     props.reload();
          //   })
          //   .catch(() => {
          //     message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
          //   });
          return true;
        }}
      >
        <ProFormSelect
          width={proFormSmallItemStyleProps.width}
          name="serviceName"
          label={<FormattedMessage id="alarm.ways.page.form.serviceName" defaultMessage="$$$" />}
          placeholder={`${intl.formatMessage({
            id: 'common.please_select',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'alarm.ways.page.form.serviceName',
            defaultMessage: '$$$',
          })}`}
          required={false}
          // TODO 在types中增加类型注释
          initialValue={props.values?.serviceName}
          debounceTime={1000}
          request={async () => {
            // TODO 此处需要使用告警级别接口联调
            const resp = await postDeviceGroupGetDeviceGroupFkSelect({});
            return resp.data.list.map((v: any) => {
              return {
                label: v.name,
                value: v.id,
              };
            });
          }}
        />
        <ProFormList
          style={{
            width: proFormSmallItemStyleProps.width,
          }}
          copyIconProps={{
            Icon: SnippetsOutlined,
          }}
          deleteIconProps={{
            Icon: CloseOutlined,
          }}
          initialValue={props.values?.params}
          name="params"
          label= {<span className='h3 gn'><FormattedMessage id="alarm.ways.page.form.params" defaultMessage="$$$" /></span>}

          creatorButtonProps={proFormListCreatorButtonProps}
           {
            ...proFormListActionButtonProps
           }
        >
          {(f, index, action) => {
            return (
              <div
                style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  width: proFormSmallItemStyleProps.width - 44,
                }}
              >
                <ProFormText width={229} key="name" name="name" label="键名" />
                <ProFormText width={229} key="default" name="default" label="默认值" />
              </div>
            );
          }}
        </ProFormList>
        <ProFormTextArea
          name="template"
          label={<FormattedMessage id="alarm.ways.page.form.template" defaultMessage="$$$" />}
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'alarm.ways.page.form.template',
            defaultMessage: '$$$',
          })}`}
          required={false}
          initialValue={props.values?.template}
          disabled={false}
        />
      </ProForm>
    </div>
  );
});
export default UpdateForm;