web_dist/src/views/hospitalization/zhu-yuan-yi-sheng/yi-zhu-lu-ru/components/OutpatientAppointments.vue

<script setup name="OutpatientAppointments">
import {huanZheXinXi} from "@/views/hospitalization/zhu-yuan-yi-sheng/public-js/zhu-yuan-yi-sheng";
import {stringIsBlank} from "@/utils/blank-utils";
import {BizException, ExceptionEnum} from "@/utils/BizException";
import {
  getAmpmByDateAndDeptCode,
  getChargeTypeByRequestDayAndDoctor, getDoctorCodeByRequestDayAndDoctor, getMzChargeTypeByMzyRequestId, saveMzyReqrec
} from "@/api/outpatient-appointments/outpatient-appointments";

const dialog = ref(false)

const openDialog = () => {
  if (stringIsBlank(huanZheXinXi.value.zkWard)) {
    BizException(ExceptionEnum.MESSAGE_ERROR, "请先选择患者。")
  }
  if (stringIsBlank(huanZheXinXi.value.mzNo)) {
    BizException(ExceptionEnum.MESSAGE_ERROR, "没有查询到患者门诊号，请先建档。");
  }
  dialog.value = true;
  param.unitCode = huanZheXinXi.value.zkWard
  param.patientId = huanZheXinXi.value.mzNo
  param.birthDay = huanZheXinXi.value.birthDay
}

let param = $ref({
  requestDayStr: '',
  unitCode: '',
  ampm: '',
  apTime: '',
  chargeType: '',
  mzyRequestId: '',
  birthDay: '',
  patientId: ''
})

let segmentList = $ref([])

const dateChange = () => {

  param.ampm = ''
  param.apTime = ''
  param.chargeType = ''
  param.mzyRequestId = ''

  segmentList = []
  numbercategory = []
  doctorList = []

  getAmpmByDateAndDeptCode(param.requestDayStr, param.unitCode).then(res => {
    segmentList = res
  })
}

const aList = [
  {code: 'a1', name: '08:00-08:30'},
  {code: 'a2', name: '08:30-09:00'},
  {code: 'a3', name: '09:00-09:30'},
  {code: 'a4', name: '09:30-10:00'},
  {code: 'a5', name: '10:00-10:30'},
  {code: 'a6', name: '10:30-11:00'},
  {code: 'a7', name: '11:00-11:30'},
  {code: 'a8', name: '11:30-12:00'},
]
const pList = [
  {code: 'p1', name: '14:00-14:30'},
  {code: 'p2', name: '14:30-15:00'},
  {code: 'p3', name: '15:00-15:30'},
  {code: 'p4', name: '15:30-16:00'},
  {code: 'p5', name: '16:00-16:30'},
  {code: 'p6', name: '16:30-17:00'},
]
const segmentCalculation = computed(() => {
  if (param.ampm === 'a') {
    return aList
  } else if (param.ampm === 'p') {
    return pList
  }
  return []
})


let numbercategory = $ref([])
const chargeTypeByRequestDayAndDoctor = () => {
  if (param.unitCode && param.ampm && param.requestDayStr) {
    getChargeTypeByRequestDayAndDoctor(param.unitCode, param.ampm, param.requestDayStr, param.apTime).then((res) => {
      numbercategory = res
      console.log(res)
    })
  }
}

const ampmChange = () => {
  param.apTime = ''
  param.chargeType = ''
  param.mzyRequestId = ''

  numbercategory = []
  doctorList = []

  if (!(param.ampm === 'a' || param.ampm === 'p')) {
    chargeTypeByRequestDayAndDoctor()
  }

}

let doctorList = $ref([])
const doctorCodeByRequestDayAndDoctor = () => {
  param.mzyRequestId = ''
  doctorList = []

  if (param.unitCode && param.ampm && param.requestDayStr && param.chargeType) {
    getDoctorCodeByRequestDayAndDoctor(param.unitCode, param.ampm, param.requestDayStr, param.apTime, param.chargeType).then((res) => {
      doctorList = res
      console.log(res)
    })
  }
}

let feeInfo = $ref({})
const doctorsChange = () => {
  if (param.mzyRequestId && param.birthDay && param.patientId) {
    getMzChargeTypeByMzyRequestId(param.mzyRequestId, param.birthDay, param.patientId).then((res) => {
      feeInfo = res
    })
  }
}

const apTimeValidator = (rule, value, callback) => {
  if (param.ampm === 'a' || param.ampm === 'p') {
    if (stringIsBlank(param.apTime)) {
      callback(new Error('时间不能为空'))
    } else {
      callback()
    }
  } else {
    param.apTime = ''
    callback()
  }
}

const rules = {
  requestDayStr: [{required: true, message: '预约日期不能为空。', trigger: 'blur'}],
  ampm: [{required: true, message: '号段不能为空。', trigger: 'blur'}],
  apTime: [{validator: apTimeValidator, message: '时间不能为空。', trigger: 'blur'}],
  chargeType: [{required: true, message: '号别不能为空。', trigger: 'blur'}],
  mzyRequestId: [{required: true, message: '医生不能为空。', trigger: 'blur'}],
}

const formRef = ref(null)

const confirm = async () => {
  if (!formRef.value) return
  await formRef.value.validate()
  let data = {
    mzyRequestId: param.mzyRequestId,
    totalFee: feeInfo.clinicFee,
    payMark: "5",
    mzyReqrec: {
      patientId: param.patientId,
      ampm: param.ampm,
      apTime: param.apTime,
      unitCode: param.unitCode,
      chargeType: param.chargeType,
      requestDayStr: param.requestDayStr,
    }
  }
  saveMzyReqrec(data).then(res => {
    cancel()
  })
}

const cancel = () => {
  segmentList = []
  numbercategory = []
  doctorList = []
  feeInfo = {}
  param = {
    requestDayStr: '',
    unitCode: '',
    ampm: '',
    apTime: '',
    chargeType: '',
    mzyRequestId: '',
    birthDay: '',
    patientId: ''
  }
  dialog.value = false
}

</script>

<template>
  <button @click="openDialog()">门诊预约</button>

  <el-dialog v-model="dialog" title="门诊预约" @closed="cancel">
    <el-form inline
             ref="formRef"
             label-position="right"
             label-width="120px"
             :model="param"
             :rules="rules">
      <el-row>
        <el-col :span="12">
          <el-form-item label="日期" prop="requestDayStr">
            <el-date-picker v-model="param.requestDayStr"
                            @change="dateChange"
                            format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD"
                            type="date"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="号段" prop="ampm">
            <el-select v-model="param.ampm" @change="ampmChange">
              <el-option v-for="item in segmentList" :value="item.code" :label="item.name"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="时间" prop="apTime">
            <el-select v-model="param.apTime" @change="chargeTypeByRequestDayAndDoctor">
              <el-option
                  v-for="item in segmentCalculation"
                  :value="item.code"
                  :label="item.name"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="号别" prop="chargeType">
            <el-select v-model="param.chargeType" @change="doctorCodeByRequestDayAndDoctor">
              <el-option
                  v-for="item in numbercategory"
                  :value="item.code"
                  :label="item.name"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="医生" prop="mzyRequestId">
            <el-select v-model="param.mzyRequestId" @change="doctorsChange">
              <el-option
                  v-for="item in doctorList"
                  :value="item.mzyRequestId"
                  :label="item.employee.employeeName"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <el-button type="danger" @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm( )">预约</el-button>
    </template>
  </el-dialog>

</template>

<style scoped lang="scss">

</style>