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

<template>
  <div class="h-full min-h-0">
    <BasicShowContext title="لیست کیف پول">
      <div class="flex h-full min-h-0 flex-col gap-3">
        <div class="hidden shrink-0 md:grid md:grid-cols-1 md:gap-3 lg:grid-cols-2 xl:grid-cols-3">
          <div
            class="rounded-lg p-2.5 text-sm"
            :class="walletSumTone(sums?.cash)"
          >
            <div class="mb-2 font-medium">مجموع موجودی کیف پول</div>
            <div class="grid grid-cols-2 gap-2">
              <div class="stat-inner rounded-lg px-2 py-1.5 text-center">
                <div class="text-xs text-gray-500">ریال</div>
                <div class="mt-1 font-bold break-all">{{ usePrice(sums?.cash ?? 0) }}</div>
              </div>
              <div class="stat-inner rounded-lg px-2 py-1.5 text-center">
                <div class="text-xs text-gray-500">گرم</div>
                <div class="mt-1 font-bold">
                  {{ usePrice(Number(sums?.cashToGold ?? 0).toFixed(2), true, 'گرم') }}
                </div>
              </div>
            </div>
          </div>

          <div
            v-for="metal in metalBalanceCards"
            :key="metal.metal_id"
            class="rounded-lg p-2.5 text-sm"
            :class="walletSumTone(metal.gold)"
          >
            <div class="mb-2 font-medium">{{ totalMetalWalletTitle(metal.metal_id, metal.label) }}</div>
            <div class="grid grid-cols-2 gap-2">
              <div class="stat-inner rounded-lg px-2 py-1.5 text-center">
                <div class="text-xs text-gray-500">{{ metal.display_unit ?? metalDisplayUnit(metal.metal_id) }}</div>
                <div class="mt-1 font-bold">
                  {{ formatMetalDisplayValue(metal.gold ?? 0, metal.metal_id) }}
                </div>
              </div>
              <div class="stat-inner rounded-lg px-2 py-1.5 text-center">
                <div class="text-xs text-gray-500">ریال</div>
                <div class="mt-1 font-bold break-all">{{ usePrice(metal.goldToCash ?? 0) }}</div>
              </div>
            </div>
          </div>
        </div>

        <BaseTable v-if="!isMobile" class="min-h-0 min-w-0 flex-1" v-bind="tblProps" @register="submit" ref="tbl">
          <template #action="{ record }">
            <div class="flex justify-center gap-2">
              <a-tooltip placement="bottom" class="cursor-pointer" @click="emits('info', record)">
                <template #title>
                  <span>مشخصات کیف پول</span>
                </template>
                <Icon icon="vuesax-linear:stickynote" color="#10913A" />
              </a-tooltip>
            </div>
          </template>
        </BaseTable>

        <WalletMobileCardList
          v-else
          ref="mobileListRef"
          class="min-h-0 flex-1"
          @sums="onMobileSums"
        />
      </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 { buildWalletColumns } from '../hooks/walletColumns'
import { usePrefix } from '@core/composable/usePrefix'
import { getWalletTable } from '@/api/wallet'
import { usePrice } from '../../../../core/utils/usePrice'
import WalletMobileCardList from './WalletMobileCardList.vue'
import { isMobile } from '@core/utils/is'
import { totalMetalWalletTitle } from '@/utils/adminMetalLabels'
import type { WalletTableSums } from '@/model/wallet'
import { formatMetalDisplayValue, metalDisplayUnit } from '@/utils/metalWeight'

const [submit, reload] = useBaseTable()
const mobileListRef = ref<null | { fetch: () => Promise<void> }>(null)
const emits = defineEmits(['info', 'sums'])

const { prefixCls } = usePrefix('pophoverstatus')

const table = ref(null)
const sums = ref<WalletTableSums>()

const metalBalanceCards = computed(() => {
  if (sums.value?.metalBalances?.length) {
    return sums.value.metalBalances
  }

  if (sums.value?.gold != null || sums.value?.goldToCash != null) {
    return [
      {
        metal_id: 1,
        label: 'طلا',
        gold: sums.value.gold ?? 0,
        goldToCash: sums.value.goldToCash ?? 0
      }
    ]
  }

  return []
})

const tblProps = ref<any>({
  columns: buildWalletColumns(),
  api: async (params: TableInput) => {
    const data = await getWalletTable(params)
    sums.value = data?.sums
    const metals =
      data?.sums?.metalBalances?.map((metal) => ({
        metal_id: metal.metal_id,
        label: metal.label
      })) ?? []
    tblProps.value.columns = buildWalletColumns(metals)
    emits('sums', data?.sums)
    return data
  }
})

function walletSumTone(value?: number) {
  if (value == null || value >= 0) {
    return value === 0 ? 'bg-amber-100' : 'bg-green-100'
  }
  return 'bg-red-100'
}

function onMobileSums(payload: unknown) {
  sums.value = payload
  emits('sums', payload)
}

async function fetch() {
  await Promise.allSettled([reload(), mobileListRef.value?.fetch?.() as Promise<void>])
}

defineExpose({
  fetch
})
</script>

<style lang="less">
@prefix: ~'@{prefixCls}-pophoverstatus';

.@{prefix} {
  .ant-menu-rtl.ant-menu-inline,
  .ant-menu-rtl.ant-menu-vertical {
    border-left: none;
  }

  .ant-menu-item-only-child {
    border-radius: @border-radius-base;
  }
}
</style>