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

<template>
  <window-size>
    <van-notice-bar left-icon="volume-o" text="可接种年龄为【18岁-59岁】之间。" />
    <van-field v-model="vaccinate.vaccinateName" required label="疫苗名称" readonly />
    <van-field
      v-model="vaccinate.vaccinateFactory"
      required
      type="text"
      label="疫苗厂家"
      readonly
      @click="showPickFactory = true"
      placeholder="选择疫苗厂家"
    ></van-field>
    <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
      type="textarea"
      label="工作性质"
      readonly
      @click="showPickJobCategory = true"
      placeholder="选择工作性质"
    ></van-field>
    <van-field
      v-model="vaccinate.executeDate"
      required
      label="接种日期"
      readonly
      @click="showPickDatetime = true"
      placeholder="选择接种日期"
    ></van-field>

    <van-popup v-model:show="showPickFactory" position="bottom" :style="{ height: '50%' }">
      <van-picker
        title="疫苗厂家"
        :columns="vaccinateFactories"
        :columns-field-names="customFieldName"
        @confirm="confirmPickFactory"
      />
    </van-popup>

    <van-popup v-model:show="showPickJobCategory" position="bottom" :style="{ height: '50%' }">
      <van-picker
        title="工作性质"
        :columns="jobCategories"
        :columns-field-names="customFieldName"
        @confirm="confirmPickJobCategory"
      />
    </van-popup>
    <van-popup v-model:show="showPickDatetime" position="bottom" :style="{ height: '50%' }">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择接种日期"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="confirmPickDatetime"
      />
    </van-popup>
    <div style="height: 10px"></div>
    <van-button block type="primary" @click="submit">提交预约</van-button>
  </window-size>
</template>

<script>
import { onMounted, reactive, ref } from 'vue'
import router from '../../../router'
import { formatDate, getAWeekFromNow, getTomorrow } from '../../../utils/date'
import {
  getPatientInfoAndJobCategories,
  getVaccinateFactories,
  submitVaccinateAppointment,
} from '../../../api/covid-vaccinate'
import { Dialog, Toast } from 'vant'
import { isValidIdcard, isValidPhone } from '../../../utils/validate'
export default {
  setup() {
    let patientId = router.currentRoute.value.params.patientId
    const vaccinateId = router.currentRoute.value.params.vaccinateId
    const vaccinateFactories = ref([])
    const showPickFactory = ref(false)
    const showPickDatetime = ref(false)
    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 confirmPickDatetime = (val) => {
      vaccinate.executeDate = formatDate(val)
      showPickDatetime.value = false
    }
    const jobCategoryName = ref('')
    const jobCategories = ref([])
    const customFieldName = {
      code: 'code',
      text: 'name',
    }
    const confirmPickFactory = (val) => {
      vaccinate.vaccinateCode = val.code
      vaccinate.vaccinateFactory = val.name
      showPickFactory.value = false
    }
    const confirmPickJobCategory = (val) => {
      vaccinate.jobCategory = val.code
      jobCategoryName.value = val.name
      showPickJobCategory.value = false
    }
    const vaccinate = reactive({
      vaccinateId,
      vaccinateCode: '',
      vaccinateName: '',
      vaccinateFactory: '',
      patientId: '',
      name: '',
      phone: '',
      socialNo: '',
      corpName: '',
      jobCategory: '',
      executeDate: '',
    })

    const submit = () => {
      if (!vaccinate.vaccinateCode || !vaccinate.vaccinateFactory) {
        Toast({
          message: '请选择疫苗厂家！',
          position: 'top',
        })
        return
      }
      if (!vaccinate.name) {
        Toast({
          message: '请输入姓名！',
          position: 'top',
        })
        return
      }
      if (!isValidPhone(vaccinate.phone)) {
        Toast({
          message: '请输入正确的手机号码',
          position: 'top',
        })
        return
      }
      if (!isValidIdcard(vaccinate.socialNo)) {
        Toast({
          message: '请输入正确的身份证号码',
          position: 'top',
        })
        return
      }
      if (!vaccinate.corpName) {
        Toast({
          message: '请输入工作单位，没有工作单位请填‘无’',
          position: 'top',
          duration: 3000,
        })
        return
      }
      if (!vaccinate.jobCategory) {
        Toast({
          message: '请选择工作性质，如不确定请选‘其他人员’，如无工作请选择‘家务及待业人员’',
          position: 'top',
          duration: 3000,
        })
        return
      }
      if (!vaccinate.executeDate) {
        Toast({
          message: '请选择接种日期',
          position: 'top',
        })
        return
      }
      submitVaccinateAppointment(vaccinate).then((res) => {
        Dialog.alert({
          title: '提示',
          message: res,
        }).then(() => {
          router.push('/hospitalService')
        })
      })
    }
    onMounted(() => {
      if (!patientId) {
        patientId = ''
      }
      getVaccinateFactories(vaccinateId).then((res) => {
        vaccinateFactories.value = res.factories
        vaccinate.vaccinateId = res.id
        vaccinate.vaccinateName = res.name
        if (res.factory) {
          vaccinate.vaccinateCode = res.factory.code
          vaccinate.vaccinateFactory = res.factory.name
        }
      })
      getPatientInfoAndJobCategories(patientId).then((res) => {
        vaccinate.patientId = res.patientId
        vaccinate.name = res.name
        vaccinate.phone = res.phone
        vaccinate.socialNo = res.socialNo
        jobCategories.value = res.jobCategories
      })
    })
    return {
      vaccinate,
      vaccinateFactories,
      showPickFactory,
      showPickDatetime,
      minDate: getTomorrow(),
      maxDate: getAWeekFromNow(),
      currentDate,
      formatter,
      confirmPickDatetime,
      showPickJobCategory,
      jobCategories,
      confirmPickFactory,
      confirmPickJobCategory,
      customFieldName,
      jobCategoryName,
      submit,
    }
  },
}
</script>