版本更新
This commit is contained in:
Zhang.WH
@@ -0,0 +1,300 @@
|
||||
<!--
|
||||
* @Author: sjjh
|
||||
* @Date: 2025-04-16 20:54:48
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="medicalOrderManagement-container">
|
||||
<div class="medicalOrderManagement-operate">
|
||||
<el-space :size="4">
|
||||
<el-select v-model="searchForm.patientStatus" placeholder="执行状态" style="width: 100px">
|
||||
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<el-select v-model="searchForm.selectedType" placeholder="医嘱类型" style="width: 100px">
|
||||
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<el-select v-model="searchForm.executionType" placeholder="执行单类型" style="width: 100px">
|
||||
<el-option v-for="item in executionTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<el-input v-model="searchForm.searchVal" style="width: 100px" placeholder="医嘱名称" />
|
||||
<!-- 增加预计执行时间 时间范围筛选 -->
|
||||
<el-date-picker v-model="searchForm.timeRange" type="daterange" range-separator="至" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期" style="width: 200px" />
|
||||
<el-button type="primary">查询</el-button>
|
||||
<el-button type="danger">退回</el-button>
|
||||
<el-button type="primary">通过校对</el-button>
|
||||
</el-space>
|
||||
<el-space :size="4">
|
||||
|
||||
</el-space>
|
||||
</div>
|
||||
<div class="medicalOrderManagement-table">
|
||||
<el-table :data="medicalOrderManagementData" row-key="id" style="width: 100%; height: 100%" border
|
||||
:span-method="arraySpanMethod">
|
||||
<el-table-column type="selection" />
|
||||
<el-table-column label="类型" prop="name">
|
||||
<template #default="{ row }">
|
||||
<span v-if="!row.children">长期/西药</span>
|
||||
<template v-else>
|
||||
{{ row.name }} 11 床【000000001】 林俊杰 女/24 重 1级 自费 主诊断 医生：医生甲 预交金：1990.3
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="医嘱内容" prop="content">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.children">{{ row.content }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="开始终止" prop="gender">
|
||||
<template #default="{ row }">
|
||||
<div v-if="!row.children">
|
||||
<div> 05/04 07:00 </div>
|
||||
<div> 05/25 07:00 </div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="补费绑定" prop="gender">
|
||||
<template #default="{ row }">
|
||||
<el-select v-model="row.reimbursementBinding" placeholder="请选择" style="width: 100%">
|
||||
<el-option v-for="item in reimbursementOptions" :key="item.value" :label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="执行科室" prop="gender">
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column label="签发时间" prop="gender">
|
||||
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onBeforeMount, onMounted, reactive, ref } from 'vue'
|
||||
// const { proxy } = getCurrentInstance()
|
||||
// const emits = defineEmits([])
|
||||
// const props = defineProps({})
|
||||
const state = reactive({})
|
||||
onBeforeMount(() => { })
|
||||
onMounted(() => { })
|
||||
defineExpose({ state })
|
||||
const medicalOrderManagementData = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: '张三',
|
||||
age: 20,
|
||||
gender: '男',
|
||||
|
||||
children: [
|
||||
{
|
||||
name: '',
|
||||
age: 10,
|
||||
gender: '男',
|
||||
content: '维生素B12注射液【1ml：0.5mg*1】 ',
|
||||
dates: [{
|
||||
date: '05/04',
|
||||
times: [{
|
||||
time: '08:00',
|
||||
nurse: '刘护士',
|
||||
checked: false
|
||||
}, {
|
||||
time: '12:00',
|
||||
nurse: '刘护士',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
date: '05/05',
|
||||
times: [{
|
||||
time: '08:00',
|
||||
nurse: '刘护士',
|
||||
checked: false
|
||||
}, {
|
||||
time: '12:00',
|
||||
nurse: '刘护士',
|
||||
checked: false
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
name: '',
|
||||
age: 10,
|
||||
gender: '男',
|
||||
content: '维生素B12注射液【1ml：0.5mg*1】 ',
|
||||
dates: [{
|
||||
date: '05/04',
|
||||
times: [{
|
||||
time: '08:00',
|
||||
nurse: '刘护士',
|
||||
checked: false
|
||||
}, {
|
||||
time: '12:00',
|
||||
nurse: '刘护士',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
date: '05/05',
|
||||
times: [{
|
||||
time: '08:00',
|
||||
nurse: '刘护士',
|
||||
checked: false
|
||||
}, {
|
||||
time: '12:00',
|
||||
nurse: '刘护士',
|
||||
checked: false
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '李四',
|
||||
age: 20,
|
||||
gender: '男',
|
||||
|
||||
children: [
|
||||
{
|
||||
name: '',
|
||||
age: 10,
|
||||
gender: '男',
|
||||
content: '维生素B12注射液【1ml：0.5mg*1】 ',
|
||||
dates: [{
|
||||
date: '05/04',
|
||||
times: [{
|
||||
time: '08:00',
|
||||
nurse: '刘护士',
|
||||
checked: false
|
||||
}, {
|
||||
time: '12:00',
|
||||
nurse: '刘护士',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
date: '05/05',
|
||||
times: [{
|
||||
time: '08:00',
|
||||
nurse: '刘护士',
|
||||
checked: false
|
||||
}, {
|
||||
time: '12:00',
|
||||
nurse: '刘护士',
|
||||
checked: false
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
name: '',
|
||||
age: 10,
|
||||
gender: '男',
|
||||
content: '维生素B12注射液【1ml：0.5mg*1】 ',
|
||||
dates: [{
|
||||
date: '05/04',
|
||||
times: [{
|
||||
time: '08:00',
|
||||
nurse: '刘护士',
|
||||
checked: false
|
||||
}, {
|
||||
time: '12:00',
|
||||
nurse: '刘护士',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
date: '05/05',
|
||||
times: [{
|
||||
time: '08:00',
|
||||
nurse: '刘护士',
|
||||
checked: false
|
||||
}, {
|
||||
time: '12:00',
|
||||
nurse: '刘护士',
|
||||
checked: false
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}
|
||||
])
|
||||
|
||||
const reimbursementOptions = [
|
||||
{ value: '首瓶8.5', label: '首瓶8.5' },
|
||||
{ value: '未绑定', label: '未绑定' },
|
||||
{ value: '待绑定', label: '待绑定' }
|
||||
]
|
||||
const arraySpanMethod = ({
|
||||
row,
|
||||
column,
|
||||
rowIndex,
|
||||
columnIndex
|
||||
}: any) => {
|
||||
console.log(row, column, rowIndex, columnIndex);
|
||||
// 如果是父级行
|
||||
if (row.children && row.children.length > 0) {
|
||||
if (columnIndex === 0) {
|
||||
return [1, 1]
|
||||
}
|
||||
// 如果是患者列
|
||||
if (columnIndex === 1) {
|
||||
return [1, 6]
|
||||
} else {
|
||||
return [1, 0]
|
||||
}
|
||||
}
|
||||
// 如果是子级行，显示其他列
|
||||
if (!row.children || row.children.length == 0) {
|
||||
return [1, 1]
|
||||
}
|
||||
// 如果是父级行，隐藏其他列
|
||||
return [1, 1]
|
||||
}
|
||||
const statusOptions = [
|
||||
{ value: '全部', label: '全部' },
|
||||
{ value: '药品', label: '药品' },
|
||||
{ value: '本院区', label: '本院区' },
|
||||
{ value: '他科', label: '他科' },
|
||||
{ value: '床头卡', label: '床头卡' }
|
||||
]
|
||||
const typeOptions = [
|
||||
{ value: '全部', label: '全部' },
|
||||
{ value: '长期', label: '长期' },
|
||||
{ value: '临时', label: '临时' }
|
||||
]
|
||||
const executionTypeOptions = [
|
||||
{ value: '未交对', label: '未交对' },
|
||||
{ value: '已校对', label: '已校对' },
|
||||
{ value: '已停止', label: '已停止' },
|
||||
{ value: '已作废', label: '已作废' }
|
||||
]
|
||||
const searchForm = reactive({
|
||||
searchVal: '',
|
||||
patientStatus: '全部',
|
||||
selectedType: '全部',
|
||||
timeRange: [],
|
||||
executionType: '全部',
|
||||
isPrintExecution: true,
|
||||
isPrintLabel: true
|
||||
})
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.medicalOrderManagement-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.medicalOrderManagement-operate {
|
||||
height: 49px;
|
||||
width: 100%;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.medicalOrderManagement-table {
|
||||
height: 44px;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,310 @@
|
||||
<!--
|
||||
* @Author: sjjh
|
||||
* @Date: 2025-04-16 20:14:58
|
||||
* @Description: 患者列表组件
|
||||
-->
|
||||
<template>
|
||||
<div class="patientList-container">
|
||||
<div class="patientList-wrapper" :class="{ 'collapsed': isCollapsed }">
|
||||
<div class="patientList-header">
|
||||
<el-space :size="4">
|
||||
<el-input v-model="searchForm.searchVal" style="width: 100px" placeholder="住院号/姓名" v-if="!isCollapsed" />
|
||||
<el-select v-model="searchForm.patientStatus" placeholder="" style="min-width: 70px" v-if="!isCollapsed">
|
||||
<el-option key="1" label="在科" value="1" />
|
||||
<el-option key="2" label="转科" value="2" />
|
||||
|
||||
</el-select>
|
||||
<el-icon @click="refresh" class="refresh-icon">
|
||||
<Refresh />
|
||||
</el-icon>
|
||||
<el-icon @click="toggleCollapse" class="collapse-icon">
|
||||
<template v-if="isCollapsed">
|
||||
<Expand />
|
||||
</template>
|
||||
<template v-else>
|
||||
<Fold />
|
||||
</template>
|
||||
</el-icon>
|
||||
</el-space>
|
||||
</div>
|
||||
<!-- 待入科列表 -->
|
||||
<div class="patientList-table">
|
||||
<el-table :data="patientListData" row-key="id" style="width: 100%; height: 100%" highlight-current-row
|
||||
@selection-change="handleSelectionChange" :show-header="false" show-overflow-tooltip>
|
||||
<!-- <el-table-column type="selection" :width="isCollapsed ? 14 : 20" /> -->
|
||||
<el-table-column label="姓名" prop="name" min-width="100">
|
||||
<template #default="{ row }">
|
||||
<template v-if="row?.children?.length > 0">
|
||||
<span>{{ row.department }}</span>
|
||||
</template>
|
||||
<div class="patient-name" v-else>
|
||||
<span class="name">{{ row.name }}</span>
|
||||
<span class="age" v-if="!isCollapsed">{{ row.age }}岁</span>
|
||||
<span class="gender" v-if="!isCollapsed">{{ row.gender }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { Expand, Fold, Refresh } from '@element-plus/icons-vue'
|
||||
|
||||
const isCollapsed = ref(false)
|
||||
|
||||
const toggleCollapse = () => {
|
||||
isCollapsed.value = !isCollapsed.value
|
||||
}
|
||||
|
||||
const refresh = () => {
|
||||
// 刷新逻辑
|
||||
}
|
||||
|
||||
const searchForm = reactive({
|
||||
searchVal: '',
|
||||
patientStatus: '',
|
||||
attention: ''
|
||||
})
|
||||
|
||||
const patientListData = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: '张三1111111',
|
||||
age: 30,
|
||||
gender: '男',
|
||||
status: '在科',
|
||||
attention: '医生A',
|
||||
department: '儿科',
|
||||
children: [
|
||||
{
|
||||
id: 11,
|
||||
name: '张三-11111111',
|
||||
age: 5,
|
||||
gender: '男',
|
||||
status: '在科',
|
||||
attention: '医生A'
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
name: '张三-2',
|
||||
age: 3,
|
||||
gender: '女',
|
||||
status: '在科',
|
||||
attention: '医生A'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '李四',
|
||||
age: 25,
|
||||
gender: '女',
|
||||
status: '转科',
|
||||
attention: '医生B'
|
||||
}
|
||||
])
|
||||
|
||||
const selectedRows = ref<any[]>([])
|
||||
|
||||
const handleSelectionChange = (selection) => {
|
||||
selectedRows.value = selection
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.patientList-container {
|
||||
// width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
max-width: 240px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.patientList-wrapper {
|
||||
height: 100%;
|
||||
width: 240px;
|
||||
background: #fff;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: width 0.3s ease;
|
||||
|
||||
&.collapsed {
|
||||
width: 70px;
|
||||
|
||||
.el-input,
|
||||
.el-select {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.patientList-table {
|
||||
width: 100% !important;
|
||||
overflow: hidden;
|
||||
padding: 0 0px 8px 0px;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
width: 100% !important;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.el-table__header-wrapper,
|
||||
.el-table__body-wrapper {
|
||||
width: 100% !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-table__header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-table__body {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-table__body tr {
|
||||
display: block;
|
||||
padding: 4px 8px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-table__body td {
|
||||
display: block;
|
||||
padding: 0;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.el-table__body .name {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.el-table__body .status,
|
||||
.el-table__body .attention {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.patientList-header {
|
||||
min-height: 88px;
|
||||
padding: 8px 8px;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
min-height: 40px;
|
||||
|
||||
.el-space {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
gap: 8px;
|
||||
|
||||
.el-input {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
flex: 1;
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
flex: none;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.patientList-table {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 8px 8px 8px;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
width: 100% !important;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.el-table__body {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.el-table__body-wrapper {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.el-table__body tr {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.collapse-icon,
|
||||
.refresh-icon {
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.patient-name {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
::v-deep .el-table__indent {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table__placeholder {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table__expanded-cell {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table__expanded-cell .el-table__cell {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table__expanded-cell .el-table__cell .patient-name {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
::v-deep .cell {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table__expanded-cell {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table__expanded-cell .el-table__cell .patient-name {
|
||||
margin-left: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,360 @@
|
||||
<!--
|
||||
* @Author: sjjh
|
||||
* @Date: 2025-04-16 20:54:48
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="medicalOrderManagement-container">
|
||||
<div class="medicalOrderManagement-operate">
|
||||
<el-space :size="4">
|
||||
<el-select v-model="searchForm.patientStatus" placeholder="执行状态" style="width: 100px">
|
||||
<el-option
|
||||
v-for="item in statusOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select v-model="searchForm.selectedType" placeholder="医嘱类型" style="width: 100px">
|
||||
<el-option
|
||||
v-for="item in typeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select v-model="searchForm.executionType" placeholder="执行单类型" style="width: 100px">
|
||||
<el-option
|
||||
v-for="item in executionTypeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-input v-model="searchForm.searchVal" style="width: 100px" placeholder="医嘱名称" />
|
||||
<!-- 增加预计执行时间 时间范围筛选 -->
|
||||
<el-date-picker
|
||||
v-model="searchForm.timeRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
style="width: 200px"
|
||||
/>
|
||||
<el-button type="primary">查询</el-button>
|
||||
<el-button type="danger">不执行</el-button>
|
||||
<el-checkbox v-model="searchForm.isPrintExecution">执行单打印</el-checkbox>
|
||||
<el-checkbox v-model="searchForm.isPrintLabel">瓶贴打印</el-checkbox>
|
||||
<el-button type="primary">执行</el-button>
|
||||
<el-button type="">皮试结果</el-button>
|
||||
</el-space>
|
||||
<el-space :size="4"> </el-space>
|
||||
</div>
|
||||
<div class="medicalOrderManagement-table">
|
||||
<el-table
|
||||
:data="medicalOrderManagementData"
|
||||
row-key="id"
|
||||
style="width: 100%; height: 100%"
|
||||
border
|
||||
:span-method="arraySpanMethod"
|
||||
>
|
||||
<el-table-column type="selection" />
|
||||
|
||||
<el-table-column label="类型" prop="name">
|
||||
<template #default="{ row }">
|
||||
<span v-if="!row.children">长期/西药</span>
|
||||
<template v-else>
|
||||
{{ row.name }}
|
||||
11 床【000000001】 林俊杰 女/24 重 1级 自费 主诊断 医生：医生甲
|
||||
预交金：1990.3
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="医嘱内容" prop="content">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.children">{{ row.content }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="开始终止" prop="gender">
|
||||
<template #default="{ row }">
|
||||
<div v-if="!row.children">
|
||||
<div>05/04 07:00</div>
|
||||
<div>05/25 07:00</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="执行时间" prop="gender" min-width="200px">
|
||||
<template #default="{ row }">
|
||||
<template v-if="!row.children">
|
||||
<div v-for="item in row.dates" :key="item.id">
|
||||
<span>{{ item.date }}</span>
|
||||
<span v-for="time in item.times" :key="time.id">
|
||||
<el-checkbox v-model="time.checked" :label="`${time.time + time.nurse}`" border />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else> </template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup >
|
||||
import { onBeforeMount, onMounted, reactive, ref } from 'vue';
|
||||
// const { proxy } = getCurrentInstance()
|
||||
// const emits = defineEmits([])
|
||||
// const props = defineProps({})
|
||||
const state = reactive({});
|
||||
onBeforeMount(() => {});
|
||||
onMounted(() => {});
|
||||
defineExpose({ state });
|
||||
const medicalOrderManagementData = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: '张三',
|
||||
age: 20,
|
||||
gender: '男',
|
||||
|
||||
children: [
|
||||
{
|
||||
name: '',
|
||||
age: 10,
|
||||
gender: '男',
|
||||
content: '维生素B12注射液【1ml：0.5mg*1】 ',
|
||||
dates: [
|
||||
{
|
||||
date: '05/04',
|
||||
times: [
|
||||
{
|
||||
time: '08:00',
|
||||
nurse: '刘护士',
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
time: '12:00',
|
||||
nurse: '刘护士',
|
||||
checked: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
date: '05/05',
|
||||
times: [
|
||||
{
|
||||
time: '08:00',
|
||||
nurse: '刘护士',
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
time: '12:00',
|
||||
nurse: '刘护士',
|
||||
checked: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
age: 10,
|
||||
gender: '男',
|
||||
content: '维生素B12注射液【1ml：0.5mg*1】 ',
|
||||
dates: [
|
||||
{
|
||||
date: '05/04',
|
||||
times: [
|
||||
{
|
||||
time: '08:00',
|
||||
nurse: '刘护士',
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
time: '12:00',
|
||||
nurse: '刘护士',
|
||||
checked: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
date: '05/05',
|
||||
times: [
|
||||
{
|
||||
time: '08:00',
|
||||
nurse: '刘护士',
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
time: '12:00',
|
||||
nurse: '刘护士',
|
||||
checked: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '李四',
|
||||
age: 20,
|
||||
gender: '男',
|
||||
|
||||
children: [
|
||||
{
|
||||
name: '',
|
||||
age: 10,
|
||||
gender: '男',
|
||||
content: '维生素B12注射液【1ml：0.5mg*1】 ',
|
||||
dates: [
|
||||
{
|
||||
date: '05/04',
|
||||
times: [
|
||||
{
|
||||
time: '08:00',
|
||||
nurse: '刘护士',
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
time: '12:00',
|
||||
nurse: '刘护士',
|
||||
checked: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
date: '05/05',
|
||||
times: [
|
||||
{
|
||||
time: '08:00',
|
||||
nurse: '刘护士',
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
time: '12:00',
|
||||
nurse: '刘护士',
|
||||
checked: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
age: 10,
|
||||
gender: '男',
|
||||
content: '维生素B12注射液【1ml：0.5mg*1】 ',
|
||||
dates: [
|
||||
{
|
||||
date: '05/04',
|
||||
times: [
|
||||
{
|
||||
time: '08:00',
|
||||
nurse: '刘护士',
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
time: '12:00',
|
||||
nurse: '刘护士',
|
||||
checked: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
date: '05/05',
|
||||
times: [
|
||||
{
|
||||
time: '08:00',
|
||||
nurse: '刘护士',
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
time: '12:00',
|
||||
nurse: '刘护士',
|
||||
checked: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
|
||||
console.log(row, column, rowIndex, columnIndex);
|
||||
// 如果是父级行
|
||||
if (row.children && row.children.length > 0) {
|
||||
if (columnIndex === 0) {
|
||||
return [1, 1];
|
||||
}
|
||||
// 如果是患者列
|
||||
if (columnIndex === 1) {
|
||||
return [1, 6];
|
||||
} else {
|
||||
return [1, 0];
|
||||
}
|
||||
}
|
||||
// 如果是子级行，显示其他列
|
||||
if (!row.children || row.children.length == 0) {
|
||||
return [1, 1];
|
||||
}
|
||||
// 如果是父级行，隐藏其他列
|
||||
return [1, 1];
|
||||
};
|
||||
const statusOptions = [
|
||||
{ value: '未执行', label: '未执行' },
|
||||
{ value: '已执行', label: '已执行' },
|
||||
{ value: '不执行', label: '不执行' },
|
||||
{ value: '取消执行', label: '取消执行' },
|
||||
];
|
||||
const typeOptions = [
|
||||
{ value: '全部', label: '全部' },
|
||||
{ value: '长期', label: '长期' },
|
||||
{ value: '临时', label: '临时' },
|
||||
];
|
||||
const executionTypeOptions = [
|
||||
{ value: '全部', label: '全部' },
|
||||
{ value: '口服单', label: '口服单' },
|
||||
{ value: '输液单', label: '输液单' },
|
||||
{ value: '针剂单', label: '针剂单' },
|
||||
{ value: '雾化单', label: '雾化单' },
|
||||
{ value: '治疗单', label: '治疗单' },
|
||||
{ value: '其他', label: '其他' },
|
||||
];
|
||||
const searchForm = reactive({
|
||||
searchVal: '',
|
||||
patientStatus: '未执行',
|
||||
selectedType: '全部',
|
||||
timeRange: [],
|
||||
executionType: '全部',
|
||||
isPrintExecution: true,
|
||||
isPrintLabel: true,
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.medicalOrderManagement-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.medicalOrderManagement-operate {
|
||||
height: 49px;
|
||||
width: 100%;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.medicalOrderManagement-table {
|
||||
height: 44px;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,310 @@
|
||||
<!--
|
||||
* @Author: sjjh
|
||||
* @Date: 2025-04-16 20:14:58
|
||||
* @Description: 患者列表组件
|
||||
-->
|
||||
<template>
|
||||
<div class="patientList-container">
|
||||
<div class="patientList-wrapper" :class="{ 'collapsed': isCollapsed }">
|
||||
<div class="patientList-header">
|
||||
<el-space :size="4">
|
||||
<el-input v-model="searchForm.searchVal" style="width: 100px" placeholder="住院号/姓名" v-if="!isCollapsed" />
|
||||
<el-select v-model="searchForm.patientStatus" placeholder="" style="min-width: 70px" v-if="!isCollapsed">
|
||||
<el-option key="1" label="在科" value="1" />
|
||||
<el-option key="2" label="转科" value="2" />
|
||||
|
||||
</el-select>
|
||||
<el-icon @click="refresh" class="refresh-icon">
|
||||
<Refresh />
|
||||
</el-icon>
|
||||
<el-icon @click="toggleCollapse" class="collapse-icon">
|
||||
<template v-if="isCollapsed">
|
||||
<Expand />
|
||||
</template>
|
||||
<template v-else>
|
||||
<Fold />
|
||||
</template>
|
||||
</el-icon>
|
||||
</el-space>
|
||||
</div>
|
||||
<!-- 待入科列表 -->
|
||||
<div class="patientList-table">
|
||||
<el-table :data="patientListData" row-key="id" style="width: 100%; height: 100%" highlight-current-row
|
||||
@selection-change="handleSelectionChange" :show-header="false" show-overflow-tooltip>
|
||||
<!-- <el-table-column type="selection" :width="isCollapsed ? 14 : 20" /> -->
|
||||
<el-table-column label="姓名" prop="name" min-width="100">
|
||||
<template #default="{ row }">
|
||||
<template v-if="row?.children?.length > 0">
|
||||
<span>{{ row.department }}</span>
|
||||
</template>
|
||||
<div class="patient-name" v-else>
|
||||
<span class="name">{{ row.name }}</span>
|
||||
<span class="age" v-if="!isCollapsed">{{ row.age }}岁</span>
|
||||
<span class="gender" v-if="!isCollapsed">{{ row.gender }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { Expand, Fold, Refresh } from '@element-plus/icons-vue'
|
||||
|
||||
const isCollapsed = ref(false)
|
||||
|
||||
const toggleCollapse = () => {
|
||||
isCollapsed.value = !isCollapsed.value
|
||||
}
|
||||
|
||||
const refresh = () => {
|
||||
// 刷新逻辑
|
||||
}
|
||||
|
||||
const searchForm = reactive({
|
||||
searchVal: '',
|
||||
patientStatus: '',
|
||||
attention: ''
|
||||
})
|
||||
|
||||
const patientListData = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: '张三1111111',
|
||||
age: 30,
|
||||
gender: '男',
|
||||
status: '在科',
|
||||
attention: '医生A',
|
||||
department: '儿科',
|
||||
children: [
|
||||
{
|
||||
id: 11,
|
||||
name: '张三-11111111',
|
||||
age: 5,
|
||||
gender: '男',
|
||||
status: '在科',
|
||||
attention: '医生A'
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
name: '张三-2',
|
||||
age: 3,
|
||||
gender: '女',
|
||||
status: '在科',
|
||||
attention: '医生A'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '李四',
|
||||
age: 25,
|
||||
gender: '女',
|
||||
status: '转科',
|
||||
attention: '医生B'
|
||||
}
|
||||
])
|
||||
|
||||
const selectedRows = ref<any[]>([])
|
||||
|
||||
const handleSelectionChange = (selection) => {
|
||||
selectedRows.value = selection
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.patientList-container {
|
||||
// width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
max-width: 240px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.patientList-wrapper {
|
||||
height: 100%;
|
||||
width: 240px;
|
||||
background: #fff;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: width 0.3s ease;
|
||||
|
||||
&.collapsed {
|
||||
width: 70px;
|
||||
|
||||
.el-input,
|
||||
.el-select {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.patientList-table {
|
||||
width: 100% !important;
|
||||
overflow: hidden;
|
||||
padding: 0 0px 8px 0px;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
width: 100% !important;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.el-table__header-wrapper,
|
||||
.el-table__body-wrapper {
|
||||
width: 100% !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-table__header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-table__body {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-table__body tr {
|
||||
display: block;
|
||||
padding: 4px 8px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-table__body td {
|
||||
display: block;
|
||||
padding: 0;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.el-table__body .name {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.el-table__body .status,
|
||||
.el-table__body .attention {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.patientList-header {
|
||||
min-height: 88px;
|
||||
padding: 8px 8px;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
min-height: 40px;
|
||||
|
||||
.el-space {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
gap: 8px;
|
||||
|
||||
.el-input {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
flex: 1;
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
flex: none;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.patientList-table {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 8px 8px 8px;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
width: 100% !important;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.el-table__body {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.el-table__body-wrapper {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.el-table__body tr {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.collapse-icon,
|
||||
.refresh-icon {
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.patient-name {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
::v-deep .el-table__indent {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table__placeholder {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table__expanded-cell {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table__expanded-cell .el-table__cell {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table__expanded-cell .el-table__cell .patient-name {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
::v-deep .cell {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table__expanded-cell {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table__expanded-cell .el-table__cell .patient-name {
|
||||
margin-left: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,88 @@
|
||||
<!--
|
||||
* @Author: sjjh
|
||||
* @Date: 2025-04-09 17:14:59
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-tabs type="border-card" class="medicalOrderManagement-container">
|
||||
<el-tab-pane label="医嘱校对">
|
||||
<div class="check-wrapper">
|
||||
<!-- 患者列表 -->
|
||||
<CheckPatientList />
|
||||
<!-- main -->
|
||||
<CheckMedicalOrderManagement />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="医嘱执行">
|
||||
<div class="execute-wrapper">
|
||||
<!-- 患者列表 -->
|
||||
<ExecutePatientList />
|
||||
<!-- main -->
|
||||
<ExecuteMedicalOrderManagement />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="查询与打印">查询与打印</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onBeforeMount, onMounted, reactive, ref } from 'vue'
|
||||
import CheckPatientList from './components/check/patientList.vue'
|
||||
import CheckMedicalOrderManagement from './components/check/MedicalOrderManagement.vue'
|
||||
import ExecutePatientList from './components/execute/patientList.vue'
|
||||
import ExecuteMedicalOrderManagement from './components/execute/MedicalOrderManagement.vue'
|
||||
|
||||
const transferInDialogVisible = ref(false)
|
||||
const signEntryDialogVisible = ref(false)
|
||||
const state = reactive({})
|
||||
onBeforeMount(() => { })
|
||||
onMounted(() => {
|
||||
query()
|
||||
})
|
||||
defineExpose({ state })
|
||||
const allocationData = ref([{}, {}])
|
||||
const query = () => {
|
||||
// 查询列表
|
||||
}
|
||||
|
||||
const addSigns = (row: any) => {
|
||||
// TODO 新增入院体征
|
||||
signEntryDialogVisible.value = true
|
||||
}
|
||||
|
||||
const selectBed = (row: any) => {
|
||||
// TODO 选床 入科
|
||||
transferInDialogVisible.value = true
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.medicalOrderManagement-container {
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
:deep(.el-tabs__content) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.el-tab-pane) {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.check-wrapper {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.execute-wrapper {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.patientList-container {
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user