<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>
|
|
<!-- 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>
|
</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>
|
</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>
|
</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>
|
</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>
|
</div>
|
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { defineComponent } from 'vue';
|
import { useErrListLogic } from './ErrList.ts';
|
|
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
|
};
|
}
|
});
|
</script>
|
|
<style scoped>
|
/* Optional: Add custom scrollbar styling to match Delphi look if desired */
|
.err-list-lv::-webkit-scrollbar {
|
width: 16px;
|
}
|
.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;
|
}
|
</style>
|
