postdischarge-ui/src/views/manage/components/PathReview.vue

<template>
    <div style="background-color: #f1f3f5;width:100%">
        <!-- 画像审核 -->
        <div class="card">
            <div class="cardleft">
                <div class="title">
                    <div style="display: flex; align-items: center">
                        <img class="headsculpture" v-if="list.sex == 'MALE'"
                            src="../../../assets/manage/touxiang.png" />
                        <img class="headsculpture" v-else src="../../../assets/manage/nvtouxiang.png" />
                        <div class="name">
                            {{ list.patientName ? list.patientName : "" }}
                        </div>
                        <div class="genderandage">
                            <span>
                                {{ list.sex == "MALE" ? "男" : "" }}
                                {{ list.sex == "FEMALE" ? "女" : "" }}
                            </span>
                            <span v-if="list.sex && list.age" style="padding: 0 6px">|</span>
                            <span v-if="list.age">{{ list.age }}岁</span>
                        </div>
                    </div>
                    <div class="source">
                        <div class="situation item">
                            {{ list.visitMethod == "OUTPATIENT_SERVICE" ? "门诊" : "" }}
                            {{ list.visitMethod == "BE_IN_HOSPITAL" ? "住院" : "" }}
                        </div>
                        <div class="item" style="color: #00e06e; border-color: #00e06e"
                            v-if="list.patientSource == 'WE_CHAT_OFFICIAL_ACCOUNT'">
                            <img src="../../../assets/manage/gzh.png" alt="" />
                            <div>公众号</div>
                        </div>
                        <div class="item" style="color: #339de5; border-color: #339de5"
                            v-if="list.patientSource == 'WE_CHAT_APPLET'">
                            <img src="../../../assets/manage/xcx.png" alt="" />
                            <div>小程序</div>
                        </div>
                        <div class="item" style="color: #f4881f; border-color: #f4881f"
                            v-if="list.patientSource == 'MANAGE_END'">
                            <img src="../../../assets/manage/gld.png" alt="" />
                            <div>管理端</div>
                        </div>
                    </div>
                </div>
                <el-descriptions title="诊断信息" style="margin: 30px 0 0;" />
                <div class="texts">
                    <div class="text">
                        <div slot="reference" class="reference">
                            <img src="../../../assets/pathReview/zhu.png" alt="">
                            <span>
                                hover 激活
                            </span>
                        </div>
                    </div>
                    <div class="text">
                        <div slot="reference" class="reference">
                            <img src="../../../assets/pathReview/ci.png" alt="">
                            <span>
                                hover 激活
                            </span>
                        </div>
                    </div>
                    <div class="text">
                        <div slot="reference" class="reference">
                            <img src="../../../assets/pathReview/ci.png" alt="">
                            <span>
                                hover 激活
                            </span>
                        </div>
                    </div>
                    <div class="text">
                        <div slot="reference" class="reference">
                            <img src="../../../assets/pathReview/ci.png" alt="">
                            <span>
                                hover 激活
                            </span>
                        </div>
                    </div>
                    <div class="text">
                        <div slot="reference" class="reference">
                            <img src="../../../assets/pathReview/ci.png" alt="">
                            <span>
                                hover 激活
                            </span>
                        </div>
                    </div>
                </div>
                <el-descriptions title="用药情况" style="margin: 30px 0 0;" />
                <div class="texts">
                    <div class="text">
                        <el-popover placement="bottom" width="400" trigger="hover">
                            <el-descriptions title="用户信息" :column="2">
                                <el-descriptions-item label="用药频次">每日2次</el-descriptions-item>
                                <el-descriptions-item label="药品用法">1片</el-descriptions-item>
                                <el-descriptions-item label="注意事项"></el-descriptions-item>
                                <el-descriptions-item label="给药方式"></el-descriptions-item>
                                <el-descriptions-item label="用药时长"></el-descriptions-item>
                                <el-descriptions-item label="用药途径"></el-descriptions-item>
                            </el-descriptions>
                            <div slot="reference" class="reference">
                                <img src="../../../assets/pathReview/yaopin.png" alt="">
                                <span>
                                    hover 激活
                                </span>
                            </div>
                        </el-popover>
                    </div>
                    <div class="text">
                        <el-popover placement="bottom" width="400" trigger="hover">
                            <el-descriptions title="用户信息" :column="2">
                                <el-descriptions-item label="用药频次">每日2次</el-descriptions-item>
                                <el-descriptions-item label="药品用法">1片</el-descriptions-item>
                                <el-descriptions-item label="注意事项"></el-descriptions-item>
                                <el-descriptions-item label="给药方式"></el-descriptions-item>
                                <el-descriptions-item label="用药时长"></el-descriptions-item>
                                <el-descriptions-item label="用药途径"></el-descriptions-item>
                            </el-descriptions>
                            <div slot="reference" class="reference">
                                <img src="../../../assets/pathReview/yaopin.png" alt="">
                                <span>
                                    hover 激活
                                </span>
                            </div>
                        </el-popover>
                    </div>
                </div>
                <el-descriptions title="复诊日期及科室" style="margin: 30px 0 0;" />
                <div class="texts">
                    <div class="text">
                        <div slot="reference" class="reference">
                            <img src="../../../assets/pathReview/riqi.png" alt="">
                            <span>
                                hover 激活
                            </span>
                        </div>
                    </div>
                    <div class="text">
                        <div slot="reference" class="reference">
                            <img src="../../../assets/pathReview/riqi.png" alt="">
                            <span>
                                hover 激活
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 画像编辑右侧 -->
            <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="getlist">
                        <img src="../../../assets/pathReview/blackrenwu.png" alt="" v-if="tab != 2">
                        <img src="../../../assets/pathReview/bluerenwu.png" alt="" v-else>
                        <span>路径任务</span>
                    </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.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 }}
                                </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.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:38%">
                                    {{ item.routeNodeNameCN }}
                                    {{ item.routeNodeDay }}
                                    天
                                </div>
                                <div class="lefttext">
                                    执行时间:
                                </div>
                                <div class="lefttext" style="width:38%">
                                    {{ item.executeTime }}
                                </div>
                            </div>
                            <div class="tabtext">
                                <div class="lefttext">
                                    推送方式:
                                </div>
                                <div class="righttext">
                                    <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.templateType == 'SCRIPT'">
                                <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.templateType == 'PROPAGANDA'">
                                <div class="lefttext">
                                    宣教
                                </div>
                                <div class="righttextarea">
                                    <span 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.templateType == 'QUESTIONNAIRE'">
                                <div class="lefttext">
                                    问卷
                                </div>
                                <div class="righttextarea">
                                    <questionopennew :lookitemnew="item.templateDetail"></questionopennew>
                                </div>
                            </div>
                            <div class="tabtext" v-else-if="item.templateType == 'TEXT_REMIND'">
                                <div class="lefttext">
                                    文字提醒
                                </div>
                                <div class="righttextarea">
                                    {{ item.textRemindContent }}
                                </div>
                            </div>
                            <div class="tabtext" v-else>
                                <div class="lefttext">
                                    内容
                                </div>
                                <div class="righttextarea" v-html="item.nodeContent">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog title="话术预览" :visible.sync="lookshow" width="90%">
            <Scriptpreview :phoneNodeContent="phoneNodeContent" v-if="lookshow"></Scriptpreview>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="lookshow = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getByPatientId,
    getRouteAuditinfo,
    getRouteNodeInfo
} from '@/api/manage/Auditing.js'
import { getAge } from "@/utils/age";
import questionopennew from './questionopennew.vue';
import Scriptpreview from './Scriptpreviewopen.vue'
export default {
    name: "PathReview",
    components: { questionopennew, Scriptpreview },
    data() {
        return {
            baseUrl: process.env.VUE_APP_BASE_API,
            list: {},
            tab: 1,
            activeNames: ['1', '2'],
            informationlist: {
                routeName: "",
                diseaseTypeName: '',
                nodeList: [],
                childRouteList: []
            },
            routelist: undefined,
            phoneNodeContent: {
                scriptInfoId: null,
                flowScheme: null,
                nodes: [],
                edges: [],
            },
            lookshow: false,
        };
    },
    created() {
        this.info();
    },
    methods: {
        info() {
            this.tab = 1
            const loading = this.$loading({
                lock: true,
                text: '加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(255, 255, 255, 0.7)'
            });
            getByPatientId(this.$route.query.patientId).then(res => {
                res.data.birthDate ? res.data.age = getAge(res.data.birthDate) : ''
                this.list = res.data
            })
            getRouteAuditinfo(this.$route.query.signRecordId).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();
            })
        },
        getlist() {
            if (!this.routelist) {
                getRouteNodeInfo(this.$route.query.signRecordId).then(res => {
                    this.routelist = res.data
                    this.tab = 2
                })
            } else {
                this.tab = 2
            }
        },
        scriptlook(item) {
            this.phoneNodeContent = item.phoneNodeContent
            this.lookshow = true
            // this.$router.push({
            //     path: "/Scriptpreviewopen",
            //     query: { id: item.phoneNodeContent }
            // });
        },
    }
};
</script>
<style lang="scss" scoped>
.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 {
            min-height: 80px;
            padding: 10px;
            width: 90%;
            height: 100%;
            border: 1.5px solid #C7C7C7;
            border-radius: 5px;
        }
    }
}

.tabtwo {
    background-color: #fff;
    margin-top: 20px;
    padding: 15px;
}

.zljtitle {
    font-size: 14px;
    height: 50px;
    line-height: 50px;
    color: #92A2AB;
    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-bottom: 12px;
    border-radius: 6px;
}

.reference {
    display: flex !important;
    align-items: center !important;
    padding: 0 20px !important;

    img {
        width: 24px;
        height: 24px;
    }

    span {
        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 - 119px);

    .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%;
        padding: 10px;
        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;
                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;
            }
        }
    }
}
</style>