feat(fe): replace custom HTML table with standard KsDataGrid in ModelOperationTable for 100% AG Grid & constitution compliance
This commit is contained in:
@@ -1,44 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
import type { ModelOperationItem } from '../schema'
|
||||
import { KsStatusTag } from '../../../shared/ui/components'
|
||||
import { KsDataGrid } from '../../../shared/ui/components'
|
||||
import type { UiGridColumn } from '../../../shared/ui/adapter/contracts'
|
||||
|
||||
defineProps<{ operations: ModelOperationItem[] }>()
|
||||
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="table-container">
|
||||
<table class="ks-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 50px; text-align: center;">No.</th>
|
||||
<th style="width: 100px;">Job ID</th>
|
||||
<th>작업명</th>
|
||||
<th style="width: 80px; text-align: center;">주기</th>
|
||||
<th style="width: 130px; text-align: center;">자동화 모드</th>
|
||||
<th style="width: 140px;">Queue</th>
|
||||
<th style="width: 140px;">Gate</th>
|
||||
<th>담당자 (Primary / Secondary)</th>
|
||||
<th>필수 증거 및 산출물</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(operation, index) in operations" :key="operation.operationCode" :class="index % 2 === 1 ? 'row-odd' : 'row-even'">
|
||||
<td style="text-align: center;" class="ks-financial-number">{{ index + 1 }}</td>
|
||||
<td class="code-text">{{ operation.operationCode }}</td>
|
||||
<td class="name-text">{{ operation.name }}</td>
|
||||
<td style="text-align: center;"><span class="badge cadence">{{ operation.cadence }}</span></td>
|
||||
<td style="text-align: center;">
|
||||
<KsStatusTag :value="operation.automationMode" severity="warning" />
|
||||
</td>
|
||||
<td><code>{{ operation.queue }}</code></td>
|
||||
<td><span class="badge gate">{{ operation.gate }}</span></td>
|
||||
<td class="owner-text">{{ operation.primaryOwner }} / {{ operation.secondaryOwner }}</td>
|
||||
<td class="output-text">{{ operation.output }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="grid-wrapper">
|
||||
<KsDataGrid
|
||||
:rows="props.operations"
|
||||
:columns="columns"
|
||||
height="240px"
|
||||
:show-row-number="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -62,89 +58,10 @@ defineProps<{ operations: ModelOperationItem[] }>()
|
||||
color: var(--ks-color-neutral-800);
|
||||
}
|
||||
|
||||
.table-container {
|
||||
.grid-wrapper {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--ks-color-neutral-300);
|
||||
border: 1px solid var(--ks-color-border);
|
||||
border-radius: var(--ks-radius-sm);
|
||||
}
|
||||
|
||||
.ks-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--ks-font-body);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ks-table th {
|
||||
background: #f1f5f9;
|
||||
color: var(--ks-color-neutral-800);
|
||||
font-weight: 700;
|
||||
padding: var(--ks-space-2) var(--ks-space-3);
|
||||
border-bottom: 1px solid var(--ks-color-neutral-300);
|
||||
font-size: var(--ks-font-caption);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ks-table td {
|
||||
padding: var(--ks-space-2) var(--ks-space-3);
|
||||
border-bottom: 1px solid var(--ks-color-neutral-200);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ks-table tr.row-even {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.ks-table tr.row-odd {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.ks-table tr:hover {
|
||||
background: #e0f2fe;
|
||||
}
|
||||
|
||||
.code-text {
|
||||
font-weight: 700;
|
||||
color: var(--ks-color-action);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.name-text {
|
||||
font-weight: 600;
|
||||
color: var(--ks-color-neutral-900);
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 1px 6px;
|
||||
border-radius: var(--ks-radius-sm);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.badge.cadence {
|
||||
background: #e2e8f0;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.badge.gate {
|
||||
background: #dcfce7;
|
||||
color: #166534;
|
||||
border: 1px solid #bbf7d0;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: monospace;
|
||||
font-size: 11px;
|
||||
background: #f1f5f9;
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.owner-text, .output-text {
|
||||
color: var(--ks-color-neutral-700);
|
||||
font-size: var(--ks-font-caption);
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user