new Files
This commit is contained in:
@ -1,57 +1,67 @@
|
||||
<script setup>
|
||||
import {reactive, ref, shallowRef} from 'vue'
|
||||
import { ThemeServiceInit, infinityTheme } from 'devui-theme';
|
||||
import HomePage from './views/HomePage.vue'
|
||||
import menjizhenItemView from './views/zl-station/menjizhenItemView.vue'
|
||||
import NotFoundPage from './views/404/notFoundPage.vue'
|
||||
|
||||
import Menu from './Menu.vue'
|
||||
|
||||
|
||||
// 使用无限主题
|
||||
ThemeServiceInit({ infinityTheme }, 'infinityTheme');
|
||||
|
||||
// 当前激活的菜单项
|
||||
const activeMenu = ref('item1')
|
||||
// // 当前激活的菜单项
|
||||
// const activeMenu = ref('item1')
|
||||
|
||||
// 当前显示的组件
|
||||
const currentComponent = shallowRef(HomePage)
|
||||
// // 当前显示的组件
|
||||
// const currentComponent = shallowRef(HomePage)
|
||||
|
||||
// 组件映射表
|
||||
const componentMap = {
|
||||
'item1': HomePage,
|
||||
'menjizhen-item': menjizhenItemView,
|
||||
'notFoundPage': NotFoundPage,
|
||||
// 其他菜单项对应的组件...
|
||||
}
|
||||
// const componentMap = {
|
||||
// 'item1': HomePage,
|
||||
// 'menjizhen-item': menjizhenItemView,
|
||||
// 'notFoundPage': NotFoundPage,
|
||||
// // 其他菜单项对应的组件...
|
||||
// }
|
||||
|
||||
// 处理菜单选择
|
||||
const handleMenuSelect = (key) => {
|
||||
activeMenu.value = key["key"]
|
||||
if (componentMap[key["key"]]) {
|
||||
currentComponent.value = componentMap[key["key"]]
|
||||
// // 处理菜单选择
|
||||
// const handleMenuSelect = (key) => {
|
||||
// activeMenu.value = key["key"]
|
||||
// if (componentMap[key["key"]]) {
|
||||
// currentComponent.value = componentMap[key["key"]]
|
||||
// } else {
|
||||
// console.warn(`未找到菜单项 ${key} 对应的组件`)
|
||||
// console.warn(key["key"])
|
||||
// currentComponent.value = NotFoundPage
|
||||
// }
|
||||
// }
|
||||
|
||||
//
|
||||
|
||||
const menu = ref(null)
|
||||
const toggleClick = function() {
|
||||
let menu = document.querySelector('.menu-aside')
|
||||
|
||||
menu.style.transition = menu.style.transition || 'all 0.3s ease-in-out'
|
||||
|
||||
if (menu.style.display == 'none') {
|
||||
menu.style.display = 'block'
|
||||
} else {
|
||||
console.warn(`未找到菜单项 ${key} 对应的组件`)
|
||||
console.warn(key["key"])
|
||||
currentComponent.value = NotFoundPage
|
||||
menu.style.display = 'none'
|
||||
}
|
||||
}
|
||||
|
||||
// 面包屑导航
|
||||
const source = reactive([
|
||||
{ title: '首页', link: '/', linkType: 'routerLink', replace: true },
|
||||
{ title: 'Breadcrumb', link: 'components/breadcrumb/', noNavigation: true },
|
||||
]);
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<d-layout style="width: 100vw; ">
|
||||
<!-- 顶栏 -->
|
||||
<d-header style="position: fixed; width: 100%; z-index: 100;background: #fff;height: 56px;box-shadow: 0 2px 4px rgba(0,0,0,0.04);">
|
||||
|
||||
<div class="nav-collapse i icon-nav-collapse me-4 ms-4" @click="toggleClick()"></div>
|
||||
<span class="avatar-demo-2" style="position: relative;
|
||||
text-align: right;">
|
||||
<d-avatar name="张医生" :width="28" :height="28" class="profile"/>
|
||||
<span class="name" style="margin-left: 10px;">张医生</span>
|
||||
</span>
|
||||
<d-breadcrumb :source="source" style="display: inline-flex;text-align: center; position: relative; overflow: hidden; width: auto; margin-left:180px" />
|
||||
<!-- <d-breadcrumb :source="source" style="display: inline-flex;text-align: center; position: relative; overflow: hidden; width: auto; margin-left:180px" />-->
|
||||
|
||||
<div style="float: right;
|
||||
text-align: right;
|
||||
@ -78,7 +88,7 @@ const source = reactive([
|
||||
margin-top: 1rem;"
|
||||
>
|
||||
<d-icon name="feedback"/>
|
||||
<a href="/messages" style="color:#54dc35 ;">
|
||||
<a style="color:#54dc35 ;">
|
||||
<d-badge :count="100" status="info" class="badge-item">未读消息</d-badge>
|
||||
</a>
|
||||
</span>
|
||||
@ -98,84 +108,86 @@ const source = reactive([
|
||||
<!-- 侧边栏 - 添加fixed样式 -->
|
||||
<d-aside style="
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
">
|
||||
<d-menu
|
||||
mode="vertical"
|
||||
:default-select-keys="['item1']"
|
||||
width="256px"
|
||||
@select="handleMenuSelect"
|
||||
>
|
||||
<!-- 首页 -->
|
||||
<d-menu-item key="item1">
|
||||
<template #icon><i class="icon-homepage"></i></template>
|
||||
<span>首页</span>
|
||||
</d-menu-item>
|
||||
<!-- 诊疗工作站 -->
|
||||
<d-sub-menu title="诊疗工作站" key="zl-station">
|
||||
<template #icon><i class="icon-system"></i></template>
|
||||
<d-menu-item key="menjizhen-item"><span>门急诊医生站</span></d-menu-item>
|
||||
<d-menu-item key="zhuyuan-item"><span>住院医生站</span></d-menu-item>
|
||||
<d-menu-item key="rjssmz-item"><span>日间手术门诊工作站</span></d-menu-item>
|
||||
<d-menu-item key="rjsszy-item"><span>日间手术住院工作站</span></d-menu-item>
|
||||
<d-menu-item key="hzjlgl-item"><span>会诊记录管理</span></d-menu-item>
|
||||
</d-sub-menu>
|
||||
<!-- 病历管理 -->
|
||||
<d-sub-menu title="病历管理" key="bl-manage">
|
||||
<template #icon><i class="icon-system"></i></template>
|
||||
<d-menu-item key="cyblbj-item"><span>出院病历编辑</span></d-menu-item>
|
||||
<d-menu-item key="cybldy-item"><span>出院病历打印</span></d-menu-item>
|
||||
<d-menu-item key="mzbljs-item"><span>门诊病历检索</span></d-menu-item>
|
||||
<d-menu-item key="zybljs-item"><span>住院病历检索</span></d-menu-item>
|
||||
<d-menu-item key="blxgjl-item"><span>病历修改记录</span></d-menu-item>
|
||||
<d-menu-item key="blfcxf-item"><span>病历封存解封</span></d-menu-item>
|
||||
<d-menu-item key="bljs-item"><span>病历解锁</span></d-menu-item>
|
||||
</d-sub-menu>
|
||||
<d-sub-menu title="我的申请" key="my-apply">
|
||||
<template #icon>
|
||||
<i class="icon-system"></i>
|
||||
</template>
|
||||
<d-menu-item key="my-apply-item">
|
||||
<span>我的申请</span>
|
||||
</d-menu-item>
|
||||
</d-sub-menu>
|
||||
<d-sub-menu title="我的审批" key="my-approve">
|
||||
<template #icon>
|
||||
<i class="icon-system"></i>
|
||||
</template>
|
||||
<d-menu-item key="my-approve-item">
|
||||
<span>我的审批</span>
|
||||
</d-menu-item>
|
||||
</d-sub-menu>
|
||||
<d-sub-menu title="个人质检" key="personal-check">
|
||||
<template #icon>
|
||||
<i class="icon-system"></i>
|
||||
</template>
|
||||
</d-sub-menu>
|
||||
<d-sub-menu title="质控管理" key="quality-control">
|
||||
<template #icon>
|
||||
<i class="icon-system"></i>
|
||||
</template>
|
||||
<d-menu-item key="quality-control-item">
|
||||
<span>质控管理</span>
|
||||
</d-menu-item>
|
||||
</d-sub-menu>
|
||||
<d-sub-menu title="系统管理" key="system-manage">
|
||||
<template #icon>
|
||||
<i class="icon-system"></i>
|
||||
</template>
|
||||
<d-menu-item key="user-manage">
|
||||
<span>用户管理</span>
|
||||
</d-menu-item>
|
||||
<d-menu-item key="role-manage">
|
||||
<span>角色管理</span>
|
||||
</d-menu-item>
|
||||
<d-menu-item key="permission-manage">
|
||||
<span>权限管理</span>
|
||||
</d-menu-item>
|
||||
</d-sub-menu>
|
||||
</d-menu>
|
||||
|
||||
z-index: 99;"
|
||||
class="menu-aside"
|
||||
>
|
||||
<!-- <d-menu-->
|
||||
<!-- mode="vertical"-->
|
||||
<!-- :default-select-keys="['item1']"-->
|
||||
<!-- width="256px"-->
|
||||
<!-- @select="handleMenuSelect"-->
|
||||
<!-- >-->
|
||||
<!-- <!– 首页 –>-->
|
||||
<!-- <d-menu-item key="item1">-->
|
||||
<!-- <template #icon><i class="icon-homepage"></i></template>-->
|
||||
<!-- <span>首页</span>-->
|
||||
<!-- </d-menu-item>-->
|
||||
<!-- <!– 诊疗工作站 –>-->
|
||||
<!-- <d-sub-menu title="诊疗工作站" key="zl-station">-->
|
||||
<!-- <template #icon><i class="icon-system"></i></template>-->
|
||||
<!-- <d-menu-item key="menjizhen-item"><span>门急诊医生站</span></d-menu-item>-->
|
||||
<!-- <d-menu-item key="zhuyuan-item"><span>住院医生站</span></d-menu-item>-->
|
||||
<!-- <d-menu-item key="rjssmz-item"><span>日间手术门诊工作站</span></d-menu-item>-->
|
||||
<!-- <d-menu-item key="rjsszy-item"><span>日间手术住院工作站</span></d-menu-item>-->
|
||||
<!-- <d-menu-item key="hzjlgl-item"><span>会诊记录管理</span></d-menu-item>-->
|
||||
<!-- </d-sub-menu>-->
|
||||
<!-- <!– 病历管理 –>-->
|
||||
<!-- <d-sub-menu title="病历管理" key="bl-manage">-->
|
||||
<!-- <template #icon><i class="icon-system"></i></template>-->
|
||||
<!-- <d-menu-item key="cyblbj-item"><span>出院病历编辑</span></d-menu-item>-->
|
||||
<!-- <d-menu-item key="cybldy-item"><span>出院病历打印</span></d-menu-item>-->
|
||||
<!-- <d-menu-item key="mzbljs-item"><span>门诊病历检索</span></d-menu-item>-->
|
||||
<!-- <d-menu-item key="zybljs-item"><span>住院病历检索</span></d-menu-item>-->
|
||||
<!-- <d-menu-item key="blxgjl-item"><span>病历修改记录</span></d-menu-item>-->
|
||||
<!-- <d-menu-item key="blfcxf-item"><span>病历封存解封</span></d-menu-item>-->
|
||||
<!-- <d-menu-item key="bljs-item"><span>病历解锁</span></d-menu-item>-->
|
||||
<!-- </d-sub-menu>-->
|
||||
<!-- <d-sub-menu title="我的申请" key="my-apply">-->
|
||||
<!-- <template #icon>-->
|
||||
<!-- <i class="icon-system"></i>-->
|
||||
<!-- </template>-->
|
||||
<!-- <d-menu-item key="my-apply-item">-->
|
||||
<!-- <span>我的申请</span>-->
|
||||
<!-- </d-menu-item>-->
|
||||
<!-- </d-sub-menu>-->
|
||||
<!-- <d-sub-menu title="我的审批" key="my-approve">-->
|
||||
<!-- <template #icon>-->
|
||||
<!-- <i class="icon-system"></i>-->
|
||||
<!-- </template>-->
|
||||
<!-- <d-menu-item key="my-approve-item">-->
|
||||
<!-- <span>我的审批</span>-->
|
||||
<!-- </d-menu-item>-->
|
||||
<!-- </d-sub-menu>-->
|
||||
<!-- <d-sub-menu title="个人质检" key="personal-check">-->
|
||||
<!-- <template #icon>-->
|
||||
<!-- <i class="icon-system"></i>-->
|
||||
<!-- </template>-->
|
||||
<!-- </d-sub-menu>-->
|
||||
<!-- <d-sub-menu title="质控管理" key="quality-control">-->
|
||||
<!-- <template #icon>-->
|
||||
<!-- <i class="icon-system"></i>-->
|
||||
<!-- </template>-->
|
||||
<!-- <d-menu-item key="quality-control-item">-->
|
||||
<!-- <span>质控管理</span>-->
|
||||
<!-- </d-menu-item>-->
|
||||
<!-- </d-sub-menu>-->
|
||||
<!-- <d-sub-menu title="系统管理" key="system-manage">-->
|
||||
<!-- <template #icon>-->
|
||||
<!-- <i class="icon-system"></i>-->
|
||||
<!-- </template>-->
|
||||
<!-- <d-menu-item key="user-manage">-->
|
||||
<!-- <span>用户管理</span>-->
|
||||
<!-- </d-menu-item>-->
|
||||
<!-- <d-menu-item key="role-manage">-->
|
||||
<!-- <span>角色管理</span>-->
|
||||
<!-- </d-menu-item>-->
|
||||
<!-- <d-menu-item key="permission-manage">-->
|
||||
<!-- <span>权限管理</span>-->
|
||||
<!-- </d-menu-item>-->
|
||||
<!-- </d-sub-menu>-->
|
||||
<!-- </d-menu>-->
|
||||
<!-- 使用独立组件-->
|
||||
<Menu></Menu>
|
||||
</d-aside>
|
||||
<!-- 主显示区 - 添加左侧边距 -->
|
||||
<d-content
|
||||
@ -183,7 +195,8 @@ const source = reactive([
|
||||
padding: 16px;
|
||||
overflow-x: hidden; /* 禁止内容溢出 */
|
||||
">
|
||||
<component :is="currentComponent"/>
|
||||
<!-- <component :is="currentComponent"/>-->
|
||||
<router-view></router-view>
|
||||
</d-content>
|
||||
</d-layout>
|
||||
<d-footer style="position: fixed; bottom: 0; width: 100%; z-index: 100;background: #fff;height: 16px;">
|
||||
@ -220,4 +233,15 @@ const source = reactive([
|
||||
font-style: oblique 0deg 20deg; /* 可选的斜体范围 */
|
||||
font-display: swap; /* 优化加载体验 */
|
||||
}
|
||||
|
||||
.nav-collapse{
|
||||
display: inline-block;
|
||||
}
|
||||
.nav-collapse:hover{
|
||||
cursor: pointer;
|
||||
color: rgb(126, 126, 126);
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
95
front/src/Menu.vue
Normal file
95
front/src/Menu.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<script setup>
|
||||
import router from "@/router/index.js";
|
||||
import { ref } from 'vue'
|
||||
|
||||
const handleMenuSelect = (key) => {
|
||||
router.push(`/${key["key"]}`)
|
||||
|
||||
}
|
||||
|
||||
// 当前激活的菜单项
|
||||
const activeMenu = ref('HomePage')
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<d-menu
|
||||
mode="vertical"
|
||||
:default-select-keys="['HomePage']"
|
||||
width="256px"
|
||||
@select="handleMenuSelect"
|
||||
>
|
||||
<!-- 首页 -->
|
||||
<d-menu-item key="HomePage">
|
||||
<template #icon><i class="icon-homepage"></i></template>
|
||||
<span>首页</span>
|
||||
</d-menu-item>
|
||||
<!-- 诊疗工作站 -->
|
||||
<d-sub-menu title="诊疗工作站" key="zl-station">
|
||||
<template #icon><i class="icon-system"></i></template>
|
||||
<d-menu-item key="menjizhen-item"><span>门急诊医生站</span></d-menu-item>
|
||||
<d-menu-item key="zhuyuan-item"><span>住院医生站</span></d-menu-item>
|
||||
<d-menu-item key="rjssmz-item"><span>日间手术门诊工作站</span></d-menu-item>
|
||||
<d-menu-item key="rjsszy-item"><span>日间手术住院工作站</span></d-menu-item>
|
||||
<d-menu-item key="hzjlgl-item"><span>会诊记录管理</span></d-menu-item>
|
||||
</d-sub-menu>
|
||||
<!-- 病历管理 -->
|
||||
<d-sub-menu title="病历管理" key="bl-manage">
|
||||
<template #icon><i class="icon-system"></i></template>
|
||||
<d-menu-item key="cyblbj-item"><span>出院病历编辑</span></d-menu-item>
|
||||
<d-menu-item key="cybldy-item"><span>出院病历打印</span></d-menu-item>
|
||||
<d-menu-item key="mzbljs-item"><span>门诊病历检索</span></d-menu-item>
|
||||
<d-menu-item key="zybljs-item"><span>住院病历检索</span></d-menu-item>
|
||||
<d-menu-item key="blxgjl-item"><span>病历修改记录</span></d-menu-item>
|
||||
<d-menu-item key="blfcxf-item"><span>病历封存解封</span></d-menu-item>
|
||||
<d-menu-item key="bljs-item"><span>病历解锁</span></d-menu-item>
|
||||
</d-sub-menu>
|
||||
<d-sub-menu title="我的申请" key="my-apply">
|
||||
<template #icon>
|
||||
<i class="icon-system"></i>
|
||||
</template>
|
||||
<d-menu-item key="my-apply-item">
|
||||
<span>我的申请</span>
|
||||
</d-menu-item>
|
||||
</d-sub-menu>
|
||||
<d-sub-menu title="我的审批" key="my-approve">
|
||||
<template #icon>
|
||||
<i class="icon-system"></i>
|
||||
</template>
|
||||
<d-menu-item key="my-approve-item">
|
||||
<span>我的审批</span>
|
||||
</d-menu-item>
|
||||
</d-sub-menu>
|
||||
<d-sub-menu title="个人质检" key="personal-check">
|
||||
<template #icon>
|
||||
<i class="icon-system"></i>
|
||||
</template>
|
||||
</d-sub-menu>
|
||||
<d-sub-menu title="质控管理" key="quality-control">
|
||||
<template #icon>
|
||||
<i class="icon-system"></i>
|
||||
</template>
|
||||
<d-menu-item key="quality-control-item">
|
||||
<span>质控管理</span>
|
||||
</d-menu-item>
|
||||
</d-sub-menu>
|
||||
<d-sub-menu title="系统管理" key="system-manage">
|
||||
<template #icon>
|
||||
<i class="icon-system"></i>
|
||||
</template>
|
||||
<d-menu-item key="user-manage">
|
||||
<span>用户管理</span>
|
||||
</d-menu-item>
|
||||
<d-menu-item key="role-manage">
|
||||
<span>角色管理</span>
|
||||
</d-menu-item>
|
||||
<d-menu-item key="permission-manage">
|
||||
<span>权限管理</span>
|
||||
</d-menu-item>
|
||||
</d-sub-menu>
|
||||
</d-menu>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
18
front/src/components/Editor.vue
Normal file
18
front/src/components/Editor.vue
Normal file
@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<!-- 根据实际部署环境修改 editor.html 的路径 -->
|
||||
<iframe src="public/editor.html" v-bind="objectOfAttrs"></iframe>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
objectOfAttrs:{
|
||||
width:'100%',
|
||||
height:'800vh',
|
||||
frameborder: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -3,16 +3,25 @@ import DevUI from 'vue-devui';
|
||||
import 'vue-devui/style.css';
|
||||
import '@devui-design/icons/icomoon/devui-icon.css';
|
||||
import { ThemeServiceInit, infinityTheme } from 'devui-theme';
|
||||
|
||||
import router from './router/index'
|
||||
|
||||
import 'devui-theme/styles-var/devui-var.scss'
|
||||
|
||||
import 'bootstrap/dist/css/bootstrap.min.css'
|
||||
import 'bootstrap/dist/js/bootstrap.min.js'
|
||||
|
||||
import { router } from "./router/index.js";
|
||||
//
|
||||
import Editor from '@/components/Editor.vue'
|
||||
|
||||
|
||||
ThemeServiceInit({ infinityTheme }, 'infinityTheme');
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
const app = createApp(App)
|
||||
|
||||
createApp(App).use(DevUI).mount('#app');
|
||||
app.component('Editor', Editor)
|
||||
app.use(DevUI)
|
||||
app.use(router)
|
||||
app.mount('#app')
|
||||
|
||||
@ -12,8 +12,8 @@
|
||||
<template #title> 快捷导航 </template>
|
||||
<template #subtitle> 最近访问 </template>
|
||||
<template #content>
|
||||
<d-button type="primary" class="me-1 mb-2" size="small" @click="$router.push('/menjizhenItemView')"><i class="icon-system me-1" />门急诊医生站</d-button>
|
||||
<d-button type="primary" class="me-1" size="small" @click="$router.push('/charts')"><i class="icon-system me-1" />住院医生站</d-button>
|
||||
<d-button type="primary" class="me-1 mb-2" size="small" @click="$router.push('/menjizhen-item')"><i class="icon-system me-1" />门急诊医生站</d-button>
|
||||
<d-button type="primary" class="me-1" size="small" @click="$router.push('/zhuyuan-item')"><i class="icon-system me-1" />住院医生站</d-button>
|
||||
<d-button type="primary" class="me-1" size="small" @click="$router.push('/form')"><i class="icon-system me-1" />日间手术门诊工作站</d-button>
|
||||
<d-button type="primary" class="me-1" size="small" @click="$router.push('/table')"><i class="icon-system me-1" />日间手术住院工作站</d-button>
|
||||
<d-button type="primary" class="me-1" size="small" @click="$router.push('/docs')"><i class="icon-system me-1" />会诊记录管理</d-button>
|
||||
99
front/src/pages/zl-station/menjizhenItem-tabs/tab2.vue
Normal file
99
front/src/pages/zl-station/menjizhenItem-tabs/tab2.vue
Normal file
@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<d-layout direction="column" class="p-6 bg-grey-50 min-h-screen">
|
||||
<d-breadcrumb :items="['首页', '门诊', '诊断']" />
|
||||
<d-card class="mt-4">
|
||||
<template #title>门诊诊断</template>
|
||||
<d-card-body>
|
||||
<!-- 患者信息 -->
|
||||
<d-grid :cols="2" row-gap="16px" col-gap="16px" class="mb-6">
|
||||
<div>
|
||||
<strong>姓名：</strong>{{ patient.name }}
|
||||
</div>
|
||||
<div>
|
||||
<strong>年龄：</strong>{{ patient.age }}
|
||||
</div>
|
||||
<div>
|
||||
<strong>性别：</strong>{{ patient.gender }}
|
||||
</div>
|
||||
<div>
|
||||
<strong>就诊日期：</strong>{{ currentDate }}
|
||||
</div>
|
||||
</d-grid>
|
||||
<!-- 诊断表单 -->
|
||||
<d-form layout="vertical" ref="formRef" :data="form">
|
||||
<d-form-item field="chiefComplaint" label="主诉" required>
|
||||
<d-textarea v-model="form.chiefComplaint" placeholder="请输入主诉" rows="3" />
|
||||
</d-form-item>
|
||||
<d-form-item field="historyPresentIllness" label="现病史" required>
|
||||
<d-textarea v-model="form.historyPresentIllness" placeholder="请输入现病史" rows="3" />
|
||||
</d-form-item>
|
||||
<d-form-item field="preliminaryDiagnosis" label="初步诊断" required>
|
||||
<d-input v-model="form.preliminaryDiagnosis" placeholder="请输入初步诊断" />
|
||||
</d-form-item>
|
||||
<d-form-item field="treatmentPlan" label="治疗计划" required>
|
||||
<d-textarea v-model="form.treatmentPlan" placeholder="请输入治疗计划" rows="3" />
|
||||
</d-form-item>
|
||||
<d-form-operation>
|
||||
<d-button variant="solid" @click="onSubmit">保存</d-button>
|
||||
<d-button @click="onReset">重置</d-button>
|
||||
</d-form-operation>
|
||||
</d-form>
|
||||
</d-card-body>
|
||||
</d-card>
|
||||
</d-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, onMounted } from 'vue';
|
||||
|
||||
|
||||
// 患者基础信息
|
||||
const patient = reactive({ name: '', age: '', gender: '' });
|
||||
// 诊断表单数据
|
||||
const form = reactive({
|
||||
chiefComplaint: '',
|
||||
historyPresentIllness: '',
|
||||
preliminaryDiagnosis: '',
|
||||
treatmentPlan: ''
|
||||
});
|
||||
// 表单引用
|
||||
const formRef = ref(null);
|
||||
// 当前日期 YYYY-MM-DD
|
||||
const currentDate = new Date().toISOString().split('T')[0];
|
||||
|
||||
// 模拟接口：获取患者信息
|
||||
const fetchPatient = async () => {
|
||||
// TODO: 换成实际 API 请求
|
||||
patient.name = '张三';
|
||||
patient.age = 30;
|
||||
patient.gender = '男';
|
||||
};
|
||||
|
||||
// 提交诊断信息
|
||||
const onSubmit = async () => {
|
||||
try {
|
||||
// TODO: 调用后端保存接口
|
||||
DMessage.success('诊断信息已保存');
|
||||
formRef.value.resetFields();
|
||||
} catch (error) {
|
||||
DMessage.error('保存失败，请重试');
|
||||
}
|
||||
};
|
||||
|
||||
// 重置表单
|
||||
const onReset = () => {
|
||||
formRef.value.resetFields();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fetchPatient();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bg-grey-50 { background-color: #F9FAFB; }
|
||||
.mb-6 { margin-bottom: 24px; }
|
||||
.mt-4 { margin-top: 16px; }
|
||||
.p-6 { padding: 24px; }
|
||||
.min-h-screen { min-height: 100vh; }
|
||||
</style>
|
||||
157
front/src/pages/zl-station/menjizhenItem-tabs/tab3.vue
Normal file
157
front/src/pages/zl-station/menjizhenItem-tabs/tab3.vue
Normal file
@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<d-layout direction="column" class="p-6 bg-grey-50 min-h-screen">
|
||||
<d-breadcrumb :items="['首页', '处方管理']" />
|
||||
<d-card class="mt-4">
|
||||
<template #title>处方管理</template>
|
||||
<d-card-body>
|
||||
<!-- 操作按钮 -->
|
||||
<div class="flex justify-end mb-4">
|
||||
<d-button variant="solid" @click="showForm = true">新建处方</d-button>
|
||||
</div>
|
||||
<!-- 处方列表 -->
|
||||
<d-table
|
||||
:columns="columns"
|
||||
:data="prescriptions"
|
||||
row-key="id"
|
||||
:show-index="true"
|
||||
>
|
||||
<template #operation="{ row }">
|
||||
<d-space>
|
||||
<d-button size="small" @click="onEdit(row)">编辑</d-button>
|
||||
<d-button size="small" variant="text" @click="onDelete(row.id)">删除</d-button>
|
||||
</d-space>
|
||||
</template>
|
||||
</d-table>
|
||||
|
||||
<!-- 新建/编辑 弹窗 -->
|
||||
<d-dialog v-model:show="showForm" title="{{ editMode ? '编辑处方' : '新建处方' }}">
|
||||
<d-form layout="vertical" ref="formRef" :data="form">
|
||||
<d-form-item field="patientName" label="患者姓名" required>
|
||||
<d-input v-model="form.patientName" placeholder="请输入患者姓名" />
|
||||
</d-form-item>
|
||||
<d-form-item field="date" label="开具日期" required>
|
||||
<d-date-picker-pro v-model="form.date" placeholder="选择日期" />
|
||||
</d-form-item>
|
||||
<d-form-item field="medications" label="药品列表" required>
|
||||
<d-space direction="vertical" style="width:100%">
|
||||
<div v-for="(item, idx) in form.medications" :key="idx" class="flex items-center space-x-2">
|
||||
<d-input v-model="item.name" placeholder="药品名称" />
|
||||
<d-input v-model="item.dosage" placeholder="用量" />
|
||||
<d-input v-model="item.frequency" placeholder="频次" />
|
||||
<d-input-number v-model="item.quantity" :min="1" />
|
||||
<d-button size="small" variant="text" @click="removeMedication(idx)">删除</d-button>
|
||||
</div>
|
||||
<d-button size="small" variant="text" @click="addMedication">+ 添加药品</d-button>
|
||||
</d-space>
|
||||
</d-form-item>
|
||||
</d-form>
|
||||
<template #footer>
|
||||
<d-space class="justify-end">
|
||||
<d-button @click="onClose">取消</d-button>
|
||||
<d-button variant="solid" @click="onSubmit">保存</d-button>
|
||||
</d-space>
|
||||
</template>
|
||||
</d-dialog>
|
||||
</d-card-body>
|
||||
</d-card>
|
||||
</d-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, onMounted } from 'vue';
|
||||
|
||||
interface Medication {
|
||||
name: string;
|
||||
dosage: string;
|
||||
frequency: string;
|
||||
quantity: number;
|
||||
}
|
||||
interface Prescription {
|
||||
id: number;
|
||||
patientName: string;
|
||||
date: string;
|
||||
medications: Medication[];
|
||||
}
|
||||
|
||||
// 列配置
|
||||
const columns = [
|
||||
{ title: '患者姓名', key: 'patientName' },
|
||||
{ title: '开具日期', key: 'date' },
|
||||
{ title: '药品数量', key: 'medications', render: (row: Prescription) => row.medications.length },
|
||||
{ title: '操作', key: 'operation', render: 'operation' }
|
||||
];
|
||||
|
||||
// 数据状态
|
||||
const prescriptions = ref<Prescription[]>([]);
|
||||
const showForm = ref(false);
|
||||
const editMode = ref(false);
|
||||
const formRef = ref<any>(null);
|
||||
|
||||
const form = reactive<Prescription>({
|
||||
id: 0,
|
||||
patientName: '',
|
||||
date: '',
|
||||
medications: []
|
||||
});
|
||||
|
||||
// 初始化：加载处方列表
|
||||
onMounted(() => {
|
||||
// TODO: 从接口获取列表
|
||||
prescriptions.value = [];
|
||||
});
|
||||
|
||||
const addMedication = () => {
|
||||
form.medications.push({ name: '', dosage: '', frequency: '', quantity: 1 });
|
||||
};
|
||||
|
||||
const removeMedication = (idx: number) => {
|
||||
form.medications.splice(idx, 1);
|
||||
};
|
||||
|
||||
const onEdit = (row: Prescription) => {
|
||||
editMode.value = true;
|
||||
Object.assign(form, { ...row, medications: JSON.parse(JSON.stringify(row.medications)) });
|
||||
showForm.value = true;
|
||||
};
|
||||
|
||||
const onDelete = (id: number) => {
|
||||
// TODO: 调用删除接口
|
||||
prescriptions.value = prescriptions.value.filter(p => p.id !== id);
|
||||
DMessage.success('处方已删除');
|
||||
};
|
||||
|
||||
const onClose = () => {
|
||||
showForm.value = false;
|
||||
formRef.value.resetFields();
|
||||
};
|
||||
|
||||
const onSubmit = () => {
|
||||
formRef.value.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
if (editMode.value) {
|
||||
// 更新
|
||||
const idx = prescriptions.value.findIndex(p => p.id === form.id);
|
||||
prescriptions.value[idx] = JSON.parse(JSON.stringify(form));
|
||||
DMessage.success('处方已更新');
|
||||
} else {
|
||||
// 新增
|
||||
form.id = Date.now();
|
||||
prescriptions.value.push(JSON.parse(JSON.stringify(form)));
|
||||
DMessage.success('处方已创建');
|
||||
}
|
||||
onClose();
|
||||
editMode.value = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bg-grey-50 { background-color: #F9FAFB; }
|
||||
.mb-4 { margin-bottom: 16px; }
|
||||
.mt-4 { margin-top: 16px; }
|
||||
.p-6 { padding: 24px; }
|
||||
.min-h-screen { min-height: 100vh; }
|
||||
.justify-end { justify-content: flex-end; }
|
||||
.flex { display: flex; }
|
||||
</style>
|
||||
118
front/src/pages/zl-station/menjizhenItem-tabs/tab4.vue
Normal file
118
front/src/pages/zl-station/menjizhenItem-tabs/tab4.vue
Normal file
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<d-layout direction="column" class="p-6 bg-grey-50 min-h-screen">
|
||||
<d-breadcrumb :items="['首页', '申请单管理', '新建申请单']" />
|
||||
<d-card class="mt-4">
|
||||
<template #title>申请单</template>
|
||||
<d-card-body>
|
||||
<d-form layout="vertical" ref="formRef" :data="form">
|
||||
<!-- 申请单编号 -->
|
||||
<d-form-item field="requestNo" label="申请单编号" required>
|
||||
<d-input v-model="form.requestNo" disabled />
|
||||
</d-form-item>
|
||||
<!-- 申请类型 -->
|
||||
<d-form-item field="requestType" label="申请类型" required>
|
||||
<d-select v-model="form.requestType" placeholder="请选择申请类型">
|
||||
<d-option v-for="opt in typeOptions" :key="opt.value" :value="opt.value">
|
||||
{{ opt.label }}
|
||||
</d-option>
|
||||
</d-select>
|
||||
</d-form-item>
|
||||
<!-- 患者信息 -->
|
||||
<d-form-item field="patientName" label="患者姓名" required>
|
||||
<d-input v-model="form.patientName" placeholder="请输入患者姓名" />
|
||||
</d-form-item>
|
||||
<d-form-item field="recordNo" label="病历号" required>
|
||||
<d-input v-model="form.recordNo" placeholder="请输入病历号" />
|
||||
</d-form-item>
|
||||
<!-- 申请日期 -->
|
||||
<d-form-item field="date" label="申请日期" required>
|
||||
<d-date-picker-pro v-model="form.date" placeholder="选择日期" />
|
||||
</d-form-item>
|
||||
<!-- 申请原因 -->
|
||||
<d-form-item field="reason" label="申请原因" required>
|
||||
<d-textarea v-model="form.reason" placeholder="请输入申请原因" rows="4" />
|
||||
</d-form-item>
|
||||
<!-- 附件上传 -->
|
||||
<d-form-item field="attachments" label="附件上传">
|
||||
<d-upload
|
||||
v-model:file-list="form.attachments"
|
||||
:action="uploadAction"
|
||||
multiple
|
||||
list-type="text"
|
||||
/>
|
||||
</d-form-item>
|
||||
<!-- 操作按钮 -->
|
||||
<d-form-operation>
|
||||
<d-button variant="solid" @click="onSubmit">保存</d-button>
|
||||
<d-button @click="onReset">重置</d-button>
|
||||
</d-form-operation>
|
||||
</d-form>
|
||||
</d-card-body>
|
||||
</d-card>
|
||||
</d-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, onMounted } from 'vue';
|
||||
|
||||
|
||||
// 表单数据
|
||||
const form = reactive({
|
||||
requestNo: '',
|
||||
requestType: '',
|
||||
patientName: '',
|
||||
recordNo: '',
|
||||
date: '',
|
||||
reason: '',
|
||||
attachments: [] as Array<{name: string; url: string;}>
|
||||
});
|
||||
|
||||
// 下拉选项
|
||||
const typeOptions = [
|
||||
{ label: '检验申请', value: 'lab' },
|
||||
{ label: '检查申请', value: 'exam' },
|
||||
{ label: '医疗物资申请', value: 'supply' },
|
||||
{ label: '其他', value: 'other' }
|
||||
];
|
||||
|
||||
// 表单引用
|
||||
const formRef = ref<any>(null);
|
||||
// 上传接口（示例）
|
||||
const uploadAction = '/api/upload';
|
||||
|
||||
// 生成申请单编号
|
||||
const generateRequestNo = () => {
|
||||
const ts = Date.now();
|
||||
return `REQ${ts}`;
|
||||
};
|
||||
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
formRef.value.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
// TODO: 调用后端接口提交申请单
|
||||
DMessage.success('申请单已保存');
|
||||
onReset();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 重置
|
||||
const onReset = () => {
|
||||
formRef.value.resetFields();
|
||||
form.requestNo = generateRequestNo();
|
||||
form.date = new Date().toISOString().split('T')[0];
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
form.requestNo = generateRequestNo();
|
||||
form.date = new Date().toISOString().split('T')[0];
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bg-grey-50 { background-color: #F9FAFB; }
|
||||
.mt-4 { margin-top: 16px; }
|
||||
.p-6 { padding: 24px; }
|
||||
.min-h-screen { min-height: 100vh; }
|
||||
</style>
|
||||
150
front/src/pages/zl-station/menjizhenItem-tabs/tab5.vue
Normal file
150
front/src/pages/zl-station/menjizhenItem-tabs/tab5.vue
Normal file
@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<d-layout direction="column" class="p-6 bg-grey-50 min-h-screen">
|
||||
<d-breadcrumb :items="['首页', '病历管理', '历史病史']" />
|
||||
<d-card class="mt-4">
|
||||
<template #title>历史病史</template>
|
||||
<d-card-body>
|
||||
<!-- 过滤条件 -->
|
||||
<d-form layout="inline" :data="filters" class="mb-4">
|
||||
<d-form-item field="patientName" label="患者姓名">
|
||||
<d-input v-model="filters.patientName" placeholder="请输入患者姓名" />
|
||||
</d-form-item>
|
||||
<d-form-item field="dateRange" label="就诊日期">
|
||||
<d-range-picker v-model="filters.dateRange" placeholder="选择日期范围" />
|
||||
</d-form-item>
|
||||
<d-form-operation>
|
||||
<d-button variant="solid" @click="onSearch">搜索</d-button>
|
||||
<d-button @click="onResetFilters">重置</d-button>
|
||||
</d-form-operation>
|
||||
</d-form>
|
||||
|
||||
<!-- 历史记录列表 -->
|
||||
<d-table
|
||||
:columns="columns"
|
||||
:data="records"
|
||||
row-key="id"
|
||||
:show-index="true"
|
||||
class="mb-4"
|
||||
>
|
||||
<template #operation="{ row }">
|
||||
<d-button size="small" @click="viewDetail(row)">查看</d-button>
|
||||
</template>
|
||||
</d-table>
|
||||
|
||||
<!-- 查看详情弹窗 -->
|
||||
<d-dialog v-model:show="showDetail" title="病史详情" width="600px">
|
||||
<d-card-body>
|
||||
<p><strong>患者姓名：</strong>{{ detail.patientName }}</p>
|
||||
<p><strong>就诊日期：</strong>{{ detail.date }}</p>
|
||||
<p><strong>主诉：</strong>{{ detail.chiefComplaint }}</p>
|
||||
<p><strong>现病史：</strong>{{ detail.historyPresentIllness }}</p>
|
||||
<p><strong>初步诊断：</strong>{{ detail.preliminaryDiagnosis }}</p>
|
||||
<p><strong>治疗计划：</strong>{{ detail.treatmentPlan }}</p>
|
||||
</d-card-body>
|
||||
<template #footer>
|
||||
<d-button variant="solid" @click="showDetail = false">关闭</d-button>
|
||||
</template>
|
||||
</d-dialog>
|
||||
</d-card-body>
|
||||
</d-card>
|
||||
</d-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, onMounted } from 'vue';
|
||||
|
||||
|
||||
interface HistoryRecord {
|
||||
id: number;
|
||||
patientName: string;
|
||||
date: string;
|
||||
chiefComplaint: string;
|
||||
historyPresentIllness: string;
|
||||
preliminaryDiagnosis: string;
|
||||
treatmentPlan: string;
|
||||
}
|
||||
|
||||
// 过滤条件
|
||||
const filters = reactive({
|
||||
patientName: '',
|
||||
dateRange: [] as string[]
|
||||
});
|
||||
|
||||
// 表格数据
|
||||
const records = ref<HistoryRecord[]>([]);
|
||||
|
||||
// 列配置
|
||||
const columns = [
|
||||
{ title: '患者姓名', key: 'patientName' },
|
||||
{ title: '就诊日期', key: 'date' },
|
||||
{ title: '初步诊断', key: 'preliminaryDiagnosis' },
|
||||
{ title: '操作', key: 'operation', render: 'operation' }
|
||||
];
|
||||
|
||||
// 详情弹窗
|
||||
const showDetail = ref(false);
|
||||
const detail = reactive<HistoryRecord>({
|
||||
id: 0,
|
||||
patientName: '',
|
||||
date: '',
|
||||
chiefComplaint: '',
|
||||
historyPresentIllness: '',
|
||||
preliminaryDiagnosis: '',
|
||||
treatmentPlan: ''
|
||||
});
|
||||
|
||||
// 模拟接口：加载历史病史
|
||||
const fetchRecords = async () => {
|
||||
// TODO: 调用后端接口并根据 filters 过滤
|
||||
records.value = [
|
||||
{
|
||||
id: 1,
|
||||
patientName: '张三',
|
||||
date: '2025-04-10',
|
||||
chiefComplaint: '头痛',
|
||||
historyPresentIllness: '一周反复头痛',
|
||||
preliminaryDiagnosis: '偏头痛',
|
||||
treatmentPlan: '口服止痛药'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
patientName: '李四',
|
||||
date: '2025-03-22',
|
||||
chiefComplaint: '咳嗽',
|
||||
historyPresentIllness: '持续两周',
|
||||
preliminaryDiagnosis: '急性支气管炎',
|
||||
treatmentPlan: '咳嗽药水'
|
||||
}
|
||||
];
|
||||
};
|
||||
|
||||
// 搜索
|
||||
const onSearch = () => {
|
||||
fetchRecords();
|
||||
};
|
||||
|
||||
// 重置过滤
|
||||
const onResetFilters = () => {
|
||||
filters.patientName = '';
|
||||
filters.dateRange = [];
|
||||
fetchRecords();
|
||||
};
|
||||
|
||||
// 查看详情
|
||||
const viewDetail = (row: HistoryRecord) => {
|
||||
Object.assign(detail, row);
|
||||
showDetail.value = true;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fetchRecords();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bg-grey-50 { background-color: #F9FAFB; }
|
||||
.mb-4 { margin-bottom: 16px; }
|
||||
.mt-4 { margin-top: 16px; }
|
||||
.p-6 { padding: 24px; }
|
||||
.min-h-screen { min-height: 100vh; }
|
||||
</style>
|
||||
250
front/src/pages/zl-station/menjizhenItemView.vue
Normal file
250
front/src/pages/zl-station/menjizhenItemView.vue
Normal file
@ -0,0 +1,250 @@
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import tab2 from '@/pages/zl-station/menjizhenItem-tabs/tab2.vue';
|
||||
import tab3 from '@/pages/zl-station/menjizhenItem-tabs/tab3.vue';
|
||||
import tab4 from '@/pages/zl-station/menjizhenItem-tabs/tab4.vue';
|
||||
import tab5 from "@/pages/zl-station/menjizhenItem-tabs/tab5.vue";
|
||||
// 病人候选下拉框
|
||||
const value1 = ref('');
|
||||
const value2 = ref('');
|
||||
const value3 = ref('');
|
||||
const value4 = ref('');
|
||||
const items = [
|
||||
{ value: '510123456789012345', name: '张三' },
|
||||
{ value: '510123456789012342', name: '李四' },
|
||||
{ value: '510123456789012346', name: '王五' },
|
||||
{ value: '510123456789012347', name: '赵六' },
|
||||
{ value: '510123456789012348', name: '田七' },
|
||||
{ value: '510123456789012349', name: '周八' },
|
||||
{ value: '510123456789012350', name: '吴九' },
|
||||
{ value: '510123456789012351', name: '郑十' },
|
||||
{ value: '510123456789012352', name: '冯十一' },
|
||||
{ value: '510123456789012353', name: '陈十二' },
|
||||
{ value: '510123456789012354', name: '褚十三' },
|
||||
{ value: '510123456789012355', name: '卫十四' },
|
||||
{ value: '510123456789012356', name: '蒋十五' },
|
||||
{ value: '510123456789012357', name: '沈十六' },
|
||||
{ value: '510123456789012358', name: '韩十七' },
|
||||
{ value: '510123456789012359', name: '杨十八' },
|
||||
{ value: '510123456789012360', name: '朱十九' },
|
||||
{ value: '510123456789012361', name: '秦二十' },
|
||||
{ value: '510123456789012362', name: '尤二十一' },
|
||||
{ value: '510123456789012363', name: '许二十二' },
|
||||
{ value: '510123456789012364', name: '何二十三' },
|
||||
{ value: '510123456789012365', name: '吕二十四' },
|
||||
];
|
||||
const items2 = [
|
||||
{ value: '510123456789012366', name: '施二十五' },
|
||||
{ value: '510123456789012367', name: '张二十六' },
|
||||
{ value: '510123456789012368', name: '孙二十七' },
|
||||
{ value: '510123456789012369', name: '曹二十八' },
|
||||
{ value: '510123456789012370', name: '严二十九' },
|
||||
{ value: '510123456789012371', name: '华三十' },
|
||||
{ value: '510123456789012372', name: '邱三十一' },
|
||||
{ value: '510123456789012373', name: '高三十二' },
|
||||
{ value: '510123456789012374', name: '林三十三' },
|
||||
];
|
||||
const options = reactive({
|
||||
data: items,
|
||||
});
|
||||
const options2 = reactive({
|
||||
data: items2,
|
||||
});
|
||||
//单选框分组
|
||||
const groupFilterList1 = ref(['全天', '上午', '下午']);
|
||||
let groupFilterChoose1 = ref('全天');
|
||||
|
||||
// 分割器
|
||||
const collapsed = ref(false);
|
||||
const disableBarSize = '2px';
|
||||
|
||||
const sizeChange = (size) => {
|
||||
console.log(size);
|
||||
};
|
||||
|
||||
// tab切换
|
||||
const id = ref('tab1');
|
||||
|
||||
//X-EMR-VUE
|
||||
|
||||
const patient = ref({})
|
||||
|
||||
var editor = null
|
||||
//加载编辑器
|
||||
const onLoad = (e) => {
|
||||
editor = e.target.contentWindow.editor
|
||||
|
||||
setTimeout(()=>{
|
||||
//异步加载文档
|
||||
editor.loadUrl('/mock/bind_data.html').then(()=>{
|
||||
patient.value = editor.getBindObject()
|
||||
})
|
||||
//文档输入后表单值随着变化
|
||||
editor.document.addEventListener('input', ()=>{
|
||||
patient.value = editor.getBindObject()
|
||||
})
|
||||
}, 0)
|
||||
|
||||
}
|
||||
|
||||
//表单数据改变
|
||||
const bindData = () => {
|
||||
editor.setBindObject(patient.value)
|
||||
}
|
||||
|
||||
|
||||
const getNameByValue = (value) => {
|
||||
const item = items.find((item) => item.value === value);
|
||||
if(item){
|
||||
return item.name;
|
||||
}
|
||||
else{
|
||||
const item = items2.find((item) => item.value === value);
|
||||
if(item){
|
||||
return item.name;
|
||||
}else{
|
||||
return null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleInput = (value) => {
|
||||
console.log(value1["value"]);
|
||||
console.log(getNameByValue(value1["value"]))
|
||||
patient.value.pat_name = getNameByValue(value1["value"]);
|
||||
editor.setBindObject(patient.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<d-splitter style="height: 1000px" class="splitter-border" orientation="vertical" :disableBarSize="disableBarSize">
|
||||
<template v-slot:DSplitterPane>
|
||||
<d-splitter-pane size="30px" minSize="30px" maxSize="50px" :collapsed="collapsed" :collapsible="true" @sizeChange="sizeChange">
|
||||
<div class="pane-content">
|
||||
<d-radio-group class="mb-2 patient" direction="row" v-model="groupFilterChoose1" >
|
||||
<d-radio v-for="item in groupFilterList1" :key="item" :value="item">
|
||||
{{ item }}
|
||||
</d-radio>
|
||||
</d-radio-group>
|
||||
<d-select size="sm" class="mb-2 patient patient-select" v-model="value1" overview="underlined" placeholder="请选择患者" :allow-clear="true" filter @value-change="handleInput">
|
||||
<d-option-group label="待诊病人">
|
||||
<d-option v-for="(item, index) in options.data" :key="index" :value="item.value" :name="item.name"></d-option>
|
||||
</d-option-group>
|
||||
<d-option-group label="已诊病人">
|
||||
<d-option v-for="(item, index) in options2.data" :key="index" :value="item.value" :name="item.name"></d-option>
|
||||
</d-option-group>
|
||||
</d-select>
|
||||
<d-button size="sm" class="patient">患者管理</d-button>
|
||||
</div>
|
||||
</d-splitter-pane>
|
||||
<d-splitter-pane style="overflow: hidden">
|
||||
<div class="pane-content">
|
||||
<d-tabs v-model="id" custom-width="100px">
|
||||
<d-tab id="tab1" title="门诊病历">
|
||||
<d-row>
|
||||
<d-col :span="16">
|
||||
<Editor @load="onLoad" style="margin: 10px 0;"></Editor>
|
||||
</d-col>
|
||||
<d-col :span="8">
|
||||
<d-card style="margin: 10px;">
|
||||
<d-form @change="bindData()" label-width="auto">
|
||||
<d-form-item label="姓名">
|
||||
<d-input v-model="patient.pat_name" ></d-input>
|
||||
</d-form-item>
|
||||
<d-form-item label="性别">
|
||||
<d-input v-model="patient.pat_sex"></d-input>
|
||||
</d-form-item>
|
||||
<d-form-item label="年龄">
|
||||
<d-input v-model="patient.pat_age"></d-input>
|
||||
</d-form-item>
|
||||
<d-form-item label="就诊科室">
|
||||
<d-input v-model="patient.visit_dept"></d-input>
|
||||
</d-form-item>
|
||||
<d-form-item label="就诊号">
|
||||
<d-input v-model="patient.pat_id"></d-input>
|
||||
</d-form-item>
|
||||
<d-form-item label="就诊时间">
|
||||
<d-date-picker-pro v-model="patient.visit_time" format="YYYY-MM-DD hh:mm"></d-date-picker-pro>
|
||||
<d-radio-group v-model="patient.firstcall" style="margin-left: 10px;">
|
||||
<d-radio value="1">初诊</d-radio>
|
||||
<d-radio value="2">复诊</d-radio>
|
||||
</d-radio-group>
|
||||
</d-form-item>
|
||||
<d-form-item label="联系电话">
|
||||
<d-input v-model="patient.pat_phone"></d-input>
|
||||
</d-form-item>
|
||||
<d-form-item label=" 家庭住址">
|
||||
<d-input v-model="patient.pat_address"></d-input>
|
||||
</d-form-item>
|
||||
<d-form-item label=" 主诉">
|
||||
<d-input v-model="patient.pat_appeal"></d-input>
|
||||
</d-form-item>
|
||||
<d-form-item label=" 现病史">
|
||||
<d-input v-model="patient.pat_now_history"></d-input>
|
||||
</d-form-item>
|
||||
<d-form-item label=" 既往史">
|
||||
<d-input v-model="patient.pat_past_history"></d-input>
|
||||
</d-form-item>
|
||||
<d-form-item label=" 过敏史">
|
||||
<d-input v-model="patient.pat_allergy_history"></d-input>
|
||||
</d-form-item>
|
||||
<d-form-item label=" 诊断">
|
||||
<d-input v-model="patient.diagnosis"></d-input>
|
||||
</d-form-item>
|
||||
<d-form-item label=" 处方">
|
||||
<d-input v-model="patient.presc" type="textarea"></d-input>
|
||||
</d-form-item>
|
||||
<d-form-item label=" 建议">
|
||||
<d-input v-model="patient.advice"></d-input>
|
||||
</d-form-item>
|
||||
<d-form-item label=" 医生签字">
|
||||
<d-input v-model="patient.doctor_name"></d-input>
|
||||
</d-form-item>
|
||||
</d-form>
|
||||
</d-card>
|
||||
</d-col>
|
||||
</d-row>
|
||||
</d-tab>
|
||||
<d-tab id="tab2" title="门诊诊断">
|
||||
<tab2></tab2>
|
||||
</d-tab>
|
||||
<d-tab id="tab3" title="处方管理">
|
||||
<tab3></tab3>
|
||||
</d-tab>
|
||||
<d-tab id="tab4" title="申请单">
|
||||
<tab4></tab4>
|
||||
</d-tab>
|
||||
<d-tab id="tab5" title="历史病历">
|
||||
<tab5></tab5>
|
||||
</d-tab>
|
||||
</d-tabs>
|
||||
</div>
|
||||
</d-splitter-pane>
|
||||
<!-- <d-splitter-pane size="150px" :resizable="false" :collapsible="true">-->
|
||||
<!-- <div class="pane-content">-->
|
||||
<!-- <h2>Bottom</h2>-->
|
||||
<!-- <div>height: 150px, resizable: false</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </d-splitter-pane>-->
|
||||
</template>
|
||||
</d-splitter>
|
||||
</section>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.patient-select {
|
||||
width: auto;
|
||||
}
|
||||
.patient {
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
margin-right: 16px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.pane-content {
|
||||
padding: 0 12px;
|
||||
}
|
||||
</style>
|
||||
231
front/src/pages/zl-station/zhuyuanItem/subItem.vue
Normal file
231
front/src/pages/zl-station/zhuyuanItem/subItem.vue
Normal file
@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<d-layout>
|
||||
<d-header>
|
||||
</d-header>
|
||||
<d-content>
|
||||
<div class="nav-buttons">
|
||||
<d-tabs v-model="id">
|
||||
<d-tab id="tab1" title="患者选择">
|
||||
<d-row>
|
||||
<d-col :span="24">
|
||||
<div class="sub-nav">
|
||||
<d-button variant="text" class="sub-btn">分管患者</d-button>
|
||||
<d-button variant="text" class="sub-btn">科室患者</d-button>
|
||||
<d-button variant="text" class="sub-btn">授权患者</d-button>
|
||||
<d-button variant="text" class="sub-btn">出院三天内患者</d-button>
|
||||
<d-button variant="text" class="sub-btn">出院三天未归档患者</d-button>
|
||||
<d-button variant="text" class="sub-btn">我关注的患者</d-button>
|
||||
<d-button variant="text" class="sub-btn">诊疗组患者</d-button>
|
||||
</div>
|
||||
</d-col>
|
||||
</d-row>
|
||||
|
||||
<d-row class="patient-cards">
|
||||
<!-- First Patient Card -->
|
||||
<d-col :xs="24" :sm="12" :md="8" :lg="6">
|
||||
<div class="patient-card">
|
||||
<div class="ribbon in-hospital"></div>
|
||||
<div class="card-header">
|
||||
<h3>17床</h3>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="patient-info">
|
||||
<div class="patient-name">张三 <span class="gender-age">男 43岁</span></div>
|
||||
<div class="patient-id">152322</div>
|
||||
<div class="history-note">无过敏史</div>
|
||||
<div class="admit-time">入院时间: 2022-11-02 04:18</div>
|
||||
<div class="insurance">费别信息: 医保</div>
|
||||
<div class="stay-days">住院天数: 4天</div>
|
||||
<div class="total-cost">费用合计: 4000.00</div>
|
||||
<div class="diagnosis">诊断信息: 糖尿病</div>
|
||||
<div class="doctor">管床医生: 张夫</div>
|
||||
<div class="nurse">责任护士:</div>
|
||||
<div class="danger-flag"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</d-col>
|
||||
|
||||
<!-- Second Patient Card -->
|
||||
<d-col :xs="24" :sm="12" :md="8" :lg="6">
|
||||
<div class="patient-card">
|
||||
<div class="ribbon new-patient"></div>
|
||||
<div class="card-header">
|
||||
<h3>+01床</h3>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="patient-info">
|
||||
<div class="patient-name">李四 <span class="gender-age">女 34岁</span></div>
|
||||
<div class="patient-id">152323</div>
|
||||
<div class="history-note">无过敏史</div>
|
||||
<div class="admit-time">入院时间: 2022-11-01 17:11</div>
|
||||
<div class="insurance">费别信息: 医保</div>
|
||||
<div class="stay-days">住院天数: 12天</div>
|
||||
<div class="total-cost">费用合计: ¥5000.22</div>
|
||||
<div class="diagnosis">诊断信息: I型呼吸衰竭</div>
|
||||
<div class="doctor">管床医生: 王俊</div>
|
||||
<div class="nurse">责任护士:</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</d-col>
|
||||
</d-row>
|
||||
|
||||
</d-tab>
|
||||
<d-tab id="tab2" title="住院医嘱"><tab2></tab2></d-tab>
|
||||
<d-tab id="tab3" title="诊断手术"><tab3></tab3></d-tab>
|
||||
<d-tab id="tab4" title="住院病历"><tab4></tab4></d-tab>
|
||||
<d-tab id="tab5" title="医嘱单打印"><tab5></tab5></d-tab>
|
||||
<d-tab id="tab6" title="申请单"><tab6></tab6></d-tab>
|
||||
<d-tab id="tab7" title="历史信息"></d-tab>
|
||||
<d-tab id="tab8" title="临床路径"></d-tab>
|
||||
<d-tab id="tab9" title="科研随访"></d-tab>
|
||||
</d-tabs>
|
||||
</div>
|
||||
|
||||
</d-content>
|
||||
</d-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
import Tab2 from "@/pages/zl-station/zhuyuanItem/tabs/tab2.vue";
|
||||
import Tab3 from "@/pages/zl-station/zhuyuanItem/tabs/tab3.vue";
|
||||
import Tab4 from "@/pages/zl-station/zhuyuanItem/tabs/tab4.vue";
|
||||
import Tab5 from "@/pages/zl-station/zhuyuanItem/tabs/tab5.vue";
|
||||
import Tab6 from "@/pages/zl-station/zhuyuanItem/tabs/tab6.vue";
|
||||
|
||||
export default {
|
||||
name: 'PatientManagementPage',
|
||||
components: {Tab6, Tab5, Tab4, Tab3, Tab2},
|
||||
data() {
|
||||
return {
|
||||
id: 'tab1',
|
||||
// Add reactive data if needed
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header-row {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.nav-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
background-color: #e6e6e6;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
margin-right: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sub-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #f5f5f5;
|
||||
padding: 8px;
|
||||
margin-bottom: 15px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sub-btn {
|
||||
margin-right: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.view-toggle {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.patient-cards {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.patient-card {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.ribbon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
transform: rotate(45deg);
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
.in-hospital {
|
||||
background-color: #2c8cf4;
|
||||
}
|
||||
|
||||
.new-patient {
|
||||
background-color: #ff5c4a;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 10px;
|
||||
background-color: #f9f9f9;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.card-header h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.patient-info > div {
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.patient-name {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.gender-age {
|
||||
font-weight: normal;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.patient-id {
|
||||
color: #2c8cf4;
|
||||
}
|
||||
|
||||
.history-note {
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
.diagnosis {
|
||||
color: #2c8cf4;
|
||||
}
|
||||
|
||||
.danger-flag {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
color: #ff5c4a;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
407
front/src/pages/zl-station/zhuyuanItem/tabs/tab2.vue
Normal file
407
front/src/pages/zl-station/zhuyuanItem/tabs/tab2.vue
Normal file
@ -0,0 +1,407 @@
|
||||
<template>
|
||||
<div class="medical-orders-page">
|
||||
<!-- Top Toolbar -->
|
||||
<div class="toolbar">
|
||||
<d-button class="tool-button" icon="document">开立</d-button>
|
||||
<d-button class="tool-button" icon="pause-circle">暂停/停止</d-button>
|
||||
<d-button class="tool-button" icon="select-all">全停</d-button>
|
||||
<d-button class="tool-button" icon="link">组合</d-button>
|
||||
<d-button class="tool-button" icon="prescription">草药</d-button>
|
||||
<d-button class="tool-button" icon="save">保存</d-button>
|
||||
<d-button class="tool-button" icon="increase">追加</d-button>
|
||||
<d-button class="tool-button" icon="return">退出</d-button>
|
||||
<d-button class="tool-button" icon="refresh">刷新</d-button>
|
||||
<d-button class="tool-button" icon="list">保存模板</d-button>
|
||||
<d-button class="tool-button" icon="medicine">抗菌药</d-button>
|
||||
<d-button class="tool-button" icon="edit">手术</d-button>
|
||||
<d-button class="tool-button" icon="calendar">预约</d-button>
|
||||
<d-button class="tool-button" icon="print">打印</d-button>
|
||||
<d-dropdown class="more-actions">
|
||||
<d-button icon="more"></d-button>
|
||||
</d-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- Tab Navigation -->
|
||||
<d-tabs type="pills">
|
||||
<d-tab title="开立医嘱" active></d-tab>
|
||||
<d-tab title="长期医嘱"></d-tab>
|
||||
<d-tab title="临时医嘱"></d-tab>
|
||||
</d-tabs>
|
||||
|
||||
<!-- Orders Table -->
|
||||
<div class="table-container">
|
||||
<d-data-table :columns="columns" :data="tableData" stripe bordered>
|
||||
<!-- Custom checkbox column -->
|
||||
<template #cell-selection="scope">
|
||||
<d-checkbox v-model="scope.row.selected"></d-checkbox>
|
||||
</template>
|
||||
</d-data-table>
|
||||
</div>
|
||||
|
||||
<!-- Status Indicators -->
|
||||
<div class="status-indicators">
|
||||
<div class="status-item">
|
||||
<span class="status-dot not-submitted"></span>
|
||||
<span>未提交</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="status-dot newly-created"></span>
|
||||
<span>新开立</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="status-dot executed"></span>
|
||||
<span>已审核</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="status-dot in-progress"></span>
|
||||
<span>已执行</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="status-dot stopped"></span>
|
||||
<span>停止/作废</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="status-dot scheduled"></span>
|
||||
<span>预停止</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="status-dot displayed"></span>
|
||||
<span>全部显示</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="status-dot available"></span>
|
||||
<span>有效医嘱</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Area -->
|
||||
<div class="form-area">
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<label>医嘱类型:</label>
|
||||
<d-select v-model="orderForm.type" class="form-control">
|
||||
<d-option value="长期医嘱">长期医嘱</d-option>
|
||||
<d-option value="临时医嘱">临时医嘱</d-option>
|
||||
</d-select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>文字医嘱</label>
|
||||
<d-input v-model="orderForm.textOrder" placeholder="输入"></d-input>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>名称:</label>
|
||||
<d-input v-model="orderForm.name"></d-input>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>数量:</label>
|
||||
<d-input-number v-model="orderForm.quantity" :min="0"></d-input-number>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<label>每次用量:</label>
|
||||
<d-input v-model="orderForm.dosagePrefix" placeholder="开立数值"></d-input>
|
||||
<d-input v-model="orderForm.dosage" class="small-input"></d-input>
|
||||
<span>=</span>
|
||||
<d-input v-model="orderForm.dosageCalculated" class="small-input"></d-input>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>用法:</label>
|
||||
<d-select v-model="orderForm.usage" class="form-control">
|
||||
<d-option value="口服">口服</d-option>
|
||||
<d-option value="静脉注射">静脉注射</d-option>
|
||||
</d-select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>执行科室:</label>
|
||||
<d-select v-model="orderForm.department" class="form-control">
|
||||
<d-option value="药剂科">药剂科</d-option>
|
||||
<d-option value="护理部">护理部</d-option>
|
||||
</d-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<label>频次:</label>
|
||||
<d-select v-model="orderForm.frequency" class="form-control">
|
||||
<d-option value="每日一次">每日一次</d-option>
|
||||
<d-option value="每日两次">每日两次</d-option>
|
||||
</d-select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>首日量:</label>
|
||||
<d-input v-model="orderForm.firstDayDosage" placeholder="首日"></d-input>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>备注:</label>
|
||||
<d-select v-model="orderForm.remarks" class="form-control">
|
||||
<d-option value="饭前">饭前</d-option>
|
||||
<d-option value="饭后">饭后</d-option>
|
||||
</d-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<label>开始时间:</label>
|
||||
<d-date-picker
|
||||
v-model="orderForm.startDate"
|
||||
type="datetime"
|
||||
format="yyyy-MM-dd HH:mm"
|
||||
placeholder="选择日期时间"
|
||||
></d-date-picker>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>停止时间:</label>
|
||||
<d-checkbox v-model="orderForm.hasEndTime"></d-checkbox>
|
||||
<d-date-picker
|
||||
v-model="orderForm.endDate"
|
||||
type="datetime"
|
||||
format="yyyy-MM-dd HH:mm"
|
||||
placeholder="选择日期时间"
|
||||
:disabled="!orderForm.hasEndTime"
|
||||
></d-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MedicalOrdersPage',
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
field: 'selection',
|
||||
title: '',
|
||||
width: '50px'
|
||||
},
|
||||
{
|
||||
field: 'orderType',
|
||||
title: '医嘱类型',
|
||||
width: '100px'
|
||||
},
|
||||
{
|
||||
field: 'startTime',
|
||||
title: '开始时间',
|
||||
width: '150px'
|
||||
},
|
||||
{
|
||||
field: 'orderName',
|
||||
title: '医嘱名称',
|
||||
width: '250px'
|
||||
},
|
||||
{
|
||||
field: 'dosage',
|
||||
title: '每次用量',
|
||||
width: '100px'
|
||||
},
|
||||
{
|
||||
field: 'unit',
|
||||
title: '单位',
|
||||
width: '80px'
|
||||
},
|
||||
{
|
||||
field: 'group',
|
||||
title: '组合',
|
||||
width: '80px'
|
||||
},
|
||||
{
|
||||
field: 'usageMethod',
|
||||
title: '用法名称',
|
||||
width: '100px'
|
||||
},
|
||||
{
|
||||
field: 'frequency',
|
||||
title: '频次名称',
|
||||
width: '100px'
|
||||
},
|
||||
{
|
||||
field: 'stopPerson',
|
||||
title: '停止人',
|
||||
width: '100px'
|
||||
},
|
||||
{
|
||||
field: 'stopTime',
|
||||
title: '停止时间',
|
||||
width: '150px'
|
||||
},
|
||||
{
|
||||
field: 'creator',
|
||||
title: '开立医生',
|
||||
width: '100px'
|
||||
},
|
||||
{
|
||||
field: 'auditor',
|
||||
title: '审核人',
|
||||
width: '100px'
|
||||
},
|
||||
{
|
||||
field: 'executor',
|
||||
title: '执行人',
|
||||
width: '100px'
|
||||
},
|
||||
{
|
||||
field: 'firstDayDosage',
|
||||
title: '首日量',
|
||||
width: '80px'
|
||||
},
|
||||
{
|
||||
field: 'totalQuantity',
|
||||
title: '总量',
|
||||
width: '80px'
|
||||
},
|
||||
{
|
||||
field: 'totalAmount',
|
||||
title: '总量单位',
|
||||
width: '80px'
|
||||
}
|
||||
],
|
||||
tableData: [],
|
||||
orderForm: {
|
||||
type: '长期医嘱',
|
||||
textOrder: '',
|
||||
name: '',
|
||||
quantity: 0,
|
||||
dosagePrefix: '',
|
||||
dosage: '',
|
||||
dosageCalculated: '',
|
||||
usage: '',
|
||||
department: '',
|
||||
frequency: '',
|
||||
firstDayDosage: '',
|
||||
remarks: '',
|
||||
startDate: new Date('2025-04-23 11:31'),
|
||||
hasEndTime: false,
|
||||
endDate: new Date('2025-04-23 12:29')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.medical-orders-page {
|
||||
font-family: Arial, sans-serif;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.tool-button {
|
||||
font-size: 12px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
margin: 10px 0;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.status-indicators {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
padding: 10px 0;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.not-submitted {
|
||||
background-color: #8BC34A;
|
||||
border: 1px solid #558B2F;
|
||||
}
|
||||
|
||||
.newly-created {
|
||||
background-color: #4CAF50;
|
||||
border: 1px solid #2E7D32;
|
||||
}
|
||||
|
||||
.executed {
|
||||
background-color: #2196F3;
|
||||
border: 1px solid #1565C0;
|
||||
}
|
||||
|
||||
.in-progress {
|
||||
background-color: #FF9800;
|
||||
border: 1px solid #EF6C00;
|
||||
}
|
||||
|
||||
.stopped {
|
||||
background-color: #F44336;
|
||||
border: 1px solid #C62828;
|
||||
}
|
||||
|
||||
.scheduled {
|
||||
background-color: #9C27B0;
|
||||
border: 1px solid #6A1B9A;
|
||||
}
|
||||
|
||||
.displayed {
|
||||
background-color: #00BCD4;
|
||||
border: 1px solid #00838F;
|
||||
}
|
||||
|
||||
.available {
|
||||
background-color: #9E9E9E;
|
||||
border: 1px solid #616161;
|
||||
}
|
||||
|
||||
.form-area {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-item label {
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.small-input {
|
||||
width: 60px;
|
||||
}
|
||||
</style>
|
||||
407
front/src/pages/zl-station/zhuyuanItem/tabs/tab3.vue
Normal file
407
front/src/pages/zl-station/zhuyuanItem/tabs/tab3.vue
Normal file
@ -0,0 +1,407 @@
|
||||
<template>
|
||||
<div class="diagnosis-management-page">
|
||||
<!-- Top Toolbar -->
|
||||
<div class="toolbar">
|
||||
<d-button class="tool-button" icon="add-circle">新增</d-button>
|
||||
<d-button class="tool-button" icon="save">保存</d-button>
|
||||
<d-button class="tool-button" icon="copy">快速复制</d-button>
|
||||
</div>
|
||||
|
||||
<!-- Filter Options -->
|
||||
<div class="filter-section">
|
||||
<div class="filter-row">
|
||||
<span class="filter-label">分类</span>
|
||||
<d-radio-group v-model="filters.category" class="category-group">
|
||||
<d-radio value="西医"><span class="active-radio">西医</span></d-radio>
|
||||
<d-radio value="中医">中医</d-radio>
|
||||
</d-radio-group>
|
||||
|
||||
<span class="filter-label type-label">类型</span>
|
||||
<d-select v-model="filters.type" class="filter-select type-select">
|
||||
<d-option value="初步诊断">初步诊断</d-option>
|
||||
<d-option value="入院诊断">入院诊断</d-option>
|
||||
<d-option value="出院诊断">出院诊断</d-option>
|
||||
</d-select>
|
||||
</div>
|
||||
|
||||
<div class="filter-row">
|
||||
<span class="filter-label">诊断</span>
|
||||
<d-select v-model="filters.diagnosis" class="filter-select diagnosis-select">
|
||||
<d-option value="">请选择</d-option>
|
||||
</d-select>
|
||||
|
||||
<span class="filter-label desc-label">描述</span>
|
||||
<d-input v-model="filters.description" class="filter-input description-input"></d-input>
|
||||
</div>
|
||||
|
||||
<div class="filter-row">
|
||||
<span class="filter-label">入院病情</span>
|
||||
<d-select v-model="filters.admissionCondition" class="filter-select">
|
||||
<d-option value="">请选择</d-option>
|
||||
<d-option value="有">有</d-option>
|
||||
<d-option value="临床未确定">临床未确定</d-option>
|
||||
</d-select>
|
||||
|
||||
<span class="filter-label discharge-label">出院转归</span>
|
||||
<d-select v-model="filters.dischargeOutcome" class="filter-select">
|
||||
<d-option value="">请选择</d-option>
|
||||
<d-option value="好转">好转</d-option>
|
||||
<d-option value="死亡">死亡</d-option>
|
||||
</d-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Diagnosis List Section -->
|
||||
<div class="diagnosis-list-section">
|
||||
<div class="section-title">诊断列表</div>
|
||||
|
||||
<div class="diagnosis-filters">
|
||||
<d-button-group>
|
||||
<d-button variant="solid" class="filter-btn active">全部诊断</d-button>
|
||||
<d-button variant="solid" class="filter-btn">出院诊断</d-button>
|
||||
<d-button variant="solid" class="filter-btn">初步诊断</d-button>
|
||||
<d-button variant="solid" class="filter-btn">入院诊断</d-button>
|
||||
</d-button-group>
|
||||
</div>
|
||||
|
||||
<div class="table-actions">
|
||||
<d-button icon="delete" class="action-btn">删除</d-button>
|
||||
<d-button icon="arrow-up" class="action-btn">上移</d-button>
|
||||
<d-button icon="arrow-down" class="action-btn">下移</d-button>
|
||||
<d-button icon="add" class="action-btn">添加子诊断</d-button>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<d-data-table :columns="columns" :data="diagnosisData" bordered stripe :row-hover="true">
|
||||
<!-- Custom index column rendering -->
|
||||
<template #cell-index="{ rowIndex }">
|
||||
{{ rowIndex + 1 }}
|
||||
</template>
|
||||
</d-data-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Action Buttons -->
|
||||
<div class="bottom-actions">
|
||||
<d-button variant="solid" class="action-btn primary-btn">住院诊断</d-button>
|
||||
<d-button variant="solid" class="action-btn">住院手术</d-button>
|
||||
</div>
|
||||
|
||||
<!-- Right Side Panel: Common Diagnoses -->
|
||||
<div class="common-diagnoses-panel">
|
||||
<div class="panel-header">
|
||||
<span>常用诊断</span>
|
||||
<d-button icon="close" class="close-btn"></d-button>
|
||||
</div>
|
||||
|
||||
<div class="panel-tabs">
|
||||
<d-tabs>
|
||||
<d-tab title="科室常用诊断" active></d-tab>
|
||||
<d-tab title="个人常用诊断"></d-tab>
|
||||
</d-tabs>
|
||||
</div>
|
||||
|
||||
<div class="panel-content">
|
||||
<!-- Common diagnoses would be listed here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DiagnosisManagementPage',
|
||||
data() {
|
||||
return {
|
||||
filters: {
|
||||
category: '西医',
|
||||
type: '初步诊断',
|
||||
diagnosis: '',
|
||||
description: '',
|
||||
admissionCondition: '',
|
||||
dischargeOutcome: ''
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '',
|
||||
width: '40px'
|
||||
},
|
||||
{
|
||||
field: 'type',
|
||||
title: '类型',
|
||||
width: '100px'
|
||||
},
|
||||
{
|
||||
field: 'category',
|
||||
title: '分类',
|
||||
width: '100px'
|
||||
},
|
||||
{
|
||||
field: 'level',
|
||||
title: '',
|
||||
width: '40px'
|
||||
},
|
||||
{
|
||||
field: 'diagnosisName',
|
||||
title: '诊断名称',
|
||||
width: '200px'
|
||||
},
|
||||
{
|
||||
field: 'code',
|
||||
title: '编码',
|
||||
width: '120px'
|
||||
},
|
||||
{
|
||||
field: 'description',
|
||||
title: '诊断描述',
|
||||
width: '200px'
|
||||
},
|
||||
{
|
||||
field: 'admissionCondition',
|
||||
title: '入院病情',
|
||||
width: '100px'
|
||||
},
|
||||
{
|
||||
field: 'dischargeOutcome',
|
||||
title: '出院转归',
|
||||
width: '100px'
|
||||
},
|
||||
{
|
||||
field: 'recorder',
|
||||
title: '录入',
|
||||
width: '100px'
|
||||
}
|
||||
],
|
||||
diagnosisData: [
|
||||
{
|
||||
type: '出院诊断',
|
||||
category: '西医诊断',
|
||||
level: '主',
|
||||
diagnosisName: '代谢性酸中毒',
|
||||
code: 'E87.201',
|
||||
description: '代谢性酸中毒',
|
||||
admissionCondition: '有',
|
||||
dischargeOutcome: '好转',
|
||||
recorder: '杨婧颖'
|
||||
},
|
||||
{
|
||||
type: '初步诊断',
|
||||
category: '西医诊断',
|
||||
level: '主',
|
||||
diagnosisName: '痛风性肾病',
|
||||
code: 'M10.30x091',
|
||||
description: '痛风性肾病',
|
||||
admissionCondition: '有',
|
||||
dischargeOutcome: '死亡',
|
||||
recorder: '许林'
|
||||
},
|
||||
{
|
||||
type: '初步诊断',
|
||||
category: '西医诊断',
|
||||
level: '次',
|
||||
diagnosisName: '癌',
|
||||
code: 'D48.901',
|
||||
description: '癌',
|
||||
admissionCondition: '临床未确定',
|
||||
dischargeOutcome: '',
|
||||
recorder: '许林'
|
||||
},
|
||||
{
|
||||
type: '入院诊断',
|
||||
category: '西医诊断',
|
||||
level: '主',
|
||||
diagnosisName: '糖尿病',
|
||||
code: 'E14.900x001',
|
||||
description: '糖尿病',
|
||||
admissionCondition: '有',
|
||||
dischargeOutcome: '',
|
||||
recorder: '孔伟'
|
||||
},
|
||||
{
|
||||
type: '入院诊断',
|
||||
category: '西医诊断',
|
||||
level: '次',
|
||||
diagnosisName: '呼吸心跳骤停',
|
||||
code: 'I46.901',
|
||||
description: '呼吸心跳骤停',
|
||||
admissionCondition: '有',
|
||||
dischargeOutcome: '',
|
||||
recorder: '孔伟'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.diagnosis-management-page {
|
||||
font-family: Arial, sans-serif;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tool-button {
|
||||
font-size: 12px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
padding: 10px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
min-width: 50px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.type-label, .desc-label, .discharge-label {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.category-group {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.type-select {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.diagnosis-select {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.description-input {
|
||||
flex: 1;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.active-radio {
|
||||
color: #2196F3;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.diagnosis-list-section {
|
||||
margin-top: 20px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
padding: 10px;
|
||||
background-color: #f0f0f0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.diagnosis-filters {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
font-size: 12px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.filter-btn.active {
|
||||
background-color: #2196F3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.table-actions {
|
||||
padding: 5px 10px;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 12px;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.bottom-actions {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.common-diagnoses-panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
border-left: 1px solid #ddd;
|
||||
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
padding: 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.panel-tabs {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
391
front/src/pages/zl-station/zhuyuanItem/tabs/tab4.vue
Normal file
391
front/src/pages/zl-station/zhuyuanItem/tabs/tab4.vue
Normal file
@ -0,0 +1,391 @@
|
||||
<template>
|
||||
<div class="medical-records-page">
|
||||
<!-- Top Toolbar -->
|
||||
<div class="toolbar">
|
||||
<d-button class="tool-button" icon="file-text">病历数据</d-button>
|
||||
<d-button class="tool-button" icon="settings">设置默认打印机</d-button>
|
||||
<d-button class="tool-button" icon="printer">批量打印</d-button>
|
||||
<d-button class="tool-button" icon="plus-circle">新增会诊</d-button>
|
||||
<d-button class="tool-button" icon="file">设置文书模板</d-button>
|
||||
<d-button class="tool-button" icon="bar-chart">患者360</d-button>
|
||||
<d-button class="tool-button" icon="appstore">分屏</d-button>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="main-content">
|
||||
<!-- Left Side Navigation -->
|
||||
<div class="nav-panel">
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-header">
|
||||
<i class="icon-folder"></i>
|
||||
<span>入院记录</span>
|
||||
<i class="icon-triangle-down"></i>
|
||||
</div>
|
||||
<div class="nav-group-item selected">
|
||||
<i class="icon-file"></i>
|
||||
<span>[22/11/02]入院记录（西医）</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-header expanded">
|
||||
<i class="icon-folder-open"></i>
|
||||
<span>医疗沟通记录</span>
|
||||
<i class="icon-triangle-up"></i>
|
||||
</div>
|
||||
<div class="nav-group-item checked">
|
||||
<i class="icon-check-circle"></i>
|
||||
<span>[22/11/02]医疗沟通记录-入院</span>
|
||||
</div>
|
||||
<div class="nav-group-item checked">
|
||||
<i class="icon-check-circle"></i>
|
||||
<span>[22/11/02]医疗沟通记录-入院</span>
|
||||
</div>
|
||||
<div class="nav-group-item checked">
|
||||
<i class="icon-check-circle"></i>
|
||||
<span>[22/11/02]医疗沟通记录-入院</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-header expanded">
|
||||
<i class="icon-folder-open"></i>
|
||||
<span>病程记录</span>
|
||||
<i class="icon-triangle-up"></i>
|
||||
</div>
|
||||
<div class="nav-group-item checked">
|
||||
<i class="icon-check-circle"></i>
|
||||
<span>[22/11/02]首次病程记录已打印</span>
|
||||
</div>
|
||||
<div class="nav-group-item checked">
|
||||
<i class="icon-check-circle"></i>
|
||||
<span>[22/11/02]抢救记录已打印</span>
|
||||
</div>
|
||||
<div class="nav-group-item checked">
|
||||
<i class="icon-check-circle"></i>
|
||||
<span>[22/11/02]查房记录已打印</span>
|
||||
</div>
|
||||
<div class="nav-group-item">
|
||||
<i class="icon-file"></i>
|
||||
<span>[22/11/03]日常病程记录（补）</span>
|
||||
</div>
|
||||
<div class="nav-group-item">
|
||||
<i class="icon-file"></i>
|
||||
<span>[23/03/28]日常病程记录（补）</span>
|
||||
</div>
|
||||
<div class="nav-group-item">
|
||||
<i class="icon-file"></i>
|
||||
<span>[24/05/20]日常病程记录（补）</span>
|
||||
</div>
|
||||
<div class="nav-group-item">
|
||||
<i class="icon-file"></i>
|
||||
<span>[24/05/20]适用查房记录</span>
|
||||
</div>
|
||||
<div class="nav-group-item">
|
||||
<i class="icon-file"></i>
|
||||
<span>[25/03/25]日常病程记录（补）</span>
|
||||
</div>
|
||||
<div class="nav-group-item">
|
||||
<i class="icon-file"></i>
|
||||
<span>[25/04/08]MDT讨论记录</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-header">
|
||||
<i class="icon-folder"></i>
|
||||
<span>一般治疗处置记录</span>
|
||||
<i class="icon-triangle-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-header">
|
||||
<i class="icon-folder"></i>
|
||||
<span>会诊单</span>
|
||||
<i class="icon-triangle-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-header expanded">
|
||||
<i class="icon-folder-open"></i>
|
||||
<span>知情告知书</span>
|
||||
<i class="icon-triangle-up"></i>
|
||||
</div>
|
||||
<div class="nav-group-item checked">
|
||||
<i class="icon-check-circle"></i>
|
||||
<span>[22/11/02]医患双方不收和不付费告知书</span>
|
||||
</div>
|
||||
<div class="nav-group-item checked">
|
||||
<i class="icon-check-circle"></i>
|
||||
<span>[22/11/02]纤维支气管镜检查知情同意书</span>
|
||||
</div>
|
||||
<div class="nav-group-item checked">
|
||||
<i class="icon-check-circle"></i>
|
||||
<span>[22/11/02]中心静脉穿刺置管术知情同意书</span>
|
||||
</div>
|
||||
<div class="nav-group-item checked">
|
||||
<i class="icon-check-circle"></i>
|
||||
<span>[22/11/02]气管插管和机械通气治疗的知情同意书</span>
|
||||
</div>
|
||||
<div class="nav-group-item checked">
|
||||
<i class="icon-check-circle"></i>
|
||||
<span>[22/11/02]病危（重）通知书</span>
|
||||
</div>
|
||||
<div class="nav-group-item checked">
|
||||
<i class="icon-check-circle"></i>
|
||||
<span>[22/11/02]患者住院诊疗授权委托书</span>
|
||||
</div>
|
||||
<div class="nav-group-item">
|
||||
<i class="icon-file"></i>
|
||||
<span>[22/11/02]院前职工（城乡）居民医疗互助基金住院告知书</span>
|
||||
</div>
|
||||
<div class="nav-group-item checked">
|
||||
<i class="icon-check-circle"></i>
|
||||
<span>[22/11/02]医保沟通同意书</span>
|
||||
</div>
|
||||
<div class="nav-group-item">
|
||||
<i class="icon-file"></i>
|
||||
<span>[22/11/02]医保沟通同意书</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side Content Panel -->
|
||||
<div class="content-panel">
|
||||
<div class="panel-header">
|
||||
医院编辑
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<d-data-table :columns="columns" :data="tableData" bordered stripe>
|
||||
<!-- Custom styling for first row -->
|
||||
<template #row="{ row }">
|
||||
<tr :class="{ 'green-row': row.type === '日常病程记录', 'red-row': row.type === '出院记录' }">
|
||||
<td v-for="col in columns" :key="col.field">
|
||||
<div :class="{ 'green-text': row.type === '日常病程记录' && col.field === 'type',
|
||||
'red-text': row.type === '出院记录' && col.field === 'type' }">
|
||||
{{ row[col.field] }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</d-data-table>
|
||||
</div>
|
||||
<div class="bottom-actions">
|
||||
<d-button class="action-btn primary-btn">开始访</d-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MedicalRecordsPage',
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
field: 'type',
|
||||
title: '文档名称',
|
||||
width: '200px'
|
||||
},
|
||||
{
|
||||
field: 'description',
|
||||
title: '描述',
|
||||
width: '300px'
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '输出信息',
|
||||
width: '600px'
|
||||
}
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
type: '日常病程记录',
|
||||
description: '每3天记录一次病程记录',
|
||||
status: '2022-11-05到2022-11-08病程记录未完成，2022-11-08到2022-11-11病程记录未完成，2022-11-11到2022-11-14病程记录未完成'
|
||||
},
|
||||
{
|
||||
type: '日常病程记录',
|
||||
description: '入院定写3天病程记录',
|
||||
status: '2022-11-03到2022-11-04需要写病程记录，2022-11-04到2022-11-05需要写病程记录，2022-11-05到2022-11-06需要写病程记录'
|
||||
},
|
||||
{
|
||||
type: '出院记录',
|
||||
description: '出院记录入院时情况诊疗经过出院医嘱质控',
|
||||
status: '出院记录缺入院时情况，出院记录缺诊疗经过，'
|
||||
},
|
||||
{
|
||||
type: '首次病程记录',
|
||||
description: '首次病程病例特点鉴别诊断诊疗计划质控',
|
||||
status: '首次病程记录缺鉴别诊断，首次病程记录缺病情评估，'
|
||||
},
|
||||
{
|
||||
type: '入院记录',
|
||||
description: '手术史长度质控',
|
||||
status: '入院记录缺手术史，'
|
||||
},
|
||||
{
|
||||
type: '阶段小结',
|
||||
description: '每30天书写一次阶段小结',
|
||||
status: '2022-11-02到2022-12-02阶段小结或者大查房记录未完成，2022-12-02到2023-01-01阶段小结或者大查房记录未完成'
|
||||
},
|
||||
{
|
||||
type: '入院评估记录',
|
||||
description: '入院评估记录应当在患者入院4小时内完成',
|
||||
status: '入院评估记录超时未完成，'
|
||||
},
|
||||
{
|
||||
type: '上级查房记录',
|
||||
description: '主任医师查房记录应在患者入院72小时内完成',
|
||||
status: '主任医师首次查房记录超时未完成，'
|
||||
},
|
||||
{
|
||||
type: '上级查房记录',
|
||||
description: '主治医师首次查房记录应于患者入院48小时内完成',
|
||||
status: '主治医师首次查房记录超时未完成，'
|
||||
},
|
||||
{
|
||||
type: '入院记录',
|
||||
description: '入院记录应当于患者入院后24小时内完成',
|
||||
status: '入院记录超时未完成，'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.medical-records-page {
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
padding: 5px;
|
||||
background-color: #f0f0f0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.tool-button {
|
||||
font-size: 12px;
|
||||
padding: 3px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav-panel {
|
||||
width: 250px;
|
||||
overflow-y: auto;
|
||||
background-color: #f9f9f9;
|
||||
border-right: 1px solid #ddd;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.nav-group {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.nav-group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
background-color: #e6e6e6;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.nav-group-header.expanded {
|
||||
background-color: #d0d0d0;
|
||||
}
|
||||
|
||||
.nav-group-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 5px 5px 20px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-group-item.selected {
|
||||
background-color: #e6f7ff;
|
||||
}
|
||||
|
||||
.nav-group-item.checked {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.icon-folder, .icon-folder-open, .icon-file, .icon-check-circle, .icon-triangle-down, .icon-triangle-up {
|
||||
margin-right: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.content-panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
padding: 10px;
|
||||
background-color: #f0f0f0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.bottom-actions {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 5px 15px;
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
background-color: #1890ff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Custom row colors */
|
||||
.green-row {
|
||||
background-color: #e6fff0 !important;
|
||||
}
|
||||
|
||||
.red-row {
|
||||
background-color: #fff0f0 !important;
|
||||
}
|
||||
|
||||
.green-text {
|
||||
color: #52c41a;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.red-text {
|
||||
color: #f5222d;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
39
front/src/pages/zl-station/zhuyuanItem/tabs/tab5.vue
Normal file
39
front/src/pages/zl-station/zhuyuanItem/tabs/tab5.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const id = ref('tab1')
|
||||
|
||||
var editor = null
|
||||
|
||||
//加载编辑器
|
||||
const onLoad = (e) => {
|
||||
editor = e.target.contentWindow.editor
|
||||
}
|
||||
|
||||
setTimeout(()=>{
|
||||
//异步加载文档
|
||||
editor.loadUrl('/mock/yizhu.html')
|
||||
}, 0)
|
||||
|
||||
|
||||
//处理文档命令
|
||||
const execCommand = (cmd) => {
|
||||
editor.execCommand(cmd)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<d-tabs type="pills" v-model="id" >
|
||||
<d-tab id="tab1" title="长期医嘱">
|
||||
<Editor @load="onLoad" style="margin: 10px 0;"></Editor>
|
||||
</d-tab>
|
||||
<d-tab id="tab2" title="临时医嘱">
|
||||
<Editor @load="onLoad2" style="margin: 10px 0;"></Editor>
|
||||
</d-tab>
|
||||
</d-tabs>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
392
front/src/pages/zl-station/zhuyuanItem/tabs/tab6.vue
Normal file
392
front/src/pages/zl-station/zhuyuanItem/tabs/tab6.vue
Normal file
@ -0,0 +1,392 @@
|
||||
<template>
|
||||
<div class="medical-system">
|
||||
<!-- Toolbar -->
|
||||
<div class="toolbar">
|
||||
<button class="toolbar-btn"><img src="" alt="检查" /> 检查</button>
|
||||
<button class="toolbar-btn"><img src="" alt="检验" /> 检验</button>
|
||||
<button class="toolbar-btn"><img src="" alt="保存" /> 保存</button>
|
||||
<button class="toolbar-btn"><img src="" alt="打印" /> 打印</button>
|
||||
<button class="toolbar-btn"><img src="" alt="作废" /> 作废</button>
|
||||
<button class="toolbar-btn"><img src="" alt="保存模板" /> 保存模板</button>
|
||||
<button class="toolbar-btn"><img src="" alt="清空" /> 清空</button>
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
<!-- Left sidebar - History records -->
|
||||
<div class="history-sidebar">
|
||||
<div class="sidebar-header">历史记录</div>
|
||||
<div class="history-list">
|
||||
<div class="history-item">
|
||||
<span class="date-time">2025-03-25 14:33</span>
|
||||
<span class="exam-type">检验</span>
|
||||
<div class="exam-detail">30种融合基因筛查(金域)</div>
|
||||
</div>
|
||||
<div class="history-item">
|
||||
<span class="date-time">2024-05-20 11:08</span>
|
||||
<span class="exam-type">磁共振</span>
|
||||
<div class="exam-detail">• 右手关节增强1.5T</div>
|
||||
<div class="exam-detail">• 左腕关节增强1.5T</div>
|
||||
</div>
|
||||
<div class="history-item">
|
||||
<span class="date-time">2024-05-20 11:07</span>
|
||||
<span class="exam-type">磁共振</span>
|
||||
<div class="exam-detail">• 左肘关节增强1.5T</div>
|
||||
</div>
|
||||
<div class="history-item">
|
||||
<span class="date-time">2024-05-20 11:07</span>
|
||||
<span class="exam-type">放射</span>
|
||||
<div class="exam-detail">• 右膝骨轴位（普放）</div>
|
||||
</div>
|
||||
<!-- More history items -->
|
||||
<div class="history-item">
|
||||
<span class="date-time">2022-11-03 07:32</span>
|
||||
<span class="exam-type">检验</span>
|
||||
<div class="exam-detail">• 凝血全套</div>
|
||||
</div>
|
||||
<!-- More history items omitted for brevity -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main form area -->
|
||||
<div class="request-form">
|
||||
<div class="form-header">
|
||||
<h3>申请单</h3>
|
||||
</div>
|
||||
<Editor doc="https://www.x-emr.cn/doc/999.html" @load="onLoad" style="margin: 10px 0;" mode="design"></Editor>
|
||||
<!-- Patient information section -->
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Right sidebar - Management panel -->
|
||||
<!-- <div class="management-panel">-->
|
||||
<!-- <div class="panel-header">-->
|
||||
<!-- <span>库查管理</span>-->
|
||||
<!-- <button class="close-btn">×</button>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="search-bar">-->
|
||||
<!-- <input type="text" placeholder="搜索" />-->
|
||||
<!-- <button class="refresh-btn">刷新</button>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="folders-list">-->
|
||||
<!-- <div class="folder-item">-->
|
||||
<!-- <input type="checkbox" id="personal" />-->
|
||||
<!-- <label for="personal">个人模套</label>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="folder-item expanded">-->
|
||||
<!-- <input type="checkbox" id="department" />-->
|
||||
<!-- <label for="department">科室模套</label>-->
|
||||
<!-- <div class="subfolder-items">-->
|
||||
<!-- <div class="subfolder-item">-->
|
||||
<!-- <input type="checkbox" id="admission" />-->
|
||||
<!-- <label for="admission">入院检验</label>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="subfolder-item">-->
|
||||
<!-- <input type="checkbox" id="all" />-->
|
||||
<!-- <label for="all">全院模套</label>-->
|
||||
<!-- </div>-->
|
||||
<!-- <!– More subfolder items –>-->
|
||||
<!-- <div class="subfolder-item">-->
|
||||
<!-- <input type="checkbox" id="nine" />-->
|
||||
<!-- <label for="nine">九区检验专用</label>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="subfolder-item">-->
|
||||
<!-- <input type="checkbox" id="newSecond" />-->
|
||||
<!-- <label for="newSecond">新十二区检验</label>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="subfolder-item">-->
|
||||
<!-- <input type="checkbox" id="tenDistrict" />-->
|
||||
<!-- <label for="tenDistrict">十区检验</label>-->
|
||||
<!-- </div>-->
|
||||
<!-- <!– More items –>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let editor = null;
|
||||
export default {
|
||||
name: 'MedicalRequestForm',
|
||||
data() {
|
||||
return {
|
||||
chiefComplaint: '头痛头晕伴呕吐不消失小时余',
|
||||
presentIllness: '患者今晨二点左右无明显诱因下突发痰吐，随即神志不清，呼之不应，无肢体抽搐，无二便失禁，家人随即拨120将其送至急诊检查，查血常规提示白细胞升高为18e9/L，立即予脱水止痛治疗，气管插管',
|
||||
patientInfo: {
|
||||
name: '',
|
||||
gender: '',
|
||||
age: '',
|
||||
patientId: '',
|
||||
diagnosis: '',
|
||||
department: '',
|
||||
ward: '',
|
||||
bedNumber: '',
|
||||
sendingDepartment: '',
|
||||
doctor: ''
|
||||
},
|
||||
examItems: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onLoad(e){
|
||||
editor = e.target.contentWindow.editor
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.medical-system {
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
background-color: #f0f0f0;
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 5px;
|
||||
padding: 2px 5px;
|
||||
background-color: #f8f8f8;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toolbar-btn img {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.history-sidebar {
|
||||
width: 250px;
|
||||
border-right: 1px solid #ddd;
|
||||
overflow-y: auto;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
background-color: #e0e0e0;
|
||||
padding: 5px 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
padding: 5px 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.date-time {
|
||||
color: #0066cc;
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.exam-type {
|
||||
color: #0066cc;
|
||||
}
|
||||
|
||||
.exam-detail {
|
||||
margin-left: 5px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.request-form {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-header {
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-header h2 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.form-header h3 {
|
||||
margin: 5px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.patient-info {
|
||||
border: 1px solid #ddd;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.info-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.exam-info {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.exam-section {
|
||||
display: flex;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
width: 80px;
|
||||
padding: 5px;
|
||||
background-color: #f0f0f0;
|
||||
border-right: 1px solid #ddd;
|
||||
font-weight: bold;
|
||||
color: #e63946;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
flex: 1;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
border: none;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.exam-items {
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.add-item-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
margin: 0 10px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
margin-left: 10px;
|
||||
padding: 2px 5px;
|
||||
background-color: #f0f0f0;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.amount {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.items-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.items-table th {
|
||||
background-color: #f0f0f0;
|
||||
border: 1px solid #ddd;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.management-panel {
|
||||
width: 250px;
|
||||
border-left: 1px solid #ddd;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
background-color: #e0e0e0;
|
||||
padding: 5px 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
flex: 1;
|
||||
padding: 3px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
background-color: #4caf50;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 3px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.folders-list {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.folder-item {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.expanded .subfolder-items {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.subfolder-item {
|
||||
margin-top: 5px;
|
||||
}
|
||||
</style>
|
||||
109
front/src/pages/zl-station/zhuyuanItemView.vue
Normal file
109
front/src/pages/zl-station/zhuyuanItemView.vue
Normal file
@ -0,0 +1,109 @@
|
||||
<script setup>
|
||||
import {ref, reactive, computed} from 'vue';
|
||||
import subItem from "@/pages/zl-station/zhuyuanItem/subItem.vue";
|
||||
|
||||
const value1 = ref('510123456789012345');
|
||||
const patient_id = ref('510123456789012345');
|
||||
|
||||
|
||||
const items = [
|
||||
{ value: '510123456789012345', name: '张三' },
|
||||
{ value: '510123456789012342', name: '李四' },
|
||||
|
||||
];
|
||||
|
||||
const patient_info = [
|
||||
{ value: '510123456789012345', name: '张三', age: 43, gender: '男', no: '152322', fee: {
|
||||
total: 4000, type: '全保', warn: -1000, prepaid: 4000, remain: 124, allergies: '无'
|
||||
}, },
|
||||
{ value: '510123456789012342', name: '李四', age: 34, gender: '女', no: '152323', fee:{
|
||||
total: 5000, type: '全保', warn: -2000, prepaid: 5000, remain: 124, allergies: '无'
|
||||
} }
|
||||
]
|
||||
|
||||
const getItemByValue = (value) =>{
|
||||
const item = patient_info.find((item) => item.value === value);
|
||||
if(item){
|
||||
return item;
|
||||
}
|
||||
else{
|
||||
return { value: '510123456789012345', name: '张三', age: 43, gender: '男', no: '152322', fee: {
|
||||
total: 4000, type: '全保', warn: -1000, prepaid: 4000, remain: 124, allergies: '无'
|
||||
}};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const options = reactive({
|
||||
data: items,
|
||||
});
|
||||
|
||||
|
||||
|
||||
// 分割器
|
||||
const collapsed = ref(false);
|
||||
const disableBarSize = '2px';
|
||||
|
||||
const handleInput = (value) => {
|
||||
console.log(value1["value"]);
|
||||
patient_id.value = value1["value"]
|
||||
console.log(getItemByValue(patient_id.value));
|
||||
console.log(getItemByValue(patient_id.value).name);
|
||||
}
|
||||
|
||||
const selectedPatient = computed(() => {
|
||||
return getItemByValue(patient_id.value);
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<d-splitter style="height: 1000px" class="splitter-border" orientation="vertical" :disableBarSize="disableBarSize">
|
||||
<template v-slot:DSplitterPane>
|
||||
<d-splitter-pane size="30px" minSize="30px" maxSize="50px" :collapsed="collapsed" :collapsible="true" @sizeChange="sizeChange">
|
||||
<div class="pane-content">
|
||||
<d-select size="sm" class="mb-2 patient patient-select" v-model="value1" overview="underlined" placeholder="请选择患者" :allow-clear="true" filter @value-change="handleInput">
|
||||
<d-option v-for="(item, index) in options.data" :key="index" :value="item.value" :name="item.name"></d-option>
|
||||
</d-select>
|
||||
<d-button size="sm" class="patient">患者管理</d-button>
|
||||
<span class="patient patient-info-content">
|
||||
<span>
|
||||
<span class="ms-2" v-if="selectedPatient">姓名：{{ selectedPatient.name ?? "" }}</span>
|
||||
<span class="ms-2" v-if="selectedPatient">年龄：{{ selectedPatient.age ?? "" }}</span>
|
||||
<span class="ms-2" v-if="selectedPatient">性别：{{ selectedPatient.gender ?? "" }}</span>
|
||||
<span class="ms-2" v-if="selectedPatient">住院号：{{ selectedPatient.no ?? "" }}</span>
|
||||
<span class="ms-2" v-if="selectedPatient">费用总额：{{ selectedPatient.fee.total ?? "" }}</span>
|
||||
<span class="ms-2" v-if="selectedPatient">费别：{{ selectedPatient.fee.type ?? "" }}</span>
|
||||
<span class="ms-2" v-if="selectedPatient">预付：{{ selectedPatient.fee.prepaid ?? "" }}</span>
|
||||
<span class="ms-2" v-if="selectedPatient">余额：{{ selectedPatient.fee.remain ?? "" }}</span>
|
||||
<span class="ms-2" v-if="selectedPatient">过敏史：{{ selectedPatient.fee.allergies ?? "" }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</d-splitter-pane>
|
||||
<d-splitter-pane style="overflow: hidden">
|
||||
<div class="pane-content">
|
||||
<subItem></subItem>
|
||||
</div>
|
||||
</d-splitter-pane>
|
||||
</template>
|
||||
</d-splitter>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.patient-select {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.patient {
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
margin-right: 16px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,13 +1,49 @@
|
||||
import { createMemoryHistory, createRouter } from 'vue-router'
|
||||
import * as VueRouter from 'vue-router'
|
||||
import Home from '@/pages/HomePage.vue'
|
||||
import menjizhenItemView from '@/pages/zl-station/menjizhenItemView.vue'
|
||||
import Page404 from '@/pages/404/notFoundPage.vue'
|
||||
|
||||
import menjizhenItemView from "@/views/zl-station/menjizhenItemView.vue"
|
||||
function generateRoutes() {
|
||||
//const pages = import.meta.glob('@/pages/*.vue', { eager: true })
|
||||
let routers = [
|
||||
//默认路由
|
||||
{
|
||||
path: '/',
|
||||
component: Home
|
||||
},
|
||||
{
|
||||
path: '/HomePage',
|
||||
component: Home
|
||||
},
|
||||
{
|
||||
path: '/menjizhen-item',
|
||||
component: menjizhenItemView
|
||||
},
|
||||
{
|
||||
path: '/zhuyuan-item',
|
||||
component: () => import('@/pages/zl-station/zhuyuanItemView.vue')
|
||||
},
|
||||
// 通配符路由 - 必须放在最后
|
||||
{
|
||||
path: '/:pathMatch(.*)*', // 匹配所有路径
|
||||
name: 'NotFound',
|
||||
component: Page404
|
||||
}
|
||||
]
|
||||
|
||||
const routes = [
|
||||
{ path: '/menjizhenItemView', component: menjizhenItemView },
|
||||
// //自动发现路由
|
||||
// Object.keys(pages).forEach(path => {
|
||||
// routers.push({
|
||||
// path: path.replace('/src/pages', '').replace('.vue', ''),
|
||||
// component: pages[path].default
|
||||
// })
|
||||
// })
|
||||
return routers
|
||||
}
|
||||
|
||||
]
|
||||
const router = VueRouter.createRouter({
|
||||
history: VueRouter.createWebHistory(),
|
||||
routes: generateRoutes()
|
||||
})
|
||||
|
||||
export const router = createRouter({
|
||||
history: createMemoryHistory(),
|
||||
routes,
|
||||
})
|
||||
export default router
|
||||
@ -1,137 +0,0 @@
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
// 病人候选下拉框
|
||||
const value1 = ref('');
|
||||
const value2 = ref('');
|
||||
const value3 = ref('');
|
||||
const value4 = ref('');
|
||||
const items = [
|
||||
{ value: '510123456789012345', name: '张三' },
|
||||
{ value: '510123456789012346', name: '李四' },
|
||||
{ value: '510123456789012346', name: '王五' },
|
||||
{ value: '510123456789012347', name: '赵六' },
|
||||
{ value: '510123456789012348', name: '田七' },
|
||||
{ value: '510123456789012349', name: '周八' },
|
||||
{ value: '510123456789012350', name: '吴九' },
|
||||
{ value: '510123456789012351', name: '郑十' },
|
||||
{ value: '510123456789012352', name: '冯十一' },
|
||||
{ value: '510123456789012353', name: '陈十二' },
|
||||
{ value: '510123456789012354', name: '褚十三' },
|
||||
{ value: '510123456789012355', name: '卫十四' },
|
||||
{ value: '510123456789012356', name: '蒋十五' },
|
||||
{ value: '510123456789012357', name: '沈十六' },
|
||||
{ value: '510123456789012358', name: '韩十七' },
|
||||
{ value: '510123456789012359', name: '杨十八' },
|
||||
{ value: '510123456789012360', name: '朱十九' },
|
||||
{ value: '510123456789012361', name: '秦二十' },
|
||||
{ value: '510123456789012362', name: '尤二十一' },
|
||||
{ value: '510123456789012363', name: '许二十二' },
|
||||
{ value: '510123456789012364', name: '何二十三' },
|
||||
{ value: '510123456789012365', name: '吕二十四' },
|
||||
];
|
||||
const items2 = [
|
||||
{ value: '510123456789012366', name: '施二十五' },
|
||||
{ value: '510123456789012367', name: '张二十六' },
|
||||
{ value: '510123456789012368', name: '孙二十七' },
|
||||
{ value: '510123456789012369', name: '曹二十八' },
|
||||
{ value: '510123456789012370', name: '严二十九' },
|
||||
{ value: '510123456789012371', name: '华三十' },
|
||||
{ value: '510123456789012372', name: '邱三十一' },
|
||||
{ value: '510123456789012373', name: '高三十二' },
|
||||
{ value: '510123456789012374', name: '林三十三' },
|
||||
];
|
||||
const options = reactive({
|
||||
data: items,
|
||||
});
|
||||
const options2 = reactive({
|
||||
data: items2,
|
||||
});
|
||||
//单选框分组
|
||||
const groupFilterList1 = ref(['全天', '上午', '下午']);
|
||||
let groupFilterChoose1 = ref('全天');
|
||||
|
||||
// 分割器
|
||||
const collapsed = ref(false);
|
||||
const disableBarSize = '2px';
|
||||
|
||||
const sizeChange = (size) => {
|
||||
console.log(size);
|
||||
};
|
||||
|
||||
const id = ref('tab1');
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
|
||||
|
||||
<section>
|
||||
<d-splitter style="height: 1000px" class="splitter-border" orientation="vertical" :disableBarSize="disableBarSize">
|
||||
<template v-slot:DSplitterPane>
|
||||
<d-splitter-pane size="30px" minSize="30px" maxSize="50px" :collapsed="collapsed" :collapsible="true" @sizeChange="sizeChange">
|
||||
<div class="pane-content">
|
||||
<d-radio-group class="mb-2 patient" direction="row" v-model="groupFilterChoose1" :beforeChange="groupFilterBeforeChange">
|
||||
<d-radio v-for="item in groupFilterList1" :key="item" :value="item">
|
||||
{{ item }}
|
||||
</d-radio>
|
||||
</d-radio-group>
|
||||
<d-select size="sm" class="mb-2 patient patient-select" v-model="value1" overview="underlined" placeholder="请选择患者" :allow-clear="true" filter @input-change="handleInput">
|
||||
<d-option-group label="待诊病人">
|
||||
<d-option v-for="(item, index) in options.data" :key="index" :value="item.value" :name="item.name"></d-option>
|
||||
</d-option-group>
|
||||
<d-option-group label="已诊病人">
|
||||
<d-option v-for="(item, index) in options2.data" :key="index" :value="item.value" :name="item.name"></d-option>
|
||||
</d-option-group>
|
||||
</d-select>
|
||||
<d-button size="sm" class="patient">患者管理</d-button>
|
||||
</div>
|
||||
</d-splitter-pane>
|
||||
<d-splitter-pane style="overflow: hidden">
|
||||
<div class="pane-content">
|
||||
<d-tabs v-model="id" custom-width="100px">
|
||||
<d-tab id="tab1" title="门诊病历">
|
||||
<p>Tab1 Content</p>
|
||||
</d-tab>
|
||||
<d-tab id="tab2" title="门诊诊断">
|
||||
<p>Tab2 Content</p>
|
||||
</d-tab>
|
||||
<d-tab id="tab3" title="处方管理">
|
||||
<p>Tab3 Content</p>
|
||||
</d-tab>
|
||||
<d-tab id="tab4" title="申请单">
|
||||
<p>Tab4 Content</p>
|
||||
</d-tab>
|
||||
<d-tab id="tab5" title="历史病历">
|
||||
<p>Tab5 Content</p>
|
||||
</d-tab>
|
||||
</d-tabs>
|
||||
</div>
|
||||
</d-splitter-pane>
|
||||
<!-- <d-splitter-pane size="150px" :resizable="false" :collapsible="true">-->
|
||||
<!-- <div class="pane-content">-->
|
||||
<!-- <h2>Bottom</h2>-->
|
||||
<!-- <div>height: 150px, resizable: false</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </d-splitter-pane>-->
|
||||
</template>
|
||||
</d-splitter>
|
||||
</section>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.patient-select {
|
||||
width: auto;
|
||||
}
|
||||
.patient {
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
margin-right: 16px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.pane-content {
|
||||
padding: 0 12px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user