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

<template>
  <div class="h-full min-h-0 min-w-0 max-w-full overflow-hidden">
    <BasicShowContext title="لیست پیامک ها">
      <template v-if="!mobile" #extra>
        <BaseButton type="primary" size="small" class="flex shrink-0 md:hidden" @click="emits('add')">
          <div>ارسال پیامک</div>
          <BaseIcon icon="vuesax-linear:sms" Size="16px" />
        </BaseButton>
      </template>

      <div class="flex h-full min-h-0 flex-col">
        <BaseTable v-if="!isMobileScreen" class="h-full min-h-0 min-w-0" v-bind="tblProps" @register="submit" ref="tbl">
        <template #extraHeader>
          <BaseButton v-if="!mobile" type="primary" size="small" class="flex" @click="emits('add')">
            <div>ارسال پیامک</div>
            <BaseIcon icon="vuesax-linear:sms" Size="16px" />
          </BaseButton>
        </template>
        <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>
          </div>-->
        </template>
      </BaseTable>

      <SmsMobileCardList v-else ref="mobileListRef" class="min-h-0 flex-1" :mobile="mobile" />
      </div>
    </BasicShowContext>
  </div>
</template>

<script lang="tsx" setup>
import type { TableInput } from '@core/type/baseTable'
import useBaseTable from '@core/components/BaseTableOld/hooks/useBaseTable'
import { cols } from '../hooks/smsColumns'
import { getSMSTable } from '@/api/sms'
import SmsMobileCardList from './SmsMobileCardList.vue'
import { isMobile as isMobileScreen } from '@core/utils/is'

interface Prop {
  mobile?: number | string
}

const props = defineProps<Prop>()
const emits = defineEmits(['delete', 'edit', 'add', 'info'])

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

const tblProps = ref<any>({
  columns: cols,
  api: (params: TableInput) => {
    if (props.mobile) {
      params.filters = []
      params.filters?.push({
        field: 'receiver',
        type: 'text',
        value: props.mobile,
        cr: 'and',
        op: 'eq',
        hidden: false
      })
    }

    return getSMSTable(params)
  }
})

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

defineExpose({
  fetch
})
</script>