<template>
|
<div class="err-list-form flex flex-col bg-gray-100 font-sans w-[841px] h-[636px] border border-gray-400 relative overflow-hidden text-sm">
|
|
<!-- Top Error Reason Panel (Panel 3) -->
|
<div class="h-[212px] flex-none border-b border-gray-300 p-1">
|
<fieldset class="w-full h-full border border-gray-400 p-0 flex flex-col">
|
<legend class="px-1 ml-2 text-base text-black">錯誤原因</legend>
|
|
<div class="flex-1 overflow-auto bg-white m-1 border border-gray-300">
|
<table class="w-full border-collapse">
|
<thead class="sticky top-0 bg-gray-100">
|
<tr class="text-left border-b border-gray-300">
|
<th class="p-1 border-r border-gray-200">內容</th>
|
<th class="p-1 w-[80px]">index</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-for="(item, index) in errorItems"
|
:key="index"
|
:class="['hover:bg-blue-50 cursor-pointer', selectedIndex === index ? 'bg-blue-600 text-white hover:bg-blue-700' : '']"
|
@click="ErrListLVClick(index)">
|
<td class="p-1 border-r border-gray-200">{{ item.reason }}</td>
|
<td class="p-1">{{ item.index }}</td>
|
</tr>
|
</tbody>
|
</table>
|
<div v-if="errorItems.length === 0" class="flex items-center justify-center h-full text-red-600 font-bold text-lg">
|
檢核失敗原因已全部清除
|
</div>
|
</div>
|
</fieldset>
|
</div>
|
|
<!-- Action Buttons Panel (Panel 1) -->
|
<div class="h-[41px] flex-none border-b border-gray-300 flex items-center px-4 space-x-2 bg-gray-50">
|
<button class="w-[84px] h-[34px] border border-gray-400 bg-gray-200 hover:bg-gray-300 disabled:opacity-50"
|
:disabled="!isDeleteEnabled" @click="DeleteBtClick">
|
忽略
|
</button>
|
<button class="w-[79px] h-[34px] border border-gray-400 bg-gray-200 hover:bg-gray-300" @click="EnforceBtClick">
|
強制送件
|
</button>
|
<div class="flex-1"></div>
|
<button class="w-[89px] h-[34px] border border-gray-400 bg-gray-200 hover:bg-gray-300 disabled:opacity-50"
|
:disabled="!isImmediateEnabled" @click="ImmediateBtClick">
|
立即傳送
|
</button>
|
<button class="w-[84px] h-[34px] border border-gray-400 bg-gray-200 hover:bg-gray-300" @click="ExitBtClick">
|
離開
|
</button>
|
</div>
|
|
<!-- Image Viewing Area (Panel 4) -->
|
<div class="flex-1 flex overflow-hidden">
|
<!-- Primary Image View (Panel 5) -->
|
<div class="flex-1 flex flex-col border-r border-gray-400 overflow-hidden">
|
<div class="h-[28px] bg-gray-200 border-b border-gray-300 flex items-center px-2 space-x-4">
|
<button class="w-[29px] h-[23px] border border-gray-400 bg-gray-100 flex items-center justify-center text-xs"
|
:disabled="siteIdx <= 1" @click="SitePreBtClick">◀</button>
|
<span class="text-xs font-mono">{{ siteIdx }}/{{ siteCount }}</span>
|
<button class="w-[29px] h-[23px] border border-gray-400 bg-gray-100 flex items-center justify-center text-xs"
|
:disabled="siteIdx >= siteCount" @click="SiteNextBtClick">▶</button>
|
</div>
|
<div class="flex-1 bg-gray-800 overflow-auto relative p-2 flex items-center justify-center">
|
<img :src="primaryImage" class="max-w-none shadow-xl border border-gray-400" />
|
<!-- Mock OMR Error Overlay -->
|
<div v-if="siteIdx > 0" class="absolute left-1/2 top-1/4 w-[100px] h-[40px] border-2 border-yellow-400 bg-yellow-200 opacity-40 animate-pulse pointer-events-none"></div>
|
</div>
|
</div>
|
|
<!-- Related Image View (Panel 6) -->
|
<div class="w-[427px] flex-none flex flex-col overflow-hidden">
|
<div class="h-[28px] bg-gray-200 border-b border-gray-300 flex items-center px-2 space-x-4">
|
<button class="w-[31px] h-[23px] border border-gray-400 bg-gray-100 flex items-center justify-center text-xs"
|
:disabled="relaSiteIdx <= 1" @click="RelaPreBtClick">◀</button>
|
<span class="text-xs font-mono">{{ relaSiteIdx }}/{{ relaSiteCount }}</span>
|
<button class="w-[31px] h-[23px] border border-gray-400 bg-gray-100 flex items-center justify-center text-xs"
|
:disabled="relaSiteIdx >= relaSiteCount" @click="RelaNextBtClick">▶</button>
|
</div>
|
<div class="flex-1 bg-gray-800 overflow-auto relative p-2 flex items-center justify-center">
|
<img :src="relatedImage" class="max-w-none shadow-xl border border-gray-400" />
|
<!-- Mock Related Error Overlay -->
|
<div v-if="relaSiteIdx > 0" class="absolute left-1/3 top-1/3 w-[80px] h-[30px] border-2 border-red-400 bg-red-200 opacity-40 pointer-events-none"></div>
|
</div>
|
</div>
|
</div>
|
|
<!-- Visual Reference Overlay -->
|
<div class="err-list-layout opacity-20 pointer-events-none absolute left-0 top-0">
|
<img src="assets/ErrList.png" class="w-[841px] h-[636px]" />
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { defineComponent } from 'vue';
|
import { useErrListLogic } from './ErrList.ts';
|
|
export default defineComponent({
|
name: 'ErrlistForm',
|
setup() {
|
const logic = useErrListLogic();
|
return { ...logic };
|
}
|
});
|
</script>
|
|
<style scoped>
|
.err-list-form {
|
user-select: none;
|
}
|
.err-list-layout {
|
z-index: 1000;
|
}
|
</style>
|
