89 lines
2.8 KiB
Vue
89 lines
2.8 KiB
Vue
<script setup>
|
||
import {NStatistic, NRow, NCol, NCard, NButton, NTag, NDatePicker, NFlex, NSelect, NText, NH2} from "naive-ui";
|
||
import {computed, ref} from "vue";
|
||
import {format} from "date-fns";
|
||
import {useNow} from "@vueuse/core";
|
||
import {ru} from "date-fns/locale";
|
||
import {useAuthStore} from "../../../Stores/auth.js";
|
||
import {storeToRefs} from "pinia";
|
||
import {RiAddCircleLine} from 'vue-icons-plus/ri'
|
||
import {useReportStore} from "../../../Stores/report.js";
|
||
|
||
const props = defineProps({
|
||
mode: {
|
||
type: String,
|
||
default: 'fillable' // 'fillable', 'readonly'
|
||
},
|
||
isShowDepartmentSelect: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
})
|
||
|
||
const departments = [
|
||
{
|
||
label: 'Все отделения',
|
||
value: 0
|
||
}
|
||
]
|
||
const authStore = useAuthStore()
|
||
const reportStore = useReportStore()
|
||
const {user, availableDepartments} = storeToRefs(authStore)
|
||
const {reportInfo} = storeToRefs(reportStore)
|
||
|
||
const isFillableMode = computed(() => props.mode.toLowerCase() === 'fillable')
|
||
const isReadonlyMode = computed(() => props.mode.toLowerCase() === 'readonly')
|
||
|
||
const selectDepartment = ref(0)
|
||
|
||
const currentDate = computed(() => {
|
||
const formatted = format(useNow().value, 'PPPPpp', {
|
||
locale: ru
|
||
})
|
||
|
||
return formatted.charAt(0).toUpperCase() + formatted.slice(1)
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<NCard>
|
||
<NFlex vertical>
|
||
<NFlex align="center" justify="space-between">
|
||
<NH2 v-if="isFillableMode" class="mb-0!">
|
||
{{ currentDate }}
|
||
</NH2>
|
||
<NDatePicker v-if="isReadonlyMode" />
|
||
|
||
<NFlex align="center" :wrap="false">
|
||
<NTag v-if="isFillableMode" type="info" :bordered="false">
|
||
{{ authStore.userDepartment.name_full }}
|
||
</NTag>
|
||
<NSelect v-if="isReadonlyMode" v-model:value="selectDepartment" :options="departments" />
|
||
</NFlex>
|
||
</NFlex>
|
||
|
||
<NFlex justify="space-between" align="center" :wrap="false">
|
||
<NRow class="grow">
|
||
<NCol :span="4">
|
||
<NStatistic label="Коек" :value="reportStore.reportInfo?.department.beds" />
|
||
</NCol>
|
||
<NCol :span="5">
|
||
<NStatistic label="Загруженность" :value="`${reportStore.reportInfo?.department.percentLoadedBeds}%`" />
|
||
</NCol>
|
||
</NRow>
|
||
|
||
<NButton type="primary" secondary>
|
||
<template #icon>
|
||
<RiAddCircleLine />
|
||
</template>
|
||
Нежелательное событие
|
||
</NButton>
|
||
</NFlex>
|
||
</NFlex>
|
||
</NCard>
|
||
</template>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|