|
@@ -1,10 +1,12 @@
|
1
|
1
|
import React, { useEffect, useState } from 'react'
|
2
|
|
-import { Button, Upload, Icon, Table } from 'antd'
|
|
2
|
+import { Button, Upload, Icon, Table, Select } from 'antd'
|
3
|
3
|
import { fetch, apis } from '@/utils/request'
|
4
|
4
|
import List from '../../../components/List'
|
5
|
5
|
|
6
|
6
|
const billDownloadExcel = fetch(apis.bill.billDownloadExcel)
|
7
|
7
|
const billUploadExcel = fetch(apis.bill.billUploadExcel)
|
|
8
|
+const fetchPhaseList = fetch(apis.buildingOwnerInfo.getPhaseList)
|
|
9
|
+const fetchBuildingList = fetch(apis.buildingOwnerInfo.getBuildingList)
|
8
|
10
|
|
9
|
11
|
const Section = props => {
|
10
|
12
|
return (
|
|
@@ -18,9 +20,13 @@ export default props => {
|
18
|
20
|
const [loading, setLoading] = useState(false)
|
19
|
21
|
const [listData, setListData] = useState([])
|
20
|
22
|
const [pagination, setPagination] = useState({})
|
|
23
|
+ const [phaseId, setPhaseId] = useState(null)
|
|
24
|
+ const [buildingId, setBuildingId] = useState(null)
|
|
25
|
+ const [phaseList, setPhaseList] = useState([])
|
|
26
|
+ const [buildingList, setBuildingList] = useState([])
|
21
|
27
|
|
22
|
28
|
const handleDownloadExcel = () => {
|
23
|
|
- billDownloadExcel().then(res => {
|
|
29
|
+ billDownloadExcel({params: {phaseId,buildingId}}).then(res => {
|
24
|
30
|
const url = window.URL.createObjectURL(new Blob([res]))
|
25
|
31
|
const link = document.createElement('a')
|
26
|
32
|
link.href = url
|
|
@@ -56,10 +62,33 @@ export default props => {
|
56
|
62
|
input.click()
|
57
|
63
|
}
|
58
|
64
|
|
|
65
|
+ const handlePhaseChange = (e) => {
|
|
66
|
+ setPhaseId(e)
|
|
67
|
+ }
|
|
68
|
+
|
|
69
|
+ const handleBuildingChange = (e) => {
|
|
70
|
+ setBuildingId(e)
|
|
71
|
+ }
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+ // 获取期
|
|
75
|
+ useEffect(() => {
|
|
76
|
+ fetchPhaseList().then(res => setPhaseList(res))
|
|
77
|
+ }, [])
|
|
78
|
+
|
|
79
|
+ // 楼栋
|
|
80
|
+ useEffect(() => {
|
|
81
|
+ if (phaseId) {
|
|
82
|
+ fetchBuildingList({params: {phaseId}}).then(res => setBuildingList(res))
|
|
83
|
+ }
|
|
84
|
+ setBuildingId()
|
|
85
|
+ }, [phaseId])
|
|
86
|
+
|
59
|
87
|
useEffect(() => {
|
60
|
88
|
if (props.dataSource) {
|
61
|
89
|
setListData(props.dataSource.billInvoice)
|
62
|
90
|
setPagination({ total: props.dataSource.total })
|
|
91
|
+
|
63
|
92
|
}
|
64
|
93
|
}, [props.dataSource])
|
65
|
94
|
|
|
@@ -67,6 +96,18 @@ export default props => {
|
67
|
96
|
<div>
|
68
|
97
|
<Section>
|
69
|
98
|
<span>如果还未制作账单,请先下载账单模板,按规则填写费用后再上传</span>
|
|
99
|
+ <Select onChange={handlePhaseChange} style={{ width: '120px' }} placeholder="期/区">
|
|
100
|
+ {
|
|
101
|
+ phaseList.map(x => (<Select.Option key={x.id} value={x.id}>{x.name}</Select.Option>))
|
|
102
|
+ }
|
|
103
|
+ </Select>
|
|
104
|
+
|
|
105
|
+ <Select onChange={handleBuildingChange} style={{ width: '120px' }} placeholder="栋">
|
|
106
|
+ {
|
|
107
|
+ buildingList.map(x => (<Select.Option key={x.id} value={x.id}>{x.name}</Select.Option>))
|
|
108
|
+ }
|
|
109
|
+ </Select>
|
|
110
|
+
|
70
|
111
|
<Button type="link" size="small" style={{ marginLeft: '6px' }} onClick={handleDownloadExcel}><Icon type="download" />下载模板</Button>
|
71
|
112
|
<Button type="link" size="small" onClick={handleUploadExcel}><Icon type="upload" />选取账单文件并预览</Button>
|
72
|
113
|
</Section>
|