80 lines
1.7 KiB
Vue
80 lines
1.7 KiB
Vue
<script setup>
|
|
import {NDataTable} from "naive-ui";
|
|
import {computed, h, ref, watch} from "vue";
|
|
import IndexColumn from "./DataTableColumns/IndexColumn.vue";
|
|
|
|
const props = defineProps({
|
|
columns: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
data: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
loading: {
|
|
type: Boolean
|
|
},
|
|
})
|
|
|
|
const patients = ref([...props.data])
|
|
const loading = ref(false)
|
|
const tableColumns = computed(() => {
|
|
const baseColumns = [...props.columns]
|
|
|
|
const numericColumn = {
|
|
title: '',
|
|
key: 'index',
|
|
minWidth: 50,
|
|
maxWidth: 60,
|
|
width: 50,
|
|
resizable: false,
|
|
render: (row, i) => h(IndexColumn, { index: i + 1 })
|
|
}
|
|
|
|
baseColumns.unshift(numericColumn)
|
|
|
|
return baseColumns
|
|
})
|
|
|
|
const rowProps = (row) => {
|
|
const style = []
|
|
|
|
if (row.admitted_today) {
|
|
style.push('--n-merged-td-color: #047857')
|
|
} else if (row.nurse_changes?.length) {
|
|
style.push('--n-merged-td-color: rgba(217, 119, 6, 0.15)')
|
|
}
|
|
|
|
return {
|
|
style: style.join('; '),
|
|
title: row.nurse_changes?.length
|
|
? `Медсестра изменила: ${row.nurse_changes_labels.join(', ')}`
|
|
: undefined,
|
|
}
|
|
}
|
|
|
|
watch(() => props.data, (newData) => {
|
|
patients.value = newData
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<NDataTable :columns="tableColumns"
|
|
:data="patients"
|
|
table-layout="fixed"
|
|
max-height="234"
|
|
min-height="234"
|
|
:loading="loading"
|
|
size="small"
|
|
:row-props="rowProps"
|
|
/>
|
|
</template>
|
|
|
|
<style scoped>
|
|
:deep(.n-data-table-th),
|
|
:deep(.n-data-table-td) {
|
|
font-size: var(--n-font-size);
|
|
}
|
|
</style>
|