skytek_xinliang
76 lines
2.3 KiB
Vue
76 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import BaseFormSelect from '@/components/base/BaseFormSelect.vue'
|
|
import BaseFormTextField from '@/components/base/BaseFormTextField.vue'
|
|
import SectionFormPage from '@/components/sections/SectionFormPage.vue'
|
|
import { useSectionsDemoPage } from '@/composables/page-drivers/useSectionsDemoPage'
|
|
|
|
const { demoForm, handleFormBack, handleFormSubmit, pageModel, resetDemoForm } =
|
|
useSectionsDemoPage()
|
|
</script>
|
|
|
|
<template>
|
|
<SectionFormPage
|
|
reset-label="清除"
|
|
submit-label="送出"
|
|
:message="pageModel.formMessage"
|
|
title="SectionFormPage 報表申請"
|
|
@back="handleFormBack"
|
|
@reset="resetDemoForm"
|
|
@submit="handleFormSubmit"
|
|
>
|
|
<template #fields>
|
|
<v-row density="compact">
|
|
<v-col cols="12" md="6">
|
|
<BaseFormTextField v-model="demoForm.title" label="標題" />
|
|
</v-col>
|
|
<v-col cols="12" md="3">
|
|
<BaseFormSelect v-model="demoForm.owner" label="單位" :items="pageModel.ownerOptions" />
|
|
</v-col>
|
|
<v-col cols="12" md="3">
|
|
<BaseFormSelect
|
|
v-model="demoForm.category"
|
|
label="類型"
|
|
:items="pageModel.categoryOptions"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<BaseFormTextField v-model="demoForm.description" label="說明" />
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
|
|
<template #sections>
|
|
<v-card class="mb-2">
|
|
<v-card-title class="text-title-medium font-weight-bold">明細</v-card-title>
|
|
<v-card-text>
|
|
<v-table density="compact">
|
|
<thead>
|
|
<tr>
|
|
<th>欄位</th>
|
|
<th>值</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>單位</td>
|
|
<td>{{ demoForm.owner }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>類型</td>
|
|
<td>{{ demoForm.category }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</v-table>
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|
|
|
|
<template #notices>
|
|
<v-list class="bg-yellow-lighten-5" density="compact">
|
|
<v-list-item>送出前確認標題與單位。</v-list-item>
|
|
<v-list-item>表單狀態由 page driver 管理。</v-list-item>
|
|
</v-list>
|
|
</template>
|
|
</SectionFormPage>
|
|
</template>
|