<template>
|
<div class="cb-imgpsscanimp-form flex flex-col bg-gray-100 font-sans w-[950px] h-[618px]">
|
|
<!-- Top Toolbar Panel1 -->
|
<div class="panel-1 border-b border-gray-300 flex items-center h-[52px] flex-none px-2 space-x-2 bg-gray-100">
|
|
<!-- Panel23 (Leftmost tools) -->
|
<div class="panel-23 flex items-center h-full space-x-1" style="width: 56px;">
|
<button class="new-scan-btn w-[42px] h-[50px] border border-gray-400 bg-gray-200 hover:bg-gray-300 flex items-center justify-center" @click="NewScanBtnClick">
|
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'><path fill='none' stroke='black' stroke-width='2' d='M12 4v16m-8-8h16'/></svg>" alt="New" class="w-6 h-6"/>
|
</button>
|
<button v-show="false" class="add-scan-btn w-[42px] h-[50px] border border-gray-400 bg-gray-200" @click="AddScanBtnClick">Add</button>
|
</div>
|
|
<!-- TransBtn -->
|
<button class="trans-btn w-[42px] h-[50px] border border-gray-400 bg-gray-200 hover:bg-gray-300 flex items-center justify-center" @click="TransBtnClick">
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
|
</button>
|
|
<!-- Panel21 (Main Toolbar) -->
|
<div class="panel-21 flex items-center h-full space-x-1" style="width: 545px;">
|
<button class="fc0-btn w-[42px] h-[49px] border border-gray-400 bg-gray-200 hover:bg-gray-300" @click="FC0Click">FC0</button>
|
<button class="fc1-btn w-[42px] h-[49px] border border-gray-400 bg-gray-200 hover:bg-gray-300" @click="FC1Click">FC1</button>
|
<button class="fc2-btn w-[42px] h-[49px] border border-gray-400 bg-gray-200 hover:bg-gray-300" @click="FC2Click">FC2</button>
|
<button class="fc3-btn w-[42px] h-[49px] border border-gray-400 bg-gray-200 hover:bg-gray-300" @click="FC3Click">FC3</button>
|
<button class="fc4-btn w-[42px] h-[49px] border border-gray-400 bg-gray-200 hover:bg-gray-300" @click="FC4Click">FC4</button>
|
<button class="fc5-btn w-[42px] h-[49px] border border-gray-400 bg-gray-200 hover:bg-gray-300" @click="FC5Click">FC5</button>
|
<button v-show="false" class="fc6-btn w-[42px] h-[49px] border border-gray-400 bg-gray-200" @click="FC6Click">FC6</button>
|
|
<div class="w-2"></div> <!-- Spacer -->
|
|
<button class="view-mode-btn w-[41px] h-[49px] border border-gray-400 bg-gray-200 hover:bg-gray-300" @mouseenter="ViewModeBtnMouseEnter">VM</button>
|
<button class="pre-page-btn w-[42px] h-[49px] border border-gray-400 bg-gray-200 hover:bg-gray-300" @click="PrePageBtnClick"><</button>
|
<button class="next-page-btn w-[42px] h-[49px] border border-gray-400 bg-gray-200 hover:bg-gray-300" @click="NextPageBtnClick">></button>
|
<button class="option-btn w-[41px] h-[49px] border border-gray-400 bg-gray-200 hover:bg-gray-300" @click="OptionBtnClick">Opt</button>
|
<button class="select-scan-btn w-[41px] h-[49px] border border-gray-400 bg-gray-200 hover:bg-gray-300" @click="SelectScanBtnClick">Sel</button>
|
|
<!-- Hidden Edit -->
|
<input type="text" class="hidden" v-model="edit1" />
|
</div>
|
|
<!-- Right align stuff -->
|
<div class="flex-grow"></div>
|
<label v-show="showDenialTimeLb" class="text-red-500 font-bold w-[305px] truncate">可掃描上傳時間：</label>
|
|
<!-- Hidden buttons in Top Panel -->
|
<button v-show="false" @click="Button3Click">Btn3</button>
|
<button v-show="false" @click="Button4Click">Btn4</button>
|
<button v-show="false" @click="Button5Click">Btn5</button>
|
<button v-show="false" @click="Button6Click">Btn6</button>
|
<button v-show="false" @click="ExportBtClick">Export</button>
|
<button v-show="false" @click="ImportBtClick">Import</button>
|
<label class="scan-gray-cb flex items-center space-x-1 absolute right-[20px] top-[15px]">
|
<input type="checkbox" v-model="scanGray" @change="ScanGrayCBClick" />
|
<span>灰階掃描</span>
|
</label>
|
|
</div>
|
|
<!-- Main Workspace Panel4 -->
|
<div class="panel-4 flex flex-1 overflow-hidden relative">
|
|
<!-- Left Tree/Settings Panel3 -->
|
<div class="panel-3 flex flex-col w-[291px] border-r border-gray-300 bg-gray-100 flex-none z-10" :style="{ width: panel3Width + 'px' }">
|
|
<!-- Scan Options Panel6 -->
|
<div class="panel-6 h-[50px] border-b border-gray-300 flex items-center px-2 flex-none relative">
|
<button v-show="false" class="sample-scan-btn w-[27px] h-[28px] border border-gray-400 mr-1" @click="SampleScanBtnClick">S</button>
|
<button v-show="false" class="w-note-btn w-[27px] h-[28px] border border-gray-400 mr-1" @click="WNoteBtnClick">N</button>
|
|
<div class="flex flex-col ml-2 text-sm space-y-1">
|
<label class="flex items-center space-x-1">
|
<input type="checkbox" v-model="scanDuplex" @change="ScanDuplexCBClick" />
|
<span>雙面掃描</span>
|
</label>
|
<label class="flex items-center space-x-1">
|
<input type="checkbox" v-model="cb1" @change="CB1Click" />
|
<span>掃描對話窗</span>
|
</label>
|
</div>
|
|
<button v-show="false" class="check-case-btn absolute right-2 top-2 border border-gray-400 px-2" @click="CheckCaseBtnClick">Chk</button>
|
</div>
|
|
<div v-show="false" class="panel-18 h-[32px] border-b border-gray-300 p-1 flex-none">
|
<span class="text-blue-600 underline cursor-pointer" @click="UseOldCaseLbClick">舊案引入</span>
|
</div>
|
|
<!-- TreeView Area Panel17 -->
|
<div class="panel-17 flex-1 flex flex-col min-h-0 bg-white border-b border-gray-300">
|
<div class="tree-view-1 flex-1 overflow-auto p-1 border border-gray-300 m-1"
|
@click="TreeView1Click" @keyup="TreeView1KeyUp" @mousedown="TreeView1MouseDown"
|
@mouseenter="TreeView1MouseEnter" @mousemove="TreeView1MouseMove" @mouseup="TreeView1MouseUp">
|
<!-- Mock TreeView -->
|
<ul class="text-sm list-none p-0">
|
<li v-for="(node, idx) in treeNodes" :key="idx" class="cursor-pointer hover:bg-blue-100 p-1 rounded"
|
:class="{'bg-blue-500 text-white': selectedNodeIndex === idx}"
|
@click.stop="selectTreeNode(idx)">
|
<span v-if="node.children && node.children.length" class="mr-1 inline-block w-3">{{ node.expanded ? '-' : '+' }}</span>
|
<span v-else class="mr-1 inline-block w-3"></span>
|
{{ node.text }}
|
</li>
|
</ul>
|
</div>
|
<!-- Bottom of TreeView (PrtLb, CaseHelpBtn) -->
|
<div class="panel-13 h-[40px] flex items-center justify-between px-2 bg-gray-100 flex-none">
|
<span v-show="false" class="text-blue-600 underline cursor-pointer" @click="PrtLbClick">列印</span>
|
<button v-show="false" class="case-help-btn border border-gray-400 px-3 py-1" @click="CaseHelpBtnClick">Help</button>
|
</div>
|
</div>
|
|
<!-- Attachment List (Hidden by default) -->
|
<div v-show="showAttFileGB" class="att-file-gb h-[160px] border-t border-gray-300 bg-gray-100 flex-none p-1 flex flex-col">
|
<div class="text-xs font-bold mb-1">PDF檔</div>
|
<div class="panel-20 flex space-x-2 text-blue-600 underline text-sm mb-1 px-1 flex-none">
|
<span class="cursor-pointer opacity-50">加入</span>
|
<span class="cursor-pointer opacity-50">移除</span>
|
</div>
|
<select multiple class="att-list-box flex-1 border border-gray-300 w-full" @click="AttListBoxClick" @dblclick="AttListBoxDblClick">
|
<option v-for="(att, idx) in attFiles" :key="idx">{{ att }}</option>
|
</select>
|
</div>
|
|
<!-- Label7 from dfm -->
|
<span class="absolute bottom-2 left-2 text-xs text-gray-500">{{ label7Text }}</span>
|
</div>
|
|
<!-- Splitter 1 -->
|
<div class="splitter-1 w-[4px] bg-gray-300 cursor-col-resize flex-none hover:bg-gray-400 z-20" @mousedown="startResize"></div>
|
|
<!-- Right Workspace Panel12 -->
|
<div class="panel-12 flex-1 flex flex-col relative bg-gray-200">
|
|
<!-- Top Info Panel5 -->
|
<div class="panel-5 h-[52px] border-b border-gray-300 bg-gray-100 flex flex-none">
|
<!-- AddCredit1RG -->
|
<fieldset class="border border-gray-400 m-1 p-1 w-[161px] text-xs">
|
<legend>是否新增授信檔</legend>
|
<div class="flex space-x-2 justify-center mt-1">
|
<label><input type="radio" name="addCredit" disabled> 是</label>
|
<label><input type="radio" name="addCredit" disabled> 否</label>
|
</div>
|
</fieldset>
|
<!-- Panel11 -->
|
<div class="panel-11 flex-1 flex items-center p-2" @dblclick="Panel11DblClick">
|
<span v-show="false" class="text-sm">oooo</span>
|
</div>
|
</div>
|
|
<!-- Work Area Container -->
|
<div class="flex flex-1 overflow-hidden relative">
|
<!-- Panel14 (Thumbnails) -->
|
<div class="panel-14 w-[185px] border-r border-gray-300 flex flex-col bg-white flex-none">
|
<div class="bg-blue-600 text-white text-center text-sm font-bold py-1">1</div>
|
<div class="panel-15 flex-1 overflow-auto relative">
|
<div class="scroll-box-1 absolute inset-0" @mouseenter="ScrollBox1MouseEnter">
|
<!-- Thumbnails go here -->
|
</div>
|
</div>
|
</div>
|
|
<!-- Main Image Area Panel7 -->
|
<div class="panel-7 flex-1 flex flex-col relative bg-gray-300">
|
|
<!-- Image Tools Panel16 -->
|
<div class="panel-16 h-[39px] border-b border-gray-300 bg-gray-100 flex items-center px-1 space-x-1 flex-none">
|
<button class="w-[29px] h-[35px] border border-gray-400 bg-white hover:bg-gray-200 text-xs" title="全部恢復全圖" @click="SpeedButton3Click">R</button>
|
<button class="w-[29px] h-[35px] border border-gray-400 bg-white hover:bg-gray-200 text-xs" title="左轉90度" @click="SpeedButton14Click">L</button>
|
<button class="w-[29px] h-[35px] border border-gray-400 bg-white hover:bg-gray-200 text-xs" title="轉180度" @click="SpeedButton15Click">U</button>
|
<button class="w-[29px] h-[35px] border border-gray-400 bg-white hover:bg-gray-200 text-xs" title="右轉90度" @click="SpeedButton16Click">R</button>
|
<button class="w-[29px] h-[35px] border border-gray-400 bg-white hover:bg-gray-200 text-xs" title="畫面同高" @click="SpeedButton17Click">H</button>
|
<button class="w-[29px] h-[35px] border border-gray-400 bg-white hover:bg-gray-200 text-xs" title="畫面同寬" @click="SpeedButton18Click">W</button>
|
<button class="w-[29px] h-[35px] border border-gray-400 bg-white hover:bg-gray-200 text-xs font-bold" title="原圖" @click="SpeedButton19Click">1:1</button>
|
<button class="w-[29px] h-[35px] border border-gray-400 bg-white hover:bg-gray-200 text-xs" title="適窗" @click="SpeedButton20Click">F</button>
|
<button class="w-[29px] h-[35px] border border-gray-400 bg-white hover:bg-gray-200 text-xs font-bold" title="縮小50%" @click="SpeedButton21Click">50%</button>
|
<button class="w-[29px] h-[35px] border border-gray-400 bg-white hover:bg-gray-200 text-xs font-bold" title="縮小25%" @click="SpeedButton22Click">25%</button>
|
|
<label class="flex items-center space-x-1 text-xs ml-2">
|
<input type="checkbox" v-model="smoothView" @change="SmoothCBClick">
|
<span>灰階平滑顯示</span>
|
</label>
|
</div>
|
|
<!-- Main Viewport Panel9 -->
|
<div class="panel-9 flex-1 relative bg-white overflow-hidden" @resize="Panel9Resize">
|
<!-- Main Image Scrollbox -->
|
<div class="isb-1 absolute top-1 left-1 w-[80px] h-[75px] border border-gray-400 z-10 hidden">ISB1</div>
|
|
<!-- Dynamic multi-image placeholders from dfm imgp1~imgp8 -->
|
|
<!-- Loading Panel -->
|
<div v-show="showLoadingPanel" class="panel-22 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white border-2 border-blue-500 w-[387px] h-[41px] flex items-center justify-center font-bold text-blue-800 z-50 shadow-lg">
|
資料載入中,請稍候
|
</div>
|
|
<!-- Progress Panel -->
|
<div v-show="showProgressPanel" class="panel-8 absolute bottom-10 left-10 w-[233px] bg-white border border-gray-400 p-1 z-50">
|
<div class="text-blue-600 text-sm mb-1 truncate">{{ progressLabel }}</div>
|
<div class="w-full bg-gray-200 h-4 relative">
|
<div class="bg-blue-500 h-full" :style="{ width: progressValue + '%' }"></div>
|
</div>
|
</div>
|
</div>
|
|
<!-- Bottom Scrollbar for Panel7 -->
|
<input type="range" min="1" max="100" v-model="scrollValue" class="w-full h-[22px] flex-none m-0 p-0" @change="ScrollBar1Change">
|
</div>
|
|
<!-- Rightmost Page List Panel10 -->
|
<div v-show="showPageList" class="panel-10 w-[69px] border-l border-gray-300 bg-white flex-none flex flex-col">
|
<div class="bg-gray-200 border-b border-gray-300 px-1 py-0.5 text-xs text-center font-bold">頁數</div>
|
<ul class="flex-1 overflow-auto list-none p-0 m-0 text-sm text-center">
|
<li v-for="(page, idx) in pageList" :key="idx" class="cursor-pointer hover:bg-blue-100 py-1"
|
:class="{'bg-blue-500 text-white': selectedPageIndex === idx}"
|
@click="PageLVClick(idx)">{{ page }}</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- StatusBar -->
|
<div class="status-bar-1 h-[24px] border-t border-gray-400 bg-gray-200 flex text-xs flex-none" @dblclick="StatusBar1DblClick">
|
<div class="border-r border-gray-400 w-[120px] px-2 flex items-center shadow-inner">{{ statusPanels[0] }}</div>
|
<div class="border-r border-gray-400 w-[180px] px-2 flex items-center shadow-inner">{{ statusPanels[1] }}</div>
|
<div class="border-r border-gray-400 w-[180px] px-2 flex items-center shadow-inner">{{ statusPanels[2] }}</div>
|
<div class="border-r border-gray-400 w-[180px] px-2 flex items-center shadow-inner">{{ statusPanels[3] }}</div>
|
<div class="w-[50px] px-2 flex items-center shadow-inner">{{ statusPanels[4] }}</div>
|
</div>
|
|
</div>
|
|
<div class="cb-imgpsscanimp-form-layout flex flex-col bg-gray-100 font-sans w-[950px] h-[618px]">
|
<img src="assets/CB_IMGPSScanImp.png"/>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { defineComponent } from 'vue';
|
import { useCBIMGPSScanImpLogic } from './CB_IMGPSScanImp.ts';
|
|
export default defineComponent({
|
name: 'CB_IMGPSScanX',
|
setup() {
|
const logic = useCBIMGPSScanImpLogic();
|
return { ...logic };
|
}
|
});
|
</script>
|
|
<style scoped>
|
/* TreeView Custom Scrollbar */
|
.tree-view-1::-webkit-scrollbar { width: 12px; }
|
.tree-view-1::-webkit-scrollbar-track { background: #f1f1f1; border-left: 1px solid #ccc; }
|
.tree-view-1::-webkit-scrollbar-thumb { background: #c1c1c1; border: 1px solid #f1f1f1; }
|
.tree-view-1::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
|
.cb-imgpsscanimp-form-layout {
|
opacity: 0.2;
|
position: absolute;
|
left: auto;
|
right: auto;
|
top: 203px;
|
}
|
</style>
|
