viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit abce86599db9e38935f5d644afc5cab0e43b5a75

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

testing sucess of view invoice or view payment and finally code commited

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