bio_frontend/pages/[tabId]/admin/programs.vue

<template>
  <div class="codes-page">
    <div class="page-header">
      <h1>프로그램 관리</h1>
      <div class="page-actions">
        <button class="action-btn">프로그램 추가</button>
        <button class="action-btn primary">저장</button>
      </div>
    </div>
    <div class="aggrid-section">
      <div class="aggrid-title">프로그램 목록</div>
      <div class="aggrid-container">
        <ag-grid-vue
          class="ag-theme-material"
          style="width: 100%; height: 600px"
          :column-defs="programColDefs"
          :row-data="programRowData"
          :default-col-def="defaultColDef"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { AgGridVue } from "ag-grid-vue3";
import { ModuleRegistry, AllCommunityModule } from "ag-grid-community";
import type { Program, ColDef, DefaultColDef } from "~/types/ag-grid";

onMounted(() => {
  ModuleRegistry.registerModules([AllCommunityModule]);
});

const programColDefs = ref<ColDef[]>([
  { headerName: "부모 코드", field: "parentCode", width: 100 },
  { headerName: "레벨", field: "level", width: 60 },
  { headerName: "코드", field: "code", width: 120 },
  { headerName: "이름", field: "name", width: 160 },
  { headerName: "사용 여부", field: "useYn", width: 80 },
  { headerName: "메뉴 여부", field: "menuYn", width: 80 },
  { headerName: "API 여부", field: "apiYn", width: 80 },
  { headerName: "예외 허용 여부", field: "exceptionYn", width: 110 },
  { headerName: "표시 순서", field: "order", width: 80 },
  { headerName: "uri", field: "uri", width: 180 },
  { headerName: "필드1", field: "field1", width: 100 },
  { headerName: "필드2", field: "field2", width: 100 },
  { headerName: "필드3", field: "field3", width: 100 },
]);

const programRowData = ref<Program[]>([
  {
    parentCode: "OMS01",
    level: 1,
    code: "OMS01_01",
    name: "DASHBOARD",
    useYn: true,
    menuYn: true,
    apiYn: false,
    exceptionYn: false,
    order: 1,
    uri: "/dashboard/overview",
    field1: "ri-pie-chart-2-line",
    field2: "",
    field3: "",
  },
  {
    parentCode: "OMS01_02",
    level: 2,
    code: "OMS01_02_01",
    name: "IoT 센서이력 조회",
    useYn: true,
    menuYn: true,
    apiYn: false,
    exceptionYn: false,
    order: 5,
    uri: "/environmental/iot-sensor-history",
    field1: "ri-line-chart-line",
    field2: "",
    field3: "",
  },
  // ... (샘플 데이터 추가)
]);

const defaultColDef = ref<DefaultColDef>({
  resizable: true,
  sortable: true,
  filter: true,
  minWidth: 80,
});
</script>

<style scoped>
.codes-page {
  padding: 32px 32px 0 32px;
}
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.page-header h1 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #222;
  margin: 0;
}
.page-actions {
  display: flex;
  gap: 10px;
}
.action-btn {
  background: #f4f6fa;
  border: 1px solid #e0e7ef;
  color: #1976d2;
  font-weight: 500;
  border-radius: 5px;
  padding: 7px 18px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.action-btn.primary {
  background: #1976d2;
  color: #fff;
  border: none;
}
.action-btn:hover {
  background: #e6f0fa;
}
.aggrid-section {
  margin-bottom: 32px;
}
.aggrid-title {
  font-size: 1.08rem;
  font-weight: 600;
  color: #1976d2;
  margin-bottom: 8px;
  margin-left: 2px;
}
.aggrid-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04);
  padding: 18px 18px 0 18px;
}
</style>