wxservice-web/src/views/hospital-service/check-exam/CheckExamIndex.vue

<template>
  <window-size>
    <van-cell title="选择日期区间" :value="date" @click="showDateShortcuts = true" />

    <van-dialog v-model:show="showDateShortcuts" @confirm="onConfirmShortcuts">
      <div style="display:flex; justify-content: center; padding: 30px 0 20px 0">
        <van-radio-group v-model="chosenShortcut">
          <van-radio name="oneWeek" style="margin-bottom: 12px">近一周</van-radio>
          <van-radio name="threeMonths" style="margin-bottom: 12px">近三月</van-radio>
          <van-radio name="halfYear" style="margin-bottom: 12px">近半年</van-radio>
          <van-radio name="oneYear" style="margin-bottom: 12px">近一年</van-radio>
          <van-radio name="diy">自定义</van-radio>
        </van-radio-group>
      </div>
    </van-dialog>

    <van-calendar v-model:show="showDateRange"
                  :min-date="minDate"
                  :max-date="maxDate"
                  type="range"
                  @confirm="onConfirm" />
    <div v-show="examIndex.length > 0">
      <div style="height: 5px"></div>
      <van-tag type="success" size="large" round plain>已发布报告</van-tag>
      <div style="height: 5px"></div>
      <div :style="scrollStyle">
        <div v-for="item in examIndex" :key="item.ordr_ID">
          <van-cell
            :title="item.aply_CTNT"
            :label="item.ordr_CREATE_DATE"
            is-link
            center
            :to="'/checkExamDetail/' + item.ordr_ID + '/' + patientId"
          >
          </van-cell>
          <div style="height: 5px"></div>
        </div>
      </div>
    </div>
    <van-empty :image="empty" description="您当前没有报告项目" v-show="examIndex.length === 0" />
  </window-size>
</template>

<script setup>
import store from '../../../store'
import empty from '../../../assets/empty.png'
import { useRouter } from 'vue-router'
import { computed, onMounted, ref } from 'vue'
import { checkExamIndex } from '../../../api/check-exam'
import {formatDate, getDateRangeByOffsetDays} from '../../../utils/date'

const router = useRouter()
const patientId = router.currentRoute.value.params.patientId
const scrollStyle = {
  height: store.state.screenSize.h - 125 + 'px',
  overflowY: 'auto',
}
const date = ref('')
const minDate = ref(new Date(2012, 0, 1))
const maxDate = ref(new Date())

const showDateShortcuts = ref(false)
const chosenShortcut = ref('oneWeek')

const onConfirmShortcuts = () => {
  switch (chosenShortcut.value) {
    case 'oneWeek':
      makeOffset(7).then((range) => {
        queryInspectionIndex(range[0], range[1])
      })
      return
    case 'threeMonths':
      makeOffset(90).then((range) => {
        queryInspectionIndex(range[0], range[1])
      })
      return;
    case 'halfYear':
      makeOffset(183).then((range) => {
        queryInspectionIndex(range[0], range[1])
      })
      return
    case 'oneYear':
      makeOffset(365).then((range) => {
        queryInspectionIndex(range[0], range[1])
      })
      return;
    default:
      showDateRange.value = true
      return;
  }
}

const makeOffset = (offsetDays) => {
  return new Promise((resolve, reject) => {
    const temp = getDateRangeByOffsetDays(offsetDays)
    const dateRange = [temp.start, temp.end]
    store.dispatch({
      type: 'storeExamDateRange',
      dateRange: dateRange
    }).then(() => {
      date.value = dateRange[0] + ' - ' + dateRange[1]
      resolve(dateRange)
    })
  })
}

const showDateRange = ref(false)
const examIndex = computed(() => {
  return store.state.examIndexArray
})

const onConfirm = (values) => {
  showDateRange.value = false
  const start = formatDate(values[0])
  const end = formatDate(values[1])
  store.dispatch({
    type: 'storeExamDateRange',
    dateRange: [start, end]
  }).then(() => {
    date.value = `${start} - ${end}`
    queryInspectionIndex(start, end)
  })
}

const queryInspectionIndex = (start, end) => {
  const param = {
    patientId,
    start: start,
    end: end,
  }
  checkExamIndex(param).then((res) => {
    store.commit('SET_EXAMINDEXARRAY', res)
  })
}

onMounted(() => {
  let storeRange = store.state.examDateRange
  if (storeRange.length === 0) {
    makeOffset(30).then((range) => {
      date.value = range[0] + ' - ' + range[1]
      queryInspectionIndex(range[0], range[1])
    })
  } else {
    date.value = storeRange[0] + ' - ' + storeRange[1]
    if (examIndex.value.length === 0) {
      queryInspectionIndex(storeRange[0], storeRange[1])
    }
  }
})
</script>