skytek_xinliang
49 lines
1.7 KiB
Vue
49 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import BaseFormSelect from '@/components/base/BaseFormSelect.vue'
|
|
import BaseFormTextField from '@/components/base/BaseFormTextField.vue'
|
|
import SectionQueryPage from '@/components/sections/SectionQueryPage.vue'
|
|
import { useSectionsDemoPage } from '@/composables/page-drivers/useSectionsDemoPage'
|
|
|
|
const { handleQueryBack, handleQuerySearch, pageModel, queryFilters } = useSectionsDemoPage()
|
|
</script>
|
|
|
|
<template>
|
|
<SectionQueryPage title="查詢頁DEMO" @back="handleQueryBack" @search="handleQuerySearch">
|
|
<template #filters>
|
|
<v-col cols="12" md="4">
|
|
<BaseFormTextField v-model="queryFilters.keyword" label="關鍵字" />
|
|
</v-col>
|
|
<v-col cols="12" md="4">
|
|
<BaseFormSelect v-model="queryFilters.owner" label="單位" :items="pageModel.ownerOptions" />
|
|
</v-col>
|
|
</template>
|
|
|
|
<template #results>
|
|
<v-alert v-if="pageModel.queryMessage" class="mb-3" type="success" variant="tonal">
|
|
{{ pageModel.queryMessage }}
|
|
</v-alert>
|
|
<v-table density="compact">
|
|
<thead class="bg-primary">
|
|
<tr>
|
|
<th>名稱</th>
|
|
<th>單位</th>
|
|
<th>狀態</th>
|
|
<th>更新日</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-if="pageModel.reports.length === 0">
|
|
<td class="text-center" colspan="4">尚無查詢結果</td>
|
|
</tr>
|
|
<tr v-for="row in pageModel.reports" :key="row.id">
|
|
<td>{{ row.title }}</td>
|
|
<td>{{ row.owner }}</td>
|
|
<td>{{ row.status }}</td>
|
|
<td>{{ row.updatedAt }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</v-table>
|
|
</template>
|
|
</SectionQueryPage>
|
|
</template>
|