123

src/views/allcase/caseControl.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="box">
+  <div ref="box" class="box">
     <div class="card-box">
       <el-row :gutter="20" style="margin-bottom: 10px;">
         <el-col :span="12">
@@ -31,16 +31,150 @@
         </el-col>
       </el-row>
     </div>
+    
+    <el-scrollbar ref="scrollRef" class="scrollBox" :style="{'height': scrollHeight}">
+      <el-table
+        :data="tableData"
+        default-expand-all
+        :show-header="false"
+        style="width: 100%">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-card v-for="(item, index) of props.row.children" :key="index" class="box-card" shadow="hover">
+              <el-image
+                class="typeImg"
+                :src="require('../../assets/images/jiqiren.png')"
+                fit="contain">
+              </el-image>
+              <el-image
+                class="typeImg"
+                :src="require('../../assets/images/jiqiren.png')"
+                fit="contain">
+              </el-image>
+              <el-row>
+                <el-col :span="24">
+                  <el-descriptions title="" :column="1" direction="vertical">
+                    <el-descriptions-item label="质控项目">
+                      <el-tag class="category">{{ item.error_field }}</el-tag>
+                      <el-tag type="danger" class="koufen">-{{ item.score }}分</el-tag>
+                    </el-descriptions-item>
+                    <el-descriptions-item label="错误描述">{{ item.notice }}</el-descriptions-item>
+                    <el-descriptions-item label="质控依据">
+                      <div v-for="(yItem, yIndex) of item.basis" :key="yIndex" style="margin-bottom: 10px;">
+                        <div v-if="item.rule_id !== 6">
+                          <div v-for="(cItem, cIndex) of yItem" :key="cIndex">{{ cIndex+1 }}、{{ cItem }}</div>
+                        </div>
+                        <div v-else>1、{{ yItem[0] }}</div>
+                      </div>
+                    </el-descriptions-item>
+                </el-descriptions>
+                </el-col>
+              </el-row>
+            </el-card>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label=""
+          prop="category">
+        </el-table-column>
+      </el-table>
+    </el-scrollbar>
   </div>
 </template>
 
 <script>
   export default {
-    
+    data() {
+      return {
+        "data": {
+          "出院记录": [{
+            "id": 307,
+            "BLBH": 0,
+            "rule_id": 97,
+            "notice": "出院24小时内未创建24小时出入院记录",
+            "created_at": "2023-05-23 08:21:28",
+            "code": "24cyjl",
+            "error_field": "24小时出入院记录",
+            "JZHM": "723264",
+            "BRBH": "",
+            "basis": [
+              ["出院时间【2022-05-01 15:06:56】，24小时出入院记录创建时间【无】"]
+            ],
+            "score": 0,
+            "category": "出院记录"
+          }],
+          "病程类": [{
+            "id": 9704,
+            "BLBH": 0,
+            "rule_id": 111,
+            "notice": "术前24小时，没有术者查房记录",
+            "created_at": "2023-05-23 14:20:58",
+            "code": "sq24",
+            "error_field": "病程记录",
+            "JZHM": "723264",
+            "BRBH": "",
+            "basis": [["手术开始时间【2022-04-26 10:45:00】"]],
+            "score": 10,
+            "category": "病程类"
+          }, {
+            "id": 9705,
+            "BLBH": 0,
+            "rule_id": 112,
+            "notice": "术后24小时，没有术者查房记录",
+            "created_at": "2023-05-23 14:20:58",
+            "code": "sh24",
+            "error_field": "病程记录",
+            "JZHM": "723264",
+            "BRBH": "",
+            "basis": [["手术结束时间【2022-04-26 12:45:00】"]],
+            "score": 0,
+            "category": "病程类"
+          }, {
+            "id": 9706,
+            "BLBH": 0,
+            "rule_id": 125,
+            "notice": "出院之前无病程",
+            "created_at": "2023-05-23 14:20:58",
+            "code": "cyjl",
+            "error_field": "出院上级医师查房记录",
+            "JZHM": "723264",
+            "BRBH": "",
+            "basis": [["出院时间【2022-05-01 15:06:56】"]],
+            "score": 10,
+            "category": "病程类"
+          }]
+        },
+        scrollHeight: 'calc(100vh - 217px)'
+      }
+    },
+    computed: {
+      tableData() {
+        let arr = []
+        const keys = Object.keys(this.data)
+        for(let i=0; i<keys.length; i++) {
+          let obj = {
+            category: keys[i],
+            children: this.data[keys[i]]
+          }
+          arr.push(obj)
+        }
+        return arr
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        const height = this.$refs.box.offsetHeight
+        this.scrollHeight =  (height - 217) + 'px'
+        console.log(this.scrollHeight, '123123123')
+      })
+    }
   }
 </script>
 
 <style lang="scss" scoped>
+::v-deep .el-scrollbar__wrap {
+  overflow-x: hidden;
+}
 .box {
   width: 500px;
   padding: 21px 38px;
@@ -53,6 +187,7 @@
     border: 1px solid #E2E2E2;
     padding: 30px 36px;
     box-sizing: border-box;
+    margin-bottom: 14px;
     .title {
       font-size: 16px;
       font-family: PingFang-SC-Bold, PingFang-SC;
@@ -78,5 +213,49 @@
       color: #D81E06;
     }
   }
+  .box-card {
+    margin-bottom: 10px;
+    position: relative;
+    .category {
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: bold;
+      color: #333333;
+    }
+    .koufen {
+      font-weight: bold;
+      vertical-align: middle;
+      margin-left: 16px;
+    }
+    .typeImg {
+      width: 53px;
+      height: 53px;
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      z-index: 999;
+    }
+  }
+  ::v-deep .el-table__row {
+    background: #185DA6;
+    color: #FFFFFF;
+    .el-icon-arrow-right {
+      color: #FFFFFF;
+    }
+  }
+  ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
+    background: #185DA6;
+  }
+  ::v-deep .el-table_1_column_1 {
+    border-radius: 8px 0 0 8px;
+  }
+  ::v-deep .el-table_1_column_2 {
+    border-radius: 0 8px 8px 0;
+    font-weight: bold;
+  }
+  ::v-deep .el-descriptions-item__label {
+    font-family: PingFang-SC-Bold, PingFang-SC;
+    font-weight: bold;
+    color: #333333;
+  }
 }
 </style>