postdischarge-ui/src/views/manage/components/specialDiseaseRoute.vue
2024-07-29 14:14:30 +08:00

937 lines
26 KiB
Vue

<template>
<div>
<el-button
size="small"
@click="classificationOpen = true"
style="width: 200px; font-size: 14px; text-align: left"
:style="handleselectName ? 'color:black' : 'color:#C0C4CC'"
>{{
handleselectName ? handleselectName : "请选择专病管理路径"
}}</el-button
>
<el-dialog
title="专病管理路径选择"
:visible.sync="classificationOpen"
width="70%"
:before-close="classificationOpenfalse"
>
<el-row :gutter="20">
<el-col :span="6" :xs="24">
<DepartmentList
ref="DepartmentList"
:modal="false"
@clickdepartment="clickdepartment"
:servicePackageId="servicePackageId"
:methods="'selectDiseaseCounttwo'"
>
</DepartmentList>
</el-col>
<el-col :span="18">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="路径名称" prop="routeName">
<el-input
v-model="queryParams.routeName"
placeholder="请输入路径名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="路径分类" prop="routeClassify">
<el-select
v-model="queryParams.routeClassify"
placeholder="请选择"
>
<el-option label="全部" value="ALL" />
<el-option
label="科室管理路径"
value="DEPARTMENT_MANAGE_PATH"
/>
<el-option
label="专病管理路径"
value="SPECIAL_DIEASE_MANAGE_PATH"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<el-table
v-loading="loading"
:data="specialDiseaseRouteList"
@selection-change="handleSelectionChange"
@row-dblclick="handleselect"
>
<el-table-column
label="序号"
type="index"
width="55"
align="center"
/>
<el-table-column label="路径名称" align="center" prop="routeName" />
<el-table-column label="版本号" align="center" prop="version" />
<el-table-column
label="路径分类"
align="center"
prop="routeClassify"
>
<template slot-scope="scope">
{{
scope.row.routeClassify == "DEPARTMENT_MANAGE_PATH"
? "科室管理路径"
: ""
}}
{{
scope.row.routeClassify == "SPECIAL_DIEASE_MANAGE_PATH"
? "专病管理路径"
: ""
}}
</template>
</el-table-column>
<el-table-column
label="病种名称"
align="center"
prop="diseaseTypeName"
/>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="handleselectdetal(scope.row)"
>详情</el-button
>
<el-button
size="mini"
type="text"
@click="handleselect(scope.row)"
v-if="handleselectId != scope.row.id"
>选择</el-button
>
<el-button
size="mini"
type="text"
@click="nohandleselect(scope.row)"
v-if="handleselectId == scope.row.id"
>取消选择</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-col>
</el-row>
</el-dialog>
<!-- 画像编辑右侧 -->
<el-dialog
title="详情"
:visible.sync="routeOpen"
width="70%"
:before-close="routeOpenfalse"
>
<div class="cardright">
<div class="topbtns">
<div
class="topbutton"
:class="tab == 1 ? 'blue' : ''"
@click="tab = 1"
>
<img
src="../../../assets/pathReview/blackxinxi.png"
alt=""
v-if="tab != 1"
/>
<img src="../../../assets/pathReview/bluexinxi.png" alt="" v-else />
<span>路径信息</span>
</div>
<div
class="topbutton"
:class="tab == 2 ? 'blue' : ''"
@click="getlists"
:style="tab == 2 ? 'min-width:150px' : ''"
>
<img
src="../../../assets/pathReview/blackrenwu.png"
alt=""
v-if="tab != 2"
/>
<img src="../../../assets/pathReview/bluerenwu.png" alt="" v-else />
<span>路径任务</span>
<!-- <el-switch v-if="tab == 2" v-model="switchvalue" active-color="#1890ff" inactive-color="#DDE0E9"
@change="changeswitch">
</el-switch> -->
</div>
</div>
<div v-if="tab == 1">
<div class="nodetitle">
<div>主路径:{{ informationlist.routeName }}</div>
<div>病种:{{ informationlist.diseaseTypeName }}</div>
</div>
<el-collapse v-model="activeNames">
<el-collapse-item title="主路径" name="1">
<el-table :data="informationlist.nodeList" style="width: 100%">
<el-table-column prop="" label="" width="160">
<template slot-scope="scope">
<div class="zlj" style="font-weight: bold">
{{ scope.row.routeNodeNameCN
}}{{ scope.row.routeNodeDay }}天
</div>
<div class="zlj">
{{ scope.row.executeTime }} {{ scope.row.executionTime }}
</div>
</template>
</el-table-column>
<el-table-column prop="" label="">
<template slot-scope="scope">
<div
class="zljcard"
v-for="(item, index) in scope.row.taskPartitionDictNames"
:key="index"
>
{{ item }}
</div>
</template>
</el-table-column>
</el-table>
</el-collapse-item>
</el-collapse>
<el-collapse v-model="activeNames">
<el-collapse-item title="子路径" name="2">
<div
v-for="item in informationlist.childRouteList"
:key="item.id"
>
<div class="zljtitle">
{{ item.routeName }}
<span v-if="!item.conditionSatisfyStatus" style="color: red"
>(不符合条件)</span
>
</div>
<el-table :data="item.nodeList" style="width: 100%">
<el-table-column prop="" label="" width="160">
<template slot-scope="scope">
<div class="zlj" style="font-weight: bold">
{{ scope.row.routeNodeNameCN
}}{{ scope.row.routeNodeDay }}天
</div>
<!-- <div class="zlj">
{{ scope.row.executeTime }} {{ scope.row.executionTime }}
</div> -->
</template>
</el-table-column>
<el-table-column prop="" label="">
<template slot-scope="scope">
<div
class="zljcard"
style="border-left: 9px solid #8f68fe"
v-for="(item, index) in scope.row
.taskPartitionDictNames"
:key="index"
>
{{ item }}
</div>
</template>
</el-table-column>
</el-table>
</div>
</el-collapse-item>
</el-collapse>
</div>
<div v-if="tab == 2" class="tabtwo">
<div
v-for="item in routelist"
:key="item.id"
style="margin: 0 auto 30px"
>
<div class="tabtexts">
<div class="tabtitle">
{{ item.taskTypeName }}-{{ item.taskPartitionDictName }}
</div>
<div class="tabtext" style="height: 50px; line-height: 30px">
<div class="lefttext">开始节点:</div>
<div class="lefttext" style="width: 22%">
{{ item.routeNodeNameCN }}
{{ item.routeNodeDay }}
</div>
<div class="lefttext">执行时间:</div>
<div class="lefttext" style="width: 17%">
{{ item.executeTime }}
</div>
<div class="lefttext">推送方式:</div>
<div class="lefttext" style="width: 25%">
<span v-if="item.messagePushSign == 1"> 短信 </span>
<span v-if="item.officialPushSign == 1"> 公众号 </span>
<span v-if="item.appletPushSign == 1"> 小程序 </span>
</div>
</div>
</div>
<div class="tabtexts">
<div class="tabtext" v-if="item.messagePushSign == 1">
<div class="lefttext">短信模板</div>
<div class="righttextarea">
{{ item.messageNodeContent }}
</div>
</div>
<div class="tabtext" v-if="item.officialPushSign == 1">
<div class="lefttext">公众号模板</div>
<div class="righttextarea">
{{ item.officialNodeContent }}
</div>
</div>
<div class="tabtext" v-if="item.appletPushSign == 1">
<div class="lefttext">小程序模板</div>
<div class="righttextarea">
{{ item.appletNodeContent }}
</div>
</div>
<div class="tabtext" v-if="item.taskNodeType == 'PHONE_OUTBOUND'">
<div class="lefttext">话术</div>
<div class="righttext">
<!-- <Scriptpreview></Scriptpreview> -->
<el-button
type="primary"
size="small"
@click="scriptlook(item)"
>预览</el-button
>
</div>
</div>
<div
class="tabtext"
v-else-if="item.taskNodeType == 'PROPAGANDA_ARTICLE'"
>
<div class="lefttext">宣教</div>
<div class="righttextarea">
<span
v-if="item.templateDetail"
v-html="item.templateDetail.propagandaContent"
>
</span>
<!-- <editor v-model="item.templateDetail" :min-height="192" style="width: 100%" /> -->
</div>
</div>
<div
class="tabtext"
v-else-if="item.taskNodeType == 'QUESTIONNAIRE_SCALE'"
>
<div class="lefttext">问卷</div>
<div class="righttextarea">
<questionopennew
:lookitemnew="item.templateDetail"
></questionopennew>
</div>
</div>
<div
class="tabtext"
v-else-if="item.taskNodeType == 'TEXT_REMIND'"
>
<div class="lefttext">文字提醒</div>
<div class="righttextarea" v-html="item.nodeContent"></div>
</div>
</div>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listSpecialDiseaseRoute,
selectDiseaseCount,
} from "@/api/system/specialDiseaseRoute";
import DepartmentList from "../../components/DepartmentList.vue";
import questionopennew from "./questionopennew.vue";
import Scriptpreview from "./Scriptpreviewopen.vue";
import { getRouteNodeInfos, getRouteInfo } from "@/api/manage/Auditing.js";
export default {
components: {
DepartmentList,
questionopennew,
Scriptpreview,
},
props: ["routeId", "routeName", "servicePackageId"],
name: "SpecialDiseaseRoute",
data() {
return {
// 遮罩层
// informationlist:[],
baseUrl: process.env.VUE_APP_BASE_API,
tab: 1,
activeNames: ["1", "2"],
informationlist: {
routeName: "",
diseaseTypeName: "",
nodeList: [],
childRouteList: [],
},
loading: true,
routeOpen: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 专病路径信息表格数据
specialDiseaseRouteList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
classificationOpen: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
departmentId: null,
departmentName: null,
diseaseTypeId: null,
diseaseTypeName: null,
routeName: null,
routeCode: null,
version: null,
routeClassify: null,
releaseStatus: "PUBLISHED",
suitRange: null,
routeSort: null,
routeRemark: null,
servicePackageId: null,
},
// 表单校验
rules: {},
handleselectName: "",
handleselectId: "",
routelist: [],
allroutelist: [],
id:'',
phoneNodeContent: {
scriptInfoId: null,
flowScheme: null,
nodes: [],
edges: [],
},
};
},
created() {
this.queryParams.servicePackageId = this.servicePackageId;
// this.info();
},
mounted() {
this.handleselectId = this.routeId;
this.handleselectName = this.routeName;
},
watch: {
routeId(newValue, oldValue) {
this.handleselectId = newValue;
},
servicePackageId(newValue, oldValue) {
if (newValue) {
this.queryParams.servicePackageId = newValue;
this.getList();
}
},
routeName(newValue, oldValue) {
this.handleselectName = newValue;
},
},
methods: {
// changeswitch(e) {
// if (e) {
// this.routelist = this.allroutelist.filter(
// (item) => item.conditionSatisfyStatus
// );
// } else {
// this.routelist = this.allroutelist;
// }
// },
// 专病路径详情
handleselectdetal(row) {},
getlists() {
console.log(this.id,'idddddd')
if (this.routelist.length == 0) {
// const loading = this.$loading({
// lock: true,
// text: "加载中",
// spinner: "el-icon-loading",
// background: "rgba(255, 255, 255, 0.7)",
// });
getRouteNodeInfos(this.id)
.then((res) => {
this.allroutelist = res.data;
this.routelist = res.data;
this.tab = 2;
loading.close();
})
.catch((err) => {
// loading.close();
});
} else {
this.tab = 2;
}
},
handleselectdetal(row) {
this.routeOpen = true;
this.tab = 1;
// const loading = this.$loading({
// lock: true,
// text: '加载中',
// spinner: 'el-icon-loading',
// background: 'rgba(255, 255, 255, 0.7)'
// });
// getPortaitInfo(this.$route.query.patientId).then(res => {
// res.data.birthDate ? res.data.age = getAge(res.data.birthDate) : ''
// this.list = res.data
// })
console.log(row, "row");
this.id=row.id
getRouteInfo(this.id)
.then((res) => {
this.$emit("on-routeCheckStatus", {
routeCheckStatus: res.data.routeCheckStatus,
});
res.data.nodeList?.forEach((e) => {
e.taskPartitionDictNames = e.taskPartitionDictNames.split(",");
});
res.data.childRouteList?.forEach((e) => {
e.nodeList.forEach((el) => {
el.taskPartitionDictNames = el.taskPartitionDictNames.split(",");
});
});
this.informationlist = res.data;
loading.close();
})
.catch(() => {
// loading.close();
});
},
// 关闭详情
routeOpenfalse() {
this.routeOpen = false;
},
//接收科室列表传值
clickdepartment(item) {
this.queryParams.hospitalAgencyId = item.hospitalAgencyId;
this.queryParams.hospitalAgencyName = item.hospitalAgencyName;
this.queryParams.departmentId = item.itemid;
this.queryParams.departmentName = item.itemName;
if (item.hospitalAgencyId) {
this.handleQuery();
}
this.$forceUpdate();
},
nohandleselect() {
this.handleselectId = "";
this.handleselectName = "";
this.$emit("on-template", { routeId: "", routeName: "" });
},
handleselect(item) {
this.handleselectId = item.id;
this.handleselectName = item.routeName;
this.$emit("on-template", {
routeId: item.id,
routeName: item.routeName,
});
this.classificationOpen = false;
},
/** 查询专病路径信息列表 */
getList() {
this.loading = true;
this.queryParams.releaseStatus = "PUBLISHED";
listSpecialDiseaseRoute(this.queryParams).then((response) => {
this.specialDiseaseRouteList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.classificationOpen = false;
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.$refs.DepartmentList.resetQuery();
this.resetForm("queryForm");
// this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
classificationOpenfalse() {
this.classificationOpen = false;
},
},
};
</script>
<style scoped lang="scss">
.tabtwo {
background-color: #fff;
margin-top: 20px;
padding: 15px;
}
.zljtitle {
font-size: 14px;
height: 50px;
padding-left: 2px;
line-height: 50px;
border-bottom: 1px solid #e6ebf5;
}
.zljcard {
display: inline-block;
height: 38px;
min-width: 100px;
line-height: 38px;
border-radius: 6px;
border: 1px solid #D3D3D3;
text-align: center;
box-shadow: 0 2px 4px 0 #D3D3D3;
margin-right: 10px;
padding: 0 15px;
border-left: 9px solid #1890ff;
}
.zlj {
text-align: center;
}
::v-deep .has-gutter {
display: none !important;
}
::v-deep .el-collapse {
width: 100%;
background-color: #fff;
padding: 0 10px;
margin-top: 12px;
border-radius: 6px;
}
.reference {
display: flex !important;
align-items: center !important;
padding: 0 20px !important;
img {
width: 24px;
height: 24px;
}
span {
height: 20px;
line-height: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
padding-left: 10px;
}
}
.texts {
margin: 0 0 20px;
flex-wrap: wrap;
width: 100%;
display: flex;
font-size: 14px;
justify-content: space-between;
.text {
padding: 5px 0;
box-shadow: 0 2px 4px 0 #D3D3D3;
margin-bottom: 15px;
width: 46%;
overflow: hidden;
white-space: nowrap;
border-radius: 5px;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
}
.card {
width: 100%;
display: flex;
justify-content: space-evenly;
// padding: 20px 0;
height: calc(100vh - 159px);
.cardleft {
width: 35%;
background-color: #fff;
overflow: auto;
padding: 20px;
.title {
display: flex;
align-items: center;
justify-content: space-between;
.source {
display: flex;
.situation {
background-color: #f1faf7;
padding: 3px 6px;
color: #83cac0 !important;
border: 1px solid #83cac0 !important;
}
.item {
font-size: 14px;
margin-left: 5px;
border: 1px solid #fff;
padding: 3px 6px;
border-radius: 5px;
justify-content: center;
display: flex;
align-items: center;
img {
margin-right: 2px;
width: 16px;
height: 16px;
}
}
}
.name {
padding: 0 6px;
}
.genderandage {
padding: 0 6px;
}
.headsculpture {
width: 35px;
height: 35px;
}
}
}
.cardright {
overflow: auto;
background-color: rgb(241, 243, 245);
width: 62%;
// height: 700px;
padding: 10px 0;
font-size: 14px;
.nodetitle {
border-radius: 6px;
padding: 0 10px;
height: 50px;
font-size: 16px;
font-weight: bold;
width: 100%;
background-color: #fff;
margin: 12px 0;
display: flex;
div {
height: 100%;
line-height: 50px;
width: 50%;
}
}
.topbtns {
width: 100%;
display: flex;
.topbutton {
background-color: #DDE0E9;
min-width: 100px;
height: 34px;
display: flex;
align-items: center;
justify-content: space-evenly;
border-radius: 6px;
margin-right: 20px;
img {
width: 18px;
height: 18px;
}
}
.blue {
color: #1890ff;
box-shadow: 0 2px 4px 0 #D3D3D3;
background-color: #fff;
}
}
}
}
.tabtexts {
.tabtitle {
font-size: 16px;
font-weight: bold;
padding-bottom: 10px;
}
.tabtext {
font-size: 14px;
font-weight: 400;
padding-bottom: 20px;
width: 100%;
display: flex;
.lefttext {
width: 12%;
}
.righttext {
width: 88%;
height: 100%;
}
.righttextarea {
word-break: break-all;
word-wrap: break-word;
min-height: 80px;
padding: 10px;
width: 90%;
height: 100%;
border: 1.5px solid #C7C7C7;
border-radius: 5px;
}
}
}
.cardright {
overflow: auto;
background-color: rgb(241, 243, 245);
width: 100%;
padding: 10px 0;
font-size: 14px;
.nodetitle {
border-radius: 6px;
padding: 0 10px;
height: 50px;
font-size: 16px;
font-weight: bold;
width: 100%;
background-color: #fff;
margin: 12px 0;
display: flex;
div {
height: 100%;
line-height: 50px;
width: 50%;
}
}
.topbtns {
width: 100%;
display: flex;
.topbutton {
background-color: #dde0e9;
min-width: 100px;
height: 34px;
display: flex;
align-items: center;
justify-content: space-evenly;
border-radius: 6px;
margin-right: 20px;
img {
width: 18px;
height: 18px;
}
}
.blue {
color: #1890ff;
box-shadow: 0 2px 4px 0 #d3d3d3;
background-color: #fff;
}
}
}
.left {
height: 500px;
overflow: auto;
.name {
font-weight: 700;
margin-bottom: 10px;
}
.listitem {
width: 100%;
height: 50px;
border-bottom: 1px solid #dcdfe6;
position: relative;
.count {
display: inline-block;
position: absolute;
left: 210px;
color: #a4a6aa;
top: 50%;
transform: translateY(-50%);
font-size: 13px;
}
.all {
height: 50px;
line-height: 50px;
padding-left: 13px;
}
.allactive {
background: #e8f4ff;
height: 50px;
line-height: 50px;
padding-left: 13px;
border-left: 3px solid #4d9de7;
}
}
}
</style>