Профиль хирургии

resources/js/Pages/Report/Components/OperationInfoModal.vue

@@ -0,0 +1,98 @@
+<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>