<template>
|
<div class="old-case-info-form flex flex-col bg-gray-100 font-sans w-[740px] h-[554px] border border-gray-400 relative overflow-hidden text-sm">
|
|
<!-- Page 1: CaseInfo -->
|
<div v-if="currentPage === 'CaseInfo'" class="flex-1 flex flex-col overflow-hidden">
|
<!-- Toolbar (Panel 1) -->
|
<div class="h-[41px] flex items-center px-4 space-x-4 bg-gray-50 border-b border-gray-300">
|
<button class="w-[75px] h-[25px] border border-gray-400 bg-gray-200 hover:bg-gray-300" @click="LoadBtClick">
|
載入影像
|
</button>
|
<button class="w-[75px] h-[25px] border border-gray-400 bg-gray-200 hover:bg-gray-300" @click="OldExitBtClick">
|
離開
|
</button>
|
</div>
|
|
<!-- Case List (OldCaseLV) -->
|
<div class="flex-1 bg-white overflow-auto">
|
<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-2 border-r border-gray-200 w-[200px]">掛報書編號</th>
|
<th class="p-2 border-r border-gray-200 w-[120px]">年度</th>
|
<th class="p-2 border-r border-gray-200 w-[120px]">業務別</th>
|
<th class="p-2">是否舊案</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-for="(item, index) in oldCases"
|
:key="index"
|
:class="['hover:bg-blue-50 cursor-pointer border-b border-gray-100', selectedCaseIndex === index ? 'bg-blue-600 text-white hover:bg-blue-700' : '']"
|
@click="selectCase(index)"
|
@dblclick="LoadBtClick">
|
<td class="p-2 border-r border-gray-200">{{ item.id }}</td>
|
<td class="p-2 border-r border-gray-200">{{ item.year }}</td>
|
<td class="p-2 border-r border-gray-200">{{ item.type }}</td>
|
<td class="p-2">{{ item.isOld }}</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
|
<!-- Page 2: View -->
|
<div v-else class="flex-1 flex flex-col overflow-hidden">
|
<!-- Toolbar (Panel 3) -->
|
<div class="h-[49px] flex items-center px-4 space-x-4 bg-gray-50 border-b border-gray-300">
|
<button class="w-[75px] h-[25px] border border-gray-400 bg-gray-200 hover:bg-gray-300" @click="ImportBtClick">
|
引用
|
</button>
|
<button class="w-[75px] h-[25px] border border-gray-400 bg-gray-200 hover:bg-gray-300" @click="ExitBtClick">
|
離開
|
</button>
|
<div class="flex-1"></div>
|
<span class="text-xs text-gray-500">案件編號: {{ oldCases[selectedCaseIndex].id }}</span>
|
</div>
|
|
<div class="flex-1 flex overflow-hidden">
|
<!-- Left Sidebar: Document Groups (Panel 4) -->
|
<div class="w-[249px] flex-none border-r border-gray-400 p-1 flex flex-col bg-gray-50">
|
<fieldset class="flex-1 border border-gray-400 p-0 flex flex-col">
|
<legend class="px-1 ml-2 text-sm">案件編號</legend>
|
<div class="flex-1 overflow-y-auto bg-white m-1 border border-gray-300">
|
<div v-for="(group, index) in docGroups"
|
:key="index"
|
:class="['flex items-center px-2 py-1 space-x-2 cursor-pointer hover:bg-blue-50', selectedGroupIndex === index ? 'bg-blue-100' : '']"
|
@click="CheckListBox1Click(index)">
|
<input type="checkbox" v-model="group.checked" @click.stop />
|
<span class="text-sm truncate">{{ group.text }}</span>
|
</div>
|
</div>
|
</fieldset>
|
</div>
|
|
<!-- Main Preview Area (Panel 5) -->
|
<div class="flex-1 flex overflow-hidden">
|
<!-- Thumbnails (Panel 6) -->
|
<div class="w-[183px] flex-none border-r border-gray-400 overflow-y-auto bg-gray-300 p-1 space-y-2">
|
<div v-for="(page, pIdx) in (selectedGroupIndex !== -1 ? docGroups[selectedGroupIndex].pages : [])"
|
:key="pIdx"
|
class="w-[150px] mx-auto border-2 border-transparent hover:border-blue-500 cursor-pointer bg-white shadow-sm"
|
@click="setThumbnailAsPreview(page)">
|
<img :src="page" class="w-full" />
|
<div class="text-[10px] text-center bg-gray-100 py-1">第 {{ pIdx + 1 }} 頁</div>
|
</div>
|
</div>
|
<!-- Large Preview (Panel 7) -->
|
<div class="flex-1 bg-gray-800 flex items-center justify-center p-2 overflow-auto">
|
<img v-if="previewImage" :src="previewImage" class="max-w-none shadow-2xl border-4 border-white" />
|
<div v-else class="text-white text-lg opacity-30">請選擇影像進行預覽</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- Visual Reference Overlay -->
|
<div class="old-case-layout opacity-20 pointer-events-none absolute left-0 top-0">
|
<img src="assets/OldCaseInfo.png" class="w-[740px] h-[554px]" />
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { defineComponent } from 'vue';
|
import { useOldCaseInfoLogic } from './OldCaseInfo.ts';
|
|
export default defineComponent({
|
name: 'OldCaseInfoForm',
|
setup() {
|
const logic = useOldCaseInfoLogic();
|
return { ...logic };
|
}
|
});
|
</script>
|
|
<style scoped>
|
.old-case-info-form {
|
user-select: none;
|
}
|
.old-case-layout {
|
z-index: 1000;
|
}
|
</style>
|
