Профиль хирургии
This commit is contained in:
brusnitsyn
@@ -1,20 +1,25 @@
|
||||
<script setup>
|
||||
import {NIcon, NText, NDataTable, NButton, NBadge, NTabs, NTabPane} from "naive-ui";
|
||||
import {NIcon, NText, NDataTable, NButton, NBadge, NTabs, NTabPane, NPopover, NEllipsis, NTooltip} from "naive-ui";
|
||||
import {useReportStore} from "../../../Stores/report.js";
|
||||
import {computed, h, onMounted, ref, watch} from "vue";
|
||||
import { VueDraggableNext } from 'vue-draggable-next'
|
||||
import {storeToRefs} from "pinia";
|
||||
import {TbGripVertical, TbEye} from "vue-icons-plus/tb";
|
||||
import {TbGripVertical, TbEye, TbExternalLink} from "vue-icons-plus/tb";
|
||||
import MoveModalComment from "./MoveModalComment.vue";
|
||||
import OperationInfoModal from "./OperationInfoModal.vue";
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'fillable' // 'fillable', 'readonly'
|
||||
},
|
||||
keys: {
|
||||
type: Array,
|
||||
default: ['num', 'fullname', 'age', 'birth_date', 'mkb.ds']
|
||||
default: ['num', 'fullname', 'age', 'birth_date']
|
||||
},
|
||||
status: {
|
||||
type: String,
|
||||
@@ -28,6 +33,10 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isDraggableDrop: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
accentIds: {
|
||||
type: Array,
|
||||
default: []
|
||||
@@ -48,9 +57,15 @@ const baseColumns = reportStore.getColumnsByKey(props.keys)
|
||||
const data = ref([])
|
||||
const isLoading = ref(true)
|
||||
const showMoveModal = ref(false)
|
||||
const showOperationInfoModal = ref(false)
|
||||
const currentHistory = ref(null)
|
||||
const latestDropItem = ref(null)
|
||||
const activePatient = ref(null)
|
||||
|
||||
const hasDisabledEdit = computed(() => {
|
||||
return reportStore.reportInfo.report.isActiveSendButton === false
|
||||
})
|
||||
|
||||
// Добавляем drag колонку если режим fillable
|
||||
const columns = computed(() => {
|
||||
// if (!isFillableMode.value) return baseColumns
|
||||
@@ -59,23 +74,29 @@ const columns = computed(() => {
|
||||
|
||||
const dragColumn = {
|
||||
title: '',
|
||||
key: 'drag',
|
||||
key: 'goToMis',
|
||||
width: 40,
|
||||
render: (row) => h(
|
||||
'div',
|
||||
NTooltip,
|
||||
{},
|
||||
{
|
||||
style: {
|
||||
cursor: 'grab',
|
||||
textAlign: 'center',
|
||||
userSelect: 'none'
|
||||
}
|
||||
},
|
||||
[
|
||||
h(NIcon, {
|
||||
depth: '2',
|
||||
component: TbGripVertical
|
||||
}, [])
|
||||
]
|
||||
trigger: () => h('div',
|
||||
{
|
||||
style: {
|
||||
cursor: 'hand',
|
||||
textAlign: 'center',
|
||||
userSelect: 'none'
|
||||
},
|
||||
onClick: () => {
|
||||
window.open(`https://stationar.amurzdrav.ru/prod/statist/edit/card/${row.id}`, '_blank')
|
||||
}
|
||||
},
|
||||
[
|
||||
h(NIcon, { depth: 2 }, h(TbExternalLink))
|
||||
]
|
||||
),
|
||||
default: () => 'Перейти в карту'
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
@@ -86,11 +107,15 @@ const columns = computed(() => {
|
||||
NButton,
|
||||
{
|
||||
text: true,
|
||||
disabled: hasDisabledEdit.value,
|
||||
onClick: () => {
|
||||
axios.post('/api/report/observation/remove', {
|
||||
id: row.id
|
||||
}).then(async () => {
|
||||
await fetchPatients()
|
||||
const indexRemove = patientsData.value['observation'].findIndex(itm => itm.id === row.id)
|
||||
if (indexRemove !== -1) {
|
||||
patientsData.value['observation'].splice(indexRemove, 1)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
@@ -137,8 +162,38 @@ const columns = computed(() => {
|
||||
newColumns.push(fillableColumn)
|
||||
}
|
||||
|
||||
if (props.isDraggable) newColumns.push(dragColumn)
|
||||
newColumns.push(dragColumn)
|
||||
newColumns.push(...baseColumns)
|
||||
newColumns.push({
|
||||
title: 'Диагноз',
|
||||
key: 'ds',
|
||||
render: (row) => {
|
||||
if (row.mkb.ds !== null && row.mkb.name !== null) {
|
||||
return h(NPopover, {
|
||||
placement: 'top',
|
||||
arrow: false
|
||||
}, {
|
||||
trigger: h(
|
||||
'div',
|
||||
{
|
||||
class: 'cursor-help w-full',
|
||||
style: 'padding: 8px;'
|
||||
},
|
||||
row.mkb.ds
|
||||
),
|
||||
default: row.mkb.name
|
||||
})
|
||||
} else {
|
||||
return row.mkb.ds
|
||||
}
|
||||
},
|
||||
cellProps: (rowData, rowIndex) => {
|
||||
const styles = ['--n-td-padding: 0;']
|
||||
return {
|
||||
'style': styles
|
||||
}
|
||||
}
|
||||
})
|
||||
if (props.isRemovable) newColumns.push(removeColumn)
|
||||
|
||||
if (props.status === 'emergency' || props.status === 'plan') {
|
||||
@@ -147,16 +202,32 @@ const columns = computed(() => {
|
||||
key: 'operations',
|
||||
render: (row) => row.operations?.length ?
|
||||
h(
|
||||
NText,
|
||||
{},
|
||||
[
|
||||
row.operations.map(itm => {
|
||||
return `${itm.code}; `
|
||||
})
|
||||
]
|
||||
) : h('div', {}, '-'),
|
||||
ellipsis: {
|
||||
tooltip: true
|
||||
NPopover,
|
||||
{
|
||||
placement: 'top',
|
||||
arrow: false
|
||||
},
|
||||
{
|
||||
trigger: () => h(
|
||||
'div',
|
||||
{
|
||||
class: 'underline decoration-dashed cursor-pointer',
|
||||
style: 'padding: 8px;',
|
||||
onClick: () => {
|
||||
currentHistory.value = row.id
|
||||
showOperationInfoModal.value = true
|
||||
},
|
||||
},
|
||||
h(NEllipsis, {tooltip: false}, row.operations.map(itm => `${itm.code}; `).join(''))
|
||||
),
|
||||
default: () => row.operations.map(itm =>`${itm.name}; `).join(''),
|
||||
}
|
||||
) : h('div', {style: 'padding: 8px;',}, '-'),
|
||||
cellProps: (rowData, rowIndex) => {
|
||||
const styles = ['--n-td-padding: 0;']
|
||||
return {
|
||||
'style': styles
|
||||
}
|
||||
}
|
||||
}
|
||||
newColumns.push(operationColumn)
|
||||
@@ -176,7 +247,19 @@ const columns = computed(() => {
|
||||
return newColumns
|
||||
})
|
||||
|
||||
const isCursorOverTable = (e) => {
|
||||
const rect = tableRef.value.$el.getBoundingClientRect()
|
||||
return (
|
||||
e.clientX >= rect.left &&
|
||||
e.clientX <= rect.right &&
|
||||
e.clientY >= rect.top &&
|
||||
e.clientY <= rect.bottom
|
||||
)
|
||||
}
|
||||
|
||||
const handleDragStart = (e, row) => {
|
||||
if (hasDisabledEdit.value) return
|
||||
|
||||
// Устанавливаем данные о перетаскиваемом элементе
|
||||
e.dataTransfer.setData('application/json', JSON.stringify({
|
||||
row: row,
|
||||
@@ -186,6 +269,9 @@ const handleDragStart = (e, row) => {
|
||||
|
||||
const rowElement = e.target
|
||||
|
||||
// Устанавливаем флаг перетаскивания в store
|
||||
reportStore.isDragActive = true
|
||||
|
||||
// Эмитим событие для родителя
|
||||
emit('item-dragged', { row, fromStatus: props.status })
|
||||
|
||||
@@ -194,17 +280,33 @@ const handleDragStart = (e, row) => {
|
||||
}
|
||||
|
||||
const handleDragEnd = (e) => {
|
||||
if (hasDisabledEdit.value) return
|
||||
|
||||
// Устанавливаем флаг перетаскивания в store
|
||||
reportStore.isDragActive = false
|
||||
|
||||
if (e.target) {
|
||||
e.target.classList.remove('dragging')
|
||||
}
|
||||
}
|
||||
|
||||
const handleDragOver = (e) => {
|
||||
if (hasDisabledEdit.value) return
|
||||
|
||||
// console.log(e)
|
||||
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
const handleDrop = (e) => {
|
||||
e.preventDefault()
|
||||
if (hasDisabledEdit.value) return
|
||||
if (props.isDraggableDrop === false) return
|
||||
|
||||
// Проверяем, действительно ли курсор над таблицей
|
||||
if (!isCursorOverTable(e)) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const dragData = JSON.parse(e.dataTransfer.getData('application/json'))
|
||||
@@ -258,15 +360,15 @@ function rowProps(row) {
|
||||
handleDragStart(e, row)
|
||||
},
|
||||
onDragend: (e) => {
|
||||
if (!props.isDraggable) return
|
||||
if (!props.isDraggableDrop) return
|
||||
handleDragEnd(e)
|
||||
},
|
||||
onDragover: (e) => {
|
||||
if (!props.isDraggable) return
|
||||
if (!props.isDraggableDrop) return
|
||||
handleDragOver(e)
|
||||
},
|
||||
onDrop: (e) => {
|
||||
if (!props.isDraggable) return
|
||||
if (!props.isDraggableDrop) return
|
||||
handleDrop(e)
|
||||
}
|
||||
}
|
||||
@@ -278,6 +380,7 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<NDataTable :columns="columns"
|
||||
ref="tableRef"
|
||||
:data="patientsData[status]"
|
||||
@@ -293,6 +396,8 @@ onMounted(async () => {
|
||||
</NDataTable>
|
||||
|
||||
<MoveModalComment v-model:show="showMoveModal" :patient-id="latestDropItem?.id" />
|
||||
<OperationInfoModal v-model:show="showOperationInfoModal" :history-id="currentHistory" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user