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

<template>
  <div class="h-full min-h-0 min-w-0 max-w-full overflow-hidden">
    <BasicShowContext title="لیست مدیران">
      <template #extra>
        <BaseButton
          v-if="isMobile"
          type="primary"
          size="small"
          icon="vuesax-linear:user-add"
          @click="emits('add')"
        >
          افزودن مدیر
        </BaseButton>
      </template>

      <div class="flex h-full min-h-0 flex-col">
        <BaseTable v-if="!isMobile" 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:user-add" @click="emits('add')">
            افزودن مدیر
          </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>
            <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>
            <a-tooltip placement="bottom" class="cursor-pointer" @click="emits('delete', record.id)">
              <template #title>
                <span>حذف مدیر</span>
              </template>
              <Icon icon="vuesax-linear:user-remove" color="#EB3535" />
            </a-tooltip>
          </div>
        </template>
      </BaseTable>

      <ManagerMobileCardList
        v-else
        ref="mobileListRef"
        class="min-h-0 flex-1"
        @info="(row) => emits('info', row)"
        @edit="(row) => emits('edit', row)"
        @delete="(id) => emits('delete', id)"
      />
      </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 { getUserTable } from '@/api/user'
import { cols } from '../hooks/usersColumns'
import ManagerMobileCardList from './ManagerMobileCardList.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'])

const tblProps = ref<any>({
  columns: cols,
  api: (params: TableInput) => {
    return getUserTable(params)
  }
})

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

defineExpose({
  fetch
})
</script>