Skip to content

V
vue-composition-api
Commit 809f31aa by wangshuangqing
Options

患者详情页

parent c94be8df
Showing with 813 additions and 3 deletions
src/router/index.js
......@@ -10,13 +10,13 @@ import Router from "vue-router";
import store from "@/store";
import { getItem, clear } from "@/utils/auth";
import outseeQualityControl from "@/views/outseeQualityControl.vue";
import outpatientDetails from "@/views/outpatientDetails.vue";
import login from "@/views/login.vue";
Vue.use(Router);
const router = new Router({
routes: [
{
routes: [{
path: "*",
component: (resolve) => require(["@/components/404.vue"], resolve),
},
......@@ -30,6 +30,11 @@ const router = new Router({
name: "outseeQualityControl",
component: outseeQualityControl,
},
{
path: "/outpatientDetails",
name: "outpatientDetails",
component: outpatientDetails,
},
// {
// path: "/",
// name: "home",
......@@ -115,4 +120,4 @@ router.beforeEach((to, from, next) => {
// })
export default router;
export default router;
\ No newline at end of file
src/views/outpatientDetails.vue 0 → 100644
<!--
* @Author: wsq
* @Date: 2022-04-22 15:20:58
* @LastEditors: wsq
* @LastEditTime: 2022-05-16 18:45:49
* @Description:
-->
<template>
<!-- 患者详情页 -->
<div class="outpatientDetails">
<div class="outpatientDetails_top">
<div class="outpatientDetails_top_div1">
<span class="span1">患者信息</span>
<!-- <el-button size="mini" type="primary" @click="getControl">医嘱质控</el-button> -->
<!-- <el-button size="mini" type="primary">医嘱质控</el-button> -->
</div>
<div class="outpatientDetails_top_message">
<div class="outpatientDetails_top_message_left">
<span class="iconfont icon-xinrenzhinan"> </span>
<div class="outpatientDetails_top_message_left_t1">
住院号:<span>{{ HistoryInfo.id }}</span>
</div>
</div>
<div class="outpatientDetails_top_message_centert">
<span class="iconfont icon-yinhangka"></span>
<div class="outpatientDetails_top_message_centert_t2">
住院次数:<span>{{ HistoryInfo.a49 }}</span>
</div>
</div>
<div class="outpatientDetails_top_message_right">
<span class="iconfont icon-fufeiguanli"></span>
<div class="outpatientDetails_top_message_right_t3">
医疗付费方式:<span>{{ HistoryInfo.paymentType }}</span>
</div>
</div>
</div>
</div>
<div class="outpatientDetails_msg">
<span class="iconfont icon-ziliaoshouce-xianxing"></span>
<span>分组:{{ HistoryInfo.doctorName }}</span>
<span>权重:{{ decimal(HistoryInfo.rw) }}</span>
<span>实际医保费用:{{ 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="outpatientDetails_title">
<span>费用分类</span>
</div>
<div class="outpatientDetails_bottom">
<!-- 有数据 -->
<div class="outpatientDetails_bottom_leftShowBox" v-if="goods.length !== 0">
<div class="outpatientDetails_bottom_leftShowBox_left">
<ul class="outpatientDetails_bottom_leftShowBox_left_ul">
<li v-for="(item, index) in goods" :key="index">
<div
@click="
toggle(index, item);
scrollToFoods(index);
"
:class="{ active: index == checkindex }"
>
<span :class="{ fc2: index == checkindex }" class="sp1">
<span v-show="index == checkindex" style="color: #fff" class="iconfont icon-jiantou1"></span>
{{ item.iteM_TYPE }}:{{ decimal(item.totalFee) }}</span
>
<span :class="{ fc3: index == checkindex }" class="sp2">
<span class="sp2_avg">
平均:
{{ decimal(item.avgFee) }}
</span>
<!-- <span class="sp2_reto" v-ratio="[item.proportion / 100, item.proportion / 100, `${index == checkindex ? '#fff' : '#6a707e'}`]">
</span> -->
<span class="sp2_reto" v-if="item.proportion <= 0">
{{ decimal(item.proportion * -1) + '%' }}
<img style="width: 4px; height: 12px; margin-left: 5px" src="../assets/img/dataCockpit/lvse_zuo.png" />
</span>
<span class="sp2_reto" v-else>
{{ decimal(item.proportion) + '%' }}
<img style="width: 4px; height: 12px; margin-left: 5px" src="../assets/img/dataCockpit/hongse_you.png" />
</span>
</span>
</div>
</li>
</ul>
</div>
<!-- 中间有数据样式 表格-->
<div class="outpatientDetails_bottom_leftShowBox_right" v-if="tableData.length !== 0">
<el-table
:data="tableData"
border
size="medium"
style="width: 100%"
:default-sort="{ prop: 'date', order: 'descending' }"
:row-class-name="tableRowClassName"
:height="'100%'"
>
<!-- <template v-for="(item, ind) in tableListHead" :key="ind">
<el-table-column :label="item.cloumn" :prop="item.name">
<template slot-scope="scope" v-if="item.cloumn == '单价'">
{{ decimal(scope.row.fee) }}
</template>
<template slot-scope="scope" v-if="item.cloumn == '总金额'">
{{ decimal(scope.row.unitprice) }}
</template>
</el-table-column>
</template> -->
</el-table>
</div>
<!-- 中间表格无数据 -->
<div class="outpatientDetails_bottom_leftShowBox_right" v-else>
<div class="outpatientDetails_bottom_leftShowBox_right_box">
<img class="outpatientDetails_bottom_leftShowBox_right_box_img" src="../assets/img/nodata.png" alt="" />
<div class="outpatientDetails_bottom_leftShowBox_right_box_text">暂无数据</div>
</div>
</div>
</div>
<!-- 表格无数据样式 -->
<div class="outpatientDetails_bottom_leftShowBox" v-else>
<div class="outpatientDetails_bottom_leftShowBox_box">
<img class="outpatientDetails_bottom_leftShowBox_box_img" src="../assets/img/nodata.png" alt="" />
<div class="outpatientDetails_bottom_leftShowBox_box_text">暂无数据</div>
</div>
</div>
<!-- 右侧有数据 -->
<div class="outpatientDetails_bottom_rght2">
<div class="outpatientDetails_bottom_rght2_top">
<div class="outpatientDetails_bottom_rght2_top_title">异常问题</div>
<div class="outpatientDetails_bottom_rght2_top_mes">
<span class="outpatientDetails_bottom_rght2_top_mes_span1" v-for="(item, ind) in typeCountDatas" :key="ind">{{ item.name }}：<span :style="{ color: item.color }">{{ item.count }}</span></span
>
<!-- <span class="outpatientDetails_bottom_rght2_top_mes_span2">检查：<span style="color: #3ad330">0</span></span>
<span class="outpatientDetails_bottom_rght2_top_mes_span3">治疗：<span style="color: #2aaae2">0</span></span>
<span class="outpatientDetails_bottom_rght2_top_mes_span4">其他：<span style="color: red">0</span></span> -->
</div>
</div>
<div class="outpatientDetails_bottom_rght2_bottom">
<div class="outpatientDetails_bottom_rght2_bottom_li" v-for="(item, ind) in options" :key="ind">
<span v-show="item.projectRuleLevel == '禁止'" class="outpatientDetails_bottom_rght2_bottom_li_title" style="background: red">{{
item.projectRuleLevel
}}</span>
<span v-show="item.projectRuleLevel == '提示'" class="outpatientDetails_bottom_rght2_bottom_li_title" style="background: #2aaae2">{{
item.projectRuleLevel
}}</span>
<span v-show="item.projectRuleLevel == '警告'" class="outpatientDetails_bottom_rght2_bottom_li_title" style="background: #e9c621">{{
item.projectRuleLevel
}}</span>
<el-tooltip placement="bottom" trigger="hover">
<template #content>{{item.notes}} </template>
<span class="outpatientDetails_bottom_rght2_bottom_li_cont">{{ item.notes }}</span>
</el-tooltip>
</div>
</div>
</div>
</div>
<!--无数据 -->
<!-- <div class="outpatientDetails_bottom" v-if="goods.length == 0">
<div class="outpatientDetails_bottom_box">
<img class="outpatientDetails_bottom_box_img" src="../assets/img/nodata.png" alt="" />
<div class="outpatientDetails_bottom_box_text">暂无数据</div>
</div>
</div> -->
</div>
</template>
<script lang="ts">
import http from '../utils/http';
import { reactive, toRefs, onMounted, nextTick, computed } from '@vue/composition-api';
import { decimal } from '../utils/decimal';
import { useRoute, useRouter } from '../utils/useVueRouter';
import $ from 'jquery';
import { setItem, getItem } from '../utils/auth';
export default {
name: 'outpatientDetails',
setup() {
//表格颜色
const tableRowClassName = ({ row}) => {
if (row.rowIndex % 2 == 0) {
return 'isverifyStyle';
} else {
return '';
}
};
//异常问题接口
const GetProjectRulesData = () => {
http
.post(`/medical/get/GetPRHisData?&code=${route.value.query.id}`, {})
.then((data) => {
state.options = data.projectRules;
state.typeCountDatas = data.typeCountDatas;
if (data.typeCountDatas == null) {
state.showCountDatas = false;
}
if (data.projectRules == null) {
state.showbottom = false;
}
})
.catch((error) => {
});
};
//医嘱质控
const getControl = () => {
http
.post(`/global/post/SetCaseProjectRuleHis?id=${route.value.query.id}`)
.then((data) => {
// ElMessage.success(data.message);
})
.catch((error) => {
});
};
//获取患者信息数据
const getHistoryInfo = () => {
// var loadingInstance2 = ElLoading.service(loadingOption1);
http
.post(`/medical/Get/getHisInfo?&code=${route.value.query.id}`, {})
.then((data) => {
state.HistoryInfo = data;
state.dipid = data.id;
state.goods = data.inpat_FeeDatas;
if (state.goods.length > 0) {
// debugger
toggle(0, state.goods[0]);
}
// loadingInstance2.close();
})
.catch((error) => {
// loadingInstance2.close();
});
};
//费用分类接口
const getInpatFeesByREGCODE = (item) => {
http
.post(`/medical/Get/getIFHisByREGCODE?&code=${route.value.query.id}&ItemType=${item.iteM_TYPE}`, {})
.then((data) => {
state.tableData = data;
})
.catch((error) => {
});
};
const toggle = (index, item) => {
state.checkindex = index;
getInpatFeesByREGCODE(item);
};
const scrollToFoods = (index) => {
// state.checkindex = index;
};
let state = reactive({
HistoryInfo: {
name: '',
healthyID: '',
paymentType: '',
doctorName: '',
rw: '',
totalFee: '',
avgFee: '',
days: '',
profitLoss: '',
},
checkindex: 0, // 初始化第一个栏块高亮
goods: [], //左侧费用类型
tableListHead: [
{ cloumn: '开单日期', name: 'chargeTime' },
{
cloumn: '项目编码',
name: 'iteM_CODE',
},
{
cloumn: '项目名称',
name: 'iteM_NAME',
},
{
cloumn: '单价',
name: 'unitprice',
},
{
cloumn: '数量',
name: 'quantity',
},
{
cloumn: '总金额',
name: 'fee',
},
],
tableData: [],
options: [], //异常问题数据
medInsNum: 0, //医保数
notdrugsNum: 0, //非药品
drugsNum: 0, //药品
diseaseNum: 0, //疾病
dipid: '',
typeCountDatas: [], //异常数据
showCountDatas: true, //异常问题类型是否显示
showbottom: true, //异常问题详情是否显示
});
//表格自适应高度
const route = useRoute();
onMounted(() => {
GetProjectRulesData();
getHistoryInfo();
});
return {
...toRefs(state),
tableRowClassName,
toggle,
scrollToFoods,
getHistoryInfo,
getInpatFeesByREGCODE,
decimal,
// tableCot,
GetProjectRulesData,
getControl,
};
},
};
</script>
<style lang="scss" scoped>
@import '../styles/mixin.scss';
// @import '../styles/media/components/outpatientDetails.scss';
.outpatientDetails {
// height: calc(100% - 50px);
// background-color: white;
// padding: 20px;
// position: relative;
// overflow: hidden;
height: 100%;
background-color: white;
padding: 20px;
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;
}
}
&_message {
display: flex;
justify-content: space-between;
margin-top: 16px;
&_left {
width: 33%;
height: 51px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
.iconfont {
color: #2cabe3;
padding-left: 29px;
font-size: 23px;
}
&_t1 {
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;
}
}
}
&_centert {
width: 33%;
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;
}
&_t2 {
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;
}
}
}
&_right {
width: 33%;
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;
}
&_t3 {
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;
}
}
}
}
}
&_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;
}
span:nth-child(2) {
margin-left: 21px;
}
span:nth-child(n + 2) {
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(n + 7) {
margin-right: 5px;
}
}
&_title {
background-image: url('../assets/img/dataMaintenance/title.png');
background-repeat: no-repeat;
display: flex;
justify-content: start;
align-items: center;
margin-bottom: 22px;
background-size: 100% 100%;
background-position: center;
height: 26px;
span {
color: #fff;
font-size: 13px;
font-family: PingFang SC;
font-weight: 500;
margin-left: 17px;
}
}
&_bottom {
display: flex;
justify-content: space-between;
height: 70%;
&_leftShowBox {
width: 80%;
height: 100%;
display: flex;
// 左侧无数据
&_box {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&_img {
width: 155px;
height: 155px;
}
&_text {
font-size: 14px;
color: #6a707e;
}
}
// 有数据
&_left {
list-style-type: none;
width: 37%;
height: 100%;
overflow-y: auto;
&_ul {
margin: 0;
padding-left: 0;
width: 100%;
.active {
display: flex;
justify-content: start;
width: 100%;
height: 100%;
background: linear-gradient(to right, #2cabe3, #57cafd);
color: #fff;
.fc2 {
width: 40%;
height: 100%;
display: flex;
align-items: center;
justify-items: center;
justify-content: flex-start;
padding-left: 3%;
.iconfont {
font-size: 20px;
}
}
.fc3 {
width: 60%;
height: 100%;
display: flex;
align-items: center;
justify-items: center;
justify-content: flex-end;
padding-right: 3%;
}
}
}
li {
list-style-type: none;
width: 100%;
height: 56px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f5f6fa;
margin-bottom: 21px;
font-size: 13px;
color: #6a707e;
div {
width: 98%;
height: 46px;
background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
font-family: 'PingFang SC';
.sp1 {
width: 40%;
height: 100%;
display: flex;
align-items: center;
justify-items: center;
justify-content: flex-start;
padding-left: 3%;
font-family: 'PingFang SC';
}
.sp2 {
width: 60%;
height: 100%;
display: flex;
align-items: center;
justify-items: center;
justify-content: flex-end;
padding-right: 3%;
font-family: 'PingFang SC';
&_avg {
display: flex;
flex-direction: row;
align-items: center;
width: 50%;
justify-content: flex-end;
}
&_reto {
display: flex;
flex-direction: row;
align-items: center;
width: 50%;
justify-content: flex-end;
}
}
}
}
}
&_right {
width: 62%;
// 无数据样式
&_box {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&_img {
width: 200px;
height: 200px;
}
&_text {
font-size: 18px;
color: #6a707e;
font-family: PingFang SC;
font-weight: 400;
}
}
&_table {
height: calc(100% - 100px);
}
.isverifyStyle {
background-color: #f4f5f8;
}
.paginations {
text-align: right;
}
}
}
&_rght2 {
width: 22%;
height: 100%;
border: 1px solid #f6f6f8;
padding: 10px;
&_top {
height: 24%;
width: 100%;
border-bottom: 3px solid #eef8fd;
&_title {
width: 98px;
height: 19px;
text-align: start;
padding-left: 10px;
background-color: #2cabe3;
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #ffffff;
}
&_mes {
width: 100%;
height: 80%;
display: flex;
justify-content: space-between;
align-items: center;
&_span1 {
width: 101px;
height: 36px;
display: flex;
align-items: center;
padding-left: 10px;
background: #f6f6f8;
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #5d5d5d;
margin-right: 5px;
}
&_span2 {
width: 101px;
height: 36px;
display: flex;
align-items: center;
padding-left: 10px;
background: #f6f6f8;
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #5d5d5d;
margin-right: 5px;
}
&_span3 {
width: 101px;
height: 36px;
display: flex;
align-items: center;
padding-left: 10px;
background: #f6f6f8;
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #5d5d5d;
margin-right: 5px;
}
&_span4 {
width: 101px;
height: 36px;
display: flex;
align-items: center;
padding-left: 10px;
background: #f6f6f8;
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #5d5d5d;
}
}
}
&_bottom {
height: 75%;
width: 100%;
overflow-y: scroll;
&_li {
width: 100%;
height: 25%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-around;
border-bottom: 3px solid #eef8fd;
&_title {
width: 69px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-family: PingFang SC;
font-weight: 400;
color: #ffffff;
}
&_cont {
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #5d5d5d;
text-align: start;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 97%;
}
}
}
}
}
}
</style>
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