Skip to content

Commit 9dc54ff

Browse files
xpioneerxpioneer
committed
add detail page
1 parent 0dc0c99 commit 9dc54ff

File tree

12 files changed

+198
-65
lines changed

12 files changed

+198
-65
lines changed

‎build/styleLoaderConf.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ const path = require('path'),
33

44
const _DEV_ = process.env.NODE_ENV === 'development'
55

6+
console.log('当前路径：', process.cwd())
7+
68
const postcssLoader = {
79
loader: 'postcss-loader',
810
options: {
@@ -36,6 +38,24 @@ const styleRules = [
3638
],
3739
include: [path.join(__dirname, '../src')]
3840
},
41+
{
42+
test: /\.less$/,
43+
use: [
44+
'style-loader',
45+
'css-loader',
46+
postcssLoader,
47+
{
48+
loader: 'less-loader',
49+
options: {
50+
lessOptions: {
51+
javascriptEnabled: true
52+
}
53+
}
54+
}
55+
],
56+
// include: [path.join(process.cwd(), 'src')]
57+
},
58+
3959
{
4060
test: /\.css$/,
4161
use: [

‎src/@types/global.d.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ declare global {
1212

1313
const $notice: NotificationApi
1414

15-
interface ICommonProps extends RouteComponentProps {
15+
interface ICommonProps<P = AnyObject> extends RouteComponentProps<P>, AnyObject {
1616
[key: string]: any
1717
}
1818

@@ -22,6 +22,8 @@ declare global {
2222
status: number
2323
}
2424

25+
type AnyObject<T = any> = Record<string, T>
26+
2527
type XExtends<T, K extends string | number | symbol, V = any> = T & { [P in K]: V }
2628

2729
interface IPager {

‎src/pages/stocks/detail.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { dateFormat } from '@utils/tools'
2+
import { Spin, Card, Col, Form, Row, Button, Space } from 'antd'
3+
import React, { useState, useEffect } from 'react'
4+
import { getStockDetail } from 'services/stock'
5+
import { Stock, EBlock, EMarket } from 'types/stock'
6+
7+
const StockDetailPage: React.FC<ICommonProps<{id: number}>> = ({
8+
history,
9+
match: {params: {id}}
10+
}) => {
11+
12+
const [data, setData] = useState(new Stock)
13+
const [loading, setLoading] = useState(false)
14+
15+
const onSync = () => {
16+
//
17+
}
18+
const onSyncAll = () => {
19+
//
20+
}
21+
22+
useEffect(() => {
23+
setLoading(true)
24+
getStockDetail(id).then(setData).finally(() => setLoading(false))
25+
}, [id])
26+
27+
console.log(data)
28+
29+
return <Spin spinning={loading}>
30+
<Card title="Stock Detail" extra={<Button onClick={history.goBack}>Back</Button>}>
31+
<Row>
32+
<Col span="24">
33+
<Form.Item label="Stock Name">{data.name}</Form.Item>
34+
</Col>
35+
<Col span="24">
36+
<Form.Item label="Market">{EMarket[data.market]}</Form.Item>
37+
</Col>
38+
<Col span="24">
39+
<Form.Item label="Block">{EBlock[data.block]}</Form.Item>
40+
</Col>
41+
<Col span="24">
42+
<Form.Item label="Last Trade Date">{dateFormat(data.lastestTradeAt)}</Form.Item>
43+
</Col>
44+
<Col span="24">
45+
<Space>
46+
<Button type="primary" onClick={onSync}>Sync</Button>
47+
<Button type="ghost" onClick={onSyncAll}>Sync All</Button>
48+
</Space>
49+
</Col>
50+
</Row>
51+
</Card>
52+
</Spin>
53+
}
54+
55+
export default StockDetailPage

‎src/pages/stocks/history.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { DatePicker } from 'components/datePicker'
44
import { historyColumns } from './util'
55
import { stockHistoryPageList, StockQuery } from '../../services/stockHistory'
66
import { data2PageData, pageData2Params } from '../../utils/tools'
7-
import { marketOpts, blockOpts } from '../../types/stock'
87
import { StockHistory } from '../../types/stockHistory'
98

109
const StockHistoryList: React.FC = () => {
@@ -39,17 +38,17 @@ const StockHistoryList: React.FC = () => {
3938
<Row gutter={16}>
4039
<Col span={6}>
4140
<Form.Item name="code">
42-
<Input allowClear placeholder="代码"/>
41+
<Input allowClear placeholder="Stock Code"/>
4342
</Form.Item>
4443
</Col>
4544
<Col span={6}>
4645
<Form.Item name="name">
47-
<Input allowClear placeholder="名称"/>
46+
<Input allowClear placeholder="Stock Name"/>
4847
</Form.Item>
4948
</Col>
50-
<Col span={6} offset={18}>
51-
<Button onClick={() => onQuery()}>查询</Button>
52-
</Col>
49+
</Row>
50+
<Row justify="end">
51+
<Button type="primary" onClick={() => onQuery()}>Search</Button>
5352
</Row>
5453
</Form>
5554
<Table

‎src/pages/stocks/index.tsx‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,17 @@ import { Row, Col, Form, Table, Input, Button, Spin, Select } from 'antd'
33
import { listColumns } from './util'
44
import { stockPageList, StockQuery } from '../../services/stock'
55
import { data2PageData, pageData2Params } from '../../utils/tools'
6-
import { Stock, marketOpts, blockOpts } from '../../types/stock'
6+
import { Stock, EMarket, EBlock } from '../../types/stock'
7+
import { object2Options } from '@utils/tools'
78

8-
const StockList: React.FC = () => {
9+
const StockList: React.FC<ICommonProps> = ({history}) => {
910

1011
const [form] = Form.useForm<StockQuery>()
1112

1213
const [loading, setLoading] = useState(false)
1314
const [pageData, setPageData] = useState(data2PageData<Stock>())
15+
const [marketOpts] = useState(object2Options(EMarket))
16+
const [blockOpts] = useState(object2Options(EBlock))
1417

1518
const onQuery = (params = pageData2Params(pageData.meta)) => {
1619
const vals = form.getFieldsValue()
@@ -21,6 +24,10 @@ const StockList: React.FC = () => {
2124
}).finally(() => setLoading(false))
2225
}
2326

27+
const onOpts = (data: Stock) => {
28+
history.push(`/home/stocks/stocks/detail/${data.id}`)
29+
}
30+
2431
useEffect(() => {
2532
onQuery()
2633
}, [])
@@ -31,35 +38,33 @@ const StockList: React.FC = () => {
3138
<Row gutter={16}>
3239
<Col span={6}>
3340
<Form.Item name="code">
34-
<Input allowClear placeholder="代码"/>
41+
<Input allowClear placeholder="Stock Code"/>
3542
</Form.Item>
3643
</Col>
3744
<Col span={6}>
3845
<Form.Item name="name">
39-
<Input allowClear placeholder="名称"/>
46+
<Input allowClear placeholder="Stock Name"/>
4047
</Form.Item>
4148
</Col>
4249
<Col span={6}>
4350
<Form.Item name="market">
44-
<Select allowClear placeholder="请选择市场" options={marketOpts()}/>
51+
<Select allowClear placeholder="Please Select Market" options={marketOpts}/>
4552
</Form.Item>
4653
</Col>
4754
<Col span={6}>
4855
<Form.Item name="block">
49-
<Select allowClear placeholder="请选择板块" options={blockOpts()}/>
56+
<Select allowClear placeholder="Please Select Block" options={blockOpts}/>
5057
</Form.Item>
5158
</Col>
5259
</Row>
53-
<Row>
54-
<Col span={6} offset={18}>
55-
<Button onClick={() => onQuery()}>查询</Button>
56-
</Col>
60+
<Row justify="end">
61+
<Button type="primary" onClick={() => onQuery()}>Search</Button>
5762
</Row>
5863
</Form>
5964
<Table
60-
columns={listColumns()}
65+
columns={listColumns(onOpts)}
6166
dataSource={pageData.data}
62-
key="code"
67+
rowKey="id"
6368
pagination={{
6469
...pageData.meta,
6570
onChange: (page, pageSize) => onQuery({page, pageSize})

‎src/pages/stocks/util.tsx‎

Lines changed: 43 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,53 +2,66 @@ import React, { useState, useEffect } from 'react'
22
import { ColumnProps } from 'antd/lib/table'
33
import { Stock, EMarket, EBlock } from '../../types/stock'
44
import { StockHistory } from 'types/stockHistory'
5-
import { Button } from 'antd'
5+
import { Button, Tag } from 'antd'
66

7-
export const listColumns = (): ColumnProps<Stock>[] => {
8-
return [{
9-
title: 'ID',
10-
dataIndex: 'id',
11-
}, {
12-
title: '名称',
13-
dataIndex: 'name',
14-
width: '120px',
15-
}, {
16-
title: '代码',
17-
dataIndex: 'code'
18-
}, {
19-
title: '市场',
20-
dataIndex: 'market',
21-
render: (v, data) => EMarket[data.market]
22-
}, {
23-
title: '板块',
24-
dataIndex: 'block',
25-
render: (v, data) => EBlock[data.block]
26-
}, {
27-
title: '操作',
28-
dataIndex: '',
29-
width: '30px',
30-
render: (v, data) => <Button type="link">查看</Button>
31-
}]
7+
const blockObj = {
8+
1: 'red',
9+
2: 'blue',
10+
3: 'orange'
11+
}
12+
13+
export const listColumns = (onOpts: (data: Stock) => void): ColumnProps<Stock>[] => {
14+
return [
15+
{
16+
title: 'ID',
17+
dataIndex: 'id',
18+
},
19+
{
20+
title: 'Name',
21+
dataIndex: 'name',
22+
width: '120px',
23+
},
24+
{
25+
title: 'Code',
26+
dataIndex: 'code'
27+
},
28+
{
29+
title: 'Market',
30+
dataIndex: 'market',
31+
render: (v, data) => EMarket[data.market]
32+
},
33+
{
34+
title: 'Block',
35+
dataIndex: 'block',
36+
render: (v, data) => <Tag color={blockObj[data.block]}>{EBlock[data.block]}</Tag>
37+
},
38+
{
39+
title: 'Options',
40+
dataIndex: '',
41+
width: '30px',
42+
render: (v, data) => <Button type="link" onClick={() => onOpts(data)}>查看</Button>
43+
}
44+
]
3245
}
3346

3447
export const historyColumns = (): ColumnProps<StockHistory>[] => {
3548
return [
3649
{
37-
title: '名称',
50+
title: 'Name',
3851
dataIndex: 'name',
3952
width: '120px',
4053
fixed: 'left',
4154
},
4255
{
43-
title: '代码',
56+
title: 'Code',
4457
dataIndex: 'code'
4558
},
4659
{
47-
title: '日期',
60+
title: 'Trade Date',
4861
dataIndex: 'tradeAt'
4962
},
5063
{
51-
title: '交易量',
64+
title: 'Volumn',
5265
dataIndex: 'volume'
5366
},
5467
{

‎src/routes/pageRoutes.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,9 @@ const BallEdit = lazy(() => import( /* webpackChunkName:"ballEdit" */ '@pages/lo
3434
const BallTrend = lazy(() => import( /* webpackChunkName:"ballTrend" */ '@pages/lottery/ballTrend'))
3535
const BallChart = lazy(() => import( /* webpackChunkName:"ballChart" */ '@pages/lottery/ballChart'))
3636
const StockList = lazy(() => import( /* webpackChunkName:"StockList" */ '@pages/stocks'))
37+
const StockDetail = lazy(() => import( /* webpackChunkName:"StockDetail" */ '@pages/stocks/detail'))
3738
const StockHistories = lazy(() => import( /* webpackChunkName:"StockList" */ '@pages/stocks/history'))
39+
const StockHistoriesDetail = lazy(() => import( /* webpackChunkName:"StockList" */ '@pages/stocks/historyDetail'))
3840

3941
// demos
4042
const Demo = lazy(() => import( /* webpackChunkName:"demo" */ '@pages/demo/demo'))
@@ -216,7 +218,7 @@ const routesConf: Partial<XRouteProps>[] = [
216218
},
217219
{
218220
path: '/stocks/detail/:id',
219-
component: StockList
221+
component: StockDetail
220222
},
221223
{
222224
title: 'Trade History',
@@ -229,11 +231,12 @@ const routesConf: Partial<XRouteProps>[] = [
229231
{
230232
title: 'Demos',
231233
path: '/demos',
234+
icon: <BulbOutlined/>,
232235
subRoute: [
233236
{
234237
title: 'Demo Page',
235238
path: '/demo',
236-
icon: <BulbOutlined/>,
239+
icon: <ExperimentOutlined/>,
237240
component: Demo
238241
},
239242
{

‎src/services/stock.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,8 @@ export type StockQuery = Omit<Stock & IPageParams, 'id' | 'amount'>
77

88
export const stockPageList = (params: Partial<StockQuery> = pageData2Params()) => {
99
return $http.get<any, IPageData<Stock>>('/api/stocks', { params })
10+
}
11+
12+
export const getStockDetail = (id: number) => {
13+
return $http.get<any, IResponseData<Stock>>(`/api/stocks/${id}`).then(res => res.data)
1014
}

‎src/types/base.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
2+
export class BaseModel {
3+
id: string
4+
createAt: number
5+
createBy: string
6+
updateAt: number
7+
updateBy: string
8+
deleteAt: number
9+
deleteBy: string
10+
}
11+
12+
13+
export enum EDateFormat {
14+
Date = 'yyyy-MM-hh',
15+
DateTime = 'yyyy-MM-hh HH:mm:ss',
16+
DateTimeM = 'yyyy-MM-hh HH:mm'
17+
}

0 commit comments

Comments
 (0)