|
@@ -1,102 +1,67 @@
|
|
|
-import {Card, Calendar, Button} from 'antd';
|
|
|
+import {Card, Calendar, Button, Skeleton} from 'antd';
|
|
|
import css from './index.module.css';
|
|
|
import pcss from '../index.module.css';
|
|
|
-import {FC} from 'react';
|
|
|
+import {FC, useState} from 'react';
|
|
|
import classNames from 'classnames';
|
|
|
import {CheckCircleFilled, ClockCircleFilled} from '@ant-design/icons';
|
|
|
-import {Link} from 'react-router-dom';
|
|
|
+import {useMoreLink, useQueryList} from './hooks';
|
|
|
+import dayjs from 'dayjs';
|
|
|
|
|
|
const DatePanel: FC = function () {
|
|
|
+ const onMoreClick = useMoreLink();
|
|
|
+ const [date, setDate] = useState(dayjs());
|
|
|
+ const {data, isFetching} = useQueryList(date);
|
|
|
+
|
|
|
return (
|
|
|
<Card className={classNames(css.panel, pcss.flexCard)}>
|
|
|
<div className={css.panelContent}>
|
|
|
- <Calendar fullscreen={false} />
|
|
|
+ <Calendar fullscreen={false} onChange={setDate} value={date} />
|
|
|
|
|
|
<div className={css.panelTitle}>
|
|
|
<h4>采购单列表</h4>
|
|
|
- <Link to='/'>
|
|
|
- <Button type='text' className='ant-text-btn-color-primary'>
|
|
|
- 查看更多
|
|
|
- </Button>
|
|
|
- </Link>
|
|
|
+ <Button
|
|
|
+ type='text'
|
|
|
+ className='ant-text-btn-color-primary'
|
|
|
+ onClick={onMoreClick}
|
|
|
+ >
|
|
|
+ 查看更多
|
|
|
+ </Button>
|
|
|
</div>
|
|
|
|
|
|
<ul className={css.panelList}>
|
|
|
- <li>
|
|
|
- <CheckCircleFilled
|
|
|
- style={{
|
|
|
- color: 'var(--primary-color)',
|
|
|
- fontSize: '30px',
|
|
|
- height: '30px',
|
|
|
- }}
|
|
|
- />
|
|
|
- <p>
|
|
|
- <span>DH1231291234</span>
|
|
|
- <span>2020-12-22</span>
|
|
|
- </p>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <CheckCircleFilled
|
|
|
- style={{
|
|
|
- color: 'var(--primary-color)',
|
|
|
- fontSize: '30px',
|
|
|
- height: '30px',
|
|
|
- }}
|
|
|
- />
|
|
|
- <p>
|
|
|
- <span>DH1231291234</span>
|
|
|
- <span>2020-12-22</span>
|
|
|
- </p>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <ClockCircleFilled
|
|
|
- style={{color: '#bbcdc5', fontSize: '30px', height: '30px'}}
|
|
|
- />
|
|
|
- <p>
|
|
|
- <span>DH1231291234</span>
|
|
|
- <span>2020-12-22</span>
|
|
|
- </p>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <CheckCircleFilled
|
|
|
- style={{
|
|
|
- color: 'var(--primary-color)',
|
|
|
- fontSize: '30px',
|
|
|
- height: '30px',
|
|
|
- }}
|
|
|
- />
|
|
|
- <p>
|
|
|
- <span>DH1231291234</span>
|
|
|
- <span>2020-12-22</span>
|
|
|
- </p>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <ClockCircleFilled
|
|
|
- style={{color: '#bbcdc5', fontSize: '30px', height: '30px'}}
|
|
|
- />
|
|
|
- <p>
|
|
|
- <span>DH1231291234</span>
|
|
|
- <span>2020-12-22</span>
|
|
|
- </p>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <ClockCircleFilled
|
|
|
- style={{color: '#bbcdc5', fontSize: '30px', height: '30px'}}
|
|
|
- />
|
|
|
- <p>
|
|
|
- <span>DH1231291234</span>
|
|
|
- <span>2020-12-22</span>
|
|
|
- </p>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <ClockCircleFilled
|
|
|
- style={{color: '#bbcdc5', fontSize: '30px', height: '30px'}}
|
|
|
- />
|
|
|
- <p>
|
|
|
- <span>DH1231291234</span>
|
|
|
- <span>2020-12-22</span>
|
|
|
- </p>
|
|
|
- </li>
|
|
|
+ {isFetching ? (
|
|
|
+ <Skeleton active />
|
|
|
+ ) : (
|
|
|
+ <>
|
|
|
+ {data.map(function ({id, type, orderCode, arrivalTime}) {
|
|
|
+ return (
|
|
|
+ <li key={id}>
|
|
|
+ {type === '0' ? (
|
|
|
+ <ClockCircleFilled
|
|
|
+ style={{
|
|
|
+ color: '#bbcdc5',
|
|
|
+ fontSize: '30px',
|
|
|
+ height: '30px',
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <CheckCircleFilled
|
|
|
+ style={{
|
|
|
+ color: 'var(--primary-color)',
|
|
|
+ fontSize: '30px',
|
|
|
+ height: '30px',
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ <p>
|
|
|
+ <span>{orderCode}</span>
|
|
|
+ <span>{arrivalTime}</span>
|
|
|
+ </p>
|
|
|
+ </li>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </>
|
|
|
+ )}
|
|
|
</ul>
|
|
|
</div>
|
|
|
</Card>
|