viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 43fe340f5f3590e99e8bfb6b22a769a81d17d797

Authored by Neeraj Sharma
1 parent 6081d376eb
Exists in master and in 3 other branches amber-development, development, ui-design

second test view invoice pdf print resposive desing

Showing 1 changed file with 100 additions and 121 deletions   Show diff stats
src/pages/Account/viewInvoice.vue
Diff comments   View file @43fe340
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** Edit INVOICE ****** --> 3 <!-- ****** Edit INVOICE ****** -->
4 <v-container fluid grid-list-md> 4 <v-container fluid grid-list-md>
5 <v-layout>
6 <v-flex xs12 sm8 md10>
7 <v-btn class="open-dialog-button mt-3" round dark @click="printInvoice()">
8 Print
9 <v-icon size="18" right dark>print</v-icon>
10 </v-btn>
11 </v-flex>
12 </v-layout>
13 <v-flex xs12 sm12 id="printMe"> 5 <v-flex xs12 sm12 id="printMe">
6 <v-layout>
7 <v-flex xs12 sm12 md10 class="mx-auto">
8 <v-btn class="open-dialog-button mt-3" round dark @click="printInvoice()">
9 Print
10 <v-icon size="18" right dark>print</v-icon>
11 </v-btn>
12 </v-flex>
13 </v-layout>
14 <v-layout wrap> 14 <v-layout wrap>
15 <!-- ****** TABLE DATA MARK ****** --> 15 <!-- ****** TABLE DATA MARK ****** -->
16 <v-flex xs12 sm12 md12> 16 <v-flex xs12 sm12 md10 lg10 class="mx-auto">
17 <v-card 17 <v-card
18 style=" 18 style="
19 background-color: #fff; 19 background-color: #fff;
20 border-color: #fff; 20 border-color: #fff;
21 color: rgba(0,0,0,0.87); 21 color: rgba(0,0,0,0.87);
22 border: 1px solid rgb(226, 231, 235); 22 border: 1px solid rgb(226, 231, 235);
23 -webkit-box-shadow: 0 1px 1px 0 rgba(60,64,67,0.08), 0 1px 3px 1px rgba(60,64,67,0.16); 23 -webkit-box-shadow: 0 1px 1px 0 rgba(60,64,67,0.08), 0 1px 3px 1px rgba(60,64,67,0.16);
24 box-shadow: 0 1px 1px 0 rgba(60,64,67,0.08), 0 1px 3px 1px rgba(60,64,67,0.16);" 24 box-shadow: 0 1px 1px 0 rgba(60,64,67,0.08), 0 1px 3px 1px rgba(60,64,67,0.16);"
25 > 25 >
26 <!-- <v-layout wrap> --> 26 <!-- <v-layout wrap> -->
27 <v-flex xs12 sm12 md12 lg12> 27 <v-layout wrap>
28 <v-layout wrap> 28 <v-flex xs12 sm12 md12>
29 <v-flex xs12 sm4 md4 lg4 style="text-align:center"> 29 <div
30 <v-avatar> 30 style="
31 <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" /> 31 border-bottom: 1px solid #ddd;
32 <img 32 overflow: hidden;
33 src="/static/schoolIcons/INTRACK_White.png" 33 vertical-align: middle;
34 v-else-if="!userData.schoolLogoUrl" 34 margin: 10px;
35 /> 35 padding-bottom: 10px;"
36 </v-avatar> 36 >
37 <p 37 <v-flex xs12 sm12 md12>
38 style="font-size: 20px !important; 38 <v-layout>
39 font-weight: 500; 39 <div class="school-logo">
40 line-height: 1 !important; 40 <v-avatar>
41 letter-spacing: 0.02em !important; 41 <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
42 margin:8px 0px;" 42 <img
43 >{{ userData.name }}</p> 43 src="/static/schoolIcons/INTRACK_White.png"
44 <p>{{ userData.address }}</p> 44 v-else-if="!userData.schoolLogoUrl"
45 </v-flex> 45 />
46 <v-flex xs12 sm4 md4 lg4 class="text-xs-center"> 46 </v-avatar>
47 <v-layout> 47 </div>
48 <v-flex xs4 sm3> 48 <div class="school-name">
49 <h5 style="float:right;margin: 4px 0px;"> 49 <h2>{{ userData.name }}</h2>
50 <b>Name:</b> 50 </div>
51 </h5> 51 </v-layout>
52 </v-flex> 52 </v-flex>
53 <v-flex sm9 xs8> 53 </div>
54 <h5 54 </v-flex>
55 style="margin: 4px 0px;float: left;" 55 <!-- Profile School -->
56 >{{ invoiceParticularData.studentId.name }}</h5> 56 <v-layout>
57 </v-flex> 57 <!-- school info -->
58 </v-layout> 58 <v-flex xs12 sm12 md12 lg12 style="margin:0px 10px; ">
59 <v-layout> 59 <v-layout wrap>
60 <v-flex xs4 sm3> 60 <v-flex xs12 sm4 md4 lg4 style="padding:4px;padding-left:16px;">
61 <h5 style="float:right;margin: 4px 0px;"> 61 <span style="font-size: 16px; color: #707478;">From</span>
62 <b>Class:</b> 62 <br />
63 </h5> 63 <p style="font-size:20px;margin-bottom: 16px;">{{ userData.name }}</p>
64 </v-flex> 64 <p
65 <v-flex sm9 xs8> 65 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
66 <h5 66 >{{ userData.address }}</p>
67 style="margin: 4px 0px;float: left;" 67 <p
68 >{{ invoiceParticularData.classId.classNum }}</h5> 68 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
69 </v-flex> 69 >Phone : {{ userData.mobile }}</p>
70 </v-layout> 70 <p
71 <v-layout> 71 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
72 <v-flex xs4 sm3> 72 >Email : {{ userData.email }}</p>
73 <h5 style="float:right;;margin: 4px 0px;">
74 <b>Roll:</b>
75 </h5>
76 </v-flex>
77 <v-flex sm9 xs8>
78 <h5
79 style="margin: 4px 0px;float: left;"
80 >{{ invoiceParticularData.studentId.rollNo }}</h5>
81 </v-flex>
82 </v-layout>
83 <v-layout>
84 <v-flex xs4 sm3>
85 <h5 style="float:right;margin: 4px 0px;">
86 <b>email:</b>
87 </h5>
88 </v-flex>
89 <v-flex sm9 xs8>
90 <h5
91 class="linkCover"
92 style="margin: 4px 0px;float: left;"
93 >{{ invoiceParticularData.studentId.email }}</h5>
94 </v-flex>
95 </v-layout>
96 </v-flex>
97 <v-flex xs12 sm4 md4 lg4 class="text-xs-center">
98 <v-layout>
99 <v-flex xs4 sm3>
100 <h5 style="float:right;margin: 4px 0px;">
101 <b>invoice:</b>
102 </h5>
103 </v-flex>
104 <v-flex sm9 xs8>
105 <h5
106 style="margin: 4px 0px;float: left;"
107 >#{{ invoiceParticularData.invoiceNumber }}</h5>
108 </v-flex> 73 </v-flex>
109 </v-layout> 74 <!-- student info -->
110 <v-layout> 75 <v-flex xs12 sm4 md4 lg4 style="padding:4px;padding-left:16px;">
111 <v-flex xs4 sm3> 76 <span style="font-size: 16px; color: #707478;">To</span>
112 <h5 style="float:right;margin: 4px 0px;"> 77 <br />
113 <b>Status:</b> 78 <p
114 </h5> 79 style="font-size:20px;margin-bottom: 16px;"
80 >{{ invoiceParticularData.studentId.name }}</p>
81 <p
82 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
83 >Class : {{ invoiceParticularData.classId.classNum }}</p>
84 <p
85 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
86 >Roll : {{ invoiceParticularData.studentId.rollNo }}</p>
87 <p
88 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
89 >Email : {{ invoiceParticularData.studentId.email ? invoiceParticularData.studentId.email: '-' }}</p>
115 </v-flex> 90 </v-flex>
116 <v-flex sm9 xs8> 91 <v-flex xs12 sm4 md4 lg4 style="padding:4px;padding-left:16px;">
117 <h5 92 <br />
118 style="margin: 4px 0px;float: left;" 93 <p
119 >{{ invoiceParticularData.paymentStatus }}</h5> 94 style="font-size: 15px;margin:0px;margin-bottom:8px;"
95 >Invoice #{{ invoiceParticularData.invoiceNumber }}</p>
96 <br />
97 <p
98 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
99 >Status : {{ invoiceParticularData.paymentStatus }}</p>
120 </v-flex> 100 </v-flex>
121 </v-layout> 101 </v-layout>
122 </v-flex> 102 </v-flex>
123 </v-layout> 103 </v-layout>
124 </v-flex> 104 </v-layout>
125 <!-- </v-layout> -->
126 <table 105 <table
127 class="tableRsponsive" 106 class="tableRsponsive"
128 style=" 107 style="
129 table-layout: auto !important; 108 table-layout: auto !important;
130 width: 100% !important; 109 width: 100% !important;
131 border-collapse: collapse; 110 border-collapse: collapse;
132 border: 1px solid #e2e7eb;" 111 border: 1px solid #e2e7eb;"
133 > 112 >
134 <tr 113 <tr
135 class="white--text" 114 class="white--text"
136 style=" 115 style="
137 background: #827bfa !important; 116 background: #827bfa !important;
138 border-color: #827bfa !important;" 117 border-color: #827bfa !important;"
139 > 118 >
140 <th 119 <th
141 style=" 120 style="
142 border: 1px solid #e2e7eb; 121 border: 1px solid #e2e7eb;
143 padding: 10px; 122 padding: 10px;
144 text-align: center;" 123 text-align: center;"
145 >#</th> 124 >#</th>
146 <th 125 <th
147 style=" 126 style="
148 border: 1px solid #e2e7eb; 127 border: 1px solid #e2e7eb;
149 padding: 10px; 128 padding: 10px;
150 text-align: center;" 129 text-align: center;"
151 >Fee Type</th> 130 >Fee Type</th>
152 <th 131 <th
153 style=" 132 style="
154 border: 1px solid #e2e7eb; 133 border: 1px solid #e2e7eb;
155 padding: 10px; 134 padding: 10px;
156 text-align: center;" 135 text-align: center;"
157 >Amount</th> 136 >Amount</th>
158 <th 137 <th
159 style=" 138 style="
160 border: 1px solid #e2e7eb; 139 border: 1px solid #e2e7eb;
161 padding: 10px; 140 padding: 10px;
162 text-align: center;" 141 text-align: center;"
163 >Discount</th> 142 >Discount</th>
164 <th 143 <th
165 style=" 144 style="
166 border: 1px solid #e2e7eb; 145 border: 1px solid #e2e7eb;
167 padding: 10px; 146 padding: 10px;
168 text-align: center;" 147 text-align: center;"
169 >Subtotal</th> 148 >Subtotal</th>
170 </tr> 149 </tr>
171 <tr 150 <tr
172 v-for="(feeType, index) in feeTypeData" 151 v-for="(feeType, index) in feeTypeData"
173 :key="index" 152 :key="index"
174 v-on:keyup="getAmmountDetails(feeType)" 153 v-on:keyup="getAmmountDetails(feeType)"
175 > 154 >
176 <td 155 <td
177 style="width:40px; 156 style="width:40px;
178 border: 1px solid #e2e7eb; 157 border: 1px solid #e2e7eb;
179 padding: 10px; 158 padding: 10px;
180 text-align: center;" 159 text-align: center;"
181 >{{ index + 1 }}</td> 160 >{{ index + 1 }}</td>
182 <td 161 <td
183 style=" 162 style="
184 width:120px; 163 width:120px;
185 border: 1px solid #e2e7eb; 164 border: 1px solid #e2e7eb;
186 padding: 10px; 165 padding: 10px;
187 text-align: center;" 166 text-align: center;"
188 >{{ feeType.feeTypeName }}</td> 167 >{{ feeType.feeTypeName }}</td>
189 <td 168 <td
190 style="width:120px; 169 style="width:120px;
191 border: 1px solid #e2e7eb; 170 border: 1px solid #e2e7eb;
192 padding: 10px; 171 padding: 10px;
193 text-align: center;" 172 text-align: center;"
194 >{{ feeType.amount }}</td> 173 >{{ feeType.amount }}</td>
195 <td 174 <td
196 style="width:120px; 175 style="width:120px;
197 border: 1px solid #e2e7eb; 176 border: 1px solid #e2e7eb;
198 padding: 10px; 177 padding: 10px;
199 text-align: center;" 178 text-align: center;"
200 >{{ feeType.amount-feeType.subTotal }}</td> 179 >{{ feeType.amount-feeType.subTotal }}</td>
201 <td 180 <td
202 style="width:120px; 181 style="width:120px;
203 border: 1px solid #e2e7eb; 182 border: 1px solid #e2e7eb;
204 padding: 10px; 183 padding: 10px;
205 text-align: center;" 184 text-align: center;"
206 >{{ feeType.subTotal }}</td> 185 >{{ feeType.subTotal }}</td>
207 </tr> 186 </tr>
208 <tfoot> 187 <tfoot>
209 <tr> 188 <tr>
210 <td 189 <td
211 colspan="4" 190 colspan="4"
212 style=" 191 style="
213 border: 1px solid #e2e7eb; 192 border: 1px solid #e2e7eb;
214 padding: 10px; 193 padding: 10px;
215 text-align: center;" 194 text-align: center;"
216 > 195 >
217 <span style="float:right">Total Amount (RS) :</span> 196 <span style="float:right">Total Amount (RS) :</span>
218 </td> 197 </td>
219 <td 198 <td
220 style=" 199 style="
221 border: 1px solid #e2e7eb; 200 border: 1px solid #e2e7eb;
222 padding: 10px; 201 padding: 10px;
223 text-align: center;" 202 text-align: center;"
224 >{{ feeType.subTotal }}</td> 203 >{{ feeType.subTotal }}</td>
225 </tr> 204 </tr>
226 <tr> 205 <tr>
227 <td 206 <td
228 colspan="4" 207 colspan="4"
229 style=" 208 style="
230 border: 1px solid #e2e7eb; 209 border: 1px solid #e2e7eb;
231 padding: 10px; 210 padding: 10px;
232 text-align: center;" 211 text-align: center;"
233 > 212 >
234 <span style="float:right">Paid (RS) :</span> 213 <span style="float:right">Paid (RS) :</span>
235 </td> 214 </td>
236 <td 215 <td
237 style=" 216 style="
238 border: 1px solid #e2e7eb; 217 border: 1px solid #e2e7eb;
239 padding: 10px; 218 padding: 10px;
240 text-align: center;" 219 text-align: center;"
241 >{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td> 220 >{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td>
242 </tr> 221 </tr>
243 <tr> 222 <tr>
244 <td 223 <td
245 colspan="4" 224 colspan="4"
246 style=" 225 style="
247 border: 1px solid #e2e7eb; 226 border: 1px solid #e2e7eb;
248 padding: 10px; 227 padding: 10px;
249 text-align: center;" 228 text-align: center;"
250 > 229 >
251 <span style="float:right">Discount :</span> 230 <span style="float:right">Discount :</span>
252 </td> 231 </td>
253 <td 232 <td
254 style=" 233 style="
255 border: 1px solid #e2e7eb; 234 border: 1px solid #e2e7eb;
256 padding: 10px; 235 padding: 10px;
257 text-align: center;" 236 text-align: center;"
258 >{{ feeType.discount}}</td> 237 >{{ feeType.discount}}</td>
259 </tr> 238 </tr>
260 <tr> 239 <tr>
261 <td 240 <td
262 colspan="4" 241 colspan="4"
263 style=" 242 style="
264 border: 1px solid #e2e7eb; 243 border: 1px solid #e2e7eb;
265 padding: 10px; 244 padding: 10px;
266 text-align: center;" 245 text-align: center;"
267 > 246 >
268 <span style="float:right">Balance (RS) :</span> 247 <span style="float:right">Balance (RS) :</span>
269 </td> 248 </td>
270 <td 249 <td
271 style=" 250 style="
272 border: 1px solid #e2e7eb; 251 border: 1px solid #e2e7eb;
273 padding: 10px; 252 padding: 10px;
274 text-align: center;" 253 text-align: center;"
275 >{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td> 254 >{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td>
276 </tr> 255 </tr>
277 </tfoot> 256 </tfoot>
278 </table> 257 </table>
279 <v-layout> 258 <v-layout>
280 <v-flex xs12> 259 <v-flex xs12>
281 <v-card 260 <v-card
282 style=" 261 style="
283 position:relative; 262 position:relative;
284 float:right !important; 263 float:right !important;
285 margin:10px 0px; 264 margin:10px 0px;
286 -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important; 265 -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;
287 box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;" 266 box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;"
288 > 267 >
289 <div 268 <div
290 style=" 269 style="
291 min-height: 20px; 270 min-height: 20px;
292 padding: 9px; 271 padding: 9px;
293 margin-bottom: 20px; 272 margin-bottom: 20px;
294 background-color: #f0f3f5; 273 background-color: #f0f3f5;
295 border: 1px solid #E2E7EB; 274 border: 1px solid #E2E7EB;
296 border-radius: 3px;" 275 border-radius: 3px;"
297 > 276 >
298 <p 277 <p
299 style=" 278 style="
300 margin: 0 0 10px; 279 margin: 0 0 10px;
301 font-size: 12px;" 280 font-size: 12px;"
302 > 281 >
303 Create By : Admin 282 Create By : Admin
304 <br /> 283 <br />
305 Date : {{ dates(invoiceParticularData.created) }} 284 Date : {{ dates(invoiceParticularData.created) }}
306 </p> 285 </p>
307 </div> 286 </div>
308 </v-card> 287 </v-card>
309 </v-flex> 288 </v-flex>
310 </v-layout> 289 </v-layout>
311 </v-card> 290 </v-card>
312 </v-flex> 291 </v-flex>
313 </v-layout> 292 </v-layout>
314 </v-flex> 293 </v-flex>
315 </v-container> 294 </v-container>
316 <div class="loader" v-if="showLoader"> 295 <div class="loader" v-if="showLoader">
317 <v-progress-circular indeterminate color="white"></v-progress-circular> 296 <v-progress-circular indeterminate color="white"></v-progress-circular>
318 </div> 297 </div>
319 </v-app> 298 </v-app>
320 </template> 299 </template>
321 300
322 <script> 301 <script>
323 import http from "@/Services/http.js"; 302 import http from "@/Services/http.js";
324 import moment from "moment"; 303 import moment from "moment";
325 304
326 export default { 305 export default {
327 data: () => ({ 306 data: () => ({
328 showLoader: false, 307 showLoader: false,
329 feeTypes: [], 308 feeTypes: [],
330 filterData: [], 309 filterData: [],
331 invoiceData: {}, 310 invoiceData: {},
332 feeType: { 311 feeType: {
333 amount: "", 312 amount: "",
334 discount: "", 313 discount: "",
335 totalPaidAmount: "", 314 totalPaidAmount: "",
336 subTotal: "", 315 subTotal: "",
337 feeTypeName: "" 316 feeTypeName: ""
338 }, 317 },
339 feeTypeData: [], 318 feeTypeData: [],
340 token: "", 319 token: "",
341 invoiceParticularData: { 320 invoiceParticularData: {
342 studentId: { 321 studentId: {
343 name: "" 322 name: ""
344 }, 323 },
345 classId: { 324 classId: {
346 classNum: "" 325 classNum: ""
347 } 326 }
348 }, 327 },
349 userData: { 328 userData: {
350 name: "" 329 name: ""
351 } 330 }
352 }), 331 }),
353 332
354 methods: { 333 methods: {
355 dates: function(date) { 334 dates: function(date) {
356 return moment(date).format("MMMM DD, YYYY"); 335 return moment(date).format("MMMM DD, YYYY");
357 }, 336 },
358 getInvoiceList() { 337 getInvoiceList() {
359 http() 338 http()
360 .get("/getParticularInvoice", { 339 .get("/getParticularInvoice", {
361 params: { 340 params: {
362 invoiceId: this.$route.params.viewInvoiceId, 341 invoiceId: this.$route.params.viewInvoiceId,
363 schoolId: this.$store.state.schoolId 342 schoolId: this.$store.state.schoolId
364 }, 343 },
365 headers: { Authorization: "Bearer " + this.token } 344 headers: { Authorization: "Bearer " + this.token }
366 }) 345 })
367 .then(response => { 346 .then(response => {
368 this.invoiceParticularData = response.data.data; 347 this.invoiceParticularData = response.data.data;
369 this.invoiceData = this.invoiceParticularData; 348 this.invoiceData = this.invoiceParticularData;
370 this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10); 349 this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10);
371 this.feeTypeData = this.invoiceParticularData.feeType; 350 this.feeTypeData = this.invoiceParticularData.feeType;
372 (this.feeType.amount = response.data.data.totalAmount), 351 (this.feeType.amount = response.data.data.totalAmount),
373 (this.feeType.discount = response.data.data.totalDiscount), 352 (this.feeType.discount = response.data.data.totalDiscount),
374 (this.feeType.subTotal = response.data.data.totalSubTotal), 353 (this.feeType.subTotal = response.data.data.totalSubTotal),
375 (this.feeType.totalPaidAmount = response.data.data.totalPaidAmount); 354 (this.feeType.totalPaidAmount = response.data.data.totalPaidAmount);
376 this.showLoader = false; 355 this.showLoader = false;
377 }) 356 })
378 .catch(error => { 357 .catch(error => {
379 this.showLoader = false; 358 this.showLoader = false;
380 if (error.response.status === 401) { 359 if (error.response.status === 401) {
381 this.$router.replace({ path: "/" }); 360 this.$router.replace({ path: "/" });
382 this.$store.dispatch("setToken", null); 361 this.$store.dispatch("setToken", null);
383 this.$store.dispatch("Id", null); 362 this.$store.dispatch("Id", null);
384 this.$store.dispatch("Role", null); 363 this.$store.dispatch("Role", null);
385 } 364 }
386 }); 365 });
387 }, 366 },
388 getfeeType() { 367 getfeeType() {
389 http() 368 http()
390 .get("/getFeesList", { 369 .get("/getFeesList", {
391 params: { schoolId: this.$store.state.schoolId }, 370 params: { schoolId: this.$store.state.schoolId },
392 headers: { Authorization: "Bearer " + this.token } 371 headers: { Authorization: "Bearer " + this.token }
393 }) 372 })
394 .then(response => { 373 .then(response => {
395 this.feeTypes = response.data.data; 374 this.feeTypes = response.data.data;
396 }) 375 })
397 .catch(err => { 376 .catch(err => {
398 // console.log("err====>", err); 377 // console.log("err====>", err);
399 }); 378 });
400 }, 379 },
401 getAmmountDetails(feeTyp) { 380 getAmmountDetails(feeTyp) {
402 let feeType = { 381 let feeType = {
403 subTotal: "", 382 subTotal: "",
404 subParticularTotal: "", 383 subParticularTotal: "",
405 paidAmount: "" 384 paidAmount: ""
406 }; 385 };
407 // *********** SUBTOTAL *********** 386 // *********** SUBTOTAL ***********
408 feeType.subTotal = 387 feeType.subTotal =
409 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); 388 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
410 this.feeType.subTotal = feeType.subTotal.toFixed(2); 389 this.feeType.subTotal = feeType.subTotal.toFixed(2);
411 // *********** PAID-AMOUNT *********** 390 // *********** PAID-AMOUNT ***********
412 feeType.paidAmount = 391 feeType.paidAmount =
413 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); 392 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
414 this.feeType.paidAmount = feeType.paidAmount.toFixed(2); 393 this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
415 }, 394 },
416 printInvoice() { 395 printInvoice() {
417 // Pass the element id here 396 // Pass the element id here
418 this.$htmlToPaper("printMe"); 397 this.$htmlToPaper("printMe");
419 }, 398 },
420 getUserData() { 399 getUserData() {
421 http() 400 http()
422 .get("/getParticularUserDetail") 401 .get("/getParticularUserDetail")
423 .then(response => { 402 .then(response => {
424 this.userData = response.data.data; 403 this.userData = response.data.data;
425 }) 404 })
426 .catch(error => { 405 .catch(error => {
427 if (error.response.status === 401) { 406 if (error.response.status === 401) {
428 this.$router.replace({ path: "/" }); 407 this.$router.replace({ path: "/" });
429 this.$store.dispatch("setToken", null); 408 this.$store.dispatch("setToken", null);
430 this.$store.dispatch("Id", null); 409 this.$store.dispatch("Id", null);
431 } 410 }
432 }); 411 });
433 } 412 }
434 }, 413 },
435 mounted() { 414 mounted() {
436 this.token = this.$store.state.token; 415 this.token = this.$store.state.token;
437 this.getInvoiceList(); 416 this.getInvoiceList();
438 this.getfeeType(); 417 this.getfeeType();
439 this.getUserData(); 418 this.getUserData();
440 }, 419 },
441 created() { 420 created() {
442 this.$root.$on("app:search", search => { 421 this.$root.$on("app:search", search => {
443 this.search = search; 422 this.search = search;
444 }); 423 });
445 }, 424 },
446 beforeDestroy() { 425 beforeDestroy() {
447 // dont forget to remove the listener 426 // dont forget to remove the listener
448 this.$root.$off("app:search"); 427 this.$root.$off("app:search");
449 } 428 }
450 }; 429 };
451 </script> 430 </script>
452 431
453 432
454 <style> 433 <style>
455 /* table { 434 /* table {
456 border-collapse: collapse; 435 border-collapse: collapse;
457 border: 1px solid #e2e7eb; 436 border: 1px solid #e2e7eb;
458 } */ 437 } */
459 .open-dialog-button { 438 .open-dialog-button {
460 background: #827bfa !important; 439 background: #827bfa !important;
461 border-color: #827bfa !important; 440 border-color: #827bfa !important;
462 text-transform: none !important; 441 text-transform: none !important;
463 } 442 }
464 .center { 443 .center {
465 text-align: center !important; 444 text-align: center !important;
466 } 445 }
467 .card-style { 446 .card-style {
468 background: #7f62f8 !important; 447 background: #7f62f8 !important;
469 border-color: #7f62f8 !important; 448 border-color: #7f62f8 !important;
470 border-radius: 12px; 449 border-radius: 12px;
471 text-align: center !important; 450 text-align: center !important;
472 padding-top: 10px !important; 451 padding-top: 10px !important;
473 } 452 }
474 .add-button { 453 .add-button {
475 background: #feb83c !important; 454 background: #feb83c !important;
476 border-color: #feb83c !important; 455 border-color: #feb83c !important;
477 text-transform: none !important; 456 text-transform: none !important;
478 -webkit-box-shadow: none !important; 457 -webkit-box-shadow: none !important;
479 box-shadow: none !important; 458 box-shadow: none !important;
480 } 459 }
481 .clear-button { 460 .clear-button {
482 background: #fa7676 !important; 461 background: #fa7676 !important;
483 border-color: #fa7676 !important; 462 border-color: #fa7676 !important;
484 text-transform: none !important; 463 text-transform: none !important;
485 -webkit-box-shadow: none !important; 464 -webkit-box-shadow: none !important;
486 box-shadow: none !important; 465 box-shadow: none !important;
487 } 466 }
488 .card-styles { 467 .card-styles {
489 background: #7f62f8 !important; 468 background: #7f62f8 !important;
490 border-color: #7f62f8 !important; 469 border-color: #7f62f8 !important;