General-AI-Platform-Web/src/pages/Business/DeviceGroup/components/updateDeviceForm.tsx

import { apiDeviceClassification } from '@/services/business/device';
import { apiEntityNodesDeviceEdit } from '@/services/business/entity';
import { isSuccessApi } from '@/utils/forApi';
import {
  ModalForm,
  ProForm,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Form, message } from 'antd';
import React, { useEffect } from 'react';
import {
  proFormSmallItemStyleProps,
  proFormSmallModelWidth,
} from '../../../../../config/defaultForm';
// @ts-ignore

export type UpdateDeviceFormProps = {
  updateModalOpen: boolean;
  handleModal: () => void;
  commInfo: Record<string, any>;
  nodeInfo: Record<string, any>;
  values: Record<string, any>;
  reload: any;
};
const UpdateDeviceForm: React.FC<UpdateDeviceFormProps> = (props) => {
  const intl = useIntl();
  // const [isAuto, setIsAuto] = useState(true);
  const [form] = Form.useForm<API.ModelCategory>();
  function resetForm() {
    form.resetFields();
  }
  useEffect(() => {
    if (props.updateModalOpen && props.values?.device_id) {
      form.setFieldsValue({ ...props.values });
      console.log(props.values, 'useEffect_values');
    } else {
      resetForm();
    }
  }, [props.updateModalOpen, props.values]);
  // test 测试数据
  //   useEffect(() => {
  //     if (props.updateModalOpen) {
  //       form.setFieldsValue({
  //         name: 'video_2024_000',
  //         addr: '江苏省南京市雨花台区新华汇B4栋',
  //         // classification: null, // 设备分类的suid
  //         device_model: '设备型号2024_001', // 设备型号
  //         param: 'device_2024_05_24', // 设备参数
  //         comment:
  //           '测试一下备注测试一下备注测试一下备注测试一下备注测试一下备注测试一下备注测试一下备注测试一下备注测试一下备注测试一下备注测试一下备注测试一下备注',
  //       });
  //     }
  //   }, [props.updateModalOpen]);
  return (
    <ModalForm<API.ModelCategory>
      className="gn_modal_form gn_form"
      width={proFormSmallModelWidth}
      title={intl.formatMessage({
        id: 'device_group_list.form.action.edit',
        defaultMessage: '编辑',
      })}
      open={props.updateModalOpen}
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => props.handleModal(),
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        console.log(values, 'add_finish_values');
        let resp = await apiEntityNodesDeviceEdit({
          ...values,
          device_id: props.values.device_id,
          entity_id: props.commInfo.id,
          node_id: props.nodeInfo.id,
        });
        if (isSuccessApi(resp)) {
          message.success(
            intl.formatMessage({ id: 'common.action.success', defaultMessage: '$$$' }),
          );
          props.reload();
          props.handleModal();
        } else {
          message.error(
            resp?.meta?.message ||
              intl.formatMessage({ id: 'common.action.failure', defaultMessage: '$$$' }),
          );
        }
        return true;
      }}
    >
      <ProForm.Group>
        <ProFormText
          width={proFormSmallItemStyleProps.column2Width}
          name="name"
          label={
            <FormattedMessage id="device_group_list.table.list.name" defaultMessage="设备名称" />
          }
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'device_group_list.table.list.name',
            defaultMessage: '$$$',
          })}`}
          required={true}
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="device_group_list.table.list.rule.required.name"
                  defaultMessage="名称必填"
                />
              ),
            },
          ]}
        />
        <ProFormText
          width={proFormSmallItemStyleProps.column2Width}
          name="addr"
          label={
            <FormattedMessage
              id="device_group_list.table.list.deviceSite"
              defaultMessage="设备位置"
            />
          }
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'device_group_list.table.list.deviceSite',
            defaultMessage: '$$$',
          })}`}
        />

        <ProFormSelect
          width={proFormSmallItemStyleProps.column2Width}
          name="classification"
          label={
            <FormattedMessage
              id="device_group_list.table.list.deviceType"
              defaultMessage="设备分类"
            />
          }
          placeholder={`${intl.formatMessage({
            id: 'common.please_select',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'device_group_list.table.list.deviceType',
            defaultMessage: '$$$',
          })}`}
          showSearch
          debounceTime={500}
          request={async () => {
            const { data } = await apiDeviceClassification();
            return data?.data?.map((v: Record<string, any>) => {
              return { ...v, label: v.name, value: v.suid };
            });
          }}
          required={true}
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="device_group_list.table.list.rule.required.deviceType"
                  defaultMessage="必选"
                />
              ),
            },
          ]}
        />
        <ProFormText
          width={proFormSmallItemStyleProps.column2Width}
          name="device_model"
          label={
            <FormattedMessage
              id="device_group_list.table.list.deviceModel"
              defaultMessage="设备型号"
            />
          }
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'device_group_list.table.list.deviceModel',
            defaultMessage: '$$$',
          })}`}
        />

        <ProFormText
          width={proFormSmallItemStyleProps.width}
          name="param"
          label={
            <FormattedMessage
              id="device_group_list.table.list.deviceParams"
              defaultMessage="设备参数"
            />
          }
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'device_group_list.table.list.deviceParams',
            defaultMessage: '$$$',
          })}`}
        />

        <ProFormTextArea
          width={proFormSmallItemStyleProps.width}
          name="comment"
          label={
            <FormattedMessage id="device_group_list.table.list.remark" defaultMessage="备注" />
          }
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'device_group_list.table.list.remark',
            defaultMessage: '$$$',
          })}`}
        />
      </ProForm.Group>
    </ModalForm>
  );
};
export default UpdateDeviceForm;