Skip to content

V
vue-composition-api
Commit d93d719a by wangshuangqing
Options

临床路径页面初步页面完成

parent 8dabbcf4
Showing with 251 additions and 363 deletions
src/main.js
/*
* @Author: ninglupeng
* @Date: 2022-06-07 00:31:25
* @LastEditors: ninglupeng
* @LastEditTime: 2022-06-07 00:37:54
* @LastEditors: wsq
* @LastEditTime: 2023-01-06 17:16:34
* @Description:
*/
import Vue from 'vue'
......@@ -28,6 +28,7 @@ Vue.use(VueCompositionApi)
new Vue({
store,
router,
render: h => h(App),
}).$mount('#app')
\ No newline at end of file
src/views/outClinicalpathway.vue
......@@ -2,108 +2,130 @@
* @Author: wsq
* @Date: 2022-04-22 15:20:58
* @LastEditors: wsq
* @LastEditTime: 2022-12-26 14:47:37
* @LastEditTime: 2023-01-06 17:20:56
* @Description:
-->
<template>
<!-- 临床路径外放页面 -->
<div class="outClinicalpathway">
<!-- 患者信息 -->
<div class="outClinicalpathway_top">
<div class="outClinicalpathway_top_div1">
<span class="span1">患者信息</span>
<el-button
class="outClinicalpathway_top_div1_button"
type="primary"
size="mini"
@click="getControl"
>医嘱质控</el-button
>
<!-- <el-button size="mini" type="primary">医嘱质控</el-button> -->
</div>
<div class="outClinicalpathway_top_message">
<div class="outClinicalpathway_top_message_left">
<span class="outClinicalpathway_top_message_left_tu1">
<img src="../assets/img/peo.png" alt=""
/></span>
<div class="outClinicalpathway_top_message_left_t1">
住院号:<span>{{ HistoryInfo.id }}</span>
<!-- 左侧内容 -->
<div class="outClinicalpathway_top_left">
<div class="outClinicalpathway_top_left_one">
<span><img src="../assets/img/peo.png" alt="" /></span>
<div class="outClinicalpathway_top_left_one_t1">
患者姓名:<span>小王</span>
</div>
</div>
<div class="outClinicalpathway_top_message_centert">
<span class="outClinicalpathway_top_message_centert_tu2"
><img src="../assets/img/ka.png" alt=""
/></span>
<div class="outClinicalpathway_top_message_centert_t2">
住院次数:<span>{{ HistoryInfo.a49 }}</span>
<div class="outClinicalpathway_top_left_one_t2">
住院号:<span>{{ 222 }}</span>
</div>
</div>
<div class="outClinicalpathway_top_message_right">
<span class="outClinicalpathway_top_message_right_tu3"
><img src="../assets/img/qian.png" alt=""
/></span>
<div class="outClinicalpathway_top_message_right_t3">
医疗付费方式:<span>{{ HistoryInfo.paymentType }}</span>
<div class="outClinicalpathway_top_left_one_t3">
住院次数:<span>{{ 2222 }}</span>
</div>
</div>
<div class="outClinicalpathway_top_message_low">
<span class="outClinicalpathway_top_message_low_tu4"
><img src="../assets/img/daoru.png" alt=""
/></span>
<div class="outClinicalpathway_top_message_low_t4">
分组类型:<span>{{ HistoryInfo.disNature }}</span>
<div class="outClinicalpathway_top_left_two">
<div class="outClinicalpathway_top_left_two_inp1">
<span style="width: 20%">治疗方式：</span>
<span style="width: 80%"
><el-select
v-model="treatmentinpt"
class="m-2"
placeholder="请选择治疗方式"
size="mini"
style="width: 70%"
>
<el-option
v-for="item in treatmentoptions"
:key="item.value"
:label="item.label"
:value="item.value"
/> </el-select
></span>
</div>
</div>
<div class="outClinicalpathway_top_message_div6">
<span class="outClinicalpathway_top_message_div6_tu6"
><img src="../assets/img/lx2.png" alt=""
/></span>
<div class="outClinicalpathway_top_message_div6_t6">
病人类型:<span>{{ HistoryInfo.patientType }}</span>
<div class="outClinicalpathway_top_left_two_inp2">
<span style="width: 20%">医嘱类型：</span>
<span style="width: 80%">
<el-select
style="width: 70%"
v-model="orderinpt"
class="m-2"
placeholder="请选择医嘱类型"
size="mini"
>
<el-option
v-for="item in orderoptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</span>
</div>
</div>
<div class="outClinicalpathway_top_message_div5">
<span class="outClinicalpathway_top_message_div5_tu5"
><img src="../assets/img/je.png" alt=""
/></span>
<div class="outClinicalpathway_top_message_div5_t5">
自费占比:<span>{{
HistoryInfo.ownProportion != undefined
? decimal(HistoryInfo.ownProportion) + "%"
: ""
}}</span>
<div class="outClinicalpathway_top_left_two_inp3">
<span style="width: 20%">符合临床路径：</span>
<span style="width: 80%">
<el-select
v-model="pathinpt"
class="m-2"
placeholder="请选择符合临床路径"
size="mini"
style="width: 80%"
>
<el-option
v-for="item in pathroptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</span>
</div>
</div>
</div>
<!-- 右侧按钮 -->
<div class="outClinicalpathway_top_right">
<el-button type="primary">加入医嘱</el-button>
<el-button type="primary">病情变异</el-button>
</div>
</div>
<div class="outClinicalpathway_msg">
<span class="outClinicalpathway_msg_tu4"
><img src="../assets/img/zu.png" alt=""
/></span>
<span>分组:{{ HistoryInfo.doctorName }}</span>
<span>基准点数:{{ decimal(HistoryInfo.rw) }}</span>
<span>预计DRG支付费用:{{ decimal(HistoryInfo.actualfee) }}</span>
<span>总费用:{{ decimal(HistoryInfo.totalFee) }}</span>
<span>预计盈亏:{{ decimal(HistoryInfo.profitLoss) }}</span>
<span>院内历年平均费用:{{ decimal(HistoryInfo.avgFee) }}</span>
<span>院内历年平均住院天数:{{ decimal(HistoryInfo.days) }}</span>
</div>
<!-- 表格 -->
<div class="outClinicalpathway_table">
<el-table
ref="multipleTableRef"
row-key="id"
:data="tableData"
style="width: 100%"
@selection-change="handleSelectionChange"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column type="selection" width="55" />
<el-table-column label="医嘱类型" width="180">
<template #default="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column property="name" label="路径名称" width="120" />
<el-table-column property="address" label="医院项目编码" />
</el-table>
<!-- 时间线 -->
<div class="outClinicalpathway_table_left">
<el-timeline>
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:type="activity.type"
:color="activity.color"
:size="activity.size"
:hollow="activity.hollow"
:timestamp="activity.timestamp"
>
{{ activity.content }}
</el-timeline-item>
</el-timeline>
</div>
<!-- 表格 -->
<div class="outClinicalpathway_table_right">
<el-table
ref="multipleTableRef"
row-key="id"
:data="tableData"
style="width: 100%; height: 100%; overflow-y: scroll"
@selection-change="handleSelectionChange"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column type="selection" width="55" />
<el-table-column label="医嘱类型" width="180">
<template #default="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column property="name" label="路径名称" width="120" />
<el-table-column property="address" label="医院项目编码" />
</el-table>
</div>
</div>
</div>
</template>
......@@ -118,7 +140,7 @@ import {
ref,
} from "@vue/composition-api";
import { decimal } from "../utils/decimal";
import { img } from "../assets/img/zu.png";
import { Message } from "element-ui";
import { useRoute, useRouter } from "../utils/useVueRouter";
import { setItem, getItem } from "../utils/auth";
......@@ -140,18 +162,6 @@ export default {
const monthlyPlanTable = ref();
const multipleTableRef = ref();
let state = reactive({
HistoryInfo: {
name: "",
healthyID: "",
paymentType: "",
disNature: "",
doctorName: "",
rw: "",
totalFee: "",
avgFee: "",
days: "",
profitLoss: "",
},
multipleSelection: [], //被选择的数据
tableData: [
{
......@@ -159,6 +169,8 @@ export default {
date: "2016-05-02",
name: "wangxiaohu",
address: "No. 189, Grove St, Los Angeles",
},
{
id: 2,
......@@ -193,6 +205,45 @@ export default {
address: "No. 189, Grove St, Los Angeles",
},
],
treatmentinpt: "", //治疗方式输入框
treatmentoptions: [], //治疗方式下拉值
orderinpt: "", //医嘱类型输入框
orderoptions: [], //医嘱类型下拉值
pathinpt: "", //临床路径
pathroptions: [], //临床路径下拉值
//时间线
activities: [
{
content: "住院第1天",
timestamp: "2022-04-03~2022-05-08",
size: "large",
type: "success",
icon:img,
},
{
content: "住院第2~3天",
size: "large",
timestamp: "2022-04-03~2022-05-08",
type: "success",
},
{
content: "住院第4~5天",
timestamp: "2018-04-03 20:46",
size: "large",
},
{
content: "住院第6~7天",
size: "large",
timestamp: "2018-04-03 20:46",
type: "primary",
hollow: true,
},
{
content: "住院第8~9天",
size: "large",
timestamp: "2018-04-03 20:46",
},
],
});
//当选择项发生变化时会触发该事件
const handleSelectionChange = (val) => {
......@@ -238,309 +289,144 @@ export default {
// padding: 20px;
// position: relative;
// overflow: hidden;
height: 850px;
background-color: white;
padding: 20px;
height: 900px;
background-color: #f0f0f0;
// padding: 10px;
overflow: hidden;
position: relative;
&_top {
margin-bottom: 18px;
&_div1 {
display: flex;
justify-content: space-between;
align-items: center;
.span1 {
display: flex;
justify-content: start;
font-size: 14px;
color: #6a707e;
font-family: PingFang SC;
font-weight: 400;
}
&_button {
background-color: #2cabe3;
color: #fff;
}
}
&_message {
width: 100%;
height: 20%;
margin-bottom: 5px;
background-color: #ffff;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
&_left {
height: 100%;
width: 80%;
display: flex;
justify-content: space-between;
margin-top: 16px;
&_left {
width: 16.6%;
height: 51px;
flex-direction: column;
justify-content: center;
&_one {
width: 100%;
height: 30%;
background-color: #f2fafd;
margin-bottom: 10px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
// .iconfont {
// color: #2cabe3;
// padding-left: 29px;
// font-size: 23px;
// }
&_tu1 {
padding-left: 29px;
font-size: 23px;
justify-content: space-between;
span {
width: 3%;
height: 100%;
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
}
&_t1 {
width: 80%;
height: 42px;
width: 30%;
height: 80%;
background-color: #ffff;
display: flex;
justify-content: start;
padding-left: 10px;
align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
color: #acacac;
font-weight: 400;
padding-left: 20px;
span {
color: #787e8a;
width: 80%;
height: 80%;
color: #787878;
display: flex;
justify-content: flex-start;
font-weight: 600;
align-items: center;
}
}
}
&_centert {
width: 16.6%;
height: 51px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
font-family: PingFang SC;
// .iconfont {
// color: #2cabe3;
// padding-left: 29px;
// font-size: 23px;
// }
&_tu2 {
padding-left: 29px;
font-size: 23px;
}
&_t2 {
width: 80%;
height: 42px;
width: 30%;
height: 80%;
background-color: #ffff;
display: flex;
justify-content: start;
padding-left: 10px;
align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
color: #acacac;
font-weight: 400;
padding-left: 20px;
span {
color: #787e8a;
width: 80%;
height: 80%;
color: #787878;
display: flex;
justify-content: flex-start;
font-weight: 600;
align-items: center;
}
}
}
&_right {
width: 16.6%;
height: 51px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
font-family: PingFang SC;
&_tu3 {
padding-left: 29px;
font-size: 23px;
}
&_t3 {
width: 80%;
height: 42px;
width: 30%;
height: 80%;
background-color: #ffff;
margin-right: 10px;
display: flex;
justify-content: start;
padding-left: 10px;
align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
span {
color: #787e8a;
}
}
}
&_low {
width: 16.6%;
height: 51px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
font-family: PingFang SC;
color: #acacac;
font-weight: 400;
padding-left: 20px;
&_tu4 {
padding-left: 29px;
font-size: 23px;
}
&_t4 {
width: 80%;
height: 42px;
display: flex;
justify-content: start;
padding-left: 10px;
align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
span {
color: #787e8a;
width: 80%;
height: 80%;
font-weight: 600;
color: #787878;
display: flex;
justify-content: flex-start;
align-items: center;
}
}
}
&_div6 {
width: 16.6%;
height: 51px;
&_two {
width: 100%;
height: 30%;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
font-family: PingFang SC;
&_tu6 {
padding-left: 29px;
font-size: 23px;
}
&_t6 {
width: 80%;
height: 42px;
display: flex;
justify-content: start;
padding-left: 10px;
align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
span {
color: #787e8a;
}
justify-content: space-between;
color: #444444;
&_inp1 {
width: 30%;
}
}
&_div5 {
width: 16.6%;
height: 51px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
font-family: PingFang SC;
&_tu5 {
padding-left: 29px;
font-size: 23px;
&_inp2 {
width: 30%;
}
&_t5 {
width: 80%;
height: 42px;
display: flex;
justify-content: start;
padding-left: 10px;
align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
span {
color: #787e8a;
}
&_inp3 {
width: 40%;
}
}
}
}
&_msg {
height: 51px;
background-color: #f3fafd;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
// .iconfont {
// color: #2cabe3;
// padding-left: 28px;
// font-size: 23px;
// }
&_tu4 {
padding-left: 29px;
font-size: 23px;
}
span:nth-child(2) {
margin-left: 21px;
width: 200px;
height: 39px;
background-color: #fff;
font-size: 14px;
color: #6d7381;
&_right {
height: 100%;
width: 20%;
display: flex;
align-items: center;
justify-content: center;
font-family: PingFang SC;
margin-right: 5px;
}
span:nth-child(3) {
width: 200px;
height: 39px;
background-color: #fff;
font-size: 14px;
color: #6d7381;
display: flex;
align-items: center;
justify-content: center;
font-family: PingFang SC;
margin-right: 5px;
}
span:nth-child(4) {
width: 258px;
height: 39px;
background-color: #fff;
font-size: 14px;
color: #6d7381;
display: flex;
align-items: center;
justify-content: center;
font-family: PingFang SC;
margin-right: 5px;
}
span:nth-child(5) {
width: 200px;
height: 39px;
background-color: #fff;
font-size: 14px;
color: #6d7381;
display: flex;
align-items: center;
justify-content: center;
font-family: PingFang SC;
margin-right: 5px;
}
span:nth-child(6) {
width: 200px;
height: 39px;
background-color: #fff;
font-size: 14px;
color: #6d7381;
display: flex;
align-items: center;
justify-content: center;
font-family: PingFang SC;
margin-right: 5px;
}
span:nth-child(n + 7) {
width: 258px;
height: 39px;
background-color: #fff;
font-size: 14px;
color: #6d7381;
display: flex;
align-items: center;
justify-content: center;
font-family: PingFang SC;
}
&_table {
height: 76%;
width: 100%;
display: flex;
&_left {
width: 15%;
height: 100%;
margin-right: 5px;
background-color: #ffff;
padding-top: 10px;
}
span:nth-child(n + 7) {
margin-right: 5px;
&_right {
width: 84%;
height: 100%;
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment