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

<template>
  <div>
    <BasicShowContext title="اعلان‌های اپ">
      <template #extra>
        <div class="flex items-center gap-2">
          <AdminFieldHelp
            text="اعلان را برای همه، گروه (مثلاً کسانی که مدتی نیامده‌اند) یا مشتری تکی بفرستید. کاربران آنلاین از طریق اتصال زنده اپ، بلافاصله بج اعلان را می‌بینند."
          />
          <BaseButton type="primary" size="small" @click="emits('add')">
            <span>افزودن اعلان</span>
            <BaseIcon icon="vuesax-linear:add" size="16" />
          </BaseButton>
        </div>
      </template>

      <BaseTable v-bind="tblProps" @register="submit" ref="tbl">
        <template #action="{ record }">
          <div class="flex justify-center gap-2">
            <a-tooltip placement="bottom">
              <template #title>گیرندگان</template>
              <Icon
                icon="vuesax-linear:profile-2user"
                color="#7C3AED"
                class="cursor-pointer"
                @click="emits('recipients', record)"
              />
            </a-tooltip>
            <a-tooltip placement="bottom">
              <template #title>بازدیدکنندگان</template>
              <Icon
                icon="vuesax-linear:people"
                color="#10913A"
                class="cursor-pointer"
                @click="emits('readers', record)"
              />
            </a-tooltip>
            <a-tooltip placement="bottom">
              <template #title>ویرایش</template>
              <Icon
                icon="vuesax-linear:edit"
                color="#4572E9"
                class="cursor-pointer"
                @click="emits('edit', record)"
              />
            </a-tooltip>
            <a-tooltip placement="bottom">
              <template #title>{{ record.is_active ? 'غیرفعال کردن' : 'فعال کردن' }}</template>
              <Icon
                :icon="record.is_active ? 'vuesax-linear:close-circle' : 'vuesax-linear:tick-circle'"
                :color="record.is_active ? '#C53030' : '#25855A'"
                class="cursor-pointer"
                @click="emits('toggle', record)"
              />
            </a-tooltip>
            <a-tooltip placement="bottom">
              <template #title>حذف</template>
              <Icon
                icon="vuesax-linear:trash"
                color="#C53030"
                class="cursor-pointer"
                @click="emits('delete', record.id)"
              />
            </a-tooltip>
          </div>
        </template>
      </BaseTable>
    </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 { cols } from '../hooks/appNotificationsColumns'
import { getAppNotificationsTable } from '@/api/appNotifications'
import AdminFieldHelp from '@/components/AdminFieldHelp.vue'

const [submit, reload] = useBaseTable()

const emits = defineEmits<{
  add: []
  edit: [record: Record<string, unknown>]
  toggle: [record: Record<string, unknown>]
  delete: [id: number]
  readers: [record: Record<string, unknown>]
  recipients: [record: Record<string, unknown>]
}>()

const tblProps = {
  columns: cols,
  api: (params: TableInput) => getAppNotificationsTable(params),
}

function fetch() {
  reload()
}

defineExpose({ fetch })
</script>