API tools faq
paste
Advertisement
vitareinforce

payroll index.vue

vitareinforce
Sep 9th, 2020
85
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.65 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <template>
  3. <div class="dashboard-contents" v-if="userData.RoleDetails.IsReadPayroll">
  4. <div class="row">
  5. <div class="col-lg-4" style="margin-top: 20px;">
  6. <h2 style="padding:15px; margin-top:10px;">Daftar Gaji Karyawan</h2>
  7. </div>
  8. <div class="col-lg-8" style="padding-top: 15px; margin-top: 20px;">
  9. <div class="row">
  10. <div class="col-lg-3">
  11. <!-- <select class="select-dropdown" name="" id="">
  12. <option value="" disabled selected>Pilih bendera...</option>
  13. <option value="Semua cabang">Semua bendera</option>
  14. <option value="Cabang A">Bendera A</option>
  15. <option value="Cabang B">Bendera B</option>
  16. </select> -->
  17. <vue-select :disabled="$route.name.includes('.detail')" v-model="selectedLegalEntity" class="vue-select2" name="role" :options="userData.AccessSettings.filter(x => x.IsSelected == true)" label="Name"></vue-select>
  18. </div>
  19. <div class="col-lg-3">
  20. <!-- <select class="select-dropdown" name="" id="">
  21. <option value="" disabled selected>Pilih cabang...</option>
  22. <option value="Semua cabang">Semua cabang</option>
  23. <option value="Cabang A">Cabang A</option>
  24. <option value="Cabang B">Cabang B</option>
  25. </select> -->
  26. <vue-select v-if="selectedLegalEntity" :disabled="$route.name.includes('.detail')" v-model="selectedBranch" class="vue-select2" name="role" :options="selectedLegalEntity.branches" label="Name"></vue-select>
  27. </div>
  28. <div class="col-lg-3" v-if="userData.RoleDetails.IsExportPayroll">
  29. <download-excel class="btn waves-effect waves-circle waves-float pull-right button-export"
  30. worksheet = "Daftar THP Karyawan"
  31. name = "data_thp_karyawan.xls"
  32. :data = "exportData">
  33. <img src="@/assets/images/file-text.png" alt="Alternate Text" /> Export
  34. </download-excel>
  35. </div>
  36. <div class="col-lg-3" v-if="userData.RoleDetails.IsCreatePayroll">
  37. <router-link :to="{name: 'PayrollManagement.create'}" type="button" class="btn waves-effect waves-circle waves-float pull-right button-create">
  38. <img src="@/assets/images/plus-circle.png" alt="Alternate Text" /> Tambah
  39. </router-link>
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44.  
  45. <div class="row">
  46. <div class="col-lg-12 second-row">
  47. <hr/>
  48. <div class="row">
  49. <div class="col-lg-6">
  50. <div class="row">
  51. <div class="col-lg-10 search-div">
  52. <input type="text" name="permission" placeholder="Cari THP karyawan..." v-model="key" value="" style="width: 100%; height: 38px; float: right; margin-bottom: 10px; border: 1px solid rgba(184, 55, 62, 0.5); background-color: white; border-radius: 5px; padding: 5px; margin-bottom: 24px;" />
  53. </div>
  54. <div class="col-lg-1 search-div">
  55. <button class="btn btn-primary" @click="search(key)"><span class="fa fa-search"></span></button>
  56. </div>
  57. <div class="col-lg-1 search-div">
  58. <button v-if="key != ''" class="btn btn-erase" @click="deleteSearch()"><span class="fa fa-times"></span></button>
  59. </div>
  60. </div>
  61. </div>
  62. <div class="col-lg-4"></div>
  63. <div class="col-lg-2">
  64. <select class="select-dropdown" name="" id="">
  65. <option value="" disabled selected>Pilih periode...</option>
  66. <option value="Januari">Januari</option>
  67. <option value="Februari">Februari</option>
  68. <option value="Maret">Maret</option>
  69. <option value="April">April</option>
  70. <option value="Mei">Mei</option>
  71. <option value="Juni">Juni</option>
  72. <option value="Juli">Juli</option>
  73. <option value="Agustus">Agustus</option>
  74. <option value="September">September</option>
  75. <option value="Oktober">Oktober</option>
  76. <option value="November">November</option>
  77. <option value="Desember">Desember</option>
  78. </select>
  79. </div>
  80. </div>
  81. </div>
  82. </div>
  83.  
  84. <div class="row">
  85. <div class="col-lg-12">
  86. <div class="table-div">
  87. <b-table striped hover
  88. id="payrolls"
  89. :items="payroll"
  90. :fields="fields"
  91. :filter="query"
  92.  
  93. class="table table-hover table-striped"
  94. style="margin-top: 10px;">
  95. <template v-slot:cell(Action)="data" v-if="userData.RoleDetails.IsReadPayroll">
  96. <b-dropdown text="Action" variant="primary" style="width: 120px;">
  97. <b-dropdown-item v-if="userData.RoleDetails.IsUpdatePayroll" @click="edit(data.item.Id)">Edit</b-dropdown-item>
  98. <b-dropdown-item v-if="userData.RoleDetails.IsDeletepayroll" @click="del(data.item.Id)">Delete</b-dropdown-item>
  99. </b-dropdown>
  100. </template>
  101. <template v-slot:cell(created_at)="data">
  102. {{ data.item.payrollv2.created_at }}
  103. </template>
  104. <template v-slot:cell(LegalEntityId)="data">
  105. {{ data.item.legal_entity.Name }}
  106. </template>
  107. <template v-slot:cell(BranchId)="data">
  108. {{ data.item.branch.Name }}
  109. </template>
  110. <template v-slot:cell(EmployeeCode)="data" v-if="userData.RoleDetails.IsReadPayroll">
  111. <!-- <a @click="detail(data.item.Id)" style="color: #0059aa; cursor: pointer; font-weight: 700;">{{ data.item.RegistrationNumber }}</a> -->
  112. {{ data.item.RegistrationNumber }}
  113. </template>
  114. <template v-slot:cell(EmployeeId)="data">
  115. {{ data.item.Name }}
  116. </template>
  117. <template v-slot:cell(Component)="data">
  118. <vue-select :disabled="$route.name.includes('.detail')" v-model="selectedSalaryComponent[data.index]" class="vue-select2" name="role" :options="salaryComponent" label="Name"></vue-select>
  119. </template>
  120. <template v-slot:cell(TotalPayment)="data">
  121. <input class="form-control" v-model="data.item.Total" />
  122. </template>
  123. <template v-slot:cell(TotalCalculation)="data">
  124. <button v-if="selectedSalaryComponent[data.index]" @click="calculate(data.item, data.index)" class="btn btn-primary btn-sm">Hitung</button>
  125. {{ data.item.TotalCalculation | currency }}
  126. </template>
  127. <!-- <template v-slot:cell(SalaryDate)="data">
  128. {{ data.item.payrollv2.SalaryDate | moment("DD MMMM YYYY") }}
  129. </template> -->
  130. <template v-slot:cell(Paid)="data">
  131. <Button v-if="data.item.Paid != 1" @click="payPayroll(data.item)" class="btn btn-success">Bayar</Button>
  132. <Button v-if="data.item.Paid == 1" class="btn btn-light" disabled>Sudah Dibayar</Button>
  133. </template>
  134. </b-table>
  135. <div v-if="loading" class="d-flex justify-content-center mb-3">
  136. <b-spinner label="Loading..."></b-spinner>
  137. </div>
  138. </div>
  139. <!-- <b-pagination
  140. v-model="currentPage"
  141. :total-rows="rows"
  142. :per-page="perPage"
  143. aria-controls="payrolls">
  144. </b-pagination> -->
  145. <div class="row">
  146. <div class="col-lg-6" style="margin-top: 20px;">
  147. <div class="row">
  148. <div class="col-lg-5" style="padding-left: 30px;">
  149. <label for="">Total Gaji Sudah Dibayarkan</label>
  150. </div>
  151. <div class="col-lg-6">
  152. <div class="form-control disabled-field">{{ paidPayroll(payroll) | currency }}</div>
  153. </div>
  154. </div>
  155. </div>
  156. <div class="col-lg-6" style="margin-top: 20px;">
  157. <div class="row">
  158. <div class="col-lg-5" style="padding-left: 30px;">
  159. <label for="">Total Gaji Belum Dibayarkan</label>
  160. </div>
  161. <div class="col-lg-6">
  162. <div class="form-control disabled-field">{{ unpaidPayroll(payroll) | currency }}</div>
  163. </div>
  164. </div>
  165. </div>
  166. </div>
  167. </div>
  168. </div>
  169. </div>
  170. </template>
  171.  
  172. <script>
  173. import moment from 'moment'
  174. import $ from 'jquery'
  175. import DownloadExcel from 'vue-json-excel'
  176. import VueSelect from 'vue-select'
  177. import 'vue-select/dist/vue-select.css'
  178.  
  179. import Payrolls from '@/services/Payrolls/Payroll'
  180. import SalaryComponentMain from '@/services/Payrolls/SalaryComponentMain'
  181. import LegalEntities from '@/services/Companies/LegalEntities'
  182. import Branches from '@/services/Companies/Branches'
  183. import Employee from '@/services/Employees/Employees'
  184. // import TransactionV2 from '@/services/Transactions/TransactionV2'
  185. // import AccountingV2 from '@/services/Accounting/AccountingV2'
  186. // import Ledgers from '@/services/Accounting/Ledger'
  187. // import TrialBanalces from '@/services/Accounting/TrialBalance'
  188.  
  189. export default {
  190. name: 'PayrollManagement.index',
  191. components: {
  192. DownloadExcel,
  193. VueSelect
  194. },
  195. computed: {
  196. rows () {
  197. //hitung panjang data Transaksi Internal
  198. return this.payroll.length
  199. }
  200. },
  201. data () {
  202. return {
  203. key: '',
  204. query: '',
  205. loading: true,
  206. //definisikan per page dan halaman current isi 1 untuk awal
  207. perPage: 10,
  208. currentPage: 1,
  209. fields: [
  210. // { key: 'Action', label: 'Action' },
  211. { key: 'Id' , label: 'ID' },
  212. { key: 'SalaryDate', label: 'Tanggal', sortable: true },
  213. { key: 'LegalEntityId', label: 'Nama Bendera', sortable: true },
  214. { key: 'BranchId', label: 'Nama Cabang', sortable: true },
  215. { key: 'EmployeeCode', label: 'NIK', sortable: true },
  216. { key: 'EmployeeId', label: 'Nama Karyawan', sortable: true },
  217. { key: 'Component', label: 'Pilih Komponen', sortable: true },
  218. { key: 'TotalPayment', label: 'Total Gaji', sortable: true },
  219. { key: 'TotalCalculation', label: 'Total Perhitungan', sortable: true },
  220. { key: 'Paid', label: 'Bayar' },
  221. ],
  222. exportData: [],
  223. userData: {},
  224. payroll: [],
  225. salaryComponent: [],
  226. roles: [],
  227. selectedLegalEntity: {"Name" : "Pilih bendera..."},
  228. selectedBranch: {"Name" : "Pilih cabang..."},
  229. selectedSalaryComponent: [],
  230. legalEntity: [],
  231. branch: [],
  232. employee: []
  233. }
  234. },
  235. beforeUpdate: function() {
  236. if(this.selectedLegalEntity.Name != 'Pilih bendera...') {
  237. this.query = this.selectedLegalEntity.Name
  238. }
  239.  
  240. if(this.selectedBranch.Name != 'Pilih cabang...') {
  241. this.query = this.selectedBranch.Name
  242. }
  243. },
  244. created: function () {
  245. this.init()
  246. },
  247. mounted: function () {
  248. window.$ = $
  249. this.init()
  250. if(localStorage.userData !== undefined) {
  251. this.userData = JSON.parse(localStorage.userData)
  252. } else {
  253. this.$router.push({ name: 'home' })
  254. location.reload()
  255. }
  256. },
  257. methods: {
  258. init: async function () {
  259. let result = await Payrolls.index()
  260. let salaryComponent = await SalaryComponentMain.index()
  261. let legalEntity = await LegalEntities.index()
  262. let branch = await Branches.index()
  263. let employee = await Employee.index()
  264.  
  265. this.payroll = result.data
  266. this.salaryComponent = salaryComponent.data
  267. //fungsi export
  268. this.exportData = this.filterExport(result.data)
  269. this.legalEntity = this.itemLookup(legalEntity.data)
  270. this.branch = this.itemLookup(branch.data)
  271. this.employee = this.itemLookup(employee.data)
  272.  
  273. this.loading = false
  274. },
  275. search: function(key) {
  276. this.query = key
  277. },
  278. deleteSearch: function() {
  279. this.query = ''
  280. this.key = ''
  281. },
  282. //Filter data yang mau di export
  283. filterExport: function (json) {
  284. // let data = []
  285. // for(var i = 0; i< json.length; i++) {
  286. // //Tentukan Kolom Yang Mau Dimasukin Disini
  287. // data.push({
  288. // 'SalaryDate': json[i].SalaryDate,
  289. // 'EmployeeName': json[i].employee.Name,
  290. // 'TotalPayment': json[i].TotalPayment,
  291. // 'TotalCalculation': json[i].TotalCalculation,
  292. // 'Branch': json[i].branch.Name,
  293. // })
  294. // }
  295. // return data
  296. return json
  297. },
  298. itemLookup: function (json) {
  299. let data = []
  300. for(var i = 0; i< json.length; i++) {
  301. data[json[i].Id] = json[i]
  302. }
  303. return data
  304. },
  305.  
  306. //Calculate Total Amount
  307. // calculateTotalAmount: function () {
  308. // let amount = 0;
  309. // switch (salaryComponentId) {
  310. // }
  311. // },
  312.  
  313. formatDate(time) {
  314. var formattedTime = moment(time).format('DD MMMM YYYY HH:mm')
  315. if(formattedTime == 'Invalid date') {
  316. formattedTime = '-'
  317. }
  318. return formattedTime
  319. },
  320. detail: function (id) {
  321. this.$router.push({ name: 'PayrollManagement.detail', params: { id: id } })
  322. },
  323. edit: function (id) {
  324. this.$router.push({ name: 'PayrollManagement.edit', params: { id: id } })
  325. },
  326. del: async function (id) {
  327. let ini = this
  328. ini.$fire({
  329. text: "Apakah anda yakin ingin menghapus item" + id + "?",
  330. type: "warning",
  331. showCancelButton: true,
  332. confirmButtonText: 'Ya',
  333. cancelButtonText: 'Tidak',
  334. showCloseButton: true,
  335. showLoaderOnConfirm: true,
  336. }).then(async function(isConfirm) {
  337. if (isConfirm.value) {
  338. ini.$fire({
  339. text: "Peringatan terakhir! Apakah anda yakin ingin menghapus ini?",
  340. type: "warning",
  341. showCancelButton: true,
  342. confirmButtonText: 'Ya',
  343. cancelButtonText: 'Tidak',
  344. showCloseButton: true,
  345. showLoaderOnConfirm: true,
  346. }).then(async function(isConfirm) {
  347. if (isConfirm.value) {
  348. let result = await Payrolls.delete(id)
  349. if(result.status == 200) {
  350. alert(result.data.message)
  351. ini.$router.push({ name: 'PayrollManagement.index' })
  352. location.reload()
  353. } else {
  354. alert("Delete Gagal")
  355. location.reload()
  356. }
  357. console.log('Keluar')
  358. }
  359. })
  360. } else {
  361. console.log('cancel')
  362. }
  363. })
  364. },
  365. calculate: async function(json,id) {
  366. let salary = 0
  367. let salaryComponentGet = this.selectedSalaryComponent[id]
  368. console.log(salaryComponentGet)
  369. let calculate = await Payrolls.calculate(salaryComponentGet);
  370. salary = salary + calculate.data
  371. this.payroll[id].TotalCalculation = salary
  372. this.payroll[id].Total = salary
  373. this.$root.$emit('bv::refresh::table', 'payrolls')
  374. console.log(salaryComponentGet)
  375. },
  376. payPayroll: async function(json) {
  377. json.Paid = true
  378. let transaction = {
  379. LegalEntityId: json.LegalEntityId,
  380. BranchId: json.BranchId,
  381. Code: "PYRGJ" + new Date().getUTCMilliseconds(),
  382. Type: "Penggajian",
  383. Source: "Payroll",
  384. TransactionType: "Payroll",
  385. Name: "Bayar Gaji",
  386. Nominal: json.TotalPayment,
  387. Sisa: 0,
  388. Total: json.TotalPayment,
  389. Tags: "Kas Besar",
  390. PaymentStatus: "Lunas",
  391. ItemQuantity: 1,
  392. Approval: false,
  393. Paid: false,
  394. Cancel: false,
  395. }
  396. let addPayroll = await Payrolls.create(transaction)
  397.  
  398. // let transaction = {
  399. // LegalEntityId: json.LegalEntityId,
  400. // BranchId: json.BranchId,
  401. // Code: "PYRGJ" + new Date().getUTCMilliseconds(),
  402. // Type: "Penggajian",
  403. // Name: "Bayar Gaji",
  404. // Nominal: json.TotalPayment,
  405. // Sisa: 0,
  406. // Total: json.TotalPayment,
  407. // Tags: "Kas Besar",
  408. // PaymentStatus: "Lunas",
  409. // ItemQuantity: 1
  410. // }
  411. // await TransactionV2.create(transaction)
  412. // let accounting = {
  413. // LegalEntityId: json.LegalEntityId,
  414. // BranchId: json.BranchId,
  415. // Code: transaction.Code,
  416. // Type: "Kredit",
  417. // Name: transaction.Name,
  418. // Nominal: transaction.Nominal,
  419. // Sisa: transaction.Sisa,
  420. // Total: transaction.Total,
  421. // Tags: "Kas Besar",
  422. // PaymentStatus: "Lunas",
  423. // ItemQuantity: 1
  424. // }
  425.  
  426. // let ledger = {
  427. // LegalEntityId: json.LegalEntityId,
  428. // BranchId: json.BranchId,
  429. // Code: transaction.Code,
  430. // Type: "Kredit",
  431. // Name: transaction.Name,
  432. // Nominal: transaction.Nominal,
  433. // Sisa: transaction.Sisa,
  434. // Total: transaction.Total,
  435. // //Tags: "Kas Besar",
  436. // PaymentStatus: "Lunas",
  437. // ItemQuantity: 1
  438. // }
  439. // let updateAccounting = await AccountingV2.create(accounting)
  440. // await Ledgers.create(ledger)
  441. // await TrialBanalces.create(accounting)
  442.  
  443. if(addPayroll.status == 200) {
  444. this.$fire({
  445. title: 'Sukses',
  446. text: 'Pembayaran',
  447. icon: 'info',
  448. showConfirmButton: false
  449. })
  450. } else {
  451. this.$fire({
  452. title: 'Error',
  453. text: 'Input Data Gagal',
  454. icon: 'info',
  455. showConfirmButton: false
  456. })
  457. }
  458. this.$router.push({ name: 'PayrollManagement.index' })
  459. location.reload()
  460. },
  461. paidPayroll: function(json) {
  462. console.log(json)
  463. let sum = 0
  464. for(var i = 0; i < json.length; i++) {
  465. if(json[i].TotalPayment == null) {
  466. json[i].TotalPayment = 0
  467. }
  468. if(json[i].Paid == true) {
  469. sum = parseInt(sum) + parseInt(json[i].TotalPayment)
  470. }
  471. }
  472. return sum
  473. },
  474. unpaidPayroll: function(json) {
  475. console.log(json)
  476. let sum = 0
  477. for(var i = 0; i < json.length; i++) {
  478. if(json[i].TotalPayment == null) {
  479. json[i].TotalPayment = 0
  480. }
  481. if(json[i].Paid != true) {
  482. sum = parseInt(sum) + parseInt(json[i].TotalPayment)
  483. }
  484. }
  485. return sum
  486. },
  487. }
  488. }
  489. </script>
  490.  
  491. <style>
  492. .table-div {
  493. padding-left: 30px;
  494. margin-left: 0px !important;
  495. overflow-x: auto;
  496. overflow-y: auto;
  497. }
  498.  
  499. .second-row {
  500. margin-top: 30px;
  501. padding-left: 30px;
  502. }
  503.  
  504. .select-dropdown {
  505. width: 100%;
  506. height: 45px;
  507. border-color: #0059aa;
  508. border-radius: 5px;
  509. }
  510.  
  511. .button-export {
  512. width: 100%;
  513. height: 45px;
  514. background-color: #0059aa;
  515. color:white;
  516. border-radius: 5px;
  517. }
  518.  
  519. .button-create {
  520. width: 100%;
  521. height: 45px;
  522. background-color: #20c197;
  523. color:white;
  524. border-radius: 5px;
  525. }
  526. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!