预约确认功能

eight

2024-08-08 f831cb3d5ac0f206c4809393321f89b35d1e2e68

预约确认功能

 src/views/ecg/appointment/AppointmentConfirm.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,237 @@
<template>
  <el-form-item label="患者编号">
    <el-input v-model="queryParams.patId" placeholder="请输入患者编号" clearable @input="searchBookInfo"/>
  </el-form-item>

  <el-button @click="message.alert('p')"><Icon icon="ep:refresh" class="mr-5px" /> æŽ’队 </el-button>

  <el-divider/>

  <el-form
    ref="formRef"
    :model="formData"
    label-width="100px"
    v-loading="formLoading"
    class="two-column-form"
  >
    <div class="form-row">
      <el-form-item label="患者姓名" prop="patName">
        <el-input v-model="formData.patName" placeholder="请输入患者姓名" />
      </el-form-item>
    </div>
    <div class="form-row">
      <el-form-item label="患者性别" prop="patGender">
        <el-radio-group v-model="formData.patGender">
          <el-radio
            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
            :key="dict.value"
            :label="dict.value"
          >
            {{ dict.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="预约日期" prop="bookDate">
        <el-date-picker
          v-model="formData.bookDate"
          type="date"
          value-format="x"
          placeholder="选择预约日期"
        />
      </el-form-item>
    </div>
    <div class="form-row">
      <el-form-item label="预约时间段" prop="bookTimeslot">
        <el-select v-model="formData.bookTimeslot" placeholder="请选择预约时间段">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.ECG_BOOK_TIMESLOT)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="预约检查类型" prop="bookCheckType">
        <el-select v-model="formData.bookCheckType" placeholder="请选择预约检查类型">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.ECG_CHECK_TYPE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
    </div>
    <div class="form-row">
      <el-form-item label="患者生日" prop="patBirthday">
        <el-date-picker
          v-model="formData.patBirthday"
          type="date"
          value-format="x"
          placeholder="选择患者生日"
        />
      </el-form-item>
      <el-form-item label="患者手机" prop="patMobile">
        <el-input v-model="formData.patMobile" placeholder="请输入患者手机" />
      </el-form-item>
    </div>
    <div class="form-row">
      <el-form-item label="患者电话" prop="patPhone">
        <el-input v-model="formData.patPhone" placeholder="请输入患者电话" />
      </el-form-item>
      <el-form-item label="身份证号" prop="patIdentityId">
        <el-input v-model="formData.patIdentityId" placeholder="请输入身份证号" />
      </el-form-item>
    </div>
    <div class="form-row">
      <el-form-item label="患者地址" prop="patAddr">
        <el-input v-model="formData.patAddr" placeholder="请输入患者地址" />
      </el-form-item>
      <el-form-item label="患者所在科室代码" prop="patDeptCode">
        <el-input v-model="formData.patDeptCode" placeholder="请输入患者所在科室代码" />
      </el-form-item>
    </div>
    <div class="form-row">
      <el-form-item label="患者所在科室名称" prop="patDeptDesc">
        <el-input v-model="formData.patDeptDesc" placeholder="请输入患者所在科室名称" />
      </el-form-item>
      <el-form-item label="患者所在病区代码" prop="patWardCode">
        <el-input v-model="formData.patWardCode" placeholder="请输入患者所在病区代码" />
      </el-form-item>
    </div>
    <div class="form-row">
      <el-form-item label="患者所在病区名称" prop="patWardDesc">
        <el-input v-model="formData.patWardDesc" placeholder="请输入患者所在病区名称" />
      </el-form-item>
      <el-form-item label="床号" prop="patBedNo">
        <el-input v-model="formData.patBedNo" placeholder="请输入床号" />
      </el-form-item>
    </div>
  </el-form>
</template>
<script setup lang="ts">
import {DICT_TYPE, getIntDictOptions} from '@/utils/dict'
import { AppointmentApi, AppointmentVO } from '@/api/ecg/appointment'

/** é¢„约确认 è¡¨å• */
defineOptions({ name: 'AppointmentConfirm' })

const { t } = useI18n() // å›½é™…化
const message = useMessage() // æ¶ˆæ¯å¼¹çª—

const dialogVisible = ref(false) // å¼¹çª—的是否展示
const dialogTitle = ref('') // å¼¹çª—的标题
const formLoading = ref(false) // è¡¨å•çš„加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // è¡¨å•çš„类型：create - æ–°å¢žï¼›update - ä¿®æ”¹

const loading = ref(true) // åˆ—表的加载中
const list = ref<AppointmentVO[]>([]) // åˆ—表的数据
const total = ref(0) // åˆ—表的总页数
const queryParams = reactive({
    pageNo: 1,
    pageSize: 1,
    patId: undefined
})

const formData = ref({
  patId: undefined,
  patName: undefined,
  patGender: 1, // 1 ç”· 2 å¥³
  patBirthday: undefined,
  patMobile: undefined,
  patPhone: undefined,
  patIdentityId: undefined,
  patAddr: undefined,
  patDeptCode: undefined,
  patDeptDesc: undefined,
  patWardCode: undefined,
  patWardDesc: undefined,
  patBedNo: undefined,
  bookId: undefined,
  bookTime: undefined,
  bookDate: new Date().getTime(),
  bookTimeslot: 10001015,
  bookCheckType: 10
})
const formRef = ref() // è¡¨å• Ref

const searchBookInfo = async () => {
  resetForm()
  total.value = 0
  list.value = []

  await getList()
  if (total.value === 1) {
    formData.value = list.value[0]
    return
  }
  message.notify("请先预约!")
}

/** æŸ¥è¯¢åˆ—表 */
const getList = async () => {
    loading.value = true
    try {
        const data = await AppointmentApi.getAppointmentPage(queryParams)
        list.value = data.list
        total.value = data.total
    } finally {
        loading.value = false
    }
}

/** æ‰“开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // ä¿®æ”¹æ—¶ï¼Œè®¾ç½®æ•°æ®
  if (id) {
    formLoading.value = true
    try {
      formData.value = await AppointmentApi.getAppointment(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // æä¾› open æ–¹æ³•ï¼Œç”¨äºŽæ‰“开弹窗

/** é‡ç½®è¡¨å• */
const resetForm = () => {
  formData.value = {
    patId: undefined,
    patName: undefined,
    patGender: 1, // 1 ç”· 2 å¥³
    patBirthday: undefined,
    patMobile: undefined,
    patPhone: undefined,
    patIdentityId: undefined,
    patAddr: undefined,
    patDeptCode: undefined,
    patDeptDesc: undefined,
    patWardCode: undefined,
    patWardDesc: undefined,
    patBedNo: undefined,
    bookId: undefined,
    bookTime: undefined,
    bookDate: new Date().getTime(),
    bookTimeslot: 10001015,
    bookCheckType: 10
  }
  formRef.value?.resetFields()
}
</script>

<style lang="scss" scoped>
.two-column-form .form-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.two-column-form .form-row .el-form-item {
  width: 48%;
}
</style>