Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <template>
- <div class="dashboard-contents" v-if="userData.RoleDetails.IsReadPayroll">
- <div class="row">
- <div class="col-lg-4" style="margin-top: 20px;">
- <h2 style="padding:15px; margin-top:10px;">Daftar Gaji Karyawan</h2>
- </div>
- <div class="col-lg-8" style="padding-top: 15px; margin-top: 20px;">
- <div class="row">
- <div class="col-lg-3">
- <!-- <select class="select-dropdown" name="" id="">
- <option value="" disabled selected>Pilih bendera...</option>
- <option value="Semua cabang">Semua bendera</option>
- <option value="Cabang A">Bendera A</option>
- <option value="Cabang B">Bendera B</option>
- </select> -->
- <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>
- </div>
- <div class="col-lg-3">
- <!-- <select class="select-dropdown" name="" id="">
- <option value="" disabled selected>Pilih cabang...</option>
- <option value="Semua cabang">Semua cabang</option>
- <option value="Cabang A">Cabang A</option>
- <option value="Cabang B">Cabang B</option>
- </select> -->
- <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>
- </div>
- <div class="col-lg-3" v-if="userData.RoleDetails.IsExportPayroll">
- <download-excel class="btn waves-effect waves-circle waves-float pull-right button-export"
- worksheet = "Daftar THP Karyawan"
- name = "data_thp_karyawan.xls"
- :data = "exportData">
- <img src="@/assets/images/file-text.png" alt="Alternate Text" /> Export
- </download-excel>
- </div>
- <div class="col-lg-3" v-if="userData.RoleDetails.IsCreatePayroll">
- <router-link :to="{name: 'PayrollManagement.create'}" type="button" class="btn waves-effect waves-circle waves-float pull-right button-create">
- <img src="@/assets/images/plus-circle.png" alt="Alternate Text" /> Tambah
- </router-link>
- </div>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="col-lg-12 second-row">
- <hr/>
- <div class="row">
- <div class="col-lg-6">
- <div class="row">
- <div class="col-lg-10 search-div">
- <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;" />
- </div>
- <div class="col-lg-1 search-div">
- <button class="btn btn-primary" @click="search(key)"><span class="fa fa-search"></span></button>
- </div>
- <div class="col-lg-1 search-div">
- <button v-if="key != ''" class="btn btn-erase" @click="deleteSearch()"><span class="fa fa-times"></span></button>
- </div>
- </div>
- </div>
- <div class="col-lg-4"></div>
- <div class="col-lg-2">
- <select class="select-dropdown" name="" id="">
- <option value="" disabled selected>Pilih periode...</option>
- <option value="Januari">Januari</option>
- <option value="Februari">Februari</option>
- <option value="Maret">Maret</option>
- <option value="April">April</option>
- <option value="Mei">Mei</option>
- <option value="Juni">Juni</option>
- <option value="Juli">Juli</option>
- <option value="Agustus">Agustus</option>
- <option value="September">September</option>
- <option value="Oktober">Oktober</option>
- <option value="November">November</option>
- <option value="Desember">Desember</option>
- </select>
- </div>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="col-lg-12">
- <div class="table-div">
- <b-table striped hover
- id="payrolls"
- :items="payroll"
- :fields="fields"
- :filter="query"
- class="table table-hover table-striped"
- style="margin-top: 10px;">
- <template v-slot:cell(Action)="data" v-if="userData.RoleDetails.IsReadPayroll">
- <b-dropdown text="Action" variant="primary" style="width: 120px;">
- <b-dropdown-item v-if="userData.RoleDetails.IsUpdatePayroll" @click="edit(data.item.Id)">Edit</b-dropdown-item>
- <b-dropdown-item v-if="userData.RoleDetails.IsDeletepayroll" @click="del(data.item.Id)">Delete</b-dropdown-item>
- </b-dropdown>
- </template>
- <template v-slot:cell(created_at)="data">
- {{ data.item.payrollv2.created_at }}
- </template>
- <template v-slot:cell(LegalEntityId)="data">
- {{ data.item.legal_entity.Name }}
- </template>
- <template v-slot:cell(BranchId)="data">
- {{ data.item.branch.Name }}
- </template>
- <template v-slot:cell(EmployeeCode)="data" v-if="userData.RoleDetails.IsReadPayroll">
- <!-- <a @click="detail(data.item.Id)" style="color: #0059aa; cursor: pointer; font-weight: 700;">{{ data.item.RegistrationNumber }}</a> -->
- {{ data.item.RegistrationNumber }}
- </template>
- <template v-slot:cell(EmployeeId)="data">
- {{ data.item.Name }}
- </template>
- <template v-slot:cell(Component)="data">
- <vue-select :disabled="$route.name.includes('.detail')" v-model="selectedSalaryComponent[data.index]" class="vue-select2" name="role" :options="salaryComponent" label="Name"></vue-select>
- </template>
- <template v-slot:cell(TotalPayment)="data">
- <input class="form-control" v-model="data.item.Total" />
- </template>
- <template v-slot:cell(TotalCalculation)="data">
- <button v-if="selectedSalaryComponent[data.index]" @click="calculate(data.item, data.index)" class="btn btn-primary btn-sm">Hitung</button>
- {{ data.item.TotalCalculation | currency }}
- </template>
- <!-- <template v-slot:cell(SalaryDate)="data">
- {{ data.item.payrollv2.SalaryDate | moment("DD MMMM YYYY") }}
- </template> -->
- <template v-slot:cell(Paid)="data">
- <Button v-if="data.item.Paid != 1" @click="payPayroll(data.item)" class="btn btn-success">Bayar</Button>
- <Button v-if="data.item.Paid == 1" class="btn btn-light" disabled>Sudah Dibayar</Button>
- </template>
- </b-table>
- <div v-if="loading" class="d-flex justify-content-center mb-3">
- <b-spinner label="Loading..."></b-spinner>
- </div>
- </div>
- <!-- <b-pagination
- v-model="currentPage"
- :total-rows="rows"
- :per-page="perPage"
- aria-controls="payrolls">
- </b-pagination> -->
- <div class="row">
- <div class="col-lg-6" style="margin-top: 20px;">
- <div class="row">
- <div class="col-lg-5" style="padding-left: 30px;">
- <label for="">Total Gaji Sudah Dibayarkan</label>
- </div>
- <div class="col-lg-6">
- <div class="form-control disabled-field">{{ paidPayroll(payroll) | currency }}</div>
- </div>
- </div>
- </div>
- <div class="col-lg-6" style="margin-top: 20px;">
- <div class="row">
- <div class="col-lg-5" style="padding-left: 30px;">
- <label for="">Total Gaji Belum Dibayarkan</label>
- </div>
- <div class="col-lg-6">
- <div class="form-control disabled-field">{{ unpaidPayroll(payroll) | currency }}</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import moment from 'moment'
- import $ from 'jquery'
- import DownloadExcel from 'vue-json-excel'
- import VueSelect from 'vue-select'
- import 'vue-select/dist/vue-select.css'
- import Payrolls from '@/services/Payrolls/Payroll'
- import SalaryComponentMain from '@/services/Payrolls/SalaryComponentMain'
- import LegalEntities from '@/services/Companies/LegalEntities'
- import Branches from '@/services/Companies/Branches'
- import Employee from '@/services/Employees/Employees'
- // import TransactionV2 from '@/services/Transactions/TransactionV2'
- // import AccountingV2 from '@/services/Accounting/AccountingV2'
- // import Ledgers from '@/services/Accounting/Ledger'
- // import TrialBanalces from '@/services/Accounting/TrialBalance'
- export default {
- name: 'PayrollManagement.index',
- components: {
- DownloadExcel,
- VueSelect
- },
- computed: {
- rows () {
- //hitung panjang data Transaksi Internal
- return this.payroll.length
- }
- },
- data () {
- return {
- key: '',
- query: '',
- loading: true,
- //definisikan per page dan halaman current isi 1 untuk awal
- perPage: 10,
- currentPage: 1,
- fields: [
- // { key: 'Action', label: 'Action' },
- { key: 'Id' , label: 'ID' },
- { key: 'SalaryDate', label: 'Tanggal', sortable: true },
- { key: 'LegalEntityId', label: 'Nama Bendera', sortable: true },
- { key: 'BranchId', label: 'Nama Cabang', sortable: true },
- { key: 'EmployeeCode', label: 'NIK', sortable: true },
- { key: 'EmployeeId', label: 'Nama Karyawan', sortable: true },
- { key: 'Component', label: 'Pilih Komponen', sortable: true },
- { key: 'TotalPayment', label: 'Total Gaji', sortable: true },
- { key: 'TotalCalculation', label: 'Total Perhitungan', sortable: true },
- { key: 'Paid', label: 'Bayar' },
- ],
- exportData: [],
- userData: {},
- payroll: [],
- salaryComponent: [],
- roles: [],
- selectedLegalEntity: {"Name" : "Pilih bendera..."},
- selectedBranch: {"Name" : "Pilih cabang..."},
- selectedSalaryComponent: [],
- legalEntity: [],
- branch: [],
- employee: []
- }
- },
- beforeUpdate: function() {
- if(this.selectedLegalEntity.Name != 'Pilih bendera...') {
- this.query = this.selectedLegalEntity.Name
- }
- if(this.selectedBranch.Name != 'Pilih cabang...') {
- this.query = this.selectedBranch.Name
- }
- },
- created: function () {
- this.init()
- },
- mounted: function () {
- window.$ = $
- this.init()
- if(localStorage.userData !== undefined) {
- this.userData = JSON.parse(localStorage.userData)
- } else {
- this.$router.push({ name: 'home' })
- location.reload()
- }
- },
- methods: {
- init: async function () {
- let result = await Payrolls.index()
- let salaryComponent = await SalaryComponentMain.index()
- let legalEntity = await LegalEntities.index()
- let branch = await Branches.index()
- let employee = await Employee.index()
- this.payroll = result.data
- this.salaryComponent = salaryComponent.data
- //fungsi export
- this.exportData = this.filterExport(result.data)
- this.legalEntity = this.itemLookup(legalEntity.data)
- this.branch = this.itemLookup(branch.data)
- this.employee = this.itemLookup(employee.data)
- this.loading = false
- },
- search: function(key) {
- this.query = key
- },
- deleteSearch: function() {
- this.query = ''
- this.key = ''
- },
- //Filter data yang mau di export
- filterExport: function (json) {
- // let data = []
- // for(var i = 0; i< json.length; i++) {
- // //Tentukan Kolom Yang Mau Dimasukin Disini
- // data.push({
- // 'SalaryDate': json[i].SalaryDate,
- // 'EmployeeName': json[i].employee.Name,
- // 'TotalPayment': json[i].TotalPayment,
- // 'TotalCalculation': json[i].TotalCalculation,
- // 'Branch': json[i].branch.Name,
- // })
- // }
- // return data
- return json
- },
- itemLookup: function (json) {
- let data = []
- for(var i = 0; i< json.length; i++) {
- data[json[i].Id] = json[i]
- }
- return data
- },
- //Calculate Total Amount
- // calculateTotalAmount: function () {
- // let amount = 0;
- // switch (salaryComponentId) {
- // }
- // },
- formatDate(time) {
- var formattedTime = moment(time).format('DD MMMM YYYY HH:mm')
- if(formattedTime == 'Invalid date') {
- formattedTime = '-'
- }
- return formattedTime
- },
- detail: function (id) {
- this.$router.push({ name: 'PayrollManagement.detail', params: { id: id } })
- },
- edit: function (id) {
- this.$router.push({ name: 'PayrollManagement.edit', params: { id: id } })
- },
- del: async function (id) {
- let ini = this
- ini.$fire({
- text: "Apakah anda yakin ingin menghapus item" + id + "?",
- type: "warning",
- showCancelButton: true,
- confirmButtonText: 'Ya',
- cancelButtonText: 'Tidak',
- showCloseButton: true,
- showLoaderOnConfirm: true,
- }).then(async function(isConfirm) {
- if (isConfirm.value) {
- ini.$fire({
- text: "Peringatan terakhir! Apakah anda yakin ingin menghapus ini?",
- type: "warning",
- showCancelButton: true,
- confirmButtonText: 'Ya',
- cancelButtonText: 'Tidak',
- showCloseButton: true,
- showLoaderOnConfirm: true,
- }).then(async function(isConfirm) {
- if (isConfirm.value) {
- let result = await Payrolls.delete(id)
- if(result.status == 200) {
- alert(result.data.message)
- ini.$router.push({ name: 'PayrollManagement.index' })
- location.reload()
- } else {
- alert("Delete Gagal")
- location.reload()
- }
- console.log('Keluar')
- }
- })
- } else {
- console.log('cancel')
- }
- })
- },
- calculate: async function(json,id) {
- let salary = 0
- let salaryComponentGet = this.selectedSalaryComponent[id]
- console.log(salaryComponentGet)
- let calculate = await Payrolls.calculate(salaryComponentGet);
- salary = salary + calculate.data
- this.payroll[id].TotalCalculation = salary
- this.payroll[id].Total = salary
- this.$root.$emit('bv::refresh::table', 'payrolls')
- console.log(salaryComponentGet)
- },
- payPayroll: async function(json) {
- json.Paid = true
- let transaction = {
- LegalEntityId: json.LegalEntityId,
- BranchId: json.BranchId,
- Code: "PYRGJ" + new Date().getUTCMilliseconds(),
- Type: "Penggajian",
- Source: "Payroll",
- TransactionType: "Payroll",
- Name: "Bayar Gaji",
- Nominal: json.TotalPayment,
- Sisa: 0,
- Total: json.TotalPayment,
- Tags: "Kas Besar",
- PaymentStatus: "Lunas",
- ItemQuantity: 1,
- Approval: false,
- Paid: false,
- Cancel: false,
- }
- let addPayroll = await Payrolls.create(transaction)
- // let transaction = {
- // LegalEntityId: json.LegalEntityId,
- // BranchId: json.BranchId,
- // Code: "PYRGJ" + new Date().getUTCMilliseconds(),
- // Type: "Penggajian",
- // Name: "Bayar Gaji",
- // Nominal: json.TotalPayment,
- // Sisa: 0,
- // Total: json.TotalPayment,
- // Tags: "Kas Besar",
- // PaymentStatus: "Lunas",
- // ItemQuantity: 1
- // }
- // await TransactionV2.create(transaction)
- // let accounting = {
- // LegalEntityId: json.LegalEntityId,
- // BranchId: json.BranchId,
- // Code: transaction.Code,
- // Type: "Kredit",
- // Name: transaction.Name,
- // Nominal: transaction.Nominal,
- // Sisa: transaction.Sisa,
- // Total: transaction.Total,
- // Tags: "Kas Besar",
- // PaymentStatus: "Lunas",
- // ItemQuantity: 1
- // }
- // let ledger = {
- // LegalEntityId: json.LegalEntityId,
- // BranchId: json.BranchId,
- // Code: transaction.Code,
- // Type: "Kredit",
- // Name: transaction.Name,
- // Nominal: transaction.Nominal,
- // Sisa: transaction.Sisa,
- // Total: transaction.Total,
- // //Tags: "Kas Besar",
- // PaymentStatus: "Lunas",
- // ItemQuantity: 1
- // }
- // let updateAccounting = await AccountingV2.create(accounting)
- // await Ledgers.create(ledger)
- // await TrialBanalces.create(accounting)
- if(addPayroll.status == 200) {
- this.$fire({
- title: 'Sukses',
- text: 'Pembayaran',
- icon: 'info',
- showConfirmButton: false
- })
- } else {
- this.$fire({
- title: 'Error',
- text: 'Input Data Gagal',
- icon: 'info',
- showConfirmButton: false
- })
- }
- this.$router.push({ name: 'PayrollManagement.index' })
- location.reload()
- },
- paidPayroll: function(json) {
- console.log(json)
- let sum = 0
- for(var i = 0; i < json.length; i++) {
- if(json[i].TotalPayment == null) {
- json[i].TotalPayment = 0
- }
- if(json[i].Paid == true) {
- sum = parseInt(sum) + parseInt(json[i].TotalPayment)
- }
- }
- return sum
- },
- unpaidPayroll: function(json) {
- console.log(json)
- let sum = 0
- for(var i = 0; i < json.length; i++) {
- if(json[i].TotalPayment == null) {
- json[i].TotalPayment = 0
- }
- if(json[i].Paid != true) {
- sum = parseInt(sum) + parseInt(json[i].TotalPayment)
- }
- }
- return sum
- },
- }
- }
- </script>
- <style>
- .table-div {
- padding-left: 30px;
- margin-left: 0px !important;
- overflow-x: auto;
- overflow-y: auto;
- }
- .second-row {
- margin-top: 30px;
- padding-left: 30px;
- }
- .select-dropdown {
- width: 100%;
- height: 45px;
- border-color: #0059aa;
- border-radius: 5px;
- }
- .button-export {
- width: 100%;
- height: 45px;
- background-color: #0059aa;
- color:white;
- border-radius: 5px;
- }
- .button-create {
- width: 100%;
- height: 45px;
- background-color: #20c197;
- color:white;
- border-radius: 5px;
- }
- </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement