wxservice-web/src/views/hospital-service/covid-vaccinate/ExcuteAppointment.vue

<template>
  <window-size>
    <van-notice-bar left-icon="volume-o" text="可接种年龄为【18岁-70岁】之间。" />
    <van-grid direction="horizontal" :column-num="7">
      <van-grid-item v-for="item in oneWeekText" :key="item" :text="'周' + item" />
    </van-grid>
    <van-grid direction="horizontal" :column-num="7">
      <van-grid-item v-for="(item, index) in nextSevenDate" :key="index">
        <van-badge :content="hasSource(index)" :color="badgeColor(index)">
          <van-button
            :disabled="disabledBtn(index)"
            :type="getType(index)"
            size="small"
            round
            @click="handleClickDate(index)"
            >{{ item.date }}</van-button
          >
        </van-badge>
      </van-grid-item>
    </van-grid>
    <van-field v-model="vaccinate.vaccinateName" required label="疫苗名称" readonly />
    <van-field v-model="vaccinate.vaccinateFactory" required label="疫苗厂家" readonly />
    <van-field v-model="vaccinate.name" required type="text" label="姓名" placeholder="请输入姓名" />
    <van-field v-model="vaccinate.phone" required type="tel" label="电话" placeholder="请输入手机号" />
    <van-field v-model="vaccinate.socialNo" required type="tel" label="身份证" placeholder="请输入身份证号" />
    <van-field v-model="vaccinate.corpName" required type="text" label="工作单位" placeholder="请输入工作单位" />
    <van-field
      v-model="jobCategoryName"
      required
      label="工作性质"
      readonly
      @click="showPickJobCategory = true"
      placeholder="选择工作性质"
    ></van-field>
    <van-popup v-model:show="showPickJobCategory" position="bottom" :style="{ height: '50%' }">
      <van-picker
        title="工作性质"
        :columns="jobCategories"
        :columns-field-names="customFieldName"
        @confirm="confirmPickJobCategory"
      />
    </van-popup>
    <div style="height: 10px"></div>
    <van-button block type="primary" @click="submit" :disabled="disabledSubmit">提交预约</van-button>
  </window-size>
</template>

<script>
import { computed, onMounted, reactive, ref } from 'vue'
import router from '../../../router'
import { getNextSevenDate, getOneWeekText } from '../../../utils/date'
import {
  getNextSevenDaysSources,
  getPatientInfoAndJobCategories,
  submitVaccinateAppointment,
} from '../../../api/covid-vaccinate'
import { showDialog, showToast } from 'vant'
import { isValidIdcard, isValidPhone } from '../../../utils/validate'
export default {
  setup() {
    let patientId = router.currentRoute.value.params.patientId
    const vaccinateCode = router.currentRoute.value.params.vaccinateCode
    const vaccinateName = router.currentRoute.value.params.vaccinateName
    const vaccinateFactory = router.currentRoute.value.params.vaccinateFactory

    const currentIndex = ref(0)
    const oneWeekText = getOneWeekText()
    const nextSevenDate = getNextSevenDate()
    const nextSevenDaySources = ref([0, 0, 0, 0, 0, 0, 0])
    const getType = (index) => {
      return index === currentIndex.value ? 'primary' : 'default'
    }
    const hasSource = (index) => {
      return nextSevenDaySources.value[index] > 0 ? nextSevenDaySources.value[index] : '无'
    }
    const badgeColor = (index) => {
      return nextSevenDaySources.value[index] > 0 ? 'green' : 'red'
    }
    const disabledBtn = (index) => {
      return nextSevenDaySources.value[index] < 1
    }
    const disabledSubmit = computed(() => {
      return nextSevenDaySources.value[currentIndex.value] < 1
    })
    const handleClickDate = (index) => {
      currentIndex.value = index
      vaccinate.executeDate = nextSevenDate[index].fullDate
    }

    const vaccinateFactories = ref([])
    const showPickJobCategory = ref(false)
    const currentDate = ref(new Date())
    const formatter = (type, val) => {
      if (type === 'year') {
        return val + '年'
      }
      if (type === 'month') {
        return val + '月'
      }
      if (type === 'day') {
        return val + '日'
      }
      return val
    }
    const jobCategoryName = ref('')
    const jobCategories = ref([])
    const customFieldName = {
      code: 'code',
      text: 'name',
    }
    const confirmPickJobCategory = (val) => {
      vaccinate.jobCategory = val.selectedOptions[0].code
      jobCategoryName.value = val.selectedOptions[0].name
      showPickJobCategory.value = false
    }
    const vaccinate = reactive({
      vaccinateCode: vaccinateCode,
      vaccinateName: vaccinateName,
      vaccinateFactory: vaccinateFactory,
      patientId: '',
      name: '',
      phone: '',
      socialNo: '',
      corpName: '',
      jobCategory: '',
      executeDate: '',
    })

    const submit = () => {
      if (!vaccinate.vaccinateCode || !vaccinate.vaccinateFactory) {
        showToast({
          message: '请选择疫苗厂家！',
          position: 'top',
        })
        return
      }
      if (!vaccinate.name) {
        showToast({
          message: '请输入姓名！',
          position: 'top',
        })
        return
      }
      if (!isValidPhone(vaccinate.phone)) {
        showToast({
          message: '请输入正确的手机号码',
          position: 'top',
        })
        return
      }
      if (!isValidIdcard(vaccinate.socialNo)) {
        showToast({
          message: '请输入正确的身份证号码',
          position: 'top',
        })
        return
      }
      if (!vaccinate.corpName) {
        showToast({
          message: '请输入工作单位，没有工作单位请填‘无’',
          position: 'top',
          duration: 3000,
        })
        return
      }
      if (!vaccinate.jobCategory) {
        showToast({
          message: '请选择工作性质，如不确定请选‘其他人员’，如无工作请选择‘家务及待业人员’',
          position: 'top',
          duration: 3000,
        })
        return
      }
      if (!vaccinate.executeDate) {
        showToast({
          message: '请选择接种日期',
          position: 'top',
        })
        return
      }
      submitVaccinateAppointment(vaccinate).then((res) => {
        showDialog({
          title: '提示',
          message: res,
        }).then(() => {
          router.push('/hospitalService')
        })
      })
    }
    onMounted(() => {
      if (!patientId) {
        patientId = ''
      }
      getPatientInfoAndJobCategories(patientId).then((res2) => {
        vaccinate.patientId = res2.patientId
        vaccinate.name = res2.name
        vaccinate.phone = res2.phone
        vaccinate.socialNo = res2.socialNo
        jobCategories.value = res2.jobCategories
        jobCategories.value.forEach(item => {
          item.value = item.code
        })
        getNextSevenDaysSources(vaccinate.vaccinateCode).then((res3) => {
          nextSevenDaySources.value = res3
          for (let i = 0; i < 7; i++) {
            if (res3[i] > 0) {
              handleClickDate(i)
              break
            }
          }
        })
      })
    })
    return {
      oneWeekText,
      nextSevenDate,
      getType,
      hasSource,
      badgeColor,
      disabledBtn,
      handleClickDate,
      disabledSubmit,
      vaccinate,
      vaccinateFactories,
      currentDate,
      formatter,
      showPickJobCategory,
      jobCategories,
      confirmPickJobCategory,
      customFieldName,
      jobCategoryName,
      submit,
    }
  },
}
</script>