influence/pages/view/media/pressKitList.vue

<template>
  <div>
    <div class="inner--headers">
      <h2>{{ pageId }}</h2>
      <div class="bread--crumbs--wrap">
        <span>홈</span>
        <span>{{ pageId }}</span>
        <span v-if="pageIdSub">{{ pageIdSub }}</span>
      </div>
    </div>

    <searchModules />

    <div class="data--list--wrap">
      <div class="btn--actions--wrap">
        <div class="left--sections">
          <v-btn class="custom-btn mini btn-white">선택 삭제</v-btn>
        </div>
        <div class="right--sections">
          <v-btn class="custom-btn mini btn-reg" @click="addLocated"
            ><i class="ico"></i>신규 등록</v-btn
          >
        </div>
      </div>

      <div class="tbl-wrapper">
        <div class="tbl-wrap">
          <!-- ag grid -->
          <ag-grid-vue
            style="width: 100%; height: calc(10 * 2.94rem)"
            class="ag-theme-quartz"
            :gridOptions="gridOptions"
            :paginationPageSize="pageObj.pageSize"
            @grid-ready="onGridReady"
            @rowClicked="detailLocated"
          >
          </ag-grid-vue>

          <!-- 페이징 -->
          <div class="ag-grid-custom-pagenations">
            <pagination @chg_page="chgPage" :pageObj="pageObj"></pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import pagination from "../components/common/pagination.vue";
import { AgGridVue } from "ag-grid-vue3";
import searchModules from "@/components/search/searchModules";
/************************************************************************
|    레이아웃
************************************************************************/
definePageMeta({
  layout: "default",
});
/************************************************************************
|   PROPS
 ************************************************************************/
const props = defineProps({
  propsData: {
    type: Object,
    default: () => {},
  },
});

/************************************************************************
|    전역
 ************************************************************************/

const { $toast, $log, $dayjs, $eventBus } = useNuxtApp();
const router = useRouter();
const pageId = ref("보도자료");
const pageIdSub = ref();
let pageObj = ref({
  page: 1, // 현재 페이지
  pageMaxNumSize: 5, // 페이지 숫자 최대 표현 개수
  pageSize: 10, // 테이블 조회 데이터 개수
  totalCnt: 0, // 전체 페이지
});
const tblItems = ref([]); // stat 데이터

/* eslint-disable */
/* prettier-ignore */
tblItems.value = [
  {th1: "1",th2: "한국어",th3: "텔레칩스 뉴스 전달드립니다.",th4: "홍길동",th5: "135", th6: "노출",th7: "2024-12-25"},  
  {th1: "2",th2: "한국어",th3: "텔레칩스 뉴스 전달드립니다.",th4: "홍길동",th5: "135", th6: "노출",th7: "2024-12-25"},  
  {th1: "3",th2: "한국어",th3: "텔레칩스 뉴스 전달드립니다.",th4: "홍길동",th5: "135", th6: "노출",th7: "2024-12-25"},  
  {th1: "4",th2: "한국어",th3: "텔레칩스 뉴스 전달드립니다.",th4: "홍길동",th5: "135", th6: "노출",th7: "2024-12-25"},  
  {th1: "5",th2: "한국어",th3: "텔레칩스 뉴스 전달드립니다.",th4: "홍길동",th5: "135", th6: "노출",th7: "2024-12-25"},  
  {th1: "6",th2: "한국어",th3: "텔레칩스 뉴스 전달드립니다.",th4: "홍길동",th5: "135", th6: "비노출",th7: "2024-12-25"},  
  {th1: "7",th2: "한국어",th3: "텔레칩스 뉴스 전달드립니다.",th4: "홍길동",th5: "135", th6: "노출",th7: "2024-12-25"},  
  {th1: "8",th2: "한국어",th3: "텔레칩스 뉴스 전달드립니다.",th4: "홍길동",th5: "135", th6: "노출",th7: "2024-12-25"},  
  {th1: "9",th2: "한국어",th3: "텔레칩스 뉴스 전달드립니다.",th4: "홍길동",th5: "135", th6: "노출",th7: "2024-12-25"},  
  {th1: "10",th2: "한국어",th3: "텔레칩스 뉴스 전달드립니다.",th4: "홍길동",th5: "135", th6: "노출",th7: "2024-12-25"},  
  {th1: "11",th2: "한국어",th3: "텔레칩스 뉴스 전달드립니다.",th4: "홍길동",th5: "135", th6: "노출",th7: "2024-12-25"},  
  {th1: "12",th2: "한국어",th3: "텔레칩스 뉴스 전달드립니다.",th4: "홍길동",th5: "135", th6: "노출",th7: "2024-12-25"},  
  {th1: "13",th2: "한국어",th3: "텔레칩스 뉴스 전달드립니다.",th4: "홍길동",th5: "135", th6: "노출",th7: "2024-12-25"},  
  {th1: "14",th2: "한국어",th3: "텔레칩스 뉴스 전달드립니다.",th4: "홍길동",th5: "135", th6: "노출",th7: "2024-12-25"},  
  {th1: "15",th2: "한국어",th3: "텔레칩스 뉴스 전달드립니다.",th4: "홍길동",th5: "135", th6: "노출",th7: "2024-12-25"},  
  {th1: "16",th2: "한국어",th3: "텔레칩스 뉴스 전달드립니다.",th4: "홍길동",th5: "135", th6: "노출",th7: "2024-12-25"},  
  {th1: "17",th2: "한국어",th3: "텔레칩스 뉴스 전달드립니다.",th4: "홍길동",th5: "135", th6: "노출",th7: "2024-12-25"},  
  {th1: "18",th2: "한국어",th3: "텔레칩스 뉴스 전달드립니다.",th4: "홍길동",th5: "135", th6: "노출",th7: "2024-12-25"},  
  {th1: "19",th2: "한국어",th3: "텔레칩스 뉴스 전달드립니다.",th4: "홍길동",th5: "135", th6: "노출",th7: "2024-12-25"},  
  {th1: "20",th2: "한국어",th3: "텔레칩스 뉴스 전달드립니다.",th4: "홍길동",th5: "135", th6: "노출",th7: "2024-12-25"},  
  {th1: "21",th2: "한국어",th3: "텔레칩스 뉴스 전달드립니다.",th4: "홍길동",th5: "135", th6: "노출",th7: "2024-12-25"},  
  {th1: "22",th2: "한국어",th3: "텔레칩스 뉴스 전달드립니다.",th4: "홍길동",th5: "135", th6: "노출",th7: "2024-12-25"},  
  {th1: "23",th2: "한국어",th3: "텔레칩스 뉴스 전달드립니다.",th4: "홍길동",th5: "135", th6: "노출",th7: "2024-12-25"},  
  {th1: "24",th2: "한국어",th3: "텔레칩스 뉴스 전달드립니다.",th4: "홍길동",th5: "135", th6: "노출",th7: "2024-12-25"},     
];

pageObj.value.totalCnt = tblItems.value.length;

const remToPx = () => parseFloat(getComputedStyle(document.documentElement).fontSize);
const rowHeightRem = 2.65; // 원하는 rem 값
const rowHeightPx = rowHeightRem * remToPx();
const gridApi = shallowRef();

// gridOption
const gridOptions = {
  columnDefs: [
    { headerName: "No", field: "th1", sortable: false },
    { headerName: "언어", field: "th2", sortable: false },
    { headerName: "제목", field: "th3", sortable: false },
    { headerName: "작성자", field: "th4", sortable: false },
    { headerName: "조회수", field: "th5", sortable: false },
    { headerName: "노출여부", field: "th6", sortable: false },
    { headerName: "등록일", field: "th7", sortable: false },
    {
      headerName: "알림 메일 수신 여부",
      field: "th7",
      sortable: false,
    },
  ],
  rowData: tblItems.value, // 테이블 데이터

  autoSizeStrategy: {
    type: "fitGridWidth", // width맞춤
  },
  suppressMovableColumns: true,
  headerHeight: rowHeightPx,
  rowHeight: rowHeightPx,
  pagination: true,
  suppressPaginationPanel: true, // 하단 default 페이징 컨트롤 숨김
  rowSelection: {
    checkboxes: true,
    headerCheckbox: true,
    enableClickSelection: false,
    mode: "multiRow",
  },
};

/************************************************************************
|    함수(METHODS)
************************************************************************/
const onGridReady = (__PARAMS) => {
  gridApi.value = __PARAMS.api;
};

const chgPage = (__PAGE) => {
  pageObj.value.page = __PAGE;
  gridApi.value.paginationGoToPage(__PAGE - 1);
};

const addLocated = () => {
  router.push({
    path: "/view/mng/newsAdd",
    //query: { id: rowId },
  });
};

const detailLocated = (__EVENT) => {
  const rowId = __EVENT.data.th1;
  router.push({
    path: "/view/mng/newsAdd",
    query: { id: rowId },
  });
};

/************************************************************************
|    WATCH
************************************************************************/

watch(
  () => props,
  () => {
    searchObj.value = props.propsData;
    fnGetStat();
  },
  { deep: true }
);
</script>