xt_pad/src/pages/main/RecordPage.vue

<template>
  <div>
    <!-- <van-row class="top_row">
    <van-col :span="14">-->
    <div class="top_row">
      <!-- <div class="head">
        <img :src="$store.getters.user.org.org_logo" alt />
      </div>-->
      <div class="floatLeft">
        <span class="title">{{ $store.getters.user.org.org_short_name }}</span>
      </div>
      <!-- </van-col> -->
      <!-- <van-col :span="6">
        <div class="department">
          <ul>
            <li style="position: relative;" :class="index == 0? 'active':'' " @click="ClickTab(0)">
              {{'候诊区'}}
              <span class="redpoint" v-if="un_read_wait_num">{{un_read_wait_num > 99 ? un_read_wait_num+'+':un_read_wait_num}}</span>
            </li>
            <li style="position: relative;" :class="index == 1? 'active':'' " @click="ClickTab(1)">
              {{'透析区'}}
              <span class="redpoint" v-if="un_read_dialysis_num">{{un_read_dialysis_num > 99 ? un_read_dialysis_num+'+':un_read_dialysis_num}}</span>
            </li>
          </ul>
        </div>
      </van-col>-->
      <!-- <van-col :span="10"> -->
      <!-- <router-link to="/add_urgent_schedule">
          <van-button size="small" type="info" class="add_schedule_btn">临时排班</van-button>
      </router-link>-->
      <!-- <div class="search">
        <van-field v-model="search_input" ref="search_field" placeholder="透析号/姓名" class="field">
          <i class="iconfont" slot="left-icon">&#xe741;</i>
          <van-button
            slot="button"
            size="small"
            type="info"
            style="border: none;"
            @click="searchWithKeyword"
          >搜索</van-button>
        </van-field>
      </div>-->
      <!-- </van-col>
      </van-row>-->
      <div class="newSearch">
        <!-- <van-field v-model="search_input" ref="search_field" placeholder="透析号/姓名" class="field">
          <i class="iconfont" slot="left-icon">&#xe741;</i>
          <van-button
            slot="button"
            size="small"
            type="info"
            style="border: none;"
            @click="searchWithKeyword"
          >搜索</van-button>
        </van-field>-->
        <el-input
          class="newInput"
          prefix-icon="el-icon-search"
          v-model="search_input"
          ref="search_field"
          placeholder="透析号/姓名"
        ></el-input>
        <p class="searchBtn" @click="searchWithKeyword">搜索</p>
      </div>
      <div class="box">
        <div class="newDepartment">
          <ul>
            <li
              style="position: relative;"
              :class="index == 0 ? 'active' : ''"
              @click="ClickTab(0)"
            >
              {{ "候诊区" }}
              <span class="redpoint" v-if="un_read_wait_num">
                {{
                un_read_wait_num > 99
                ? un_read_wait_num + "+"
                : un_read_wait_num
                }}
              </span>
            </li>
            <li
              style="position: relative;"
              :class="index == 1 ? 'active' : ''"
              @click="ClickTab(1)"
            >
              {{ "透析区" }}
              <span class="redpoint" v-if="un_read_dialysis_num">
                {{
                un_read_dialysis_num > 99
                ? un_read_dialysis_num + "+"
                : un_read_dialysis_num
                }}
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- <div class="top">
        <div class="hospital">
          <span class="title"> {{ $store.getters.user.org.org_short_name }} </span>
        </div>
        <div class="department">
            <ul>
                <li v-for="(item,i) in ['候诊室','透析区']" :key="i" :class="index == i? 'active':'' " @click="ClickTab(i)" >{{item}}</li>
            </ul>
        </div>
        <div class="search">
          <van-field v-model="search_input" ref="search_field" placeholder="透析号/姓名" style="background-color: #ebf1f7; height: 0.6rem; line-height: 0.6rem; padding: 0 0 0 10px; border-radius: 30px;">
            <i class="iconfont" slot="left-icon">&#xe741;</i>
            <van-button slot="button" size="small" type="info" style="border: none;" @click="searchWithKeyword">搜索</van-button>
          </van-field>
        </div>
        <van-button size="small" type="info">临时排班</van-button>
    </div>-->
    <div class="area">
      <waiting-area v-show="index == 0" title="候诊区" :search_keyword="search_keyword"></waiting-area>
      <dialysis-area
        v-show="index == 1"
        title="透析区"
        :search_keyword="search_keyword"
        @clear_search_keyword="clearKeyword"
      ></dialysis-area>
    </div>
    <router-link to="/add_urgent_schedule">
      <div class="add">
        <p>临时排班</p>
      </div>
    </router-link>
  </div>
</template>

<script>
import DialysisArea from "./DialysisArea";
import WaitingArea from "./WaitingArea";
import { Popover } from "vux";
import { getDialysisScheduals, getWaitingScheduals } from "@/api/dialysis";
import { parseTime } from "@/utils/index";
import { getDialysisOrWaitSelectedConfig } from "@/utils/data_config";

export default {
  name: "RecordPage",
  props: {
    un_read_wait_num: {
      type: Number
    },
    un_read_dialysis_num: {
      type: Number
    }
  },
  data() {
    return {
      index: 1,
      search_input: "",
      search_keyword: "",
      scheduals: [],
      advice_groups: [],
      unReadWaitNum: 0,
      unReadDialysisNum: 0
    };
  },
  components: {
    DialysisArea,
    WaitingArea,
    Popover
    // Group,
    // Cell
  },

  methods: {
    ClickTab: function(tabIndex) {
      this.index = tabIndex;
    },
    searchWithKeyword: function() {
      this.$refs.search_field.blur();
      this.search_keyword = this.search_input;
    },
    clearKeyword: function() {
      this.search_input = "";
      this.search_keyword = "";
    }
  },
  created() {
    var index = getDialysisOrWaitSelectedConfig();
    console.log(index);
    if (index != null) {
      this.index = index;
    }
  }
};
</script>

<style lang="scss" scoped>
.top_row {
  // height: 50px;
  font-size: 0.3rem;
  padding: 0 0.3rem 0;
  @media only screen and (min-width: 813px) and (max-width: 1024px) {
    padding: 0.3rem 0.3rem;
  }
  // border-bottom: 1px #e5e5e5 solid;
  // display: flex;
  // align-items: center;
  background: #258ffc;
  .floatLeft {
    line-height: 1rem;
    height: 1rem;
  }
  .search {
    float: right;
    margin-top: 15px;
  }
}
.title {
  font-size: 0.45rem;
  font-weight: 600;
  height: 45px;
  // line-height: 50px;
  margin-left: 8px;
  // color: $title-color;
  color: #fff;
}
.newDepartment {
  text-align: center;
  // height: 100%;
  width: 60%;
  margin: 0 auto;
  ul {
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    li {
      float: left;
      font-size: 0.45rem;
      margin: 0 0.2rem;
      height: 0.8rem;
      line-height: 0.8rem;
      padding: 0 0.4rem;
      // color: $title-color;
      color: #fff;
      &.active {
        // background: $main-color;
        background: #ffffff;
        color: #258ffc;
        border-radius: 30px;
      }
    }
  }
}

.add_schedule_btn {
  margin-left: 10px;
  float: right;
  background-color: #ff7978;
  border: none;
}

.redpoint {
  display: inline-block;
  height: 30px;
  width: 30px;
  line-height: 26px;
  text-align: center;
  font-size: 0.8em;
  border-radius: 20px;
  color: #fff;
  background: #f56c6c;
  position: absolute;
  top: -6px;
  right: -8px;
  border: 1px solid #fff;
  @media only screen and (max-width: 767px) {
    height: 16px;
    width: 16px;
    line-height: 14px;
  }
}
.box {
  height: 1rem;
  margin-top: 0.26rem;
  background: #258ffc;
}
.head {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-top: 3px;
  display: inline-block;
  float: left;
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}
.newSearch {
  height: 1rem;
  width: 100%;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  .searchBtn {
    width: 14%;
    float: right;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    font-size: 0.45rem;
    color: #258ffc;
  }
}

.add {
  width: 1.8rem;
  height: 1.8rem;
  background: #f66c6c;
  // 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.45rem;
  text-align: center;
  p {
    width: 30px;
    text-align: center;
    margin: 9px auto 0;
    color: #fff;
    // @media only screen and (min-width: 415px) and (max-width: 668px) {
    //   width: 40px;
    // }
    @media only screen and (min-width: 768px) {
      width: 50px;
      margin: 14px auto 0;
    }
  }
}
</style>
<style lang="scss">
.newInput {
  height: 100%;
  width: 85%;
  float: left;
  .el-input__inner {
    height: 100%;
    line-height: 1rem;
    width: 100%;
    border-radius: 30px;
    border: none;
    font-size: 0.45rem;
    @media only screen and (min-width: 768px) {
      padding-left: 0.9rem !important;
    }
  }
  .el-input__icon {
    line-height: 1rem;
    font-size: 0.45rem;
    @media only screen and (min-width: 768px) {
      margin-top: 1px;
    }
  }
  .el-input__prefix {
    @media only screen and (min-width: 768px) {
      left: 10px;
    }
  }
}
</style>