Skip to content

V
vue-composition-api
Commit 6c0e2f6f by wangshuangqing
Options

添加进入路径路由 

配置进入路径页面
对接展示  跳转接口
完成进入路径页面
parent 82926640
Showing with 482 additions and 98 deletions
src/router/index.js
......@@ -2,7 +2,7 @@
* @Author: ninglupeng
* @Date: 2022-06-07 00:31:25
* @LastEditors: wsq
* @LastEditTime: 2022-12-13 16:38:12
* @LastEditTime: 2023-01-09 13:55:06
* @Description:
*/
import Vue from "vue";
......@@ -12,7 +12,8 @@ import { getItem, clear } from "@/utils/auth";
import outseeQualityControl from "@/views/outseeQualityControl.vue";
import outpatientDetails from "@/views/outpatientDetails.vue";
import outHistorygrouping from "@/views/outHistorygrouping.vue";
import outClinicalpathway from "@/views/outClinicalpathway.vue"
import outClinicalpathway from "@/views/outClinicalpathway.vue";
import Entrypath from '@/views/Entrypath.vue';
Vue.use(Router);
// const baseUrl = '/his/'
......@@ -41,6 +42,13 @@ const router = new Router({
name: "outHistorygrouping",
component: outHistorygrouping,
},
//进入路径
{
path:'/Entrypath',
name:'Entrypath',
component:Entrypath
},
//临床路径外放页面
{
path: "/outClinicalpathway",
......
src/views/Entrypath.vue 0 → 100644
<!--
* @Author: wsq
* @Date: 2022-04-22 15:20:58
* @LastEditors: wsq
* @LastEditTime: 2023-01-09 17:24:11
* @Description:
-->
<template>
<!-- 进入路径外放页面 -->
<div class="Entrypath">
<div class="Entrypath_top">
<div class="Entrypath_top_left">
<span><img src="../assets/img/peo.png" alt="" /></span>
<div class="Entrypath_top_left_t1">
患者姓名:<span>{{ topdata.patientName }}</span>
</div>
<div class="Entrypath_top_left_t2">
住院号:<span>{{ topdata.regCode }}</span>
</div>
<div class="Entrypath_top_left_t3">
住院次数:<span>{{ topdata.inHosNum }}</span>
</div>
</div>
<div class="Entrypath_top_right">
<el-button type="primary" size="mini" @click="okbtn()"
>确定进入路径</el-button
>
</div>
</div>
<div class="Entrypath_table">
<!-- 左侧表格开始 -->
<div class="Entrypath_table_lefttab">
<el-table
ref="leftTable"
:data="LefttableData"
border
height="100%"
stripe
@row-click="rowclick"
:highlight-current-row="true"
>
<el-table-column type="index" />
<el-table-column
show-overflow-tooltip
property="clinical_route_name"
label="路径名称"
/>
</el-table>
</div>
<!-- 左侧表格结束 -->
<!-- 右侧表格开始 -->
<div class="Entrypath_table_righttab">
<!-- 第一个表格 -->
<div class="Entrypath_table_righttab_one">
<el-table
ref="leftTable"
scrollbar-always-on
height="100%"
:data="OnetableData"
border
stripe
>
<el-table-column
show-overflow-tooltip
property="code"
label="诊断编码"
/>
<el-table-column
show-overflow-tooltip
property="name"
label="诊断名称"
/>
</el-table>
</div>
<!-- 第二个表格 -->
<div class="Entrypath_table_righttab_two">
<el-table
ref="leftTable"
border
:data="TwotableData"
scrollbar-always-on
height="100%"
stripe
>
<el-table-column
show-overflow-tooltip
property="code"
label="手术编码"
/>
<el-table-column
show-overflow-tooltip
property="name"
label="手术名称"
/>
</el-table>
</div>
<!-- 第三个表格 -->
<div class="Entrypath_table_righttab_tree">
<el-table
ref="leftTable"
border
:data="TreetableData"
scrollbar-always-on
height="100%"
stripe
>
<el-table-column
show-overflow-tooltip
property="describe"
label="进入路径标准"
/>
</el-table>
</div>
</div>
<!-- 右侧表格结束 -->
</div>
</div>
</template>
<script>
import http from "../utils/http";
import {
reactive,
toRefs,
onMounted,
nextTick,
computed,
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";
import { Loading } from "element-ui";
export default {
name: "Entrypath",
setup() {
//表格自适应高度
const route = useRoute();
const router = useRouter();
let state = reactive({
//标识
IsRoute: "",
//患者信息
topdata: {
patientName: "", //患者姓名
regCode: "", // 住院号
inHosNum: "", // 住院次数
inHosTime: "", // 入院时间
},
iscid: 0, //是否有背景颜色
//左侧表格数据
LefttableData: [],
//右侧第一个表格
OnetableData: [],
//右侧第二个表格
TwotableData: [],
//第三个表格
TreetableData: [],
});
// loading效果
const loadingOption1 = {
// 加载loading
fullscreen: true,
text: "正在加载...",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.5)",
};
//获取标识
const getIsRoute = () => {
http
.post(
`/ClinicalRoute/ClinicalRoute/IsRoute?pid=${route.value.query.pid}`,
{}
)
.then((data) => {
state.IsRoute = data;
})
.catch((error) => {});
};
//获取患者信息
const gettopdata = () => {
http
.post(
`/ClinicalRoute/ClinicalRoute/GetPatientInfo?pid=${route.value.query.pid}`,
{}
)
.then((data) => {
state.topdata = data;
//如果标识为false 跳转到临床路径外放页面
if (state.IsRoute == false) {
router.push({
path: "outClinicalpathway",
query: {
pid: route.value.query.pid,
},
});
}
})
.catch((error) => {});
};
//获取左侧表格数据
const getLeftdata = () => {
http
.post(
`/ClinicalRoute/ClinicalRoute/GetPatientRoutes?pid=${route.value.query.pid}`,
{}
)
.then((data) => {
state.LefttableData = data;
})
.catch((error) => {});
};
//点击左侧表格数据
const rowclick = (row) => {
state.iscid = row.id;
var loadingInstance1 = Loading.service(loadingOption1);
//获取右侧数据
http
.post(
`/ClinicalRoute/ClinicalRoute/GetCRRuleDescribe?crid=${row.id}`,
{}
)
.then((data) => {
state.OnetableData = data.diagInfo; //诊断信息
state.TwotableData = data.opsInfo;
state.TreetableData = data.staCRStandards;
loadingInstance1.close();
})
.catch((error) => {
loadingInstance1.close();
});
};
//点击进入路径按钮
const okbtn = () => {
console.log("state.iscid", state.iscid);
if (state.iscid == 0) {
Message({
message: "请先选择路径名称！",
type: "warning",
});
} else if (state.iscid != 0) {
http
.post(
`/ClinicalRoute/ClinicalRoute/CreatePatientRoute?pid=${route.value.query.pid}&crid=${state.iscid}`,
{}
)
.then((data) => {
Message({
message: "成功",
type: "success",
});
router.push({
path: "outClinicalpathway",
query: {
pid: route.value.query.pid,
},
});
})
.catch((error) => {});
}
};
onMounted(() => {
getIsRoute();
gettopdata();
getLeftdata();
});
return {
...toRefs(state),
gettopdata,
decimal,
getIsRoute,
getLeftdata,
rowclick,
okbtn,
};
},
};
</script>
<style lang="scss" scoped>
@import "../styles/mixin.scss";
// @import "../styles/media/components/outClinicalpathway.scss";
// 左侧表格点击高亮背景色
::v-deep .el-table__body tr.current-row > td {
background-color: #ffff !important;
}
// 点击文本颜色
::v-deep .current-row {
color: #55a6da !important;
}
// 点击icon颜色
::v-deep .current-row .el-table__expand-icon {
color: #55a6da !important;
}
// 左侧表格点击高亮背景色
::v-deep .el-table__body tr.current-row > td {
background-color: #ffff !important;
}
// 滚动条的宽度
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
/*滚动条整体样式*/
width: 10px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 10px;
background-color: #ffff;
}
// 滚动条的滑块
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #27aae2;
border: 3px solid transparent;
border-radius: 9px;
background-clip: content-box;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
/*滚动条里面轨道*/
border-radius: 20px;
background: #ffff;
width: 10px;
}
.Entrypath {
height: 900px;
background-color: #f0f0f0;
overflow: hidden;
position: relative;
&_top {
width: 100%;
height: 10%;
background-color: #ffff;
display: flex;
align-items: center;
margin-bottom: 5px;
&_left {
width: 80%;
height: 50%;
background-color: #f2fafd;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
span {
width: 2%;
height: 100%;
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
}
&_t1 {
width: 30%;
height: 80%;
margin-right: 5px;
background-color: #ffff;
display: flex;
align-items: center;
color: #acacac;
font-weight: 400;
padding-left: 20px;
span {
width: 80%;
color: #787878;
display: flex;
justify-content: flex-start;
font-weight: 600;
align-items: center;
}
}
&_t2 {
width: 30%;
height: 80%;
margin-right: 5px;
background-color: #ffff;
display: flex;
align-items: center;
color: #acacac;
font-weight: 400;
padding-left: 20px;
span {
width: 80%;
color: #787878;
display: flex;
justify-content: flex-start;
font-weight: 600;
align-items: center;
}
}
&_t3 {
width: 30%;
height: 80%;
margin-right: 5px;
background-color: #ffff;
margin-right: 10px;
display: flex;
align-items: center;
color: #acacac;
font-weight: 400;
padding-left: 20px;
span {
width: 80%;
font-weight: 600;
color: #787878;
display: flex;
justify-content: flex-start;
align-items: center;
}
}
}
&_right {
width: 20%;
height: 50%;
display: flex;
align-items: center;
justify-content: center;
}
}
&_table {
width: 100%;
height: 89%;
display: flex;
background-color: #ffff;
&_lefttab {
width: 30%;
height: 100%;
margin-right: 2%;
}
&_righttab {
width: 67%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
&_one {
width: 100%;
height: 30%;
}
&_two {
width: 100%;
height: 30%;
}
&_tree {
width: 100%;
height: 30%;
}
}
}
}
</style>
src/views/outClinicalpathway.vue
......@@ -2,7 +2,7 @@
* @Author: wsq
* @Date: 2022-04-22 15:20:58
* @LastEditors: wsq
* @LastEditTime: 2023-01-09 13:14:30
* @LastEditTime: 2023-01-09 16:24:06
* @Description:
-->
<template>
......@@ -27,64 +27,7 @@
入院时间:<span>{{topdata.inHosTime }}</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 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 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">
......@@ -155,14 +98,7 @@ export default {
setup() {
//表格自适应高度
const route = useRoute();
//表格颜色
const tableRowClassName = ({ row }) => {
if (row.rowIndex % 2 == 0) {
return "isverifyStyle";
} else {
return "";
}
};
const monthlyPlanTable = ref();
const multipleTableRef = ref();
let state = reactive({
......@@ -217,12 +153,7 @@ export default {
address: "No. 189, Grove St, Los Angeles",
},
],
treatmentinpt: "", //治疗方式输入框
treatmentoptions: [], //治疗方式下拉值
orderinpt: "", //医嘱类型输入框
orderoptions: [], //医嘱类型下拉值
pathinpt: "", //临床路径
pathroptions: [], //临床路径下拉值
//时间线
activities: [
{
......@@ -264,7 +195,7 @@ export default {
.post(`/ClinicalRoute/ClinicalRoute/GetPatientInfo?pid=${route.value.query.pid}`, {})
.then((data) => {
state.topdata=data;
console.log('data',data);
})
.catch((error) => {});
};
......@@ -287,7 +218,7 @@ export default {
return {
...toRefs(state),
tableRowClassName,
decimal,
......@@ -330,7 +261,7 @@ export default {
position: relative;
&_top {
width: 100%;
height: 20%;
height: 15%;
margin-bottom: 5px;
background-color: #ffff;
padding: 10px;
......@@ -444,23 +375,7 @@ export default {
}
}
}
&_two {
width: 100%;
height: 30%;
display: flex;
align-items: center;
justify-content: space-between;
color: #444444;
&_inp1 {
width: 30%;
}
&_inp2 {
width: 30%;
}
&_inp3 {
width: 40%;
}
}
}
&_right {
height: 100%;
......@@ -471,7 +386,7 @@ export default {
}
}
&_table {
height: 76%;
height: 81%;
width: 100%;
display: flex;
&_left {
......
vue.config.js
......@@ -2,7 +2,7 @@
* @Author: ninglupeng
* @Date: 2022-06-07 00:31:25
* @LastEditors: wsq
* @LastEditTime: 2023-01-09 10:19:55
* @LastEditTime: 2023-01-09 13:31:21
* @Description:
*/
const path = require('path');
......@@ -20,7 +20,7 @@ module.exports = {
proxy: {
'/api': {
//target: 'http://192.168.18.166:8099/',
target: 'http://192.168.18.166:8100',
target: 'http://192.168.18.166:8100/',
changeOrigin: true,
pathRewrite: {
'^/': '/'
......
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