postdischarge-ui/src/views/manage/Auditing/index.vue

<template>
    <div style="background-color:#F1F3F5">
        <div slot="footer" style="float: right;padding:10px 10px 0 0;height:35px">
            <el-button size="mini" @click="cancel">取 消</el-button>
            <el-button size="mini" type="primary">审核通过</el-button>
        </div>
        <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>
                <div class="texts">
                    <div class="text">
                        医院: {{ list.hospitalAgencyName ? list.hospitalAgencyName : '' }}
                    </div>
                    <div class="text">
                        科室: {{ list.departmentName ? list.departmentName : '' }}
                    </div>
                    <div class="text" v-if="list.visitMethod == 'BE_IN_HOSPITAL'">
                        入院时间: {{ list.admissionTime }}
                    </div>
                    <div class="text" v-if="list.visitMethod == 'BE_IN_HOSPITAL'">
                        出院时间: {{ list.dischargeTime }}
                    </div>
                    <div class="text" v-if="list.visitMethod == 'OUTPATIENT_SERVICE'">
                        就诊时间: {{ list.dischargeTime }}
                    </div>
                </div>
                <el-descriptions title="诊断信息" style="margin:16px auto">
                    <el-descriptions-item label="主要诊断">{{ list.mainDiagnosis }}</el-descriptions-item>
                </el-descriptions>
                <el-descriptions title="手术信息" style="margin:16px auto;border-top: 1px solid #e6ebf5;"
                    v-if="list.visitMethod != 'OUTPATIENT_SERVICE'">
                    <el-descriptions-item label="手术名称">{{ list.surgicalName }}</el-descriptions-item>
                </el-descriptions>
                <el-collapse v-model="activeNames">
                    <el-collapse-item title="入院记录" name="-1">
                        <div>{{ list.inHospitalInfo }}</div>
                    </el-collapse-item>
                    <el-collapse-item title="手术记录" name="-2" v-if="list.visitMethod != 'OUTPATIENT_SERVICE'">
                        <div>{{ list.surgicalRecord }}</div>
                    </el-collapse-item>
                    <el-collapse-item title="出院记录" name="-3" v-if="list.visitMethod != 'OUTPATIENT_SERVICE'">
                        <div>{{ list.outHospitalInfo }}</div>
                    </el-collapse-item>
                </el-collapse>
            </div>
            <div class="cardright">
                <div class="text" style="font-size: 20px;"> 任务:</div>
                <div v-for="item in nodelist" :key="item.manageRouteId" style="margin: 0 auto 30px;">
                    <div class="texts">
                        <div class="text">
                            任务名称: {{ item.routeName }}
                        </div>
                        <div class="text">
                            适用范围: {{ item.suitRange == 'IN_THE_HOSPITAL' ? '在院' : '' }}
                            {{ item.suitRange == 'DISCHARGE' ? '出院' : '' }}
                            {{ item.suitRange == 'OUTPATIENT_SERVICE' ? '门诊' : '' }}
                            {{ item.suitRange == 'OUTPATIENT_SERVICE_DISCHARGE' ? '门诊+出院' : "" }}
                        </div>
                    </div>
                    <div v-for="uitem in item.nodeList" :key="uitem.id">
                        <div class="texts">
                            <div class="text" style="font-size:14px;font-weight: 400;">
                                任务内容: {{ uitem.taskType == 'PHONE_OUTBOUND' ? "电话外呼" : "" }}
                                {{ uitem.taskType == 'QUESTIONNAIRE_SCALE' ? "问卷量表" : "" }}
                                {{ uitem.taskType == 'PROPAGANDA_ARTICLE' ? "宣教文案" : "" }}
                                {{ uitem.taskType == 'TEXT_REMIND' ? "文字提醒" : "" }}
                                {{ uitem.taskType == 'ARTIFICIAL_FOLLOW_UP' ? "人工随访" : "" }}
                            </div>
                            <div class="text" style="font-size:14px;font-weight: 400;"
                                v-if="uitem.taskType == 'PHONE_OUTBOUND'">
                                电话模板:{{ uitem.phoneTemplateName }}
                            </div>
                            <div class="text" style="font-size:14px;font-weight: 400;"
                                v-if="uitem.taskType == 'QUESTIONNAIRE_SCALE'">
                                问卷模板:{{ uitem.questionnaireName }}
                            </div>
                            <div class="text" style="font-size:14px;font-weight: 400;"
                                v-if="uitem.taskType == 'QUESTIONNAIRE_SCALE'">
                                问卷有效期:{{ uitem.questionExpirationDate }}天
                            </div>
                            <div class="text" style="font-size:14px;font-weight: 400;"
                                v-if="uitem.taskType == 'PROPAGANDA_ARTICLE'">
                                宣教模板:{{ uitem.propagandaTitle }}
                            </div>
                            <div class="textarea" v-if="uitem.taskType == 'TEXT_REMIND'">
                                提醒内容:{{ uitem.textRemindContent }}
                            </div>
                            <div class="text" style="font-size:14px;font-weight: 400;"
                                v-if="uitem.taskType == 'ARTIFICIAL_FOLLOW_UP'">
                                人工随访模板:{{ uitem.questionnaireName }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {
    getRouteNodeList,
    getByPatientId
} from '@/api/manage/Auditing.js'
import { getAge } from "@/utils/age";
export default {
    name: "Auditing",
    data() {
        return {
            activeNames: ['-1', '-2', '-3'],
            list: {
                visitMethod: "BE_IN_HOSPITAL",
            },
            nodelist: [],
        };
    },
    created() {
        this.info();
    },
    methods: {
        info() {
            getByPatientId(this.$route.query.patientId).then(res => {
                res.data.birthDate ? res.data.age = getAge(res.data.birthDate) : ''
                this.list = res.data
            })
            getRouteNodeList({ patientId: this.$route.query.patientId, taskCreateType: 'MANUAL_CREATE' }).then(res => {
                this.nodelist = res.data
                this.nodelist.forEach(e => {
                    let text
                    e.suitRange == 'IN_THE_HOSPITAL' ? text = '在院' : e.suitRange == 'DISCHARGE' ? text = '出院' : e.suitRange == 'OUTPATIENT_SERVICE' ? text = '门诊' : e.suitRange == 'OUTPATIENT_SERVICE_DISCHARGE' ? text = '门诊+出院' : text = ""
                    e.title = '任务名称:' + e.routeName + +'适用范围:' + text
                })
            })
        },
        cancel() {
            this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {
                this.$router.push({
                    path: "/task/manualReview",
                });
            })
        },
    }
};
</script>
<style lang="scss" scoped>
::v-deep .el-collapse-item__header {
    font-size: 16px;
    font-weight: bold;
}

.texts {
    margin: 16px 0 20px;
    flex-wrap: wrap;
    width: 100%;
    display: flex;
    font-size: 14px;

    .text {
        margin-bottom: 10px;
        width: 50%;
        overflow: hidden;
        white-space: nowrap;
        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: scroll;
        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: scroll;
        background-color: #fff;
        width: 62%;
        padding: 20px;
        font-size: 14px;

        .textarea {
            font-size: 14px;
            font-weight: 400;
            margin-bottom: 10px;
            width: 100%;
        }

        .text {
            font-size: 16px;
            font-weight: bold;
        }
    }
}
</style>