|
@@ -3,40 +3,40 @@
|
3
|
3
|
<div class="bill-info-title">
|
4
|
4
|
<div class="title-info">收费组名称: {{ billName }}</div>
|
5
|
5
|
<div class="title-info">收费组说明: {{ billExplain }}</div>
|
6
|
|
- <div class="title-info">截止时间: {{ endDate }}</div>
|
7
|
|
- <el-button type="info">修改</el-button>
|
|
6
|
+ <div class="title-info">截止时间: {{ formatDate(endDate) }}</div>
|
|
7
|
+ <el-button type="info" @click="updateBill">修改</el-button>
|
8
|
8
|
</div>
|
9
|
9
|
<div class="bill-info-search">
|
10
|
10
|
<span style="font-weight: bold;">收费情况</span>
|
11
|
11
|
<el-form :model="formInline" inline="true" class="form-inline">
|
12
|
12
|
<el-form-item label="选择房子">
|
13
|
|
- <el-select v-model="formInline.phase" placeholder="请选择期">
|
|
13
|
+ <el-select v-model="formInline.phase" placeholder="请选择期" @change="buildSelectChange(0)">
|
14
|
14
|
<el-option
|
15
|
|
- v-for="item in options"
|
16
|
|
- :key="item.value"
|
17
|
|
- :label="item.label"
|
18
|
|
- :value="item.value"/>
|
|
15
|
+ v-for="item in phaseList"
|
|
16
|
+ :key="item.id"
|
|
17
|
+ :label="item.phase"
|
|
18
|
+ :value="item.phase"/>
|
19
|
19
|
</el-select>
|
20
|
|
- <el-select v-model="formInline.building" placeholder="请选择栋">
|
|
20
|
+ <el-select v-model="formInline.building" placeholder="请选择栋" @change="buildSelectChange(1)">
|
21
|
21
|
<el-option
|
22
|
|
- v-for="item in options"
|
23
|
|
- :key="item.value"
|
24
|
|
- :label="item.label"
|
25
|
|
- :value="item.value"/>
|
|
22
|
+ v-for="item in buildingList"
|
|
23
|
+ :key="item.id"
|
|
24
|
+ :label="item.building"
|
|
25
|
+ :value="item.building"/>
|
26
|
26
|
</el-select>
|
27
|
|
- <el-select v-model="formInline.unit" placeholder="请选择单元">
|
|
27
|
+ <el-select v-model="formInline.unit" placeholder="请选择单元" @change="buildSelectChange(3)">
|
28
|
28
|
<el-option
|
29
|
|
- v-for="item in options"
|
30
|
|
- :key="item.value"
|
31
|
|
- :label="item.label"
|
32
|
|
- :value="item.value"/>
|
|
29
|
+ v-for="item in unitList"
|
|
30
|
+ :key="item.id"
|
|
31
|
+ :label="item.unit"
|
|
32
|
+ :value="item.unit"/>
|
33
|
33
|
</el-select>
|
34
|
34
|
<el-select v-model="formInline.roomNo" placeholder="请选择户">
|
35
|
35
|
<el-option
|
36
|
|
- v-for="item in options"
|
37
|
|
- :key="item.value"
|
38
|
|
- :label="item.label"
|
39
|
|
- :value="item.value"/>
|
|
36
|
+ v-for="item in roomNoList"
|
|
37
|
+ :key="item.id"
|
|
38
|
+ :label="item.roomNo"
|
|
39
|
+ :value="item.roomNo"/>
|
40
|
40
|
</el-select>
|
41
|
41
|
</el-form-item>
|
42
|
42
|
<br>
|
|
@@ -45,85 +45,114 @@
|
45
|
45
|
</el-form-item>
|
46
|
46
|
<el-form-item label="缴费状态">
|
47
|
47
|
<el-select v-model="formInline.billStatus" placeholder="活动区域">
|
48
|
|
- <el-option label="请选择" value="shanghai"/>
|
|
48
|
+ <el-option label="未缴费" value="0"/>
|
|
49
|
+ <el-option label="已线上缴费" value="1"/>
|
|
50
|
+ <el-option label="已线下缴费" value="2"/>
|
49
|
51
|
</el-select>
|
50
|
52
|
</el-form-item>
|
51
|
53
|
<el-form-item label="缴费人姓名">
|
52
|
54
|
<el-input v-model="formInline.payName"/>
|
53
|
55
|
</el-form-item>
|
54
|
56
|
<el-form-item>
|
55
|
|
- <el-button type="info">清空</el-button>
|
56
|
|
- <el-button type="primary" @click="onSubmit">查询</el-button>
|
|
57
|
+ <el-button type="info" @click="cleanQuery">清空</el-button>
|
|
58
|
+ <el-button type="primary" @click="getBillInvoice">查询</el-button>
|
57
|
59
|
</el-form-item>
|
58
|
60
|
</el-form>
|
59
|
61
|
</div>
|
60
|
62
|
<div class="bill-info-operation">
|
61
|
63
|
<el-button type="primary">添加更多收费单</el-button>
|
62
|
|
- <el-button type="danger">删除</el-button>
|
63
|
|
- <el-button type="primary">设置为已线下缴费</el-button>
|
|
64
|
+ <el-button type="danger" @click="deleteBeachIds">删除</el-button>
|
|
65
|
+ <el-button type="primary" @click="offlinePayment">设置为已线下缴费</el-button>
|
64
|
66
|
<el-button type="success">导出数据</el-button>
|
65
|
67
|
<div style="height: 40px; line-height: 40px; margin-left: 10px; color: #99a9bf;">未缴户主费用可以直接点击 收费金额数字 修改,已缴费业主无法修改,需要线下多退少补</div>
|
66
|
68
|
</div>
|
67
|
69
|
<el-table
|
|
70
|
+ v-loading="tableLoading"
|
68
|
71
|
ref="multipleTable"
|
69
|
72
|
:data="list"
|
70
|
73
|
style="width: 100%; margin-top: 20px;"
|
71
|
|
- border="true"
|
|
74
|
+ border
|
72
|
75
|
@selection-change="handleSelectionChange">
|
73
|
76
|
<el-table-column
|
74
|
77
|
type="selection"
|
75
|
|
- width="55"/>
|
|
78
|
+ width="55"
|
|
79
|
+ align="center"/>
|
76
|
80
|
<el-table-column
|
77
|
81
|
prop="id"
|
78
|
82
|
label="收费单号"
|
79
|
|
- width="55">
|
|
83
|
+ width="55"
|
|
84
|
+ align="center">
|
80
|
85
|
<!--<template slot-scope="scope">{{ scope.row.date }}</template>-->
|
81
|
86
|
</el-table-column>
|
82
|
87
|
<el-table-column
|
83
|
88
|
prop="name"
|
84
|
|
- label="房屋信息">
|
|
89
|
+ label="房屋信息"
|
|
90
|
+ align="center">
|
85
|
91
|
<template slot-scope="scope">{{ scope.row.phase + '期' + scope.row.building + '栋' + scope.row.unit + '单元' + scope.row.roomNo + '户号' }}</template>
|
86
|
92
|
</el-table-column>
|
87
|
93
|
<el-table-column
|
88
|
94
|
prop="ownerName"
|
89
|
95
|
label="业主姓名"
|
|
96
|
+ align="center"
|
90
|
97
|
show-overflow-tooltip/>
|
91
|
98
|
<el-table-column
|
92
|
99
|
prop="billInvoiceExplain"
|
93
|
100
|
label="收费单说明"
|
94
|
|
- width="300"/>
|
|
101
|
+ width="300"
|
|
102
|
+ align="center"/>
|
95
|
103
|
<el-table-column
|
96
|
104
|
prop="payPrice"
|
97
|
|
- label="金额(元)"/>
|
|
105
|
+ label="金额(元)"
|
|
106
|
+ align="center">
|
|
107
|
+ <template slot-scope="scope">
|
|
108
|
+ <span style="color: #409EFF;cursor: pointer" @click="ediPayPrice(scope.row)">{{ scope.row.payPrice }}</span>
|
|
109
|
+ </template>
|
|
110
|
+ </el-table-column>
|
98
|
111
|
<el-table-column
|
99
|
112
|
prop="billStatement"
|
100
|
|
- label="流水"/>
|
|
113
|
+ label="流水"
|
|
114
|
+ align="center"/>
|
101
|
115
|
<el-table-column
|
102
|
116
|
prop="billStatus"
|
103
|
|
- label="缴费状态"/>
|
|
117
|
+ label="缴费状态"
|
|
118
|
+ align="center">
|
|
119
|
+ <template slot-scope="scope">{{ showBillStatus(scope.row.billStatus) }}</template>
|
|
120
|
+ </el-table-column>
|
104
|
121
|
<el-table-column
|
105
|
122
|
prop="payName"
|
106
|
|
- label="缴费人"/>
|
|
123
|
+ label="缴费人"
|
|
124
|
+ align="center"/>
|
107
|
125
|
<el-table-column
|
108
|
126
|
prop="payDate"
|
109
|
|
- label="缴费时间"/>
|
|
127
|
+ label="缴费时间"
|
|
128
|
+ align="center">
|
|
129
|
+ <template slot-scope="scope"> {{ formatDate(scope.row.payDate) }} </template>
|
|
130
|
+ </el-table-column>
|
110
|
131
|
<el-table-column
|
111
|
132
|
prop="createDate"
|
112
|
|
- label="新建时间"/>
|
|
133
|
+ label="新建时间"
|
|
134
|
+ align="center">
|
|
135
|
+ <template slot-scope="scope"> {{ formatDate(scope.row.createDate) }} </template>
|
|
136
|
+ </el-table-column>
|
113
|
137
|
<el-table-column
|
114
|
138
|
prop="createUserName"
|
115
|
|
- label="新建人"/>
|
|
139
|
+ label="新建人"
|
|
140
|
+ align="center"/>
|
116
|
141
|
<el-table-column
|
117
|
142
|
prop="updateUserName"
|
118
|
|
- label="修改时间"/>
|
|
143
|
+ label="修改人"
|
|
144
|
+ align="center"/>
|
119
|
145
|
<el-table-column
|
120
|
146
|
prop="updateDate"
|
121
|
|
- label="修改时间"/>
|
|
147
|
+ label="修改时间"
|
|
148
|
+ align="center">
|
|
149
|
+ <template slot-scope="scope"> {{ formatDate(scope.row.updateDate) }} </template>
|
|
150
|
+ </el-table-column>
|
122
|
151
|
</el-table>
|
123
|
152
|
<div class="pagination-info">
|
124
|
153
|
<el-pagination
|
125
|
154
|
:current-page="formInline.pageNum"
|
126
|
|
- :page-sizes="[100, 200, 300, 400]"
|
|
155
|
+ :page-sizes="[10, 20, 40, 80, 100]"
|
127
|
156
|
:page-size="formInline.pageSize"
|
128
|
157
|
:total="total"
|
129
|
158
|
layout="total, sizes, prev, pager, next, jumper"
|
|
@@ -150,20 +179,43 @@ export default {
|
150
|
179
|
pageSize: 10,
|
151
|
180
|
pageNum: 1
|
152
|
181
|
},
|
153
|
|
- billName: 'xxx收费项目',
|
154
|
|
- billExplain: 'xxx收费说明',
|
155
|
|
- endDate: 'xxx收费项截止时间',
|
|
182
|
+ billName: '', // 缴费组说明
|
|
183
|
+ billExplain: '', // 缴费组说明
|
|
184
|
+ endDate: '', // 缴费组截止时间
|
156
|
185
|
list: [], // 数据列表
|
157
|
|
- total: 0
|
|
186
|
+ total: 0,
|
|
187
|
+ buildingList: [], // seletc 楼栋集合
|
|
188
|
+ unitList: [], // seletc 单元集合
|
|
189
|
+ levelList: [], // seletc 层 集合
|
|
190
|
+ roomNoList: [], // seletc 户号集合
|
|
191
|
+ phaseList: [], // 期 集合
|
|
192
|
+ deleteIds: [], // 需要删除的id集合
|
|
193
|
+ tableLoading: true // 表格加载圈
|
158
|
194
|
}
|
159
|
195
|
},
|
160
|
196
|
mounted() {
|
|
197
|
+ // 获取期
|
|
198
|
+ this.getPhase()
|
161
|
199
|
this.formInline.billId = this.$route.params.id
|
162
|
200
|
this.getBillInvoice()
|
163
|
201
|
},
|
164
|
202
|
methods: {
|
165
|
203
|
handleSelectionChange(val) {
|
166
|
204
|
console.log(val)
|
|
205
|
+ this.deleteIds = []
|
|
206
|
+ for (const i in val) {
|
|
207
|
+ this.deleteIds.push(val[i].id)
|
|
208
|
+ }
|
|
209
|
+ },
|
|
210
|
+ cleanQuery() { // 清空
|
|
211
|
+ this.formInline.phase = ''
|
|
212
|
+ this.formInline.building = ''
|
|
213
|
+ this.formInline.unit = ''
|
|
214
|
+ this.formInline.roomNo = ''
|
|
215
|
+ this.formInline.ownerName = ''
|
|
216
|
+ this.formInline.billStatus = ''
|
|
217
|
+ this.formInline.payName = ''
|
|
218
|
+ this.getBillInvoice()
|
167
|
219
|
},
|
168
|
220
|
getBillInvoice() {
|
169
|
221
|
this.$store.dispatch('GetBillInvoiceList', this.formInline).then(res => {
|
|
@@ -172,8 +224,178 @@ export default {
|
172
|
224
|
this.formInline.pageNum = resData.pageNum
|
173
|
225
|
this.formInline.pageSize = resData.pageSize
|
174
|
226
|
this.total = resData.total
|
|
227
|
+ this.billName = resData.billName
|
|
228
|
+ this.billExplain = resData.billExplain
|
|
229
|
+ this.endDate = resData.endDate
|
|
230
|
+ this.tableLoading = false
|
175
|
231
|
}).catch(() => {
|
176
|
232
|
console.log('GetBillInvoiceList error')
|
|
233
|
+ this.tableLoading = false
|
|
234
|
+ })
|
|
235
|
+ },
|
|
236
|
+ getPhase() { // 获取期
|
|
237
|
+ this.formInline.phase = ''
|
|
238
|
+ this.$store.dispatch('BuildingAddress', this.formInline).then((res) => {
|
|
239
|
+ this.phaseList = res.data
|
|
240
|
+ }).catch(() => {
|
|
241
|
+ console.log('error phase BuildingAddress')
|
|
242
|
+ })
|
|
243
|
+ },
|
|
244
|
+ getBuild() { // 获取楼栋
|
|
245
|
+ this.formInline.building = ''
|
|
246
|
+ this.$store.dispatch('BuildingAddress', this.formInline).then((res) => {
|
|
247
|
+ this.buildingList = res.data
|
|
248
|
+ }).catch(() => {
|
|
249
|
+ console.log('error building BuildingAddress')
|
|
250
|
+ })
|
|
251
|
+ },
|
|
252
|
+ getUnit() { // 获取单元
|
|
253
|
+ this.formInline.unit = ''
|
|
254
|
+ this.$store.dispatch('BuildingAddress', this.formInline).then((res) => {
|
|
255
|
+ this.unitList = res.data
|
|
256
|
+ }).catch(() => {
|
|
257
|
+ console.log('error unit BuildingAddress')
|
|
258
|
+ })
|
|
259
|
+ },
|
|
260
|
+ getLevel() { // 获取楼层
|
|
261
|
+ this.formInline.level = ''
|
|
262
|
+ this.$store.dispatch('BuildingAddress', this.formInline).then((res) => {
|
|
263
|
+ this.levelList = res.data
|
|
264
|
+ }).catch(() => {
|
|
265
|
+ console.log('error level BuildingAddress')
|
|
266
|
+ })
|
|
267
|
+ },
|
|
268
|
+ getRoomNo() { // 获取户号
|
|
269
|
+ this.formInline.roomNo = ''
|
|
270
|
+ this.$store.dispatch('BuildingAddress', this.formInline).then((res) => {
|
|
271
|
+ this.roomNoList = res.data
|
|
272
|
+ }).catch(() => {
|
|
273
|
+ console.log('error roomNo BuildingAddress')
|
|
274
|
+ })
|
|
275
|
+ },
|
|
276
|
+ buildSelectChange(value) { // select 的 change
|
|
277
|
+ switch (value) {
|
|
278
|
+ case 0: // 查询栋
|
|
279
|
+ this.buildingList = []
|
|
280
|
+ this.unitList = []
|
|
281
|
+ this.levelList = []
|
|
282
|
+ this.roomNoList = []
|
|
283
|
+ this.formInline.building = ''
|
|
284
|
+ this.formInline.unit = ''
|
|
285
|
+ this.formInline.level = ''
|
|
286
|
+ this.formInline.roomNo = ''
|
|
287
|
+ this.getBuild()
|
|
288
|
+ break
|
|
289
|
+ case 1: // 查询 单元
|
|
290
|
+ this.unitList = []
|
|
291
|
+ this.levelList = []
|
|
292
|
+ this.roomNoList = []
|
|
293
|
+ this.formInline.unit = ''
|
|
294
|
+ this.formInline.level = ''
|
|
295
|
+ this.formInline.roomNo = ''
|
|
296
|
+ this.getUnit()
|
|
297
|
+ break
|
|
298
|
+ case 2: // 查询 楼层
|
|
299
|
+ this.levelList = []
|
|
300
|
+ this.roomNoList = []
|
|
301
|
+ this.formInline.level = ''
|
|
302
|
+ this.formInline.roomNo = ''
|
|
303
|
+ this.getLevel()
|
|
304
|
+ break
|
|
305
|
+ case 3: // 查询 户号
|
|
306
|
+ this.roomNoList = []
|
|
307
|
+ this.formInline.roomNo = ''
|
|
308
|
+ this.getRoomNo()
|
|
309
|
+ break
|
|
310
|
+ }
|
|
311
|
+ },
|
|
312
|
+ formatDate(val) {
|
|
313
|
+ var value = new Date(val)
|
|
314
|
+ var year = value.getFullYear()
|
|
315
|
+ var month = value.getMonth() + 1
|
|
316
|
+ var day = value.getDate()
|
|
317
|
+ // var hour = value.getHours()
|
|
318
|
+ // var minutes = value.getMinutes()
|
|
319
|
+ // var seconds = value.getSeconds()
|
|
320
|
+ // return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
|
|
321
|
+ return year + '-' + month + '-' + day
|
|
322
|
+ },
|
|
323
|
+ handleSizeChange(val) {
|
|
324
|
+ console.log(`每页 ${val} 条`)
|
|
325
|
+ this.formInline.pageSize = val
|
|
326
|
+ this.getBillInvoice()
|
|
327
|
+ },
|
|
328
|
+ handleCurrentChange(val) {
|
|
329
|
+ console.log(`当前页: ${val}`)
|
|
330
|
+ this.formInline.pageNum = val
|
|
331
|
+ this.getBillInvoice()
|
|
332
|
+ },
|
|
333
|
+ updateBill() { // 跳转修改bill标题页面 bill-info-edi
|
|
334
|
+ this.$router.push({ name: 'bill-info-edi', params: { id: this.formInline.billId }})
|
|
335
|
+ },
|
|
336
|
+ deleteBeachIds() { // 批量删除
|
|
337
|
+ if (this.deleteIds.length <= 0) {
|
|
338
|
+ this.$message.error('请至少选择一行数据')
|
|
339
|
+ return
|
|
340
|
+ }
|
|
341
|
+ this.$store.dispatch('DeleteBillInvoiceById', this.deleteIds).then(res => {
|
|
342
|
+ const code = res.code
|
|
343
|
+ if (code === '0') {
|
|
344
|
+ this.$message.success(res.message)
|
|
345
|
+ this.getBillInvoice()
|
|
346
|
+ return
|
|
347
|
+ }
|
|
348
|
+ this.$message.error(res.message)
|
|
349
|
+ }).catch(() => {
|
|
350
|
+ console.log('DeleteBillInvoiceById error')
|
|
351
|
+ })
|
|
352
|
+ },
|
|
353
|
+ showBillStatus(val) {
|
|
354
|
+ let str = ''
|
|
355
|
+ switch (val) {
|
|
356
|
+ case '0':
|
|
357
|
+ str = '未缴费'
|
|
358
|
+ break
|
|
359
|
+ case '1':
|
|
360
|
+ str = '已线上缴费'
|
|
361
|
+ break
|
|
362
|
+ case '2':
|
|
363
|
+ str = '已线下缴费'
|
|
364
|
+ break
|
|
365
|
+ }
|
|
366
|
+ return str
|
|
367
|
+ },
|
|
368
|
+ offlinePayment() { // 设置线下缴费
|
|
369
|
+ this.$store.dispatch('BillInvoiceOfflinePayment', this.deleteIds).then(res => {
|
|
370
|
+ const resCode = res.code
|
|
371
|
+ if (resCode === '0') {
|
|
372
|
+ this.$message.success(res.message)
|
|
373
|
+ this.getBillInvoice()
|
|
374
|
+ return
|
|
375
|
+ }
|
|
376
|
+ this.$message.error(res.message)
|
|
377
|
+ }).catch(() => {
|
|
378
|
+ console.log('BillInvoiceOfflinePayment error')
|
|
379
|
+ })
|
|
380
|
+ },
|
|
381
|
+ ediPayPrice(obj) { // 修改金额
|
|
382
|
+ const payPrice = obj.payPrice
|
|
383
|
+ this.$prompt('请输入金额', '提示', {
|
|
384
|
+ confirmButtonText: '确定',
|
|
385
|
+ cancelButtonText: '取消',
|
|
386
|
+ inputPlaceholder: payPrice,
|
|
387
|
+ inputPattern: /^\d+\.?\d{0,2}$/,
|
|
388
|
+ inputErrorMessage: '请输入有效的金额'
|
|
389
|
+ }).then(({ value }) => {
|
|
390
|
+ this.$message({
|
|
391
|
+ type: 'success',
|
|
392
|
+ message: '你的金额是: ' + value
|
|
393
|
+ })
|
|
394
|
+ }).catch(() => {
|
|
395
|
+ this.$message({
|
|
396
|
+ type: 'info',
|
|
397
|
+ message: '取消输入'
|
|
398
|
+ })
|
177
|
399
|
})
|
178
|
400
|
}
|
179
|
401
|
}
|