Uighur-Recognition-Web/src/pages/Alarm/OfflineAlarmRules/components/UpdateMultiForm.tsx

import { putDeviceCategoryUpdateDeviceCategory } from '@/services/device/DeviceCategory';
import { postDeviceGroupGetDeviceGroupFkSelect } from '@/services/device/DeviceGroup';
import { postAlarmRules } from '@/services/alarm/AlarmRules';
import { ModalForm, ProForm, ProFormFieldSet, ProFormSelect, ProFormSwitch, ProFormText } from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Form, message } from 'antd';
import React, { useState } from 'react';
import {
  proFormSmallItemStyleProps,
  proFormSmallModelWidth,
} from '../../../../../config/defaultForm';
import styles from './updateForm.less'
export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.UpdateAlarmRulesForm>;

export type UpdateFormProps = {
  updateModalOpen: boolean;
  handleModal: () => void;
  values: Partial<API.UpdateAlarmRulesForm>;
  reload: any;
};
const UpdateMultiForm: React.FC<UpdateFormProps> = (props) => {
  const intl = useIntl();
  const [form] = Form.useForm<API.UpdateAlarmRulesForm>();

  return (
    <ModalForm<any>
      width={proFormSmallModelWidth}
      title={intl.formatMessage({
        id: 'alarm_rules.page.form.multiTitle',
        defaultMessage: `编辑${props.values.warning_name}`,
      })}
      open={props.updateModalOpen}
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => props.handleModal(),
        okText: intl.formatMessage({ id: 'common.yes', defaultMessage: '确认' }),
        cancelText: intl.formatMessage({ id: 'common.no', defaultMessage: '取消' }),
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        values.id = props.values.id
        values.is_use = values.is_use ? 1 : 0
        // console.log(values);
        await postAlarmRules(values)
          .then(() => {
            message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '成功' }));
            props.reload();
          })
          .catch(() => {
            message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '失败' }));
          });

        props.handleModal();
        return true;
      }}
    >
      <ProForm.Group>
        {/* <ProFormText
          width={proFormSmallItemStyleProps.width}
          name="name"
          label={<FormattedMessage id="alarm_rules.page.form.enabled" defaultMessage="$$$" />}
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'alarm_rules.page.form.enabled',
            defaultMessage: '$$$',
          })}`}
          required={false}
          initialValue={props.values.enabled}
          disabled={false}
        /> */}
        <ProFormSwitch
          width={proFormSmallItemStyleProps.column2Width}
          name="is_use"
          label={
            <FormattedMessage
              id="alarm_rules.page.form.isEnabled"
              defaultMessage="启用告警"
            />
          }
          checkedChildren="启用"
          unCheckedChildren="关闭"
          initialValue={props.values.is_use}
          disabled={false}
        />
        <ProFormText
          width={proFormSmallItemStyleProps.width}
          name="warning_name"
          label={<FormattedMessage id="alarm_rules.page.form.name" defaultMessage="告警名称" />}
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '请输入',
          })}${intl.formatMessage({
            id: 'alarm_rules.page.form.name',
            defaultMessage: '告警名称',
          })}`}
          required={true}
          initialValue={props.values.warning_name}
          disabled={false}
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="alarm_rules.page.rule.required.name"
                  defaultMessage="请填写告警名称"
                />
              ),
            },
          ]}
        />
        <div>触发条件</div>
          <div style={{
            display: 'flex',
            flexWrap: 'wrap',
            justifyContent: 'flex-start',
            alignItems: 'baseline'
          }}>
            <span style={{ marginRight: 6 }}>当检测到风险人员人数大于</span>
            <ProFormText
              width={100}
              name="person_number"
              // label={<FormattedMessage id="alarm_rules.page.form.triggerConditions" defaultMessage="$$$" />}
              placeholder={`${intl.formatMessage({
                id: 'common.please_input',
                defaultMessage: '请输入',
              })}${intl.formatMessage({
                id: 'alarm_rules.page.form.triggerConditions',
                defaultMessage: '触发条件',
              })}`}
              required={true}
              initialValue={props.values.person_number}
              disabled={false}
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="alarm_rules.page.rule.required.person_number"
                      defaultMessage="请填写人数"
                    />
                  ),
                },
              ]}
            />
            <span style={{ margin: '0 6px' }}>人时，则触发告警，触发间隔</span>
            <ProFormText
              width={100}
              name="time_interval"
              // label={<FormattedMessage id="alarm_rules.page.form.triggerConditions" defaultMessage="$$$" />}
              placeholder={`${intl.formatMessage({
                id: 'common.please_input',
                defaultMessage: '请输入',
              })}${intl.formatMessage({
                id: 'alarm_rules.page.form.time_interval',
                defaultMessage: '时间',
              })}`}
              required={true}
              initialValue={props.values.time_interval}
              disabled={false}
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="alarm_rules.page.rule.required.time_interval"
                      defaultMessage="请填写时间"
                    />
                  ),
                },
              ]}
            />
            <span style={{ marginLeft: 6 }}>分钟。</span>
          </div>
          {/* { timeStatus && 
          <ProFormFieldSet
            name="list"
            label="触发条件"
            type='space'
            transform={(value: any) => ({
              // list: value,
              // startTime: value[0],
              // endTime: value[1],
              time_period: value[0],
              time_interval: value[1],
              appear_number: value[2],
            })}
            className={styles}
          >
            当处于<ProFormText
            width={100}
            name="trigger_start_time"
            label={<FormattedMessage id="alarm_rules.page.form.triggerConditions" defaultMessage="$$$" />}
            placeholder={`${intl.formatMessage({
              id: 'common.please_input',
              defaultMessage: '$$$',
            })}${intl.formatMessage({
              id: 'alarm_rules.page.form.triggerConditions',
              defaultMessage: '$$$',
            })}`}
            required={false}
            initialValue={props.values.trigger_start_time}
            disabled={false}
          />至
          <ProFormText
            width={100}
            name="trigger_end_time"
            label={<FormattedMessage id="alarm_rules.page.form.triggerConditions" defaultMessage="$$$" />}
            placeholder={`${intl.formatMessage({
              id: 'common.please_input',
              defaultMessage: '$$$',
            })}${intl.formatMessage({
              id: 'alarm_rules.page.form.triggerConditions',
              defaultMessage: '$$$',
            })}`}
            required={false}
            initialValue={props.values.trigger_end_time}
            disabled={false}
          />时间内，发现风险人员立即告警。
          </ProFormFieldSet>}  */}
      </ProForm.Group>
    </ModalForm>
  );
};
export default UpdateMultiForm;