61 lines
2.0 KiB
Vue
61 lines
2.0 KiB
Vue
<script setup>
|
|
import { ref, watch } from 'vue'
|
|
import { NModal, NForm, NFormItem, NInput, NButton, NFlex } from 'naive-ui'
|
|
|
|
const props = defineProps({
|
|
show: { type: Boolean, default: false },
|
|
name: { type: String, default: '' },
|
|
description: { type: String, default: '' },
|
|
})
|
|
|
|
const emit = defineEmits(['update:show', 'save'])
|
|
|
|
const localName = ref(props.name)
|
|
const localDescription = ref(props.description)
|
|
|
|
watch(() => props.show, (value) => {
|
|
if (value) {
|
|
localName.value = props.name
|
|
localDescription.value = props.description
|
|
}
|
|
})
|
|
|
|
const save = () => {
|
|
if (!localName.value.trim()) return
|
|
emit('save', { name: localName.value.trim(), description: localDescription.value.trim() })
|
|
emit('update:show', false)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<NModal
|
|
:show="show"
|
|
preset="card"
|
|
title="Редактирование отчёта"
|
|
style="width: 460px; max-width: 94vw;"
|
|
@update:show="emit('update:show', $event)"
|
|
>
|
|
<NForm>
|
|
<NFormItem label="Название">
|
|
<NInput v-model:value="localName" maxlength="50" show-count placeholder="Название отчёта" />
|
|
</NFormItem>
|
|
<NFormItem label="Описание (необязательно)">
|
|
<NInput
|
|
v-model:value="localDescription"
|
|
type="textarea"
|
|
maxlength="200"
|
|
show-count
|
|
placeholder="Введите описание отчёта"
|
|
:autosize="{ minRows: 2, maxRows: 4 }"
|
|
/>
|
|
</NFormItem>
|
|
</NForm>
|
|
<template #footer>
|
|
<NFlex justify="end" :size="8">
|
|
<NButton @click="emit('update:show', false)">Отменить</NButton>
|
|
<NButton type="primary" :disabled="!localName.trim()" @click="save">Сохранить</NButton>
|
|
</NFlex>
|
|
</template>
|
|
</NModal>
|
|
</template>
|