Pad_New/src/pages/doctorAdvice/components/DialysisRecord.vue

<template>
  <div class="DialysisRecord">
    <div>
      <div class="toolBox">
        <div class="toolOne" @click="typeShow = true">
          <div style="display: flex;align-items: center;">
            {{ type }}
            <van-icon name="arrow-down" />
          </div>
        </div>
        <div class="toolOne" @click="startShow = true">
          <div style="display: flex;align-items: center;">
            {{ startTime }}
            <van-icon name="arrow-down" />
          </div>
        </div>
        <div class="toolOne" @click="endShow = true">
          <div style="display: flex;align-items: center;">
            {{ endTime }}
            <van-icon name="arrow-down" />
          </div>
        </div>
      </div>

      <div class="adviceBox" v-if="dialysisRecord.length > 0">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="adviceMain" >
            <div
              class="adviceOne"
              v-for="(item, index) in dialysisRecord"
              :key="index"
            >
              <div class="adviceTitle">
                <p>{{ getTime(item.dialysis_date) }}</p>
              </div>
              <div class="orderContent"  @click="toDialysisRecordDetail(item.patient_id, item.dialysis_date)">
                <p>
                  班次：
                  <span v-if="item.schedule_type === 1">上午</span>
                  <span v-if="item.schedule_type === 2">下午</span>
                  <span v-if="item.schedule_type === 3">晚上</span>
                </p>
                <p>分区： {{ item.partition_name }}</p>
                <p>机号：{{ item.device.number }}</p>
                <p>
                  透析模式：
                  <span v-if="item.prescription.mode_id === 1">HD</span>
                  <span v-if="item.prescription.mode_id === 2">HDF</span>
                  <span v-if="item.prescription.mode_id === 3">HD+HP</span>
                  <span v-if="item.prescription.mode_id === 4">HP</span>
                  <span v-if="item.prescription.mode_id === 5">HF</span>
                  <span v-if="item.prescription.mode_id === 6">SCUF</span>
                  <span v-if="item.prescription.mode_id === 7">IUF</span>
                  <span v-if="item.prescription.mode_id === 8">HFHD</span>
                  <span v-if="item.prescription.mode_id === 9">HFHD+HP</span>
                  <span v-if="item.prescription.mode_id === 10">PHF</span>
                  <span v-if="item.prescription.mode_id === 11">HFR</span>
                  <span v-if="item.prescription.mode_id === 12">HDF+HP</span>
                  <span v-if="item.prescription.mode_id === 13">CRRT</span>
                  <span v-if="item.prescription.mode_id === 14">腹水回输</span>
                </p>
                <p>
                  透析时长(h)：{{ item.prescription.dialysis_duration_hour }}h{{
                    item.prescription.dialysis_duration_minute
                  }}min
                </p>
                <p>干体重(kg)：{{ item.predialysis_evaluation.dry_weight }}</p>
                <p>
                  透前称重(kg)：{{ item.predialysis_evaluation.weight_before }}
                </p>
                <p>
                  透后称重(kg)：{{ item.assessment_after_dislysis.weight_after }}
                </p>
                <p>
                  透前血压(mmHg)：{{
                    item.predialysis_evaluation.systolic_blood_pressure
                  }}/
                  {{ item.predialysis_evaluation.diastolic_blood_pressure }}
                </p>
                <p>
                  透后血压(mmHg)：
                  {{ item.assessment_after_dislysis.systolic_blood_pressure }}/
                  {{ item.assessment_after_dislysis.diastolic_blood_pressure }}
                </p>
                <p>
                  抗凝剂：
                  <span v-if="item.prescription.anticoagulant == 1">无肝素</span>
                  <span v-if="item.prescription.anticoagulant == 2"
                    >普通肝素</span
                  >
                  <span v-if="item.prescription.anticoagulant == 3"
                    >低分子肝素</span
                  >
                  <span v-if="item.prescription.anticoagulant == 4"
                    >阿加曲班</span
                  >
                  <span v-if="item.prescription.anticoagulant == 5"
                    >枸橼酸钠</span
                  >
                </p>
                <p>
                  首剂：
                  <span>{{ item.prescription.anticoagulant_shouji }}</span>
                  <span v-if="item.prescription.anticoagulant == 1">mg</span>
                  <span v-if="item.prescription.anticoagulant == 2">mg</span>
                  <span v-if="item.prescription.anticoagulant == 3">iu</span>
                  <span v-if="item.prescription.anticoagulant == 4">iu</span>
                  <span v-if="item.prescription.anticoagulant == 5">mg</span>
                </p>
                <p>
                  维持：
                  <span>{{ item.prescription.anticoagulant_weichi }}</span>
                  <span v-if="item.prescription.anticoagulant == 1">ml</span>
                  <span v-if="item.prescription.anticoagulant == 2">iu</span>
                  <span v-if="item.prescription.anticoagulant == 3">iu</span>
                  <span v-if="item.prescription.anticoagulant == 4">mg</span>
                  <span v-if="item.prescription.anticoagulant == 5">ml</span>
                </p>
                <p>
                  总量：
                  <span>{{ item.prescription.anticoagulant_zongliang }}</span>
                  <span v-if="item.prescription.anticoagulant == 1">mg</span>
                  <span v-if="item.prescription.anticoagulant == 2">iu</span>
                  <span v-if="item.prescription.anticoagulant == 3">iu</span>
                  <span v-if="item.prescription.anticoagulant == 4">mg</span>
                  <span v-if="item.prescription.anticoagulant == 5">mg</span>
                </p>
                <p>治疗护士：{{ getNurse(item.start_nurse) }}</p>
                <p>治疗医生：{{ getNurse(item.prescription.creater) }}</p>
              </div>

              <div class="all" @click="toDialysisRecordDetail(item.patient_id, item.dialysis_date)">
                全部
              </div>
            </div>
          </div>
        </van-list>
      </div>

      <div class="noimgBox" v-else>
        <img src="../../../assets/images/none.png" alt />
      </div>
    </div>
    <!-- <div class="add">
      <div style="display: flex;align-items: center;">
        <van-icon class="addIcon" name="add" />新增
      </div>
    </div>-->

    <!-- 弹出层 -->
    <div>
      <van-popup
        v-model="typeShow"
        position="bottom"
        :style="{ height: '40%' }"
      >
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="onCancel"
          @confirm="onConfirm"
        />
      </van-popup>
      <van-popup
        v-model="startShow"
        position="bottom"
        :style="{ height: '40%' }"
      >
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="getstartTime"
          @cancel="startShow = false"
        />
      </van-popup>
      <van-popup v-model="endShow" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="getstartTime2"
          @cancel="endShow = false"
        />
      </van-popup>
      <van-action-sheet
        v-model="newShow"
        :actions="actions"
        cancel-text="取消"
        @cancel="onCancel"
        @select="toDelete"
      />
    </div>
  </div>
</template>

<script>
import { getPatientDetail, getDialysisRecord } from '@/api/patient/patient'
import { uParseTime } from '@/utils/tools'
import Vue from 'vue'
import { Dialog } from 'vant'
const moment = require('moment')
export default {
  props: {
    active: Number
  },
  data () {
    return {
      newShow: false,
      typeShow: false,
      startShow: false,
      endShow: false,
      type: '全部',
      types: 0,
      loading: false,
      finished: false,
      columns: [
        'HD',
        'HDF',
        'HD+HP',
        'HP',
        'HF',
        'SCUF',
        'IUF',
        'HFHD',
        'HFHD+HP',
        'PHF',
        'HFR',
        'HDF+HP',
        'CRRT',
        '腹水回输'
      ],
      startTime: '请选择',
      endTime: '请选择',
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      actions: [{ name: '删除' }],
      showOne: true,
      showTwo: false,
      limit: 10,
      page: 1,
      dialysisRecord: [],
      doctor: [],
      patient_name: '',
      index: 0,
      id: 0,
      patient_id: 0
    }
  },
  methods: {
    onCancel () {
      this.typeShow = false
    },
    onConfirm (value) {
      if (value === '全部') {
        this.types = 0
      }
      if (value === 'HD') {
        this.types = 1
      }
      if (value === 'HDF') {
        this.types = 2
      }
      if (value === 'HD+HP') {
        this.types = 3
      }
      if (value === 'HP') {
        this.types = 4
      }
      if (value === 'HF') {
        this.types = 5
      }
      if (value === 'SCUF') {
        this.types = 6
      }
      if (value === 'IUF') {
        this.types = 7
      }
      if (value === 'HFHD') {
        this.types = 8
      }
      if (value === 'HFHD+HP') {
        this.types = 9
      }
      if (value === 'PHF') {
        this.types = 10
      }
      if (value === 'HFR') {
        this.types = 11
      }

      if (value === 'HDF+HP') {
        this.types = 12
      }
      if (value === 'CRRT') {
        this.types = 13
      }
      if (value === '腹水回输') {
        this.types = 14
      }
      this.page = 1
      this.dialysisRecord = []
      this.getDialysisRecord(
        this.patient_id,
        this.limit,
        this.page,
        this.startTime,
        this.endTime,
        this.types
      )
      this.typeShow = false
    },
    getstartTime (value) {
      this.page = 1
      let year = value.getFullYear()
      let month = value.getMonth() + 1
      let day = value.getDate()
      if (month >= 1 && month <= 9) {
        month = `0${month}`
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`
      }
      this.startTime = `${year}-${month}-${day}`
      this.dialysisRecord = []
      this.getDialysisRecord(
        this.patient_id,
        this.limit,
        this.page,
        this.startTime,
        this.endTime,
        this.types
      )
      this.startShow = false
    },
    getstartTime2 (value) {
      this.page = 1
      let year = value.getFullYear()
      let month = value.getMonth() + 1
      let day = value.getDate()
      if (month >= 1 && month <= 9) {
        month = `0${month}`
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`
      }

      this.endTime = `${year}-${month}-${day}`
      this.dialysisRecord = []
      this.getDialysisRecord(
        this.patient_id,
        this.limit,
        this.page,
        this.startTime,
        this.endTime,
        this.types
      )
      this.endShow = false
    },
    getPatientDetail (patientid) {
      getPatientDetail(patientid).then(response => {
        if (response.data.state === 1) {
          var patientDetail = response.data.data.patientDetail
          this.patient_name = patientDetail.name
          if (patientDetail.blood_patients == 0) {
            this.showOne = false
            this.showTwo = true
          }
          if (patientDetail.blood_patients == 1) {
            this.showOne = true
            this.showTwo = false
          }
          this.patientName = patientDetail.name
        }
      })
    },
    getDialysisRecord (id) {
      getDialysisRecord(
        id,
        this.limit,
        this.page,
        this.startTime,
        this.endTime,
        this.types
      ).then(response => {
        if (response.data.state === 1) {
          var dialysisrecord = response.data.data.dialysisrecord
          let arr = this.dialysisRecord
          arr.push(...dialysisrecord)
          this.dialysisRecord = arr
          var total = response.data.data.total
          var doctor = response.data.data.doctor
          this.doctor = doctor
          this.loading = false
        }
      })
    },
    onLoad () {
      setTimeout(() => {
        this.page++
        // console.log(this.page)
        if (this.page <= Math.ceil(this.total / 10)) {
          this.getDialysisRecord(this.patient_id)
        } else {
          this.loading = false
          this.finished = true
        }
      }, 3000)
    },
    getTime (time) {
      // return uParseTime(time, "{y}-{m}-{d} {h}:{i}:{s}");
      return uParseTime(time, '{y}-{m}-{d}')
    },
    getNurse (id) {
      for (let i = 0; i < this.doctor.length; i++) {
        if (this.doctor[i].admin_user_id === id) {
          return this.doctor[i].user_name
        }
      }
    },
    toDialysisRecordDetail (id, date) {
      this.$router.push(
        '/details?patient_id=' +
          id +
          '&date=' +
          date +
          '&patient_name=' +
          this.patient_name
      )
    },
    Delete (id, index) {
      this.id = id
      this.index = index
      this.newShow = true
    },
    toDelete (value) {
      if ((value.name = '删除')) {
        this.DeleteDialysisRecord(this.id, this.index)
      }
    },
    DeleteDialysisRecord (id, index) {
      Dialog.confirm({
        title: '删除提示!',
        message: '确认删除该条信息吗?,删除后将无法恢复!'
      }).then(() => {
        DeleteDialysisRecord(id).then(response => {
          if (response.data.state === 1) {
            var msg = response.data.data.msg
            // console.log("msg", msg);
            this.dialysisRecord.splice(index, 1)
            this.newShow = false
          }
        })
      })
    }
  },
  created () {
    var patientid = this.$route.query.patientid
    this.getPatientDetail(patientid)
    this.getDialysisRecord(patientid)
    this.patient_id = patientid
  }
}
</script>

<style lang="scss" scoped>
.DialysisRecord {
  height: 100%;
  overflow-y: auto;
  .toolBox {
    display: flex;
    height: 3.125rem;
    justify-content: space-around;
    align-items: center;
    .toolOne {
      width: 6.25rem;
      height: 1.875rem;
      background: rgba(246, 246, 246, 1);
      border-radius: 5px;
      text-align: center;
      font-size: 0.8125rem;
      color: #8d8d8d;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }
  .adviceBox {
    padding: 0 1.125rem;
    margin-bottom: 3.125rem;
  }
  .adviceOne {
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
    padding-bottom: 0.625rem;
  }
  .adviceTitle {
    padding-top: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    p {
      color: #000000;
      font-weight: bold;
      font-size: 0.9375rem;
    }
    .ellipsis {
      font-size: 1.25rem;
      color: #cccccc;
    }
  }
  .orderContent {
    font-size: 0.875rem;
    color: rgba(49, 50, 52, 1);
    margin-top: 0.625rem;
    display: flex;
    flex-wrap: wrap;
    p {
      line-height: 1.5rem;
      width: 50%;
    }
  }
  .doctorBox {
    font-size: 0.75rem;
    color: rgba(152, 152, 152, 1);
    line-height: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.625rem;
  }
  .all {
    font-size: 0.8125rem;
    color: #5b98ff;
    margin-top: 0.625rem;
  }
  .noimgBox {
    margin-top: 40%;
    img {
      width: 9.375rem;
      height: 9.375rem;
      margin: 0 auto;
      display: block;
    }
  }
  .add {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2.75rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 0.9375rem;
    color: #979798;
    .addIcon {
      color: #5b98ff;
      font-size: 1.25rem;
      margin-right: 0.25rem;
    }
  }
}
::-webkit-scrollbar {
  width: 0;
}
</style>