peisweb/src/components/occDisease/CheckDetails.vue

<template>
  <div style="overflow-y: auto;width:100%;height:465px;">
    <table width="100%" style="font-size:14px;">
      <tbody v-for="(item, index) of tableData" :key="index">
        <tr height="30">
          <td style="text-align: center;font-weight: bolder;">{{ item.itemTypeName }}</td>
        </tr>
        <tr>
          <table v-for="(item2, index2) in item.asbitems" :key="index + '-' + index2" width="100%" border="1"
            cellspacing="0" bordercolor="#909399" style="border-collapse:collapse;">
            <tr height="24" >
              <td width="200" class="tdCellClass">{{ item2.asbitemNames }}</td>
              <td width="600" class="tdCellClass" colspan="5">{{ '检查日期：' + item2.checkDate.substring(0, 10) + ' 检查医生：' + item2.checkDoctorName
              }}</td>
            </tr>
            <tr style="text-align: center;" height="24">
              <td width="200">项目</td>
              <td width="270">检查结果</td>              
              <td width="100">参考值</td>
              <td width="100">警告参考值</td>
              <td width="80">单位</td>
              <td width="50">提示</td>
            </tr>
            <tr height="24" v-for="(item3, index3) in item2.items" :key="index + '-' + index2 + '-' + index3">
              <td class="tdCellClass">{{ item3.itemName }}</td>
              <td :style="`color: ${getColorStr(item3.reportFontColor)};`" class="tdCellClass">{{ item3.itemResult }}</td>              
              <td align="center" class="tdCellClass">{{ item3.referenceRangeValue }}</td>
              <td align="center" class="tdCellClass">{{ item3.criticalRangeValue }}</td>
              <td align="center" class="tdCellClass">{{ item3.unit }}</td>
              <td align="center" class="tdCellClass">{{ item3.resultStatusName }}</td>
            </tr>

            <tr height="24">
              <td colspan="6" class="tdCellClass" v-html="`小结：${mergeSummarys(item2.summarys, 'summary')}`"></td>
            </tr>
          </table>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import Sortable from "sortablejs";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import { arrayExistObj, getColorStr } from '@/utlis/proFunc';
export default {
  components: {},
  props: ["patientRegisterId","tabChoosed"],
  data() {
    return {
      tableData: [],
    };
  },

  created() { },

  //挂载完成
  mounted() {
    this.CheckDetails(this.dataTransOpts.tableS.patient_register.id);
  },

  computed: {
    ...mapState(['window', 'dict', 'dataTransOpts', 'doctorCheck', 'sumDoctorCheck']),
  },

  methods: {
    getColorStr,
    //获取结果明细
    CheckDetails(patientRegisterId) {
      if (!patientRegisterId) {
        this.tableData = []
        return
      }
      

      postapi('/api/app/OccupationalDisease/GetDetailResults', { patientRegisterId })
        .then((res) => {
          console.log("获取结果明细 CheckDetails", res.data);
          if (res.code != -1) {
            this.tableData = res.data;
          }
        })
        .catch((err) => {
          this.$message({ type: "error", message: `操作失败，原因(/api/app/OccupationalDisease/GetDetailResults)：${err}` });
        });
    },



    mergeSummarys(array, itemKey) {
      let ret = ''
      array.forEach((e, i) => {
        let splitStr = "<br>"
        if (i == 0) splitStr = ""
        return ret += splitStr + e[itemKey]
      })
      return ret
    }
  },

  //监听事件
  watch: {
    // 虚拟表 触发强制刷新 sumDoctor.M 合并包含：综述、建议、对比、历史等，不包含总检诊断）
    "dataTransOpts.plus.OccDisease": {
      // immediate:true,
      handler(newVal, oldVal) {
        console.log(`watch 总检--检查明细结果 newVal: ${newVal}, oldVal: ${oldVal} patientRegisterId: ${this.dataTransOpts.tableS.patient_register.id}`);
        if(newVal != oldVal) this.CheckDetails(this.dataTransOpts.tableS.patient_register.id);
      }
    },

  },
};
</script>
<style scoped>
.tdCellClass {
  padding: 0 5px;
}

::v-deep .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  padding: 0;
}
</style>