87 lines
2.0 KiB
Vue
87 lines
2.0 KiB
Vue
<script setup>
|
|
import {NDataTable, NSpace, NInput, NButton, NFlex} from "naive-ui";
|
|
import {TbSearch} from 'vue-icons-plus/tb'
|
|
import {computed, h, ref} 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 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 searchArg = ref(null)
|
|
|
|
const findPatient = (arg) => {
|
|
patients.value = patients.value.find(itm => itm.full_name === arg)
|
|
}
|
|
|
|
const rowProps = (row) => {
|
|
const style = []
|
|
|
|
if (row.admitted_today) {
|
|
style.push('--n-merged-td-color: #047857')
|
|
}
|
|
|
|
return {
|
|
style: style,
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<NSpace vertical>
|
|
<NFlex :wrap="false">
|
|
<NInput v-model:value="searchArg" placeholder="Поиск пациента" @input="value => findPatient(value)" />
|
|
<NButton secondary @click="findPatient(searchArg)">
|
|
<template #icon>
|
|
<TbSearch />
|
|
</template>
|
|
Найти
|
|
</NButton>
|
|
</NFlex>
|
|
<NDataTable :columns="tableColumns"
|
|
:data="patients"
|
|
table-layout="fixed"
|
|
max-height="280"
|
|
min-height="280"
|
|
:loading="loading"
|
|
size="small"
|
|
:row-props="rowProps"
|
|
/>
|
|
</NSpace>
|
|
</template>
|
|
|
|
<style scoped>
|
|
:deep(.n-data-table-th),
|
|
:deep(.n-data-table-td) {
|
|
font-size: var(--n-font-size);
|
|
}
|
|
</style>
|