peisweb/src/components/sumDoctorCheck/SumItems.vue

<template>
  <div style="display: flex;width:100%;">  
    <div style="width:180;">
      <!-- :row-class-name="tableRowClassName" -->
      <el-table :data="RegisterCheckList" width="180" 
        :height="window.pageHeight < 600 ? 330:window.pageHeight-270"
        border highlight-current-row
        @row-click="rowClick">
        <el-table-column prop="asbitemName" label="组合项目" width="180">
          <template slot-scope="scope">
              <div>
                <el-tooltip class="item" effect="dark" content="未检" placement="top">
                  <i v-show="scope.row.completeFlag == '0'" class="el-icon-circle-plus" style="font-size: 18px;color: red;"></i>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="已检" placement="top">
                  <i v-show="scope.row.completeFlag == '1'" class="el-icon-success" style="font-size: 18px;color: green;"></i>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="弃检" placement="top">
                  <i v-show="scope.row.completeFlag == '2'" class="el-icon-remove" style="font-size: 18px;"></i>
                </el-tooltip>
                {{scope.row.asbitemName}}
              </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div :style="'width:' + (window.pageWidth - 180 - 110 - 45) + 'px;'">
      <el-table :data="tableData" :width="(window.pageWidth - 330 - 80)" 
        :height="window.pageHeight < 600 ? 330:window.pageHeight-270"
        border highlight-current-row>
        <el-table-column prop="itemName" label="项目" width="150" />
        <el-table-column prop="unitName" label="单位" width="80" align="center"/>
        <el-table-column prop="referenceRangeValue" label="参考范围" width="80" align="center"/>
        <el-table-column v-for="(item, index) of tableCols" :label="item" :prop="item" :key="index" min-width="150" align="center">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script lang="ts">
import { mapState } from 'vuex';
import Sortable from "sortablejs";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import { arrayExistObj } from '@/utlis/proFunc';
export default {
  components: {},
  props:["patientId"],
  data() {
    return {
      RegisterCheckList: [],
      tableData: [],   //显示数据
      tableRows: [],   //动态行
      tableCols: [],   //动态列
    };
  },

  created() { },

  //挂载完成
  mounted() {
    // if(this.sumDoctorCheck.sumPREdit.patientId){
    //   this.registerCheckList(this.sumDoctorCheck.sumPREdit.patientId);
    // }
  },

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

  methods: {
    //组合项目颜色标识
    tableRowClassName({ row, rowIndex }) {
      //console.log('tableRowClassName',rowIndex,row)
      if (row.completeFlag === '0') {
        return 'warning'; //未检
      } else if (row.completeFlag === '2') {
        return 'info'; //弃检
      }
      return '';      
    },

    //获取检查组合项目
    registerCheckList(patientId) {
      this.RegisterCheckList = []
      if(!patientId) return
      console.log(`/api/app/sumsummaryreport/gethorizontalcomparisonasbitemlist?PatientId=${patientId}`)
      getapi(`/api/app/sumsummaryreport/gethorizontalcomparisonasbitemlist?PatientId=${patientId}`)
        .then((res) => {
          console.log("获取项目对比 SumItems", res.data);
          if (res.code != -1) {
            this.RegisterCheckList = res.data;
            if (res.data.length > 0) this.rowClick(res.data[0])
          }
        })
        .catch((err) => {
          this.$message({ type: "error", message: `操作失败，原因：${err}` });
        });

    },

    rowClick(row) {
      //console.log('row',row) //asbitemId
      this.SumItems(this.patientId, row.asbitemId)
    },



    //获取结果明细 3a0c6589-9989-4d7f-ba54-61e5b0138220
    // "itemName": "乙肝表面抗原(HBsAg)",
    // "unitName": "次/分",
    // "referenceRangeValue": "",
    // "checkDate": "2023-07-14",
    // "resultValue": "阴性"
    SumItems(patientId, asbitemId) {
      console.log(`/api/app/sumsummaryreport/gethorizontalcomparisonlist?PatientId=${patientId}&AsbitemId=${asbitemId}`)
      getapi(`/api/app/sumsummaryreport/gethorizontalcomparisonlist?PatientId=${patientId}&AsbitemId=${asbitemId}`)
        .then((res) => {
          console.log("获取项目对比 SumItems", res.data);
          if (res.code != -1) {
            this.crossTable(res.data);
          }
        })
        .catch((err) => {
          this.$message({ type: "error", message: `操作失败，原因：${err}` });
        });
    },

    //交叉报表

    crossTable(tableData) {
      this.tableData = []   //显示数据
      this.tableRows = []   //动态行
      this.tableCols = []   //动态列

      // console.log('tableData', tableData)
      tableData.forEach(e => {
        if (this.tableRows.indexOf(e.itemName) == - 1) this.tableRows.push(e.itemName)
        if (this.tableCols.indexOf(e.checkDate) == - 1) this.tableCols.push(e.checkDate)
      });
      this.tableCols.sort();

      this.tableRows.forEach(r => {
        let item = {}
        let resultValue = ''
        item['itemName'] = r
        this.tableCols.forEach(c => {
          for (let i = 0; i < tableData.length; i++) {
            if (tableData[i].itemName == r) {
              item['unitName'] = tableData[i].unitName
              item['referenceRangeValue'] = tableData[i].referenceRangeValue
            }
            if (tableData[i].itemName == r && tableData[i].checkDate == c) {
              resultValue = tableData[i].resultValue
              break;
            }
          }
          item[c] = resultValue
        });
        this.tableData.push(item)
      });
      // console.log('this.tableRows', this.tableRows)
      // console.log('this.tableCols', this.tableCols)
      // console.log('this.tableData', this.tableData)
    },



  },

  //监听事件
  watch: {
    //检查项目切换
    "patientId":{
      immediate:true,
      handler(newVal, oldVal) {
        console.log("watch patientId newVal：", newVal, " oldVal：", oldVal);      
        this.registerCheckList(newVal)
      }
    },
  },
};
</script>
<style scoped>
@import  '../../assets/css/global_table.css';

</style>