输血申请布局优化

This commit is contained in:
wuyy 2026-07-16 18:09:10 +08:00
parent 8eab570b75
commit 99e2bf5446
2 changed files with 509 additions and 108 deletions

View File

@ -26,7 +26,8 @@
<div class="main-content">
<!-- 左侧区域 占2份left-wrap -->
<div class="left-wrap">
<el-form ref="formRef" label-width="auto" size="small" class="blood-transfusion-form"
<el-form ref="formRef" label-width="auto" size="small" class="blood-transfusion-form" :model="xkTransfuseApply"
:rules="formRules" :show-message="false"
:disabled="xkTransfuseApply.bill_stasus && xkTransfuseApply.bill_stasus != 'A'">
<div class="card-box base-info-card">
<div class="section-title">
@ -102,9 +103,17 @@
</el-form-item>
</el-col>
<el-col :span="18">
<el-form-item label="申请类型" prop="apply_type">
<el-radio-group v-model="xkTransfuseApply.apply_type">
<el-radio v-for="v in dictData.sqlx" :value="v.value">{{ v.label }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="申请日期" prop="apply_date">
<el-date-picker v-model="formData.apply_date" type="datetime" style="width:100%"
<el-date-picker v-model="xkTransfuseApply.apply_date" type="datetime" style="width:100%"
value-format="YYYY-MM-DD HH:mm:ss" />
</el-form-item>
</el-col>
@ -114,24 +123,24 @@
placeholder="" :disabled="xkTransfuseApply.bill_stasus && xkTransfuseApply.bill_stasus != 'A'" />
</el-form-item>
</el-col>
<el-col :span="5">
<el-col :span="6">
<el-form-item label="主治医师" prop="attending_medic">
<SelectTable v-model:data="xkTransfuseApply.attending_medic" :tableData="userList" size="small"
placeholder="" :disabled="xkTransfuseApply.bill_stasus && xkTransfuseApply.bill_stasus != 'A'" />
</el-form-item>
</el-col>
<el-col :span="17">
<el-form-item label="申请类型" prop="apply_type">
<el-radio-group v-model="xkTransfuseApply.apply_type">
<el-radio v-for="v in dictData.sqlx" :value="v.value">{{ v.label }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="6">
<el-checkbox v-model="xkTransfuseApply.agreement_ink" true-value="Y"
false-value="N">病人/病人家属是否签署输血同意书</el-checkbox>
</el-col>
<el-col :span="6">
<el-form-item label="预定输血日期" prop="use1_date">
<el-date-picker v-model="xkTransfuseApply.use1_date" type="datetime" placeholder="选择日期"
value-format="YYYY-MM-DD HH:mm:ss" />
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="单据类型" prop="bill_type">
<el-select v-model="xkTransfuseApply.bill_type">
@ -140,12 +149,6 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="预定输血日期" prop="use1_date">
<el-date-picker v-model="xkTransfuseApply.use1_date" type="datetime" placeholder="选择日期"
value-format="YYYY-MM-DD HH:mm:ss" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="科室类型" prop="dept_Type">
<el-select v-model="xkTransfuseApply.dept_Type" placeholder="" style="width:50%" clearable
@ -188,26 +191,24 @@
:disabled="xkTransfuseApply.bill_stasus && xkTransfuseApply.bill_stasus != 'A'" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-form-item label="输血史:" prop="transfuse_history">
<el-radio-group v-model="xkPatientInfo.transfuse_history">
<el-radio-group v-model="xkTransfuseApply.transfuse_history">
<el-radio value="Y">有</el-radio>
<el-radio value="N">无</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="反应史:" prop="reaction_history" label-width="80px">
<el-radio-group v-model="xkPatientInfo.reaction_history">
<el-radio-group v-model="xkTransfuseApply.reaction_history">
<el-radio value="Y">有</el-radio>
<el-radio value="N">无</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="移植配型史:" prop="match_history" label-width="100px">
<el-radio-group v-model="xkPatientInfo.match_history">
<el-radio-group v-model="xkTransfuseApply.match_history">
<el-radio value="Y">有</el-radio>
<el-radio value="N">无</el-radio>
</el-radio-group>
@ -215,7 +216,7 @@
<el-form-item label="妊娠史:" prop="gestation_history" label-width="80px">
<el-radio-group v-model="xkPatientInfo.gestation_history"
<el-radio-group v-model="xkTransfuseApply.gestation_history"
:disabled="xkPatientInfo.patient_sex == '男' || (xkTransfuseApply.bill_stasus && xkTransfuseApply.bill_stasus != 'A')">
<el-radio value="Y">有</el-radio>
<el-radio value="N">无</el-radio>
@ -223,7 +224,7 @@
</el-form-item>
<el-form-item label="分娩史:" prop="parturition_history" label-width="80px">
<el-radio-group v-model="xkPatientInfo.parturition_history"
<el-radio-group v-model="xkTransfuseApply.parturition_history"
:disabled="xkPatientInfo.patient_sex == '男' || (xkTransfuseApply.bill_stasus && xkTransfuseApply.bill_stasus != 'A')">
<el-radio value="Y">有</el-radio>
<el-radio value="N">无</el-radio>
@ -366,7 +367,8 @@
</div>
<!-- 血液品种编辑弹窗 -->
<el-dialog v-model="bloodDialogVisible" title="血液品种信息" width="600px" @close="resetBloodForm">
<el-dialog v-model="bloodDialogVisible" title="血液品种信息" width="600px" :close-on-click-modal="false"
@close="resetBloodForm">
<el-form ref="bloodFormRef" :model="bloodForm" label-width="100px" :rules="bloodFormRules">
<el-row :gutter="10">
<el-col :span="12">
@ -378,12 +380,30 @@
</el-col>
<el-col :span="12">
<el-form-item label="申请血量" prop="blood_num">
<el-input v-model="bloodForm.blood_num" type="number" />
<el-input v-model="bloodForm.blood_num" type="number">
<template #suffix>
<div>
{{ bloodForm.unit }}
</div>
</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="单位" prop="unit">
<el-input v-model="bloodForm.unit" disabled />
<!-- <el-col :span="4">
<el-input v-model="bloodForm.unit" disabled />
</el-col> -->
<el-col :span="24">
<el-form-item label="输血目的" prop="intent">
<el-select v-model="bloodForm.intent" placeholder="">
<el-option v-for="item in dictData.sxmd" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="输血指征" prop="causalis">
<el-select v-model="bloodForm.causalis" placeholder="">
<el-option v-for="item in dictData.sxzz" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
@ -398,20 +418,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="输血目的" prop="intent">
<el-select v-model="bloodForm.intent" placeholder="">
<el-option v-for="item in dictData.sxmd" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="输血指征" prop="causalis">
<el-select v-model="bloodForm.causalis" placeholder="">
<el-option v-for="item in dictData.sxzz" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="特殊处理" prop="special_deal">
<el-input v-model="bloodForm.special_deal" placeholder="请输入特殊处理" />
@ -635,16 +642,23 @@ const dictList = ref([
{ label: '字典', prop: 'label' }
])
const formData = ref({
apply_date: '',
}) //申请单信息
const xkPatientInfo = ref({}) //病人信息
const xkTransfuseApply = ref({
agreement_ink: 'Y',
bill_type: '正常',
apply_type: '001'
apply_type: '001',
apply_date: '',
apply_medic: userInfo.name
}) //输血申请信息
const formRef = useTemplateRef('formRef')
const formRules = reactive({
assess_bill_no: [{ required: true, message: '请选择评估单', trigger: 'change' }],
apply_type: [{ required: true, message: '请选择申请类型', trigger: 'change' }],
use1_date: [{ required: true, message: '请选择预定输血日期', trigger: 'change' }],
dept_Type: [{ required: true, message: '请选择科室类型', trigger: 'change' }],
})
// 根据单据状态获取单元格样式(背景色+白色文字)
const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
if (column.label == '单据状态') {
@ -687,13 +701,19 @@ const bloodFormRules = reactive({
validator: (rule: any, value: number, callback: Function) => {
if (value <= 0) {
callback(new Error('申请血量必须大于0'))
} else if (bloodForm.unit == 'ml' && value < 25) {
callback(new Error('申请血量必须大于等于25ml'))
} else if (bloodForm.unit == 'u' && value > 25) {
callback(new Error('申请血量必须小于25'))
} else {
callback()
}
},
trigger: 'blur'
}
]
],
intent: [{ required: true, message: '请选择输血目的', trigger: 'change' }],
causalis: [{ required: true, message: '请选择输血指征', trigger: 'change' }],
})
//流程节点
@ -804,14 +824,17 @@ const addHandle = () => {
xkTransfuseApply.value = {
agreement_ink: 'Y',
bill_type: '正常',
apply_type: '001'
}
bloodList.value = []
formData.value = {
apply_type: '001',
assess_bill_no: ''
}
bloodList.value = []
getServerTime().then(time => {
formData.value.apply_date = time
xkTransfuseApply.value.apply_date = time
xkTransfuseApply.value.use1_date = time
nextTick(() => {
formRef.value?.clearValidate()
})
})
getLisProject()
}
@ -955,6 +978,7 @@ const goHistoryBlood = () => {
const openBloodDialog = () => {
editIndex.value = -1
resetBloodForm()
bloodForm.apply_bloodtype = xkPatientInfo.value.abo
bloodDialogVisible.value = true
}
@ -1023,70 +1047,75 @@ const blHandle = () => {
//保存申请单
const handleSubmit = async () => {
if (!bloodList.value.length) return ElMessage.error('请添加血液品种')
// 申请类型 003 || 002 手术信息必填校验
if (xkTransfuseApply.value.apply_type === '003' || xkTransfuseApply.value.apply_type === '002') {
if (!xkTransfuseApply.value.operation_name || !xkTransfuseApply.value.operation_level) {
return ElMessage.error('请完善手术名称、级别信息')
}
}
saveLoading.value = true
const tempPatient = { ...xkPatientInfo.value, beinhos_id: xkTransfuseApply.value.beinhos_id }
formRef.value.validate((valid) => {
if (valid) {
if (!bloodList.value.length) return ElMessage.error('请添加血液品种')
// 申请类型 003 || 002 手术信息必填校验
if (xkTransfuseApply.value.apply_type === '003' || xkTransfuseApply.value.apply_type === '002') {
if (!xkTransfuseApply.value.operation_name || !xkTransfuseApply.value.operation_level) {
return ElMessage.error('请完善手术名称、级别信息')
}
}
saveLoading.value = true
const tempPatient = { ...xkPatientInfo.value, beinhos_id: xkTransfuseApply.value.beinhos_id }
const data = {
transfuseApplyInfoOne: {
xkPatientInfo: tempPatient,
xkTransfuseApply: xkTransfuseApply.value
},
xkTransfuseApplyBloodbreedList: bloodList.value,
xkTransfuseApplyTestitemList: lisProject.value,
}
const data = {
transfuseApplyInfoOne: {
xkPatientInfo: tempPatient,
xkTransfuseApply: xkTransfuseApply.value
},
xkTransfuseApplyBloodbreedList: bloodList.value,
xkTransfuseApplyTestitemList: lisProject.value,
}
checkSelfBlood({ beinhos_id: xkTransfuseApply.value.beinhos_id }).then((res) => {
if (res.code == 0) {
checkCausalis(data).then((res1) => {
if (res1.code == 0) {
savePreApplyInfo(data).then((res2) => {
if (res2.code == 0) {
saveApplyInfo(data).then((res3) => {
if (res3.code == 0) {
ElMessage.success('保存成功')
checkSelfBlood({ beinhos_id: xkTransfuseApply.value.beinhos_id }).then((res) => {
if (res.code == 0) {
checkCausalis(data).then((res1) => {
if (res1.code == 0) {
savePreApplyInfo(data).then((res2) => {
if (res2.code == 0) {
saveApplyInfo(data).then((res3) => {
if (res3.code == 0) {
ElMessage.success('保存成功')
getSqdList()
}
})
} else if (res2.code == 1) {
getSqdList()
ElMessage.success(res2.msg)
} else if (res2.code == 2) {
//2 弹窗提示
ElMessageBox.confirm(res2.msg, '提示',
{
confirmButtonText: '是',
cancelButtonText: '否',
type: 'warning',
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
}
).then(() => {
getQueryOneInfo(res2.data)
}).catch(() => {
saveApplyInfo(data).then((res3) => {
if (res3.code == 0) {
getSqdList()
ElMessage.success('保存成功')
}
})
})
}
})
} else if (res2.code == 1) {
getSqdList()
ElMessage.success(res2.msg)
} else if (res2.code == 2) {
//2 弹窗提示
ElMessageBox.confirm(res2.msg, '提示',
{
confirmButtonText: '是',
cancelButtonText: '否',
type: 'warning',
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
}
).then(() => {
getQueryOneInfo(res2.data)
}).catch(() => {
saveApplyInfo(data).then((res3) => {
if (res3.code == 0) {
getSqdList()
ElMessage.success('保存成功')
}
})
})
}
})
}
}).finally(() => {
saveLoading.value = false
})
} else {
ElMessage.error('请完善必填信息')
}
}).finally(() => {
saveLoading.value = false
})
}
//获取申请单信息
const getQueryOneInfo = (bill_no: string) => {
@ -1094,7 +1123,6 @@ const getQueryOneInfo = (bill_no: string) => {
xkPatientInfo.value = res.data.transfuseApplyInfoOne.xkPatientInfo
xkTransfuseApply.value = res.data.transfuseApplyInfoOne.xkTransfuseApply
bloodList.value = res.data.xkTransfuseApplyBloodbreedList
formData.value = res.data.transfuseApplyInfoOne.xkTransfuseApply
lisProject.value = res.data.xkTransfuseApplyTestitemList.map(item => {
return {
bill_no: item.bill_no,
@ -1115,7 +1143,6 @@ const getInfo = (billNo) => {
xkPatientInfo.value = res.data.transfuseApplyInfoOne.xkPatientInfo
xkTransfuseApply.value = res.data.transfuseApplyInfoOne.xkTransfuseApply
bloodList.value = res.data.xkTransfuseApplyBloodbreedList || []
formData.value = res.data.transfuseApplyInfoOne.xkTransfuseApply
lisProject.value = res.data.xkTransfuseApplyTestitemList.map(item => {
return {
bill_no: item.bill_no,
@ -1210,7 +1237,8 @@ const getSxList = () => {
onMounted(() => {
loadAllDict()
getServerTime().then(time => {
formData.value.apply_date = time
xkTransfuseApply.value.apply_date = time
xkTransfuseApply.value.use1_date = time
})
getSxList()
getDictData('sqdzfyy', 'rhtype', 'abotype', 'nldw', 'billApplyStatus', 'sd', 'ks', 'depttype', 'bq', 'sxmd', 'sxzz', 'test_result', 'sqlx', 'lczd', 'xylx', 'operatype', 'nooperatype')

View File

@ -0,0 +1,373 @@
/**
* @file index.vue
* @description: 储存室自体血登记
* @author: w
* @since: 2026-07-08
*/
<template>
<div class="box-container">
<div class="card-box">
<el-button type="primary" plain>检索</el-button>
<el-button type="primary" plain>新增单据</el-button>
<el-button type="danger" plain>删除单据</el-button>
<el-button plain>作废</el-button>
<el-button type="success" plain>保存</el-button>
<el-button type="warning" plain>审核</el-button>
<el-button type="warning" plain>打印</el-button>
<el-button plain>反审核</el-button>
</div>
<el-form label-width="auto" class="form-container">
<div class="card-box">
<el-row :gutter="20" class="top-row">
<el-col :span="4">
<el-form-item class="compact-item" label="申请单号">
<el-input v-model="formData.applyNo" />
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item class="compact-item" label="申请日期">
<el-date-picker v-model="formData.applyDate" type="datetime" placeholder="选择日期" style="width:100%"
value-format="YYYY-MM-DD HH:mm:ss" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item class="compact-item" label="申请医师">
<el-input v-model="formData.applyDoctor" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item class="compact-item" label="主治医师">
<el-input v-model="formData.attendingDoctor" />
</el-form-item>
</el-col>
</el-row>
</div>
<div class="section form-body">
<el-row :gutter="20">
<el-col :span="16">
<div class="section-title">患者信息</div>
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="住院号/ID号">
<el-input v-model="formData.patientId" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="姓 名">
<el-input v-model="formData.patientName" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="血 型">
<el-input v-model="formData.abo" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="Rh(D)">
<el-input v-model="formData.rh" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="性 别">
<el-select v-model="formData.patientSex" placeholder="">
<el-option label="男" value="男" />
<el-option label="女" value="女" />
<el-option label="未知" value="未知" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="年 龄">
<div class="age-group">
<el-input v-model="formData.age" />
<el-input v-model="formData.ageUnit" class="age-unit" disabled />
</div>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="属 地">
<el-input v-model="formData.apanage" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="病 区">
<el-input v-model="formData.zone" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="科 室">
<el-input v-model="formData.dept" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="床 号">
<el-input v-model="formData.bedNo" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="禁 忌 症">
<el-input v-model="formData.contraindications" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="临床诊断">
<el-input v-model="formData.diagnoses" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="治 疗 目 的">
<el-input v-model="formData.treatmentPurpose" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20" class="checkbox-row">
<el-col :span="6">
<el-checkbox v-model="formData.transfusionHistory" true-value="Y" false-value="N">输血史</el-checkbox>
</el-col>
<el-col :span="6">
<el-checkbox v-model="formData.matchHistory" true-value="Y" false-value="N">配型史</el-checkbox>
</el-col>
<el-col :span="6">
<el-checkbox v-model="formData.pregnancyHistory" true-value="Y" false-value="N">妊娠史</el-checkbox>
</el-col>
<el-col :span="6">
<el-checkbox v-model="formData.deliveryHistory" true-value="Y" false-value="N">分娩史</el-checkbox>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="备 注">
<el-input v-model="formData.remark" />
</el-form-item>
</el-col>
</el-row>
</el-col>
<el-col :span="8">
<div class="treatment-card">
<div class="section-title treatment-title">
<span>治疗项目</span>
<span class="status-oval">未审核</span>
</div>
<el-form-item label="治 疗 项 目">
<el-input v-model="formData.treatmentProject" />
</el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="采 血 量">
<div class="input-with-unit">
<el-input v-model="formData.collectVolume" type="number" />
<span class="unit">ml</span>
</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="治 疗 量">
<div class="input-with-unit">
<el-input v-model="formData.treatVolume" type="number" />
<span class="unit">ml</span>
</div>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="制 备 方 法">
<el-input v-model="formData.prepareMode" />
</el-form-item>
<el-form-item label="预约治疗时间">
<el-date-picker v-model="formData.appointmentTime" type="datetime" placeholder="选择日期" style="width:100%"
value-format="YYYY-MM-DD HH:mm:ss" />
</el-form-item>
</div>
</el-col>
</el-row>
</div>
<div class="section">
<div class="section-title">病人最近检查结果</div>
<div class="check-table">
<PatientLisTable v-model:lis-list="lisProject" />
</div>
</div>
</el-form>
</div>
</template>
<script setup lang="ts">
import PatientLisTable from '../components/PatientLisTable.vue'
const formData = reactive({
applyNo: '',
applyDate: '',
applyDoctor: '',
attendingDoctor: '',
patientId: '',
patientName: '',
abo: '',
patientSex: '',
age: '',
ageUnit: '岁',
apanage: '',
dept: '',
zone: '',
bedNo: '',
rh: '',
diagnoses: '',
contraindications: '无',
treatmentPurpose: '',
remark: '',
transfusionHistory: 'N',
matchHistory: 'N',
pregnancyHistory: 'N',
deliveryHistory: 'N',
treatmentProject: '',
collectVolume: '',
treatVolume: '',
prepareMode: '',
appointmentTime: ''
})
const lisProject = ref<any[]>([])
onMounted(() => {
lisProject.value = [
{ item_name: 'HGB', item_result: '', item_unit: 'g/L', validTime: '' },
{ item_name: 'ALT', item_result: '', item_unit: 'U/L', validTime: '' },
{ item_name: 'Anti-HCV', item_result: '', item_unit: '', validTime: '' },
{ item_name: 'APTT', item_result: '', item_unit: '秒', validTime: '' },
{ item_name: 'HCT', item_result: '', item_unit: '%', validTime: '' },
{ item_name: 'HBsAg', item_result: '', item_unit: '', validTime: '' },
{ item_name: 'Anti-HIV', item_result: '', item_unit: '', validTime: '' },
{ item_name: 'FIB', item_result: '', item_unit: 'g/L', validTime: '' },
{ item_name: 'PLT', item_result: '', item_unit: '×10⁹/L', validTime: '' },
{ item_name: 'TR', item_result: '', item_unit: '', validTime: '' },
{ item_name: 'PT', item_result: '', item_unit: '秒', validTime: '' },
{ item_name: 'INR', item_result: '', item_unit: '', validTime: '' }
]
})
</script>
<style scoped lang="scss">
.box-container {
display: flex;
flex-direction: column;
}
.form-container {
display: flex;
flex-direction: column;
gap: 10px;
.el-form-item {
margin-bottom: 6px;
}
}
.section {
width: 100%;
}
.section {
background: #fff;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
padding: 14px 18px;
}
.top-row {
.el-form-item {
margin-bottom: 0;
}
}
.treatment-card {
border: 1px solid #dfe6ec;
border-radius: 4px;
padding: 12px;
background: #f9fbff;
}
.treatment-title {
display: flex;
justify-content: space-between;
align-items: center;
}
.status-oval {
display: inline-flex;
align-items: center;
justify-content: center;
width: 90px;
height: 40px;
border: 2px solid #999;
border-radius: 50px;
color: #333;
background: #f9fafb;
font-size: 12px;
}
.age-group {
display: flex;
align-items: center;
gap: 8px;
}
.age-unit {
width: 70px;
}
.checkbox-row {
padding-top: 8px;
}
.checkbox-row .el-checkbox {
line-height: 32px;
}
.input-with-unit {
position: relative;
}
.input-with-unit .el-input {
width: 100%;
}
.input-with-unit .unit {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: #909399;
font-size: 12px;
pointer-events: none;
}
.check-table {
min-height: 260px;
}
.el-form-item {
margin-bottom: 10px;
}
.el-form-item__label {
font-weight: 600;
}
</style>