zls

src/pages/channel/newCustomer/index.jsx

@@ -15,25 +15,31 @@ import request from '../../../utils/request';
 
 // import RaiseHelpDoc from '../edit/components/RaiseHelpDoc';
 
+
 const { RangePicker } = DatePicker
 
 const qrcodelist = props => {
     const { id, name, customerNum } = props.location.query
     const [data, setData] = useState([])
     const [showHelp, setShowHelp] = useState(false)
+    const [endDate, setEndDate] = useState(new Date())
+    const [startDate, setStartDate] = useState(moment().subtract(7, 'day').toDate())
+
 
     // 查询列表
-      const getList = params => {
-        request({ ...apis.channelList.getIntroductionList, params: { ...params,channelId: id } }).then(data => {
-          console.log(data)
-          setData(data)
+    const getList = params => {
+        request({ ...apis.channelList.getIntroductionList, params: { ...params, channelId: id } }).then(data => {
+            console.log(data)
+            setData(data)
         })
-      }
+    }
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
-      useEffect(() => {
-        getList({ pageNum: 1, pageSize: 10 });
-      }, [])
+    useEffect(() => {
+        setEndDate(new Date())
+        setStartDate(moment().subtract(7, 'day').toDate())
+        getList({ pageNum: 1, pageSize: 10, startDate, endDate });
+    }, [])
 
 
     const toNewuser = (record) => {
@@ -46,7 +52,7 @@ const qrcodelist = props => {
                 targetType: record.targetType,
                 buildingId: record.buildingId,
                 newCustomers: record.newCustomers,
-              },
+            },
         });
     }
 
@@ -60,7 +66,7 @@ const qrcodelist = props => {
                 targetType: record.targetType,
                 buildingId: record.buildingId,
                 visitNum: record.visitNum,
-              },
+            },
         });
     }
 
@@ -74,7 +80,7 @@ const qrcodelist = props => {
                 targetType: record.targetType,
                 buildingId: record.buildingId,
                 visitPersons: record.visitPersons,
-              },
+            },
         });
     }
 
@@ -131,18 +137,19 @@ const qrcodelist = props => {
     ];
 
 
-      const changePageNum = pageNumber => {
+    const changePageNum = pageNumber => {
         getList({ pageNum: pageNumber, pageSize: 10, ...props.form.getFieldsValue() })
-      }
+    }
 
 
     // 提交事件
     const handleSubmit = e => {
         e.preventDefault();
+
         props.form.validateFields((err, values) => {
             if (!err) {
                 console.log(values, 'values')
-                getList({ pageNum: 1, pageSize: 10, ...values })
+                getList({ pageNum: 1, pageSize: 10, ...values, startDate, endDate })
             }
         });
     }
@@ -150,10 +157,30 @@ const qrcodelist = props => {
     //   // 重置搜索
     function handleReset() {
         props.form.resetFields();
-        setTime('')
-        getList({ pageNum: 1, pageSize: 10 })
+        setEndDate(new Date())
+        setStartDate(moment().subtract(7, 'day').toDate())
+        getList({ pageNum: 1, pageSize: 10, startDate: moment().subtract(7, 'day').toDate(), endDate: new Date() })
+    }
+
+    function onChangetime(dates, dateStrings) {
+        setEndDate(`${moment(dateStrings[1]).format('YYYY-MM-DDT00:00:00.000')}Z`)
+        setStartDate(`${moment(dateStrings[0]).format('YYYY-MM-DDT00:00:00.000')}Z`)
+        // daterange[1] = `${moment(dateStrings[1]).format('YYYY-MM-DDT00:00:00.000')}Z`
+        // daterange[0] = `${moment(dateStrings[0]).format('YYYY-MM-DDT00:00:00.000')}Z`
+
+    }
+
+    const getDataOf = days => {
+
+        setEndDate(new Date())
+        setStartDate(moment().subtract(days, 'day').toDate())
+
+        getList({ pageNum: 1, pageSize: 10, startDate: moment().subtract(days, 'day').toDate(), endDate: new Date() })
+        // userResource({ startDate: moment().subtract(days, 'day').toDate(), endDate: new Date() })
     }
 
+    const dateRange = [moment(startDate), moment(endDate)]
+
     const { getFieldDecorator } = props.form
     return (
 
@@ -184,34 +211,40 @@ const qrcodelist = props => {
             </Modal>
             <Form layout="inline" style={{ marginBottom: '10px' }} onSubmit={e => handleSubmit(e)}>
                 <Form.Item>
-                    <Radio.Group buttonStyle="solid" value="a">
+                    {getFieldDecorator('state', {
+                        initialValue: 'a'
+                    })(
+                        <Radio.Group buttonStyle="solid" defaultValue="a" >
+                            <Radio.Button value="a" onClick={() => getDataOf(7)}>最近7天</Radio.Button>
+                            <Radio.Button value="b" onClick={() => getDataOf(30)}>最近1月</Radio.Button>
+                        </Radio.Group>,
+                    )}
 
-                        <Radio.Button value="a" onClick={e => handleSubmit(e)}>最近7天</Radio.Button>
-                        <Radio.Button value="b" onClick={e => handleSubmit(e)}>最近1月</Radio.Button>
-                    </Radio.Group>
                 </Form.Item>
+                {/* <Form.Item>
+                        <RangePicker value={dateRange} onChange={handleDateChange} placeholder={['开始日期', '结束日期']} />
+                    </Form.Item> */}
                 <Form.Item>
-                    {getFieldDecorator('time', {
-                        initialValue: [],
-                    })(
-                        <RangePicker
-                            style={{ paddingLeft: '30px' }}
-                            ranges={{
-                                Today: [moment(), moment()],
-                                'This Month': [moment().startOf('month'), moment().endOf('month')],
-                            }}
-                        // onChange={(_dates, dateStrings) => onChangetime(_dates, dateStrings)}
-                        />,
-                    )}
+
+                    <RangePicker
+                        ranges={{
+                            Today: [moment(), moment()],
+                            'This Month': [moment().startOf('month'), moment().endOf('month')],
+                        }}
+                        value={dateRange}
+                        onChange={(_dates, dateStrings) => onChangetime(_dates, dateStrings)}
+                        allowClear={false}
+                    />,
+
                 </Form.Item>
                 <Form.Item>
-                    {getFieldDecorator('build')(
+                    {getFieldDecorator('buildingId')(
                         <BuildSelect style={{ width: '200px' }} />,
                     )}
                 </Form.Item>
                 <Form.Item>
-                    {getFieldDecorator('qrcodetype')(
-                        <QrcodeType all visible/>,
+                    {getFieldDecorator('targetType')(
+                        <QrcodeType all visible />,
                     )}
                 </Form.Item>
                 <Form.Item>
@@ -222,8 +255,8 @@ const qrcodelist = props => {
             <Button type="primary" style={{ float: 'right', marginBottom: '20px', zIndex: 1 }} onClick={() => { }}>导出</Button>
             <Table dataSource={data.records} columns={columns} pagination={false} rowKey={r => r.serialNo} />
             <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
-        <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={e => changePageNum(e)} current={data.current}/>
-      </div>
+                <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={e => changePageNum(e)} current={data.current} />
+            </div>
         </>
     )
 }