viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit c51ff05bff5ccd1ba81c6c5e3b0eac555ec1e6fe

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

second test second view invoice pdf print resposive desing

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