<template>
|
<div class="print-form flex flex-col bg-gray-100 font-sans w-[368px] h-[484px] border border-gray-400 relative overflow-hidden">
|
|
<!-- Document Image GroupBox (DocGB) -->
|
<fieldset class="flex-1 flex flex-col border border-gray-400 m-1 p-0 overflow-hidden">
|
<legend class="text-sm px-1 ml-2">文件影像</legend>
|
|
<div class="flex-1 flex overflow-hidden">
|
<!-- Index List (ListBox1) -->
|
<div class="w-[37px] bg-white border-r border-gray-300 overflow-y-auto">
|
<div v-for="(item, index) in items"
|
:key="'lb'+index"
|
:class="['h-[20px] text-xs flex items-center justify-center cursor-pointer border-b border-gray-100', selectedIndex === index ? 'bg-blue-600 text-white' : '']"
|
@click="ListBox1Click(index)">
|
{{ index + 1 }}
|
</div>
|
</div>
|
|
<!-- Check List (CheckListBox1) -->
|
<div class="flex-1 bg-white overflow-y-auto">
|
<div v-for="(item, index) in items"
|
:key="'clb'+index"
|
:class="['h-[20px] text-sm flex items-center px-2 space-x-2 cursor-pointer border-b border-gray-100', selectedIndex === index ? 'bg-blue-600 text-white' : '']"
|
@click="CheckListBox1Click(index)">
|
<input type="checkbox" v-model="item.checked" class="cursor-pointer" @click.stop />
|
<span class="truncate">{{ item.text }}</span>
|
</div>
|
</div>
|
</div>
|
</fieldset>
|
|
<!-- Bottom Action Panel (Panel 1) -->
|
<div class="h-[51px] flex items-center px-2 space-x-2 bg-gray-50 flex-none border-t border-gray-300">
|
<button class="w-[50px] h-[35px] border border-gray-400 bg-gray-200 hover:bg-gray-300 flex flex-col items-center justify-center text-[10px]" @click="SelecAllBtClick" title="全選">
|
<span class="text-lg">✓</span>
|
全選
|
</button>
|
<button class="w-[50px] h-[35px] border border-gray-400 bg-gray-200 hover:bg-gray-300 flex flex-col items-center justify-center text-[10px]" @click="EraseBtClick" title="清除">
|
<span class="text-lg">✗</span>
|
清除
|
</button>
|
<button class="w-[50px] h-[35px] border border-gray-400 bg-gray-200 hover:bg-gray-300 flex flex-col items-center justify-center text-[10px]" @click="PrtBtClick" title="列印">
|
<span class="text-lg">🖨️</span>
|
列印
|
</button>
|
<div class="flex-1"></div>
|
<button class="w-[50px] h-[35px] border border-gray-400 bg-gray-200 hover:bg-gray-300 flex flex-col items-center justify-center text-[10px]" @click="ExitBtClick" title="離開">
|
<span class="text-lg">🚪</span>
|
離開
|
</button>
|
</div>
|
|
<!-- Visual Reference Overlay -->
|
<div class="print-layout opacity-20 pointer-events-none absolute left-0 top-0">
|
<img src="assets/DocPrt.png" class="w-[368px] h-[484px]" />
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { defineComponent } from 'vue';
|
import { useDocPrtLogic } from './DocPrt.ts';
|
|
export default defineComponent({
|
name: 'PrintForm',
|
setup() {
|
const logic = useDocPrtLogic();
|
return { ...logic };
|
}
|
});
|
</script>
|
|
<style scoped>
|
.print-form {
|
user-select: none;
|
}
|
.print-layout {
|
z-index: 1000;
|
}
|
</style>
|
