Browse Source

历史诊断优化

liudan 2 months ago
parent
commit
67ed50c005

+ 11 - 1
src/pages/entryWrite/page/Entry/diagnostic/addDiagnostic/addDiagnostic.vue

@@ -20,7 +20,7 @@
                     <!-- 自定义诊断 -->
                     <!-- <customDiagnostics id="customDiagnostics" editData="{{editData}}" editSyndromeList="{{editSyndromeList}}" arryLength="{{arryLength}}"></customDiagnostics>
             </view> -->
-                    <view v-if="select == 0">
+                    <view v-if="select == 0" class="diag-pane">
                         <!-- 历史诊断 -->
                         <historicalDiagnosis :arryLength="arryLength"></historicalDiagnosis>
                     </view>
@@ -210,7 +210,17 @@ export default {
 
 .diagnosticcontent {
     flex: 1;
+    min-height: 0;
     overflow: hidden;
     padding: 0 12rpx;
 }
+
+/* 子页面容器:必须给出确定高度,否则内部 height:100% 会退化为 auto,
+   底部操作栏会被 .diagnosticcontent 的 overflow:hidden 裁掉 */
+.diag-pane {
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+}
 </style>

+ 45 - 19
src/pages/entryWrite/page/Entry/diagnostic/addDiagnostic/historicalDiagnosis/historicalDiagnosis.vue

@@ -44,21 +44,21 @@
                     <view v-else class="diag-list">
                         <view
                             class="diag-item"
-                            :class="{ 'diag-item--selected': selectedArr.includes(item.id) }"
+                            :class="{ 'diag-item--selected': isSelected(item, index) }"
                             v-for="(item, index) in diagDetailList"
-                            :key="item.id"
-                            @tap="toggleItem(item)"
+                            :key="getItemKey(item, index)"
+                            @tap="toggleItem(item, index)"
                         >
                             <view class="diag-item__info">
                                 <text class="diag-item__title">{{ item.diagDesc || item.descripts }}</text>
                                 <text class="diag-item__code" v-if="item.diagCode">{{ item.diagCode }}</text>
                             </view>
-                            <view class="diag-item__checkbox" @tap.stop.prevent="noop">
+                            <view class="diag-item__checkbox" @tap.stop="toggleItem(item, index)">
                                 <view
                                     class="custom-checkbox"
-                                    :class="{ 'custom-checkbox--checked': selectedArr.includes(item.id) }"
+                                    :class="{ 'custom-checkbox--checked': isSelected(item, index) }"
                                 >
-                                    <text v-if="selectedArr.includes(item.id)" class="custom-checkbox__icon">✓</text>
+                                    <text v-if="isSelected(item, index)" class="custom-checkbox__icon">✓</text>
                                 </view>
                             </view>
                         </view>
@@ -69,8 +69,8 @@
 
         <!-- 底部按钮 -->
         <view class="hd-footer">
-            <view class="hd-footer-tip" v-if="selectedArr.length > 0">
-                已选择 <text class="hd-count">{{ selectedArr.length }}</text> 条诊断
+            <view class="hd-footer-tip">
+                已选择 <text class="hd-count">{{ selectedArr.length || 0 }}</text> 条诊断
             </view>
             <button
                 class="hd-btn"
@@ -192,20 +192,31 @@ export default {
             this.selectedArr = event.detail;
         },
 
-        toggleItem(item) {
-            if (!item || !item.id) return;
+        // 历史诊断接口返回的数据结构不稳定,id 可能为空,这里做统一降级取唯一 key
+        getItemKey: function (item, index) {
+            if (!item) return 'idx_' + index;
+            if (item.id !== undefined && item.id !== null && item.id !== '') return item.id;
+            if (item.diagID !== undefined && item.diagID !== null && item.diagID !== '') return 'diag_' + item.diagID;
+            return 'idx_' + index;
+        },
+
+        isSelected: function (item, index) {
+            return this.selectedArr.indexOf(this.getItemKey(item, index)) > -1;
+        },
+
+        toggleItem: function (item, index) {
+            const key = this.getItemKey(item, index);
+            if (!key) return;
             let selectedArr = [...this.selectedArr];
-            const idx = selectedArr.indexOf(item.id);
+            const idx = selectedArr.indexOf(key);
             if (idx > -1) {
                 selectedArr.splice(idx, 1);
             } else {
-                selectedArr.push(item.id);
+                selectedArr.push(key);
             }
             this.selectedArr = selectedArr;
         },
 
-        noop() {},
-
         saveDiag: Util.debounce(function () {
             const { diagDetailList, selectedArr } = this;
 
@@ -223,8 +234,8 @@ export default {
             const userData = Cache.get('userData');
             const patientData = Cache.get('patientData');
             let diagData = [];
-            diagDetailList.forEach((item) => {
-                if (selectedArr.includes(item.id)) {
+            diagDetailList.forEach((item, index) => {
+                if (this.isSelected(item, index)) {
                     let clone = { ...item };
                     clone.id = '';
                     diagData.push(clone);
@@ -299,7 +310,7 @@ export default {
                 var diagDetailList = this.diagDetailList;
                 let patientData = Cache.get('patientData');
                 let userData = Cache.get('userData');
-                let firstSelected = diagDetailList.find((item) => this.selectedArr.includes(item.id));
+                let firstSelected = diagDetailList.find((item, index) => this.isSelected(item, index));
                 if (!firstSelected) {
                     this.isLoading = false;
                     that.saveDiag();
@@ -355,12 +366,15 @@ export default {
 .history-diagnosis {
     display: flex;
     flex-direction: column;
+    width: 100%;
     height: 100%;
+    min-height: 0;
     background: #f4f7fb;
 }
 
 /* 头部 */
 .hd-header {
+    flex-shrink: 0;
     background: #fff;
     padding: 0 24rpx;
     border-bottom: 1rpx solid #edf1f6;
@@ -384,6 +398,7 @@ export default {
 /* 主体左右分栏 */
 .hd-body {
     flex: 1;
+    min-height: 0;
     display: flex;
     overflow: hidden;
 }
@@ -392,6 +407,8 @@ export default {
 .hd-left {
     width: 260rpx;
     flex-shrink: 0;
+    height: 100%;
+    min-height: 0;
     background: #fff;
     border-right: 1rpx solid #edf1f6;
 }
@@ -434,6 +451,9 @@ export default {
 /* 右侧诊断列表 */
 .hd-right {
     flex: 1;
+    min-width: 0;
+    height: 100%;
+    min-height: 0;
     background: #f8fafc;
 }
 
@@ -545,16 +565,21 @@ export default {
 
 /* 底部操作栏 */
 .hd-footer {
+    flex-shrink: 0;
+    width: 100%;
     background: #fff;
     padding: 16rpx 24rpx;
     padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
     box-shadow: 0 -4rpx 16rpx rgba(15, 23, 42, 0.04);
-    display: flex;
+    /* display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: flex-end; */
 }
 
 .hd-footer-tip {
+    display: inline-block;
+    line-height: 80rpx;
+    min-width: 0;
     font-size: 24rpx;
     color: #8b98a8;
 }
@@ -565,6 +590,7 @@ export default {
 }
 
 .hd-btn {
+    float: right;
     height: 72rpx;
     line-height: 72rpx;
     padding: 0 48rpx;