xt_pad/src/pages/main/DetailsPage.vue

<template>
  <div class="mainBox">
    <div class="mainContent">
      <div class="navigation">
        <div class="goBack">
          <span class="back" @click="backAction()">
            <span class="iconfont">&#xe720;</span>返回
          </span>
          <el-popover placement="bottom" trigger="click" :disabled="true">
            <li slot="reference" class="name">{{ patient_name }}</li>
          </el-popover>
        </div>
        <div class="nav">
          <ul>
            <li
              v-for="(item, i) in ['病历', '透析', '今日']"
              :key="i"
              :class="index == i ? 'active' : ''"
              @click="ClickTab(i)"
            >
              {{ item }}
            </li>
          </ul>
        </div>

        <!-- <div @click="openPicker()" class="time">
                  {{pickerVisible}}<span class="iconfont">&#xe74a;</span>
        </div>-->
        <!-- <div class="time" style="width:1.49rem;">
                  <span class="iconfont">2018-01-01&#xe74a;</span>
        </div>-->
        <div class="print" style="float: right; display:none">
          <el-button
            size="mini"
            type="primary"
            @click="print"
            icon="el-icon-printer"
            >打印</el-button
          >
        </div>
      </div>

      <div class="Tab">
        <CaseHistory v-show="index == 0" title="病历"></CaseHistory>
        <!--<check-tab v-show="index==1" title="化验单"></check-tab>-->
        <dialysis-tab
          v-show="index == 1"
          title="透析"
          v-on:records="jump(val)"
        ></dialysis-tab>
        <today-tab ref="today" v-show="index == 2" title="今日"></today-tab>
      </div>
    </div>
    <div class="add" @click="print">
      <p>打印预览</p>
    </div>
    <side-bar :active_index="0"></side-bar>
    <!-- <mt-datetime-picker
            v-model="pickerVisible"
            type="date"
            ref="picker"
            year-format="{value} "
            month-format="{value} "
            date-format="{value} ">
    </mt-datetime-picker>-->
  </div>
</template>

<script>
import SideBar from "@/pages/layout/SideBar";
import TodayTab from "./today/TodayTab";
import DialysisTab from "./dialysis/DialysisTab";
import RecordsTab from "./records/RecordsTab";
import { Popover } from "vux";
import CheckTab from "./dialysis/CheckTab";
import { parseTime } from "@/utils";
import { GetPatientInfoWithDiseases } from "@/api/patient";
import { Toast } from "vant";
import CaseHistory from "./records/CaseHistory";

export default {
  name: "DetailsPage",
  components: {
    CaseHistory,
    CheckTab,
    SideBar,
    TodayTab,
    DialysisTab,
    RecordsTab,
    Popover
  },
  data() {
    return {
      // pickerVisible: new Date(),
      patient_id: 0,
      patient_name: "",
      date: 0,
      index: 2,
      patient: null
    };
  },
  created() {
    var patient_id = this.$route.query.patient_id;
    var date = this.$route.query.date;
    var patient_name = this.$route.query.patient_name;
    this.patient_id = patient_id;
    this.date = date;
    this.patient_name = patient_name;
    this.GetPatientInfoWithDiseases(this.patient_id);
  },
  methods: {
    ClickTab: function(tabIndex) {
      this.index = tabIndex;
    },
    backAction() {
      this.$router.back(-1);
    },
    openPicker() {
      this.$refs.picker.open();
    },
    print: function() {
      var xtdate = parseTime(this.date, "{y}-{m}-{d}");
      if (this.patient != null) {
        this.$router.push(
          "/Print?xtdate=" + xtdate + "&xtno=" + this.patient.dialysis_no
        );
      }
    },
    GetPatientInfoWithDiseases(id) {
      GetPatientInfoWithDiseases(id)
        .then(response => {
          if (response.data.state == 1) {
            this.patient = response.data.data.patient;
          } else {
            Toast.fail("网络异常");
            return false;
          }
        })
        .catch(() => {
          // on cancel
          Toast.fail("网络异常");
          return false;
        });
    },
    jump: function(val) {
      this.index = 2;
    },
    toMyPatients() {
      var patient_id = this.$route.query.patient_id;
      this.$router.push("/mypatients/" + patient_id);
    }
  }
};
</script>

<style style="stylesheet/scss" lang="scss" scoped>
.mainBox {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-x: hidden;
  > :first-child {
    flex: 1;
    overflow-x: hidden;
  }
}
.mainContent {
  position: relative;
  .navigation {
    @include display-flex;
    @include align-items-center;
    @include text-align;
    @include box-sizing;
    @include justify-content-between;
    padding: 0.3rem 0.36rem;
    // border-bottom: 1px #e5e5e5 solid;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #258ffc;
    -webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);
    @media only screen and (max-width: 320px) {
      display: -webkit-box;
    }
    .name {
      color: #fff;
    }
    .nav {
      margin-right: 2.4rem;
      @media only screen and (min-width: 768px) {
        margin-right: 4rem;
      }
      ul {
        li {
          float: left;
          font-size: 0.45rem;
          margin: 0 0.2rem;
          height: 0.7rem;
          line-height: 0.7rem;
          padding: 0 0.3rem;
          cursor: pointer;
          color: #fff;
          &.active {
            // background: $main-color;
            background: #fff;
            color: #258ffc;
            // color: #fff;
            border-radius: 30px;
          }
        }
      }
    }
    .time {
      cursor: pointer;
      .iconfont {
        margin-left: 0.1rem;
      }
    }
  }
  .Tab {
    padding-top: 63px;
    // padding-bottom: 0.25rem;
    @media only screen and (max-width: 812px) {
      padding-top: 42px !important;
    }
  }
}
.add {
  width: 1.6rem;
  height: 1.6rem;
  background: #f18f68;
  // box-shadow: 0px 3px 9px 0px rgba(7, 30, 102, 0.15);
  border-radius: 50%;
  position: fixed;
  right: 0.6rem;
  bottom: 2.25rem;
  font-size: 0.34rem;
  text-align: center;
  @media only screen and (max-width: 767px) {
    display: none;
  }
  p {
    width: 30px;
    text-align: center;
    margin: 9px auto 0;
    color: #fff;
    // @media only screen and (min-width: 768px) {
    //   width: 40px !important;
    //   margin: 11px auto 0;
    // }
    @media only screen and (min-width: 768px) {
      width: 50px;
      margin: 17px auto 0;
    }
  }
}
</style>