feat:患者就诊信息布局修改

admin-ui/src/views/work/patient/index.vue

@@ -4,7 +4,7 @@
     <el-row :gutter="20">
       <!-- 列容器 -->
       <!-- 左边的列表，显示各个科室 -->
-      <el-col :span="4">
+      <el-col :span="4" style="box-shadow: 0 3px 10px 0 rgb(0 0 0 / 6%); border-right: 1px solid #f1f2f4; overflow-y: auto">
         <el-menu v-for="(item,index) in deptOptions">
           <el-menu-item @click="handleNodeClick(item.department)" :key="index">
             <span slot="title">{{item.department}}</span>
@@ -118,8 +118,8 @@ export default {
       this.ids = rows.map(item => item.id)
     },
     op(tag, row) {
-      if (tag == 'search') {
-        this.iframe({ obj: search, param: {id:row.patientId,cardId:row.cardId, name:row.name, department:row.department}, title:'查看患者信息',width: '95%', height: '95%'});
+      if (tag === 'search') {
+        this.iframe({ obj: search, param: {id:row.patientId,cardId:row.cardId, name:row.name, department:row.department}, title:'查看患者信息',width: '100%', height: '100%'});
       }
     },
     handleQuery() {

admin-ui/src/views/work/patient/search.vue

@@ -1,127 +1,154 @@
 <template>
-  <el-row :gutter="20">
-    <el-col :span="6">
-      <el-tabs type="card" @tab-click="handleTabClick" v-model="activeNames">
-        <el-tab-pane label="基本信息" name="info" style="width: 24vw">
-          <div style="height: 80vh; overflow-y: auto">
-            <el-descriptions  style="width: 100%" title="患者信息" :column="1" border>
-              <el-descriptions-item label="患者标识符">{{patientInfo.patientCode}}</el-descriptions-item>
-              <el-descriptions-item label="就诊卡号">{{patientInfo.cardNumber}}</el-descriptions-item>
-              <el-descriptions-item label="姓名">{{patientInfo.name}}</el-descriptions-item>
-              <el-descriptions-item label="性别">
-                <dict-tag :options="dict.type.patient_sex" :value="patientInfo.sex"/>
-              </el-descriptions-item>
-              <el-descriptions-item label="身份证号" prop="sfzh">{{patientInfo.sfzh}}</el-descriptions-item>
-              <el-descriptions-item label="出生时间" prop="birthDate">{{patientInfo.birthDate}}</el-descriptions-item>
-              <el-descriptions-item label="居住地址" prop="address">{{patientInfo.address}}</el-descriptions-item>
-              <el-descriptions-item label="联系电话" prop="phone">{{patientInfo.phone}}</el-descriptions-item>
-              <el-descriptions-item label="婚姻状况" prop="marital">
-                <dict-tag :options="dict.type.patient_marital" :value="patientInfo.marital" />
-              </el-descriptions-item>
-              <el-descriptions-item label="民族" prop="nation">{{patientInfo.nation}}</el-descriptions-item>
-              <el-descriptions-item label="职业" prop="career">{{patientInfo.career}}</el-descriptions-item>
-              <el-descriptions-item label="国籍" prop="nationality">{{patientInfo.nationality}}</el-descriptions-item>
-              <el-descriptions-item label="病历号" prop="blh">{{patientInfo.blh}}</el-descriptions-item>
-              <el-descriptions-item label="病人卡号" prop="brkh">{{patientInfo.brkh}}</el-descriptions-item>
-              <el-descriptions-item label="婴儿序号" prop="yexh">{{patientInfo.yexh}}</el-descriptions-item>
-            </el-descriptions>
-          </div>
-        </el-tab-pane>
-
-        <el-tab-pane label="就诊记录" @tab-click="handleTabClick" name="time" style="width: 24vw">
-          <el-timeline>
-            <el-timeline-item v-for="(item,index) in timeList" :timestamp="item.dischargeTime" :key="index">
-              <span @click="getCard(item.id)">{{item.department}}</span>
-            </el-timeline-item>
-          </el-timeline>
-        </el-tab-pane>
-      </el-tabs>
-    </el-col>
-
-    <el-col :span="18">
-      <el-tabs type="card" @tab-click="handleTabClick" v-model="activeName">
-        <el-tab-pane label="就诊信息" style="width: 70vw;" name="pv">
-          <el-descriptions :column="3" border height="calc(90vh - 273px)">
-            <el-descriptions-item label="患者类别">{{pvList.patientCategory}}</el-descriptions-item>
-            <el-descriptions-item label="所在病区">{{pvList.wardName}}</el-descriptions-item>
-            <el-descriptions-item label="主治医生">{{pvList.physician}}</el-descriptions-item>
-            <el-descriptions-item label="主管护士">{{pvList.nurseCode}}</el-descriptions-item>
-            <el-descriptions-item label="在院状态">
-              <dict-tag :options="dict.type.hospital_status" :value="pvList.hospitalStatus"/>
-            </el-descriptions-item>
-            <el-descriptions-item label="入院次数">{{pvList.hospitalizedNumber}}</el-descriptions-item>
-            <el-descriptions-item label="就诊号码">{{pvList.cardId}}</el-descriptions-item>
-            <el-descriptions-item label="出院方式">
-              <dict-tag :options="dict.type.discharge_method" :value="pvList.dischargeMothod"/>
-            </el-descriptions-item>
-            <el-descriptions-item label="入院时间">{{pvList.admissionTime}}</el-descriptions-item>
-            <el-descriptions-item label="出院时间">{{pvList.dischargeTime}}</el-descriptions-item>
-            <el-descriptions-item label="危重级别">{{pvList.level}}</el-descriptions-item>
-            <el-descriptions-item label="入区时间">{{pvList.entryTime}}</el-descriptions-item>
-            <el-descriptions-item label="出区时间">{{pvList.exitTime}}</el-descriptions-item>
-            <el-descriptions-item label="出区原因">{{pvList.reasonArea}}</el-descriptions-item>
-          </el-descriptions>
-        </el-tab-pane>
-
-        <el-tab-pane label="相关当事人/近亲段信息" style="width: 70vw;" name="nk">
-          <!-- 表格展示多个亲属的信息-->
-          <el-table height="calc(90vh - 273px)" width="69vw" :data="nkList">
-            <el-table-column label="姓名" align="center" prop="name"></el-table-column>
-            <el-table-column label="所属关系" align="center" prop="kinship"></el-table-column>
-            <el-table-column label="近亲地址" align="center" prop="address"></el-table-column>
-            <el-table-column label="联系电话" align="center" prop="phone"></el-table-column>
-            <el-table-column label="工作名称" align="center" prop="workName"></el-table-column>
-            <el-table-column label="工作类别" align="center" prop="workCode"></el-table-column>
-          </el-table>
-          <pagination v-show="totalNk > 0" :total="totalNk" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getNkList" />
-        </el-tab-pane>
-
-        <el-tab-pane label="诊断结果" style="width: 70vw" name="dg">
-          <el-table width="69vw" height="calc(90vh - 165px)" :data="dgList">
-            <el-table-column label="诊断名称" align="center" prop="diagnosticCode"></el-table-column>
-            <el-table-column label="诊断时间" align="center" prop="diagnosisTime"></el-table-column>
-            <el-table-column label="诊断类型" align="center" prop="diagnosticType">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.diagnostic_type" :value="scope.row.diagnosticType"/>
+  <div class="container" style="height: 80vh; width: 95vw">
+    <el-row :gutter="10">
+      <el-col :span="5">
+        <!-- 左边的导航菜单 -->
+        <div class="left-body">
+          <el-menu default-active="1">
+            <el-menu-item index="1" @click="activePatient(1)">
+              <i class="el-icon-user"></i>
+              <span>患者基本信息/亲属</span>
+            </el-menu-item>
+            <el-submenu index="2">
+              <template slot="title">
+                <i class="el-icon-document"></i>
+                <span>就诊信息</span>
               </template>
-            </el-table-column>
-            <el-table-column label="诊断类别" align="center" prop="diagnosticCategoryCode">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.diagnostic_category_code" :value="scope.row.diagnosticCategoryCode"/>
-              </template>
-            </el-table-column>
-          </el-table>
-          <pagination v-show="totalDg > 0" :total="totalDg" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getDgList" />
-        </el-tab-pane>
-      </el-tabs>
-    </el-col>
-  </el-row>
-
+              <el-submenu v-for="(mouths, year) in groupedDates" :key="year" :index="year.toString()">
+                <template slot="title">
+                  <span>{{year}}年</span>
+                </template>
+                <el-submenu v-for="(days,month) in mouths" :key="month" :index="month.toString()">
+                  <template slot="title">
+                    <span>{{month}}月</span>
+                  </template>
+                  <el-menu-item v-for="item in days" @click="getCard(item.id); activePatient(2)" :key="item.id" :index="item.id">
+                    {{year}}年{{month}}月{{item.day}}日
+                  </el-menu-item>
+                </el-submenu>
+              </el-submenu>
+            </el-submenu>
+          </el-menu>
+        </div>
+      </el-col>
+      <el-col :span="19">
+        <!-- 右边的信息显示 -->
+        <div class="right-body">
+          <!-- 患者基本信息/亲属 -->
+          <div class="patient-info-nk" v-if="active === 1">
+            <!-- 患者基本信息 -->
+            <div class="patient-info">
+              <el-descriptions  style="width: 100%" title="患者信息" :column="3" border>
+                <el-descriptions-item label="患者标识符">{{patientInfo.patientCode}}</el-descriptions-item>
+                <el-descriptions-item label="就诊卡号">{{patientInfo.cardNumber}}</el-descriptions-item>
+                <el-descriptions-item label="姓名">{{patientInfo.name}}</el-descriptions-item>
+                <el-descriptions-item label="性别">
+                  <dict-tag :options="dict.type.patient_sex" :value="patientInfo.sex"/>
+                </el-descriptions-item>
+                <el-descriptions-item label="身份证号" prop="sfzh">{{patientInfo.sfzh}}</el-descriptions-item>
+                <el-descriptions-item label="出生时间" prop="birthDate">{{patientInfo.birthDate}}</el-descriptions-item>
+                <el-descriptions-item label="居住地址" prop="address">{{patientInfo.address}}</el-descriptions-item>
+                <el-descriptions-item label="联系电话" prop="phone">{{patientInfo.phone}}</el-descriptions-item>
+                <el-descriptions-item label="婚姻状况" prop="marital">
+                  <dict-tag :options="dict.type.patient_marital" :value="patientInfo.marital" />
+                </el-descriptions-item>
+                <el-descriptions-item label="民族" prop="nation">{{patientInfo.nation}}</el-descriptions-item>
+                <el-descriptions-item label="职业" prop="career">{{patientInfo.career}}</el-descriptions-item>
+                <el-descriptions-item label="国籍" prop="nationality">{{patientInfo.nationality}}</el-descriptions-item>
+                <el-descriptions-item label="病历号" prop="blh">{{patientInfo.blh}}</el-descriptions-item>
+                <el-descriptions-item label="病人卡号" prop="brkh">{{patientInfo.brkh}}</el-descriptions-item>
+                <el-descriptions-item label="婴儿序号" prop="yexh">{{patientInfo.yexh}}</el-descriptions-item>
+              </el-descriptions>
+            </div>
+            <!-- 患者亲属 -->
+            <div class="patient-nk" style="margin-top: 10px">
+              <el-table height="calc(75vh - 190px)" width="69vw" :data="nkList">
+                <el-table-column label="姓名" align="center" prop="name"></el-table-column>
+                <el-table-column label="所属关系" align="center" prop="kinship"></el-table-column>
+                <el-table-column label="近亲地址" align="center" prop="address"></el-table-column>
+                <el-table-column label="联系电话" align="center" prop="phone"></el-table-column>
+                <el-table-column label="工作名称" align="center" prop="workName"></el-table-column>
+                <el-table-column label="工作类别" align="center" prop="workCode"></el-table-column>
+              </el-table>
+              <pagination v-show="totalNk > 0" :total="totalNk" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getNkList" />
+            </div>
+          </div>
+          <!-- 诊断信息 -->
+          <div class="dg-info" v-if="active === 2">
+            <!-- 单次就诊的详细信息 -->
+            <div class="pv">
+              <el-descriptions :column="3" border height="calc(90vh - 273px)" title="就诊信息">
+                <el-descriptions-item label="患者类别">
+                  <dict-tag :options="dict.type.patient_category" :value="pvList.patientCategory"></dict-tag>
+                </el-descriptions-item>
+                <el-descriptions-item label="所在病区">{{pvList.wardName}}</el-descriptions-item>
+                <el-descriptions-item label="主治医生">{{pvList.physician}}</el-descriptions-item>
+                <el-descriptions-item label="主管护士">{{pvList.nurseCode}}</el-descriptions-item>
+                <el-descriptions-item label="在院状态">
+                  <dict-tag :options="dict.type.hospital_status" :value="pvList.hospitalStatus"/>
+                </el-descriptions-item>
+                <el-descriptions-item label="入院次数">{{pvList.hospitalizedNumber}}</el-descriptions-item>
+                <el-descriptions-item label="就诊号码">{{pvList.cardId}}</el-descriptions-item>
+                <el-descriptions-item label="出院方式">
+                  <dict-tag :options="dict.type.discharge_method" :value="pvList.dischargeMothod"/>
+                </el-descriptions-item>
+                <el-descriptions-item label="入院时间">{{pvList.admissionTime}}</el-descriptions-item>
+                <el-descriptions-item label="出院时间">{{pvList.dischargeTime}}</el-descriptions-item>
+                <el-descriptions-item label="危重级别">{{pvList.level}}</el-descriptions-item>
+                <el-descriptions-item label="入区时间">{{pvList.entryTime}}</el-descriptions-item>
+                <el-descriptions-item label="出区时间">{{pvList.exitTime}}</el-descriptions-item>
+                <el-descriptions-item label="出区原因">{{pvList.reasonArea}}</el-descriptions-item>
+              </el-descriptions>
+            </div>
+            <!-- 诊断结果列表 -->
+            <div class="dg" style="margin-top: 10px">
+              <el-table width="69vw" height="calc(75vh - 190px)" :data="dgList">
+                <el-table-column label="诊断名称" align="center" prop="diagnosticCode"></el-table-column>
+                <el-table-column label="诊断时间" align="center" prop="diagnosisTime"></el-table-column>
+                <el-table-column label="诊断类型" align="center" prop="diagnosticType">
+                  <template slot-scope="scope">
+                    <dict-tag :options="dict.type.diagnostic_type" :value="scope.row.diagnosticType"/>
+                  </template>
+                </el-table-column>
+                <el-table-column label="诊断类别" align="center" prop="diagnosticCategoryCode">
+                  <template slot-scope="scope">
+                    <dict-tag :options="dict.type.diagnostic_category_code" :value="scope.row.diagnosticCategoryCode"/>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination v-show="totalDg > 0" :total="totalDg" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getDgList" />
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>
 export default {
-  dicts: ['diagnostic_type', 'diagnostic_category_code','hospital_status','discharge_method','patient_sex','patient_marital'],
+  dicts: ['patient_category','diagnostic_type', 'diagnostic_category_code','hospital_status','discharge_method','patient_sex','patient_marital'],
   data(){
     return{
-      activeName:'pv',
-      activeNames:'info',
+      isGrouped: false,
+      active:1,
       timeList:null,
-      //表数据总条数
+      groupedDates: {},
+      //亲属表数据总条数
       totalNk:0,
+      //诊断表数据总条数
       totalDg:0,
+      //dg表数据
       dgList:null,
       //pv表数据
       pvList:null,
       //nk表数据
       nkList:null,
-      //obx表数据
-      obxList:null,
-      obrList:null,
-      //患者信息
+      //患者详细信息
       patientInfo:null,
-      //就诊信息
+      //就诊详细信息
       pvInfo:null,
+      //查询参数
       queryParams:{
         pageNum:1,
         pageSize:10
@@ -131,36 +158,33 @@ export default {
   watch:{
   },
   created() {
-    this.getPatient();
-    this.getPvList();
-    this.handleTabClick('pv');
+    this.activePatient(1);
+    this.getTime();
   },
   methods:{
+    async activePatient(sign) {
+      if (sign === 1) {
+        this.getPatient();
+        this.getNkList();
+        this.active = sign;
+      }
+      if (sign === 2) {
+        this.getDgList();
+        this.active = sign;
+      }
+    },
+    /** 查询某一次的就诊信息 */
     getCard(id){
-      this.ajax({
+      this.get({
         url:'/work/pv1/list',
         data:{
           id:id
         }
       }).then((response)=>{
         this.pvList = response.rows[0];
-        console.log(this.pvList)
       })
     },
-    handleTabClick(tab){
-      if(tab.name === 'time'){
-        this.getTime();
-      }
-      if(tab.name === 'nk'){
-        this.getNkList();
-      }
-      if(tab.name === 'dg'){
-        this.getDgList();
-      }
-      if(tab.name === 'pv'){
-        this.getPvList();
-      }
-    },
+    /** 查询某科室某个病人的就诊记录 */
     getTime(){
       this.ajax({
         url:'/work/pv1/list',
@@ -169,10 +193,29 @@ export default {
           department:this.param.department
         }
       }).then((response)=>{
-        console.log(this.param.name)
         this.timeList = response.rows;
-        console.log(this.timeList);
+        this.groupDates(this.timeList);
+      })
+    },
+    groupDates(dates){
+      if (this.isGrouped) {
+        // 如果已经获取了就诊日期数据，直接返回
+        return;
+      }
+      dates.forEach(date => {
+        let year = date.admissionTime.substring(0, 4);
+        let month = date.admissionTime.substring(4, 6);
+        let day = date.admissionTime.substring(6, 8);
+        let id = date.id;
+        if (!this.groupedDates[year]) {
+          this.groupedDates[year] = {};
+        }
+        if (!this.groupedDates[year][month]) {
+          this.groupedDates[year][month] = [];
+        }
+        this.groupedDates[year][month].push({id: id, day: day});
       })
+      this.isGrouped = true;
     },
     /** 查询患者信息 */
     getPatient(){
@@ -180,8 +223,10 @@ export default {
         url:'/work/patient/detail/'+this.param.id,
       }).then((response)=>{
         this.patientInfo = response.data;
+        console.log(this.patientInfo)
       })
     },
+    /** 查询某一次就诊信息 */
     getPvList(){
       this.get({
         url:'/work/pv1/list',
@@ -194,23 +239,24 @@ export default {
     },
     /** 查询亲属表 */
     getNkList() {
-        this.ajax({
-          url:'/work/nk/list',
-          data:{
-            patientId:this.param.id,
-              ...this.queryParams
-          }
-        }).then((response)=>{
-          this.nkList = response.rows;
-          this.totalNk = response.total;
-        })
+      this.get({
+        url:'/work/nk/list',
+        data:{
+          patientId:this.param.id,
+          ...this.queryParams
+        }
+      }).then((response)=>{
+        this.nkList = response.rows;
+        this.totalNk = response.total;
+      })
     },
+    /** 查询诊断记录表 */
     getDgList(){
-      this.ajax({
+      this.get({
         url:'/work/dg/list',
         data:{
           patientId:this.patientInfo.id,
-            ...this.queryParams
+          ...this.queryParams
         }
       }).then((response)=>{
         this.dgList = response.rows;
@@ -220,5 +266,8 @@ export default {
   }
 }
 </script>
+
+
 <style scoped lang="scss">
+
 </style>