动态表单的渲染以及数据处理

代码如下：

  1  render () {
  5 　　const formProductRows = this.state.recordRows.map((item, index) => (
  6             <Row key={index} style={{ width: '100%', marginBottom: 20 }}>
  7                 <Col span={7}>
  8                     <Form.Item
  9                         {...formItemLayout}
 10                         label="产品名称"
 11                         name={"ProductId" + '^' + index}   //目的用  '^' 来作为分割符，有利于拆分数据
 12                         validateTrigger={['onChange', 'onBlur']}
 13                         rules={[
 14                             {
 15                                 required: true,
 16                                 message: '请输入产品名称!',
 17                             },
 18                         ]}
 19                     >
 20                         <Select
 21                             placeholder="请选择产品名称"
 22                             allowClear
 23                         >
 24                             {productListData.map(data => (<Option key={data.ProductId} value={data.ProductId}>{data.Descripts}</Option>))}
 25                         </Select>
 26                     </Form.Item>
 27                 </Col>
 28                 <Col span={7}>
 29                     <Form.Item
 30                         {...formItemLayout}
 31                         label="采购价格"
 32                         name={"PurPrice" + '^' + index}
 33                         rules={[
 34                             {
 35                                 required: true,
 36                                 message: '请输入产品价格!',
 37                             },
 38                         ]}
 39                     >
 40                         <Input placeholder="请输入产品价格" />
 41                     </Form.Item>
 42                 </Col>
 43                 <Col span={7}>
 44                     <Form.Item
 45                         {...roleLayout}
 46                         label="角色"
 47                         name={"RoleNmaes" + '^' + index}
 48                         validateTrigger={['onChange', 'onBlur']}
 49                         rules={[
 50                             {
 51                                 required: true,
 52                                 message: '请选择角色!',
 53                             },
 54                         ]}
 55                     >
 56                         <Select
 57                             placeholder="请选择角色"
 58                             allowClear
 59                             mode="multiple"
 60                             style={{ marginLeft: '10px' }}
 61                         >
 62                             {roleListData.map(data => (<Option key={data.RoleId} value={data.RoleId}>{data.Descripts}</Option>))}
 63                         </Select>
 64                     </Form.Item>
 65                 </Col>
 66 
 67                 <Col span={3} style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
 68                     <DeleteOutlined
 69                         onClick={() => this.removeRecordRow(index)}
 70                         style={{ fontSize: '24px', color: '#F21414', marginRight: 10, 'cursor': 'pointer' }}
 71                     />
 72                     <PlusCircleOutlined
 73                         onClick={() => this.addRecordRow()}
 74                         style={{ fontSize: '24px', color: '#30BD51', 'cursor': 'pointer' }}
 75                     />
 76                 </Col>
 77             </Row>
 78         ))
 79 
 80 　
 81 const onFinish = (values) => {
 82             let formValues = []; 
 83             for (var keys in values) {
 84                 let dataIndex = keys.split('^')[0];  //字段名
 85                 let index = keys.split('^')[1];  //字段的下标
 86                 if (formValues && formValues.length > index) { 
 87                     formValues[index][dataIndex] = values[keys];
 88                 } else {
 89                     formValues.push({
 90                         [dataIndex]: values[keys]
 91                     })
 92                 }
 93             }
 94             this.setState({
 95                 recordRows: formValues
 96             }, () => {
 97                 this.handleConfirmAddEdit()    //调用接口方法
 98             })
 99         };
100 　　return (
101 
102 　　　　<Form
103                             name="templateAddEdit"
104                             layout="inline"
105                             ref={formRef}
106                             onFinish={onFinish}
107                             onFinishFailed={onFinishFailed}
108                             autoComplete="off"
109                             initialValue={recordRows}
110                         >
111                             <Form.List>
112                                 {(fields, { add, remove }, { errors }) =>
113                                     fields.map((field, index) =>
114                                     (<Form.Item
115                                         {...field}
116                                         label={'11'}
117                                         key={field.key}
118                                         required={false}
119                                     >
120                                         <Form.Item
121                                             {...formItemLayout}
122                                             {...field}
123                                             label="产品名称"
124                                             // name="ProductId"
125                                             validateTrigger={['onChange', 'onBlur']}
126                                             rules={[
127                                                 {
128                                                     required: true,
129                                                     message: '请输入产品名称!',
130                                                 },
131                                             ]}
132                                         >
133                                             <Select
134                                                 placeholder="请选择产品名称"
135                                                 allowClear
136                                             >
137                                                 {productListData.map(data => (<Option key={data.ProductId} value={data.ProductId}>{data.Descripts}</Option>))}
138                                             </Select>
139                                         </Form.Item>
140 
141                                         <Form.Item
142                                             {...formItemLayout}
143                                             {...field}
144                                             label="采购价格"
145                                             // name="PurPrice"
146                                             rules={[
147                                                 {
148                                                     required: true,
149                                                     message: '请输入产品价格!',
150                                                 },
151                                             ]}
152                                         >
153                                             <Input placeholder="请输入产品价格" />
154                                         </Form.Item>
155 
156                                         <Form.Item
157                                             {...roleLayout}
158                                             {...field}
159                                             label="角色"
160                                             // name="RoleNmaes"
161                                             validateTrigger={['onChange', 'onBlur']}
162                                             rules={[
163                                                 {
164                                                     required: true,
165                                                     message: '请选择角色!',
166                                                 },
167                                             ]}
168                                         >
169                                             <Select
170                                                 placeholder="请选择角色"
171                                                 allowClear
172                                                 mode="multiple"
173                                             >
174                                                 {roleListData.map(data => (<Option key={data.RoleId} value={data.RoleId}>{data.Descripts}</Option>))}
175                                             </Select>
176                                         </Form.Item>
177                                     </Form.Item>)
178                                     )
179                                 }
180                             </Form.List>
181 
182                             {formProductRows}
183 
184                             <div>
185                                 <span>状态：</span><Radio.Group onChange={this.statusChange} value={this.state.Status}>
186                                     <Radio style={{ marginRight: "53px" }} value='Y'>正常</Radio>
187                                     <Radio value='N'>关闭</Radio>
188                                 </Radio.Group>
189                             </div>
190 
191                             <Row gutter={20} style={{ width: '100%', marginTop: 30 }}>
192                                 <Col xs={{ span: 3, offset: 8 }}>
193                                     <Button type="primary" block size={size} htmlType="submit">
194                                         确定
195                                     </Button>
196                                 </Col>
197                                 <Col xs={{ span: 3 }}>
198                                     <Button type="default" block size={size} onClick={() => this.showModal(false)}>
199                                         取消
200                                     </Button>
201                                 </Col>
202                             </Row>
203                        </Form>
204 )
205 
206 }

  效果展示地址：http://www.56.com/u49/v_MTc5NDg3MzAy.html

        　　

 
 
posted @ 2022-08-17 15:35  D-slim  阅读(160)  评论(0)    收藏  举报