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:25%;">日期</li>
          <li style="width:65%;">宣教内容</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:25%;">{{parseTime(item.assessment_date, "{y}-{m}-{d}")}}</li>
          <li style="width:65%;">{{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: 80%;
    margin: 0 auto;
    font-size: 0.45rem;
    color: $pgh-color;
    li {
      @include display-flex;
      @include align-items-center;
      @include text-align;
      @include justify-content-between;
      padding: 0.3rem 0;
      margin: 0 auto;
      .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.45rem;
      height: 1.2rem;
      line-height: 1.2rem;
    }
    &: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.45rem;
      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: 1.2rem;
        line-height: 1.2rem;
        .iconfont {
          color: $main-color;
          font-size: 0.3rem;
          margin-right: 0.1rem;
        }
      }
    }
    &:last-child {
      border-right: none;
    }
  }
}
</style>