xt_pad/src/pages/main/dialysis/MissionTable.vue

<template>
    <div>
        <div class="choice">
          <ul>
            <li>日期查询：
              <div @click="openStartPicker" class="">{{parseTime(startTime.getTime()/1000, "{y}-{m}-{d}")}}<span class="iconfont">&#xe74a;</span> </div>
              <span class="line">  </span>
              <div @click="openEndPicker" class="">{{parseTime(endTime.getTime()/1000, "{y}-{m}-{d}")}}<span class="iconfont">&#xe74a;</span> </div>
            </li>
          </ul>
        </div>
        <div class="blueBorder"></div>
      <van-list
        width="100%"
        v-model="loading"
        :finished="finished"
        @load="onLoad"
      >
           <div class="tableTit " >
                <ul>
                    <li style="width:10%;">序号</li>
                    <li style="width:15%;">日期</li>
                    <li style="width:75%;">宣教内容</li>
                </ul>
            </div>
            <div class="tableDate" >
                <ul v-for="(item,index) in tableDate" :key="index" :value="item.value">
                    <li style="width:10%;">{{index+1}}</li>
                    <li style="width:15%;">{{parseTime(item.assessment_date, "{y}-{m}-{d}")}}</li>
                    <li style="width:75%;">{{item.mission}}</li>
                </ul>
         </div>
          <!--<div class="NoData" v-show="tableDate.length == 0"><img src="@/assets/login/data.jpg" alt=""></div>-->
        <div class="NoData" v-show="tableDate.length == 0"><img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/data.jpg" alt=""></div>

      </van-list>



      <mt-datetime-picker
        ref="start_date_picker"
        type="date"
        @confirm="handleStartDateConfirm"
        :endDate="new Date()"
        v-model="startTime">
      </mt-datetime-picker>

      <mt-datetime-picker
        ref="end_date_picker"
        type="date"
        @confirm="handleEndDateConfirm"
        :endDate="new Date()"
        v-model="endTime">
      </mt-datetime-picker>


    </div>
</template>

<script>
  import {parseTime} from "@/utils"
  import {getAllEducationList} from '@/api/patient';

  import { Popover } from "vux";
export default {
  name: "LongTable",
  created(){
    this.tableDate=[]


    this.queryParams.start_time = this.parseTime(new Date().getTime() / 1000, "{y}-{m}-{d}")
    this.queryParams.end_time = this.parseTime(new Date().getTime() / 1000, "{y}-{m}-{d}")
    this.queryParams.patient_id = this.$route.query.patient_id
    this.queryParams.page = this.queryParams.page + 1
    this.queryParams.limit = 15
    this.tableDate=[]

    getAllEducationList(this.queryParams).then(response =>{
      if(response.data.state == 0){
        return false;
      }else{
        if(response.data.data.total == 0){
        }else{
          for(let i = 0; i < response.data.data.edus.length;i++){
            this.tableDate.push(response.data.data.edus[i])
          }
        }
      }
    });

  },
  data() {
    return {
      tableDate: [],
      loading: false,
      finished: false,

      startTime: new Date(),
      endTime: new Date(),

      queryParams: {
        mode_id: '',
        start_time: "",
        end_time: "",
        page: 0,
        patient_id: 0,
        limit: 15,
      },

    };
  },  methods: {
    parseTime(time, layout) {
      return parseTime(time, layout)
    },onLoad() {
      this.queryParams.start_time = this.parseTime(this.startTime.getTime()/1000, "{y}-{m}-{d}")
      this.queryParams.end_time = this.parseTime(this.endTime.getTime()/1000, "{y}-{m}-{d}")
      this.queryParams.patient_id = this.$route.query.patient_id
      this.queryParams.page = this.queryParams.page + 1
      this.queryParams.limit = 15

      getAllEducationList(params).then(response =>{
        if(response.data.state == 0){
          this.finished = true;
          this.loading = false;
          return false;
        }else{
          if(response.data.data.edus.length == 0){
            this.finished = true;
            this.loading = false;

          }else{
            for(let i = 0; i < response.data.data.edus.length;i++){
              this.tableDate.push(response.data.data.edus[i])
            }
            this.loading = false;
          }
        }
      });


    },
    handleStartDateConfirm: function (val) {
      this.queryParams.start_time = this.parseTime(this.startTime / 1000, "{y}-{m}-{d}")
      this.queryParams.end_time = this.parseTime(this.endTime / 1000, "{y}-{m}-{d}")
      this.queryParams.page =  1
      this.queryParams.limit = 15

      this.getRecordList(this.queryParams)


    },
    handleEndDateConfirm: function (val) {
      this.queryParams.start_time = this.parseTime(this.startTime / 1000, "{y}-{m}-{d}")
      this.queryParams.end_time = this.parseTime(this.endTime / 1000, "{y}-{m}-{d}")
      this.queryParams.page =  1
      this.queryParams.limit = 15
      this.getRecordList(this.queryParams)

    },openStartPicker: function () {
      this.$refs.start_date_picker.open();
    },
    openEndPicker: function () {
      this.$refs.end_date_picker.open();
    },getRecordList: function (val) {
      this.tableDate=[]
      getAllEducationList(val).then(response =>{
        if(response.data.state == 0){
          return false;
        }else{
          if(response.data.data.edus.length == 0){
          }else{
            for(let i = 0; i < response.data.data.edus.length;i++){
              this.tableDate.push(response.data.data.edus[i])
            }
          }
        }
      });

    }
  },

  components: {
    Popover
  }
};
</script>

<style style="stylesheet/scss" lang="scss"  scoped>
.choice {
  border-bottom: 1px #e5e5e5 solid;
  ul {
    @include display-flex;
    @include align-items-center;
    @include text-align;
    @include justify-content-between;
    width: 40%;
    margin: 0 auto;
    font-size: 0.32rem;
    color: $pgh-color;
    li {
      @include display-flex;
      @include align-items-center;
      @include text-align;
      @include justify-content-between;
    padding: 0.3rem 0;

      .iconfont {
        margin: 0 0.1rem;
        @media only screen and (max-width: 812px) {
        font-size: 12px !important;
        }
      }
      .line{
        background: #a8b3ba;
        width: 0.2rem;
        height: 1px;
        margin: 0 0.2rem;
        display: inline-block;
      }
    }
  }
}
.tableTit {
  background: $main-color;
  color: $text-color;
  @include box-sizing;
  ul {
    @include display-flex;
    @include align-items-center;
    @include text-align;
    @include justify-content-center;
    li {
       border-right: 2px #fff solid;
      font-size: 0.3rem;
      height: 0.88rem;
      line-height: 0.88rem;
    }
    &:last-child {
      border-right: none;
    }
  }
}
.tableDate {
  background: #ecf5ff;
  color: $pgh-color;
  @include box-sizing;
  ul {
    @include display-flex;
      @include align-items-center;
      @include text-align;
      @include justify-content-center;
    li {
      font-size: 0.3rem;
      padding:0.16rem 0;
      line-height: 0.5rem;
      border-right: 2px #fff solid;
      span {
        @include flex;
        border-right: 2px #fff solid;
        border-bottom: 2px #fff solid;
        background: #ecf5ff;
        display: inline-block;
        height: 0.88rem;
        line-height: 0.88rem;
        .iconfont {
          color: $main-color;
          font-size: 0.3rem;
          margin-right: 0.1rem;
        }
      }
    }
    &:last-child {
      border-right: none;
    }
  }
}
</style>