kjh2064
c1c55e2dce
ISSUE: Grid height was constrained to min-height: 220px, leaving large unused space on page (3 rows visible, lots of empty area below). PRINCIPLE: Grid must expand to fill available vertical space in viewport. CHANGES: ModelOperationTable.vue (.grid-wrapper) - Removed: min-height: 220px (artificial constraint) - Added: height: 100% - Added: min-height: 0 (critical for flex overflow behavior) RESULT: Grid now spans full available height in flex container, utilizing screen space efficiently. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
73 lines
1.9 KiB
Vue
73 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import type { ModelOperationItem } from '../schema'
|
|
import { KsDataGrid } from '../../../shared/ui/components'
|
|
import type { UiGridColumn } from '../../../shared/ui/adapter/contracts'
|
|
|
|
const props = defineProps<{ operations: ModelOperationItem[] }>()
|
|
|
|
const columns: UiGridColumn[] = [
|
|
{ field: 'operationCode', header: 'Job ID', width: 110 },
|
|
{ field: 'name', header: '작업명', flex: 1, minWidth: 160 },
|
|
{ field: 'cadence', header: '주기', width: 90 },
|
|
{ field: 'automationMode', header: '자동화 모드', width: 140 },
|
|
{ field: 'queue', header: 'Queue', width: 140 },
|
|
{ field: 'gate', header: 'Gate', width: 140 },
|
|
{
|
|
field: 'primaryOwner',
|
|
header: '담당자 (Primary / Secondary)',
|
|
flex: 1,
|
|
formatter: (_, row) => {
|
|
const r = row as ModelOperationItem
|
|
return `${r.primaryOwner} / ${r.secondaryOwner}`
|
|
},
|
|
},
|
|
{ field: 'output', header: '필수 증거 및 산출물', flex: 1, minWidth: 180 },
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<div class="operation-plan-panel">
|
|
<h3 class="panel-title">📋 지속 평가·개선 작업 계획</h3>
|
|
<div class="grid-wrapper">
|
|
<KsDataGrid
|
|
:rows="props.operations"
|
|
:columns="columns"
|
|
height="100%"
|
|
:show-row-number="true"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.operation-plan-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
min-height: 0;
|
|
gap: var(--ks-space-3);
|
|
padding: var(--ks-space-3);
|
|
background: var(--ks-color-surface);
|
|
border: 1px solid var(--ks-color-border);
|
|
border-radius: var(--ks-radius-sm);
|
|
margin-top: var(--ks-space-2);
|
|
}
|
|
|
|
.panel-title {
|
|
margin: 0;
|
|
font-size: var(--ks-font-section);
|
|
font-weight: 700;
|
|
color: var(--ks-color-neutral-800);
|
|
}
|
|
|
|
.grid-wrapper {
|
|
width: 100%;
|
|
flex: 1;
|
|
height: 100%;
|
|
min-height: 0;
|
|
border: 1px solid var(--ks-color-border);
|
|
border-radius: var(--ks-radius-sm);
|
|
overflow: hidden;
|
|
}
|
|
</style>
|