index.tsx
5.19 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
import React, {useState} from "react";
import { Card, ConfigProvider, Select, Table, Button, Divider, Input } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import usePagination from "@/hooks/usePagination";
import { getList, ListVO } from './api';
import st from './style.less';
import zhCN from "antd/lib/locale-provider/zh_CN";
import moment from 'moment';
import useInitial from '@/hooks/useInitail';
import * as API from '@/common/api';
import { history } from 'umi';
import DetailModal from "@/pages/pms/partPlan/PlanManage/components/DetailModal";
// 计划状态 1:待审核2:已通过3待付款4已付款9:已拒绝
const statusName: {[key: number]: string} = {
0: '草稿',
1: '待审核',
2: '已通过',
3: '待付款',
4: '已付款',
9: '已拒绝',
};
const { Column } = Table;
export default function Index() {
const { list, paginationConfig, loading, setParams, innerParams } = usePagination<ListVO>(getList, {});
const { data: brands } = useInitial(API.getBrandFilterApi, [], {});
const [visibleDetail, setVisibleDetail] = useState(false);
const [item, setItem] = useState<ListVO>({});
return (
<PageHeaderWrapper title="配件计划管理">
<ConfigProvider locale={zhCN}>
<Card className={st.page}>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', marginBottom: 20}}>
<div style={{display: 'flex', alignItems: 'center'}}>
<Input.Search
allowClear
enterButton
placeholder="输入配件名称/编码搜索"
onSearch={v => setParams({keywords: v}, true)}
style={{ maxWidth: 240, marginRight: 20 }}
/>
<Input.Search
allowClear
enterButton
placeholder="输入计划人员搜索"
onSearch={v => setParams({userName: v}, true)}
style={{ maxWidth: 200, marginRight: 20 }}
/>
<Select
placeholder="请选择品牌"
showSearch
allowClear
style={{ width: 200, marginRight: 20 }}
value={innerParams.brandId}
onChange={brandId => setParams({ ...innerParams, brandId, current: 1 }, true)}
optionFilterProp="children"
>
{brands.map((item: any) => (
<Select.Option value={item.id} key={item.id}>
{item.name}
</Select.Option>
))}
</Select>
<Select
placeholder="状态筛选"
showSearch
allowClear
style={{ width: 200, marginRight: 20 }}
onChange={v => setParams({status: v }, true)}
optionFilterProp="children"
>
<Select.Option value={0} key={0}>草稿</Select.Option>
<Select.Option value={1} key={1}>待审核</Select.Option>
<Select.Option value={2} key={2}>已通过</Select.Option>
<Select.Option value={9} key={9}>已拒绝</Select.Option>
</Select>
</div>
<Button type="primary" onClick={() => history.push('/pms/partPlan/planManage/apply')}>新增</Button>
</div>
<Table
size="small"
loading={loading}
pagination={paginationConfig}
dataSource={list}
rowKey={(item: ListVO) => `${item.planId}`}
onChange={(_pagination) => setParams({ ..._pagination }, true)}
>
<Column title="计划单号" dataIndex="planNo" />
<Column title="品牌" dataIndex="brandName" />
<Column title="计划日期" dataIndex="planDate" render={(t: number) => t && moment(t).format('YYYY-MM-DD HH:mm')} />
<Column title="计划人员" dataIndex="userName" />
<Column title="计划总金额（元）" dataIndex="totalAmount" />
<Column title="状态" dataIndex="status" render={(t: number) => statusName[t]} />
<Column
title="操作"
fixed="right"
render={(text, _item: ListVO) => (
<>
{[0, 9].includes(_item.status || 0) ? (
<a onClick={() => history.push(`/pms/partPlan/planManage/apply?planId=${_item.planId}`)}>
编辑
</a>
)
: (
<a onClick={() => history.push(`/pms/partPlan/planManage/detail/${_item.planId}`)}>
查看
</a>
)}
<Divider type="vertical" />
<a onClick={() => {
setItem(_item);
setVisibleDetail(true);
}}
>
进度
</a>
</>
)}
/>
</Table>
<DetailModal
visible={visibleDetail}
item={item}
onCancel={() => setVisibleDetail(false)}
/>
</Card>
</ConfigProvider>
</PageHeaderWrapper>
);
}