hesabixCore/webUI/src/views/acc/bank/card.vue

<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>