viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 7c435b5bb8b2f83542a09bed5c4d257bb121bbc7

Authored by Shikha Mishra
1 parent 4ba5134133
Exists in master and in 3 other branches amber-development, development, ui-design

added icard report option

Showing 4 changed files with 1021 additions and 11 deletions   Show diff stats
... ... @@ -136,7 +136,7 @@ const adminMenu = [
136 136 items: [
137 137 { name: 'studentReport', title: 'Student Report', component: 'Student Report', action: '', },
138 138 { name: 'ProgressCardReport', title: 'Progress Card Report', component: 'Progress Card Report', action: '', },
139   - // { name: 'idCard', title: 'Id Card Report', component: 'Id Card Report', action: '', },
  139 + { name: 'idCard', title: 'Id Card Report', component: 'Id Card Report', action: '', },
140 140 { name: 'admitCard', title: 'Admit Card Report', component: 'Admit Card Report', action: '',}
141 141 ]
142 142 },
... ...
src/pages/Report/idCard.vue
Diff comments   View file @7c435b5
... ... @@ -0,0 +1,1010 @@
  1 +<template>
  2 + <v-container fluid class="body-color">
  3 + <!-- **** Id Card Report Table **** -->
  4 + <v-card flat class="elevation-0 transparent">
  5 + <v-form ref="form" v-model="valid" lazy-validation>
  6 + <v-flex xs12 sm12 lg12>
  7 + <v-layout wrap>
  8 + <v-flex xs12 sm12 lg3>
  9 + <v-layout>
  10 + <v-flex xs3 sm6 lg4 class="subheading mt-4">
  11 + <label class="right">Id Card For:</label>
  12 + </v-flex>
  13 + <v-flex xs7 sm6 lg8 class="ml-2">
  14 + <v-autocomplete
  15 + v-model="getReport.role"
  16 + label="Please Select"
  17 + :items="getRoles"
  18 + item-text="name"
  19 + item-value="role"
  20 + :rules="cardRules"
  21 + @change="getRoleInputs(getReport.role)"
  22 + required
  23 + ></v-autocomplete>
  24 + </v-flex>
  25 + </v-layout>
  26 + </v-flex>
  27 + <v-flex xs12 sm12 lg3 v-if="this.showClass">
  28 + <v-layout>
  29 + <v-flex xs3 sm6 lg2 class="subheading mt-4">
  30 + <label class="right">Class:</label>
  31 + </v-flex>
  32 + <v-flex xs9 sm6 lg8 class="ml-2">
  33 + <v-select
  34 + v-model="getReport.classId"
  35 + label="Select Class"
  36 + :items="classList"
  37 + item-text="classNum"
  38 + item-value="_id"
  39 + :rules="classRules"
  40 + @change="getSections(getReport.classId)"
  41 + required
  42 + ></v-select>
  43 + </v-flex>
  44 + </v-layout>
  45 + </v-flex>
  46 + <v-flex xs12 sm12 lg3 v-if="getReport.classId">
  47 + <v-layout>
  48 + <v-flex xs3 sm6 lg2 class="subheading mt-4">
  49 + <label class="right">Section:</label>
  50 + </v-flex>
  51 + <v-flex xs9 sm6 lg8 class="ml-2">
  52 + <v-select
  53 + :items="addSection"
  54 + label="Select Section"
  55 + v-model="getReport.sectionId"
  56 + item-text="name"
  57 + item-value="_id"
  58 + name="Select Section"
  59 + @change="getStudents"
  60 + :rules="sectionRules"
  61 + required
  62 + ></v-select>
  63 + </v-flex>
  64 + </v-layout>
  65 + </v-flex>
  66 + <v-flex xs12 sm12 lg3 v-if="getReport.sectionId">
  67 + <v-layout>
  68 + <v-flex xs3 sm6 lg2 class="subheading mt-4">
  69 + <label class="right">Student:</label>
  70 + </v-flex>
  71 + <v-flex xs9 sm6 lg8 class="ml-2">
  72 + <v-select
  73 + :items="getStudentsList"
  74 + label="Select Student"
  75 + v-model="getReport._id"
  76 + item-text="name"
  77 + item-value="_id"
  78 + :rules="studentRules"
  79 + required
  80 + ></v-select>
  81 + </v-flex>
  82 + </v-layout>
  83 + </v-flex>
  84 + <v-flex xs12 sm12 lg3 v-if="this.showTeacher">
  85 + <v-layout>
  86 + <v-flex xs3 sm6 lg2 class="subheading mt-4">
  87 + <label class="right">Teacher:</label>
  88 + </v-flex>
  89 + <v-flex xs9 sm6 lg8 class="ml-2">
  90 + <v-select
  91 + v-model="getReport._id"
  92 + label="Select Teacher"
  93 + :items="teacherList"
  94 + item-text="name"
  95 + item-value="_id"
  96 + :rules="teacherRules"
  97 + required
  98 + ></v-select>
  99 + </v-flex>
  100 + </v-layout>
  101 + </v-flex>
  102 + <v-flex xs12 sm12 lg3 v-if="this.showAdmin">
  103 + <v-layout>
  104 + <v-flex xs3 sm6 lg2 class="subheading mt-4">
  105 + <label class="right">Admin:</label>
  106 + </v-flex>
  107 + <v-flex xs9 sm6 lg8 class="ml-2">
  108 + <v-select
  109 + v-model="getReport._id"
  110 + label="Select Admin"
  111 + :items="userData"
  112 + item-text="name"
  113 + item-value="_id"
  114 + :rules="adminRules"
  115 + required
  116 + ></v-select>
  117 + </v-flex>
  118 + </v-layout>
  119 + </v-flex>
  120 + <v-flex xs12 sm12 lg3 v-if="this.showAccountant">
  121 + <v-layout>
  122 + <v-flex xs3 sm6 lg2 class="subheading mt-4">
  123 + <label class="right">Accountant:</label>
  124 + </v-flex>
  125 + <v-flex xs9 sm6 lg8 class="ml-2">
  126 + <v-select
  127 + v-model="getReport._id"
  128 + label="Select Accountant"
  129 + :items="Users"
  130 + item-text="name"
  131 + item-value="_id"
  132 + :rules="accountantRules"
  133 + required
  134 + ></v-select>
  135 + </v-flex>
  136 + </v-layout>
  137 + </v-flex>
  138 + <v-flex xs12 sm12 lg3 v-if="this.showLibrarian">
  139 + <v-layout>
  140 + <v-flex xs3 sm6 lg2 class="subheading mt-4">
  141 + <label class="right">Librarian:</label>
  142 + </v-flex>
  143 + <v-flex xs9 sm6 lg8 class="ml-2">
  144 + <v-select
  145 + v-model="getReport._id"
  146 + label="Select Librarian"
  147 + :items="Users"
  148 + item-text="name"
  149 + item-value="_id"
  150 + :rules="librarianRules"
  151 + required
  152 + ></v-select>
  153 + </v-flex>
  154 + </v-layout>
  155 + </v-flex>
  156 + <v-flex xs12 sm12 lg4>
  157 + <v-layout>
  158 + <v-flex xs4 sm4 lg3 class="subheading mt-4">
  159 + <label class="right">Type:</label>
  160 + </v-flex>
  161 + <v-flex xs7 sm6 lg8 class="ml-2">
  162 + <v-autocomplete
  163 + label="Please Select"
  164 + type="text"
  165 + :rules="typeRules"
  166 + :items="typeList"
  167 + v-model="getReport.form"
  168 + item-text="name"
  169 + item-value="value"
  170 + @change="getReport(getReport.form)"
  171 + required
  172 + ></v-autocomplete>
  173 + </v-flex>
  174 + </v-layout>
  175 + </v-flex>
  176 + <!-- <v-flex xs12 sm12 lg4>
  177 + <v-layout>
  178 + <v-flex xs4 sm4 lg3 class="subheading mt-4">
  179 + <label class="right">Background:</label>
  180 + </v-flex>
  181 + <v-flex xs7 sm6 lg8 class="ml-2">
  182 + <v-autocomplete
  183 + label="Please Select"
  184 + type="text"
  185 + :rules="backgroundRules"
  186 + :items="backgroundList"
  187 + required
  188 + ></v-autocomplete>
  189 + </v-flex>
  190 + </v-layout>
  191 + </v-flex>-->
  192 + <v-flex xs12 sm12 lg4 class="hidden-xs-only hidden-sm-only pl-5">
  193 + <v-btn
  194 + @click="getCards"
  195 + round
  196 + dark
  197 + :loading="loading"
  198 + class="open-dialog-button mt-3 ml-5"
  199 + >Get Report</v-btn>
  200 + </v-flex>
  201 + </v-layout>
  202 + </v-flex>
  203 + </v-form>
  204 + </v-card>
  205 + <div v-if="frontPart">
  206 + <v-layout v-show="showReport">
  207 + <v-flex xs12>
  208 + <v-card class="transparent elevation-0">
  209 + <v-layout>
  210 + <v-flex xs12>
  211 + <v-btn class="open-dialog-button right" round dark @click="prindIDCardReport()">
  212 + Print
  213 + <v-icon right dark>print</v-icon>
  214 + </v-btn>
  215 + </v-flex>
  216 + </v-layout>
  217 + <v-container grid-list-md>
  218 + <v-layout>
  219 + <v-flex xs6 md6 sm6>
  220 + <div class="icard-front">
  221 + <h2>{{ userData.name }}</h2>
  222 + <img :src="getCard.profilePicUrl" v-if="getCard.profilePicUrl" />
  223 + <img src="/static/icon/user.png" v-else-if="!getCard.profilePicUrl" />
  224 + <div class="Data" v-if="this.getReport.role === 4">
  225 + <p>
  226 + <span>
  227 + <b>Name</b>
  228 + </span>
  229 + : {{ getCard.studentData.name }}
  230 + </p>
  231 + </div>
  232 + <div class="Data" v-if="this.getReport.role === 4">
  233 + <p>
  234 + <span>
  235 + <b>Class</b>
  236 + </span>
  237 + : {{ getCard.studentData.classId.classNum }}
  238 + </p>
  239 + </div>
  240 + <div class="Data" v-if="this.getReport.role === 4">
  241 + <p>
  242 + <span>
  243 + <b>Section</b>
  244 + </span>
  245 + : {{ getCard.studentData.sectionId.name }}
  246 + </p>
  247 + </div>
  248 + <div class="Data" v-if="this.getReport.role === 4">
  249 + <p>
  250 + <span>
  251 + <b>Roll No</b>
  252 + </span>
  253 + : {{ getCard.studentData.rollNo }}
  254 + </p>
  255 + </div>
  256 + <div class="Data" v-if="this.getReport.role === 4">
  257 + <p>
  258 + <span>
  259 + <b>Blood Group</b>
  260 + </span>
  261 + : {{ getCard.studentData.bloodGroup }}
  262 + </p>
  263 + </div>
  264 + <div class="Data" v-if="this.getReport.role === 3">
  265 + <p>
  266 + <span>
  267 + <b>Name</b>
  268 + </span>
  269 + : {{ getCard.teachersData.name }}
  270 + </p>
  271 + </div>
  272 + <div class="Data" v-if="this.getReport.role === 3">
  273 + <p>
  274 + <span>
  275 + <b>Email</b>
  276 + </span>
  277 + : {{ getCard.teachersData.email }}
  278 + </p>
  279 + </div>
  280 + <div class="Data" v-if="this.getReport.role === 3">
  281 + <p>
  282 + <span>
  283 + <b>Phone No</b>
  284 + </span>
  285 + : {{ getCard.teachersData.mobileNo }}
  286 + </p>
  287 + </div>
  288 + <div class="Data" v-if="this.getReport.role === 3">
  289 + <p>
  290 + <span>
  291 + <b>Joining Date</b>
  292 + </span>
  293 + : {{ getCard.teachersData.joinDate }}
  294 + </p>
  295 + </div>
  296 + <div class="Data" v-if="this.getReport.role === 2">
  297 + <p>
  298 + <span>
  299 + <b>Name</b>
  300 + </span>
  301 + : {{ getCard.adminData.name }}
  302 + </p>
  303 + </div>
  304 + <div class="Data" v-if="this.getReport.role === 2">
  305 + <p>
  306 + <span>
  307 + <b>Establishment Year</b>
  308 + </span>
  309 + : {{ getCard.adminData.establishmentYear }}
  310 + </p>
  311 + </div>
  312 + <div class="Data" v-if="this.getReport.role === 2">
  313 + <p>
  314 + <span>
  315 + <b>Joining Date</b>
  316 + </span>
  317 + : {{ getCard.adminData.joinDate }}
  318 + </p>
  319 + </div>
  320 + <div class="Data" v-if="this.getReport.role === 2">
  321 + <p>
  322 + <span>
  323 + <b>Phone No</b>
  324 + </span>
  325 + : {{ getCard.adminData.mobile }}
  326 + </p>
  327 + </div>
  328 + <div class="Data" v-if="this.getReport.role === 2">
  329 + <p>
  330 + <span>
  331 + <b>Email</b>
  332 + </span>
  333 + : {{ getCard.adminData.email }}
  334 + </p>
  335 + </div>
  336 + <div class="Data" v-if="this.getReport.role === 6">
  337 + <p>
  338 + <span>
  339 + <b>Name</b>
  340 + </span>
  341 + : {{ getCard.usersData.name }}
  342 + </p>
  343 + </div>
  344 + <div class="Data" v-if="this.getReport.role === 6">
  345 + <p>
  346 + <span>
  347 + <b>Email</b>
  348 + </span>
  349 + : {{ getCard.usersData.email }}
  350 + </p>
  351 + </div>
  352 + <div class="Data" v-if="this.getReport.role === 6">
  353 + <p>
  354 + <span>
  355 + <b>Phone No</b>
  356 + </span>
  357 + : {{ getCard.usersData.phone }}
  358 + </p>
  359 + </div>
  360 + <div class="Data" v-if="this.getReport.role === 6">
  361 + <p>
  362 + <span>
  363 + <b>Gender</b>
  364 + </span>
  365 + : {{ getCard.usersData.gender }}
  366 + </p>
  367 + </div>
  368 + <div class="Data" v-if="this.getReport.role === 6">
  369 + <p>
  370 + <span>
  371 + <b>Joining Date</b>
  372 + </span>
  373 + : {{ getCard.usersData.joiningDate }}
  374 + </p>
  375 + </div>
  376 + <div class="Data" v-if="this.getReport.role === 7">
  377 + <p>
  378 + <span>
  379 + <b>Name</b>
  380 + </span>
  381 + : {{ getCard.usersData.name }}
  382 + </p>
  383 + </div>
  384 + <div class="Data" v-if="this.getReport.role === 7">
  385 + <p>
  386 + <span>
  387 + <b>Email</b>
  388 + </span>
  389 + : {{ getCard.usersData.email }}
  390 + </p>
  391 + </div>
  392 + <div class="Data" v-if="this.getReport.role === 7">
  393 + <p>
  394 + <span>
  395 + <b>Phone No</b>
  396 + </span>
  397 + : {{ getCard.usersData.phone }}
  398 + </p>
  399 + </div>
  400 + <div class="Data" v-if="this.getReport.role === 7">
  401 + <p>
  402 + <span>
  403 + <b>Gender</b>
  404 + </span>
  405 + : {{ getCard.usersData.gender }}
  406 + </p>
  407 + </div>
  408 + <div class="Data" v-if="this.getReport.role === 7">
  409 + <p>
  410 + <span>
  411 + <b>Joining Date</b>
  412 + </span>
  413 + : {{ getCard.usersData.joiningDate }}
  414 + </p>
  415 + </div>
  416 + </div>
  417 + </v-flex>
  418 + </v-layout>
  419 + </v-container>
  420 + </v-card>
  421 + <v-flex xs12 id="printMe" v-show="hideprintIdCard">
  422 + <v-layout style="print-data">
  423 + <h2>{{ userData.name }}</h2>
  424 + <img
  425 + :src="getCards.profilePicUrl"
  426 + v-if="getCards.profilePicUrl"
  427 + style="margin-top: 31px;"
  428 + />
  429 + <img
  430 + src="/static/icon/user.png"
  431 + v-else-if="!getCards.profilePicUrl"
  432 + style="margin-top: 31px;"
  433 + />
  434 + </v-layout>
  435 + <table
  436 + class="mb-5 tableRsponsive feeTypeTable"
  437 + style="border: 1px solid lightgrey;
  438 + border-collapse: collapse;!important
  439 + table-layout: auto !important;
  440 + width: 100% !important;"
  441 + >
  442 + <thead style="border: 1px solid lightgrey !important;">
  443 + <tr
  444 + style="border: 1px solid lightgrey !important;padding:4px;"
  445 + v-if="this.getReport.role === 4"
  446 + >
  447 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
  448 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Class</td>
  449 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Section</td>
  450 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Roll No</td>
  451 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Blood Group</td>
  452 + </tr>
  453 + <tr
  454 + style="border: 1px solid lightgrey !important;padding:4px;"
  455 + v-if="this.getReport.role === 3"
  456 + >
  457 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
  458 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
  459 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Phone No</td>
  460 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Joining Date</td>
  461 + </tr>
  462 + <tr
  463 + style="border: 1px solid lightgrey !important;padding:4px;"
  464 + v-if="this.getReport.role === 2"
  465 + >
  466 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
  467 + <td
  468 + style="border: 1px solid lightgrey !important;padding: 6px;"
  469 + >Establishment Year</td>
  470 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Joining Date</td>
  471 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Phone No</td>
  472 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
  473 + </tr>
  474 + <tr
  475 + style="border: 1px solid lightgrey !important;padding:4px;"
  476 + v-if="this.getReport.role === 6"
  477 + >
  478 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
  479 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
  480 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Phone No</td>
  481 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Gender</td>
  482 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Joining Date</td>
  483 + </tr>
  484 + <tr
  485 + style="border: 1px solid lightgrey !important;padding:4px;"
  486 + v-if="this.getReport.role === 7"
  487 + >
  488 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
  489 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
  490 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Phone No</td>
  491 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Gender</td>
  492 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Joining Date</td>
  493 + </tr>
  494 + </thead>
  495 + <tbody style="border: 1px solid lightgrey !important;">
  496 + <tr
  497 + style="border: 1px solid lightgrey !important;padding:4px;"
  498 + v-if="this.getReport.role === 4"
  499 + >
  500 + <td
  501 + style="border: 1px soild lightgrey !important;padding:6px;"
  502 + >{{ getCard.studentData.name }}</td>
  503 + <td
  504 + style="border: 1px soild lightgrey !important;padding:6px;"
  505 + >{{ getCard.studentData.classId.classNum }}</td>
  506 + <td
  507 + style="border: 1px soild lightgrey !important;padding:6px;"
  508 + >{{ getCard.studentData.sectionId.name }}</td>
  509 + <td
  510 + style="border: 1px soild lightgrey !important;padding:6px;"
  511 + >{{ getCard.studentData.rollNo }}</td>
  512 + <td
  513 + style="border: 1px soild lightgrey !important;padding:6px;"
  514 + >{{ getCard.studentData.bloodGroup }}</td>
  515 + </tr>
  516 + <tr
  517 + style="border: 1px solid lightgrey !important;padding:4px;"
  518 + v-if="this.getReport.role === 3"
  519 + >
  520 + <td
  521 + style="border: 1px soild lightgrey !important;padding:6px;"
  522 + >{{ getCard.teachersData.name }}</td>
  523 + <td
  524 + style="border: 1px soild lightgrey !important;padding:6px;"
  525 + >{{ getCard.teachersData.email }}</td>
  526 + <td
  527 + style="border: 1px soild lightgrey !important;padding:6px;"
  528 + >{{ getCard.teachersData.mobileNo }}</td>
  529 + <td
  530 + style="border: 1px soild lightgrey !important;padding:6px;"
  531 + >{{ getCard.teachersData.joinDate }}</td>
  532 + </tr>
  533 + <tr
  534 + style="border: 1px solid lightgrey !important;padding:4px;"
  535 + v-if="this.getReport.role === 2"
  536 + >
  537 + <td
  538 + style="border: 1px soild lightgrey !important;padding:6px;"
  539 + >{{ getCard.adminData.name }}</td>
  540 + <td
  541 + style="border: 1px soild lightgrey !important;padding:6px;"
  542 + >{{ getCard.adminData.establishmentYear }}</td>
  543 + <td
  544 + style="border: 1px soild lightgrey !important;padding:6px;"
  545 + >{{ getCard.adminData.joinDate }}</td>
  546 + <td
  547 + style="border: 1px soild lightgrey !important;padding:6px;"
  548 + >{{ getCard.adminData.mobile }}</td>
  549 + <td
  550 + style="border: 1px soild lightgrey !important;padding:6px;"
  551 + >{{ getCard.adminData.email }}</td>
  552 + </tr>
  553 + <tr
  554 + style="border: 1px solid lightgrey !important;padding:4px;"
  555 + v-if="this.getReport.role === 6"
  556 + >
  557 + <td
  558 + style="border: 1px soild lightgrey !important;padding:6px;"
  559 + >{{ getCard.usersData.name }}</td>
  560 + <td
  561 + style="border: 1px soild lightgrey !important;padding:6px;"
  562 + >{{ getCard.usersData.email }}</td>
  563 + <td
  564 + style="border: 1px soild lightgrey !important;padding:6px;"
  565 + >{{ getCard.usersData.phone }}</td>
  566 + <td
  567 + style="border: 1px soild lightgrey !important;padding:6px;"
  568 + >{{ getCard.usersData.gender }}</td>
  569 + <td
  570 + style="border: 1px soild lightgrey !important;padding:6px;"
  571 + >{{ getCard.usersData.joiningDate }}</td>
  572 + </tr>
  573 + <tr
  574 + style="border: 1px solid lightgrey !important;padding:4px;"
  575 + v-if="this.getReport.role === 7"
  576 + >
  577 + <td
  578 + style="border: 1px soild lightgrey !important;padding:6px;"
  579 + >{{ getCard.usersData.name }}</td>
  580 + <td
  581 + style="border: 1px soild lightgrey !important;padding:6px;"
  582 + >{{ getCard.usersData.email }}</td>
  583 + <td
  584 + style="border: 1px soild lightgrey !important;padding:6px;"
  585 + >{{ getCard.usersData.phone }}</td>
  586 + <td
  587 + style="border: 1px soild lightgrey !important;padding:6px;"
  588 + >{{ getCard.usersData.gender }}</td>
  589 + <td
  590 + style="border: 1px soild lightgrey !important;padding:6px;"
  591 + >{{ getCard.usersData.joiningDate }}</td>
  592 + </tr>
  593 + </tbody>
  594 + </table>
  595 + </v-flex>
  596 + </v-flex>
  597 + </v-layout>
  598 + </div>
  599 + <div v-if="backPart">
  600 + <v-layout v-show="showReport">
  601 + <v-flex xs12>
  602 + <!-- <v-btn class="open-dialog-button right" round dark @click="prindIDCardReport()">
  603 + Print
  604 + <v-icon right dark>print</v-icon>
  605 + </v-btn>-->
  606 + <table class="icard-data" id="printMe">
  607 + <tbody>
  608 + <tr>
  609 + <td class="icard-back">
  610 + <h3>This card is valid upto December 2019</h3>
  611 + <h5>If you found, please return this card to:</h5>
  612 + <p>{{userData.name}}</p>
  613 + <div class="school-address">
  614 + <p>{{ userData.address }}, {{ userData.pinCode }}</p>
  615 + </div>
  616 + <div class="icard-bottom">
  617 + <div class="qrcode">
  618 + <img src="/static/icon/qr-code.png" alt="icon" />
  619 + </div>
  620 + <div class="session">
  621 + <span>Session: 2019-2020</span>
  622 + </div>
  623 + </div>
  624 + </td>
  625 + </tr>
  626 + </tbody>
  627 + </table>
  628 + </v-flex>
  629 + </v-layout>
  630 + </div>
  631 + </v-container>
  632 +</template>
  633 +
  634 +<script>
  635 +import http from "@/Services/http.js";
  636 +import moment from "moment";
  637 +
  638 +export default {
  639 + data: () => ({
  640 + valid: true,
  641 + report: {},
  642 + userData: {},
  643 +
  644 + loading: false,
  645 + showReport: false,
  646 + frontPart: false,
  647 + backPart: false,
  648 + showClass: false,
  649 + showTeacher: false,
  650 + showAdmin: false,
  651 + showAccountant: false,
  652 + showLibrarian: false,
  653 + hideprintIdCard: false,
  654 +
  655 + getRoles: [],
  656 + classList: [],
  657 + getCard: [],
  658 + addSection: [],
  659 + getStudentsList: [],
  660 + teacherList: [],
  661 + userData: [],
  662 + Users: [],
  663 +
  664 + cardRules: [v => !!v || "Id-Card Field is required"],
  665 + classRules: [v => !!v || "Class Field is required"],
  666 + sectionRules: [v => !!v || "Section Field is required"],
  667 + studentRules: [v => !!v || "Student Field is required"],
  668 + teacherRules: [v => !!v || "Teacher Field is required"],
  669 + adminRules: [v => !!v || "Admin Field is required"],
  670 + accountantRules: [v => !!v || "Accountant Field is required"],
  671 + librarianRules: [v => !!v || "Librarian Field is required"],
  672 +
  673 + typeRules: [v => !!v || "Type is required"],
  674 + backgroundRules: [v => !!v || "Background is required"],
  675 +
  676 + typeList: [
  677 + {
  678 + name: "Front Part",
  679 + value: "frontPart"
  680 + },
  681 + {
  682 + name: "Back Part",
  683 + value: "backPart"
  684 + }
  685 + ],
  686 + backgroundList: ["Yes", "No"]
  687 + }),
  688 +
  689 + mounted() {
  690 + this.token = this.$store.state.token;
  691 + this.getUserData();
  692 + this.getRole();
  693 + },
  694 +
  695 + methods: {
  696 + getReport() {
  697 + if (this.getReport.form === "frontPart") {
  698 + this.frontPart = true;
  699 + this.backPart = false;
  700 + }
  701 + if (this.getReport.form === "backPart") {
  702 + this.frontPart = false;
  703 + this.backPart = true;
  704 + }
  705 + },
  706 + getRoleInputs(role) {
  707 + // console.log("role", role);
  708 + if (role === 4) {
  709 + // console.log("role", role);
  710 + this.showClass = true;
  711 + this.getClass();
  712 + }
  713 + if (role === 3) {
  714 + this.showTeacher = true;
  715 + this.getTeacherList();
  716 + }
  717 + if (role === 2) {
  718 + this.showAdmin = true;
  719 + this.getUserData();
  720 + }
  721 + if (role === 6) {
  722 + this.showAccountant = true;
  723 + this.getUsersList();
  724 + }
  725 + if (role === 7) {
  726 + this.showLibrarian = true;
  727 + this.getUsersList();
  728 + }
  729 + },
  730 +
  731 + prindIDCardReport() {
  732 + // Pass the element id here
  733 + this.$htmlToPaper("printMe");
  734 + },
  735 + getUserData() {
  736 + http()
  737 + .get("/getParticularUserDetail")
  738 + .then(response => {
  739 + this.userData = response.data.data;
  740 + // this.adminList = response.data.data;
  741 + })
  742 + .catch(error => {
  743 + // if (error.response.status === 401) {
  744 + // this.$router.replace({ path: "/" });
  745 + // this.$store.dispatch("setToken", null);
  746 + // this.$store.dispatch("Id", null);
  747 + // }
  748 + });
  749 + },
  750 + getRole() {
  751 + this.showLoader = true;
  752 + http()
  753 + .get("/getRolesList", {
  754 + headers: { Authorization: "Bearer " + this.token }
  755 + })
  756 + .then(response => {
  757 + this.getRoles = response.data.data;
  758 + // if (this.getRoles[0].role !== 1){
  759 + // this.getRoles = response.data.data;
  760 + // console.log("bdhcbkguvhb", this.getRoles[0].role);
  761 + // }
  762 + // this.role = response.data.data;
  763 + // console.log("this.role", this.role);
  764 + this.showLoader = false;
  765 + })
  766 + .catch(error => {
  767 + this.showLoader = false;
  768 + // if (error.response.status === 401) {
  769 + // this.$router.replace({ path: "/" });
  770 + // this.$store.dispatch("setToken", null);
  771 + // this.$store.dispatch("Id", null);
  772 + // this.$store.dispatch("Role", null);
  773 + // }
  774 + });
  775 + },
  776 + getClass() {
  777 + console.log("get classes");
  778 + this.showLoader = true;
  779 + http()
  780 + .get("/getClassesList", {
  781 + headers: { Authorization: "Bearer " + this.token }
  782 + })
  783 + .then(response => {
  784 + this.classList = response.data.data;
  785 + this.showLoader = false;
  786 + })
  787 + .catch(error => {
  788 + this.showLoader = false;
  789 + // console.log("err====>", err);
  790 + });
  791 + },
  792 + getSections(_id) {
  793 + this.showLoader = true;
  794 + http()
  795 + .get(
  796 + "/getSectionsList",
  797 + { params: { classId: _id } },
  798 + {
  799 + headers: { Authorization: "Bearer " + this.token }
  800 + }
  801 + )
  802 + .then(response => {
  803 + this.addSection = response.data.data;
  804 + this.showLoader = false;
  805 + })
  806 + .catch(err => {
  807 + this.showLoader = false;
  808 + // console.log("err====>", err);
  809 + });
  810 + },
  811 + getStudents() {
  812 + this.showLoader = true;
  813 + http()
  814 + .get("/getStudentWithClass", {
  815 + params: {
  816 + classId: this.getReport.classId,
  817 + sectionId: this.getReport.sectionId
  818 + }
  819 + })
  820 + .then(response => {
  821 + this.getStudentsList = response.data.data;
  822 + this.showLoader = false;
  823 + })
  824 + .catch(error => {
  825 + console.log("err====>", error);
  826 + this.showLoader = false;
  827 + });
  828 + },
  829 + getCards() {
  830 + http()
  831 + .get("/getIdCardDetail", {
  832 + headers: {
  833 + Authorization: "Bearer " + this.token
  834 + },
  835 + params: {
  836 + profileId: this.getReport._id,
  837 + role: this.getReport.role
  838 + }
  839 + })
  840 + .then(response => {
  841 + this.getCard = response.data.data;
  842 + this.showLoader = false;
  843 + this.showReport = true;
  844 + })
  845 + .catch(error => {
  846 + this.showLoader = false;
  847 + });
  848 + },
  849 + getTeacherList() {
  850 + this.showLoader = true;
  851 + var token = this.$store.state.token;
  852 + http()
  853 + .get("/getTeachersList", {
  854 + headers: { Authorization: "Bearer " + token }
  855 + })
  856 + .then(response => {
  857 + this.teacherList = response.data.data;
  858 + this.showLoader = false;
  859 + })
  860 + .catch(error => {
  861 + this.showLoader = false;
  862 + if (error.response.status === 401) {
  863 + this.$router.replace({ path: "/" });
  864 + this.$store.dispatch("setToken", null);
  865 + this.$store.dispatch("Id", null);
  866 + }
  867 + });
  868 + },
  869 + getUsersList() {
  870 + this.showLoader = true;
  871 + var token = this.$store.state.token;
  872 + http()
  873 + .get("/getUsersList", {
  874 + headers: { Authorization: "Bearer " + token }
  875 + })
  876 + .then(response => {
  877 + this.Users = response.data.data;
  878 + this.showLoader = false;
  879 + })
  880 + .catch(error => {
  881 + this.showLoader = false;
  882 + if (error.response.status === 401) {
  883 + this.$router.replace({ path: "/" });
  884 + this.$store.dispatch("setToken", null);
  885 + this.$store.dispatch("Id", null);
  886 + }
  887 + });
  888 + },
  889 + getParentDetails() {
  890 + http()
  891 + .get("getParentsList", {
  892 + headers: {
  893 + Authorization: "Bearer " + this.$store.state.token
  894 + }
  895 + })
  896 + .then(response => {
  897 + this.parentsList = response.data.data;
  898 + })
  899 + .catch(error => {
  900 + // console.log("err====>", error.response.data.message);
  901 + this.showLoader = false;
  902 + if (error.response.status === 401) {
  903 + this.$router.replace({ path: "/" });
  904 + this.$store.dispatch("setToken", null);
  905 + this.$store.dispatch("Id", null);
  906 + this.$store.dispatch("Role", null);
  907 + }
  908 + });
  909 + }
  910 + }
  911 +};
  912 +</script>
  913 +
  914 +<style scoped>
  915 +.Data {
  916 + width: 100%;
  917 + float: left;
  918 + margin-bottom: 0px;
  919 + padding: 0 15px;
  920 + font-size: 14px;
  921 + margin-top: 5px;
  922 + text-align: justify;
  923 +}
  924 +.icard-front {
  925 + margin: 3px;
  926 + float: right;
  927 + border: 1px solid #000;
  928 + padding: 10px;
  929 + width: 85%;
  930 + text-align: center;
  931 + height: 96%;
  932 +}
  933 +.icard-front h3 {
  934 + font-size: 20px;
  935 +}
  936 +.icard-front img {
  937 + width: 50px;
  938 + height: 50px;
  939 + margin-bottom: 5px;
  940 + /* border: 1px solid #ddd; */
  941 +}
  942 +.icard-data {
  943 + font-family: Arial;
  944 + max-width: 794px;
  945 + max-height: 1123px;
  946 + margin-left: auto;
  947 + margin-right: auto;
  948 + -webkit-print-color-adjust: exact;
  949 +}
  950 +.icard-back {
  951 + margin: 3px;
  952 + float: right;
  953 + border: 1px solid #000;
  954 + padding: 10px;
  955 + width: 257px;
  956 + text-align: center;
  957 + height: 290px;
  958 +}
  959 +.icard-back h3 {
  960 + background-color: #000;
  961 + color: #fff;
  962 + font-size: 13px;
  963 + padding: 5px 0px;
  964 + margin: 5px;
  965 + margin-top: 13px;
  966 +}
  967 +.icard-back h5 {
  968 + font-size: 11px;
  969 + color: #000;
  970 + font-weight: bold;
  971 + padding: 5px 0px;
  972 +}
  973 +.icard-back p {
  974 + font-size: 15px;
  975 + color: #000;
  976 + font-weight: 500px;
  977 + line-height: 17px;
  978 +}
  979 +.school-address {
  980 + /* width: 40%; */
  981 + font-weight: 500px;
  982 + color: #000;
  983 +}
  984 +.icard-bottom {
  985 + padding-top: 5px;
  986 + text-align: center;
  987 +}
  988 +.qrcode {
  989 + float: left;
  990 + width: 50%;
  991 +}
  992 +.qrcode img {
  993 + width: 60px;
  994 + height: 60px;
  995 +}
  996 +.session {
  997 + float: right;
  998 + width: 70%;
  999 +}
  1000 +@media screen and (max-width: 360px) {
  1001 + .icard-front {
  1002 + width: 316px;
  1003 + height: 418px;
  1004 + float: inherit;
  1005 + }
  1006 + .icard-back {
  1007 + float: left;
  1008 + }
  1009 +}
  1010 +</style>
0 1011 \ No newline at end of file
... ...
src/router/paths.js
Diff comments   View file @7c435b5
... ... @@ -657,16 +657,16 @@ export default [{
657 657 `@/pages/Report/progressCardReport.vue`
658 658 )
659 659 },
660   - // {
661   - // path: '/idCard',
662   - // meta: {},
663   - // name: 'Id Card Report',
664   - // props: (route) => ({ type: route.query.type }),
665   - // component: () =>
666   - // import (
667   - // `@/pages/Report/idCard.vue`
668   - // )
669   - // },
  660 + {
  661 + path: '/idCard',
  662 + meta: {},
  663 + name: 'Id Card Report',
  664 + props: (route) => ({ type: route.query.type }),
  665 + component: () =>
  666 + import (
  667 + `@/pages/Report/idCard.vue`
  668 + )
  669 + },
670 670 {
671 671 path: '/admitCard',
672 672 meta: {},
... ...
static/icon/qr-code.png
Diff comments   View file @7c435b5

2.07 KB