xt_pad/src/pages/main/DetailsPage.vue

<template>
    <div class="mainBox">
        <side-bar :active_index="0"></side-bar>
        <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">
                <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>
         <!-- <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

    }
  }
};
</script>

<style style="stylesheet/scss" lang="scss" scoped>
.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:1.58rem;
    right: 0;
    z-index: 100;
    background: #fff;
   
    .nav {
      ul {
        li {
          float: left;
          font-size: 0.36rem;
          margin: 0 0.2rem;
          height: 0.64rem;
          line-height: 0.64rem;
          padding: 0 0.3rem;
          cursor: pointer;
          &.active {
            background: $main-color;
            color: #fff;
            border-radius: 30px;
          }
        }
      }
    }
    .time {
      cursor: pointer;
      .iconfont {
        margin-left: 0.1rem;
      }
    }
  }
  .Tab {
    padding-top: 63px;
  }
}
</style>