|
@@ -1,10 +1,11 @@
|
1
|
1
|
import React, { useState, useEffect } from 'react';
|
2
|
|
-import { Form, Input, Button, Select, message, Table, Pagination, Modal, DatePicker, Radio } from 'antd';
|
|
2
|
+import { Form, Input, Button, Select, message, Table, Pagination, Typography, Modal, DatePicker, Radio } from 'antd';
|
3
|
3
|
import router from 'umi/router';
|
4
|
4
|
import moment from 'moment';
|
5
|
5
|
import Prompt from 'umi/prompt';
|
6
|
6
|
import withActions from '@/components/ActionList';
|
7
|
7
|
import EditIcon from '@/components/EditIcon';
|
|
8
|
+import Navigate from '@/components/Navigate';
|
8
|
9
|
import styles from '../../style/GoodsList.less';
|
9
|
10
|
import apis from '../../../services/apis';
|
10
|
11
|
import request from '../../../utils/request';
|
|
@@ -56,7 +57,7 @@ const header = (props) => {
|
56
|
57
|
|
57
|
58
|
}, [])
|
58
|
59
|
|
59
|
|
- function gettaDrainage (params) {
|
|
60
|
+ function gettaDrainage(params) {
|
60
|
61
|
request({ ...apis.activity.taDrainage, params: params }).then((data) => {
|
61
|
62
|
setDatas(data)
|
62
|
63
|
console.log(data.records, '_213_')
|
|
@@ -71,7 +72,7 @@ const header = (props) => {
|
71
|
72
|
title: '确认删除该引流?',
|
72
|
73
|
okText: '确认',
|
73
|
74
|
cancelText: '取消',
|
74
|
|
- onOk () {
|
|
75
|
+ onOk() {
|
75
|
76
|
request({ ...apis.activity.deletetaDrainage, urlData: { id: drainageIid }, }).then((data) => {
|
76
|
77
|
message.info('操作成功!')
|
77
|
78
|
gettaDrainage(JSON.parse(localStorage.getItem("drainageActivePageParams")))
|
|
@@ -110,13 +111,13 @@ const header = (props) => {
|
110
|
111
|
}
|
111
|
112
|
|
112
|
113
|
const exchangeDrainage = drainage => () => {
|
113
|
|
- if(drainage.status === 1){
|
114
|
|
- if(drainage.isMiniapp){
|
|
114
|
+ if (drainage.status === 1) {
|
|
115
|
+ if (drainage.isMiniapp) {
|
115
|
116
|
Modal.confirm({
|
116
|
117
|
title: '下架后当前H5活动关联的小程序端开屏图、banner图等也会自动下架。',
|
117
|
118
|
okText: '确认',
|
118
|
119
|
cancelText: '取消',
|
119
|
|
- onOk () {
|
|
120
|
+ onOk() {
|
120
|
121
|
request({ ...apis.activity.exchangeDrainage, urlData: { id: drainage.drainageId }, data: drainage }).then((data) => {
|
121
|
122
|
message.info('操作成功!')
|
122
|
123
|
gettaDrainage(JSON.parse(localStorage.getItem("drainageActivePageParams")))
|
|
@@ -126,7 +127,7 @@ const header = (props) => {
|
126
|
127
|
})
|
127
|
128
|
}
|
128
|
129
|
});
|
129
|
|
- }else{
|
|
130
|
+ } else {
|
130
|
131
|
request({ ...apis.activity.exchangeDrainage, urlData: { id: drainage.drainageId }, data: drainage }).then((data) => {
|
131
|
132
|
message.info('H5活动已下架!')
|
132
|
133
|
gettaDrainage(JSON.parse(localStorage.getItem("drainageActivePageParams")))
|
|
@@ -135,8 +136,8 @@ const header = (props) => {
|
135
|
136
|
message.info(err.msg || err.message)
|
136
|
137
|
})
|
137
|
138
|
}
|
138
|
|
-
|
139
|
|
- }else{
|
|
139
|
+
|
|
140
|
+ } else {
|
140
|
141
|
request({ ...apis.activity.exchangeDrainage, urlData: { id: drainage.drainageId }, data: drainage }).then((data) => {
|
141
|
142
|
message.info('H5活动已上架!')
|
142
|
143
|
gettaDrainage(JSON.parse(localStorage.getItem("drainageActivePageParams")))
|
|
@@ -145,7 +146,7 @@ const header = (props) => {
|
145
|
146
|
message.info(err.msg || err.message)
|
146
|
147
|
})
|
147
|
148
|
}
|
148
|
|
-
|
|
149
|
+
|
149
|
150
|
}
|
150
|
151
|
|
151
|
152
|
const columns = [
|
|
@@ -160,18 +161,14 @@ const header = (props) => {
|
160
|
161
|
dataIndex: 'isMiniapp',
|
161
|
162
|
key: 'isMiniapp',
|
162
|
163
|
align: 'cenxter',
|
163
|
|
- render: (isMiniapp) => <span>{ isMiniapp ? '是' : '否' }</span>,
|
|
164
|
+ render: (isMiniapp) => <span>{isMiniapp ? '是' : '否'}</span>,
|
164
|
165
|
},
|
165
|
166
|
{
|
166
|
167
|
title: 'H5项目名称',
|
167
|
168
|
dataIndex: 'name',
|
168
|
169
|
key: 'name',
|
169
|
170
|
align: 'center',
|
170
|
|
- render: (text, datas) => <>
|
171
|
|
-
|
172
|
|
- <div style={{ color: '#66B3FF', cursor: 'pointer' }} onClick={toDrainageDetail(datas.drainageId)}>{datas.name}</div>
|
173
|
|
-
|
174
|
|
- </>
|
|
171
|
+ render: (text, datas) => <Navigate onClick={toDrainageDetail(datas.drainageId)}><Typography.Text ellipsis>{datas.name}</Typography.Text></Navigate>,
|
175
|
172
|
},
|
176
|
173
|
{
|
177
|
174
|
title: '链接地址',
|
|
@@ -185,7 +182,7 @@ const header = (props) => {
|
185
|
182
|
dataIndex: 'status',
|
186
|
183
|
key: 'status',
|
187
|
184
|
align: 'center',
|
188
|
|
- render: (status) => <span>{status === 1 ? '已上架' : '已下架'}</span>,
|
|
185
|
+ render: (status) => <span>{status === 1 ? '已上架' : '已下架'}</span>,
|
189
|
186
|
},
|
190
|
187
|
{
|
191
|
188
|
title: '新建时间',
|
|
@@ -226,24 +223,26 @@ const header = (props) => {
|
226
|
223
|
<EditIcon type="edit" text="编辑" onClick={() => addshowModal(datas)} />
|
227
|
224
|
</AuthButton>,
|
228
|
225
|
|
|
226
|
+ <EditIcon type="look" text="查看详情" onClick={toDrainageDetail(datas.drainageId)} />,
|
|
227
|
+
|
229
|
228
|
<AuthButton name="admin.taDrainage.id.delete" noRight={null}>
|
230
|
229
|
<EditIcon type="delete" text="删除" onClick={deleteDrainage(datas.drainageId)} />
|
231
|
230
|
</AuthButton >,
|
232
|
231
|
|
233
|
|
- <AuthButton name="admin.taDrainage.publish" noRight={null}>
|
234
|
|
- <EditIcon type={datas.status === 1 ? 'cancel' : 'publish'} text={datas.status === 1 ? '下架' : '上架'} onClick={exchangeDrainage(datas)} />
|
235
|
|
- </AuthButton>,
|
|
232
|
+ <AuthButton name="admin.taDrainage.publish" noRight={null}>
|
|
233
|
+ <EditIcon type={datas.status === 1 ? 'cancel' : 'publish'} text={datas.status === 1 ? '下架' : '上架'} onClick={exchangeDrainage(datas)} />
|
|
234
|
+ </AuthButton>,
|
|
235
|
+
|
|
236
|
+ <AuthButton name="admin.taDrainage.data" noRight={null}>
|
|
237
|
+ <EditIcon text="数据" onClick={toEditList(datas.drainageId)} />
|
|
238
|
+ </AuthButton>,
|
236
|
239
|
|
237
|
|
- <AuthButton name="admin.taDrainage.data" noRight={null}>
|
238
|
|
- <EditIcon color="#666" text="数据" onClick={toEditList(datas.drainageId)} />
|
239
|
|
- </AuthButton>,
|
240
|
240
|
|
241
|
|
-
|
242
|
|
- <EditIcon color="#666" type="record" text="数据记录" onClick={toDataReacord(datas)} />,
|
|
241
|
+ <EditIcon type="record" text="数据记录" onClick={toDataReacord(datas)} />,
|
243
|
242
|
|
244
|
|
- <AuthButton name="admin.taDrainage.id.delete" noRight={null}>
|
245
|
|
- <EditIcon color="#666" text="下载二维码" onClick={newQrcode.bind(this, datas)} />
|
246
|
|
- </AuthButton >,
|
|
243
|
+ <AuthButton name="admin.taDrainage.id.delete" noRight={null}>
|
|
244
|
+ <EditIcon text="下载二维码" onClick={newQrcode.bind(this, datas)} />
|
|
245
|
+ </AuthButton >,
|
247
|
246
|
]),
|
248
|
247
|
},
|
249
|
248
|
];
|
|
@@ -256,7 +255,7 @@ const header = (props) => {
|
256
|
255
|
// }, [formsDate])
|
257
|
256
|
|
258
|
257
|
const [hiddenStatus, setHiddenStatus] = useState(formsdate.isMiniapp)
|
259
|
|
-
|
|
258
|
+
|
260
|
259
|
const handleSubmit = e => {
|
261
|
260
|
e.preventDefault();
|
262
|
261
|
props.form.validateFields((err, values) => {
|
|
@@ -322,9 +321,9 @@ const header = (props) => {
|
322
|
321
|
};
|
323
|
322
|
|
324
|
323
|
const changeMiniapp = e => {
|
325
|
|
- if(e.target.value == 1){
|
|
324
|
+ if (e.target.value == 1) {
|
326
|
325
|
setHiddenStatus(true)
|
327
|
|
- }else{
|
|
326
|
+ } else {
|
328
|
327
|
setHiddenStatus(false)
|
329
|
328
|
}
|
330
|
329
|
}
|
|
@@ -335,8 +334,8 @@ const header = (props) => {
|
335
|
334
|
return <Form {...formItemLayout} onSubmit={handleSubmit}>
|
336
|
335
|
|
337
|
336
|
<Form.Item label="是否投放小程序端" help='选择是后,该活动可投放至小程序的轮播位以及开屏广告'>
|
338
|
|
- {getFieldDecorator('isMiniapp',{
|
339
|
|
- initialValue : formsDate.isMiniapp ? 1 : 0,
|
|
337
|
+ {getFieldDecorator('isMiniapp', {
|
|
338
|
+ initialValue: formsDate.isMiniapp ? 1 : 0,
|
340
|
339
|
rules: [
|
341
|
340
|
{ required: true, message: '请选择是否投放小程序' },
|
342
|
341
|
],
|
|
@@ -348,7 +347,8 @@ const header = (props) => {
|
348
|
347
|
)}
|
349
|
348
|
</Form.Item>
|
350
|
349
|
<Form.Item label="H5项目名称">
|
351
|
|
- {getFieldDecorator('name',{initialValue : formsDate.name,
|
|
350
|
+ {getFieldDecorator('name', {
|
|
351
|
+ initialValue: formsDate.name,
|
352
|
352
|
rules: [
|
353
|
353
|
{ required: true, message: '请输入H5项目名称' },
|
354
|
354
|
],
|
|
@@ -359,25 +359,29 @@ const header = (props) => {
|
359
|
359
|
)}
|
360
|
360
|
</Form.Item>
|
361
|
361
|
{hiddenStatus && (<Form.Item label="选择项目">
|
362
|
|
- {getFieldDecorator('buildingId',{initialValue : formsDate.buildingId})(
|
363
|
|
- <BuildSelect />,
|
|
362
|
+ {getFieldDecorator('buildingId', { initialValue: formsDate.buildingId })(
|
|
363
|
+ <BuildSelect />,
|
364
|
364
|
)}
|
365
|
365
|
</Form.Item>)}
|
366
|
366
|
<Form.Item label="下架时间">
|
367
|
|
- {getFieldDecorator('endDate',{initialValue : formsdate.endDate ? moment(formsdate.endDate, 'YYYY-MM-DD HH:mm:ss') : null,
|
|
367
|
+ {getFieldDecorator('endDate', {
|
|
368
|
+ initialValue: formsdate.endDate ? moment(formsdate.endDate, 'YYYY-MM-DD HH:mm:ss') : null,
|
368
|
369
|
rules: [
|
369
|
370
|
{ required: true, message: '请输入下架时间' },
|
370
|
|
- ]})(
|
|
371
|
+ ]
|
|
372
|
+ })(
|
371
|
373
|
<DatePicker
|
372
|
|
- showTime={{ format: 'HH:mm:ss' }}
|
|
374
|
+ showTime={{ format: 'HH:mm:ss' }}
|
373
|
375
|
/>,
|
374
|
376
|
)}
|
375
|
377
|
</Form.Item>
|
376
|
378
|
{hiddenStatus && (<Form.Item label="活动链接地址">
|
377
|
|
- {getFieldDecorator('h5Address',{initialValue : formsDate.h5Address,
|
|
379
|
+ {getFieldDecorator('h5Address', {
|
|
380
|
+ initialValue: formsDate.h5Address,
|
378
|
381
|
rules: [
|
379
|
382
|
{ required: true, message: '请输入H5活动链接地址' },
|
380
|
|
- ]})(
|
|
383
|
+ ]
|
|
384
|
+ })(
|
381
|
385
|
<Input
|
382
|
386
|
placeholder="请输入H5活动链接地址"
|
383
|
387
|
disabled={formsDate.isMiniapp}
|
|
@@ -385,16 +389,20 @@ const header = (props) => {
|
385
|
389
|
)}
|
386
|
390
|
</Form.Item>)}
|
387
|
391
|
{hiddenStatus && (<Form.Item label="分享设置" help="建议图片尺寸:750*600px,比例5:4,格式:jpg">
|
388
|
|
- {getFieldDecorator('shareImg',{initialValue : formsDate.shareImg,
|
|
392
|
+ {getFieldDecorator('shareImg', {
|
|
393
|
+ initialValue: formsDate.shareImg,
|
389
|
394
|
rules: [
|
390
|
395
|
{ required: true, message: '请选择分享图片' },
|
391
|
|
- ]})(<ImageUploader />)}
|
|
396
|
+ ]
|
|
397
|
+ })(<ImageUploader />)}
|
392
|
398
|
</Form.Item>)}
|
393
|
399
|
{hiddenStatus && (<Form.Item label="活动分享语">
|
394
|
|
- {getFieldDecorator('shareTitle',{initialValue : formsDate.shareTitle,
|
|
400
|
+ {getFieldDecorator('shareTitle', {
|
|
401
|
+ initialValue: formsDate.shareTitle,
|
395
|
402
|
rules: [
|
396
|
403
|
{ required: true, message: '请输入活动分享语' },
|
397
|
|
- ]})(
|
|
404
|
+ ]
|
|
405
|
+ })(
|
398
|
406
|
<Input
|
399
|
407
|
placeholder="分享语,不超过15个字"
|
400
|
408
|
maxLength="15"
|
|
@@ -402,10 +410,12 @@ const header = (props) => {
|
402
|
410
|
)}
|
403
|
411
|
</Form.Item>)}
|
404
|
412
|
{hiddenStatus && (<Form.Item label="中间页飞机图" help="建议图片尺寸:750*1667px,比例9:20,格式:jpg。图片底部不要放置关键信息。">
|
405
|
|
- {getFieldDecorator('middleImg',{initialValue : formsDate.middleImg,
|
|
413
|
+ {getFieldDecorator('middleImg', {
|
|
414
|
+ initialValue: formsDate.middleImg,
|
406
|
415
|
rules: [
|
407
|
416
|
{ required: true, message: '请选择中间页飞机图' },
|
408
|
|
- ]})(<ImageUploader />)}
|
|
417
|
+ ]
|
|
418
|
+ })(<ImageUploader />)}
|
409
|
419
|
</Form.Item>)}
|
410
|
420
|
<Form.Item {...tailFormItemLayout}>
|
411
|
421
|
<AuthButton name="admin.taDrainage.id.put" noRight={null}>
|
|
@@ -425,7 +435,7 @@ const header = (props) => {
|
425
|
435
|
|
426
|
436
|
|
427
|
437
|
//重置搜索
|
428
|
|
- function handleReset () {
|
|
438
|
+ function handleReset() {
|
429
|
439
|
props.form.resetFields();
|
430
|
440
|
localStorage.setItem("drainageActivePageParams", JSON.stringify({ pageNum: 1, pageSize: 10 }));
|
431
|
441
|
gettaDrainage({ pageNum: 1, pageSize: 10 })
|
|
@@ -433,7 +443,7 @@ const header = (props) => {
|
433
|
443
|
|
434
|
444
|
|
435
|
445
|
|
436
|
|
- function addshowModal (datas) {
|
|
446
|
+ function addshowModal(datas) {
|
437
|
447
|
|
438
|
448
|
// alert(datas.drainageId)
|
439
|
449
|
setFormsDate(datas)
|
|
@@ -443,7 +453,7 @@ const header = (props) => {
|
443
|
453
|
});
|
444
|
454
|
};
|
445
|
455
|
|
446
|
|
- function showModal () {
|
|
456
|
+ function showModal() {
|
447
|
457
|
setFormsDate({
|
448
|
458
|
drainageId: '',
|
449
|
459
|
name: '',
|
|
@@ -463,14 +473,14 @@ const header = (props) => {
|
463
|
473
|
});
|
464
|
474
|
}
|
465
|
475
|
|
466
|
|
- function handleOk () {
|
|
476
|
+ function handleOk() {
|
467
|
477
|
|
468
|
478
|
|
469
|
479
|
setDate({
|
470
|
480
|
ModalText: 'The modal will be closed after two seconds',
|
471
|
481
|
confirmLoading: true,
|
472
|
482
|
});
|
473
|
|
- function setTimeout () {
|
|
483
|
+ function setTimeout() {
|
474
|
484
|
setDate({
|
475
|
485
|
visible: false,
|
476
|
486
|
confirmLoading: false,
|
|
@@ -478,13 +488,13 @@ const header = (props) => {
|
478
|
488
|
};
|
479
|
489
|
};
|
480
|
490
|
|
481
|
|
- function handleCancel () {
|
|
491
|
+ function handleCancel() {
|
482
|
492
|
console.log('Clicked cancel button');
|
483
|
493
|
setDate({
|
484
|
494
|
visible: false,
|
485
|
495
|
});
|
486
|
496
|
};
|
487
|
|
- function handleSubmit (e) {
|
|
497
|
+ function handleSubmit(e) {
|
488
|
498
|
e.preventDefault();
|
489
|
499
|
props.form.validateFields((err, values) => {
|
490
|
500
|
console.log('values', values)
|
|
@@ -498,10 +508,10 @@ const header = (props) => {
|
498
|
508
|
|
499
|
509
|
//打开新页面
|
500
|
510
|
const openIndexImg = () => {
|
501
|
|
- const newWin=window.open('about:blank');
|
502
|
|
- newWin.location.href="http://njcj.oss-cn-shanghai.aliyuncs.com/%E6%A1%88%E4%BE%8B.png"
|
|
511
|
+ const newWin = window.open('about:blank');
|
|
512
|
+ newWin.location.href = "http://njcj.oss-cn-shanghai.aliyuncs.com/%E6%A1%88%E4%BE%8B.png"
|
503
|
513
|
}
|
504
|
|
-
|
|
514
|
+
|
505
|
515
|
const { getFieldDecorator } = props.form;
|
506
|
516
|
const { visible, confirmLoading, ModalText, title } = date;
|
507
|
517
|
return (
|
|
@@ -527,27 +537,27 @@ const header = (props) => {
|
527
|
537
|
)}
|
528
|
538
|
</Form.Item>
|
529
|
539
|
<Form.Item>
|
530
|
|
- {getFieldDecorator('isMiniapp')(
|
531
|
|
- <Select style={{ width: '180px' }} placeholder="是否投放小程序">
|
532
|
|
- <Option value="1">是</Option>
|
533
|
|
- <Option value="0">否</Option>
|
534
|
|
- </Select>,
|
535
|
|
- )}
|
536
|
|
- </Form.Item>
|
537
|
|
- <Form.Item>
|
538
|
|
- {getFieldDecorator('status')(
|
539
|
|
- <Select style={{ width: '180px' }} placeholder="上架状态">
|
540
|
|
- <Option value="1">已上架</Option>
|
541
|
|
- <Option value="0">已下架</Option>
|
542
|
|
- </Select>,
|
543
|
|
- )}
|
544
|
|
- </Form.Item>
|
|
540
|
+ {getFieldDecorator('isMiniapp')(
|
|
541
|
+ <Select style={{ width: '180px' }} placeholder="是否投放小程序">
|
|
542
|
+ <Option value="1">是</Option>
|
|
543
|
+ <Option value="0">否</Option>
|
|
544
|
+ </Select>,
|
|
545
|
+ )}
|
|
546
|
+ </Form.Item>
|
|
547
|
+ <Form.Item>
|
|
548
|
+ {getFieldDecorator('status')(
|
|
549
|
+ <Select style={{ width: '180px' }} placeholder="上架状态">
|
|
550
|
+ <Option value="1">已上架</Option>
|
|
551
|
+ <Option value="0">已下架</Option>
|
|
552
|
+ </Select>,
|
|
553
|
+ )}
|
|
554
|
+ </Form.Item>
|
545
|
555
|
<Form.Item >
|
546
|
|
- <AuthButton name="admin.taDrainage.search" noRight={null}>
|
547
|
|
- <Button type="primary" htmlType="submit" className={styles.searchBtn} onClick>
|
548
|
|
- 搜索
|
|
556
|
+ <AuthButton name="admin.taDrainage.search" noRight={null}>
|
|
557
|
+ <Button type="primary" htmlType="submit" className={styles.searchBtn} onClick>
|
|
558
|
+ 搜索
|
549
|
559
|
</Button>
|
550
|
|
- </AuthButton>
|
|
560
|
+ </AuthButton>
|
551
|
561
|
<Button style={{ marginLeft: 8 }} onClick={handleReset}>
|
552
|
562
|
重置
|
553
|
563
|
</Button>
|
|
@@ -556,7 +566,7 @@ const header = (props) => {
|
556
|
566
|
<AuthButton name="admin.taDrainage.add.post" noRight={null}>
|
557
|
567
|
<Button type="danger" className={styles.addBtn} onClick={showModal}>新增</Button>
|
558
|
568
|
</AuthButton>
|
559
|
|
- <span style={{ color: '#66B3FF', cursor: 'pointer', margin: '20px',display:'inline-block' }} onClick={openIndexImg}>优质案例</span>
|
|
569
|
+ <span style={{ color: '#66B3FF', cursor: 'pointer', margin: '20px', display: 'inline-block' }} onClick={openIndexImg}>优质案例</span>
|
560
|
570
|
<Modal
|
561
|
571
|
title={title}
|
562
|
572
|
|
|
@@ -568,13 +578,13 @@ const header = (props) => {
|
568
|
578
|
>
|
569
|
579
|
<Formss formsDate={formsdate} />
|
570
|
580
|
</Modal>
|
571
|
|
- <Table
|
572
|
|
- // onRow={record => {
|
573
|
|
- // return {
|
574
|
|
- // onClick: toDrainageDetail(record.drainageId),
|
575
|
|
- // };
|
576
|
|
- // }}
|
577
|
|
- columns={columns} dataSource={datas.records} pagination={false} rowKey="drainageList" />
|
|
581
|
+ <Table
|
|
582
|
+ // onRow={record => {
|
|
583
|
+ // return {
|
|
584
|
+ // onClick: toDrainageDetail(record.drainageId),
|
|
585
|
+ // };
|
|
586
|
+ // }}
|
|
587
|
+ columns={columns} dataSource={datas.records} pagination={false} rowKey="drainageList" />
|
578
|
588
|
<div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
|
579
|
589
|
<Pagination showQuickJumper defaultCurrent={1} total={datas.total} onChange={(e) => changePageNum(e)} current={datas.current} />
|
580
|
590
|
</div>
|