viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit da153da77395795e36d6d753056859a9c077b70f

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

solved issued view payment

Showing 1 changed file with 1 additions and 1 deletions   Show diff stats
src/pages/Account/invoice.vue
Diff comments   View file @da153da
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** Edit INVOICE ****** --> 3 <!-- ****** Edit INVOICE ****** -->
4 <v-dialog v-model="editInvoiceDialog"> 4 <v-dialog v-model="editInvoiceDialog">
5 <v-card flat class="text-xs-center white--text"> 5 <v-card flat class="text-xs-center white--text">
6 <v-layout> 6 <v-layout>
7 <v-flex xs12 class="card-styles pa-2"> 7 <v-flex xs12 class="card-styles pa-2">
8 <label class="title text-xs-center">Edit Invoice</label> 8 <label class="title text-xs-center">Edit Invoice</label>
9 <v-icon size="24" class="right white--text" @click="editInvoiceDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right white--text" @click="editInvoiceDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <editInvoice :editData="editData" @update-editInvoice="updateDoneInvoice" /> 12 <editInvoice :editData="editData" @update-editInvoice="updateDoneInvoice" />
13 </v-card> 13 </v-card>
14 </v-dialog> 14 </v-dialog>
15 15
16 <!-- ****PAYMENT INVOICE DIALOG --> 16 <!-- ****PAYMENT INVOICE DIALOG -->
17 <v-dialog v-model="paymentInvoiceDialog"> 17 <v-dialog v-model="paymentInvoiceDialog">
18 <v-card flat class="text-xs-center white--text"> 18 <v-card flat class="text-xs-center white--text">
19 <v-layout> 19 <v-layout>
20 <v-flex xs12 class="card-styles pa-2"> 20 <v-flex xs12 class="card-styles pa-2">
21 <label class="title text-xs-center">Payment Template</label> 21 <label class="title text-xs-center">Payment Template</label>
22 <v-icon size="24" class="right white--text" @click="paymentInvoiceDialog = false">cancel</v-icon> 22 <v-icon size="24" class="right white--text" @click="paymentInvoiceDialog = false">cancel</v-icon>
23 </v-flex> 23 </v-flex>
24 </v-layout> 24 </v-layout>
25 <!-- <v-flex xs12 sm12> 25 <!-- <v-flex xs12 sm12>
26 <v-container fluid grid-list-md> 26 <v-container fluid grid-list-md>
27 <v-layout wrap> 27 <v-layout wrap>
28 <v-flex xs12 sm12 md4> 28 <v-flex xs12 sm12 md4>
29 <v-card flat> 29 <v-card flat>
30 <v-toolbar dark class="card-styles" flat> 30 <v-toolbar dark class="card-styles" flat>
31 <v-spacer></v-spacer> 31 <v-spacer></v-spacer>
32 <h3>Profile</h3> 32 <h3>Profile</h3>
33 <v-spacer></v-spacer> 33 <v-spacer></v-spacer>
34 </v-toolbar> 34 </v-toolbar>
35 <v-card-text> 35 <v-card-text>
36 <v-container> 36 <v-container>
37 <v-layout wrap> 37 <v-layout wrap>
38 <v-flex xs12> 38 <v-flex xs12>
39 <v-layout> 39 <v-layout>
40 <v-flex 40 <v-flex
41 xs12 41 xs12
42 class="text-xs-center text-sm-center text-md-center text-lg-center" 42 class="text-xs-center text-sm-center text-md-center text-lg-center"
43 > 43 >
44 <v-avatar size="80px"> 44 <v-avatar size="80px">
45 <img src="/static/icon/user.png" v-if="!editPayment.profilePicUrl" /> 45 <img src="/static/icon/user.png" v-if="!editPayment.profilePicUrl" />
46 <img 46 <img
47 :src="editPayment.profilePicUrl" 47 :src="editPayment.profilePicUrl"
48 v-else-if="editPayment.profilePicUrl" 48 v-else-if="editPayment.profilePicUrl"
49 /> 49 />
50 </v-avatar> 50 </v-avatar>
51 </v-flex> 51 </v-flex>
52 </v-layout> 52 </v-layout>
53 <v-layout> 53 <v-layout>
54 <v-flex xs12 sm12> 54 <v-flex xs12 sm12>
55 <h3 class="text-xs-center"> 55 <h3 class="text-xs-center">
56 <b>{{ editPayment.studentId.name }}</b> 56 <b>{{ editPayment.studentId.name }}</b>
57 </h3> 57 </h3>
58 <p class="text-xs-center grey--text">Student</p> 58 <p class="text-xs-center grey--text">Student</p>
59 </v-flex> 59 </v-flex>
60 </v-layout> 60 </v-layout>
61 <v-layout style="border: 1px solid lightgrey;"> 61 <v-layout style="border: 1px solid lightgrey;">
62 <v-flex xs6 sm6 class="pa-0"> 62 <v-flex xs6 sm6 class="pa-0">
63 <h4 class="right"> 63 <h4 class="right">
64 <b>Roll No :</b> 64 <b>Roll No :</b>
65 </h4> 65 </h4>
66 </v-flex> 66 </v-flex>
67 <v-flex sm6 xs6 class="pa-0"> 67 <v-flex sm6 xs6 class="pa-0">
68 <h4>{{ editPayment.studentId.rollNo }}</h4> 68 <h4>{{ editPayment.studentId.rollNo }}</h4>
69 </v-flex> 69 </v-flex>
70 </v-layout> 70 </v-layout>
71 <v-layout style="border: 1px solid lightgrey;"> 71 <v-layout style="border: 1px solid lightgrey;">
72 <v-flex xs6 sm6 class="pa-0"> 72 <v-flex xs6 sm6 class="pa-0">
73 <h4 class="right"> 73 <h4 class="right">
74 <b>Class :</b> 74 <b>Class :</b>
75 </h4> 75 </h4>
76 </v-flex> 76 </v-flex>
77 <v-flex sm6 xs6 class="pa-0"> 77 <v-flex sm6 xs6 class="pa-0">
78 <h4>{{ editPayment.classId.classNum }}</h4> 78 <h4>{{ editPayment.classId.classNum }}</h4>
79 </v-flex> 79 </v-flex>
80 </v-layout> 80 </v-layout>
81 </v-flex> 81 </v-flex>
82 </v-layout> 82 </v-layout>
83 </v-container> 83 </v-container>
84 </v-card-text> 84 </v-card-text>
85 </v-card> 85 </v-card>
86 <v-flex> 86 <v-flex>
87 <v-card> 87 <v-card>
88 <v-flex xs12 sm12 md12 style="padding-top: 1%;"> 88 <v-flex xs12 sm12 md12 style="padding-top: 1%;">
89 <v-card flat> 89 <v-card flat>
90 <v-toolbar dark class="card-styles" flat> 90 <v-toolbar dark class="card-styles" flat>
91 <v-spacer></v-spacer> 91 <v-spacer></v-spacer>
92 <h3>Invoice</h3> 92 <h3>Invoice</h3>
93 <v-spacer></v-spacer> 93 <v-spacer></v-spacer>
94 </v-toolbar> 94 </v-toolbar>
95 </v-card> 95 </v-card>
96 <v-layout> 96 <v-layout>
97 <v-flex xs12> 97 <v-flex xs12>
98 <v-layout> 98 <v-layout>
99 <v-flex xs4 class="pt-4 subheading"> 99 <v-flex xs4 class="pt-4 subheading">
100 <label class="right">Payment Method:</label> 100 <label class="right">Payment Method:</label>
101 </v-flex> 101 </v-flex>
102 <v-flex xs6 class="ml-3"> 102 <v-flex xs6 class="ml-3">
103 <v-select 103 <v-select
104 :items="paymentMethods" 104 :items="paymentMethods"
105 v-model="editPayment.paymentMethod" 105 v-model="editPayment.paymentMethod"
106 label="Select Payment Method" 106 label="Select Payment Method"
107 required 107 required
108 ></v-select> 108 ></v-select>
109 </v-flex> 109 </v-flex>
110 </v-layout> 110 </v-layout>
111 <v-card-actions> 111 <v-card-actions>
112 <v-spacer class="hidden-xs-only"></v-spacer> 112 <v-spacer class="hidden-xs-only"></v-spacer>
113 <v-btn 113 <v-btn
114 color="open-dialog-button" 114 color="open-dialog-button"
115 dark 115 dark
116 class="right mt-3" 116 class="right mt-3"
117 @click="add" 117 @click="add"
118 >Add Payment</v-btn> 118 >Add Payment</v-btn>
119 </v-card-actions> 119 </v-card-actions>
120 </v-flex> 120 </v-flex>
121 </v-layout> 121 </v-layout>
122 </v-flex> 122 </v-flex>
123 </v-card> 123 </v-card>
124 </v-flex> 124 </v-flex>
125 </v-flex> 125 </v-flex>
126 <v-flex xs12 sm12 md8> 126 <v-flex xs12 sm12 md8>
127 <v-card> 127 <v-card>
128 <v-toolbar dark class="card-styles" flat> 128 <v-toolbar dark class="card-styles" flat>
129 <v-spacer></v-spacer> 129 <v-spacer></v-spacer>
130 <h3>Fee Type List</h3> 130 <h3>Fee Type List</h3>
131 <v-spacer></v-spacer> 131 <v-spacer></v-spacer>
132 </v-toolbar> 132 </v-toolbar>
133 <table class="feeTypeTable tableRsponsive"> 133 <table class="feeTypeTable tableRsponsive">
134 <tr class="info white--text"> 134 <tr class="info white--text">
135 <th>#</th> 135 <th>#</th>
136 <th>Fee Type</th> 136 <th>Fee Type</th>
137 <th>Amount</th> 137 <th>Amount</th>
138 <th>Discount(%)</th> 138 <th>Discount(%)</th>
139 <th>Subtotal</th> 139 <th>Subtotal</th>
140 <th>Paid Amount</th> 140 <th>Paid Amount</th>
141 <th>Action</th> 141 <th>Action</th>
142 </tr> 142 </tr>
143 <tr 143 <tr
144 v-for="(feeType,index) in paymentFeeTypeData" 144 v-for="(feeType,index) in paymentFeeTypeData"
145 :key="index" 145 :key="index"
146 v-on:keyup="getAmmountDetails(feeType)" 146 v-on:keyup="getAmmountDetails(feeType)"
147 > 147 >
148 <td style="width:40px" class="tdFeeType">{{index + 1}}</td> 148 <td style="width:40px" class="tdFeeType">{{index + 1}}</td>
149 <td style="width:120px" class="tdFeeType" disabled>{{ feeType.feeTypeName }}</td> 149 <td style="width:120px" class="tdFeeType" disabled>{{ feeType.feeTypeName }}</td>
150 <td class="tdFeeType" style="width:120px" disabled>{{feeType.amount}}</td> 150 <td class="tdFeeType" style="width:120px" disabled>{{feeType.amount}}</td>
151 <td class="tdFeeType"> 151 <td class="tdFeeType">
152 <v-text-field 152 <v-text-field
153 placeholder="fill your Discount" 153 placeholder="fill your Discount"
154 v-model="feeType.discount" 154 v-model="feeType.discount"
155 type="number" 155 type="number"
156 ></v-text-field> 156 ></v-text-field>
157 </td> 157 </td>
158 <td class="tdFeeType" disabled>{{ feeType.subTotal }}</td> 158 <td class="tdFeeType" disabled>{{ feeType.subTotal }}</td>
159 <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'"> 159 <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'">
160 <v-text-field 160 <v-text-field
161 placeholder="fill your Paid Amount" 161 placeholder="fill your Paid Amount"
162 v-model="feeType.paidAmount" 162 v-model="feeType.paidAmount"
163 type="number" 163 type="number"
164 ></v-text-field> 164 ></v-text-field>
165 </td> 165 </td>
166 <td class="tdFeeType" v-if="invoiceData.paymentStatus == ''"> 166 <td class="tdFeeType" v-if="invoiceData.paymentStatus == ''">
167 <v-text-field 167 <v-text-field
168 placeholder="fill your Paid Amount" 168 placeholder="fill your Paid Amount"
169 v-model="feeType.paidAmount" 169 v-model="feeType.paidAmount"
170 type="number" 170 type="number"
171 ></v-text-field> 171 ></v-text-field>
172 </td> 172 </td>
173 <td 173 <td
174 class="tdFeeType" 174 class="tdFeeType"
175 v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''" 175 v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''"
176 > 176 >
177 <v-text-field 177 <v-text-field
178 placeholder="fill your Paid Amount" 178 placeholder="fill your Paid Amount"
179 v-model="feeType.paidAmount" 179 v-model="feeType.paidAmount"
180 type="number" 180 type="number"
181 ></v-text-field> 181 ></v-text-field>
182 </td> 182 </td>
183 <td class="tdFeeType"> 183 <td class="tdFeeType">
184 <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon> 184 <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
185 </td> 185 </td>
186 </tr> 186 </tr>
187 <tfoot> 187 <tfoot>
188 <tr> 188 <tr>
189 <td colspan="2" class="tdFeeType">Total:</td> 189 <td colspan="2" class="tdFeeType">Total:</td>
190 <td class="tdFeeType">{{ feeType.amount }}</td> 190 <td class="tdFeeType">{{ feeType.amount }}</td>
191 <td class="tdFeeType">{{ feeType.discount }}</td> 191 <td class="tdFeeType">{{ feeType.discount }}</td>
192 <td class="tdFeeType">{{ feeType.subTotal }}</td> 192 <td class="tdFeeType">{{ feeType.subTotal }}</td>
193 <td class="tdFeeType">{{ feeType.paidAmount }}</td> 193 <td class="tdFeeType">{{ feeType.paidAmount }}</td>
194 <td class="tdFeeType"> 194 <td class="tdFeeType">
195 <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon> 195 <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
196 </td> 196 </td>
197 </tr> 197 </tr>
198 </tfoot> 198 </tfoot>
199 </table> 199 </table>
200 </v-card> 200 </v-card>
201 </v-flex> 201 </v-flex>
202 </v-layout> 202 </v-layout>
203 </v-container> 203 </v-container>
204 </v-flex>--> 204 </v-flex>-->
205 <paymentTemplate :editPayment="editPayment" @update-Payment="updatePayment" /> 205 <paymentTemplate :editPayment="editPayment" @update-Payment="updatePayment" />
206 </v-card> 206 </v-card>
207 </v-dialog> 207 </v-dialog>
208 208
209 <!-- ****** PROFILE VIEW SECTION DATA ****** --> 209 <!-- ****** PROFILE VIEW SECTION DATA ****** -->
210 <v-dialog v-model="dialog1" max-width="800px"> 210 <v-dialog v-model="dialog1" max-width="800px">
211 <v-card flat class="text-xs-center white--text"> 211 <v-card flat class="text-xs-center white--text">
212 <v-layout> 212 <v-layout>
213 <v-flex xs12 class="card-style pa-2"> 213 <v-flex xs12 class="card-style pa-2">
214 <label class="title text-xs-center">View Payments</label> 214 <label class="title text-xs-center">View Payments</label>
215 <v-icon size="24" class="right" color="white" @click="dialog1 = false">cancel</v-icon> 215 <v-icon size="24" class="right" color="white" @click="dialog1 = false">cancel</v-icon>
216 </v-flex> 216 </v-flex>
217 </v-layout> 217 </v-layout>
218 <!-- <p>{{editedItem}}</p> --> 218 <!-- <p>{{editedItem}}</p> -->
219 <table class="feeTypeTable tableRsponsive"> 219 <table class="feeTypeTable tableRsponsive">
220 <tr style="color: black"> 220 <tr style="color: black">
221 <th>#</th> 221 <th>#</th>
222 <th>Date</th> 222 <th>Date</th>
223 <th>Paid By</th> 223 <th>Paid By</th>
224 <th>Payment Amount</th> 224 <th>Payment Amount</th>
225 <th>Weaver</th> 225 <th>Weaver</th>
226 <th>Action</th> 226 <th>Action</th>
227 </tr> 227 </tr>
228 <tr v-if="editedItem.paymentStatus !== 'NOT_PAID'"> 228 <tr v-if="editedItem.paymentStatus !== 'NOT_PAID'">
229 <td style="width:40px ; color:black" class="tdFeeType">1</td> 229 <td style="width:40px ; color:black" class="tdFeeType">1</td>
230 <td style="width:120px; color:black" class="tdFeeType">{{dates( editedItem.date) }}</td> 230 <td style="width:120px; color:black" class="tdFeeType">{{dates( editedItem.date) }}</td>
231 <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.paymentMethod }}</td> 231 <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.paymentMethod }}</td>
232 <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalPaidAmount }}</td> 232 <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalPaidAmount }}</td>
233 <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalDiscount}}</td> 233 <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalDiscount}}</td>
234 <td class="text-xs-center td td-row"> 234 <td class="text-xs-center td td-row">
235 <router-link 235 <router-link
236 :to="{ name:'View Payment Invoice',params: { viewPaymentInvoiceId:editedItem._id } }" 236 :to="{ name:'View Payment Invoice',params: { viewPaymentInvoiceId:editedItem._id } }"
237 > 237 >
238 <v-tooltip top> 238 <v-tooltip top>
239 <img 239 <img
240 slot="activator" 240 slot="activator"
241 style="cursor:pointer; width:25px; height:25px; " 241 style="cursor:pointer; width:25px; height:25px; "
242 class="mr-3" 242 class="mr-3"
243 src="/static/icon/view.png" 243 src="/static/icon/view.png"
244 /> 244 />
245 <span>View</span> 245 <span>View</span>
246 </v-tooltip> 246 </v-tooltip>
247 </router-link> 247 </router-link>
248 <v-tooltip top> 248 <v-tooltip top>
249 <img 249 <img
250 slot="activator" 250 slot="activator"
251 style="cursor:pointer;width:20px; height:20px; " 251 style="cursor:pointer;width:20px; height:20px; "
252 class="mr-3" 252 class="mr-3"
253 @click="deletePayment(editedItem)" 253 @click="deletePayment(editedItem)"
254 src="/static/icon/delete.png" 254 src="/static/icon/delete.png"
255 /> 255 />
256 <span>Delete</span> 256 <span>Delete</span>
257 </v-tooltip> 257 </v-tooltip>
258 </td> 258 </td>
259 </tr> 259 </tr>
260 </table> 260 </table>
261 </v-card> 261 </v-card>
262 </v-dialog> 262 </v-dialog>
263 263
264 <!-- ****** Invoice Table ****** --> 264 <!-- ****** Invoice Table ****** -->
265 <v-toolbar color="transparent" flat> 265 <v-toolbar color="transparent" flat>
266 <v-btn 266 <v-btn
267 fab 267 fab
268 dark 268 dark
269 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 269 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
270 small 270 small
271 @click="addInvoiceDialog = true" 271 @click="addInvoiceDialog = true"
272 > 272 >
273 <v-icon dark>add</v-icon> 273 <v-icon dark>add</v-icon>
274 </v-btn> 274 </v-btn>
275 <v-btn 275 <v-btn
276 round 276 round
277 class="open-dialog-button hidden-sm-only hidden-xs-only" 277 class="open-dialog-button hidden-sm-only hidden-xs-only"
278 dark 278 dark
279 @click="addInvoiceDialog = true" 279 @click="addInvoiceDialog = true"
280 > 280 >
281 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Invoice 281 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Invoice
282 </v-btn> 282 </v-btn>
283 <v-spacer></v-spacer> 283 <v-spacer></v-spacer>
284 <v-card-title class="body-1" v-show="show"> 284 <v-card-title class="body-1" v-show="show">
285 <v-btn icon large flat @click="displaySearch"> 285 <v-btn icon large flat @click="displaySearch">
286 <v-avatar size="27"> 286 <v-avatar size="27">
287 <img src="/static/icon/search.png" alt="icon" /> 287 <img src="/static/icon/search.png" alt="icon" />
288 </v-avatar> 288 </v-avatar>
289 </v-btn> 289 </v-btn>
290 </v-card-title> 290 </v-card-title>
291 <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> 291 <v-flex xs8 sm8 md3 lg2 v-show="showSearch">
292 <v-layout> 292 <v-layout>
293 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> 293 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
294 <v-icon @click="closeSearch" color="error">close</v-icon> 294 <v-icon @click="closeSearch" color="error">close</v-icon>
295 </v-layout> 295 </v-layout>
296 </v-flex> 296 </v-flex>
297 </v-toolbar> 297 </v-toolbar>
298 <v-data-table 298 <v-data-table
299 :headers="headers" 299 :headers="headers"
300 :items="invoiceList" 300 :items="invoiceList"
301 :pagination.sync="pagination" 301 :pagination.sync="pagination"
302 :search="search" 302 :search="search"
303 > 303 >
304 <template slot="items" slot-scope="props"> 304 <template slot="items" slot-scope="props">
305 <tr class="tr"> 305 <tr class="tr">
306 <td class="td td-row">{{ props.index + 1 }}</td> 306 <td class="td td-row">{{ props.index + 1 }}</td>
307 <td class="text-xs-center td td-row">{{ props.item.studentId.name }}</td> 307 <td class="text-xs-center td td-row">{{ props.item.studentId.name }}</td>
308 <td class="text-xs-center td td-row">{{ props.item.classId.classNum }}</td> 308 <td class="text-xs-center td td-row">{{ props.item.classId.classNum }}</td>
309 <td class="text-xs-center td td-row">{{ props.item.totalAmount }}</td> 309 <td class="text-xs-center td td-row">{{ props.item.totalAmount }}</td>
310 <td class="text-xs-center td td-row">{{ props.item.totalDiscount}}</td> 310 <td class="text-xs-center td td-row">{{ props.item.totalDiscount}}</td>
311 <td 311 <td
312 class="text-xs-center td td-row" 312 class="text-xs-center td td-row"
313 >{{ props.item.totalPaidAmount ? props.item.totalPaidAmount : 0}}</td> 313 >{{ props.item.totalPaidAmount ? props.item.totalPaidAmount : 0}}</td>
314 <td 314 <td
315 class="text-xs-center td td-row" 315 class="text-xs-center td td-row"
316 >{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td> 316 >{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td>
317 <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'NOT_PAID'"> 317 <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'NOT_PAID'">
318 <span 318 <span
319 class="red lighten-1 py-1 px-2 white--text paymentStatus" 319 class="red lighten-1 py-1 px-2 white--text paymentStatus"
320 >{{ props.item.paymentStatus }}</span> 320 >{{ props.item.paymentStatus }}</span>
321 </td> 321 </td>
322 <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'FULLY_PAID'"> 322 <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'FULLY_PAID'">
323 <span 323 <span
324 class="green lighten-1 py-1 px-2 white--text paymentStatus" 324 class="green lighten-1 py-1 px-2 white--text paymentStatus"
325 >{{ props.item.paymentStatus }}</span> 325 >{{ props.item.paymentStatus }}</span>
326 </td> 326 </td>
327 <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'PARTIALLY_PAID'"> 327 <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'PARTIALLY_PAID'">
328 <span 328 <span
329 class="yellow darken-3 py-1 px-2 white--text paymentStatus" 329 class="yellow darken-3 py-1 px-2 white--text paymentStatus"
330 >{{ props.item.paymentStatus }}</span> 330 >{{ props.item.paymentStatus }}</span>
331 </td> 331 </td>
332 <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td> 332 <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td>
333 <td class="text-xs-center td td-row"> 333 <td class="text-xs-center td td-row">
334 <router-link :to="{ name:'View Invoice',params: { viewInvoiceId:props.item._id } }"> 334 <router-link :to="{ name:'View Invoice',params: { viewInvoiceId:props.item._id } }">
335 <v-tooltip top> 335 <v-tooltip top>
336 <img 336 <img
337 slot="activator" 337 slot="activator"
338 style="cursor:pointer; width:25px; height:25px; " 338 style="cursor:pointer; width:25px; height:25px; "
339 class="mr-3" 339 class="mr-3"
340 src="/static/icon/view.png" 340 src="/static/icon/view.png"
341 /> 341 />
342 <span>View</span> 342 <span>View</span>
343 </v-tooltip> 343 </v-tooltip>
344 </router-link> 344 </router-link>
345 <span v-if="props.item.paymentStatus === 'NOT_PAID'"> 345 <span v-if="props.item.paymentStatus === 'NOT_PAID'">
346 <!-- <router-link :to="{ name: 'Edit Invoice',params: { invoiceid: editData._id } }"> 346 <!-- <router-link :to="{ name: 'Edit Invoice',params: { invoiceid: editData._id } }">
347 <v-tooltip top> 347 <v-tooltip top>
348 <img 348 <img
349 slot="activator" 349 slot="activator"
350 style="cursor:pointer; width:20px; height:18px; " 350 style="cursor:pointer; width:20px; height:18px; "
351 class="mr-3" 351 class="mr-3"
352 @click="editItem(props.item)" 352 @click="editItem(props.item)"
353 src="/static/icon/edit.png" 353 src="/static/icon/edit.png"
354 /> 354 />
355 <span>Edit</span> 355 <span>Edit</span>
356 </v-tooltip> 356 </v-tooltip>
357 </router-link>--> 357 </router-link>-->
358 <v-tooltip top> 358 <v-tooltip top>
359 <img 359 <img
360 slot="activator" 360 slot="activator"
361 style="cursor:pointer; width:20px; height:18px; " 361 style="cursor:pointer; width:20px; height:18px; "
362 class="mr-3" 362 class="mr-3"
363 @click="editItem(props.item)" 363 @click="editItem(props.item)"
364 src="/static/icon/edit.png" 364 src="/static/icon/edit.png"
365 /> 365 />
366 <span>Edit</span> 366 <span>Edit</span>
367 </v-tooltip> 367 </v-tooltip>
368 <v-tooltip top> 368 <v-tooltip top>
369 <img 369 <img
370 slot="activator" 370 slot="activator"
371 style="cursor:pointer;width:20px; height:20px; " 371 style="cursor:pointer;width:20px; height:20px; "
372 class="mr-3" 372 class="mr-3"
373 @click="deleteItem(props.item)" 373 @click="deleteItem(props.item)"
374 src="/static/icon/delete.png" 374 src="/static/icon/delete.png"
375 /> 375 />
376 <span>Delete</span> 376 <span>Delete</span>
377 </v-tooltip> 377 </v-tooltip>
378 <v-tooltip top> 378 <v-tooltip top>
379 <img 379 <img
380 slot="activator" 380 slot="activator"
381 style="cursor:pointer; width:20px; height:18px; " 381 style="cursor:pointer; width:20px; height:18px; "
382 class="mr-3" 382 class="mr-3"
383 @click="paymentItem(props.item)" 383 @click="paymentItem(props.item)"
384 src="/static/schoolIcons/Account.png" 384 src="/static/schoolIcons/Account.png"
385 /> 385 />
386 <span>Payment</span> 386 <span>Payment</span>
387 </v-tooltip> 387 </v-tooltip>
388 </span> 388 </span>
389 <span v-if="props.item.paymentStatus === 'PARTIALLY_PAID'"> 389 <span v-if="props.item.paymentStatus === 'PARTIALLY_PAID'">
390 <v-tooltip top> 390 <v-tooltip top>
391 <img 391 <img
392 slot="activator" 392 slot="activator"
393 style="cursor:pointer; width:20px; height:18px; " 393 style="cursor:pointer; width:20px; height:18px; "
394 class="mr-3" 394 class="mr-3"
395 @click="paymentItem(props.item)" 395 @click="paymentItem(props.item)"
396 src="/static/schoolIcons/Account.png" 396 src="/static/schoolIcons/Account.png"
397 /> 397 />
398 <span>Payment</span> 398 <span>Payment</span>
399 </v-tooltip> 399 </v-tooltip>
400 </span> 400 </span>
401 <v-tooltip top> 401 <v-tooltip top>
402 <img 402 <img
403 slot="activator" 403 slot="activator"
404 style="cursor:pointer; width:19px; height:19px;" 404 style="cursor:pointer; width:19px; height:19px;"
405 class="mr-3" 405 class="mr-3"
406 @click="profile(props.item)" 406 @click="profile(props.item)"
407 src="/static/icon/eye1.png" 407 src="/static/icon/eye1.png"
408 /> 408 />
409 <span>View Payment</span> 409 <span>View Payment</span>
410 </v-tooltip> 410 </v-tooltip>
411 </td> 411 </td>
412 </tr> 412 </tr>
413 </template> 413 </template>
414 <v-alert 414 <v-alert
415 slot="no-results" 415 slot="no-results"
416 :value="true" 416 :value="true"
417 color="error" 417 color="error"
418 icon="warning" 418 icon="warning"
419 >Your search for "{{ search }}" found no results.</v-alert> 419 >Your search for "{{ search }}" found no results.</v-alert>
420 </v-data-table> 420 </v-data-table>
421 421
422 <!-- ****** ADD INVOICE ****** --> 422 <!-- ****** ADD INVOICE ****** -->
423 <v-snackbar 423 <v-snackbar
424 :timeout="timeout" 424 :timeout="timeout"
425 :top="y === 'top'" 425 :top="y === 'top'"
426 :right="x === 'right'" 426 :right="x === 'right'"
427 :vertical="mode === 'vertical'" 427 :vertical="mode === 'vertical'"
428 v-model="snackbar" 428 v-model="snackbar"
429 :color="color" 429 :color="color"
430 >{{ text }}</v-snackbar> 430 >{{ text }}</v-snackbar>
431 <v-dialog v-model="addInvoiceDialog"> 431 <v-dialog v-model="addInvoiceDialog">
432 <v-card flat class="text-xs-center white--text"> 432 <v-card flat class="text-xs-center white--text">
433 <v-layout> 433 <v-layout>
434 <v-flex xs12 class="card-styles pa-2"> 434 <v-flex xs12 class="card-styles pa-2">
435 <label class="title text-xs-center">Add Invoice</label> 435 <label class="title text-xs-center">Add Invoice</label>
436 <v-icon size="24" class="right white--text" @click="addInvoiceDialog = false">cancel</v-icon> 436 <v-icon size="24" class="right white--text" @click="addInvoiceDialog = false">cancel</v-icon>
437 </v-flex> 437 </v-flex>
438 </v-layout> 438 </v-layout>
439 <v-flex xs12 sm12> 439 <v-flex xs12 sm12>
440 <v-container fluid grid-list-md> 440 <v-container fluid grid-list-md>
441 <v-layout wrap> 441 <v-layout wrap>
442 <v-flex xs12 sm12 md5> 442 <v-flex xs12 sm12 md5>
443 <v-card flat> 443 <v-card flat>
444 <v-toolbar dark class="card-styles" flat> 444 <v-toolbar dark class="card-styles" flat>
445 <v-spacer></v-spacer> 445 <v-spacer></v-spacer>
446 <h3>Invoice</h3> 446 <h3>Invoice</h3>
447 <v-spacer></v-spacer> 447 <v-spacer></v-spacer>
448 </v-toolbar> 448 </v-toolbar>
449 <v-form ref="form" v-model="valid" lazy-validation class="py-4"> 449 <v-form ref="form" v-model="valid" lazy-validation class="py-4">
450 <v-layout> 450 <v-layout>
451 <v-flex xs4 class="pt-4 subheading"> 451 <v-flex xs4 class="pt-4 subheading">
452 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 452 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
453 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 453 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
454 </v-flex> 454 </v-flex>
455 <v-flex xs6 class="ml-3"> 455 <v-flex xs6 class="ml-3">
456 <v-select 456 <v-select
457 :items="addclass" 457 :items="addclass"
458 label="Select Class" 458 label="Select Class"
459 v-model="invoiceData.classNum" 459 v-model="invoiceData.classNum"
460 item-text="classNum" 460 item-text="classNum"
461 item-value="_id" 461 item-value="_id"
462 @change="getAllStudents()" 462 @change="getAllStudents()"
463 :rules="classRules" 463 :rules="classRules"
464 required 464 required
465 ></v-select> 465 ></v-select>
466 </v-flex> 466 </v-flex>
467 </v-layout> 467 </v-layout>
468 <v-layout> 468 <v-layout>
469 <v-flex xs4 class="pt-4 subheading"> 469 <v-flex xs4 class="pt-4 subheading">
470 <label class="right hidden-xs-only hidden-sm-only">Select Student:</label> 470 <label class="right hidden-xs-only hidden-sm-only">Select Student:</label>
471 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label> 471 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label>
472 </v-flex> 472 </v-flex>
473 <v-flex xs6 class="ml-3"> 473 <v-flex xs6 class="ml-3">
474 <v-select 474 <v-select
475 :items="studentList" 475 :items="studentList"
476 label="Select Student" 476 label="Select Student"
477 v-model="invoiceData.studentId" 477 v-model="invoiceData.studentId"
478 item-text="name" 478 item-text="name"
479 item-value="_id" 479 item-value="_id"
480 :rules="inchargeRules" 480 :rules="inchargeRules"
481 @change="selectAllStudent()" 481 @change="selectAllStudent()"
482 required 482 required
483 ></v-select> 483 ></v-select>
484 </v-flex> 484 </v-flex>
485 </v-layout> 485 </v-layout>
486 <v-layout> 486 <v-layout>
487 <v-flex xs4 class="pt-4 subheading"> 487 <v-flex xs4 class="pt-4 subheading">
488 <label class="right">Date:</label> 488 <label class="right">Date:</label>
489 </v-flex> 489 </v-flex>
490 <v-flex xs6 class="ml-3"> 490 <v-flex xs6 class="ml-3">
491 <v-menu 491 <v-menu
492 ref="menu1" 492 ref="menu1"
493 :close-on-content-click="false" 493 :close-on-content-click="false"
494 v-model="menu1" 494 v-model="menu1"
495 :nudge-right="40" 495 :nudge-right="40"
496 lazy 496 lazy
497 :return-value.sync="invoiceData.date" 497 :return-value.sync="invoiceData.date"
498 transition="scale-transition" 498 transition="scale-transition"
499 offset-y 499 offset-y
500 full-width 500 full-width
501 min-width="290px" 501 min-width="290px"
502 > 502 >
503 <v-text-field 503 <v-text-field
504 slot="activator" 504 slot="activator"
505 :rules="dateRules" 505 :rules="dateRules"
506 v-model="invoiceData.date" 506 v-model="invoiceData.date"
507 placeholder="Select date" 507 placeholder="Select date"
508 ></v-text-field> 508 ></v-text-field>
509 <v-date-picker 509 <v-date-picker
510 v-model="invoiceData.date" 510 v-model="invoiceData.date"
511 @input="$refs.menu1.save(invoiceData.date)" 511 @input="$refs.menu1.save(invoiceData.date)"
512 ></v-date-picker> 512 ></v-date-picker>
513 </v-menu> 513 </v-menu>
514 </v-flex> 514 </v-flex>
515 </v-layout> 515 </v-layout>
516 <v-layout> 516 <v-layout>
517 <v-flex xs4 class="pt-4 subheading"> 517 <v-flex xs4 class="pt-4 subheading">
518 <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label> 518 <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label>
519 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label> 519 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label>
520 </v-flex> 520 </v-flex>
521 <v-flex xs6 class="ml-3"> 521 <v-flex xs6 class="ml-3">
522 <v-select 522 <v-select
523 :items="paymentStatus" 523 :items="paymentStatus"
524 v-model="invoiceData.paymentStatus" 524 v-model="invoiceData.paymentStatus"
525 item-text="name" 525 item-text="name"
526 item-value="value" 526 item-value="value"
527 label="Select Payment Status" 527 label="Select Payment Status"
528 @change="getPayMethodList" 528 @change="getPayMethodList"
529 :rules="paymentStatusRules" 529 :rules="paymentStatusRules"
530 required 530 required
531 ></v-select> 531 ></v-select>
532 </v-flex> 532 </v-flex>
533 </v-layout> 533 </v-layout>
534 <v-layout v-show="showPayMethods"> 534 <v-layout v-show="showPayMethods">
535 <v-flex xs4 class="pt-4 subheading"> 535 <v-flex xs4 class="pt-4 subheading">
536 <label class="right">Payment Method:</label> 536 <label class="right">Payment Method:</label>
537 </v-flex> 537 </v-flex>
538 <v-flex xs6 class="ml-3"> 538 <v-flex xs6 class="ml-3">
539 <v-select 539 <v-select
540 :items="paymentMethods" 540 :items="paymentMethods"
541 v-model="invoiceData.paymentMethod" 541 v-model="invoiceData.paymentMethod"
542 label="Select Payment Method" 542 label="Select Payment Method"
543 required 543 required
544 ></v-select> 544 ></v-select>
545 </v-flex> 545 </v-flex>
546 </v-layout> 546 </v-layout>
547 <v-layout> 547 <v-layout>
548 <v-flex xs12 sm11> 548 <v-flex xs12 sm11>
549 <v-card-actions> 549 <v-card-actions>
550 <v-spacer></v-spacer> 550 <v-spacer></v-spacer>
551 <v-btn @click="clear" round dark class="clear-button">clear</v-btn> 551 <v-btn @click="clear" round dark class="clear-button">clear</v-btn>
552 <v-btn 552 <v-btn
553 @click="submit" 553 @click="submit"
554 round 554 round
555 dark 555 dark
556 :loading="loading" 556 :loading="loading"
557 class="add-button" 557 class="add-button"
558 >Add</v-btn> 558 >Add</v-btn>
559 </v-card-actions> 559 </v-card-actions>
560 </v-flex> 560 </v-flex>
561 </v-layout> 561 </v-layout>
562 </v-form> 562 </v-form>
563 </v-card> 563 </v-card>
564 </v-flex> 564 </v-flex>
565 <v-flex xs12 sm12 md7> 565 <v-flex xs12 sm12 md7>
566 <v-card> 566 <v-card>
567 <v-toolbar dark class="card-styles" flat> 567 <v-toolbar dark class="card-styles" flat>
568 <v-spacer></v-spacer> 568 <v-spacer></v-spacer>
569 <h3>Fee Type List</h3> 569 <h3>Fee Type List</h3>
570 <v-spacer></v-spacer> 570 <v-spacer></v-spacer>
571 </v-toolbar> 571 </v-toolbar>
572 <v-layout> 572 <v-layout>
573 <v-flex xs4 sm2 class="mt-4 hidden-xs-only hidden-sm-only"> 573 <v-flex xs4 sm2 class="mt-4 hidden-xs-only hidden-sm-only">
574 <label class="right title">Fee Type:</label> 574 <label class="right title">Fee Type:</label>
575 </v-flex> 575 </v-flex>
576 <v-flex xs8 sm4> 576 <v-flex xs8 sm4>
577 <v-select 577 <v-select
578 :items="feeTypes" 578 :items="feeTypes"
579 v-model="feeType.feeTypeName" 579 v-model="feeType.feeTypeName"
580 item-text="feeType" 580 item-text="feeType"
581 item-value="feeType" 581 item-value="feeType"
582 label="Select Fee Type" 582 label="Select Fee Type"
583 required 583 required
584 ></v-select> 584 ></v-select>
585 </v-flex> 585 </v-flex>
586 <v-flex xs4 sm6> 586 <v-flex xs4 sm6>
587 <v-btn 587 <v-btn
588 color="open-dialog-button" 588 color="open-dialog-button"
589 round 589 round
590 dark 590 dark
591 class="right mt-3" 591 class="right mt-3"
592 @click="selectFeeType" 592 @click="selectFeeType"
593 >ADD</v-btn> 593 >ADD</v-btn>
594 </v-flex> 594 </v-flex>
595 </v-layout> 595 </v-layout>
596 <table class="feeTypeTable tableRsponsive"> 596 <table class="feeTypeTable tableRsponsive">
597 <tr class="info white--text"> 597 <tr class="info white--text">
598 <th>#</th> 598 <th>#</th>
599 <th>Fee Type</th> 599 <th>Fee Type</th>
600 <th>Amount</th> 600 <th>Amount</th>
601 <th>Discount(%)</th> 601 <th>Discount(%)</th>
602 <th>Subtotal</th> 602 <th>Subtotal</th>
603 <th>Paid Amount</th> 603 <th>Paid Amount</th>
604 <th>Action</th> 604 <th>Action</th>
605 </tr> 605 </tr>
606 <tr 606 <tr
607 v-show="showFeeType" 607 v-show="showFeeType"
608 v-for="(feeType, index) in feeTypeData" 608 v-for="(feeType, index) in feeTypeData"
609 :key="index" 609 :key="index"
610 v-on:keyup="getAmmountDetails(feeType)" 610 v-on:keyup="getAmmountDetails(feeType)"
611 > 611 >
612 <td style="width:40px" class="tdFeeType">{{ index + 1 }}</td> 612 <td style="width:40px" class="tdFeeType">{{ index + 1 }}</td>
613 <td 613 <td
614 style="width:120px" 614 style="width:120px"
615 class="tdFeeType" 615 class="tdFeeType"
616 :rules="feeTypeNameRules" 616 :rules="feeTypeNameRules"
617 >{{ feeType.feeTypeName }}</td> 617 >{{ feeType.feeTypeName }}</td>
618 <td class="tdFeeType"> 618 <td class="tdFeeType">
619 <v-text-field 619 <v-text-field
620 placeholder="fill your Amount" 620 placeholder="fill your Amount"
621 v-model="feeType.amount" 621 v-model="feeType.amount"
622 type="number" 622 type="number"
623 :rules="amountRules" 623 :rules="amountRules"
624 required 624 required
625 ></v-text-field> 625 ></v-text-field>
626 </td> 626 </td>
627 <td class="tdFeeType"> 627 <td class="tdFeeType">
628 <v-text-field 628 <v-text-field
629 placeholder="fill your Discount" 629 placeholder="fill your Discount"
630 v-model="feeType.discount" 630 v-model="feeType.discount"
631 type="number" 631 type="number"
632 :rules="discountRules" 632 :rules="discountRules"
633 required 633 required
634 ></v-text-field> 634 ></v-text-field>
635 </td> 635 </td>
636 <td class="tdFeeType" :rules="subtotalRules">{{ feeType.subTotal }}</td> 636 <td class="tdFeeType" :rules="subtotalRules">{{ feeType.subTotal }}</td>
637 <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'"> 637 <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'">
638 <v-text-field 638 <v-text-field
639 placeholder="fill your Paid Amount" 639 placeholder="fill your Paid Amount"
640 v-model="feeType.paidAmount" 640 v-model="feeType.paidAmount"
641 type="number" 641 type="number"
642 :disabled="disabled" 642 :disabled="disabled"
643 ></v-text-field> 643 ></v-text-field>
644 </td> 644 </td>
645 <td class="tdFeeType" v-if="invoiceData.paymentStatus == ''"> 645 <td class="tdFeeType" v-if="invoiceData.paymentStatus == ''">
646 <v-text-field 646 <v-text-field
647 placeholder="fill your Paid Amount" 647 placeholder="fill your Paid Amount"
648 v-model="feeType.paidAmount" 648 v-model="feeType.paidAmount"
649 type="number" 649 type="number"
650 :disabled="disabled" 650 :disabled="disabled"
651 ></v-text-field> 651 ></v-text-field>
652 </td> 652 </td>
653 <td 653 <td
654 class="tdFeeType" 654 class="tdFeeType"
655 v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''" 655 v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''"
656 > 656 >
657 <v-text-field 657 <v-text-field
658 placeholder="fill your Paid Amount" 658 placeholder="fill your Paid Amount"
659 v-model="feeType.paidAmount" 659 v-model="feeType.paidAmount"
660 type="number" 660 type="number"
661 ></v-text-field> 661 ></v-text-field>
662 </td> 662 </td>
663 <td class="tdFeeType"> 663 <td class="tdFeeType">
664 <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon> 664 <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
665 </td> 665 </td>
666 </tr> 666 </tr>
667 <tfoot> 667 <tfoot>
668 <tr> 668 <tr>
669 <td colspan="2" class="tdFeeType">Total:</td> 669 <td colspan="2" class="tdFeeType">Total:</td>
670 <td class="tdFeeType">{{ feeType.amount }}</td> 670 <td class="tdFeeType">{{ feeType.amount }}</td>
671 <td class="tdFeeType">{{ feeType.discount }}</td> 671 <td class="tdFeeType">{{ feeType.discount }}</td>
672 <td class="tdFeeType">{{ feeType.subTotal }}</td> 672 <td class="tdFeeType">{{ feeType.subTotal }}</td>
673 <td class="tdFeeType">{{ feeType.paidAmount }}</td> 673 <td class="tdFeeType">{{ feeType.paidAmount }}</td>
674 <td class="tdFeeType"> 674 <td class="tdFeeType">
675 <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon> 675 <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
676 </td> 676 </td>
677 </tr> 677 </tr>
678 </tfoot> 678 </tfoot>
679 </table> 679 </table>
680 </v-card> 680 </v-card>
681 </v-flex> 681 </v-flex>
682 </v-layout> 682 </v-layout>
683 </v-container> 683 </v-container>
684 </v-flex> 684 </v-flex>
685 </v-card> 685 </v-card>
686 </v-dialog> 686 </v-dialog>
687 <div class="loader" v-if="showLoader"> 687 <div class="loader" v-if="showLoader">
688 <v-progress-circular indeterminate color="white"></v-progress-circular> 688 <v-progress-circular indeterminate color="white"></v-progress-circular>
689 </div> 689 </div>
690 </v-container> 690 </v-container>
691 </template> 691 </template>
692 692
693 <script> 693 <script>
694 import http from "@/Services/http.js"; 694 import http from "@/Services/http.js";
695 import editInvoice from "./editInvoice"; 695 import editInvoice from "./editInvoice";
696 import paymentTemplate from "./paymentTemplate.vue"; 696 import paymentTemplate from "./paymentTemplate.vue";
697 import moment from "moment"; 697 import moment from "moment";
698 698
699 export default { 699 export default {
700 components: { 700 components: {
701 editInvoice: editInvoice, 701 editInvoice: editInvoice,
702 paymentTemplate: paymentTemplate 702 paymentTemplate: paymentTemplate
703 }, 703 },
704 data: () => ({ 704 data: () => ({
705 snackbar: false, 705 snackbar: false,
706 showPayMethods: false, 706 showPayMethods: false,
707 y: "top", 707 y: "top",
708 x: "right", 708 x: "right",
709 mode: "", 709 mode: "",
710 timeout: 5000, 710 timeout: 5000,
711 text: "", 711 text: "",
712 color: "", 712 color: "",
713 show: true, 713 show: true,
714 showSearch: false, 714 showSearch: false,
715 showLoader: false, 715 showLoader: false,
716 loading: false, 716 loading: false,
717 date: null, 717 date: null,
718 search: "", 718 search: "",
719 dialog: false, 719 dialog: false,
720 dialog1: false, 720 dialog1: false,
721 valid: true, 721 valid: true,
722 validEdit: true, 722 validEdit: true,
723 isActive: true, 723 isActive: true,
724 newActive: false, 724 newActive: false,
725 showFeeType: true, 725 showFeeType: true,
726 addInvoiceDialog: false, 726 addInvoiceDialog: false,
727 editInvoiceDialog: false, 727 editInvoiceDialog: false,
728 paymentInvoiceDialog: false, 728 paymentInvoiceDialog: false,
729 disabled: true, 729 disabled: true,
730 details: [], 730 details: [],
731 feeTypes: [], 731 feeTypes: [],
732 invoiceData: [], 732 invoiceData: [],
733 editData: [], 733 editData: [],
734 invoiceList: [], 734 invoiceList: [],
735 editPayment: { 735 editPayment: {
736 studentId: { 736 studentId: {
737 name: "", 737 name: "",
738 rollNo: "" 738 rollNo: ""
739 }, 739 },
740 classId: { 740 classId: {
741 classNum: "" 741 classNum: ""
742 } 742 }
743 }, 743 },
744 menu1: false, 744 menu1: false,
745 paymentMethods: ["Cash", "Cheque"], 745 paymentMethods: ["Cash", "Cheque"],
746 feeType: { 746 feeType: {
747 amount: "0.00", 747 amount: "0.00",
748 discount: "0.00", 748 discount: "0.00",
749 subTotal: "0.00", 749 subTotal: "0.00",
750 paidAmount: "0.00", 750 paidAmount: "0.00",
751 feeTypeName: "" 751 feeTypeName: ""
752 }, 752 },
753 753
754 feeTypeData: [], 754 feeTypeData: [],
755 editFeeTypeData: [], 755 editFeeTypeData: [],
756 paymentFeeTypeData: [], 756 paymentFeeTypeData: [],
757 pagination: { 757 pagination: {
758 rowsPerPage: 10 758 rowsPerPage: 10
759 }, 759 },
760 classRules: [v => !!v || " Class Name is required"], 760 classRules: [v => !!v || " Class Name is required"],
761 inchargeRules: [v => !!v || "Student Name is required"], 761 inchargeRules: [v => !!v || "Student Name is required"],
762 dateRules: [v => !!v || " Date is required"], 762 dateRules: [v => !!v || " Date is required"],
763 paymentStatusRules: [v => !!v || "Payment Status is required"], 763 paymentStatusRules: [v => !!v || "Payment Status is required"],
764 paymentMethodsRules: [v => !!v || "payment Method is required"], 764 paymentMethodsRules: [v => !!v || "payment Method is required"],
765 feeTypeRules: [v => !!v || "Fee Type is required"], 765 feeTypeRules: [v => !!v || "Fee Type is required"],
766 feeTypeNameRules: [v => !!v || "Fee Type Name is required"], 766 feeTypeNameRules: [v => !!v || "Fee Type Name is required"],
767 amountRules: [v => !!v || "Amount is required"], 767 amountRules: [v => !!v || "Amount is required"],
768 discountRules: [v => !!v || "Discount is required"], 768 discountRules: [v => !!v || "Discount is required"],
769 subtotalRules: [v => !!v || "Subtotal is required"], 769 subtotalRules: [v => !!v || "Subtotal is required"],
770 paymentRules: [v => !!v || "Payment is required"], 770 paymentRules: [v => !!v || "Payment is required"],
771 paidAmountRules: [v => !!v || "Paid Amount is required"], 771 paidAmountRules: [v => !!v || "Paid Amount is required"],
772 headers: [ 772 headers: [
773 { 773 {
774 text: "No", 774 text: "No",
775 align: "", 775 align: "",
776 sortable: false, 776 sortable: false,
777 value: "No" 777 value: "No"
778 }, 778 },
779 { 779 {
780 text: "Student", 780 text: "Student",
781 value: "name", 781 value: "name",
782 sortable: false, 782 sortable: false,
783 align: "center" 783 align: "center"
784 }, 784 },
785 { text: "Class", value: "class", sortable: false, align: "center" }, 785 { text: "Class", value: "class", sortable: false, align: "center" },
786 { text: "Total", value: "subtotal", sortable: false, align: "center" }, 786 { text: "Total", value: "subtotal", sortable: false, align: "center" },
787 { 787 {
788 text: "Discount(%)", 788 text: "Discount(%)",
789 value: "discount", 789 value: "discount",
790 sortable: false, 790 sortable: false,
791 align: "center" 791 align: "center"
792 }, 792 },
793 { 793 {
794 text: "Paid Amount", 794 text: "Paid Amount",
795 value: "paidAmount", 795 value: "paidAmount",
796 sortable: false, 796 sortable: false,
797 align: "center" 797 align: "center"
798 }, 798 },
799 { 799 {
800 text: "Balance", 800 text: "Balance",
801 value: "Balance", 801 value: "Balance",
802 sortable: false, 802 sortable: false,
803 align: "center" 803 align: "center"
804 }, 804 },
805 { 805 {
806 text: "Status", 806 text: "Status",
807 value: "paymentStatus", 807 value: "paymentStatus",
808 sortable: false, 808 sortable: false,
809 align: "center" 809 align: "center"
810 }, 810 },
811 { 811 {
812 text: "Date", 812 text: "Date",
813 value: "date", 813 value: "date",
814 sortable: false, 814 sortable: false,
815 align: "center" 815 align: "center"
816 }, 816 },
817 { text: "Action", value: "", sortable: false, align: "center" } 817 { text: "Action", value: "", sortable: false, align: "center" }
818 ], 818 ],
819 819
820 studentId: { 820 studentId: {
821 name: "" 821 name: ""
822 }, 822 },
823 token: "", 823 token: "",
824 editedItem: {}, 824 editedItem: {},
825 invoiceData: { 825 invoiceData: {
826 paymentStatus: "", 826 paymentStatus: "",
827 students: [] 827 students: []
828 }, 828 },
829 addclass: [], 829 addclass: [],
830 studentList: [], 830 studentList: [],
831 paymentStatus: [ 831 paymentStatus: [
832 { 832 {
833 name: "Not Paid", 833 name: "Not Paid",
834 value: "NOT_PAID" 834 value: "NOT_PAID"
835 }, 835 },
836 { 836 {
837 name: "Partially Paid", 837 name: "Partially Paid",
838 value: "PARTIALLY_PAID" 838 value: "PARTIALLY_PAID"
839 }, 839 },
840 { 840 {
841 name: "Fully Paid", 841 name: "Fully Paid",
842 value: "FULLY_PAID" 842 value: "FULLY_PAID"
843 } 843 }
844 ] 844 ]
845 }), 845 }),
846 methods: { 846 methods: {
847 save(date) { 847 save(date) {
848 this.$refs.menu1.save(date); 848 this.$refs.menu1.save(date);
849 }, 849 },
850 dates: function(date) { 850 dates: function(date) {
851 return moment(date).format("MMMM DD, YYYY"); 851 return moment(date).format("MMMM DD, YYYY");
852 }, 852 },
853 profile(item) { 853 profile(item) {
854 // console.log("item", item); 854 // console.log("item", item);
855 this.editedIndex = this.invoiceList.indexOf(item); 855 this.editedIndex = this.invoiceList.indexOf(item);
856 // this.editedItem = Object.assign({}, item); 856 this.editedItem = Object.assign({}, item);
857 console.log("editedItem", this.editedItem); 857 console.log("editedItem", this.editedItem);
858 this.dialog1 = true; 858 this.dialog1 = true;
859 }, 859 },
860 editItem(item) { 860 editItem(item) {
861 this.editedIndex = this.invoiceList.indexOf(item); 861 this.editedIndex = this.invoiceList.indexOf(item);
862 this.editData = Object.assign({}, item); 862 this.editData = Object.assign({}, item);
863 this.editData.date = this.editData.date.slice(0, 10); 863 this.editData.date = this.editData.date.slice(0, 10);
864 // console.log("invoiceData", this.editData); 864 // console.log("invoiceData", this.editData);
865 this.editFeeTypeData = this.editData.feeType; 865 this.editFeeTypeData = this.editData.feeType;
866 this.editInvoiceDialog = true; 866 this.editInvoiceDialog = true;
867 }, 867 },
868 paymentItem(item) { 868 paymentItem(item) {
869 // console.log("item", item); 869 // console.log("item", item);
870 this.editedIndex = this.invoiceList.indexOf(item); 870 this.editedIndex = this.invoiceList.indexOf(item);
871 this.editPayment = Object.assign({}, item); 871 this.editPayment = Object.assign({}, item);
872 this.editPayment.date = this.editPayment.date.slice(0, 10); 872 this.editPayment.date = this.editPayment.date.slice(0, 10);
873 this.paymentFeeTypeData = this.editPayment.feeType; 873 this.paymentFeeTypeData = this.editPayment.feeType;
874 this.paymentInvoiceDialog = true; 874 this.paymentInvoiceDialog = true;
875 }, 875 },
876 deleteItem(item) { 876 deleteItem(item) {
877 let deleteInvoice = { 877 let deleteInvoice = {
878 invoiceId: item._id 878 invoiceId: item._id
879 }; 879 };
880 http() 880 http()
881 .delete( 881 .delete(
882 "/deleteInvoice", 882 "/deleteInvoice",
883 confirm("Are you sure you want to delete this?") && { 883 confirm("Are you sure you want to delete this?") && {
884 params: deleteInvoice 884 params: deleteInvoice
885 } 885 }
886 ) 886 )
887 .then(response => { 887 .then(response => {
888 this.snackbar = true; 888 this.snackbar = true;
889 this.text = "Successfully delete Existing Invoice"; 889 this.text = "Successfully delete Existing Invoice";
890 this.color = "green"; 890 this.color = "green";
891 this.dialog1 = false; 891 this.dialog1 = false;
892 this.getInvoiceList(); 892 this.getInvoiceList();
893 }) 893 })
894 .catch(error => { 894 .catch(error => {
895 // console.log(error); 895 // console.log(error);
896 }); 896 });
897 }, 897 },
898 deletePayment(editedItem) { 898 deletePayment(editedItem) {
899 let deleteInvoice = { 899 let deleteInvoice = {
900 invoiceId: editedItem._id 900 invoiceId: editedItem._id
901 }; 901 };
902 http() 902 http()
903 .put( 903 .put(
904 "/removePayment", 904 "/removePayment",
905 deleteInvoice, 905 deleteInvoice,
906 confirm("Are you sure you want to delete this?") && { 906 confirm("Are you sure you want to delete this?") && {
907 headers: { 907 headers: {
908 Authorization: "Bearer " + this.token 908 Authorization: "Bearer " + this.token
909 } 909 }
910 } 910 }
911 ) 911 )
912 .then(response => { 912 .then(response => {
913 this.snackbar = true; 913 this.snackbar = true;
914 this.text = "Successfully delete Existing Invoice"; 914 this.text = "Successfully delete Existing Invoice";
915 this.color = "green"; 915 this.color = "green";
916 this.dialog1 = false; 916 this.dialog1 = false;
917 this.getInvoiceList(); 917 this.getInvoiceList();
918 }) 918 })
919 .catch(error => { 919 .catch(error => {
920 // console.log(error); 920 // console.log(error);
921 }); 921 });
922 }, 922 },
923 close() { 923 close() {
924 this.dialog = false; 924 this.dialog = false;
925 }, 925 },
926 // totalAmount() { 926 // totalAmount() {
927 // // console.log("this.feeType.paidAmount ", this.feeType.paidAmount); 927 // // console.log("this.feeType.paidAmount ", this.feeType.paidAmount);
928 // // console.log( 928 // // console.log(
929 // // "this.feeType.subTotalAAAAAAAAAAAAAAA ", 929 // // "this.feeType.subTotalAAAAAAAAAAAAAAA ",
930 // // this.feeType.subTotal 930 // // this.feeType.subTotal
931 // // ); 931 // // );
932 932
933 // if (this.feeType.paidAmount < this.feeType.subTotal) { 933 // if (this.feeType.paidAmount < this.feeType.subTotal) {
934 // console.log("this.feeType.subTotalBBBBBBBBBBB ", this.feeType.subTotal); 934 // console.log("this.feeType.subTotalBBBBBBBBBBB ", this.feeType.subTotal);
935 935
936 // this.feeType.paidAmount = this.feeType.subTotal; 936 // this.feeType.paidAmount = this.feeType.subTotal;
937 // console.log( 937 // console.log(
938 // "this.feeType.paidAmount BBBBBBBBBBB", 938 // "this.feeType.paidAmount BBBBBBBBBBB",
939 // this.feeType.paidAmount 939 // this.feeType.paidAmount
940 // ); 940 // );
941 // } 941 // }
942 // }, 942 // },
943 submit() { 943 submit() {
944 let feeTypeId = ""; 944 let feeTypeId = "";
945 for (let i = 0; i < this.feeTypes.length; i++) { 945 for (let i = 0; i < this.feeTypes.length; i++) {
946 if (this.feeTypes[i].feeType === this.feeType.feeTypeName) { 946 if (this.feeTypes[i].feeType === this.feeType.feeTypeName) {
947 feeTypeId = this.feeTypes[i]._id; 947 feeTypeId = this.feeTypes[i]._id;
948 } 948 }
949 } 949 }
950 if (this.$refs.form.validate()) { 950 if (this.$refs.form.validate()) {
951 let invoiceData = { 951 let invoiceData = {
952 classId: this.invoiceData.classNum, 952 classId: this.invoiceData.classNum,
953 students: this.invoiceData.students, 953 students: this.invoiceData.students,
954 date: this.invoiceData.date, 954 date: this.invoiceData.date,
955 paymentStatus: this.invoiceData.paymentStatus, 955 paymentStatus: this.invoiceData.paymentStatus,
956 paymentMethod: this.invoiceData.paymentMethod, 956 paymentMethod: this.invoiceData.paymentMethod,
957 feeType: this.feeTypeData, 957 feeType: this.feeTypeData,
958 totalAmount: this.feeType.amount, 958 totalAmount: this.feeType.amount,
959 totalDiscount: this.feeType.discount, 959 totalDiscount: this.feeType.discount,
960 totalSubTotal: this.feeType.subTotal, 960 totalSubTotal: this.feeType.subTotal,
961 totalPaidAmount: this.feeType.paidAmount 961 totalPaidAmount: this.feeType.paidAmount
962 }; 962 };
963 console.log("invoiceData", invoiceData); 963 console.log("invoiceData", invoiceData);
964 if (invoiceData.paymentStatus == "NOT_PAID") { 964 if (invoiceData.paymentStatus == "NOT_PAID") {
965 delete invoiceData.totalPaidAmount; 965 delete invoiceData.totalPaidAmount;
966 } 966 }
967 if (this.feeType.subTotal == this.feeType.paidAmount) { 967 if (this.feeType.subTotal == this.feeType.paidAmount) {
968 invoiceData.paymentStatus = "FULLY_PAID"; 968 invoiceData.paymentStatus = "FULLY_PAID";
969 // console.log("FULLY_PAID"); 969 // console.log("FULLY_PAID");
970 } 970 }
971 if (invoiceData.totalPaidAmount) { 971 if (invoiceData.totalPaidAmount) {
972 if (this.feeType.subTotal != this.feeType.paidAmount) { 972 if (this.feeType.subTotal != this.feeType.paidAmount) {
973 invoiceData.paymentStatus = "PARTIALLY_PAID"; 973 invoiceData.paymentStatus = "PARTIALLY_PAID";
974 // console.log("PARTIALLY_PAID"); 974 // console.log("PARTIALLY_PAID");
975 } 975 }
976 } 976 }
977 http() 977 http()
978 .post("/createInvoice", invoiceData) 978 .post("/createInvoice", invoiceData)
979 .then(response => { 979 .then(response => {
980 this.getInvoiceList(); 980 this.getInvoiceList();
981 this.snackbar = true; 981 this.snackbar = true;
982 this.text = "New Invoice added successfully"; 982 this.text = "New Invoice added successfully";
983 this.color = "green"; 983 this.color = "green";
984 this.clear(); 984 this.clear();
985 this.feeTypeData = []; 985 this.feeTypeData = [];
986 if (this.feeTypeData.length == 0) { 986 if (this.feeTypeData.length == 0) {
987 this.feeType = { 987 this.feeType = {
988 amount: "0.00", 988 amount: "0.00",
989 discount: "0.00", 989 discount: "0.00",
990 paidAmount: "0.00", 990 paidAmount: "0.00",
991 subTotal: "0.00", 991 subTotal: "0.00",
992 feeTypeList: "" 992 feeTypeList: ""
993 }; 993 };
994 } 994 }
995 this.loading = false; 995 this.loading = false;
996 this.addInvoiceDialog = false; 996 this.addInvoiceDialog = false;
997 }) 997 })
998 .catch(error => { 998 .catch(error => {
999 this.snackbar = true; 999 this.snackbar = true;
1000 this.text = error.response.data.errors[0].messages[0]; 1000 this.text = error.response.data.errors[0].messages[0];
1001 this.color = "error"; 1001 this.color = "error";
1002 this.loading = false; 1002 this.loading = false;
1003 }); 1003 });
1004 } 1004 }
1005 }, 1005 },
1006 // add() { 1006 // add() {
1007 // var updatePayment = { 1007 // var updatePayment = {
1008 // invoiceId: this.editPayment._id, 1008 // invoiceId: this.editPayment._id,
1009 // // totalPaidAmount: this.editPayment.paidAmount 1009 // // totalPaidAmount: this.editPayment.paidAmount
1010 // classId: this.editPayment.classNum, 1010 // classId: this.editPayment.classNum,
1011 // students: this.editPayment.students, 1011 // students: this.editPayment.students,
1012 // date: this.editPayment.date, 1012 // date: this.editPayment.date,
1013 // paymentStatus: this.editPayment.paymentStatus, 1013 // paymentStatus: this.editPayment.paymentStatus,
1014 // paymentMethod: this.editPayment.paymentMethod, 1014 // paymentMethod: this.editPayment.paymentMethod,
1015 // feeType: this.feeTypeData, 1015 // feeType: this.feeTypeData,
1016 // totalAmount: this.feeType.amount, 1016 // totalAmount: this.feeType.amount,
1017 // totalDiscount: this.feeType.discount, 1017 // totalDiscount: this.feeType.discount,
1018 // totalSubTotal: this.feeType.subTotal, 1018 // totalSubTotal: this.feeType.subTotal,
1019 // totalPaidAmount: this.feeType.paidAmount 1019 // totalPaidAmount: this.feeType.paidAmount
1020 // }; 1020 // };
1021 // http() 1021 // http()
1022 // .put("/updateInvoice", updatePayment, { 1022 // .put("/updateInvoice", updatePayment, {
1023 // headers: { 1023 // headers: {
1024 // Authorization: "Bearer " + this.token 1024 // Authorization: "Bearer " + this.token
1025 // } 1025 // }
1026 // }) 1026 // })
1027 // .then(response => { 1027 // .then(response => {
1028 // this.getInvoiceList(); 1028 // this.getInvoiceList();
1029 // this.snackbar = true; 1029 // this.snackbar = true;
1030 // this.text = response.data.message; 1030 // this.text = response.data.message;
1031 // this.color = "green"; 1031 // this.color = "green";
1032 // this.paymentInvoiceDialog = false; 1032 // this.paymentInvoiceDialog = false;
1033 // }) 1033 // })
1034 // .catch(error => { 1034 // .catch(error => {
1035 // console.log("error", error); 1035 // console.log("error", error);
1036 // this.snackbar = true; 1036 // this.snackbar = true;
1037 // this.color = "red"; 1037 // this.color = "red";
1038 // }); 1038 // });
1039 // }, 1039 // },
1040 clear() { 1040 clear() {
1041 this.$refs.form.reset(); 1041 this.$refs.form.reset();
1042 }, 1042 },
1043 getInvoiceList() { 1043 getInvoiceList() {
1044 this.showLoader = true; 1044 this.showLoader = true;
1045 http() 1045 http()
1046 .get("/getInvoicesList", { 1046 .get("/getInvoicesList", {
1047 params: { schoolId: this.$store.state.schoolId }, 1047 params: { schoolId: this.$store.state.schoolId },
1048 headers: { Authorization: "Bearer " + this.token } 1048 headers: { Authorization: "Bearer " + this.token }
1049 }) 1049 })
1050 .then(response => { 1050 .then(response => {
1051 this.invoiceList = response.data.data; 1051 this.invoiceList = response.data.data;
1052 this.showLoader = false; 1052 this.showLoader = false;
1053 }) 1053 })
1054 .catch(error => { 1054 .catch(error => {
1055 // console.log("err====>", err); 1055 // console.log("err====>", err);
1056 this.showLoader = false; 1056 this.showLoader = false;
1057 if (error.response.status === 401) { 1057 if (error.response.status === 401) {
1058 this.$router.replace({ path: "/" }); 1058 this.$router.replace({ path: "/" });
1059 this.$store.dispatch("setToken", null); 1059 this.$store.dispatch("setToken", null);
1060 this.$store.dispatch("Id", null); 1060 this.$store.dispatch("Id", null);
1061 } 1061 }
1062 }); 1062 });
1063 }, 1063 },
1064 selectFeeType() { 1064 selectFeeType() {
1065 this.showFeeType = true; 1065 this.showFeeType = true;
1066 this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName }); 1066 this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName });
1067 }, 1067 },
1068 deleteSelectFee: function(index) { 1068 deleteSelectFee: function(index) {
1069 this.feeTypeData.splice(index, 1); 1069 this.feeTypeData.splice(index, 1);
1070 for (let i = 0; i < this.feeTypeData.length; i++) { 1070 for (let i = 0; i < this.feeTypeData.length; i++) {
1071 this.feeType = this.feeTypeData[i]; 1071 this.feeType = this.feeTypeData[i];
1072 } 1072 }
1073 if (this.feeTypeData.length == 0) { 1073 if (this.feeTypeData.length == 0) {
1074 this.feeType = { 1074 this.feeType = {
1075 amount: "0.00", 1075 amount: "0.00",
1076 discount: "0.00", 1076 discount: "0.00",
1077 paidAmount: "0.00", 1077 paidAmount: "0.00",
1078 subTotal: "0.00", 1078 subTotal: "0.00",
1079 feeTypeName: "" 1079 feeTypeName: ""
1080 }; 1080 };
1081 } 1081 }
1082 }, 1082 },
1083 getAllClasses() { 1083 getAllClasses() {
1084 http() 1084 http()
1085 .get("/getClassesList", { 1085 .get("/getClassesList", {
1086 params: { schoolId: this.$store.state.schoolId }, 1086 params: { schoolId: this.$store.state.schoolId },
1087 headers: { Authorization: "Bearer " + this.token } 1087 headers: { Authorization: "Bearer " + this.token }
1088 }) 1088 })
1089 .then(response => { 1089 .then(response => {
1090 this.addclass = response.data.data; 1090 this.addclass = response.data.data;
1091 }) 1091 })
1092 .catch(err => { 1092 .catch(err => {
1093 // console.log("err====>", err); 1093 // console.log("err====>", err);
1094 // this.$router.replace({ path: "/" }); 1094 // this.$router.replace({ path: "/" });
1095 }); 1095 });
1096 }, 1096 },
1097 getAllStudents() { 1097 getAllStudents() {
1098 this.showLoader = true; 1098 this.showLoader = true;
1099 http() 1099 http()
1100 .get("/getStudentsList", { 1100 .get("/getStudentsList", {
1101 params: { 1101 params: {
1102 classId: this.invoiceData.classNum, 1102 classId: this.invoiceData.classNum,
1103 schoolId: this.$store.state.schoolId 1103 schoolId: this.$store.state.schoolId
1104 }, 1104 },
1105 headers: { Authorization: "Bearer " + this.token } 1105 headers: { Authorization: "Bearer " + this.token }
1106 }) 1106 })
1107 .then(response => { 1107 .then(response => {
1108 response.data.data.unshift({ 1108 response.data.data.unshift({
1109 name: "Select All", 1109 name: "Select All",
1110 _id: "Select All" 1110 _id: "Select All"
1111 }); 1111 });
1112 this.studentList = response.data.data; 1112 this.studentList = response.data.data;
1113 this.showLoader = false; 1113 this.showLoader = false;
1114 }) 1114 })
1115 .catch(err => { 1115 .catch(err => {
1116 this.showLoader = false; 1116 this.showLoader = false;
1117 // console.log("err====>", err); 1117 // console.log("err====>", err);
1118 // this.$router.replace({ path: "/" }); 1118 // this.$router.replace({ path: "/" });
1119 }); 1119 });
1120 }, 1120 },
1121 getfeeType() { 1121 getfeeType() {
1122 http() 1122 http()
1123 .get("/getFeesList", { 1123 .get("/getFeesList", {
1124 params: { 1124 params: {
1125 schoolId: this.$store.state.schoolId 1125 schoolId: this.$store.state.schoolId
1126 }, 1126 },
1127 headers: { Authorization: "Bearer " + this.token } 1127 headers: { Authorization: "Bearer " + this.token }
1128 }) 1128 })
1129 .then(response => { 1129 .then(response => {
1130 this.feeTypes = response.data.data; 1130 this.feeTypes = response.data.data;
1131 }) 1131 })
1132 .catch(err => { 1132 .catch(err => {
1133 // console.log("err====>", err); 1133 // console.log("err====>", err);
1134 // this.$router.replace({ path: "/" }); 1134 // this.$router.replace({ path: "/" });
1135 }); 1135 });
1136 }, 1136 },
1137 1137
1138 getAmmountDetails(feeTyp) { 1138 getAmmountDetails(feeTyp) {
1139 let feeType = { 1139 let feeType = {
1140 amount: "", 1140 amount: "",
1141 discount: "", 1141 discount: "",
1142 subTotal: "", 1142 subTotal: "",
1143 subParticularTotal: "", 1143 subParticularTotal: "",
1144 paidAmount: "" 1144 paidAmount: ""
1145 }; 1145 };
1146 for (let i = 0; i < this.feeTypeData.length; i++) { 1146 for (let i = 0; i < this.feeTypeData.length; i++) {
1147 // *********** AMOUNT *********** 1147 // *********** AMOUNT ***********
1148 1148
1149 feeType.amount = 1149 feeType.amount =
1150 Number(feeType.amount) + Number(this.feeTypeData[i].amount); 1150 Number(feeType.amount) + Number(this.feeTypeData[i].amount);
1151 // console.log("feeType.amount ", feeType.amount); 1151 // console.log("feeType.amount ", feeType.amount);
1152 this.feeType.amount = feeType.amount; 1152 this.feeType.amount = feeType.amount;
1153 this.feeType.subTotal = feeType.amount; 1153 this.feeType.subTotal = feeType.amount;
1154 this.feeTypeData[i].subTotal = this.feeTypeData[i].amount; 1154 this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
1155 1155
1156 // *********** DISCOUNT *********** 1156 // *********** DISCOUNT ***********
1157 1157
1158 // if (this.feeTypeData[i].discount) { 1158 // if (this.feeTypeData[i].discount) {
1159 feeType.discount = 1159 feeType.discount =
1160 Number(feeType.discount) + Number(this.feeTypeData[i].discount); 1160 Number(feeType.discount) + Number(this.feeTypeData[i].discount);
1161 // console.log("feeType.discount", feeType.discount); 1161 // console.log("feeType.discount", feeType.discount);
1162 this.feeType.discount = feeType.discount; 1162 this.feeType.discount = feeType.discount;
1163 console.log("feeType.discount", this.feeType.discount); 1163 console.log("feeType.discount", this.feeType.discount);
1164 1164
1165 feeType.subParticularTotal = 1165 feeType.subParticularTotal =
1166 this.feeTypeData[i].amount - 1166 this.feeTypeData[i].amount -
1167 (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100; 1167 (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100;
1168 this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2); 1168 this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2);
1169 // } 1169 // }
1170 1170
1171 // *********** SUBTOTAL *********** 1171 // *********** SUBTOTAL ***********
1172 1172
1173 feeType.subTotal = 1173 feeType.subTotal =
1174 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); 1174 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
1175 this.feeType.subTotal = feeType.subTotal.toFixed(2); 1175 this.feeType.subTotal = feeType.subTotal.toFixed(2);
1176 1176
1177 // *********** PAID-AMOUNT *********** 1177 // *********** PAID-AMOUNT ***********
1178 1178
1179 feeType.paidAmount = 1179 feeType.paidAmount =
1180 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); 1180 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
1181 this.feeType.paidAmount = feeType.paidAmount.toFixed(2); 1181 this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
1182 1182
1183 // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value. 1183 // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value.
1184 if (feeType.paidAmount > feeType.subTotal) { 1184 if (feeType.paidAmount > feeType.subTotal) {
1185 this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal; 1185 this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal;
1186 this.feeType.paidAmount = feeType.subTotal; 1186 this.feeType.paidAmount = feeType.subTotal;
1187 } 1187 }
1188 } 1188 }
1189 }, 1189 },
1190 getPayMethodList() { 1190 getPayMethodList() {
1191 if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") { 1191 if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") {
1192 this.showPayMethods = true; 1192 this.showPayMethods = true;
1193 } else if (this.invoiceData.paymentStatus == "FULLY_PAID") { 1193 } else if (this.invoiceData.paymentStatus == "FULLY_PAID") {
1194 this.showPayMethods = true; 1194 this.showPayMethods = true;
1195 } else { 1195 } else {
1196 this.showPayMethods = false; 1196 this.showPayMethods = false;
1197 } 1197 }
1198 }, 1198 },
1199 getPaymentMethod() { 1199 getPaymentMethod() {
1200 if (this.editData.paymentStatus == "PARTIALLY_PAID") { 1200 if (this.editData.paymentStatus == "PARTIALLY_PAID") {
1201 this.showPayMethods = true; 1201 this.showPayMethods = true;
1202 } else if (this.editData.paymentStatus == "FULLY_PAID") { 1202 } else if (this.editData.paymentStatus == "FULLY_PAID") {
1203 this.showPayMethods = true; 1203 this.showPayMethods = true;
1204 } else { 1204 } else {
1205 this.showPayMethods = false; 1205 this.showPayMethods = false;
1206 } 1206 }
1207 }, 1207 },
1208 selectAllStudent() { 1208 selectAllStudent() {
1209 // console.log("this.studentId", this.invoiceData.studentId); 1209 // console.log("this.studentId", this.invoiceData.studentId);
1210 this.invoiceData.students = []; 1210 this.invoiceData.students = [];
1211 if (this.invoiceData.studentId === "Select All") { 1211 if (this.invoiceData.studentId === "Select All") {
1212 for (let i = 1; i < this.studentList.length; i++) { 1212 for (let i = 1; i < this.studentList.length; i++) {
1213 this.invoiceData.students.push(this.studentList[i]._id); 1213 this.invoiceData.students.push(this.studentList[i]._id);
1214 console.log("data", this.invoiceData.students); 1214 console.log("data", this.invoiceData.students);
1215 // data.push(this.studentList[i]._id); 1215 // data.push(this.studentList[i]._id);
1216 // console.log("data", data); 1216 // console.log("data", data);
1217 } 1217 }
1218 } else { 1218 } else {
1219 this.invoiceData.students.push(this.invoiceData.studentId); 1219 this.invoiceData.students.push(this.invoiceData.studentId);
1220 } 1220 }
1221 }, 1221 },
1222 displaySearch() { 1222 displaySearch() {
1223 (this.show = false), (this.showSearch = true); 1223 (this.show = false), (this.showSearch = true);
1224 }, 1224 },
1225 closeSearch() { 1225 closeSearch() {
1226 this.showSearch = false; 1226 this.showSearch = false;
1227 this.show = true; 1227 this.show = true;
1228 this.search = ""; 1228 this.search = "";
1229 }, 1229 },
1230 updateDoneInvoice() { 1230 updateDoneInvoice() {
1231 this.editInvoiceDialog = false; 1231 this.editInvoiceDialog = false;
1232 this.getInvoiceList(); 1232 this.getInvoiceList();
1233 }, 1233 },
1234 updatePayment() { 1234 updatePayment() {
1235 this.paymentInvoiceDialog = false; 1235 this.paymentInvoiceDialog = false;
1236 this.getInvoiceList(); 1236 this.getInvoiceList();
1237 this.snackbar = true; 1237 this.snackbar = true;
1238 this.text = "Payment added successfully"; 1238 this.text = "Payment added successfully";
1239 this.color = "green"; 1239 this.color = "green";
1240 } 1240 }
1241 }, 1241 },
1242 mounted() { 1242 mounted() {
1243 this.token = this.$store.state.token; 1243 this.token = this.$store.state.token;
1244 this.getInvoiceList(); 1244 this.getInvoiceList();
1245 this.getAllClasses(); 1245 this.getAllClasses();
1246 this.getfeeType(); 1246 this.getfeeType();
1247 this.getAllStudents(); 1247 this.getAllStudents();
1248 } 1248 }
1249 }; 1249 };
1250 </script> 1250 </script>
1251 1251
1252 1252
1253 <style scoped> 1253 <style scoped>
1254 table { 1254 table {
1255 border-collapse: collapse; 1255 border-collapse: collapse;
1256 border: 1px solid #e2e7eb; 1256 border: 1px solid #e2e7eb;
1257 } 1257 }
1258 1258
1259 th, 1259 th,
1260 .tdFeeType { 1260 .tdFeeType {
1261 border: 1px solid #e2e7eb; 1261 border: 1px solid #e2e7eb;
1262 padding: 10px; 1262 padding: 10px;
1263 text-align: center; 1263 text-align: center;
1264 } 1264 }
1265 table.feeTypeTable { 1265 table.feeTypeTable {
1266 table-layout: auto !important; 1266 table-layout: auto !important;
1267 width: 100% !important; 1267 width: 100% !important;
1268 } 1268 }
1269 </style> 1269 </style>