503 lines
15 KiB
Vue
503 lines
15 KiB
Vue
<template>
|
||
<div>
|
||
<el-row>
|
||
<el-col :span="10">
|
||
<el-card shadow="never" v-loading="formLoading" style="min-height: 540px; height: 76vh">
|
||
<el-form
|
||
ref="infoFormRef"
|
||
:model="infoParams"
|
||
size="small"
|
||
label-width="68px"
|
||
label-position="right"
|
||
label-suffix=""
|
||
class="-mb-10px"
|
||
:disabled="infoFormRef_disabled"
|
||
>
|
||
<el-row>
|
||
<el-col :span="13">
|
||
<!-- Notes： -->
|
||
<el-form-item label="登记号" prop="regId" class="item-style">
|
||
<el-input
|
||
v-model="infoParams.regId"
|
||
placeholder="请输入登记号"
|
||
clearable
|
||
class="item-width"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="11">
|
||
<!-- Notes： -->
|
||
<el-form-item label="患者来源" prop="regSource" class="item-style">
|
||
<el-select
|
||
v-model="infoParams.regSource"
|
||
placeholder="请选择患者来源"
|
||
clearable
|
||
class="item-width"
|
||
>
|
||
<el-option label="门诊" value="门诊" />
|
||
<el-option label="住院" value="住院" />
|
||
<el-option label="体检" value="体检" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="13">
|
||
<!-- Notes： -->
|
||
<el-form-item label="申请单号" class="item-style">
|
||
<el-input
|
||
v-model="examIdFirst"
|
||
placeholder="申请单号"
|
||
:disabled="true"
|
||
class="item-width"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<!-- Notes： -->
|
||
<el-form-item label="姓名" prop="pname" class="item-style">
|
||
<el-input
|
||
v-model="infoParams.pname"
|
||
placeholder="请输入姓名"
|
||
clearable
|
||
class="item-width"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="10">
|
||
<!-- Notes： -->
|
||
<el-form-item label="性别" prop="gender" class="item-style">
|
||
<el-select
|
||
v-model="infoParams.gender"
|
||
placeholder="请选择性别"
|
||
clearable
|
||
class="item-width"
|
||
>
|
||
<el-option label="男" value="男" />
|
||
<el-option label="女" value="女" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="14">
|
||
<!-- Notes： -->
|
||
<el-form-item label="联系电话" prop="contactTel" class="item-style">
|
||
<el-input
|
||
v-model="infoParams.contactTel"
|
||
placeholder="请输入联系电话"
|
||
clearable
|
||
class="item-width"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="13">
|
||
<!-- Notes： -->
|
||
<el-form-item label="出生日期" prop="birthday" class="item-style date-picker">
|
||
<el-date-picker
|
||
v-model="infoParams.birthday"
|
||
type="date"
|
||
value-format="x"
|
||
placeholder="请选择出生日期"
|
||
class="item-width"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="11" v-if="false">
|
||
<!-- Notes： -->
|
||
<el-form-item label="年龄" prop="it_6" class="item-style">
|
||
<el-input placeholder="请输入年龄" clearable class="item-width">
|
||
<template #append>岁</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<!-- Notes： -->
|
||
<el-form-item label="检查设备" prop="deviceId" class="item-style">
|
||
<el-select
|
||
v-model="deviceInfo"
|
||
value-key="deviceId"
|
||
placeholder="请选择检查设备"
|
||
clearable
|
||
class="item-width"
|
||
@change="deviceInfo_change"
|
||
>
|
||
<el-option
|
||
v-for="item in deviceList"
|
||
:key="item.deviceId"
|
||
:label="item.deviceName"
|
||
:value="item"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<!-- Notes： -->
|
||
<el-form-item label="开单科室" prop="billDoctorDepartment" class="item-style">
|
||
<el-select
|
||
v-model="infoParams.billDoctorDepartment"
|
||
placeholder="请选择开单科室"
|
||
clearable
|
||
class="item-width"
|
||
>
|
||
<el-option
|
||
v-for="item in departmentList"
|
||
:key="item.departmentCode"
|
||
:label="item.departmentName"
|
||
:value="item.departmentName"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<!-- Notes： -->
|
||
<el-form-item label="开单医生" prop="billgDoctor" class="item-style">
|
||
<el-select
|
||
v-model="infoParams.billgDoctor"
|
||
placeholder="请选择开单医生"
|
||
clearable
|
||
class="item-width"
|
||
>
|
||
<el-option
|
||
v-for="item in doctorList"
|
||
:key="item.doctorID"
|
||
:label="item.doctorName"
|
||
:value="item.doctorName"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="13">
|
||
<!-- Notes： -->
|
||
<el-form-item label="开单时间" prop="regDate" class="item-style date-picker">
|
||
<el-date-picker
|
||
v-model="infoParams.regDate"
|
||
type="datetime"
|
||
value-format="x"
|
||
placeholder="请选择开单时间"
|
||
class="item-width"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="11" v-if="false">
|
||
<!-- Notes： -->
|
||
<el-form-item label="床号" prop="it_12" class="item-style">
|
||
<el-input placeholder="请输入床号" clearable class="item-width" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row v-if="false">
|
||
<el-col :span="24">
|
||
<!-- Notes： -->
|
||
<el-form-item label="诊断" prop="it_14" class="item-style">
|
||
<el-input
|
||
placeholder="请输入诊断"
|
||
type="textarea"
|
||
:autosize="{ minRows: 4 }"
|
||
class="item-width"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<!-- Notes： -->
|
||
<el-form-item label="备注" prop="remark" class="item-style">
|
||
<el-input
|
||
v-model="infoParams.remark"
|
||
placeholder="请输入备注"
|
||
type="textarea"
|
||
:autosize="{ minRows: 7 }"
|
||
class="item-width"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<el-row>
|
||
<el-col
|
||
:span="24"
|
||
style="text-align: center; margin-left: 8px; margin-top: 16px; margin-bottom: 10px"
|
||
>
|
||
<el-button type="primary" size="small" v-show="btnAdd_show" @click="btnAdd_click">
|
||
<Icon icon="ep:plus" class="mr-10px" /> 新增
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
size="small"
|
||
v-show="btnSubmit_show"
|
||
@click="btnSubmit_click"
|
||
>
|
||
<Icon icon="ep:check" class="mr-10px" /> 保存
|
||
</el-button>
|
||
<el-button
|
||
type="default"
|
||
size="small"
|
||
v-show="btnCancel_show"
|
||
@click="btnCancel_click"
|
||
>
|
||
<Icon icon="ep:close" class="mr-10px" /> 取消
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
</el-col>
|
||
|
||
<el-col :span="14">
|
||
<el-card shadow="never" class="card-right ml-2">
|
||
<el-scrollbar>
|
||
<el-checkbox-group
|
||
v-model="infoParams.examItems"
|
||
v-loading="formLoading"
|
||
:disabled="infoFormRef_disabled"
|
||
style="
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-wrap: wrap;
|
||
min-height: 410px;
|
||
height: 64vh;
|
||
"
|
||
>
|
||
<el-checkbox
|
||
v-for="item in examitemsList"
|
||
:key="item.examItemCode"
|
||
:label="item.examItemName"
|
||
:value="{ examItemCode: item.examItemCode, examItemName: item.examItemName }"
|
||
style="margin-right: 15px; margin-bottom: -8px"
|
||
/>
|
||
</el-checkbox-group>
|
||
</el-scrollbar>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { formatDate, dateFormatter } from '@/utils/formatTime'
|
||
import { ReservationInfoApi } from '@/api/applyregistration/reservationInfo'
|
||
|
||
defineOptions({ name: 'ReservationInfo' })
|
||
/*
|
||
* 李传洋
|
||
* 预约登记
|
||
**/
|
||
/** 导入内容 **/
|
||
|
||
/** 组件引用 **/
|
||
const infoFormRef = ref()
|
||
|
||
/** 数据结构 **/
|
||
const message = useMessage()
|
||
const { t } = useI18n()
|
||
const formLoading = ref(false)
|
||
const examitemsList = ref<any[]>([])
|
||
const doctorList = ref<any[]>([])
|
||
const deviceList = ref<any[]>([])
|
||
const departmentList = ref<any[]>([])
|
||
//表单核心
|
||
const infoFormRef_disabled = ref(true)
|
||
const btnAdd_show = ref(true)
|
||
const btnSubmit_show = ref(false)
|
||
const btnCancel_show = ref(false)
|
||
const infoParams0 = ref({
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
doctorName: undefined,
|
||
departmentName: undefined
|
||
})
|
||
const infoParams = ref({
|
||
/** 测试数据 **/
|
||
regId: '',
|
||
regSource: '',
|
||
examIdBase: '',
|
||
pname: '',
|
||
gender: '',
|
||
contactTel: '',
|
||
birthday: '',
|
||
deviceId: '',
|
||
deviceName: '',
|
||
billDoctorDepartment: '',
|
||
billgDoctor: '',
|
||
regDate: '',
|
||
remark: '',
|
||
examItems: []
|
||
})
|
||
const deviceInfo = ref<any>()
|
||
const examIdFirst = ref('')
|
||
|
||
/****** 自定义内容 ******/
|
||
const resetInfoForm = async () => {
|
||
infoParams.value = {
|
||
/** 测试数据 **/
|
||
regId: '',
|
||
regSource: '',
|
||
examIdBase: '',
|
||
pname: '',
|
||
gender: '',
|
||
contactTel: '',
|
||
birthday: '',
|
||
deviceId: '',
|
||
deviceName: '',
|
||
billDoctorDepartment: '',
|
||
billgDoctor: '',
|
||
regDate: '',
|
||
remark: '',
|
||
examItems: []
|
||
}
|
||
deviceInfo.value = undefined
|
||
examIdFirst.value = ''
|
||
infoFormRef.value?.clearValidate()
|
||
}
|
||
|
||
/****** 可参考内容 ******/
|
||
|
||
/** 组件事件 **/
|
||
const deviceInfo_change = async (value: any) => {
|
||
infoParams.value.deviceId = value ? value.deviceId : ''
|
||
infoParams.value.deviceName = value ? value.deviceName : ''
|
||
}
|
||
|
||
const btnAdd_click = async () => {
|
||
try {
|
||
resetInfoForm()
|
||
infoParams.value.examIdBase = formatDate(new Date(), 'YYYYMMDDHHmmssSSS') + '_'
|
||
examIdFirst.value = infoParams.value.examIdBase + '1'
|
||
btnAdd_show.value = false
|
||
btnSubmit_show.value = true
|
||
btnCancel_show.value = true
|
||
infoFormRef_disabled.value = false
|
||
} finally {
|
||
}
|
||
}
|
||
|
||
const btnSubmit_click = async () => {
|
||
formLoading.value = true
|
||
try {
|
||
const data = infoParams.value
|
||
console.log('-----------------------')
|
||
console.log(data)
|
||
//校验
|
||
if (!data.regId) {
|
||
await message.alertWarning('请输入登记号')
|
||
return
|
||
}
|
||
if (!data.regSource) {
|
||
await message.alertWarning('请选择患者来源')
|
||
return
|
||
}
|
||
if (!data.pname) {
|
||
await message.alertWarning('请输入姓名')
|
||
return
|
||
}
|
||
if (!data.gender) {
|
||
await message.alertWarning('请选择性别')
|
||
return
|
||
}
|
||
if (!data.contactTel) {
|
||
await message.alertWarning('请输入联系电话')
|
||
return
|
||
}
|
||
if (!data.birthday) {
|
||
await message.alertWarning('请选择出生日期')
|
||
return
|
||
}
|
||
if (!data.deviceId || !deviceInfo.value) {
|
||
await message.alertWarning('请选择检查设备')
|
||
return
|
||
}
|
||
if (!data.billDoctorDepartment) {
|
||
await message.alertWarning('请选择开单科室')
|
||
return
|
||
}
|
||
if (!data.billgDoctor) {
|
||
await message.alertWarning('请选择开单医生')
|
||
return
|
||
}
|
||
if (!data.regDate) {
|
||
await message.alertWarning('请选择开单时间')
|
||
return
|
||
}
|
||
if (!data.examItems || !Array.isArray(data.examItems) || data.examItems.length <= 0) {
|
||
await message.alertWarning('请选择右侧检查项目')
|
||
return
|
||
}
|
||
//更新
|
||
await ReservationInfoApi.create(data)
|
||
message.success(t('common.createSuccess'))
|
||
btnAdd_click()
|
||
} finally {
|
||
formLoading.value = false
|
||
}
|
||
}
|
||
|
||
const btnCancel_click = async () => {
|
||
try {
|
||
await message.confirm('确认取消本次新增操作')
|
||
resetInfoForm()
|
||
btnAdd_show.value = true
|
||
btnSubmit_show.value = false
|
||
btnCancel_show.value = false
|
||
infoFormRef_disabled.value = true
|
||
} finally {
|
||
}
|
||
}
|
||
|
||
/** 钩子方法 **/
|
||
onMounted(async () => {
|
||
examitemsList.value = await ReservationInfoApi.getExamitemsList()
|
||
doctorList.value = await ReservationInfoApi.getDoctorList()
|
||
deviceList.value = await ReservationInfoApi.getDeviceList()
|
||
departmentList.value = await ReservationInfoApi.getDepartmentList()
|
||
})
|
||
|
||
/** 防空作用域 **/
|
||
console.log(dateFormatter)
|
||
console.log(t)
|
||
console.log(infoParams0)
|
||
//console.log(null)
|
||
|
||
/** 导出内容 **/
|
||
/**
|
||
* 备注：
|
||
*
|
||
* **/
|
||
</script>
|
||
|
||
<style scoped>
|
||
.el-form-item__label {
|
||
white-space: nowrap;
|
||
}
|
||
.card-right {
|
||
height: 100%;
|
||
}
|
||
|
||
.item-style {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.item-width {
|
||
width: 100%;
|
||
}
|
||
|
||
.date-picker :deep(.item-width) {
|
||
width: 100%;
|
||
}
|
||
|
||
.radio-group {
|
||
border: 1px solid #ececec;
|
||
}
|
||
</style>
|