hesabixCore/webUI/src/views/acc/component/rec.vue

<template>
  <v-btn v-if="totalAmount > 0" icon color="error" class="ml-2" @click="dialog = true">
    <v-icon>mdi-cash</v-icon>
    <v-tooltip activator="parent" location="bottom">ثبت دریافت</v-tooltip>
  </v-btn>

  <v-dialog 
    v-model="dialog" 
    :fullscreen="$vuetify.display.mobile" 
    :max-width="$vuetify.display.mobile ? '' : '950'" 
    persistent
    :class="$vuetify.display.mobile ? 'mobile-dialog' : ''"
  >
    <v-card :rounded="false" class="d-flex flex-column dialog-card">
      <v-toolbar color="toolbar" flat>
        <v-toolbar-title>
          <v-icon color="error" left>mdi-cash</v-icon>
          ثبت دریافت
        </v-toolbar-title>
        <v-spacer></v-spacer>
        
        <v-menu bottom>
          <template v-slot:activator="{ props }">
            <v-btn icon color="success" v-bind="props" :disabled="loading">
              <v-icon>mdi-plus</v-icon>
              <v-tooltip activator="parent" location="bottom">افزودن دریافت</v-tooltip>
            </v-btn>
          </template>
          <v-list>
            <v-list-item @click="addItem('bank')">
              <v-list-item-title>حساب بانکی</v-list-item-title>
            </v-list-item>
            <v-list-item @click="addItem('cashdesk')">
              <v-list-item-title>صندوق</v-list-item-title>
            </v-list-item>
            <v-list-item @click="addItem('salary')">
              <v-list-item-title>تنخواه گردان</v-list-item-title>
            </v-list-item>
            <v-list-item @click="addItem('cheque')">
              <v-list-item-title>چک</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>

        <v-btn icon color="primary" @click="submit" :disabled="loading">
          <v-icon>mdi-content-save</v-icon>
          <v-tooltip activator="parent" location="bottom">ثبت</v-tooltip>
        </v-btn>
        <v-btn icon @click="dialog = false" :disabled="loading">
          <v-icon>mdi-close</v-icon>
        </v-btn>
      </v-toolbar>

      <v-card-text class="flex-grow-1 overflow-y-auto pa-2">
        <v-container class="pa-0">
          <v-row>
            <v-col cols="12" md="5">
              <Hdatepicker v-model="date" label="تاریخ" />
            </v-col>
            <v-col cols="12" md="7">
              <v-text-field v-model="des" label="شرح" outlined clearable class="mb-4"></v-text-field>
            </v-col>
          </v-row>

          <v-row>
            <v-col cols="12" md="6">
              <v-text-field v-model="formattedTotalPays" label="مجموع" readonly outlined></v-text-field>
            </v-col>
            <v-col cols="12" md="6">
              <v-text-field v-model="formattedRemainingAmount" label="باقی مانده" readonly outlined></v-text-field>
            </v-col>
          </v-row>

          <div v-if="items.length === 0" class="text-center pa-4">
            هیچ دریافتی ثبت نشده است.
          </div>

          <v-row v-else>
            <v-col v-for="(item, index) in items" :key="index" cols="12">
              <v-card :class="{
                'bank-card': item.type === 'bank',
                'cashdesk-card': item.type === 'cashdesk',
                'salary-card': item.type === 'salary',
                'cheque-card': item.type === 'cheque'
              }" border="sm">
                <v-card-item>
                  <template v-slot:prepend>
                    <v-icon :color="item.type === 'bank' ? 'blue' :
                      item.type === 'cashdesk' ? 'green' :
                      item.type === 'salary' ? 'orange' : 'purple'">
                      {{ item.type === 'bank' ? 'mdi-bank' :
                        item.type === 'cashdesk' ? 'mdi-cash-register' :
                        item.type === 'salary' ? 'mdi-wallet' : 'mdi-checkbook' }}
                    </v-icon>
                  </template>

                  <template v-slot:append>
                    <v-btn-group>
                      <v-btn variant="text" color="primary" density="comfortable" @click="fillWithTotal(item)">
                        <v-icon>mdi-cash-100</v-icon>
                        <v-tooltip activator="parent" location="bottom">کل فاکتور</v-tooltip>
                      </v-btn>
                      <v-btn variant="text" color="error" density="comfortable" @click="deleteItem(index)">
                        <v-icon>mdi-trash-can</v-icon>
                        <v-tooltip activator="parent" location="bottom">حذف</v-tooltip>
                      </v-btn>
                    </v-btn-group>
                  </template>
                </v-card-item>

                <v-card-text>
                  <v-row class="mt-2">
                    <v-col cols="12" sm="6">
                      <v-select 
                        v-if="item.type === 'bank'" 
                        v-model="item.bank" 
                        :items="listBanks" 
                        item-title="name"
                        return-object 
                        label="بانک"
                        variant="outlined"
                      ></v-select>
                      <v-select 
                        v-if="item.type === 'cashdesk'" 
                        v-model="item.cashdesk" 
                        :items="listCashdesks"
                        item-title="name" 
                        return-object 
                        label="صندوق"
                        variant="outlined"
                      ></v-select>
                      <v-select 
                        v-if="item.type === 'salary'" 
                        v-model="item.salary" 
                        :items="listSalarys" 
                        item-title="name"
                        return-object 
                        label="تنخواه گردان"
                        variant="outlined"
                      ></v-select>
                    </v-col>
                    <v-col cols="12" sm="6">
                      <Hnumberinput 
                        v-model="item.bd" 
                        label="مبلغ" 
                        placeholder="0" 
                        @update:modelValue="calc"
                        variant="outlined"
                      />
                    </v-col>
                    <v-col cols="12" sm="6">
                      <v-text-field 
                        v-model="item.referral" 
                        label="ارجاع"
                        variant="outlined"
                      ></v-text-field>
                    </v-col>
                    <v-col cols="12" sm="6">
                      <v-text-field 
                        v-model="item.des" 
                        label="شرح"
                        variant="outlined"
                      ></v-text-field>
                    </v-col>
                  </v-row>

                  <v-row v-if="item.type === 'cheque'" class="mt-2">
                    <v-col cols="12" sm="6">
                      <v-text-field v-model="item.chequeNum" label="شماره چک" required variant="outlined"></v-text-field>
                    </v-col>
                    <v-col cols="12" sm="6">
                      <v-text-field v-model="item.chequeSayadNum" label="شماره صیاد" required variant="outlined"></v-text-field>
                    </v-col>
                    <v-col cols="12" sm="6">
                      <v-text-field v-model="item.chequeBank" label="بانک صادرکننده" required variant="outlined"></v-text-field>
                    </v-col>
                    <v-col cols="12" sm="6">
                      <Hdatepicker v-model="item.chequeDate" label="تاریخ چک" required />
                    </v-col>
                  </v-row>
                </v-card-text>
              </v-card>
            </v-col>
          </v-row>

          <v-overlay :model-value="loading" contained class="align-center justify-center">
            <v-progress-circular indeterminate size="64" color="primary"></v-progress-circular>
          </v-overlay>
        </v-container>
      </v-card-text>
    </v-card>
  </v-dialog>

  <v-dialog v-model="successDialog" max-width="400">
    <v-card color="success">
      <v-card-text class="text-center pa-4">
        <v-icon size="large" color="white" class="mb-4">mdi-check-circle</v-icon>
        <div class="text-h6 text-white mb-2">ثبت موفق</div>
        <div class="text-white">{{ successMessage }}</div>
      </v-card-text>
    </v-card>
  </v-dialog>

  <v-dialog v-model="errorDialog" max-width="400">
    <v-card color="error">
      <v-card-text class="text-center pa-4">
        <v-icon size="large" color="white" class="mb-4">mdi-alert-circle</v-icon>
        <div class="text-h6 text-white mb-2">خطا</div>
        <div class="text-white" style="white-space: pre-line">{{ errorMessage }}</div>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="white" variant="text" @click="errorDialog = false">بستن</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import axios from 'axios'
import { VDataTable as DataTable } from 'vuetify/components'
import Hdatepicker from '@/components/forms/Hdatepicker.vue'
import Hnumberinput from '@/components/forms/Hnumberinput.vue'

interface Item {
  id: string | number;
  type: string;
  bd: number;
  bs: number;
  table: number;
  des: string;
  bank?: any;
  cashdesk?: any;
  salary?: any;
  chequeNum?: string;
  chequeSayadNum?: string;
  chequeBank?: string;
  chequeDate?: string;
  referral?: string;
}

export default defineComponent({
  name: 'Rec',
  components: {
    DataTable,
    Hdatepicker,
    Hnumberinput
  },
  props: {
    totalAmount: Number,
    originalDoc: String,
    person: [String, Number],
    windowsState: Object
  },
  setup() {
    const dialog = ref(false)
    return { dialog }
  },
  data: () => ({
    submitedDoc: {},
    des: '',
    items: [] as Item[],
    date: '',
    listBanks: [],
    listSalarys: [],
    listCashdesks: [],
    totalPays: 0,
    loading: false,
    errorMessage: '',
    successDialog: false,
    successMessage: '',
    errorDialog: false
  }),
  computed: {
    headers() {
      return [
        { title: 'نوع', key: 'type', sortable: false, width: '5%' },
        { title: 'انتخاب', key: 'selection', sortable: false, width: '25%' },
        { title: 'مبلغ', key: 'bd', sortable: false, width: '20%' },
        { title: 'ارجاع', key: 'referral', sortable: false, width: '15%' },
        { title: 'شرح', key: 'des', sortable: false, width: '25%' },
        { title: 'عملیات', key: 'actions', sortable: false, width: '10%' }
      ]
    },
    remainingAmount() {
      return this.totalAmount - this.totalPays
    },
    formattedTotalPays() {
      return this.formatNumber(this.totalPays) || '۰';
    },
    formattedRemainingAmount() {
      return this.formatNumber(this.remainingAmount) || '۰';
    }
  },
  methods: {
    formatNumber(value: number | string): string {
      if (value === undefined || value === null || value === '') return '۰';
      const num = parseInt(value.toString().replace(/[^\d]/g, ''));
      return num.toLocaleString('fa-IR') || '۰';
    },
    fillWithTotal(pay) {
      pay.bd = this.totalAmount - this.totalPays
      this.calc()
    },
    addItem(type) {
      let obj = {}
      let canAdd = true
      const uniqueId = Date.now() + Math.random().toString(36).substr(2, 9)

      if (type === 'bank') {
        if (this.listBanks.length === 0) {
          this.errorMessage = 'ابتدا یک حساب بانکی ایجاد کنید.'
          canAdd = false
        } else {
          obj = { uniqueId, id: '', type: 'bank', bank: null, cashdesk: {}, salary: {}, bs: 0, bd: 0, des: '', table: 5, referral: '' }
        }
      } else if (type === 'cashdesk') {
        if (this.listCashdesks.length === 0) {
          this.errorMessage = 'ابتدا یک صندوق ایجاد کنید.'
          canAdd = false
        } else {
          obj = { uniqueId, id: '', type: 'cashdesk', bank: {}, cashdesk: null, salary: {}, bs: 0, bd: 0, des: '', table: 121, referral: '' }
        }
      } else if (type === 'salary') {
        if (this.listSalarys.length === 0) {
          this.errorMessage = 'ابتدا یک تنخواه گردان ایجاد کنید.'
          canAdd = false
        } else {
          obj = { uniqueId, id: '', type: 'salary', bank: {}, cashdesk: {}, salary: null, bs: 0, bd: 0, des: '', table: 122, referral: '' }
        }
      } else if (type === 'cheque') {
        obj = {
          uniqueId,
          id: '', type: 'cheque', bank: {}, cashdesk: {}, salary: {}, bs: 0, bd: 0, des: '', table: 125, referral: '',
          chequeBank: '', chequeDate: '', chequeSayadNum: '', chequeNum: '', chequeType: 'input', chequeOwner: this.person
        }
      }

      if (canAdd) {
        this.items.push(obj)
        this.errorMessage = ''
      }
    },
    deleteItem(index) {
      this.items.splice(index, 1)
      this.calc()
    },
    async loadData() {
      this.loading = true
      try {
        const [banks, salarys, cashdesks] = await Promise.all([
          axios.post('/api/bank/list'),
          axios.post('/api/salary/list'),
          axios.post('/api/cashdesk/list')
        ])
        this.listBanks = banks.data
        this.listSalarys = salarys.data
        this.listCashdesks = cashdesks.data
      } catch (error) {
        this.errorMessage = 'خطا در بارگذاری اطلاعات'
      } finally {
        this.loading = false
      }
    },
    calc() {
      this.totalPays = this.items.reduce((sum, item) => {
        const bd = item.bd !== null && item.bd !== undefined ? Number(item.bd) : 0
        return sum + bd
      }, 0)
    },
    async submit() {
      let errors = []

      if (this.items.length === 0) {
        this.errorMessage = 'هیچ دریافتی ثبت نشده است.';
        this.errorDialog = true;
        return;
      }

      if (this.totalAmount && this.totalPays && this.totalAmount < this.totalPays) {
        errors.push('مبالغ وارد شده بیشتر از مبلغ فاکتور است.')
      }

      this.items.forEach((element: any, index: number) => {
        if (element.bd === 0 || element.bd === null || element.bd === undefined) {
          errors.push(`مبلغ صفر در ردیف ${index + 1} نا معتبر است.`)
        }
        if (element.type === 'cheque' && (!element.chequeBank || !element.chequeNum || !element.chequeDate)) {
          errors.push(`موارد الزامی ثبت چک در ردیف ${index + 1} وارد نشده است.`)
        }
        if (element.type === 'bank' && (!element.bank || !Object.keys(element.bank).length)) {
          errors.push(`بانک در ردیف ${index + 1} انتخاب نشده است.`)
        }
        if (element.type === 'salary' && (!element.salary || !Object.keys(element.salary).length)) {
          errors.push(`تنخواه گردان در ردیف ${index + 1} انتخاب نشده است.`)
        }
        if (element.type === 'cashdesk' && (!element.cashdesk || !Object.keys(element.cashdesk).length)) {
          errors.push(`صندوق در ردیف ${index + 1} انتخاب نشده است.`)
        }
      })

      if (errors.length > 0) {
        this.errorMessage = errors.join('\n')
        this.errorDialog = true
        return
      }

      this.loading = true
      this.errorMessage = ''
      const rows = [...this.items].map(element => {
        if (element.type === 'bank') element.id = element.bank.id
        else if (element.type === 'salary') element.id = element.salary.id
        else if (element.type === 'cashdesk') element.id = element.cashdesk.id
        element.des = element.des || `دریافت وجه فاکتور شماره ${this.originalDoc}`
        return element
      })

      if (!this.person) {
        throw new Error('شخص انتخاب نشده است')
      }

      const personRow = {
        id: this.person,
        type: 'person',
        bd: 0,
        bs: this.totalPays,
        table: 3,
        des: `دریافت وجه فاکتور شماره ${this.formatNumber(this.originalDoc || '')}`
      }

      rows.push(personRow)

      this.des = this.des || `دریافت وجه فاکتور شماره ${this.formatNumber(this.originalDoc || '')}`

      try {
        const response = await axios.post('/api/accounting/insert', {
          date: this.date,
          des: this.des,
          type: 'sell_receive',
          update: null,
          rows,
          related: this.originalDoc
        })

        if (response.data.result === 1) {
          this.submitedDoc = response.data.doc

          if (this.windowsState) {
            this.windowsState.submited = true
          }

          this.successMessage = 'سند دریافت با موفقیت ثبت شد'
          this.successDialog = true

          setTimeout(() => {
            this.successDialog = false
            this.dialog = false
          }, 2000)

          this.$emit('submit-success', response.data.doc)
        } else {
          this.errorMessage = response.data.msg || 'خطا در ثبت سند'
        }
      } catch (error) {
        this.errorMessage = error.response?.data?.message || 'خطا در ثبت سند'
      } finally {
        this.loading = false
      }
    }
  },
  async mounted() {
    await this.loadData()
    const response = await axios.get('/api/year/get')
    this.date = response.data.now // تاریخ جاری شمسی
  }
})
</script>

<style scoped>
.v-card.success {
  background-color: #4caf50 !important;
}

/* استایل‌های جدید برای کارت‌ها */
.v-card {
  transition: all 0.3s ease;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.v-card-text {
  overflow-x: hidden;
  padding: 16px;
}

/* رنگ‌های متفاوت برای انواع مختلف کارت‌ها */
.v-card.bank-card {
  border-right: 4px solid #1976d2;
}

.v-card.cashdesk-card {
  border-right: 4px solid #4caf50;
}

.v-card.salary-card {
  border-right: 4px solid #ff9800;
}

.v-card.cheque-card {
  border-right: 4px solid #9c27b0;
}

.v-card-item {
  background-color: rgba(0, 0, 0, 0.02);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.v-btn-group .v-btn {
  margin: 0 2px;
}

/* استایل‌های جدید برای رفع مشکل اسکرول */
.mobile-dialog {
  overflow: hidden !important;
}

.mobile-dialog :deep(.v-card) {
  height: 100vh !important;
  max-height: 100vh !important;
}

.mobile-dialog :deep(.v-card-text) {
  padding: 8px !important;
  overflow-y: auto !important;
  height: calc(100vh - 64px) !important; /* 64px ارتفاع toolbar */
}

.mobile-dialog :deep(.v-overlay__content) {
  width: 100% !important;
  height: 100% !important;
}

:deep(.v-card-text .container) {
  max-width: 100% !important;
}
</style>