99 lines
3.4 KiB
Vue
99 lines
3.4 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({
|
|
historyId: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const show = defineModel('show')
|
|
const operations = ref(null)
|
|
const showInfoDrawer = ref(false)
|
|
const showedOperation = ref(null)
|
|
|
|
const onShowInfoDrawer = (operation) => {
|
|
showedOperation.value = {...operation}
|
|
showInfoDrawer.value = true
|
|
}
|
|
|
|
watch(() => props.historyId, (value) => {
|
|
console.log(value)
|
|
axios.get(`/api/mis/operations`, {
|
|
params: {
|
|
historyId: value
|
|
}
|
|
})
|
|
.then(response => {
|
|
operations.value = response.data
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<NModal v-model:show="show"
|
|
title="Операции"
|
|
:mask-closable="false"
|
|
class="max-w-xl overflow-clip min-h-[420px] max-h-[600px]"
|
|
preset="card"
|
|
id="modal-operation"
|
|
>
|
|
<div class="h-full flex flex-col gap-y-4">
|
|
<NThing v-for="operation in operations">
|
|
<template #header>
|
|
Операция №{{operation.num}}
|
|
</template>
|
|
<template #header-extra>
|
|
<NTag size="small" type="info" round :bordered="false">
|
|
<template #icon>
|
|
<TbClockCheck size="16" />
|
|
</template>
|
|
{{operation.duration}} мин.
|
|
</NTag>
|
|
</template>
|
|
<template #description>
|
|
<NSpace align="center" size="small">
|
|
<NTag type="success" round :bordered="false">
|
|
<template #icon>
|
|
<TbCalendar size="18" />
|
|
</template>
|
|
{{format(operation.startAt, 'dd.MM.yyyy')}}
|
|
</NTag>
|
|
<NTag type="success" round :bordered="false">
|
|
<template #icon>
|
|
<TbTag size="18" />
|
|
</template>
|
|
{{operation.service.ServiceMedicalCode}}
|
|
</NTag>
|
|
</NSpace>
|
|
</template>
|
|
{{operation.service.ServiceMedicalName}}
|
|
<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>
|
|
Операция №{{showedOperation.num}}
|
|
</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>
|