UpdateForm.tsx 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. import React from 'react';
  2. import { Modal } from 'antd';
  3. import {
  4. ProFormSelect,
  5. ProFormText,
  6. ProFormTextArea,
  7. StepsForm,
  8. ProFormRadio,
  9. ProFormDateTimePicker,
  10. } from '@ant-design/pro-form';
  11. import { useIntl, FormattedMessage } from 'umi';
  12. import { TableListItem } from '../data.d';
  13. export interface FormValueType extends Partial<TableListItem> {
  14. target?: string;
  15. template?: string;
  16. type?: string;
  17. time?: string;
  18. frequency?: string;
  19. }
  20. export interface UpdateFormProps {
  21. onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  22. onSubmit: (values: FormValueType) => Promise<void>;
  23. updateModalVisible: boolean;
  24. values: Partial<TableListItem>;
  25. }
  26. const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  27. const intl = useIntl();
  28. return (
  29. <StepsForm
  30. stepsProps={{
  31. size: 'small',
  32. }}
  33. stepsFormRender={(dom, submitter) => {
  34. return (
  35. <Modal
  36. width={640}
  37. bodyStyle={{
  38. padding: '32px 40px 48px',
  39. }}
  40. destroyOnClose
  41. title={intl.formatMessage({
  42. id: 'pages.searchTable.updateForm.ruleConfig',
  43. defaultMessage: '规则配置',
  44. })}
  45. visible={props.updateModalVisible}
  46. footer={submitter}
  47. onCancel={() => props.onCancel()}
  48. >
  49. {dom}
  50. </Modal>
  51. );
  52. }}
  53. onFinish={props.onSubmit}
  54. >
  55. <StepsForm.StepForm
  56. initialValues={{
  57. name: props.values.name,
  58. desc: props.values.desc,
  59. }}
  60. title={intl.formatMessage({
  61. id: 'pages.searchTable.updateForm.basicConfig',
  62. defaultMessage: '基本信息',
  63. })}
  64. >
  65. <ProFormText
  66. name="name"
  67. label={intl.formatMessage({
  68. id: 'pages.searchTable.updateForm.ruleName.nameLabel',
  69. defaultMessage: '规则名称',
  70. })}
  71. width="m"
  72. rules={[
  73. {
  74. required: true,
  75. message: '请输入规则名称!',
  76. },
  77. ]}
  78. />
  79. <ProFormTextArea
  80. name="desc"
  81. width="m"
  82. label={intl.formatMessage({
  83. id: 'pages.searchTable.updateForm.ruleDesc.descLabel',
  84. defaultMessage: '规则描述',
  85. })}
  86. placeholder={intl.formatMessage({
  87. id: 'pages.searchTable.updateForm.ruleDesc.descPlaceholder',
  88. defaultMessage: '请输入至少五个字符',
  89. })}
  90. rules={[
  91. {
  92. required: true,
  93. message: '请输入至少五个字符的规则描述!',
  94. min: 5,
  95. },
  96. ]}
  97. />
  98. </StepsForm.StepForm>
  99. <StepsForm.StepForm
  100. initialValues={{
  101. target: '0',
  102. template: '0',
  103. }}
  104. title={intl.formatMessage({
  105. id: 'pages.searchTable.updateForm.ruleProps.title',
  106. defaultMessage: '配置规则属性',
  107. })}
  108. >
  109. <ProFormSelect
  110. name="target"
  111. width="m"
  112. label={intl.formatMessage({
  113. id: 'pages.searchTable.updateForm.object',
  114. defaultMessage: '监控对象',
  115. })}
  116. valueEnum={{
  117. 0: '表一',
  118. 1: '表二',
  119. }}
  120. />
  121. <ProFormSelect
  122. name="template"
  123. width="m"
  124. label={intl.formatMessage({
  125. id: 'pages.searchTable.updateForm.ruleProps.templateLabel',
  126. defaultMessage: '规则模板',
  127. })}
  128. valueEnum={{
  129. 0: '规则模板一',
  130. 1: '规则模板二',
  131. }}
  132. />
  133. <ProFormRadio.Group
  134. name="type"
  135. label={intl.formatMessage({
  136. id: 'pages.searchTable.updateForm.ruleProps.typeLabel',
  137. defaultMessage: '规则类型',
  138. })}
  139. options={[
  140. {
  141. value: '0',
  142. label: '强',
  143. },
  144. {
  145. value: '1',
  146. label: '弱',
  147. },
  148. ]}
  149. />
  150. </StepsForm.StepForm>
  151. <StepsForm.StepForm
  152. initialValues={{
  153. type: '1',
  154. frequency: 'month',
  155. }}
  156. title={intl.formatMessage({
  157. id: 'pages.searchTable.updateForm.schedulingPeriod.title',
  158. defaultMessage: '设定调度周期',
  159. })}
  160. >
  161. <ProFormDateTimePicker
  162. name="time"
  163. width="m"
  164. label={intl.formatMessage({
  165. id: 'pages.searchTable.updateForm.schedulingPeriod.timeLabel',
  166. defaultMessage: '开始时间',
  167. })}
  168. rules={[
  169. {
  170. required: true,
  171. message: '请选择开始时间!',
  172. },
  173. ]}
  174. />
  175. <ProFormSelect
  176. name="frequency"
  177. label={intl.formatMessage({
  178. id: 'pages.searchTable.updateForm.object',
  179. defaultMessage: '监控对象',
  180. })}
  181. width="m"
  182. valueEnum={{
  183. month: '月',
  184. week: '周',
  185. }}
  186. />
  187. </StepsForm.StepForm>
  188. </StepsForm>
  189. );
  190. };
  191. export default UpdateForm;