149 lines
3.5 KiB
Vue
149 lines
3.5 KiB
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>
|