skytek_xinliang
ec62fcee51
Add a dedicated SectionFormPage demo component and view to showcase form fields, detail sections, notices, and page-driver-managed state. Remove the obsolete SectionSearchPanel demo route and menu entry, and add spacing to SectionFormPage cards for improved layout.feat(sections): add SectionFormPage demo Add a dedicated SectionFormPage demo component and view to showcase form fields, detail sections, notices, and page-driver-managed state. Remove the obsolete SectionSearchPanel demo route and menu entry, and add spacing to SectionFormPage cards for improved layout.
59 lines
1.6 KiB
Vue
59 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
title: string
|
|
backLabel?: string
|
|
error?: string
|
|
loading?: boolean
|
|
message?: string
|
|
resetLabel?: string
|
|
submitLabel?: string
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
backLabel: '返回',
|
|
resetLabel: '清除',
|
|
submitLabel: '存檔',
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
back: []
|
|
reset: []
|
|
submit: []
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<v-form @submit.prevent="emit('submit')">
|
|
<v-container fluid class="pt-2 px-1">
|
|
<v-card class="mb-2">
|
|
<v-card-title class="bg-primary text-title-large text-center py-2">
|
|
{{ title }}
|
|
</v-card-title>
|
|
<v-card-text class="pa-4">
|
|
<v-alert v-if="error" class="mb-4" type="error" variant="tonal">{{ error }}</v-alert>
|
|
<v-alert v-if="message" class="mb-4" type="success" variant="tonal">
|
|
{{ message }}
|
|
</v-alert>
|
|
<slot name="fields" />
|
|
</v-card-text>
|
|
</v-card>
|
|
|
|
<slot name="sections" />
|
|
|
|
<v-card>
|
|
<v-card-title class="text-title-medium font-weight-bold">配合事項</v-card-title>
|
|
<v-card-text>
|
|
<slot name="notices" />
|
|
</v-card-text>
|
|
<v-row justify="center" class="pa-4 ga-2">
|
|
<v-btn type="submit" variant="elevated" color="primary" :loading="loading">
|
|
{{ submitLabel }}
|
|
</v-btn>
|
|
<v-btn type="button" variant="tonal" @click="emit('reset')">{{ resetLabel }}</v-btn>
|
|
<v-btn type="button" variant="text" @click="emit('back')">{{ backLabel }}</v-btn>
|
|
</v-row>
|
|
</v-card>
|
|
</v-container>
|
|
</v-form>
|
|
</template>
|