<template>
|
<div class="doc-list-form flex flex-col bg-gray-100 font-sans w-[594px] h-[486px] border border-gray-400 relative overflow-hidden">
|
|
<!-- Main Content Panel (Panel 2) -->
|
<div class="flex-1 flex flex-col border-b border-gray-300 overflow-hidden">
|
<!-- Search Panel (Panel 3) -->
|
<div class="h-[41px] border-b border-gray-300 flex items-center px-4 space-x-4 bg-gray-50 flex-none">
|
<label class="text-base">索引</label>
|
<input type="text"
|
class="w-[306px] h-[24px] border border-gray-400 px-1 uppercase"
|
v-model="searchText"
|
@input="Edit1Change" />
|
|
<label class="flex items-center space-x-1 cursor-pointer">
|
<input type="checkbox" v-model="isCustomDoc" />
|
<span class="text-sm">分類為自訂文件</span>
|
</label>
|
</div>
|
|
<!-- List View (DocLV) -->
|
<div class="flex-1 overflow-auto bg-white">
|
<table class="w-full border-collapse">
|
<thead class="sticky top-0 bg-gray-200 shadow-sm">
|
<tr class="text-left text-sm font-medium border-b border-gray-300">
|
<th class="p-2 border-r border-gray-300 w-[140px] cursor-pointer hover:bg-gray-300" @click="DocLVColumnClick(0)">
|
FormID
|
<span v-if="sortColumn === 0">{{ sortOrder === 'asc' ? '▲' : '▼' }}</span>
|
</th>
|
<th class="p-2 cursor-pointer hover:bg-gray-300" @click="DocLVColumnClick(1)">
|
文件名稱
|
<span v-if="sortColumn === 1">{{ sortOrder === 'asc' ? '▲' : '▼' }}</span>
|
</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-for="(item, index) in filteredItems"
|
:key="index"
|
:class="['text-sm hover:bg-blue-50 cursor-pointer', selectedIndex === index ? 'bg-blue-600 text-white hover:bg-blue-700' : '']"
|
@click="selectItem(index)"
|
@dblclick="DocLVDblClick(index)">
|
<td class="p-2 border-r border-gray-200">{{ item.formId }}</td>
|
<td class="p-2">{{ item.docName }}</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
|
<!-- Bottom Action Panel (Panel 1) -->
|
<div class="h-[41px] flex items-center justify-center space-x-6 bg-gray-50 flex-none border-t border-gray-300">
|
<button class="w-[75px] h-[25px] border border-gray-400 bg-gray-200 hover:bg-gray-300 flex items-center justify-center shadow-sm" @click="OkBtClick">
|
確定
|
</button>
|
<button class="w-[75px] h-[25px] border border-gray-400 bg-gray-200 hover:bg-gray-300 flex items-center justify-center shadow-sm" @click="CancelBtClick">
|
取消
|
</button>
|
</div>
|
|
<!-- Visual Reference Overlay -->
|
<div class="doc-list-layout opacity-20 pointer-events-none absolute left-0 top-0">
|
<img src="assets/DocList.png" class="w-[594px] h-[486px]" />
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { defineComponent } from 'vue';
|
import { useDocListLogic } from './DocList.ts';
|
|
export default defineComponent({
|
name: 'DocListForm',
|
setup() {
|
const logic = useDocListLogic();
|
return { ...logic };
|
}
|
});
|
</script>
|
|
<style scoped>
|
/* Ensure standard Delphi font appearance where appropriate */
|
.doc-list-form {
|
user-select: none;
|
}
|
.doc-list-layout {
|
z-index: 1000;
|
}
|
</style>
|
