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">
          <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
            class="rounded-lg p-2.5 text-sm"
            :class="walletSumTone(sums?.gold)"
          >
            <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">
                  {{ usePrice(sums?.gold ?? 0, true, 'گرم') }}
                </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(sums?.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="{ column, record }">
            <div class="gap-2 flex justify-center">
              <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>
              <a-tooltip placement="bottom" class="cursor-pointer" @click="emits('edit', record)">
                <template #title>
                  <span>ویرایش</span>
                </template>
                <Icon icon="vuesax-linear:edit" color="#4572E9" />
              </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 { changeCustomerActivation } from '@/api/customer'
import { cols } from '../hooks/walletColumns'
import { usePrefix } from '@core/composable/usePrefix'
import { message } from 'ant-design-vue'
import { getWalletTable } from '@/api/wallet'
import { usePrice } from '../../../../core/utils/usePrice'
import WalletMobileCardList from './WalletMobileCardList.vue'
import { isMobile } from '@core/utils/is'

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

const { prefixCls } = usePrefix('pophoverstatus')

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

const tblProps = ref<any>({
  columns: cols,
  api: async (params: TableInput) => {
    const data = await getWalletTable(params)
    sums.value = data?.sums
    emits('sums', data?.sums)
    return data
  }
})
const loading = ref<boolean>(false)

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 changeCustomerActivationFunction(id: number) {
  try {
    loading.value = true
    await changeCustomerActivation(id)
    reload()
    message.success('تغییر وضعیت با موفقیت انجام شد')
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}

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>