86 lines
3.1 KiB
Vue
86 lines
3.1 KiB
Vue
<script setup>
|
|
import {NModal, NThing, NTag, NButton, NSpace, NDrawer, NDrawerContent, NInput} from "naive-ui";
|
|
import {ref, watch} from "vue";
|
|
import {TbClockCheck, TbCalendar, TbTag} from 'vue-icons-plus/tb'
|
|
import {format} from "date-fns";
|
|
import AppPanel from "../../../Components/AppPanel.vue";
|
|
|
|
const props = defineProps({
|
|
operations: Array
|
|
})
|
|
|
|
const show = defineModel('show')
|
|
const showInfoDrawer = ref(false)
|
|
const showedOperation = ref(null)
|
|
|
|
const onShowInfoDrawer = (operation) => {
|
|
showedOperation.value = {...operation}
|
|
showInfoDrawer.value = true
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<NModal v-model:show="show"
|
|
title="Операции"
|
|
:mask-closable="false"
|
|
:segmented="{ content: true }"
|
|
class="max-w-xl overflow-clip h-[400px]"
|
|
draggable
|
|
content-scrollable
|
|
preset="card"
|
|
id="modal-operation"
|
|
>
|
|
<div class="space-y-4">
|
|
<NThing v-for="operation in operations">
|
|
<template #header>
|
|
Операция №
|
|
</template>
|
|
<template #header-extra>
|
|
<NTag size="small" type="info" round :bordered="false">
|
|
<template #icon>
|
|
<TbClockCheck size="16" />
|
|
</template>
|
|
мин.
|
|
</NTag>
|
|
</template>
|
|
<template #description>
|
|
<NSpace align="center" size="small">
|
|
<NTag type="success" round :bordered="false">
|
|
<template #icon>
|
|
<TbCalendar size="18" />
|
|
</template>
|
|
{{format(operation.start_date, 'dd.MM.yyyy')}}
|
|
</NTag>
|
|
<NTag type="success" round :bordered="false">
|
|
<template #icon>
|
|
<TbTag size="18" />
|
|
</template>
|
|
{{operation.code_service}}
|
|
</NTag>
|
|
</NSpace>
|
|
</template>
|
|
{{operation.name_service}}
|
|
<template #action>
|
|
<NButton type="primary" size="small" @click="onShowInfoDrawer(operation)">
|
|
Просмотреть
|
|
</NButton>
|
|
</template>
|
|
</NThing>
|
|
</div>
|
|
<NDrawer v-model:show="showInfoDrawer" width="100%" height="100%" to="#modal-operation" placement="bottom">
|
|
<NDrawerContent closable>
|
|
<template #header>
|
|
Операция №
|
|
</template>
|
|
<AppPanel no-padding header="Описание" class="h-full!">
|
|
<NInput type="textarea" :resizable="false" class="h-full!" readonly v-model:value="showedOperation.description" />
|
|
</AppPanel>
|
|
</NDrawerContent>
|
|
</NDrawer>
|
|
</NModal>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|