wuye / webui

Commit 0f7e0a5163028d4caac69c9b8567bb61699f82c2

Authored by wuxw
1 parent e3a9add5

v1.9 优化客户反馈 欠费缴费选择问题

Inline Side-by-side
Showing 2 changed files with 189 additions and 189 deletions
src/views/fee/owePayFeeOrderList.vue
  View file @0f7e0a5
... ... @@ -18,8 +18,8 @@
18 18 </div>
19 19 </div>
20 20  
21   - <el-table :data="owePayFeeOrderInfo.oweFees" border style="width: 100%">
22   - <el-table-column type="selection" width="55" @selection-change="handleSelectionChange"></el-table-column>
  21 + <el-table ref="oweTable" :data="owePayFeeOrderInfo.oweFees" border style="width: 100%" @selection-change="handleSelectionChange">
  22 + <el-table-column type="selection" width="55"></el-table-column>
23 23 <el-table-column prop="payerObjName" :label="$t('owePayFeeOrder.payerObj')" align="center"></el-table-column>
24 24 <el-table-column prop="feeTypeCdName" :label="$t('owePayFeeOrder.feeType')" align="center"></el-table-column>
25 25 <el-table-column prop="feeName" :label="$t('owePayFeeOrder.feeItem')" align="center"></el-table-column>
... ... @@ -38,7 +38,7 @@
38 38 <el-table-column prop="feeTotalPrice" :label="$t('owePayFeeOrder.oweAmount')" align="center"></el-table-column>
39 39 </el-table>
40 40  
41   - <el-row class="footer-row">
  41 + <el-row class="footer-row" :gutter="10">
42 42 <el-col :span="16"></el-col>
43 43 <el-col :span="4" class="amount-col">
44 44 {{ $t('owePayFeeOrder.paymentAmount') }}：
... ... @@ -50,7 +50,7 @@
50 50 {{ $t('owePayFeeOrder.scanPay') }}
51 51 </el-button>
52 52 </el-col>
53   - <el-col :span="2">
  53 + <el-col :span="2" >
54 54 <el-button type="primary" size="medium" @click="_payFee()" class="pay-btn">
55 55 {{ $t('owePayFeeOrder.pay') }}
56 56 </el-button>
... ... @@ -59,8 +59,8 @@
59 59 </el-card>
60 60  
61 61 <!-- 缴费确认弹窗 -->
62   - <el-dialog :title="$t('owePayFeeOrder.paymentConfirm')" :visible.sync="showPayModal" width="50%">
63   - <el-form label-width="120px">
  62 + <el-dialog :title="$t('owePayFeeOrder.paymentConfirm')" :visible.sync="showPayModal" width="40%">
  63 + <el-form label-width="120px" class="text-left">
64 64 <el-form-item :label="$t('owePayFeeOrder.room')">
65 65 <span>{{ owePayFeeOrderInfo.roomName }}</span>
66 66 </el-form-item>
... ... @@ -102,7 +102,7 @@
102 102 <el-button type="primary" @click="_printAndBack('ON')">
103 103 {{ $t('owePayFeeOrder.mergePrint') }}
104 104 </el-button>
105   - <el-button type="primary" @click="_printAndBack('OFF')">
  105 + <el-button type="primary" @click="_printAndBack('OFF')">
106 106 {{ $t('owePayFeeOrder.printReceipt') }}
107 107 </el-button>
108 108 </span>
... ... @@ -194,6 +194,8 @@ export default {
194 194  
195 195 handleSelectionChange(val) {
196 196 this.owePayFeeOrderInfo.selectPayFeeIds = val.map(item => item.feeId)
  197 + this._dealSelectFee()
  198 +
197 199 },
198 200  
199 201 async _loadOweFees() {
... ... @@ -224,6 +226,13 @@ export default {
224 226 })
225 227  
226 228 this._dealSelectFee()
  229 +
  230 + // 等待表格渲染完成后选中所有行
  231 + this.$nextTick(() => {
  232 + this.owePayFeeOrderInfo.oweFees.forEach(row => {
  233 + this.$refs.oweTable.toggleRowSelection(row, true)
  234 + })
  235 + })
227 236 } catch (error) {
228 237 console.error('获取欠费数据失败:', error)
229 238 }
... ... @@ -420,6 +429,7 @@ export default {
420 429 }, 2000)
421 430  
422 431 this.owePayFeeOrderInfo.selectPayFeeIds = []
  432 + this.$refs.oweTable && this.$refs.oweTable.clearSelection()
423 433 this._loadOweFees()
424 434 this.$message.success(res.msg)
425 435 },
... ...
src/views/fee/printPayFeeBangTaiList.vue
  View file @0f7e0a5
1 1 <template>
2 2 <div class="print-pay-fee-container">
3   - <el-row>
4   - <el-col :span="24">
5   - <div class="text-center">
6   - <div style="color:#000;font-size:36px">{{ printPayFeeInfo.communityName }} {{ printPayFeeInfo.apply ==
7   - 'Y' ? $t('printPayFeeBangTai.applyForm') : $t('printPayFeeBangTai.receiptForm')}}</div>
8   - <span style="color:#000;font-size:20px">
9   - <span>{{ $t('printPayFeeBangTai.receiptNum') }}</span>：{{ printPayFeeInfo.receiptNum }}
10   - </span>
11   - </div>
12   - <div style="color:#000;font-size:20px;margin-left:20px">
13   - <div class="float-left">
14   - <span>{{ $t('printPayFeeBangTai.owner') }}</span>{{ printPayFeeInfo.payObjName }}
15   - </div>
16   - <div class="float-right text-right">
17   - <span>{{ $t('printPayFeeBangTai.paymentTime') }}</span>{{ printPayFeeInfo.feeTime }}
18   - </div>
19   - </div>
20   - <table class="table vc-table-border" style="color:#000;font-size:20px">
21   - <thead>
22   - <tr>
23   - <th scope="col" class="text-center" width="80px">{{ $t('printPayFeeBangTai.serialNum') }}</th>
24   - <th scope="col" class="text-center">{{ $t('printPayFeeBangTai.feeItem') }}</th>
25   - <th scope="col" class="text-center">{{ $t('printPayFeeBangTai.houseCar') }}</th>
26   - <th scope="col" class="text-center">{{ $t('printPayFeeBangTai.feeRange') }}</th>
27   - <th scope="col" class="text-center">{{ $t('printPayFeeBangTai.cycle') }}</th>
28   - <th scope="col" class="text-center">{{ $t('printPayFeeBangTai.unitPrice') }}</th>
29   - <th scope="col" class="text-center">{{ $t('printPayFeeBangTai.areaUsage') }}</th>
30   - <th scope="col" class="text-center">{{ $t('printPayFeeBangTai.paymentMethod') }}</th>
31   - <th scope="col" class="text-center">{{ $t('printPayFeeBangTai.amount') }}</th>
32   - <th scope="col" class="text-center">{{ $t('printPayFeeBangTai.discountAmount') }}</th>
33   - <th scope="col" class="text-center">{{ $t('printPayFeeBangTai.remark') }}</th>
34   - </tr>
35   - </thead>
36   - <tbody class="vc-table-border" style="color:#000;font-size:20px">
37   - <tr v-for="(item, index) in printPayFeeInfo.fees" class="vc-table-border" :key="index">
38   - <th scope="row" class="text-center">{{ index + 1 }}</th>
39   - <td class="text-center">{{ item.feeName }}</td>
40   - <td class="text-center">{{ item.objName }}</td>
41   - <td class="text-center" v-if="item.preDegrees">
42   - {{ formatDate(item.startTime) }}<span>{{ $t('printPayFeeBangTai.to') }}</span>{{ formatDate(item.endTime) }}<br>
43   - {{ item.preDegrees }} {{ $t('printPayFeeBangTai.to') }} {{ item.curDegrees }}
44   - </td>
45   - <td class="text-center" v-else-if="item.feeTypeCd == '888800010006'">
46   - {{ $t('printPayFeeBangTai.none') }}
47   - </td>
48   - <td class="text-center" v-else>
49   - {{ formatDate(item.startTime) }}<span>{{ $t('printPayFeeBangTai.to') }}</span>{{ formatDate(item.endTime) }}
50   - </td>
51   - <td class="text-center">{{ item.cycle }}</td>
52   - <td class="text-center">{{ item.squarePrice }}</td>
53   - <td class="text-center">{{ item.area }}</td>
54   - <td class="text-center">{{ item.primeRate }}</td>
55   - <td class="text-center">{{ item.amount }}</td>
56   - <td class="text-center">{{ item.discountPrice }}</td>
57   - <td class="text-center" width="200px">{{ item.remark }}</td>
58   - </tr>
59   - <tr>
60   - <td colspan="3" class="text-center">
61   - <span>{{ $t('printPayFeeBangTai.capitalRMB') }}</span>（元）
62   - </td>
63   - <td colspan="4" class="text-center">{{ changeNumMoneyToChinese(printPayFeeInfo.amount) }}</td>
64   - <td colspan="1" class="text-center">{{ computeSumArea() }}</td>
65   - <td colspan="3" class="text-center">{{ printPayFeeInfo.amount }}</td>
66   - </tr>
67   - <tr height="60px">
68   - <td colspan="6">
69   - <div style="max-width: 600px;">
70   - <div v-html="printPayFeeInfo.content"></div>
71   - </div>
72   - </td>
73   - <td colspan="5">
74   - <img :src="printPayFeeInfo.qrImg" width="100px" height="100px">
75   - </td>
76   - </tr>
77   - </tbody>
78   - </table>
79   - </el-col>
80   - </el-row>
81   - <el-row>
82   - <el-col :span="20">
83   - <div class="row" style="color:#000;font-size:20px;margin-left: 10px;">
84   - <div class="float-left" style="width: 20%;">
85   - <span>{{ $t('printPayFeeBangTai.departmentHead') }}</span>：
86   - </div>
87   - <div class="float-left" style="width: 20%;">
88   - <span>{{ $t('printPayFeeBangTai.handler') }}</span>：{{ userInfo.name }}
  3 + <div class="text-center">
  4 + <div style="color:#000;font-size:36px">
  5 + {{ printPayFeeInfo.communityName }}
  6 + <span v-if="printPayFeeInfo.apply === 'Y'">{{ $t('printPayFeeBangTai.applyForm') }}</span>
  7 + <span v-if="printPayFeeInfo.apply === 'N'">{{ $t('printPayFeeBangTai.receiptForm') }}</span>
  8 + </div>
  9 + <span style="color:#000;font-size:20px">
  10 + {{ $t('printPayFeeBangTai.receiptNum') }}：{{ printPayFeeInfo.receiptNum }}
  11 + </span>
  12 + </div>
  13 + <div style="color:#000;font-size:20px;margin-left:20px">
  14 + <div class="float-left">
  15 + <span>{{ $t('printPayFeeBangTai.owner') }}</span>：{{ printPayFeeInfo.payObjName }}
  16 + </div>
  17 + <div class="float-right text-right">
  18 + <span>{{ $t('printPayFeeBangTai.paymentTime') }}</span>：{{ printPayFeeInfo.feeTime }}
  19 + </div>
  20 + </div>
  21 +
  22 + <table class="table vc-table-border" style="color:#000;font-size:20px;width:100%;border-collapse:collapse;">
  23 + <thead>
  24 + <tr>
  25 + <th class="text-center" width="80px">{{ $t('printPayFeeBangTai.serialNum') }}</th>
  26 + <th class="text-center">{{ $t('printPayFeeBangTai.feeItem') }}</th>
  27 + <th class="text-center">{{ $t('printPayFeeBangTai.houseCar') }}</th>
  28 + <th class="text-center">{{ $t('printPayFeeBangTai.feeRange') }}</th>
  29 + <th class="text-center">{{ $t('printPayFeeBangTai.cycle') }}</th>
  30 + <th class="text-center">{{ $t('printPayFeeBangTai.unitPrice') }}</th>
  31 + <th class="text-center">{{ $t('printPayFeeBangTai.areaUsage') }}</th>
  32 + <th class="text-center">{{ $t('printPayFeeBangTai.paymentMethod') }}</th>
  33 + <th class="text-center">{{ $t('printPayFeeBangTai.amount') }}</th>
  34 + <th class="text-center">{{ $t('printPayFeeBangTai.discountAmount') }}</th>
  35 + <th class="text-center">{{ $t('printPayFeeBangTai.remark') }}</th>
  36 + </tr>
  37 + </thead>
  38 + <tbody style="color:#000;font-size:20px">
  39 + <tr v-for="(item, index) in printPayFeeInfo.fees" :key="index">
  40 + <th scope="row" class="text-center">{{ index + 1 }}</th>
  41 + <td class="text-center">{{ item.feeName }}</td>
  42 + <td class="text-center">{{ item.objName }}</td>
  43 + <td class="text-center">
  44 + <div v-if="item.preDegrees">
  45 + {{ formatDate(item.startTime) }}{{ $t('printPayFeeBangTai.to') }}{{ formatDate(item.endTime) }}<br>
  46 + {{ item.preDegrees }} {{ $t('printPayFeeBangTai.to') }} {{ item.curDegrees }}
89 47 </div>
90   - <div class="float-left" style="width: 20%;">
91   - <span>{{ $t('printPayFeeBangTai.financialCollection') }}</span>：
  48 + <div v-else-if="item.feeTypeCd === '888800010006'">
  49 + {{ $t('printPayFeeBangTai.none') }}
92 50 </div>
93   - <div class="float-left" style="width: 20%;">
94   - <span>{{ $t('printPayFeeBangTai.customerConfirmation') }}</span>：
  51 + <div v-else>
  52 + {{ formatDate(item.startTime) }}{{ $t('printPayFeeBangTai.to') }}{{ formatDate(item.endTime) }}
95 53 </div>
96   - </div>
97   - </el-col>
98   - <el-col :span="4" id="print-btn">
99   - <el-button type="primary" class="float-right" @click="printPurchaseApplyDiv">
100   - <i class="el-icon-printer"></i>&nbsp;{{ $t('printPayFeeBangTai.print') }}
101   - </el-button>
102   - <el-button type="warning" class="float-right" style="margin-right:20px;" @click="closePage">
103   - {{ $t('printPayFeeBangTai.cancel') }}
104   - </el-button>
105   - </el-col>
106   - </el-row>
  54 + </td>
  55 + <td class="text-center">{{ item.cycle }}</td>
  56 + <td class="text-center">{{ item.squarePrice }}</td>
  57 + <td class="text-center">{{ item.area }}</td>
  58 + <td class="text-center">{{ item.primeRate }}</td>
  59 + <td class="text-center">{{ item.amount }}</td>
  60 + <td class="text-center">{{ item.discountPrice }}</td>
  61 + <td class="text-center" width="200px">{{ item.remark }}</td>
  62 + </tr>
  63 + <tr>
  64 + <td colspan="3" class="text-center">{{ $t('printPayFeeBangTai.capitalRMB') }}（元）</td>
  65 + <td colspan="4" class="text-center">{{ changeNumMoneyToChinese(printPayFeeInfo.amount) }}</td>
  66 + <td colspan="1" class="text-center">{{ computeSumArea() }}</td>
  67 + <td colspan="3" class="text-center">{{ printPayFeeInfo.amount }}</td>
  68 + </tr>
  69 + <tr v-if="printPayFeeInfo.content || printPayFeeInfo.qrImg" height="60px">
  70 + <td colspan="6">
  71 + <div style="max-width: 600px;" v-html="printPayFeeInfo.content"></div>
  72 + </td>
  73 + <td colspan="5">
  74 + <img v-if="printPayFeeInfo.qrImg" :src="printPayFeeInfo.qrImg" width="100px" height="100px">
  75 + </td>
  76 + </tr>
  77 + </tbody>
  78 + </table>
  79 +
  80 + <el-row style="color:#000;font-size:18px;margin-left: 10px;" class="flex justify-between">
  81 + <el-col :span="6">{{ $t('printPayFeeBangTai.departmentHead') }}</el-col>
  82 + <el-col :span="6">{{ $t('printPayFeeBangTai.handler') }}：{{ userInfo.name }}</el-col>
  83 + <el-col :span="6">{{ $t('printPayFeeBangTai.financialCollection') }}</el-col>
  84 + <el-col :span="6">{{ $t('printPayFeeBangTai.customerConfirmation') }}</el-col>
  85 + </el-row>
  86 +
  87 + <el-row id="print-btn">
  88 + <el-col :span="24">
  89 + <el-button type="primary" class="float-right" @click="handlePrint">
  90 + <i class="el-icon-printer"></i>&nbsp;{{ $t('common.print') }}
  91 + </el-button>
  92 + <el-button type="warning" class="float-right" style="margin-right:20px;" @click="handleClose">
  93 + {{ $t('common.cancel') }}
  94 + </el-button>
  95 + </el-col>
  96 + </el-row>
107 97 </div>
108 98 </template>
109 99  
... ... @@ -141,67 +131,69 @@ export default {
141 131 }
142 132 },
143 133 created() {
  134 + this.communityId = getCommunityId()
  135 + this.userInfo = {
  136 + userId: getUserId(),
  137 + name: getUserName()
  138 + }
144 139 this.initData()
145   - this.loadData()
146 140 },
147 141 methods: {
148 142 initData() {
149 143 this.printPayFeeInfo.receiptId = this.$route.query.receiptId
150 144 this.printPayFeeInfo.receiptIds = this.$route.query.receiptIds
  145 + this.printPayFeeInfo.detailIds = this.$route.query.detailIds
  146 +
151 147 this.printPayFeeInfo.apply = this.$route.query.apply || 'N'
152 148 this.printPayFeeInfo.merge = this.$route.query.merge
153   - this.communityId = getCommunityId()
154   - this.userInfo = {
155   - userId: getUserId(),
156   - name: getUserName()
157   - }
158   - },
159   - async loadData() {
160 149 this.printPayFeeInfo.communityName = getCommunityName()
161   - await this.loadReceipt()
162   - await this.loadPrintSpec()
  150 +
  151 + this.loadReceipt()
  152 + this.loadPrintSpec()
163 153 },
164   - async loadReceipt() {
165   - try {
166   - const params = {
167   - page: 1,
168   - row: 30,
169   - receiptId: this.printPayFeeInfo.receiptId,
170   - receiptIds: this.printPayFeeInfo.receiptIds,
171   - communityId: this.communityId
172   - }
173   - const { data } = await queryFeeReceipt(params)
174   - const _feeReceipt = data
175   - let _amount = 0
176   - _feeReceipt.forEach(item => {
177   - _amount += parseFloat(item.amount)
  154 + loadReceipt() {
  155 + const params = {
  156 + page: 1,
  157 + row: 30,
  158 + receiptId: this.printPayFeeInfo.receiptId,
  159 + receiptIds: this.printPayFeeInfo.receiptIds,
  160 + detailIds: this.printPayFeeInfo.detailIds,
  161 + communityId: this.communityId
  162 + }
  163 +
  164 + queryFeeReceipt(params).then(response => {
  165 + const feeReceipt = response.data
  166 + let amount = 0
  167 + feeReceipt.forEach(item => {
  168 + amount += parseFloat(item.amount)
178 169 })
179 170  
180   - this.printPayFeeInfo.amount = _amount.toFixed(2)
181   - this.printPayFeeInfo.roomName = _feeReceipt[0].objName
182   - this.printPayFeeInfo.feeTime = _feeReceipt[0].createTime
183   - this.printPayFeeInfo.payObjName = _feeReceipt[0].payObjName
184   - this.printPayFeeInfo.feeReceipt = _feeReceipt
185   - this.printPayFeeInfo.receiptNum = _feeReceipt[0].receiptCode
186   - await this.loadReceiptDetail()
187   - } catch (error) {
188   - console.error('Failed to load receipt:', error)
189   - }
  171 + this.printPayFeeInfo.amount = amount.toFixed(2)
  172 + this.printPayFeeInfo.roomName = feeReceipt[0].objName
  173 + this.printPayFeeInfo.feeTime = feeReceipt[0].createTime
  174 + this.printPayFeeInfo.payObjName = feeReceipt[0].payObjName
  175 + this.printPayFeeInfo.feeReceipt = feeReceipt
  176 + this.printPayFeeInfo.receiptNum = feeReceipt[0].receiptCode
  177 +
  178 + this.loadReceiptDetail()
  179 + })
190 180 },
191   - async loadReceiptDetail() {
192   - try {
193   - const params = {
194   - page: 1,
195   - row: 100,
196   - receiptId: this.printPayFeeInfo.receiptId,
197   - receiptIds: this.printPayFeeInfo.receiptIds,
198   - communityId: this.communityId,
199   - mergeFee: this.printPayFeeInfo.merge
200   - }
201   - const { data } = await queryFeeReceiptDetail(params)
202   - const _feeReceiptDetails = data
203   - this.printPayFeeInfo.receiptNum = this.printPayFeeInfo.receiptNum + "(" + _feeReceiptDetails[0].payOrderId + ")"
204   - _feeReceiptDetails.forEach(item => {
  181 + loadReceiptDetail() {
  182 + const params = {
  183 + page: 1,
  184 + row: 100,
  185 + receiptId: this.printPayFeeInfo.receiptId,
  186 + receiptIds: this.printPayFeeInfo.receiptIds,
  187 + detailIds: this.printPayFeeInfo.detailIds,
  188 +
  189 + communityId: this.communityId,
  190 + mergeFee: this.printPayFeeInfo.merge
  191 + }
  192 +
  193 + queryFeeReceiptDetail(params).then(response => {
  194 + const feeReceiptDetails = response.data
  195 + this.printPayFeeInfo.receiptNum = this.printPayFeeInfo.receiptNum + "(" + feeReceiptDetails[0].payOrderId + ")"
  196 + feeReceiptDetails.forEach(item => {
205 197 this.printPayFeeInfo.feeReceipt.forEach(im => {
206 198 if (item.receiptId == im.receiptId) {
207 199 item.objName = im.objName
... ... @@ -209,20 +201,19 @@ export default {
209 201 }
210 202 })
211 203 })
212   - this.printPayFeeInfo.fees = _feeReceiptDetails
213   - } catch (error) {
214   - console.error('Failed to load receipt detail:', error)
215   - }
  204 + this.printPayFeeInfo.fees = feeReceiptDetails
  205 + })
216 206 },
217   - async loadPrintSpec() {
218   - try {
219   - const params = {
220   - page: 1,
221   - row: 1,
222   - specCd: 2020,
223   - communityId: this.communityId
224   - }
225   - const { data } = await queryFeePrintSpec(params)
  207 + loadPrintSpec() {
  208 + const params = {
  209 + page: 1,
  210 + row: 1,
  211 + specCd: 2020,
  212 + communityId: this.communityId
  213 + }
  214 +
  215 + queryFeePrintSpec(params).then(response => {
  216 + const data = response.data
226 217 if (data.length > 0) {
227 218 this.printPayFeeInfo.content = data[0].content
228 219 this.printPayFeeInfo.qrImg = data[0].qrImg
... ... @@ -230,18 +221,16 @@ export default {
230 221 this.printPayFeeInfo.communityName = data[0].printName
231 222 }
232 223 }
233   - } catch (error) {
234   - console.error('Failed to load print spec:', error)
235   - }
  224 + })
236 225 },
237 226 computeSumArea() {
238   - let _sum = 0.00
  227 + let sum = 0.00
239 228 this.printPayFeeInfo.fees.forEach(item => {
240 229 if (item.area && this.isNumber(item.area)) {
241   - _sum += parseFloat(item.area)
  230 + sum += parseFloat(item.area)
242 231 }
243 232 })
244   - return _sum.toFixed(2)
  233 + return sum.toFixed(2)
245 234 },
246 235 isNumber(value) {
247 236 return !isNaN(parseFloat(value)) && isFinite(value)
... ... @@ -251,15 +240,13 @@ export default {
251 240 return dateFormat(date)
252 241 },
253 242 changeNumMoneyToChinese,
254   - printPurchaseApplyDiv() {
  243 + handlePrint() {
255 244 this.printFlag = '1'
256 245 document.getElementById("print-btn").style.display = "none"
257 246 window.print()
258   - window.opener = null
259 247 window.close()
260 248 },
261   - closePage() {
262   - window.opener = null
  249 + handleClose() {
263 250 window.close()
264 251 }
265 252 }
... ... @@ -271,10 +258,6 @@ export default {
271 258 padding: 20px;
272 259 }
273 260  
274   -.text-center {
275   - text-align: center;
276   -}
277   -
278 261 .float-left {
279 262 float: left;
280 263 }
... ... @@ -283,9 +266,12 @@ export default {
283 266 float: right;
284 267 }
285 268  
286   -.vc-table-border {
287   - border: 1px solid #000;
288   - border-collapse: collapse;
  269 +.text-center {
  270 + text-align: center;
  271 +}
  272 +
  273 +.text-right {
  274 + text-align: right;
289 275 }
290 276  
291 277 .vc-table-border th,
... ... @@ -294,8 +280,12 @@ export default {
294 280 padding: 5px;
295 281 }
296 282  
297   -#print-btn {
298   - text-align: right;
299   - margin-top: 20px;
  283 +.el-row {
  284 + width: 100%;
  285 + margin-bottom: 20px;
  286 +}
  287 +
  288 +.el-col {
  289 + width: 100%;
300 290 }
301 291 </style>
302 292 \ No newline at end of file
... ...