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 v-for="(item,i) in ['候诊室','透析区']" :key="i" :class="index == i? 'active':'' " @click="ClickTab(i)" >{{item}}</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";
export default {
  name: "RecordPage",
  data() {
    return {
      index: 1,
      search_input: "",
      search_keyword: ""
      // yyList: [
      //   {
      //     value: "0",
      //     name: "济南医院"
      //   },
      //   {
      //     value: "1",
      //     name: "血透中心"
      //   }
      // ]
    };
  },
  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;
}
</style>