skytek_xinliang
66 lines
1.5 KiB
Vue
66 lines
1.5 KiB
Vue
<template>
|
|
<v-card border class="d-flex flex-column h-100 rounded-0" :class="cardClass" flat :width="width">
|
|
<v-card-title class="dialog-title d-flex align-center ga-2">
|
|
<div>
|
|
<div class="text-h6">{{ dialogTitle }}</div>
|
|
<div v-if="dialogSubtitle" class="text-body-2 text-medium-emphasis">
|
|
{{ dialogSubtitle }}
|
|
</div>
|
|
</div>
|
|
<v-spacer />
|
|
<v-chip v-if="isViewMode" color="info" size="small" variant="tonal">檢視中</v-chip>
|
|
<v-chip v-else-if="isEditMode" color="primary" size="small" variant="tonal">編輯中</v-chip>
|
|
<v-chip v-else color="secondary" size="small" variant="tonal">新增中</v-chip>
|
|
</v-card-title>
|
|
|
|
<v-card-subtitle class="dialog-toolbar d-flex align-center py-2 ga-2">
|
|
<slot name="toolbar" />
|
|
</v-card-subtitle>
|
|
|
|
<v-divider />
|
|
|
|
<v-card-text :class="contentClass">
|
|
<slot name="content" />
|
|
</v-card-text>
|
|
|
|
<v-divider />
|
|
|
|
<v-card-actions class="dialog-actions">
|
|
<slot name="actions" />
|
|
</v-card-actions>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps({
|
|
dialogTitle: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
dialogSubtitle: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
isViewMode: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
isEditMode: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
width: {
|
|
type: [String, Number],
|
|
default: '100%',
|
|
},
|
|
cardClass: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
contentClass: {
|
|
type: String,
|
|
default: 'pa-2 flex-grow-1 overflow-y-auto',
|
|
},
|
|
})
|
|
</script>
|