From 713024ccb5056e76bcfc9389664981da68a5139f Mon Sep 17 00:00:00 2001
From: curtis <curtis@i-mps.com>
Date: 星期一, 30 三月 2026 14:08:01 +0800
Subject: [PATCH] feat: dfm to web
---
uiOutput/ErrList/ErrList.vue | 245 ++++++++++++++++---------------------------------
1 files changed, 80 insertions(+), 165 deletions(-)
diff --git a/uiOutput/ErrList/ErrList.vue b/uiOutput/ErrList/ErrList.vue
index 5793140..e6073c7 100644
--- a/uiOutput/ErrList/ErrList.vue
+++ b/uiOutput/ErrList/ErrList.vue
@@ -1,103 +1,93 @@
<template>
- <div class="err-list-form flex flex-col bg-gray-100 font-sans" style="width: 841px; height: 636px;">
- <!-- Top Panel: Error Reason & Details -->
- <div class="panel-3 border border-gray-300 flex-none" style="height: 212px;">
- <fieldset class="err-reason-gb m-2 border border-gray-400 p-2 h-[calc(100%-16px)]">
- <legend class="text-black text-base px-1">錯誤原因</legend>
- <div class="relative h-full">
- <!-- ListView for Error Items -->
- <div class="err-list-lv bg-white border border-gray-300 w-full h-[calc(100%-20px)] overflow-auto cursor-pointer"
- @click="errListLVClick" @keyup="errListLVKeyUp" @mousedown="errListLVMouseDown">
- <table class="w-full text-left text-base border-collapse">
- <thead>
- <tr class="bg-gray-200">
- <th class="p-1 border border-gray-300 font-normal" style="width: 550px;">內容</th>
- <th class="p-1 border border-gray-300 font-normal" style="width: 80px;">index</th>
- </tr>
- </thead>
- <tbody>
- <tr v-for="(item, index) in errListItems" :key="index"
- @click="selectItem(index)"
- :class="{'bg-blue-600 text-white': selectedItemIndex === index, 'hover:bg-gray-100': selectedItemIndex !== index}">
- <td class="p-1 border border-gray-300">{{ item.content }}</td>
- <td class="p-1 border border-gray-300">{{ item.index }}</td>
- </tr>
- </tbody>
- </table>
+ <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>
-
- <!-- Hidden ImageScrollBox3 -->
- <div v-show="false" class="image-scroll-box-3 absolute top-[94px] left-[720px] w-[100px] h-[100px] border"></div>
</div>
</fieldset>
</div>
- <!-- Splitter 3 -->
- <div class="splitter-3 h-[5px] w-full bg-gray-300 cursor-row-resize flex-none"></div>
-
- <!-- Action Buttons Panel -->
- <div class="panel-1 border border-gray-300 bg-gray-100 flex items-center px-4 space-x-2 flex-none" style="height: 41px;">
- <button class="delete-bt px-4 py-1.5 border border-gray-400 bg-gray-200 hover:bg-gray-300 text-sm disabled:opacity-50"
- :disabled="!isDeleteEnabled" @click="DeleteBtClick">忽略</button>
- <button class="enforce-bt px-4 py-1.5 border border-gray-400 bg-gray-200 hover:bg-gray-300 text-sm"
- @click="EnforceBtClick">強制傳送</button>
- <button class="immediate-bt px-4 py-1.5 border border-gray-400 bg-gray-200 hover:bg-gray-300 text-sm"
- @click="ImmediateBtClick">立即傳送</button>
-
- <!-- Hidden buttons -->
- <button v-show="showNoteBtn" class="note-bt px-4 py-1.5 border border-gray-400 bg-gray-200" @click="NoteBtClick">備註</button>
- <button v-show="showRejectBtn" class="reject-bt px-4 py-1.5 border border-gray-400 bg-gray-200" @click="RejectBtClick">退件</button>
- <button v-show="false" class="button-1 px-4 py-1.5 border border-gray-400 bg-gray-200" @click="Button1Click">Button1</button>
-
- <div class="flex-grow"></div> <!-- Spacer -->
- <button class="exit-bt px-4 py-1.5 border border-gray-400 bg-gray-200 hover:bg-gray-300 text-sm"
- @click="ExitBtClick">離開</button>
+ <!-- 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>
- <!-- Bottom Panel: Image Viewers -->
- <div class="panel-4 flex flex-1 overflow-hidden border border-gray-300">
-
- <!-- Left Image Viewer Panel -->
- <div class="panel-5 flex flex-col h-full w-[407px]">
- <div class="panel-8 flex items-center bg-gray-200 border-b border-gray-300 px-2 h-[28px] flex-none">
- <button class="site-pre-bt p-0.5 border border-gray-400 bg-gray-100 disabled:opacity-50 mr-1"
- :disabled="!isSitePreEnabled" @click="SitePreBtClick">
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
- </button>
- <span class="label-3 text-sm ml-2">{{ siteIndex }}/{{ siteTotal }}</span>
- <button class="site-next-bt p-0.5 border border-gray-400 bg-gray-100 disabled:opacity-50 ml-1"
- :disabled="!isSiteNextEnabled" @click="SiteNextBtClick">
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
- </button>
+ <!-- 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="image-scroll-box-1 flex-1 bg-white border border-gray-300 overflow-auto relative">
- <!-- Placeholder for Main Image -->
- <div class="text-gray-400 absolute inset-0 flex items-center justify-center">Image 1</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>
- <!-- Splitter 1 -->
- <div class="splitter-1 w-[5px] h-full bg-gray-300 cursor-col-resize flex-none hover:bg-gray-400" @mousedown="startResize"></div>
-
- <!-- Right Image Viewer Panel (Conditional Visibility in original code based on RelaSite) -->
- <div class="panel-6 flex flex-col h-full flex-1" v-show="showPanel6">
- <div class="panel-9 flex items-center bg-gray-200 border-b border-gray-300 px-2 h-[28px] flex-none">
- <button class="rela-pre-bt p-0.5 border border-gray-400 bg-gray-100 disabled:opacity-50 mr-1"
- :disabled="!isRelaPreEnabled" @click="RelaPreBtClick">
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
- </button>
- <span class="label-4 text-sm ml-2">{{ relaSiteIndex }}/{{ relaSiteTotal }}</span>
- <button class="rela-next-bt p-0.5 border border-gray-400 bg-gray-100 disabled:opacity-50 ml-1"
- :disabled="!isRelaNextEnabled" @click="RelaNextBtClick">
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
- </button>
+ <!-- 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="image-scroll-box-2 flex-1 bg-white border border-gray-300 overflow-auto relative">
- <!-- Placeholder for Related Image -->
- <div class="text-gray-400 absolute inset-0 flex items-center justify-center">Image 2 (Related)</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>
@@ -109,92 +99,17 @@
export default defineComponent({
name: 'ErrlistForm',
setup() {
- const {
- // State
- errListItems,
- selectedItemIndex,
- isDeleteEnabled,
- siteIndex,
- siteTotal,
- isSitePreEnabled,
- isSiteNextEnabled,
- relaSiteIndex,
- relaSiteTotal,
- isRelaPreEnabled,
- isRelaNextEnabled,
- showPanel6,
- showNoteBtn,
- showRejectBtn,
-
- // Actions
- selectItem,
- ErrListLVClick,
- ErrListLVKeyUp,
- ErrListLVMouseDown,
- DeleteBtClick,
- EnforceBtClick,
- ImmediateBtClick,
- ExitBtClick,
- SitePreBtClick,
- SiteNextBtClick,
- RelaPreBtClick,
- RelaNextBtClick,
- NoteBtClick,
- RejectBtClick,
- Button1Click,
- startResize
- } = useErrListLogic();
-
- return {
- errListItems,
- selectedItemIndex,
- isDeleteEnabled,
- siteIndex,
- siteTotal,
- isSitePreEnabled,
- isSiteNextEnabled,
- relaSiteIndex,
- relaSiteTotal,
- isRelaPreEnabled,
- isRelaNextEnabled,
- showPanel6,
- showNoteBtn,
- showRejectBtn,
-
- selectItem,
- ErrListLVClick,
- ErrListLVKeyUp,
- ErrListLVMouseDown,
- DeleteBtClick,
- EnforceBtClick,
- ImmediateBtClick,
- ExitBtClick,
- SitePreBtClick,
- SiteNextBtClick,
- RelaPreBtClick,
- RelaNextBtClick,
- NoteBtClick,
- RejectBtClick,
- Button1Click,
- startResize
- };
+ const logic = useErrListLogic();
+ return { ...logic };
}
});
</script>
<style scoped>
-/* Optional: Add custom scrollbar styling to match Delphi look if desired */
-.err-list-lv::-webkit-scrollbar {
- width: 16px;
+.err-list-form {
+ user-select: none;
}
-.err-list-lv::-webkit-scrollbar-track {
- background: #f1f1f1;
-}
-.err-list-lv::-webkit-scrollbar-thumb {
- background: #c1c1c1;
- border: 1px solid #f1f1f1;
-}
-.err-list-lv::-webkit-scrollbar-thumb:hover {
- background: #a8a8a8;
+.err-list-layout {
+ z-index: 1000;
}
</style>
--
Gitblit v1.8.0