|
@@ -20,29 +20,193 @@ import xiaochengxu from '../../assets/xiaochengxu.png'
|
20
|
20
|
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
|
21
|
21
|
const { TextArea } = Input;
|
22
|
22
|
|
|
23
|
+const formItemLayout = {
|
|
24
|
+ labelCol: { span: 6 },
|
|
25
|
+ wrapperCol: { span: 14 },
|
|
26
|
+};
|
|
27
|
+
|
|
28
|
+const BasicForm = props => {
|
|
29
|
+ const [isEnlist, setIsEnlist] = useState(1)
|
|
30
|
+
|
|
31
|
+ const radioOnChange = e => {
|
|
32
|
+ // console.log(e.target.value)
|
|
33
|
+ setIsEnlist(e.target.value)
|
|
34
|
+ }
|
|
35
|
+
|
|
36
|
+ const { dynamicId } = props
|
|
37
|
+
|
|
38
|
+ // 查询详情
|
|
39
|
+ const getDynamicData = dynamicId => {
|
|
40
|
+ request({ ...apis.activity.details, params: { dynamicId } }).then((data) => {
|
|
41
|
+ console.log(data)
|
|
42
|
+ data.activityTime = [moment(data.startDate), moment(data.endDate)]
|
|
43
|
+ data.signupTime = [moment(data.enlistStart), moment(data.enlistEnd)]
|
|
44
|
+
|
|
45
|
+ setIsEnlist(data.isEnlist)
|
|
46
|
+ props.form.setFieldsValue(data)
|
|
47
|
+ })
|
|
48
|
+ }
|
|
49
|
+
|
|
50
|
+ // eslint-disable-next-line react-hooks/rules-of-hooks
|
|
51
|
+ useEffect(() => {
|
|
52
|
+ props.form.setFieldsValue({ isEnlist })
|
|
53
|
+ if (dynamicId) {
|
|
54
|
+ getDynamicData(dynamicId);
|
|
55
|
+ }
|
|
56
|
+ }, [])
|
|
57
|
+
|
|
58
|
+ const handleSubmit = e => {
|
|
59
|
+ e.preventDefault();
|
|
60
|
+ props.form.validateFields((err, values) => {
|
|
61
|
+ if (!err) {
|
|
62
|
+ console.log('Received values of form: ', values);
|
|
63
|
+ const { activityTime, signupTime } = values
|
|
64
|
+ const [startDate, endDate] = activityTime
|
|
65
|
+ values.startDate = moment(startDate).format('YYYY-MM-DD HH:mm');
|
|
66
|
+ values.endDate = moment(endDate).format('YYYY-MM-DD HH:mm');
|
|
67
|
+ if (signupTime) {
|
|
68
|
+ const [enlistStart, enlistEnd] = signupTime
|
|
69
|
+ values.enlistStart = moment(enlistStart).format('YYYY-MM-DD HH:mm');
|
|
70
|
+ values.enlistEnd = moment(enlistEnd).format('YYYY-MM-DD HH:mm');
|
|
71
|
+ }
|
|
72
|
+
|
|
73
|
+ console.log('submit data --->', values)
|
|
74
|
+ if (dynamicId) {
|
|
75
|
+ values.dynamicId = dynamicId
|
|
76
|
+ request({ ...apis.activity.update, data: values }).then(data => {
|
|
77
|
+ message.info('保存成功')
|
|
78
|
+ router.go(-1)
|
|
79
|
+ }).catch((err) => {
|
|
80
|
+ message.info(err.msg || err.message)
|
|
81
|
+ })
|
|
82
|
+ } else {
|
|
83
|
+ request({ ...apis.activity.add, data: { ...values } }).then((data) => {
|
|
84
|
+ message.info('保存成功')
|
|
85
|
+ router.go(-1)
|
|
86
|
+ }).catch((err) => {
|
|
87
|
+ message.info(err.msg || err.message)
|
|
88
|
+ })
|
|
89
|
+ }
|
|
90
|
+ }
|
|
91
|
+ });
|
|
92
|
+ }
|
|
93
|
+
|
|
94
|
+ const { getFieldDecorator } = props.form;
|
|
95
|
+ return (
|
|
96
|
+ <>
|
|
97
|
+ <Form {...formItemLayout} onSubmit={handleSubmit}>
|
|
98
|
+ <Form.Item label="所属项目">
|
|
99
|
+ {getFieldDecorator('buildingId', {
|
|
100
|
+ rules: [
|
|
101
|
+ {
|
|
102
|
+ required: true,
|
|
103
|
+ message: '请选择所属项目',
|
|
104
|
+ },
|
|
105
|
+ ],
|
|
106
|
+ })(<BuildSelect />)}
|
|
107
|
+ </Form.Item>
|
|
108
|
+ <Form.Item label="主图">
|
|
109
|
+ {getFieldDecorator('imgUrl')(<ImageUploader />)}
|
|
110
|
+ <span>建议图片尺寸:750px*560px</span>
|
|
111
|
+ </Form.Item>
|
|
112
|
+ <Form.Item label="活动标题">
|
|
113
|
+ {getFieldDecorator('title', {
|
|
114
|
+ rules: [
|
|
115
|
+ {
|
|
116
|
+ required: true,
|
|
117
|
+ message: '请输入活动标题',
|
|
118
|
+ },
|
|
119
|
+ ],
|
|
120
|
+ })(<Input />)}
|
|
121
|
+ </Form.Item>
|
|
122
|
+ <Form.Item label="活动时间">
|
|
123
|
+ {getFieldDecorator('activityTime', {
|
|
124
|
+ rules: [
|
|
125
|
+ {
|
|
126
|
+ required: true,
|
|
127
|
+ message: '请选择活动时间',
|
|
128
|
+ },
|
|
129
|
+ ],
|
|
130
|
+ })(<RangePicker format="YYYY-MM-DD HH:mm" />)}
|
|
131
|
+ </Form.Item>
|
|
132
|
+ <Form.Item label="活动地点">
|
|
133
|
+ {getFieldDecorator('address', {
|
|
134
|
+ rules: [
|
|
135
|
+ {
|
|
136
|
+ required: true,
|
|
137
|
+ message: '请输入活动地点',
|
|
138
|
+ },
|
|
139
|
+ ],
|
|
140
|
+ })(<Input />)}
|
|
141
|
+ </Form.Item>
|
|
142
|
+ <Form.Item label="活动人数">
|
|
143
|
+ {getFieldDecorator('personNum', {
|
|
144
|
+ rules: [
|
|
145
|
+ {
|
|
146
|
+ required: true,
|
|
147
|
+ message: '请输入活动人数',
|
|
148
|
+ },
|
|
149
|
+ ],
|
|
150
|
+ })(<Input type="number" />)}
|
|
151
|
+ </Form.Item>
|
|
152
|
+ <Form.Item label="最大报名人数">
|
|
153
|
+ {getFieldDecorator('maxEnlistByPerson', {
|
|
154
|
+ rules: [
|
|
155
|
+ {
|
|
156
|
+ required: true,
|
|
157
|
+ message: '请输入最大报名人数',
|
|
158
|
+ },
|
|
159
|
+ ],
|
|
160
|
+ })(<Input type="number" />)}
|
|
161
|
+ </Form.Item>
|
|
162
|
+ <Form.Item label="活动详情">
|
|
163
|
+ {getFieldDecorator('desc')(<Wangedit />)}
|
|
164
|
+ </Form.Item>
|
|
165
|
+ <Form.Item label="是否需要报名">
|
|
166
|
+ {getFieldDecorator('isEnlist')(
|
|
167
|
+ <Radio.Group onChange={(e) => radioOnChange(e)}>
|
|
168
|
+ <Radio value={1}>是</Radio>
|
|
169
|
+ <Radio value={0}>否</Radio>
|
|
170
|
+ </Radio.Group>,
|
|
171
|
+ )}
|
|
172
|
+ </Form.Item>
|
|
173
|
+ {
|
|
174
|
+ isEnlist === 1 && (<Form.Item label="报名时间">
|
|
175
|
+ {getFieldDecorator('signupTime', {
|
|
176
|
+ rules: [
|
|
177
|
+ {
|
|
178
|
+ required: true,
|
|
179
|
+ message: '请选择报名时间',
|
|
180
|
+ },
|
|
181
|
+ ],
|
|
182
|
+ })(<RangePicker format="YYYY-MM-DD HH:mm" />)}
|
|
183
|
+ </Form.Item>)
|
|
184
|
+ }
|
|
185
|
+ <Form.Item wrapperCol={{ span: 12, offset: 8 }}>
|
|
186
|
+ <Button type="primary" htmlType="submit">
|
|
187
|
+ 确认
|
|
188
|
+ </Button>
|
|
189
|
+
|
|
190
|
+ <Button onClick={() => router.go(-1)}>
|
|
191
|
+ 取消
|
|
192
|
+ </Button>
|
|
193
|
+ </Form.Item>
|
|
194
|
+ </Form>
|
|
195
|
+ </>
|
|
196
|
+ )
|
|
197
|
+}
|
|
198
|
+
|
|
199
|
+const Basic = Form.create({ name: 'BasicForm' })(BasicForm);
|
|
200
|
+
|
23
|
201
|
/**
|
24
|
202
|
*
|
25
|
203
|
*
|
26
|
204
|
* @param {*} props
|
27
|
205
|
* @returns
|
28
|
206
|
*/
|
29
|
|
-const Edit = (props) => {
|
|
207
|
+const Edit = props => {
|
30
|
208
|
const [tab, changeTab] = useState('basic')
|
31
|
|
- const dynamicId = props.location.query.dynamicId
|
32
|
|
- const [dynamicData, setDynamicData] = useState({ isEnlist: 1 })
|
33
|
|
- if (dynamicId) {
|
34
|
|
- useEffect(() => {
|
35
|
|
- getDynamicData(dynamicId);
|
36
|
|
- }, [])
|
37
|
|
-
|
38
|
|
- // 查询列表
|
39
|
|
- const getDynamicData = (dynamicId) => {
|
40
|
|
- request({ ...apis.activity.details, params: { dynamicId } }).then((data) => {
|
41
|
|
- console.log(data)
|
42
|
|
- setDynamicData(data)
|
43
|
|
- })
|
44
|
|
- }
|
45
|
|
- }
|
|
209
|
+ const { dynamicId } = props.location.query
|
46
|
210
|
|
47
|
211
|
const cancelPage = () => {
|
48
|
212
|
router.push({
|
|
@@ -50,134 +214,6 @@ const Edit = (props) => {
|
50
|
214
|
});
|
51
|
215
|
}
|
52
|
216
|
|
53
|
|
- const radioOnChange = e => {
|
54
|
|
- console.log(e.target.value)
|
55
|
|
- setDynamicData({ ...dynamicData, isEnlist: e.target.value })
|
56
|
|
- }
|
57
|
|
-
|
58
|
|
- const Basic = (props) => {
|
59
|
|
- const fields = [
|
60
|
|
- {
|
61
|
|
- label: '所属项目',
|
62
|
|
- name: 'buildingId',
|
63
|
|
- render: <BuildSelect />,
|
64
|
|
- value: dynamicData.buildingId,
|
65
|
|
- rules: [
|
66
|
|
- { required: true, message: '请选择所属项目' },
|
67
|
|
- ]
|
68
|
|
- },
|
69
|
|
- {
|
70
|
|
- label: '主图',
|
71
|
|
- name: 'imgUrl',
|
72
|
|
- type: FieldTypes.ImageUploader,
|
73
|
|
- value: dynamicData.imgUrl,
|
74
|
|
- help: '建议图片尺寸:750px*560px',
|
75
|
|
- },
|
76
|
|
- {
|
77
|
|
- label: '活动标题',
|
78
|
|
- name: 'title',
|
79
|
|
- type: FieldTypes.Text,
|
80
|
|
- value: dynamicData.title,
|
81
|
|
- rules: [
|
82
|
|
- { required: true, message: '请输入活动标题' },
|
83
|
|
- ]
|
84
|
|
- },
|
85
|
|
- {
|
86
|
|
- label: '活动时间',
|
87
|
|
- name: 'activityTime',
|
88
|
|
- type: FieldTypes.RangePicker,
|
89
|
|
- value: dynamicData.startDate != null ? [moment(dynamicData.startDate, 'YYYY-MM-DD HH:mm'), moment(dynamicData.endDate, 'YYYY-MM-DD HH:mm')] : null,
|
90
|
|
- props: {showTime:{ format: 'HH:mm' }},
|
91
|
|
- rules: [
|
92
|
|
- { required: true, message: '请选择活动时间' },
|
93
|
|
- ]
|
94
|
|
- },
|
95
|
|
- {
|
96
|
|
- label: '活动地点',
|
97
|
|
- name: 'address',
|
98
|
|
- type: FieldTypes.Text,
|
99
|
|
- value: dynamicData.address,
|
100
|
|
- rules: [
|
101
|
|
- { required: true, message: '请输入活动地点' },
|
102
|
|
- ]
|
103
|
|
- },
|
104
|
|
- {
|
105
|
|
- label: '活动人数',
|
106
|
|
- name: 'personNum',
|
107
|
|
- type: FieldTypes.Text,
|
108
|
|
- value: dynamicData.personNum,
|
109
|
|
- rules: [
|
110
|
|
- { required: true, message: '请输入活动人数' },
|
111
|
|
- ]
|
112
|
|
- },
|
113
|
|
- {
|
114
|
|
- label: '最大报名人数',
|
115
|
|
- name: 'maxEnlistByPerson',
|
116
|
|
- type: FieldTypes.Text,
|
117
|
|
- value: dynamicData.maxEnlistByPerson,
|
118
|
|
- rules: [
|
119
|
|
- { required: true, message: '请输入最大报名人数' },
|
120
|
|
- ]
|
121
|
|
- },
|
122
|
|
- {
|
123
|
|
- label: '活动详情',
|
124
|
|
- name: 'desc',
|
125
|
|
- render: <Wangedit />,
|
126
|
|
- value: dynamicData.desc,
|
127
|
|
- },
|
128
|
|
- {
|
129
|
|
- label: '是否需要报名',
|
130
|
|
- name: 'isEnlist',
|
131
|
|
- render: <Radio.Group name="radiogroup" onChange={(e) => radioOnChange(e)}>
|
132
|
|
- <Radio value={1}>是</Radio>
|
133
|
|
- <Radio value={0}>否</Radio>
|
134
|
|
- </Radio.Group>,
|
135
|
|
- value: dynamicData.isEnlist != null ? dynamicData.isEnlist - 0 : 1,
|
136
|
|
- },
|
137
|
|
- {
|
138
|
|
- label: '报名时间',
|
139
|
|
- name: 'signupTime',
|
140
|
|
- // type: FieldTypes.RangePicker,
|
141
|
|
- render: dynamicData.isEnlist === 1 ? (<RangePicker format={ 'YYYY/MM/DD HH:mm' } style={{ width: '100%' }} />) : '',
|
142
|
|
- value: dynamicData.enlistStart != null ? [moment(dynamicData.enlistStart, 'YYYY-MM-DD HH:mm'), moment(dynamicData.enlistEnd, 'YYYY-MM-DD HH:mm')] : null,
|
143
|
|
- // props: {showTime:{ format: 'HH:mm' }},
|
144
|
|
- rules: [
|
145
|
|
- { required: true, message: '请选择报名时间' },
|
146
|
|
- ]
|
147
|
|
- },
|
148
|
|
- ]
|
149
|
|
-
|
150
|
|
- const handleSubmit = val => {
|
151
|
|
- let { isEnlist, activityTime, signupTime, ...submitValue } = val
|
152
|
|
- const [startDate, endDate] = activityTime
|
153
|
|
- submitValue.startDate = moment(startDate).format('YYYY-MM-DD HH:mm');
|
154
|
|
- submitValue.endDate = moment(endDate).format('YYYY-MM-DD HH:mm');
|
155
|
|
- const [enlistStart, enlistEnd] = signupTime
|
156
|
|
- submitValue.enlistStart = moment(enlistStart).format('YYYY-MM-DD HH:mm');
|
157
|
|
- submitValue.enlistEnd = moment(enlistEnd).format('YYYY-MM-DD HH:mm');
|
158
|
|
- console.log('submit data --->', submitValue)
|
159
|
|
-
|
160
|
|
- if (dynamicId) {
|
161
|
|
- submitValue.dynamicId = dynamicId
|
162
|
|
- request({ ...apis.activity.update, data: submitValue }).then((data) => {
|
163
|
|
- message.info("保存成功")
|
164
|
|
- cancelPage()
|
165
|
|
- }).catch((err) => {
|
166
|
|
- message.info(err.msg || err.message)
|
167
|
|
- })
|
168
|
|
- } else {
|
169
|
|
- request({ ...apis.activity.add, data: submitValue }).then((data) => {
|
170
|
|
- message.info("保存成功")
|
171
|
|
- cancelPage()
|
172
|
|
- }).catch((err) => {
|
173
|
|
- message.info(err.msg || err.message)
|
174
|
|
- })
|
175
|
|
- }
|
176
|
|
- }
|
177
|
|
-
|
178
|
|
- return <XForm onSubmit={handleSubmit} onCancel={cancelPage} fields={fields}></XForm>
|
179
|
|
- }
|
180
|
|
-
|
181
|
217
|
const Poster = (props) => {
|
182
|
218
|
const [inputValue, changeInput] = useState('')
|
183
|
219
|
const [textAreaValue, changeTextArea] = useState('')
|
|
@@ -245,8 +281,13 @@ const Edit = (props) => {
|
245
|
281
|
<span style={{ color: '#999', margin: '25px 0 0 60px', fontSize: '17px' }}>2019.09.21</span>
|
246
|
282
|
</div>
|
247
|
283
|
<p style={{
|
248
|
|
- margin: '10px 20px', fontSize: '20px', color: '#222', fontWeight: '600',
|
249
|
|
- display: '-webkit-box', lineClamp: '3', height: '60px',
|
|
284
|
+ margin: '10px 20px',
|
|
285
|
+fontSize: '20px',
|
|
286
|
+color: '#222',
|
|
287
|
+fontWeight: '600',
|
|
288
|
+ display: '-webkit-box',
|
|
289
|
+lineClamp: '3',
|
|
290
|
+height: '60px',
|
250
|
291
|
WebkitLineClamp: '2',
|
251
|
292
|
WebkitBoxOrient: 'vertical',
|
252
|
293
|
overflow: 'hidden',
|
|
@@ -255,8 +296,12 @@ const Edit = (props) => {
|
255
|
296
|
|
256
|
297
|
<img src={yinhao} style={{ width: '30px', marginLeft: '20px' }} alt="" />
|
257
|
298
|
<p style={{
|
258
|
|
- margin: '16px 20px 28px 20px', fontSize: '17px', color: '#999',
|
259
|
|
- display: '-webkit-box', lineClamp: '3', height: '72px',
|
|
299
|
+ margin: '16px 20px 28px 20px',
|
|
300
|
+fontSize: '17px',
|
|
301
|
+color: '#999',
|
|
302
|
+ display: '-webkit-box',
|
|
303
|
+lineClamp: '3',
|
|
304
|
+height: '72px',
|
260
|
305
|
WebkitLineClamp: '3',
|
261
|
306
|
WebkitBoxOrient: 'vertical',
|
262
|
307
|
overflow: 'hidden',
|
|
@@ -327,7 +372,7 @@ const Edit = (props) => {
|
327
|
372
|
request({ ...apis.activity.addShareContent, data: { targetId: dynamicId, shareContentType: 'activity', shareContentImg: imgValue, shareContentTitle: inputValue }, }).then((data) => {
|
328
|
373
|
setShareContentId(data.shareContentId)
|
329
|
374
|
message.info("保存成功")
|
330
|
|
- }).catch((err) => {
|
|
375
|
+ }).catch(err => {
|
331
|
376
|
message.info(err.msg || err.message)
|
332
|
377
|
})
|
333
|
378
|
}
|
|
@@ -368,7 +413,7 @@ const Edit = (props) => {
|
368
|
413
|
</Radio.Group>
|
369
|
414
|
</div>
|
370
|
415
|
<div>
|
371
|
|
- {tab === 'basic' && <Basic />}
|
|
416
|
+ {tab === 'basic' && <Basic dynamicId={dynamicId} />}
|
372
|
417
|
{tab === 'poster' && <Poster />}
|
373
|
418
|
{tab === 'share' && <Share />}
|
374
|
419
|
</div>
|
|
@@ -376,6 +421,4 @@ const Edit = (props) => {
|
376
|
421
|
);
|
377
|
422
|
}
|
378
|
423
|
|
379
|
|
-
|
380
|
|
-
|
381
|
424
|
export default Edit
|