1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
  | import React, { useState, useRef, useEffect } from 'react'; 
 |  import { 
 |      ProForm, 
 |      ProFormDigit, 
 |      ProFormText, 
 |      ProFormSelect, 
 |      ProFormDateTimePicker 
 |  } from '@ant-design/pro-components'; 
 |  import { Form, Modal } from 'antd'; 
 |  import moment from 'moment'; 
 |  import Http from '@/utils/http'; 
 |    
 |  const Edit = (props) => { 
 |      const [form] = Form.useForm(); 
 |      const { } = props; 
 |    
 |      useEffect(() => { 
 |          form.resetFields(); 
 |          form.setFieldsValue({ 
 |              ...props.values 
 |          }) 
 |      }, [form, props]) 
 |    
 |      const handleCancel = () => { 
 |          props.onCancel(); 
 |      }; 
 |    
 |      const handleOk = () => { 
 |          form.submit(); 
 |      } 
 |    
 |      const handleFinish = async (values) => { 
 |          props.onSubmit({ ...values }); 
 |      } 
 |    
 |      return ( 
 |          <> 
 |              <Modal 
 |                  title="Edit" 
 |                  width={640} 
 |                  forceRender 
 |                  destroyOnClose 
 |                  open={props.open} 
 |                  onCancel={handleCancel} 
 |                  onOk={handleOk} 
 |              > 
 |                  <ProForm 
 |                      form={form} 
 |                      submitter={false} 
 |                      onFinish={handleFinish} 
 |                      layout="horizontal" 
 |                      grid={true} 
 |                  > 
 |                      <ProFormDigit 
 |                          name="id" 
 |                          disabled 
 |                          hidden={true} 
 |                      /> 
 |                      <ProForm.Group> 
 |                          <ProFormText 
 |                              name="name" 
 |                              label="角色名称" 
 |                              colProps={{ md: 12, xl: 12 }} 
 |                              placeholder="请输入" 
 |                              rules={[{ required: true, message: "请输入角色名称!" }]} 
 |                          /> 
 |                          <ProFormText 
 |                              name="code" 
 |                              label="角色标识" 
 |                              colProps={{ md: 12, xl: 12 }} 
 |                              placeholder="请输入" 
 |                              rules={[{ required: true, message: "请输入角色标识!" }]} 
 |                          /> 
 |                      </ProForm.Group> 
 |                      <ProForm.Group> 
 |                          <ProFormSelect 
 |                              name="status" 
 |                              label="状态" 
 |                              colProps={{ md: 12, xl: 12 }} 
 |                              options={[ 
 |                                  { label: '正常', value: 1 }, 
 |                                  { label: '禁用', value: 0 }, 
 |                              ]} 
 |                              rules={[{ required: true, message: "请选择状态!" }]} 
 |                          /> 
 |                          <ProFormText 
 |                              name="memo" 
 |                              label="备注" 
 |                              colProps={{ md: 12, xl: 12 }} 
 |                              placeholder="请输入" 
 |                          /> 
 |                      </ProForm.Group> 
 |                  </ProForm> 
 |              </Modal> 
 |          </> 
 |      ) 
 |  } 
 |    
 |  export default Edit; 
 |  
  |