Uighur-Recognition-Web/src/pages/Alarm/alarmRules/components/UpdateTimeForm.tsx

222 lines
7.5 KiB
TypeScript

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

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, ProFormTimePicker } 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 UpdateTimeForm: 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.timeTitle',
defaultMessage: `编辑${props.values.warning_name}`,
})}
open={props.updateModalOpen}
form={form}
autoFocusFirstInput
modalProps={{
destroyOnClose: true,
onCancel: () => props.handleModal(),
}}
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="name is required"
/>
),
},
]}
/>
<div style={{
marginBottom: 6
}}></div>
<div style={{
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'flex-start',
alignItems: 'baseline'
}}>
<ProFormTimePicker
style={{
padding: '0 6px'
}}
width={100}
name="trigger_start_time"
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'alarm_rules.page.form.trigger_start_time',
defaultMessage: '$$$',
})}`}
required={true}
initialValue={props.values.trigger_start_time}
disabled={false}
rules={[
{
required: true,
message: (
<FormattedMessage
id="alarm_rules.page.rule.required.trigger_start_time"
defaultMessage="name is required"
/>
),
},
]}
/>
{/* <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}
/> */}
<ProFormTimePicker
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={true}
initialValue={props.values.trigger_end_time}
disabled={false}
rules={[
{
required: true,
message: (
<FormattedMessage
id="alarm_rules.page.rule.required.trigger_start_time"
defaultMessage="name is required"
/>
),
},
]}
/>
{/* <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}
/> */}
{/* <span style={{ marginLeft: 6 }}></span> */}
</div>
</ProForm.Group>
</ModalForm>
);
};
export default UpdateTimeForm;