Skip to content

V
vue-composition-api
Commit d93d719a by wangshuangqing
Options

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

parent 8dabbcf4
Showing with 223 additions and 335 deletions
src/main.js
/* /*
* @Author: ninglupeng * @Author: ninglupeng
* @Date: 2022-06-07 00:31:25 * @Date: 2022-06-07 00:31:25
* @LastEditors: ninglupeng * @LastEditors: wsq
* @LastEditTime: 2022-06-07 00:37:54 * @LastEditTime: 2023-01-06 17:16:34
* @Description: * @Description:
*/ */
import Vue from 'vue' import Vue from 'vue'
...@@ -28,6 +28,7 @@ Vue.use(VueCompositionApi) ...@@ -28,6 +28,7 @@ Vue.use(VueCompositionApi)
new Vue({ new Vue({
store, store,
router, router,
render: h => h(App), render: h => h(App),
}).$mount('#app') }).$mount('#app')
\ No newline at end of file
src/views/outClinicalpathway.vue
...@@ -2,98 +2,119 @@ ...@@ -2,98 +2,119 @@
* @Author: wsq * @Author: wsq
* @Date: 2022-04-22 15:20:58 * @Date: 2022-04-22 15:20:58
* @LastEditors: wsq * @LastEditors: wsq
* @LastEditTime: 2022-12-26 14:47:37 * @LastEditTime: 2023-01-06 17:20:56
* @Description: * @Description:
--> -->
<template> <template>
<!-- 临床路径外放页面 --> <!-- 临床路径外放页面 -->
<div class="outClinicalpathway"> <div class="outClinicalpathway">
<!-- 患者信息 -->
<div class="outClinicalpathway_top"> <div class="outClinicalpathway_top">
<div class="outClinicalpathway_top_div1"> <!-- 左侧内容 -->
<span class="span1">患者信息</span> <div class="outClinicalpathway_top_left">
<el-button <div class="outClinicalpathway_top_left_one">
class="outClinicalpathway_top_div1_button" <span><img src="../assets/img/peo.png" alt="" /></span>
type="primary" <div class="outClinicalpathway_top_left_one_t1">
size="mini" 患者姓名:<span>小王</span>
@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>
</div> </div>
<div class="outClinicalpathway_top_message_centert"> <div class="outClinicalpathway_top_left_one_t2">
<span class="outClinicalpathway_top_message_centert_tu2" 住院号:<span>{{ 222 }}</span>
><img src="../assets/img/ka.png" alt=""
/></span>
<div class="outClinicalpathway_top_message_centert_t2">
住院次数:<span>{{ HistoryInfo.a49 }}</span>
</div> </div>
<div class="outClinicalpathway_top_left_one_t3">
住院次数:<span>{{ 2222 }}</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> </div>
<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_low"> <div class="outClinicalpathway_top_left_two_inp2">
<span class="outClinicalpathway_top_message_low_tu4" <span style="width: 20%">医嘱类型：</span>
><img src="../assets/img/daoru.png" alt="" <span style="width: 80%">
/></span> <el-select
<div class="outClinicalpathway_top_message_low_t4"> style="width: 70%"
分组类型:<span>{{ HistoryInfo.disNature }}</span> v-model="orderinpt"
</div> class="m-2"
</div> placeholder="请选择医嘱类型"
<div class="outClinicalpathway_top_message_div6"> size="mini"
<span class="outClinicalpathway_top_message_div6_tu6" >
><img src="../assets/img/lx2.png" alt="" <el-option
/></span> v-for="item in orderoptions"
<div class="outClinicalpathway_top_message_div6_t6"> :key="item.value"
病人类型:<span>{{ HistoryInfo.patientType }}</span> :label="item.label"
</div> :value="item.value"
/>
</el-select>
</span>
</div> </div>
<div class="outClinicalpathway_top_message_div5"> <div class="outClinicalpathway_top_left_two_inp3">
<span class="outClinicalpathway_top_message_div5_tu5" <span style="width: 20%">符合临床路径：</span>
><img src="../assets/img/je.png" alt="" <span style="width: 80%">
/></span> <el-select
<div class="outClinicalpathway_top_message_div5_t5"> v-model="pathinpt"
自费占比:<span>{{ class="m-2"
HistoryInfo.ownProportion != undefined placeholder="请选择符合临床路径"
? decimal(HistoryInfo.ownProportion) + "%" size="mini"
: "" style="width: 80%"
}}</span> >
<el-option
v-for="item in pathroptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</span>
</div> </div>
</div> </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>
<!-- 表格 -->
<div class="outClinicalpathway_table"> <div class="outClinicalpathway_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 <el-table
ref="multipleTableRef" ref="multipleTableRef"
row-key="id" row-key="id"
:data="tableData" :data="tableData"
style="width: 100%" style="width: 100%; height: 100%; overflow-y: scroll"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
> >
...@@ -106,6 +127,7 @@ ...@@ -106,6 +127,7 @@
</el-table> </el-table>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
import http from "../utils/http"; import http from "../utils/http";
...@@ -118,7 +140,7 @@ import { ...@@ -118,7 +140,7 @@ import {
ref, ref,
} from "@vue/composition-api"; } from "@vue/composition-api";
import { decimal } from "../utils/decimal"; import { decimal } from "../utils/decimal";
import { img } from "../assets/img/zu.png";
import { Message } from "element-ui"; import { Message } from "element-ui";
import { useRoute, useRouter } from "../utils/useVueRouter"; import { useRoute, useRouter } from "../utils/useVueRouter";
import { setItem, getItem } from "../utils/auth"; import { setItem, getItem } from "../utils/auth";
...@@ -140,18 +162,6 @@ export default { ...@@ -140,18 +162,6 @@ export default {
const monthlyPlanTable = ref(); const monthlyPlanTable = ref();
const multipleTableRef = ref(); const multipleTableRef = ref();
let state = reactive({ let state = reactive({
HistoryInfo: {
name: "",
healthyID: "",
paymentType: "",
disNature: "",
doctorName: "",
rw: "",
totalFee: "",
avgFee: "",
days: "",
profitLoss: "",
},
multipleSelection: [], //被选择的数据 multipleSelection: [], //被选择的数据
tableData: [ tableData: [
{ {
...@@ -159,6 +169,8 @@ export default { ...@@ -159,6 +169,8 @@ export default {
date: "2016-05-02", date: "2016-05-02",
name: "wangxiaohu", name: "wangxiaohu",
address: "No. 189, Grove St, Los Angeles", address: "No. 189, Grove St, Los Angeles",
}, },
{ {
id: 2, id: 2,
...@@ -193,6 +205,45 @@ export default { ...@@ -193,6 +205,45 @@ export default {
address: "No. 189, Grove St, Los Angeles", 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) => { const handleSelectionChange = (val) => {
...@@ -238,309 +289,144 @@ export default { ...@@ -238,309 +289,144 @@ export default {
// padding: 20px; // padding: 20px;
// position: relative; // position: relative;
// overflow: hidden; // overflow: hidden;
height: 850px; height: 900px;
background-color: white; background-color: #f0f0f0;
padding: 20px; // padding: 10px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
&_top { &_top {
margin-bottom: 18px; width: 100%;
&_div1 { height: 20%;
margin-bottom: 5px;
background-color: #ffff;
padding: 10px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.span1 { &_left {
height: 100%;
width: 80%;
display: flex; display: flex;
justify-content: start; flex-direction: column;
font-size: 14px; justify-content: center;
color: #6a707e; &_one {
font-family: PingFang SC; width: 100%;
font-weight: 400; height: 30%;
} background-color: #f2fafd;
&_button { margin-bottom: 10px;
background-color: #2cabe3;
color: #fff;
}
}
&_message {
display: flex; display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
margin-top: 16px; span {
&_left { width: 3%;
width: 16.6%; height: 100%;
height: 51px;
font-size: 14px;
display: flex; display: flex;
justify-content: start; justify-content: center;
align-items: center; align-items: center;
background-color: #f3fafd;
// .iconfont {
// color: #2cabe3;
// padding-left: 29px;
// font-size: 23px;
// }
&_tu1 {
padding-left: 29px;
font-size: 23px;
} }
&_t1 { &_t1 {
width: 80%; width: 30%;
height: 42px; height: 80%;
background-color: #ffff;
display: flex; display: flex;
justify-content: start;
padding-left: 10px;
align-items: center; align-items: center;
background-color: #fff; color: #acacac;
color: #abafb3; font-weight: 400;
font-size: 14px; padding-left: 20px;
margin-left: 29px;
span { span {
color: #787e8a;
}
}
}
&_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%; width: 80%;
height: 42px; height: 80%;
color: #787878;
display: flex; display: flex;
justify-content: start; justify-content: flex-start;
padding-left: 10px; font-weight: 600;
align-items: center; align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
span {
color: #787e8a;
} }
} }
} &_t2 {
&_right { width: 30%;
width: 16.6%; height: 80%;
height: 51px; background-color: #ffff;
display: flex; display: flex;
justify-content: start;
align-items: center; align-items: center;
background-color: #f3fafd; color: #acacac;
font-family: PingFang SC; font-weight: 400;
padding-left: 20px;
&_tu3 { span {
padding-left: 29px;
font-size: 23px;
}
&_t3 {
width: 80%; width: 80%;
height: 42px; height: 80%;
color: #787878;
display: flex; display: flex;
justify-content: start; justify-content: flex-start;
padding-left: 10px; font-weight: 600;
align-items: center; align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
span {
color: #787e8a;
}
} }
} }
&_low { &_t3 {
width: 16.6%; width: 30%;
height: 51px; height: 80%;
background-color: #ffff;
margin-right: 10px;
display: flex; display: flex;
justify-content: start;
align-items: center; align-items: center;
background-color: #f3fafd; color: #acacac;
font-family: PingFang SC; 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 { span {
color: #787e8a;
}
}
}
&_div6 {
width: 16.6%;
height: 51px;
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%; width: 80%;
height: 42px; height: 80%;
font-weight: 600;
color: #787878;
display: flex; display: flex;
justify-content: start; justify-content: flex-start;
padding-left: 10px;
align-items: center; align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
span {
color: #787e8a;
}
} }
} }
&_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;
} }
&_t5 { &_two {
width: 80%; width: 100%;
height: 42px; height: 30%;
display: flex; display: flex;
justify-content: start;
padding-left: 10px;
align-items: center; align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
span {
color: #787e8a;
}
}
}
}
}
&_msg {
height: 51px;
background-color: #f3fafd;
display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; color: #444444;
margin-bottom: 25px; &_inp1 {
// .iconfont { width: 30%;
// color: #2cabe3;
// padding-left: 28px;
// font-size: 23px;
// }
&_tu4 {
padding-left: 29px;
font-size: 23px;
} }
span:nth-child(2) { &_inp2 {
margin-left: 21px; width: 30%;
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(3) { &_inp3 {
width: 200px; width: 40%;
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) { &_right {
width: 200px; height: 100%;
height: 39px; width: 20%;
background-color: #fff;
font-size: 14px;
color: #6d7381;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-family: PingFang SC;
margin-right: 5px;
} }
span:nth-child(n + 7) { }
width: 258px; &_table {
height: 39px; height: 76%;
background-color: #fff; width: 100%;
font-size: 14px;
color: #6d7381;
display: flex; display: flex;
align-items: center; &_left {
justify-content: center; width: 15%;
font-family: PingFang SC; height: 100%;
margin-right: 5px; margin-right: 5px;
background-color: #ffff;
padding-top: 10px;
} }
span:nth-child(n + 7) { &_right {
margin-right: 5px; 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