micro_vue/src/kpa_pages/dialysisRecord/index.vue

<template>
  <div class="page_longDialysis">
    <div class="box">
      <div class="info">
        <div class="photo">
          <img :src="patientform.avatar" alt />
        </div>
        <div class="infoRight">
          <div class="rightTop">
            <span class="name">{{patientform.name}}</span>
            <span>{{patientform.sex}}</span>&ensp;|
            <span>{{patientform.age}}岁</span>
          </div>
          <div class="rightBottom">
            <p class="num">
              [透析号：
              <span>{{patientform.dialysis_no}}</span>]
            </p>
            <div class="imgList">
              <img src="../../assets/images/b1.png" alt />
              <img src="../../assets/images/b2.png" alt />
              <img src="../../assets/images/b3.png" alt />
              <img src="../../assets/images/b4.png" alt />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="search">
      <el-input
        placeholder="输入医嘱内容"
        prefix-icon="el-icon-search"
        v-model="searchVal"
      ></el-input>
    </div>
    <div class="time">
      <van-cell @click="showPopup(1)">
        {{ startTime }}
        <van-icon name="arrow-down" />
      </van-cell>
      <van-popup v-model="show1" position="bottom" :style="{ height: '50%' }">
        <van-datetime-picker
          v-model="currentDate1"
          type="date"
          @cancel="show1 = false"
          @confirm="chooseStartTime"
        />
      </van-popup>
      <div class="line">-</div>
      <van-cell @click="showPopup(2)">
        {{ endTime }}
        <van-icon name="arrow-down" />
      </van-cell>
      <van-popup v-model="show2" position="bottom" :style="{ height: '50%' }">
        <van-datetime-picker
          v-model="currentDate2"
          type="date"
          @cancel="show2 = false"
          @confirm="chooseEndTime"
        />
      </van-popup>
    </div>
    <div class="statOrder">
      <div class="statOrderOne" v-for="item in this.dialysisOrder" :key="item.id">
        <van-swipe-cell>
          <van-cell :border="false">
           <template>
               <div class="custom-title">{{RecordTime(item.dialysis_date)}}</div>
            </template>
            <van-icon
              slot="right-icon"
              name="ellipsis"
              style="line-height: inherit;"
              @click="onClick(2)"
            />
          </van-cell>
          <template slot="right">
            <van-button square type="danger" text="删除" />
          </template>
        </van-swipe-cell>

        <van-action-sheet
          v-model="show3"
          :actions="actions"
          cancel-text="取消"
        ></van-action-sheet>
        <!-- <div class="title">
          <i class="header-icon el-icon-arrow-down"></i>
          <p class="year">2019.10.17</p>
          <p class="edit">编辑</p>
        </div>-->
        <div class="msg">
          <ul class="msglist">
            <li>透析模式: <span>HD</span></li>
            <li>透析时长(h/min): <span>2h30min</span></li>
            <li>血流量(ml/min): <span>2h30min</span></li>
            <li>目标超滤量(ml): <span>10ml</span></li>
            <li>透析液配方: <span>HD</span></li>
            <li>抗凝剂: <span>HD</span></li>
            <li>首剂(mg): <span>HD</span></li>
            <li>维持(mg/h): <span>2h30min</span></li>
          </ul>
        </div>
      </div>
      <div class="statOrderOne">
        <van-swipe-cell>
          <van-cell :border="false" title="2019.10.17">
            <van-icon
              slot="right-icon"
              name="ellipsis"
              style="line-height: inherit;"
              @click="onClick(2)"
            />
          </van-cell>
          <template slot="right">
            <van-button square type="danger" text="删除" />
          </template>
        </van-swipe-cell>

        <van-action-sheet
          v-model="show3"
          :actions="actions"
          cancel-text="取消"
        ></van-action-sheet>
        <!-- <div class="title">
          <i class="header-icon el-icon-arrow-down"></i>
          <p class="year">2019.10.17</p>
          <p class="edit">编辑</p>
        </div> -->
        <div class="msg">
          <ul class="msglist">
            <li>透析模式: <span>HD</span></li>
            <li>透析时长(h/min): <span>2h30min</span></li>
            <li>血流量(ml/min): <span>2h30min</span></li>
            <li>目标超滤量(ml): <span>10ml</span></li>
            <li>透析液配方: <span>HD</span></li>
            <li>抗凝剂: <span>HD</span></li>
            <li>首剂(mg): <span>HD</span></li>
            <li>维持(mg/h): <span>2h30min</span></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="add">
      <img src="../../assets/images/add4.png" alt />
    </div>
  </div>
</template>

<script>
const moment = require('moment')
import { getDialysRecord } from '@/api/patient/patient'
import { uParseTime } from '@/utils/tools'
export default {
  data() {
    return {
      searchVal: '',
      startTime: moment(new Date()).format('YYYY-MM-DD'),
      endTime: moment(new Date()).format('YYYY-MM-DD'),
      show1: false,
      show2: false,
      currentDate1: new Date(),
      currentDate2: new Date(),
      show3: false,
      actions: [
        { name: '编辑' },
        { name: '删除' },
        { name: '选项', subname: '描述信息' }
      ],
      patientform: {
        name: '',
        sex: '',
        age: '',
        dialysis_no: '',
        avatar: ''
      },
      dialysisOrder: []
    }
  },
  methods: {
    showPopup(index) {
      if (index == 1) {
        this.show1 = true
      } else if (index == 2) {
        this.show2 = true
      }
    },
    chooseStartTime(value) {
      this.startTime = moment(value).format('YYYY-MM-DD')
      this.show1 = false
      var patientid = this.$route.query.patientid
      console.log('patientid', patientid)
      var orgid = this.$route.query.orgid
      console.log('orgid', orgid)
      this.getDialysRecord(patientid, orgid, this.startTime)
    },
    chooseEndTime(value) {
      this.endTime = moment(value).format('YYYY-MM-DD')
      this.show2 = false
      var patientid = this.$route.query.patientid
      console.log('patientid', patientid)
      var orgid = this.$route.query.orgid
      this.getDialysRecord(patientid, orgid, this.endTime)
    },
    onClick(index) {
      if (index == 1) {
        this.show3 = true
      } else if (index == 2) {
        this.show3 = true
      }
    },
    RecordTime(time) {
      // return uParseTime(time, '{y}-{m}-{d} {h}:{i}:{s}')
      return uParseTime(time, '{y}-{m}-{d}')
    },
    getDialysRecord(patientid, orgid, startTime, endTime) {
      getDialysRecord(patientid, orgid, this.startTime, this.endTime).then(response => {
        if (response.data.state === 1) {
          var dialysisOrder = response.data.data.dialysisOrder
          this.dialysisOrder = dialysisOrder
          var patients = response.data.data.patients
          this.patientform = patients
          if (patients.gender === 1) {
            this.patientform.sex = '男'
          }
          if (patients.gender === 2) {
            this.patientform.sex = '女'
          }
          console.log('patients', patients)
          console.log('dialysisorder', dialysisOrder)
        }
      })
    }
  },
  created() {
    var patientid = this.$route.query.patientid
    console.log('patientid', patientid)
    var orgid = this.$route.query.orgid
    console.log('orgid', orgid)
    this.getDialysRecord(patientid, orgid)
  }
}
</script>

<style lang="scss">
.page_longDialysis {
  overflow: hidden;
  height: 100%;
  overflow-y: auto;
  .box {
    width: 100%;
    height: 9.1875rem;
    background: #fcfcfc;
    padding-top: 1.25rem;
    box-sizing: border-box;
  }
  .info {
    width: 21.375rem;
    height: 6.1875rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    margin: 0 auto;
    box-shadow: 0px 2px 12px 0px #f5f5f5;
    .photo {
      float: left;
      width: 3.75rem;
      height: 3.75rem;
      margin: 1.125rem 1rem 0 1.125rem;
      img {
        width: 100%;
      }
    }
    .infoRight {
      float: left;
      padding-top: 1.625rem;
      box-sizing: border-box;
      .rightTop {
        margin-bottom: 0.75rem;
      }
      .name {
        font-size: 1.0625rem;
        font-weight: 600;
        color: rgba(0, 0, 0, 1);
        margin-right: 1rem;
      }
      span {
        font-size: 0.875rem;
        color: rgba(60, 60, 60, 1);
      }
      .rightBottom {
        height: 1.4375rem;
        line-height: 1.4375rem;
        .num {
          float: left;
          font-size: 0.875rem;
          color: rgba(60, 60, 60, 1);
        }
        .imgList {
          float: left;
          margin-left: 0.875rem;
          img {
            width: 1.4375rem;
            height: 1.4375rem;
            margin: 0 0.125rem;
          }
        }
      }
    }
  }
  .search {
    width: 21.375rem;
    height: 2.125rem;
    background: rgba(244, 244, 244, 1);
    border-radius: 17px;
    margin: 0 auto;
    .el-input__inner {
      height: 2.125rem;
      line-height: 2.125rem;
      border: none;
      background: rgba(244, 244, 244, 1);
      border-radius: 17px;
      padding-left: 2.5rem;
      color: rgba(155, 155, 155, 1);
      font-size: 0.9375rem;
    }
    .el-input__prefix {
      margin-top: 0.0625rem;
      font-size: 1.25rem;
    }
    .el-input__icon {
      line-height: 2.125rem;
    }
  }
  .time {
    color: #9b9b9b;
    margin-left: 1rem;
    margin-top: 0.75rem;
    width: 342px;
    // height:2.125rem;
    overflow: hidden;
    .van-cell {
      width: 8.5rem;
      height: 2.125rem;
      line-height: 2.125rem;
      background: #f4f4f4;
      border-radius: 17px;
      margin-bottom: 0.75rem;
      padding: 0 1rem;
      font-size: 0.875rem;
      float: left;
      .van-icon-arrow-down {
        float: right;
        line-height: 2.125rem;
      }
    }
    .line {
      float: left;
      line-height: 2.125rem;
    }
  }
  .statOrder {
    width: 21.5625rem;
    margin: 0 auto;
    .statOrderOne {
      // margin-bottom: 1.25rem;
      border-top: 1px dashed #e6e6e6;
      border-bottom: 1px dashed #e6e6e6;
    }
    .van-cell {
      padding: 0.625rem 0.375rem;
    }
    .van-cell__value {
      span {
        float: right;
        width: 4.5625rem;
        height: 1.875rem;
        background: rgba(81, 119, 238, 0.2);
        border-radius: 15px;
        color: #5177ee;
        text-align: center;
        line-height: 1.875rem;
        margin-left: 8.75rem;
      }
    }
    // .edit {
    //   float: right;
    //   width: 4.5625rem;
    //   height: 1.875rem;
    //   background: rgba(81, 119, 238, 0.2);
    //   border-radius: 15px;
    //   color: #5177ee;
    //   text-align: center;
    //   line-height: 1.875rem;
    //   margin-left: 8.75rem;
    // }
    // .title {
    //   border-top: 1px solid #e6e6e6;
    //   display: flex;
    //   height: 3.125rem;
    //   align-items: center;
    // }
    // .el-icon-arrow-down {
    //   margin-left: 0.5rem;
    // }
    // .year {
    //   margin-left: 0.625rem;
    //   font-size: 0.9375rem;
    //   font-weight: 600;
    //   color: rgba(0, 0, 0, 1);
    // }
    .msg {
      font-size: 0.75rem;
      color: rgba(60, 60, 60, 1);
      font-weight: 600;
      // padding-top: 0.75rem;
      padding-bottom: 1rem;
      // border-top: 1px dashed #e6e6e6;
      .msglist {
        overflow: hidden;
        li {
          width: 50%;
          float: left;
          line-height: 16px;
        }
      }
    }

    .el-collapse-item__content {
      padding-bottom: 1rem;
    }
    .el-collapse {
      border-top: none;
    }
    .none {
      padding-bottom: 0;
    }
  }
  .add {
    width: 4.5rem;
    height: 4.5rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 3px 9px 0px rgba(7, 30, 102, 0.15);
    border-radius: 50%;
    position: fixed;
    right: 1.125rem;
    bottom: 4.25rem;
    img {
      width: 100%;
    }
  }
}
</style>