influence/components/home/dashboard/layout02/user/layout02UserWidgetT.vue

<template>
  <div class="tbl-wrapper">
    <div class="tbl-wrap">
      <!-- ag-grid -->
      <ag-grid-vue
        style="width:100%; height:calc(50vh - 11rem)"
        class="ag-theme-quartz"
        :grid-options="gridOptions"                                                                  
        :row-data="props.items"
        :pagination-page-size="props.pageObj.pageSize"
        :pagination-page-size-selector="columnList"
        :suppress-pagination-panel="true"
        @grid-ready="fnOnGridReady"
      />
    </div>
  </div>
</template>

<script setup>
  /***********************
   *     import
   ************************/
  import { useI18n } from "vue-i18n"
  import apiUrl from '@/composables/useApi';
  import useAxios from '@/composables/useAxios';
  import useUtil from '@/composables/useUtil';
  import "ag-grid-community/styles/ag-grid.css";
  import "ag-grid-community/styles/ag-theme-quartz.css";
  import { AgGridVue } from "ag-grid-vue3";
import dayjs from "#build/dayjs.imports.mjs";

  /***********************
   *     plugins inject
   ************************/
  const { $toast, $log, $dayjs, $eventBus } = useNuxtApp()

  // props
  const props = defineProps({
    items: {
      type: Array,
      default: () => []
    },
    pageObj: {
      type: Object,
      default: () => {
        return {
          page: 1, 
          pageSize: 10,
          totalCnt: 0,
        }
      }
    }
  })

  // 참조가능 데이터 설정
  defineExpose({})

  // 발신 이벤트 선언
  const emit = defineEmits([]);
  const i18n = useI18n();
  /***********************
   *     data & created
   ************************/
  const remToPx = () => parseFloat(getComputedStyle(document.documentElement).fontSize);
  const vhToPx = (vh) => window.innerHeight * (vh / 100);
  const rowHeightRem = 2.2; // 원하는 rem 값
  const rowHeightPx = rowHeightRem * remToPx();

  const gridApi = shallowRef();
  const getHeaders = computed(() => [
    { headerName: 'No', field: 'no', maxWidth: 75},
    { headerName: '테넌트 명', field: 'tenantName'},
    { headerName: '사용량', maxWidth: 150, cellRenderer: fnPercentCellRenderer},
    { headerName: '만료일', maxWidth: 150, cellRenderer: fnExpiredDateCellRenderer},
    { headerName: '계정 현황 (사용/최대)', cellRenderer: fnAccountStatusRenderer},
    { headerName: '세션 현황 (접속/최대)', cellRenderer: fnSessionStatusRenderer},
  ])

  // gridOption
  const gridOptions = {
    columnDefs: getHeaders.value,
    rowData: props.items,      // 테이블 데이터
    suppressMovableColumns: true,
    autoSizeStrategy: {
      type: "fitGridWidth", // width맞춤
    },  
    headerHeight : rowHeightPx,
    rowHeight: rowHeightPx,
    pagination: true,
    suppressPaginationPanel: true,    // 하단 default 페이징 컨트롤 숨김
    suppressRowClickSelection: true,  // 행 클릭 체크박스 무시
    localeText: {
      noRowsToShow: i18n.t('common.noData')
    },
    defaultColDef: {
      lockVisible: true, // 열을 그리드 밖으로 꺼내지 않음
    },
  }

  /***********************
   *     Methods
   ************************/
  // Grid 데이터 바인딩
  function fnOnGridReady(params){
    gridApi.value = params.api 
  }
  // 사용량 렌더러
  function fnPercentCellRenderer(params) {
    const { data } = params;
    return `<span class="${data.tablePercentClass}">${data.perSubscriber}%</span>`;
  }
  // 만료일 렌더러
  function fnExpiredDateCellRenderer(params) {
    return dayjs(params.expirationDate).format('YYYY-MM-DD');
  }
  // 계정현황 렌더러
  function fnAccountStatusRenderer(params) {
    const { data } = params;

    return `${useUtil.toRoundFix(data.currentAccountCount, 0)}/${useUtil.toRoundFix(data.maxAccount, 0)}`
  }
  // 세션현황 렌더러
  function fnSessionStatusRenderer(params) {
    const { data } = params;

    return `${useUtil.toRoundFix(data.currentConnectingCount, 0)}/${useUtil.toRoundFix(data.maxSession, 0)}`
  }

 

</script>