postdischarge-ui/src/views/unitconfig/PatientConfigurationVisitRecords/index.vue

<template>
    <div class="header">
        <div class="header-app">
            <div class="addbtn">
                <el-button type="primary" @click="add" size="small">添加就诊记录</el-button>
            </div>
            <el-descriptions title="患者信息">
                <el-descriptions-item label="患者姓名">{{ $route.query.patientName }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{ $route.query.sex == 'MALE' ? '男' : "" }}
                    {{ $route.query.sex == 'FEMALE' ? '女' : "" }}
                </el-descriptions-item>
                <el-descriptions-item label="年龄">{{ $route.query.age }}</el-descriptions-item>
                <el-descriptions-item label="电话">{{ $route.query.patientPhone }}</el-descriptions-item>
                <el-descriptions-item label="pat_id">{{ $route.query.patientId }}</el-descriptions-item>
                <el-descriptions-item label="身份证号">{{ $route.query.cardNo }}</el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="header-app" style="margin-top: 16px;padding:0">
            <div class="left">
                <div class="list">
                    <div class="item" v-for="(item, index) in recodelist" :key="item.id"
                        @click="clickrecord(item, index)" :class="index == recodeindex ? 'tapitem' : ''">
                        <div class="text">入院时间：{{ item.admissionTime }}
                        </div>
                        <div class="text">出院时间：{{ item.dischargeTime }}
                        </div>
                        <div class="text">就诊类型：{{ item.visitMethod == 'OUTPATIENT_SERVICE' ? '门诊' : "" }}
                            {{ item.visitMethod == 'BE_IN_HOSPITAL' ? '住院' : "" }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="right" v-if="recodeindex >= 0">
                <el-descriptions :title="form.id ? '就诊信息' : '新增就诊信息'">
                </el-descriptions>
                <div class="btns">
                    <el-button type="primary" @click="submitForm" size="small">保 存</el-button>
                    <el-button @click="cancel" size="small">取 消</el-button>
                </div>
                <el-form ref="form" :model="form" label-width="120px" :rules="rules">
                    <el-form-item label="就诊方式" prop="visitMethod">
                        <el-radio-group v-model="form.visitMethod">
                            <el-radio label="BE_IN_HOSPITAL">住院</el-radio>
                            <el-radio label="OUTPATIENT_SERVICE">门诊</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <el-form ref="form" :model="form" :rules="rules" label-width="130px" :inline="true">
                    <el-form-item label="主要诊断" prop="mainDiagnosis">
                        <el-input v-model="form.mainDiagnosis" style="width:300px" placeholder="请输入主要诊断"></el-input>
                    </el-form-item>
                    <el-form-item label="就诊流水号" prop="visitSerialNumber">
                        <el-input v-model="form.visitSerialNumber" style="width:300px"
                            placeholder="请输入就诊流水号"></el-input>
                    </el-form-item>
                    <el-form-item label="科室名称" prop="departmentId">
                        <el-select v-model="form.departmentId" filterable placeholder="请选择科室" style="width:300px"
                            clearable>
                            <el-option v-for="item in departmentlist" :key="item.id" :label="item.departmentName"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="主治医生" prop="attendingPhysicianId">
                        <el-select v-model="form.attendingPhysicianId" filterable placeholder="请选择主治医生"
                            style="width:300px" clearable>
                            <el-option v-for="item in attendingPhysicianlist" :key="item.userId" :label="item.nickName"
                                :value="item.userId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="门诊/住院编号" prop="inHospitalNumber">
                        <el-input v-model="form.inHospitalNumber" style="width:300px"
                            placeholder="请输入门诊/住院编号"></el-input>
                    </el-form-item>
                    <el-form-item label="入院时间" prop="admissionTime">
                        <el-date-picker style="width:300px" v-model="form.admissionTime" type="datetime"
                            value-format="yyyy-MM-dd HH:mm" format='yyyy-MM-dd HH:mm' :picker-options="pickerOptions"
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="出院时间" prop="dischargeTime">
                        <el-date-picker style="width:300px" v-model="form.dischargeTime" type="datetime"
                            :picker-options="pickerOptionstwo" value-format="yyyy-MM-dd HH:mm" format='yyyy-MM-dd HH:mm'
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="手术记录" prop="surgicalRecord" v-if="form.visitMethod == 'BE_IN_HOSPITAL'">
                        <editor v-model="form.surgicalRecord" :min-height="192" />
                    </el-form-item>
                    <el-form-item label="入院病历" prop="inHospitalInfo" v-if="form.visitMethod == 'BE_IN_HOSPITAL'">
                        <editor v-model="form.inHospitalInfo" :min-height="192" />
                    </el-form-item>
                    <el-form-item label="门诊病历" prop="inHospitalInfo" v-if="form.visitMethod == 'OUTPATIENT_SERVICE'">
                        <editor v-model="form.inHospitalInfo" :min-height="192" />
                    </el-form-item>
                    <el-form-item label="出院病历" prop="outHospitalInfo" v-if="form.visitMethod == 'BE_IN_HOSPITAL'">
                        <editor v-model="form.outHospitalInfo" :min-height="192" />
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { getList, usergetList, updateRecord, saveRecord } from "@/api/unitconfig/patientConfiguration";
import { getDepartmentList } from "@/api/manage/selectAgencyList";
export default {
    name: "PatientConfigurationVisitRecords",
    data() {
        return {
            pickerOptions: {
                disabledDate: (time) => {
                    if (this.form.dischargeTime) {
                        return time.getTime() > new Date(this.form.dischargeTime).getTime();
                    }
                },
            },
            pickerOptionstwo: {
                disabledDate: (time) => {
                    if (this.form.admissionTime) {
                        return time.getTime() < new Date(this.form.admissionTime).getTime();
                    }
                },
            },
            departmentlist: [],
            attendingPhysicianlist: [],
            form: {},
            rules: {
                visitMethod: [
                    { required: true, message: "就诊方式不能为空", trigger: "blur" }
                ],
                mainDiagnosis: [
                    { required: true, message: "主要诊断不能为空", trigger: "blur" }
                ],
                visitSerialNumber: [
                    { required: true, message: "就诊流水号不能为空", trigger: "blur" }
                ],
                attendingPhysicianId: [
                    { required: true, message: "主治医生不能为空", trigger: "blur" }
                ],
                inHospitalNumber: [
                    { required: true, message: "门诊/住院编号不能为空", trigger: "blur" }
                ],
                departmentId: [
                    { required: true, message: "科室名称不能为空", trigger: "blur" }
                ],
                admissionTime: [
                    { required: true, message: "入院时间不能为空", trigger: "blur" }
                ],
                dischargeTime: [
                    { required: true, message: "出院时间不能为空", trigger: "blur" }
                ],
                surgicalRecord: [
                    { required: true, message: "手术记录不能为空", trigger: "blur" }
                ],
                inHospitalInfo: [
                    { required: true, message: "病历不能为空", trigger: "blur" }
                ],
                outHospitalInfo: [
                    { required: true, message: "病历不能为空", trigger: "blur" }
                ],
            },
            recodelist: [],
            recodeindex: undefined,
            todaytime: '',
        };
    },
    created() {
        this.dateFormat();
        this.info();
        this.changecampusAgency();
        this.usergetListinfo();
    },
    methods: {
        add() {
            let item = {
                visitMethod: '',
                mainDiagnosis: '',
                visitSerialNumber: '',
                departmentId: '',
                departmentName: '',
                attendingPhysicianId: '',
                inHospitalNumber: '',
                attendingPhysicianName: '',
                admissionTime: this.todaytime,
                dischargeTime: '',
                inHospitalInfo: '',
                surgicalRecord: '',
                outHospitalInfo: '',
            }
            this.recodelist.unshift(item)
            this.recodeindex = 0
            this.form = item
        },
        //取消
        cancel() {
            this.recodeindex = undefined
            this.form = {}
        },
        // 保存新增
        submitForm() {
            if (this.form.departmentId && this.departmentlist?.length > 0) {
                this.form.departmentName = this.departmentlist.find(e => e.id == this.form.departmentId)?.departmentName
            }
            if (this.form.attendingPhysicianId && this.attendingPhysicianlist?.length > 0) {
                this.form.attendingPhysicianName = this.attendingPhysicianlist.find(e => e.userId == this.form.attendingPhysicianId)?.nickName
            }
            if (this.form.id) {
                updateRecord(this.form).then(res => {
                    this.$modal.msgSuccess("保存就诊记录成功");
                    this.info();
                })
            } else {
                this.form = { ...this.form, ...this.$route.query }
                saveRecord(this.form).then(res => {
                    this.$modal.msgSuccess("新增就诊记录成功");
                    this.info();
                })
            }
        },
        //主治医生
        usergetListinfo() {
            usergetList({
                hospitalAgencyId: this.$route.query.hospitalAgencyId,
                postName: 'DOCTOR'
            }).then(res => {
                this.attendingPhysicianlist = res.data
            })
        },
        //科室
        changecampusAgency() {
            let query = {
                nodeType: 'DEPARTMENT',
                hospitalAgencyId: this.$route.query.hospitalAgencyId,
            }
            getDepartmentList(query).then(res => {
                this.departmentlist = res.data
            })
        },
        //点击左侧
        clickrecord(item, index) {
            if (this.recodeindex == index) {
                this.recodeindex = undefined
            } else {
                this.recodeindex = index
            }
            this.form = item
        },
        //左侧记录列表
        info() {
            getList({
                patientId: this.$route.query.patientId
            }).then(res => {
                this.recodeindex = undefined
                this.recodelist = res.data
            })
        },
        dateFormat() {
            const daterc = new Date();
            var date = new Date(daterc);
            var year = date.getFullYear();
            /* 在日期格式中，月份是从0开始，11结束，因此要加0
             * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
             * */
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
            var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
            // 拼接
            this.todaytime = year + "-" + month + "-" + day + " " + hours + ":" + minutes
        },
    }
};
</script>
<style lang="scss" scoped>
.header {
    background-color: #F1F3F5;
    padding-top: 16px;

    .header-app {
        width: 98%;
        padding: 40px;
        margin: 0 auto;
        background-color: #fff;
        display: flex;
        position: relative;

        .addbtn {
            position: absolute;
            right: 40px;
            top: 40px;
        }

        .left {
            width: 25%;

            .list {
                height: 450px;
                overflow: scroll;
                // 隐藏表头的滚动条
                overflow-x: hidden !important;
                width: 96%;

                .tapitem {
                    background-color: #D2E9FC;
                    border-left: 2px solid #1890ff !important;
                    border-bottom: 1px solid #fff !important;
                }

                .item {
                    height: 130px;
                    padding: 10px 10px;
                    position: relative;
                    border-left: 2px solid #D2E9FC;
                    border-bottom: 1px solid #E7E7E7;

                    .text {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        height: 38px;
                        line-height: 38px;
                        font-size: 15px;
                        font-weight: 600;
                    }
                }
            }
        }

        .right {
            width: 75%;
            margin-top: 15px;
            position: relative;

            .btns {
                position: absolute;
                right: 20px;
                top: 0px;
            }
        }
    }
}
</style>