boursecu_admin/src/pages/menuPages/physicalWithdraw/components/table.vue

<template>
  <div class="h-full min-h-0 min-w-0 max-w-full overflow-hidden">
    <BasicShowContext title="لیست برداشت فیزیکی">
      <div class="flex h-full min-h-0 flex-col">
        <BaseTable class="h-full min-h-0 min-w-0" v-bind="tblProps" @register="submit" ref="tbl">
          <template #extraHeader>
            <BaseButton type="primary" size="small" icon="vuesax-linear:add-square" @click="emits('add')">
              ثبت برداشت فیزیکی
            </BaseButton>
          </template>
          <template #action="{ record }">
            <div class="flex flex-col items-center gap-2 py-1">
              <div
                v-for="tx in record.transaction ?? []"
                :key="tx.id"
                class="flex w-full max-w-[220px] items-center justify-between gap-2 rounded border border-gray-200 px-2 py-1"
              >
                <span class="truncate text-xs">{{ tx.title?.trim() || 'محصول' }}</span>
                <span class="shrink-0 text-xs font-semibold">{{ Math.abs(Number(tx.gold ?? 0)) }}</span>
                <div v-if="canAdjust(record)" class="flex shrink-0 gap-1">
                  <BaseButton
                    size="small"
                    class="!min-w-0 !px-2"
                    :loading="isAdjusting(record.id, tx.id, 'decrease')"
                    @click="handleAdjust(record, tx, 'decrease')"
                  >
                    کم
                  </BaseButton>
                  <BaseButton
                    size="small"
                    type="primary"
                    class="!min-w-0 !px-2"
                    :loading="isAdjusting(record.id, tx.id, 'increase')"
                    @click="handleAdjust(record, tx, 'increase')"
                  >
                    زیاد
                  </BaseButton>
                </div>
              </div>

              <div class="flex flex-wrap items-center justify-center gap-2">
                <BaseButton
                  v-if="canApprove(record)"
                  size="small"
                  type="primary"
                  :loading="isApproving(record.id)"
                  @click="handleApprove(record)"
                >
                  تایید
                </BaseButton>
                <ADropdown v-if="canChangeStatus(record)" :trigger="['click']">
                  <BaseButton size="small">وضعیت</BaseButton>
                  <template #overlay>
                    <a-menu class="flex flex-col">
                      <a-menu-item
                        v-for="(item, key) in statusOptions(record.sts)"
                        :key="key"
                        class="border-none px-2 py-1"
                        @click="handleStatusChange(record.id, Number(key))"
                      >
                        {{ item.title }}
                      </a-menu-item>
                    </a-menu>
                  </template>
                </ADropdown>
                <a-tooltip v-if="record.sts >= 50 && record.sts <= 70">
                  <template #title>دریافت فاکتور</template>
                  <Icon
                    icon="vuesax-linear:document-download"
                    color="#1D4ED8"
                    class="cursor-pointer"
                    @click="$router.push({ name: 'factor', params: { id: record.id } })"
                  />
                </a-tooltip>
              </div>
            </div>
          </template>
        </BaseTable>
      </div>
    </BasicShowContext>
  </div>
</template>

<script lang="tsx" setup>
import type { TableInput } from '@core/type/baseTable'
import useBaseTable from '@core/components/BaseTableOld/hooks/useBaseTable'
import Icon from '@core/components/BaseIcon/src/Icon.vue'
import { getPhysicalWithdrawColumns } from '../hooks/physicalWithdrawColumns'
import {
  adjustPhysicalWithdraw,
  approvePhysicalWithdraw,
  getPhysicalWithdrawTable
} from '@/api/physicalWithdraw'
import { updateSts } from '@/api/wallet'
import { message } from 'ant-design-vue'
import type { Withdraw } from '@/model/wallet'
import { status as physicalStatusMap } from '@/pages/menuPages/withdraw/information/hooks/status'

const emits = defineEmits(['add'])

const [submit, reload] = useBaseTable()
const adjustingKey = ref('')
const approvingId = ref<number | null>(null)

const tblProps = computed(() => ({
  columns: getPhysicalWithdrawColumns(),
  api: (params: TableInput) => getPhysicalWithdrawTable(params)
}))

function canAdjust(record: Withdraw) {
  return Number(record.sts) === 50
}

function canApprove(record: Withdraw) {
  return Number(record.sts) === 50
}

function canChangeStatus(record: Withdraw) {
  const sts = Number(record.sts)
  return sts >= 50 && sts <= 53
}

function statusOptions(currentSts: number) {
  return Object.fromEntries(
    Object.entries(physicalStatusMap).filter(([key]) => Number(key) !== Number(currentSts))
  )
}

function adjustKey(withdrawId?: number, transactionId?: number, direction?: string) {
  return `${withdrawId ?? 0}-${transactionId ?? 0}-${direction ?? ''}`
}

function isAdjusting(withdrawId?: number, transactionId?: number, direction?: string) {
  return adjustingKey.value === adjustKey(withdrawId, transactionId, direction)
}

function isApproving(withdrawId?: number) {
  return approvingId.value === withdrawId
}

async function handleAdjust(
  record: Withdraw,
  tx: { id?: number },
  direction: 'increase' | 'decrease'
) {
  if (!record.id || !tx.id) return
  const key = adjustKey(record.id, tx.id, direction)
  adjustingKey.value = key
  try {
    await adjustPhysicalWithdraw(record.id, { transaction_id: tx.id, direction })
    message.success('مقدار بروزرسانی شد')
    await reload()
  } catch (e) {
    console.error(e)
  } finally {
    if (adjustingKey.value === key) adjustingKey.value = ''
  }
}

async function handleApprove(record: Withdraw) {
  if (!record.id) return
  approvingId.value = record.id
  try {
    await approvePhysicalWithdraw(record.id, 51)
    message.success('برداشت فیزیکی تایید شد')
    await reload()
  } catch (e) {
    console.error(e)
  } finally {
    approvingId.value = null
  }
}

async function handleStatusChange(withdrawId: number, sts: number) {
  try {
    await updateSts(withdrawId, { sts })
    message.success('وضعیت ثبت شد')
    await reload()
  } catch (e) {
    console.error(e)
  }
}

defineExpose({
  fetch: reload
})
</script>