Работа над журналом для ст. мед сестер

resources/js/Pages/Nurse/Report/Index.vue

@@ -0,0 +1,168 @@
+<script setup>
+import AppLayout from "../../../Layouts/AppLayout.vue";
+import {NFlex, NTag, NDataTable, NButton, NTabs, NTabPane} from 'naive-ui'
+import AppContainer from "../../../Components/AppContainer.vue";
+import AppPanel from "../../../Components/AppPanel.vue";
+import DatePickerQuery from "../../../Components/DatePickerQuery.vue";
+import UrgencyBadge from "../../../Components/UrgencyBadge.vue";
+import {computed, h, ref, shallowRef} from "vue"
+import {TbArrowMoveRight, TbArrowMoveUp, TbEdit, TbCirclePlus, TbPencil} from 'vue-icons-plus/tb'
+import {useAuthStore} from "../../../Stores/auth.js";
+import AddMedicalHistoryModal from "../Components/AddMedicalHistoryModal.vue";
+import EditMedicalHistoryModal from "../Components/EditMedicalHistoryModal.vue";
+
+const props = defineProps({
+    inDepartmentHistories: {
+        type: Array,
+        default: []
+    },
+    recipientHistories: {
+        type: Array,
+        default: []
+    },
+    dischargedHistories: {
+        type: Array,
+        default: []
+    },
+    deceasedHistories: {
+        type: Array,
+        default: []
+    },
+    transferredHistories: {
+        type: Array,
+        default: []
+    },
+    dates: {
+        type: Array,
+        default: []
+    }
+})
+
+const showAddMedicalHistoryModal = shallowRef(false)
+const showEditMedicalHistoryModal = shallowRef(false)
+const editHistoryId = ref(null)
+const authStore = useAuthStore()
+const userDepartment = authStore.userDepartment
+
+const columns = [
+    {
+        title: 'ФИО',
+        key: 'full_name',
+        minWidth: 280,
+        maxWidth: 400,
+        resizable: true
+    },
+    {
+        title: 'Дата поступления',
+        key: 'latest_migration.ingoing_date',
+        minWidth: 180,
+        maxWidth: 180,
+        width: 180,
+        resizable: false
+    },
+    {
+        title: 'Срочность',
+        key: 'urgency_id',
+        render: (row) => {
+            return h(UrgencyBadge, {urgencyId: row.urgency_id})
+        }
+    },
+    {
+        title: '',
+        key: 'actions',
+        align: 'end',
+        render: (row) => {
+            return h(
+                NButton, { size: 'tiny', type: 'default', secondary: true, onClick: () => onClickEditButton(row.id) },
+                { default: () => 'Редактировать', icon: () => h(TbPencil, { size: '18px' }) })
+        }
+    }
+]
+
+const onClickEditButton = (historyId) => {
+    showEditMedicalHistoryModal.value = true
+    editHistoryId.value = historyId
+}
+
+const formattedLabel = (word, count) => {
+    return `${word} (${count})`
+}
+</script>
+
+<template>
+    <AppLayout>
+        <AppContainer>
+            <AppPanel>
+                <NFlex justify="space-between" align="center">
+                    <NTag type="info" :bordered="false">
+                        {{ userDepartment.name_full }}
+                    </NTag>
+                    <DatePickerQuery :date="dates" />
+                </NFlex>
+            </AppPanel>
+            <AppPanel header="Пациенты в отделении" header-include-body>
+                <template #header-extra>
+                    <NButton secondary @click="showAddMedicalHistoryModal = true">
+                        <template #icon>
+                            <TbCirclePlus />
+                        </template>
+                        Добавить пациента
+                    </NButton>
+                </template>
+                <NTabs type="line">
+                    <NTabPane name="all"
+                              :tab="formattedLabel('В отделении', inDepartmentHistories.length)"
+                    >
+                        <NDataTable :columns="columns"
+                                    :data="inDepartmentHistories"
+                                    table-layout="fixed"
+                                    max-height="calc(100vh - 375px)"
+                                    min-height="calc(100vh - 375px)"
+                        />
+                    </NTabPane>
+                    <NTabPane name="income" :tab="formattedLabel('Поступившие', recipientHistories.length)">
+                        <NDataTable :columns="columns"
+                                    :data="recipientHistories"
+                                    table-layout="fixed"
+                                    max-height="calc(100vh - 375px)"
+                                    min-height="calc(100vh - 375px)"
+                        />
+                    </NTabPane>
+                    <NTabPane name="outcome" :tab="formattedLabel('Выписанные', dischargedHistories.length)">
+                        <NDataTable :columns="columns"
+                                    :data="dischargedHistories"
+                                    table-layout="fixed"
+                                    max-height="calc(100vh - 375px)"
+                                    min-height="calc(100vh - 375px)"
+                        />
+                    </NTabPane>
+                    <NTabPane name="dead" :tab="formattedLabel('Умершие', deceasedHistories.length)">
+                        <NDataTable :columns="columns"
+                                    :data="deceasedHistories"
+                                    table-layout="fixed"
+                                    max-height="calc(100vh - 375px)"
+                                    min-height="calc(100vh - 375px)"
+                        />
+                    </NTabPane>
+                    <NTabPane name="transfer" :tab="formattedLabel('Переведенные', transferredHistories.length)">
+                        <NDataTable :columns="columns"
+                                    :data="transferredHistories"
+                                    table-layout="fixed"
+                                    max-height="calc(100vh - 375px)"
+                                    min-height="calc(100vh - 375px)"
+                        />
+                    </NTabPane>
+                </NTabs>
+            </AppPanel>
+        </AppContainer>
+        <AddMedicalHistoryModal v-model:show="showAddMedicalHistoryModal" />
+        <EditMedicalHistoryModal v-model:show="showEditMedicalHistoryModal" :history-id="editHistoryId" />
+    </AppLayout>
+</template>
+
+<style scoped>
+:deep(.n-data-table-th),
+:deep(.n-data-table-td) {
+    font-size: var(--n-font-size);
+}
+</style>