wxservice-web/src/views/hospital-service/assessments/Covid19Assessment.vue

<template>
  <back-nav></back-nav>
  <div style="height: 20px"></div>
  <div id="question-body">
    <van-field v-model="answer.name" type="text" label="姓名" disabled />
    <van-field v-model="answer.idcard" type="text" label="身份证" disabled />
    <van-field v-model="answer.phone" type="tel" label="电话" placeholder="请输入手机号" />
    <van-field
      readonly
      clickable
      name="calendar"
      v-model="answer.date"
      label="就诊日期"
      placeholder="点击选择日期"
      @click="answer.showCalendar = true"
    />
    <van-calendar v-model:show="answer.showCalendar" :show-confirm="false" @confirm="onConfirmDate" />
    <div>
      <van-radio-group v-model="answer.temperature" direction="horizontal">
        体温：
        <van-radio name="1">正常</van-radio>
        <van-radio name="2">发烧</van-radio>
        <van-field
          ref="mFocus"
          style="width: 80px"
          v-model="answer.feverNumber"
          type="number"
          :disabled="answer.temperature != 2"
        />&nbsp;℃
      </van-radio-group>
    </div>
    <van-field
      readonly
      clickable
      name="area"
      v-model="answer.address"
      label="住址地区"
      placeholder="点击选择省市区"
      @click="answer.showArea = true"
    />
    <van-popup v-model:show="answer.showArea" position="bottom">
      <van-area :area-list="areaList" value="430105" @confirm="onConfirmArea" @cancel="answer.showArea = false" />
    </van-popup>
    <div v-for="item in assessmentItems" :key="item.key">
      {{ item.label }}
      <div style="margin-top: 7px; margin-left: 10px">
        <van-radio-group v-model="answer['item' + item.key]" direction="vertical">
          <van-radio v-for="option in item.options" :key="option.key" :name="option.key" style="margin-top: 10px">
            <span :style="{ color: option.color }">{{ option.label }}</span>

            <van-checkbox-group v-model="answer.symptoms">
              <van-checkbox
                shape="square"
                v-for="child in option.children"
                :key="child.key"
                :name="child.key"
                style="margin-top: 5px"
                >{{ child.label }}</van-checkbox
              >
            </van-checkbox-group>
          </van-radio>
        </van-radio-group>
      </div>
    </div>
    <van-button @click="submit" type="primary" icon="passed" block>提交</van-button>
  </div>
</template>

<script>
import { onMounted, reactive, ref, watchEffect } from 'vue'
import { assessmentItems } from '../../../data/index'
import { getDate } from '../../../utils/date'
import { getPatientInfo, submitCovidAssessment } from '../../../api/assessments'
import { validateCovid19Answer } from '../../../utils/validate'
import { showDialog } from 'vant'
import allArea from '../../../utils/area'
import { useRouter } from 'vue-router'

export default {
  name: 'Covid19Assessment',
  setup() {
    const areaList = allArea
    const answer = reactive({
      name: '',
      phone: '',
      idcard: '',
      symptoms: [],
      addrProvince: 430000,
      addrCity: 430100,
      addrDistrict: 430105,
      showCalendar: false,
      address: '湖南省/长沙市/开福区',
      showArea: false,
      showIdKeyboard: false,
    })
    const onConfirmArea = (values) => {
      answer.addrProvince = values[0].code
      answer.addrCity = values[1].code
      answer.addrDistrict = values[2].code
      answer.address = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/')
      answer.showArea = false
    }
    const onConfirmDate = (date) => {
      answer.date =
        date.getFullYear() + '-' + ('0' + (date.getMonth() + 1)).slice(-2) + '-' + ('0' + date.getDate()).slice(-2)
      answer.showCalendar = false
    }
    const onInputIdcard = (val) => {
      if (val === '清空') {
        setTimeout(() => {
          answer.idcard = ''
        })
      }
    }
    const from = ref('')
    const router = useRouter()

    const mFocus = ref(null)
    watchEffect(() => {
      if (answer.temperature === 2) {
        setTimeout(() => {
          mFocus.value.focus()
        }, 100)
      } else {
        answer.feverNumber = ''
      }
    })
    watchEffect(() => {
      if (answer.symptoms.length > 0) {
        answer.item5 = 51
      }
    })
    watchEffect(() => {
      if (answer.item5 === 52) {
        answer.symptoms = []
      }
    })
    const submit = () => {
      const message = validateCovid19Answer(answer)
      if (message === '') {
        submitCovidAssessment(answer).then((res) => {
          showDialog({
            title: '提示',
            message: '提交成功！',
          }).then(() => {
            router.go(-1)
          })
        })
      } else {
        showDialog({
          title: '提示',
          message: message,
        }).then(() => {
          if (message.startsWith('请先绑定')) {
            router.push('/myPatientIdCards')
          }
        })
      }
    }

    onMounted(() => {
      const patientId = router.currentRoute.value.params.patientId
      if (!patientId || patientId === ':patientId') {
        showDialog({
          message: '请先绑定就诊卡！',
          title: '提示',
        }).then(() => {
          router.push('/myPatientIdCards')
        })
      } else {
        from.value = router.currentRoute.value.params.from
        answer.patientId = patientId
        getPatientInfo(patientId).then((res) => {
          answer.name = res.name
          answer.phone = res.phone
          answer.idcard = res.idcard
          answer.date = getDate()
        })
      }
    })

    return {
      mFocus,
      areaList,
      onInputIdcard,
      answer,
      onConfirmArea,
      onConfirmDate,
      assessmentItems,
      submit,
    }
  },
}
</script>

<style scoped>
#question-body {
  padding: 0 20px 20px 20px;
}
#question-body > div {
  margin-bottom: 15px;
}
</style>