xt_pad/src/pages/main/RecordPage.vue

<template>
  <div>
    <van-row class="top_row">
      <van-col :span="9">
        <div>
          <span class="title"> {{ $store.getters.user.org.org_short_name }} </span>
        </div>
      </van-col>
      <van-col :span="6">
        <div class="department">
          <ul>
            <li :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 :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="9">
        <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="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>

  </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'

  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 = ''
      },
    }
  }
</script>

<style style="stylesheet/scss" lang="scss" scoped>
  .top_row {
  font-size: 0.3rem;
  padding: 0.3rem 0.3rem;
  border-bottom: 1px #e5e5e5 solid;
  display: flex;
  align-items: center;
  }
  .title {
  font-size: 0.34rem;
  font-weight: 600;
  color: $title-color;
  }
  .department {
  text-align: center;
  ul {
  li {
  float: left;
  font-size: 0.36rem;
  margin: 0 0.2rem;
  height: 0.64rem;
  line-height: 0.64rem;
  padding: 0 0.3rem;
  color: $title-color;
  &.active {
  background: $main-color;
  color: #fff;
  border-radius: 30px;
  }
  }
  }
  }

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

  .redpoint{
  display:inline-block;
  height:16px;
  width:16px;
  line-height:16px;
  text-align:center;
  font-size:0.1em;
  border-radius:16px;
  color:#fff;
  background:red;
  position: relative;
  top: -8px;
  right: 8px;
  }
</style>