skytek_xinliang
56 lines
1.5 KiB
Vue
56 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
title: string
|
|
error?: string
|
|
loading?: boolean
|
|
message?: string
|
|
resetLabel?: string
|
|
submitLabel?: string
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
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-row>
|
|
</v-card>
|
|
</v-container>
|
|
</v-form>
|
|
</template>
|