Skip to content

V
vue-composition-api
Commit eb4812a4 by DESKTOP-KM66R2T\Administrator
Options

1.添加自费占比字段 

2.修改底部的表头位置与样式
3.添加三个按钮控制中间表格数据
4.对接口 传类型参数给后台5.修改右侧的样式  与三个盒子的样式
5.调整表格高度
parent b4deae12
Showing with 197 additions and 39 deletions
src/views/outpatientDetails.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: wsq * @Author: wsq
* @Date: 2022-04-22 15:20:58 * @Date: 2022-04-22 15:20:58
* @LastEditors: wsq * @LastEditors: wsq
* @LastEditTime: 2022-05-16 18:45:49 * @LastEditTime: 2022-07-15 16:07:26
* @Description: * @Description:
--> -->
<template> <template>
...@@ -10,8 +10,12 @@ ...@@ -10,8 +10,12 @@
<div class="outpatientDetails"> <div class="outpatientDetails">
<div class="outpatientDetails_top"> <div class="outpatientDetails_top">
<div class="outpatientDetails_top_div1"> <div class="outpatientDetails_top_div1">
<span class="span1">患者信息</span> <span class="span1">患者信息</span>
<el-button class="outpatientDetails_top_div1_button" type="primary" size="mini" @click="getControl " <el-button
class="outpatientDetails_top_div1_button"
type="primary"
size="mini"
@click="getControl"
>医嘱质控</el-button >医嘱质控</el-button
> >
<!-- <el-button size="mini" type="primary">医嘱质控</el-button> --> <!-- <el-button size="mini" type="primary">医嘱质控</el-button> -->
...@@ -50,6 +54,14 @@ ...@@ -50,6 +54,14 @@
分组类型:<span>{{ HistoryInfo.disNature }}</span> 分组类型:<span>{{ HistoryInfo.disNature }}</span>
</div> </div>
</div> </div>
<div class="outpatientDetails_top_message_div5">
<span class="outpatientDetails_top_message_div5_tu5"
><img src="../assets/img/je.png" alt=""
/></span>
<div class="outpatientDetails_top_message_div5_t5">
自费占比:<span>{{ decimal(HistoryInfo.ownProportion) }}</span>
</div>
</div>
</div> </div>
</div> </div>
<div class="outpatientDetails_msg"> <div class="outpatientDetails_msg">
...@@ -101,16 +113,16 @@ ...@@ -101,16 +113,16 @@
class="outpatientDetails_fenqu_di_bb_div2_span2_t2" class="outpatientDetails_fenqu_di_bb_div2_span2_t2"
:title=" :title="
'正常区域：' + '正常区域：' +
Math.round(lowMagnification) + Math.round(lowMagnification) +
1 + 1 +
'~' + '~' +
(Math.round(highMagnification) - 1) (Math.round(highMagnification) - 1)
" "
>正常区域：{{ >正常区域：{{
Math.round(lowMagnification) + Math.round(lowMagnification) +
1 + 1 +
"~" + "~" +
(Math.round(highMagnification) - 1) (Math.round(highMagnification) - 1)
}}</span }}</span
></span ></span
> >
...@@ -154,19 +166,22 @@ ...@@ -154,19 +166,22 @@
</div> </div>
</div> </div>
<div class="outpatientDetails_title"> <!-- <div class="outpatientDetails_title">
<span>费用分类</span> <span>费用分类</span>
</div> </div> -->
<div class="outpatientDetails_bottom" :style="{ height: bottomheight }"> <div class="outpatientDetails_bottom" :style="{ height: bottomheight }">
<!-- 有数据 --> <!-- 有数据 -->
<div class="outpatientDetails_bottom_leftShowBox"> <div class="outpatientDetails_bottom_leftShowBox">
<div class="outpatientDetails_bottom_leftShowBox_left"> <div class="outpatientDetails_bottom_leftShowBox_left">
<div class="outpatientDetails_bottom_leftShowBox_left_btbox">
费用分类
</div>
<el-table <el-table
ref="monthlyPlanTable" ref="monthlyPlanTable"
:data="tableData1" :data="tableData1"
style="width: 100%" style="width: 100%"
height="98%" height="94%"
row-key="id" row-key="id"
size="small" size="small"
:default-expand-all="false" :default-expand-all="false"
...@@ -245,14 +260,27 @@ ...@@ -245,14 +260,27 @@
class="outpatientDetails_bottom_leftShowBox_right" class="outpatientDetails_bottom_leftShowBox_right"
v-if="tableData.length !== 0" v-if="tableData.length !== 0"
> >
<div class="outpatientDetails_bottom_leftShowBox_right_treebtn">
<span
v-for="(item, ind) in btnoptions"
:key="ind"
class="outpatientDetails_bottom_leftShowBox_right_treebtn_span"
:class="{
outpatientDetails_bottom_leftShowBox_right_treebtn_span1:
ind == btnspanind,
}"
@click="treebtn(item.value, ind)"
>{{ item.title }}</span
>
</div>
<el-table <el-table
:data="tableData" :data="tableData"
border border
size="medium" size="medium"
style="width: 100%" style="width: 98%; margin: 0 10px"
:default-sort="{ prop: 'date', order: 'descending' }" :default-sort="{ prop: 'date', order: 'descending' }"
:row-class-name="tableRowClassName" :row-class-name="tableRowClassName"
height="98%" height="92%"
> >
<el-table-column <el-table-column
label="开单日期" label="开单日期"
...@@ -277,10 +305,27 @@ ...@@ -277,10 +305,27 @@
{{ decimal(scope.row.fee) }} {{ decimal(scope.row.fee) }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column
label="支付类型"
prop="carD_TYPE"
></el-table-column>
</el-table> </el-table>
</div> </div>
<!-- 中间表格无数据 --> <!-- 中间表格无数据 -->
<div class="outpatientDetails_bottom_leftShowBox_right" v-else> <div class="outpatientDetails_bottom_leftShowBox_right" v-else>
<div class="outpatientDetails_bottom_leftShowBox_right_treebtn">
<span
v-for="(item, ind) in btnoptions"
:key="ind"
class="outpatientDetails_bottom_leftShowBox_right_treebtn_span"
:class="{
outpatientDetails_bottom_leftShowBox_right_treebtn_span1:
ind == btnspanind,
}"
@click="treebtn(item.value, ind)"
>{{ item.title }}</span
>
</div>
<div class="outpatientDetails_bottom_leftShowBox_right_box"> <div class="outpatientDetails_bottom_leftShowBox_right_box">
<img <img
class="outpatientDetails_bottom_leftShowBox_right_box_img" class="outpatientDetails_bottom_leftShowBox_right_box_img"
...@@ -379,7 +424,7 @@ ...@@ -379,7 +424,7 @@
</div> --> </div> -->
</div> </div>
</template> </template>
<script > <script>
import http from "../utils/http"; import http from "../utils/http";
import { import {
reactive, reactive,
...@@ -411,6 +456,7 @@ export default { ...@@ -411,6 +456,7 @@ export default {
const eowclick = (row) => { const eowclick = (row) => {
if (state.tableData1 != []) { if (state.tableData1 != []) {
getInpatFeesByREGCODE(row.types); getInpatFeesByREGCODE(row.types);
state.Lefttype = row.types;
} }
}; };
//获取左侧表格数据 //获取左侧表格数据
...@@ -454,6 +500,7 @@ export default { ...@@ -454,6 +500,7 @@ export default {
}) })
.catch((error) => {}); .catch((error) => {});
}; };
//点击异常分类 显示异常信息 //点击异常分类 显示异常信息
const gettype = (name, ind) => { const gettype = (name, ind) => {
console.log("name", name); console.log("name", name);
...@@ -558,17 +605,23 @@ export default { ...@@ -558,17 +605,23 @@ export default {
if (data.lowMagnification == 0 || data.highMagnification == 0) { if (data.lowMagnification == 0 || data.highMagnification == 0) {
state.bottomheight = "80%"; state.bottomheight = "80%";
} else if (data.lowMagnification != 0) { } else if (data.lowMagnification != 0) {
state.bottomheight = "70%"; state.bottomheight = "68%";
} }
}) })
.catch((error) => {}); .catch((error) => {});
}; };
//点击中间三个按钮
const treebtn = (value, ind) => {
state.btnspanind = ind;
state.btnvalue = value;
getInpatFeesByREGCODE(state.Lefttype);
};
//费用分类接口 //费用分类接口
const getInpatFeesByREGCODE = (types) => { const getInpatFeesByREGCODE = (types) => {
http http
.post( .post(
`/medical/Get/getIFHisByREGCODE?&code=${route.value.query.id}`, `/medical/Get/getIFHisByREGCODE?&code=${route.value.query.id}&state=${state.btnvalue}`,
types types
) )
.then((data) => { .then((data) => {
...@@ -582,6 +635,23 @@ export default { ...@@ -582,6 +635,23 @@ export default {
}; };
let state = reactive({ let state = reactive({
tableData1: [], tableData1: [],
btnoptions: [
{
value: 0,
title: "全部",
},
{
value: 1,
title: "医保",
},
{
value: 2,
title: "自费",
},
],
btnspanind: 0, //按个按钮的ind
btnvalue: 0, //三个按钮没人高亮全部
Lefttype: [], //左侧表格的数据
HistoryInfo: { HistoryInfo: {
name: "", name: "",
healthyID: "", healthyID: "",
...@@ -618,6 +688,10 @@ export default { ...@@ -618,6 +688,10 @@ export default {
cloumn: "金额", cloumn: "金额",
name: "fee", name: "fee",
}, },
{
cloumn: "支付类型",
name: "carD_TYPE",
},
], ],
tableData: [], tableData: [],
options: [], //异常问题数据 options: [], //异常问题数据
...@@ -666,6 +740,7 @@ export default { ...@@ -666,6 +740,7 @@ export default {
changeRowClick, changeRowClick,
getlefttable, getlefttable,
monthlyPlanTable, monthlyPlanTable,
treebtn,
}; };
}, },
}; };
...@@ -712,7 +787,7 @@ export default { ...@@ -712,7 +787,7 @@ export default {
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 400; font-weight: 400;
} }
&_button{ &_button {
background-color: #2cabe3; background-color: #2cabe3;
color: #fff; color: #fff;
} }
...@@ -723,7 +798,7 @@ export default { ...@@ -723,7 +798,7 @@ export default {
justify-content: space-between; justify-content: space-between;
margin-top: 16px; margin-top: 16px;
&_left { &_left {
width: 25%; width: 20%;
height: 51px; height: 51px;
display: flex; display: flex;
justify-content: start; justify-content: start;
...@@ -756,7 +831,7 @@ export default { ...@@ -756,7 +831,7 @@ export default {
} }
} }
&_centert { &_centert {
width: 25%; width: 20%;
height: 51px; height: 51px;
display: flex; display: flex;
justify-content: start; justify-content: start;
...@@ -790,7 +865,7 @@ export default { ...@@ -790,7 +865,7 @@ export default {
} }
} }
&_right { &_right {
width: 25%; width: 20%;
height: 51px; height: 51px;
display: flex; display: flex;
justify-content: start; justify-content: start;
...@@ -819,7 +894,7 @@ export default { ...@@ -819,7 +894,7 @@ export default {
} }
} }
&_low { &_low {
width: 25%; width: 20%;
height: 51px; height: 51px;
display: flex; display: flex;
justify-content: start; justify-content: start;
...@@ -847,6 +922,34 @@ export default { ...@@ -847,6 +922,34 @@ export default {
} }
} }
} }
&_div5 {
width: 20%;
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 {
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 { &_msg {
...@@ -1135,9 +1238,10 @@ export default { ...@@ -1135,9 +1238,10 @@ export default {
justify-content: space-between; justify-content: space-between;
height: 80%; height: 80%;
&_leftShowBox { &_leftShowBox {
width: 80%; width: 78%;
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: space-between;
// 左侧无数据 // 左侧无数据
&_box { &_box {
...@@ -1161,9 +1265,27 @@ export default { ...@@ -1161,9 +1265,27 @@ export default {
&_left { &_left {
list-style-type: none; list-style-type: none;
width: 35%; width: 35%;
height: 90%; height: 98%;
overflow-y: auto; overflow-y: auto;
border: 1px solid #f4f4f4;
border-radius: 4px;
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
&_btbox {
width: 98px;
height: 21px;
line-height: 21px;
text-align: start;
padding-left: 10px;
// background-color: #2cabe3;
background-image: url("../assets/img/bj.png");
margin: 5px 25px;
background-size: 100% 21px;
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #ffffff;
background-repeat: no-repeat;
}
&_ul { &_ul {
margin: 0; margin: 0;
padding-left: 0; padding-left: 0;
...@@ -1265,8 +1387,11 @@ export default { ...@@ -1265,8 +1387,11 @@ export default {
} }
} }
&_right { &_right {
width: 65%; width: 64%;
height: 90%; height: 97%;
border: 1px solid #f4f4f4;
border-radius: 4px;
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
// 无数据样式 // 无数据样式
&_box { &_box {
width: 100%; width: 100%;
...@@ -1286,6 +1411,31 @@ export default { ...@@ -1286,6 +1411,31 @@ export default {
font-weight: 400; font-weight: 400;
} }
} }
//中间有数据
&_treebtn {
display: flex;
justify-content: flex-start;
margin: 5px 10px 15px 10px;
&_span {
display: flex;
justify-content: center;
color: #5d5d5d;
width: 60px;
height: 21px;
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
align-items: center;
align-content: center;
line-height: 21px;
background: #f3fafd;
cursor: pointer;
}
&_span1 {
background-color: #2cabe3;
color: #fff;
}
}
&_table { &_table {
height: calc(100% - 100px); height: calc(100% - 100px);
} }
...@@ -1300,23 +1450,30 @@ export default { ...@@ -1300,23 +1450,30 @@ export default {
&_rght2 { &_rght2 {
width: 20%; width: 20%;
height: 100%; height: 98%;
border: 1px solid #f6f6f8; border: 1px solid #f4f4f4;
border-radius: 4px;
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
padding: 0 10px; padding: 0 10px;
&_top { &_top {
height: 20%; height: 24%;
width: 100%; width: 100%;
border-bottom: 3px solid #eef8fd; border-bottom: 3px solid #eef8fd;
&_title { &_title {
width: 98px; width: 98px;
height: 19px; height: 21px;
line-height: 21px;
text-align: start; text-align: start;
padding-left: 10px; padding-left: 10px;
background-color: #2cabe3; // background-color: #2cabe3;
background-image: url("../assets/img/bj.png");
background-repeat: no-repeat;
margin: 5px 1px;
background-size: 100% 21px;
font-size: 14px; font-size: 14px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 400; font-weight: 400;
color: white; color: #ffffff;
} }
&_mes { &_mes {
width: 100%; width: 100%;
...@@ -1383,7 +1540,7 @@ export default { ...@@ -1383,7 +1540,7 @@ export default {
} }
} }
&_bottom { &_bottom {
height: 70%; height: 75%;
width: 100%; width: 100%;
overflow-y: scroll; overflow-y: scroll;
...@@ -1397,15 +1554,16 @@ export default { ...@@ -1397,15 +1554,16 @@ export default {
justify-content: space-around; justify-content: space-around;
border-bottom: 3px solid #eef8fd; border-bottom: 3px solid #eef8fd;
&_title { &_title {
width: 69px; width: 50px;
height: 32px; height: 25px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 20px; font-size: 14px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 400; font-weight: 400;
color: white; color: #ffffff;
border-radius: 3px;
} }
&_cont { &_cont {
font-size: 16px; font-size: 16px;
......
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