xt_pad/src/pages/main/dialysis/InspectionItemTable.vue

<template>
  <div>
    <div class="blueBorder"></div>
    <van-list v-model="loading" :finished="finished" finished-text="  " @load="onLoad">
      <table class="table">
        <tr>
          <th width="20%">检查项目</th>
          <th width="10%">结果</th>
          <th width="10%">参考值</th>
          <th width="10%">单位</th>
        </tr>
      </table>

      <table class="table" v-for="(items, indexs) in inspections_item" :key="indexs">
        <tr>
          <td width="20%">{{ items.date }}</td>
          <td width="10%"></td>
          <td width="10%"></td>
          <td width="10%"></td>
        </tr>
        <tr class="table" v-for="(item, index) in items.inspection_show_item" :key="index">
          <td width="20%">{{ item.item_name }}</td>
          <td width="10%">{{ item.value }}</td>
          <td width="10%" v-if="item.range_type == 1">{{ item.range_min }} ~ {{ item.range_max }}</td>
          <td width="10%" v-else>{{ item.range_value }}</td>
          <td width="10%">{{ item.unit }}</td>
        </tr>

        <tr
          v-if="items.isExpand"
          class="table"
          v-for="(item, index) in items.inspection_hide_item"
          :key="index"
        >
          <td width="20%">{{ item.item_name }}</td>
          <td width="10%">{{ item.value }}</td>
          <td width="10%">{{ item.range_min }} ~ {{ item.range_max }}</td>
          <td width="10%">{{ item.unit }}</td>
        </tr>
        <tr>
          <td width="20%"></td>
          <td
            width="10%"
            style="color:#409EFF;"
            @click="expandTable(indexs)"
            v-model="isExpand"
          >{{ items.expandName }}</td>
          <td width="10%"></td>
          <td width="10%"></td>
        </tr>
      </table>

      <div class="NoData" v-show="inspections_item.length == 0">
        <img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/data.jpg" alt />
      </div>
    </van-list>
  </div>
</template>

<script>
import { parseTime } from "@/utils";
import { GetInspectionItemValue } from "@/api/check";

export default {
  name: "InspectionItemTable",

  created() {},
  data() {
    return {
      items: [],
      inspections: [],
      inspectionsMap: {},
      inspections_item: [],

      showItem: [],
      hideItem: [],
      expandNum: 5,

      loading: true,
      finished: false,
      isShow: 1,
      key: 0,
      project: null,
      isExpand: false,
      queryParams: {
        project_id: 0,
        page: 0,
        patient_id: 0
      }
    };
  },
  methods: {
    onLoad() {
      this.queryParams.page = this.queryParams.page + 1;
      GetInspectionItemValue(this.queryParams).then(response => {
        if (response.data.state == 0) {
          this.finished = true;
          this.loading = false;
          return false;
        } else {
          this.items = [];
          var inspections = response.data.data.inspections;
          this.inspections = response.data.data.inspections;
          if (inspections == null) {
            this.inspections = [];
            this.finished = true;
            this.loading = false;
            return false;
          }
          var inspections_item_map = {};
          inspections_item_map["date"] = response.data.data.date;
          var inspectionsMap = {};
          this.inspectionsMap = {};
          for (var index in inspections) {
            inspectionsMap[inspections[index].item_id] = inspections[index];
            this.inspectionsMap[inspections[index].item_id] =
              inspections[index];
          }
          var items = this.project.inspection_reference;
          for (var index in items) {
            if (items[index].id in inspectionsMap) {
              var item = {};
              for (var key in items[index]) {
                item[key] = items[index][key];
              }
              item.value = inspectionsMap[items[index].id].inspect_value;
              item.value_direction = "";
              if (item.range_type == 1) {
                var value = parseFloat(item.value);
                var range_min = parseFloat(item.range_min);
                var range_max = parseFloat(item.range_max);
                if (value < range_min) {
                  item.value_direction = "↓";
                } else if (value > range_max) {
                  item.value_direction = "↑";
                }
              }
              this.items.push(item);
            }
          }
          this.showItem = [];
          this.hideItem = [];
          for (let i = 0; i < this.items.length; i++) {
            if (i < this.expandNum) {
              this.showItem.push(this.items[i]);
            } else {
              this.hideItem.push(this.items[i]);
            }
          }
          inspections_item_map["isExpand"] = false;
          inspections_item_map["inspection_show_item"] = this.showItem;
          inspections_item_map["expandName"] = "展开";
          inspections_item_map["inspection_hide_item"] = this.hideItem;
          this.inspections_item.push(inspections_item_map);
          this.loading = false;
        }
      });
    },
    GetList(project_id, project) {
      this.finished = false;
      this.loading = true;
      this.project = project;
      this.queryParams.patient_id = this.$route.query.patient_id;
      this.queryParams.project_id = project_id;
      this.inspections_item = [];

      this.queryParams.page = 0;
      this.onLoad();
    },
    expandTable: function(index) {
      if (!this.isExpand) {
        this.isExpand = true;
        for (let i = 0; i < this.inspections_item.length; i++) {
          if (i == index) {
            this.inspections_item[i].isExpand = true;
            this.inspections_item[i].expandName = "收起";
          }
        }
      } else {
        this.isExpand = false;
        for (let i = 0; i < this.inspections_item.length; i++) {
          if (i == index) {
            this.inspections_item[i].isExpand = false;
            this.inspections_item[i].expandName = "展开";
          }
        }
      }
    }
  }
};
</script>

<style style="stylesheet/scss" lang="scss" scoped>
.top {
  padding: 0.28rem 0.3rem;
  @include text-align;
  font-size: 0.3rem;
  border-bottom: 1px #e5e5e5 solid;
  position: relative;
  .title {
    font-size: 0.3rem;
    font-weight: bold;
    color: $pgh-color;
  }
  .iconfont {
    font-size: 0.24rem;
    color: #a8b3ba;
  }
}

.search {
  background: #ebf1f7;
  border-radius: 30px;
  padding: 0.01rem 0.2rem;
  color: #a8b3ba;
  position: absolute;
  top: 0.15rem;
  right: 0.4rem;
  .iconfont {
    color: #a8b3ba;
    font-size: 0.32rem;
  }
  .searchInput {
    font-size: 0.28rem;
    border: none;
    outline: none;
    background: #ebf1f7;
    height: 0.6rem;
    line-height: 0.6rem;
    width: 80%;
  }
}
.choice {
  border-bottom: 1px #e5e5e5 solid;
  ul {
    @include display-flex;
    @include align-items-center;
    @include text-align;
    @include justify-content-between;
    width: 30%;
    margin: 0 auto;
    font-size: 0.28rem;
    color: #7b8a97;
    li {
      @include display-flex;
      @include align-items-center;
      @include text-align;
      @include justify-content-between;
      padding: 0.16rem 0;

      .iconfont {
        margin: 0 0.1rem;
      }
      .line {
        background: #a8b3ba;
        width: 0.2rem;
        height: 1px;
        margin: 0 0.2rem;
        display: inline-block;
      }
    }
  }
}
.table {
  width: 100%;
  overflow: hidden;
  font-size: 0.45rem;
  text-align: center;
  border: $border-color;
  tr {
    padding: 0;
    margin: 0;
    padding: 0.1rem 0;
    th {
      background: $main-color;
      border: none;
      color: #fff;
      padding: 0;
      margin: 0;
      height: 1.2rem;
      line-height: 1.2rem;
      font-weight: normal;
    }
    td {
      border: none;
      span {
        background: #ff7979;
        color: #fff;
        font-size: 0.28rem;
        height: 0.5rem;
        line-height: 0.5rem;
        display: inline-block;
        border-radius: 6px;
        width: 1.75rem;
        margin: 0 0.1rem;
      }
    }
  }
}
.van-list {
  background: #fff;
  min-height: calc(100vh - 178px);
  margin-top: 68px;
  // @media only screen and (min-width: 376px) and (max-width: 668px) {
  //   margin-top: 84px;
  // }
  // @media only screen and (min-width: 415px) and (max-width: 736px) {
  //   margin-top: 84px !important;
  // }
  // @media only screen and (max-width: 812px) {
  //   margin-top: 80px !important;
  // }
  @media only screen and (min-width: 768px) {
    margin-top: 140px !important;
  }
  // @media only screen and (min-width: 813px) and (max-width: 1023px) {
  //   margin-top: 114px !important;
  // }
  // @media only screen and (min-width: 1024px) {
  //   margin-top: 96px !important;
  // }
}
</style>

<style lang="scss">
.nav {
  .van-ellipsis {
    font-size: 0.4rem;
  }
}

.van-tabs__line {
  background: #409eff !important;
}
</style>