init source

pages/admin/codes.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="codes-page">
+    <div class="page-header">
+      <h1>공통코드</h1>
+      <div class="page-actions">
+        <button class="action-btn">코드 추가</button>
+        <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: 180px"
+          :column-defs="groupColDefs"
+          :row-data="groupRowData"
+          :default-col-def="defaultColDef"
+        />
+      </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: 320px"
+          :column-defs="codeColDefs"
+          :row-data="codeRowData"
+          :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 { GroupCode, Code, ColDef, DefaultColDef } from "~/types/ag-grid";
+
+// AG Grid 모듈 등록
+onMounted(() => {
+  ModuleRegistry.registerModules([AllCommunityModule]);
+});
+
+const groupColDefs = ref<ColDef[]>([
+  { headerName: "그룹 코드", field: "groupCode", width: 140 },
+  { headerName: "그룹 코드명", field: "groupName", width: 180 },
+  { headerName: "사용 여부", field: "useYn", width: 100 },
+  { headerName: "정렬 순서", field: "order", width: 100 },
+]);
+
+const groupRowData = ref<GroupCode[]>([
+  {
+    groupCode: "MONITORING_001",
+    groupName: "모니터링 기본정보",
+    useYn: "Y",
+    order: 1,
+  },
+  { groupCode: "RESOURCE_001", groupName: "리소스 유형", useYn: "Y", order: 6 },
+]);
+
+const codeColDefs = ref<ColDef[]>([
+  { headerName: "코드", field: "code", width: 160 },
+  { headerName: "코드명", field: "codeName", width: 120 },
+  { headerName: "코드 상세", field: "codeDetail", width: 200 },
+  { headerName: "부모 코드", field: "parentCode", width: 120 },
+  { headerName: "사용 여부", field: "useYn", width: 100 },
+  { headerName: "정렬 순서", field: "order", width: 100 },
+]);
+
+const codeRowData = ref<Code[]>([
+  {
+    code: "RESOURCE_001_001",
+    codeName: "facility",
+    codeDetail: "주요 시설을 나타냄",
+    parentCode: "",
+    useYn: "Y",
+    order: 1,
+  },
+  {
+    code: "RESOURCE_001_002",
+    codeName: "equipment",
+    codeDetail: "사업에 설치된 장비",
+    parentCode: "",
+    useYn: "Y",
+    order: 2,
+  },
+  {
+    code: "RESOURCE_001_003",
+    codeName: "device",
+    codeDetail: "IoT 디바이스 또는 센서",
+    parentCode: "",
+    useYn: "Y",
+    order: 3,
+  },
+  {
+    code: "RESOURCE_001_004",
+    codeName: "station",
+    codeDetail: "데이터 수집 또는 처리 스테이션",
+    parentCode: "",
+    useYn: "Y",
+    order: 4,
+  },
+]);
+
+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>