forked from morrning/hesabixCore
464 lines
19 KiB
Vue
Executable file
464 lines
19 KiB
Vue
Executable file
<template>
|
|
<v-toolbar color="toolbar" dense flat>
|
|
<v-btn icon @click="$router.back()" class="d-none d-md-flex">
|
|
<v-icon>mdi-arrow-right</v-icon>
|
|
</v-btn>
|
|
<v-toolbar-title class="text-primary-dark">
|
|
{{ $t('drawer.bankaccounts_transactions') }}
|
|
</v-toolbar-title>
|
|
<v-spacer />
|
|
<v-menu>
|
|
<template v-slot:activator="{ props }">
|
|
<v-btn v-bind="props" icon="" color="red">
|
|
<v-tooltip activator="parent" :text="$t('dialog.export_pdf')" location="bottom" />
|
|
<v-icon icon="mdi-file-pdf-box"></v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<v-list>
|
|
<v-list-subheader color="primary">{{ $t('dialog.export_pdf') }}</v-list-subheader>
|
|
<v-list-item class="text-dark" :title="$t('dialog.selected')" @click="print(false)">
|
|
<template v-slot:prepend>
|
|
<v-icon color="green-darken-4" icon="mdi-check"></v-icon>
|
|
</template>
|
|
</v-list-item>
|
|
<v-list-item class="text-dark" :title="$t('dialog.selected_all')" @click="print(true)">
|
|
<template v-slot:prepend>
|
|
<v-icon color="indigo-darken-4" icon="mdi-expand-all"></v-icon>
|
|
</template>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
<v-menu>
|
|
<template v-slot:activator="{ props }">
|
|
<v-btn v-bind="props" icon="" color="green">
|
|
<v-tooltip activator="parent" :text="$t('dialog.export_excel')" location="bottom" />
|
|
<v-icon icon="mdi-file-excel-box"></v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<v-list>
|
|
<v-list-subheader color="primary">{{ $t('dialog.export_excel') }}</v-list-subheader>
|
|
<v-list-item class="text-dark" :title="$t('dialog.selected')" @click="excellOutput(false)">
|
|
<template v-slot:prepend>
|
|
<v-icon color="green-darken-4" icon="mdi-check"></v-icon>
|
|
</template>
|
|
</v-list-item>
|
|
<v-list-item class="text-dark" :title="$t('dialog.selected_all')" @click="excellOutput(true)">
|
|
<template v-slot:prepend>
|
|
<v-icon color="indigo-darken-4" icon="mdi-expand-all"></v-icon>
|
|
</template>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
</v-toolbar>
|
|
|
|
<v-container fluid class="pa-4">
|
|
<!-- انتخاب بانک -->
|
|
<v-row dense>
|
|
<v-col cols="12" md="12">
|
|
<v-autocomplete v-model="selectedObjectItem" :items="objectItems" item-title="name" item-value="code"
|
|
return-object :label="$t('dialog.bank_selection')" dense hide-details prepend-inner-icon="mdi-bank"
|
|
:loading="loading" @update:model-value="updateRoute" class="rounded-lg elevation-2">
|
|
<template v-slot:no-data>
|
|
{{ $t('pages.bank_card.no_results') }}
|
|
</template>
|
|
<template v-slot:item="{ props, item }">
|
|
<v-list-item v-bind="props">
|
|
<v-list-item-title>
|
|
<v-icon small left>mdi-bank</v-icon>
|
|
{{ item.raw.name }}
|
|
</v-list-item-title>
|
|
<v-list-item-subtitle>
|
|
<v-row dense>
|
|
<v-col cols="6">
|
|
<v-icon small left>mdi-credit-card</v-icon>
|
|
{{ item.raw.cardNum || 'بدون کارت' }}
|
|
</v-col>
|
|
<v-col cols="6">
|
|
<v-icon small left>mdi-account</v-icon>
|
|
{{ item.raw.owner || 'نامشخص' }}
|
|
</v-col>
|
|
</v-row>
|
|
</v-list-item-subtitle>
|
|
</v-list-item>
|
|
</template>
|
|
</v-autocomplete>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- کارت اطلاعات بانک -->
|
|
<v-row dense>
|
|
<v-col cols="12" md="6">
|
|
<v-card flat outlined class="rounded-lg elevation-2">
|
|
<v-toolbar color="primary-dark" dense flat class="rounded-t-lg">
|
|
<v-toolbar-title class="text-white">
|
|
{{ $t('pages.bank_card.bank_info') }}
|
|
<small class="text-info-light" v-if="selectedObjectItem">{{ selectedObjectItem.name }}</small>
|
|
</v-toolbar-title>
|
|
</v-toolbar>
|
|
<v-card-text class="pa-2">
|
|
<div class="text-subtitle-2">{{ $t('pages.bank_card.accounting_code') }}: <span class="text-primary">{{
|
|
selectedObjectItem.code || '-' }}</span></div>
|
|
<div class="text-subtitle-2">{{ $t('pages.bank_card.bank_name') }}: <span class="text-primary">{{
|
|
selectedObjectItem.name || '-' }}</span></div>
|
|
<div class="text-subtitle-2">{{ $t('pages.bank_card.card_number') }}: <span class="text-primary">{{
|
|
selectedObjectItem.cardNum || '-' }}</span></div>
|
|
<div class="text-subtitle-2">{{ $t('pages.bank_card.account_number') }}: <span class="text-primary">{{
|
|
selectedObjectItem.accountNum || '-' }}</span></div>
|
|
<div class="text-subtitle-2">{{ $t('pages.bank_card.shaba_number') }}: <span class="text-primary">{{
|
|
selectedObjectItem.shaba || '-' }}</span></div>
|
|
<div class="text-subtitle-2">{{ $t('pages.bank_card.owner') }}: <span class="text-primary">{{
|
|
selectedObjectItem.owner || '-' }}</span></div>
|
|
<div class="text-subtitle-2">{{ $t('pages.bank_card.branch') }}: <span class="text-primary">{{
|
|
selectedObjectItem.shobe || '-' }}</span></div>
|
|
<div class="text-subtitle-2">{{ $t('pages.bank_card.pos_number') }}: <span class="text-primary">{{
|
|
selectedObjectItem.posNum || '-' }}</span></div>
|
|
<div class="text-subtitle-2">{{ $t('pages.bank_card.internet_bank_phone') }}: <span class="text-primary">{{
|
|
selectedObjectItem.mobileInternetBank || '-' }}</span></div>
|
|
<div class="text-subtitle-2">{{ $t('pages.bank_card.description') }}: <span class="text-primary">{{
|
|
selectedObjectItem.des || '-' }}</span></div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-card flat outlined class="rounded-lg elevation-2">
|
|
<v-toolbar color="primary-dark" dense flat class="rounded-t-lg">
|
|
<v-toolbar-title class="text-white">
|
|
{{ $t('pages.bank_card.account_status') }}
|
|
<small class="text-info-light" v-if="selectedObjectItem">{{ selectedObjectItem.name }}</small>
|
|
</v-toolbar-title>
|
|
</v-toolbar>
|
|
<v-card-text class="pa-2">
|
|
<div class="text-subtitle-2">
|
|
{{ $t('pages.bank_card.accounting_status') }}:
|
|
<span :class="{
|
|
'text-success': selectedObjectItem.balance > 0,
|
|
'text-danger': selectedObjectItem.balance < 0,
|
|
'text-dark': selectedObjectItem.balance == 0
|
|
}">
|
|
{{ selectedObjectItem.balance > 0 ? $t('pages.bank_card.creditor') : selectedObjectItem.balance < 0 ?
|
|
$t('pages.bank_card.debtor') : $t('pages.bank_card.settled') }} </span>
|
|
</div>
|
|
<div class="text-subtitle-2">{{ $t('pages.bank_card.withdrawal') }}: <span class="text-primary">{{
|
|
$filters.formatNumber(selectedObjectItem.bs) || '-' }}</span></div>
|
|
<div class="text-subtitle-2">{{ $t('pages.bank_card.deposit') }}: <span class="text-primary">{{
|
|
$filters.formatNumber(selectedObjectItem.bd) || '-' }}</span></div>
|
|
<div class="text-subtitle-2">{{ $t('pages.bank_card.accounting_balance') }}: <span class="text-primary">{{
|
|
$filters.formatNumber(selectedObjectItem.balance) || '-' }}</span></div>
|
|
<v-divider class="my-2" />
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- جدول تراکنشها -->
|
|
<v-row dense>
|
|
<v-col cols="12">
|
|
<v-data-table v-model="itemsSelected" :headers="headers" :items="items" :search="searchValue" :loading="loading"
|
|
show-select dense :items-per-page="25" class="elevation-2 rounded-lg" :header-props="{ class: 'custom-header' }">
|
|
<template v-slot:top>
|
|
<v-toolbar flat dense color="grey-lighten-4" class="rounded-t-lg">
|
|
<v-toolbar-title class="text-subtitle-1">{{ $t('pages.bank_card.transactions') }}</v-toolbar-title>
|
|
<v-spacer></v-spacer>
|
|
<v-text-field v-model="searchValue" dense hide-details
|
|
prepend-inner-icon="mdi-magnify" />
|
|
</v-toolbar>
|
|
</template>
|
|
<template v-slot:item.operation="{ item }">
|
|
<v-btn variant="plain" icon size="small" :to="'/acc/accounting/view/' + item.code" color="success">
|
|
<v-icon small>mdi-eye</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<template v-slot:item.code="{ item }">
|
|
{{ $filters.formatNumber(item.code) }}
|
|
</template>
|
|
<template v-slot:item.type="{ item }">
|
|
<v-btn variant="plain" text size="small" :to="getTypeRoute(item.type, item.code)" class="text-none">
|
|
{{ getTypeLabel(item.type) }}
|
|
</v-btn>
|
|
</template>
|
|
<template v-slot:item.bd="{ item }">
|
|
{{ $filters.formatNumber(item.bd) }}
|
|
</template>
|
|
<template v-slot:item.bs="{ item }">
|
|
{{ $filters.formatNumber(item.bs) }}
|
|
</template>
|
|
<template v-slot:item.settlement="{ item }">
|
|
<v-chip
|
|
:color="item.settlement === 'بستانکار' ? 'success' : item.settlement === 'بدهکار' ? 'error' : item.settlement === 'تسویهشده' ? 'info' : 'default'"
|
|
size="small"
|
|
variant="outlined"
|
|
>
|
|
{{ item.settlement }}
|
|
</v-chip>
|
|
</template>
|
|
<template v-slot:item.balance="{ item }">
|
|
<span :class="{
|
|
'text-success': -item.balance > 0,
|
|
'text-danger': -item.balance < 0,
|
|
'text-dark': item.balance == 0
|
|
}">
|
|
{{ $filters.formatNumber(-item.balance) }}
|
|
</span>
|
|
</template>
|
|
<template v-slot:no-data>
|
|
{{ $t('pages.bank_card.no_data') }}
|
|
</template>
|
|
</v-data-table>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
|
|
<v-overlay :value="loading" contained class="align-center justify-center">
|
|
<v-progress-circular indeterminate size="64" />
|
|
</v-overlay>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from "axios";
|
|
import Swal from "sweetalert2";
|
|
import { ref } from "vue";
|
|
|
|
export default {
|
|
name: "card",
|
|
data() {
|
|
return {
|
|
searchValue: '',
|
|
itemsSelected: [],
|
|
items: [],
|
|
selectedObjectItem: { balance: 0, bs: 0, bd: 0 },
|
|
objectItems: [],
|
|
loading: ref(false),
|
|
headers: [
|
|
{ title: this.$t('dialog.operation'), key: "operation", align: "center", sortable: false },
|
|
{ title: this.$t('dialog.type'), key: "type", align: "center", sortable: true },
|
|
{ title: this.$t('dialog.invoice_num'), key: "code", align: "center", sortable: true },
|
|
{ title: this.$t('dialog.date'), key: "date", align: "center", sortable: true },
|
|
{ title: this.$t('app.body'), key: "des", align: "center" },
|
|
{ title: this.$t('pages.bank_card.detail'), key: "ref", align: "center", sortable: true },
|
|
{ title: this.$t('pages.bank_card.deposit'), key: "bd", align: "center", sortable: true },
|
|
{ title: this.$t('pages.bank_card.withdrawal'), key: "bs", align: "center", sortable: true },
|
|
{ title: this.$t('pages.bank_card.settlement'), key: "settlement", align: "center", sortable: true },
|
|
{ title: this.$t('pages.bank_card.available_balance'), key: "balance", align: "center", sortable: true },
|
|
],
|
|
};
|
|
},
|
|
mounted() {
|
|
this.loadData();
|
|
},
|
|
methods: {
|
|
updateRoute(selectedItem) {
|
|
if (selectedItem && selectedItem.code) {
|
|
this.$router.push(`/acc/banks/card/view/${selectedItem.code}`);
|
|
this.loadData();
|
|
this.loadBankBalance();
|
|
}
|
|
},
|
|
loadData() {
|
|
this.loading = true;
|
|
axios.post('/api/bank/list').then((response) => {
|
|
this.loading = false;
|
|
this.objectItems = response.data;
|
|
if (this.$route.params.id != '') {
|
|
this.loadObject(this.$route.params.id);
|
|
this.objectItems.forEach((item) => {
|
|
if (item.code == this.$route.params.id) {
|
|
this.selectedObjectItem = item;
|
|
}
|
|
});
|
|
} else {
|
|
this.selectedObjectItem = response.data[0];
|
|
}
|
|
this.loadObject(this.selectedObjectItem.code);
|
|
this.loadBankBalance();
|
|
});
|
|
},
|
|
loadBankBalance() {
|
|
if (this.selectedObjectItem && this.selectedObjectItem.code) {
|
|
axios.get(`/api/bank/balance/${this.selectedObjectItem.code}`).then((response) => {
|
|
this.selectedObjectItem.bs = parseFloat(response.data.credit) || 0;
|
|
this.selectedObjectItem.bd = parseFloat(response.data.debit) || 0;
|
|
this.selectedObjectItem.balance = parseFloat(response.data.balance) || 0;
|
|
});
|
|
}
|
|
},
|
|
loadObject(id) {
|
|
this.loading = true;
|
|
axios.post('/api/accounting/rows/search',
|
|
{
|
|
type: 'bank',
|
|
id: id
|
|
}
|
|
).then((response) => {
|
|
this.items = response.data;
|
|
this.items.forEach((item) => {
|
|
item.bs = this.$filters.formatNumber(item.bs)
|
|
item.bd = this.$filters.formatNumber(item.bd)
|
|
})
|
|
this.loading = false;
|
|
});
|
|
},
|
|
getTypeRoute(type, code) {
|
|
const routes = {
|
|
sell: '/acc/sell/view/',
|
|
buy: '/acc/buy/view/',
|
|
rfbuy: '/acc/rfbuy/view/',
|
|
rfsell: '/acc/rfsell/view/',
|
|
person_send: '/acc/accounting/view/',
|
|
person_receive: '/acc/accounting/view/',
|
|
cost: '/acc/accounting/view/',
|
|
income: '/acc/accounting/view/',
|
|
sell_receive: '/acc/accounting/view/',
|
|
buy_send: '/acc/accounting/view/',
|
|
reject_cheque: '/acc/accounting/view/',
|
|
modify_cheque: '/acc/accounting/view/',
|
|
modify_cheque_output: '/acc/accounting/view/',
|
|
pass_cheque: '/acc/accounting/view/',
|
|
transfer_cheque: '/acc/accounting/view/',
|
|
transfer: '/acc/accounting/view/',
|
|
doc: '/acc/accounting/view/',
|
|
calc: '/acc/accounting/view/',
|
|
open_balance: '/acc/accounting/view/',
|
|
walletPay: '/acc/accounting/view/',
|
|
};
|
|
return routes[type] + code;
|
|
},
|
|
getTypeLabel(type) {
|
|
const labels = {
|
|
sell: this.$t('pages.bank_card.sell_invoice'),
|
|
buy: this.$t('pages.bank_card.buy_invoice'),
|
|
rfbuy: this.$t('pages.bank_card.return_buy'),
|
|
rfsell: this.$t('pages.bank_card.return_sell'),
|
|
person_send: this.$t('pages.bank_card.payment'),
|
|
person_receive: this.$t('pages.bank_card.receipt'),
|
|
cost: this.$t('pages.bank_card.cost'),
|
|
income: this.$t('pages.bank_card.income'),
|
|
sell_receive: this.$t('pages.bank_card.sell_receive'),
|
|
buy_send: this.$t('pages.bank_card.buy_send'),
|
|
reject_cheque: this.$t('pages.bank_card.reject_cheque'),
|
|
modify_cheque: this.$t('pages.bank_card.modify_cheque'),
|
|
pass_cheque: this.$t('pages.bank_card.pass_cheque'),
|
|
modify_cheque_output: this.$t('pages.bank_card.modify_cheque_output'),
|
|
transfer_cheque: this.$t('pages.bank_card.transfer_cheque'),
|
|
transfer: this.$t('pages.bank_card.transfer'),
|
|
doc: this.$t('pages.bank_card.accounting_doc'),
|
|
calc: this.$t('pages.bank_card.calculation'),
|
|
open_balance: this.$t('pages.bank_card.open_balance'),
|
|
walletPay: this.$t('pages.bank_card.walletPay'),
|
|
};
|
|
return labels[type] || type;
|
|
},
|
|
excellOutput(AllItems = true) {
|
|
if (AllItems) {
|
|
this.loading = true;
|
|
axios({
|
|
method: 'post',
|
|
url: '/api/bank/card/list/excel',
|
|
data: { 'code': this.selectedObjectItem.code },
|
|
responseType: 'arraybuffer',
|
|
}).then((response) => {
|
|
this.loading = false;
|
|
var FILE = window.URL.createObjectURL(new Blob([response.data]));
|
|
var fileURL = window.URL.createObjectURL(new Blob([response.data]));
|
|
var fileLink = document.createElement('a');
|
|
|
|
fileLink.href = fileURL;
|
|
fileLink.setAttribute('download', 'bank-card-view.xlsx');
|
|
document.body.appendChild(fileLink);
|
|
fileLink.click();
|
|
})
|
|
}
|
|
else {
|
|
if (this.itemsSelected.length === 0) {
|
|
Swal.fire({
|
|
text: 'هیچ آیتمی انتخاب نشده است.',
|
|
icon: 'info',
|
|
confirmButtonText: 'قبول'
|
|
});
|
|
}
|
|
else {
|
|
this.loading = true;
|
|
axios({
|
|
method: 'post',
|
|
url: '/api/bank/card/list/excel',
|
|
responseType: 'arraybuffer',
|
|
data: {
|
|
'code': this.selectedObjectItem.code,
|
|
'items': this.itemsSelected
|
|
}
|
|
}).then((response) => {
|
|
this.loading = false;
|
|
var FILE = window.URL.createObjectURL(new Blob([response.data]));
|
|
var fileURL = window.URL.createObjectURL(new Blob([response.data]));
|
|
var fileLink = document.createElement('a');
|
|
|
|
fileLink.href = fileURL;
|
|
fileLink.setAttribute('download', 'bank-card-view.xlsx');
|
|
document.body.appendChild(fileLink);
|
|
fileLink.click();
|
|
})
|
|
}
|
|
}
|
|
},
|
|
print(AllItems = true) {
|
|
if (this.selectedObjectItem == null) {
|
|
Swal.fire({
|
|
text: 'هیچ آیتمی انتخاب نشده است.',
|
|
icon: 'info',
|
|
confirmButtonText: 'قبول'
|
|
});
|
|
}
|
|
else {
|
|
if (AllItems) {
|
|
this.loading = true;
|
|
axios.post('/api/bank/card/list/print', { 'code': this.selectedObjectItem.code }).then((response) => {
|
|
this.printID = response.data.id;
|
|
this.loading = false;
|
|
window.open(this.$API_URL + '/front/print/' + this.printID, '_blank', 'noreferrer');
|
|
})
|
|
}
|
|
else {
|
|
if (this.itemsSelected.length === 0) {
|
|
Swal.fire({
|
|
text: 'هیچ آیتمی انتخاب نشده است.',
|
|
icon: 'info',
|
|
confirmButtonText: 'قبول'
|
|
});
|
|
}
|
|
else {
|
|
this.loading = true;
|
|
axios.post('/api/bank/card/list/print', {
|
|
'code': this.selectedObjectItem.code,
|
|
'items': this.itemsSelected
|
|
}).then((response) => {
|
|
this.loading = false;
|
|
this.printID = response.data.id;
|
|
window.open(this.$API_URL + '/front/print/' + this.printID, '_blank', 'noreferrer');
|
|
})
|
|
}
|
|
}
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.custom-header {
|
|
background-color: #f5f5f5 !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
.v-data-table {
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.v-card {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.v-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
</style> |