jiangs/blood_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
blood_vue/src/views/doctor/application/index.vue

733 lines
25 KiB
Vue
Raw Normal View History

界面调整
2026-06-09 18:00:10 +08:00
<template>
<div class="app-container">
代码字典
2026-06-12 18:01:21 +08:00
<!-- 顶部工具栏 -->
<div class="toolbar">
<el-button type="primary" plain>新增</el-button>
<el-button type="danger" plain>删除</el-button>
<el-button type="success" plain>保存</el-button>
<el-button>电子病历</el-button>
<el-button>审核</el-button>
<el-button>取消审核</el-button>
<el-button>作废</el-button>
<el-button type="warning" plain>打印输血申请单</el-button>
<el-button>患者输血历史</el-button>
<el-button type="warning" plain>打印大量输血审批单</el-button>
<el-button type="warning" plain>打印输血知情同意书</el-button>
界面调整
2026-06-09 18:00:10 +08:00
</div>
代码字典
2026-06-12 18:01:21 +08:00
<!-- 主体区域 左2 : 右1 -->
界面调整
2026-06-09 18:00:10 +08:00
<div class="main-content">
代码字典
2026-06-12 18:01:21 +08:00
<!-- 左侧区域 占2份 -->
<div class="left-wrap">
<!-- 包裹整个表单内容 -->
<el-form ref="formRef" :model="formData" label-width="auto" size="small" class="blood-transfusion-form">
<!-- 申请信息 -->
<div class="box-item">
<div class="box-title">申请信息</div>
<el-row>
<el-col :span="6">
<el-form-item label="申请单号" prop="applyNo">
<el-input v-model="formData.applyNo" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="申请日期" prop="applyDate">
<el-date-picker v-model="formData.applyDate" type="datetime" style="width:100%" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="申请医师" prop="applyDoctor">
<el-input v-model="formData.applyDoctor" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="主治医师" prop="attendingDoctor">
<el-input v-model="formData.attendingDoctor" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="上级医师" prop="superiorDoctor">
<el-input v-model="formData.superiorDoctor" />
</el-form-item>
</el-col>
</el-row>
界面调整
2026-06-09 18:00:10 +08:00
</div>
代码字典
2026-06-12 18:01:21 +08:00
<!-- 患者信息 -->
<div class="box-item">
<div class="box-title">患者信息</div>
<el-row :gutter="10">
<el-col :span="6">
<el-form-item label="住院号/ID号" prop="hospitalNo">
<el-input v-model="formData.hospitalNo" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="姓名" prop="name">
<el-input v-model="formData.name" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="性别" prop="gender">
<el-input v-model="formData.gender" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="血型" prop="bloodType">
<el-input v-model="formData.bloodType" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="年龄" prop="age">
<el-input v-model="formData.age" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="科室" prop="dept">
<el-input v-model="formData.dept" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="病区" prop="ward">
<el-input v-model="formData.ward" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="Rh(D)" prop="rhd">
<el-input v-model="formData.rhd" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="床位号" prop="bedNo">
<el-input v-model="formData.bedNo" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="科室类型" prop="deptType">
<el-input v-model="formData.deptType" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="单病种" prop="singleDisease">
<el-input v-model="formData.singleDisease" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="临床诊断" prop="diagnosis">
<el-input v-model="formData.diagnosis" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="输血目的" prop="transPurpose">
<el-select v-model="formData.transPurpose" style="width:100%">
<el-option label="选项1" value="1" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="输血指征" prop="transIndication">
<el-select v-model="formData.transIndication" style="width:100%">
<el-option label="选项1" value="1" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="手术名称" prop="operationName">
<el-input v-model="formData.operationName" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="手术级别" prop="operationLevel">
<el-input v-model="formData.operationLevel" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="" prop="signedConsent">
<el-checkbox v-model="formData.signedConsent">病人/病人家属是否签署输血同意书</el-checkbox>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="输血史" prop="hasTransfusionHistory">
<el-radio-group v-model="formData.hasTransfusionHistory">
<el-radio :value="1">有</el-radio>
<el-radio :value="0">无</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="反应史" prop="hasReactionHistory">
<el-radio-group v-model="formData.hasReactionHistory">
<el-radio :value="1">有</el-radio>
<el-radio :value="0">无</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="移植配型史" prop="hasTransplantHistory">
<el-radio-group v-model="formData.hasTransplantHistory">
<el-radio :value="1">有</el-radio>
<el-radio :value="0">无</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="妊娠史" prop="hasPregnancyHistory">
<el-radio-group v-model="formData.hasPregnancyHistory">
<el-radio :value="1">有</el-radio>
<el-radio :value="0">无</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="分娩史" prop="hasDeliveryHistory">
<el-radio-group v-model="formData.hasDeliveryHistory">
<el-radio :value="1">有</el-radio>
<el-radio :value="0">无</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="申请类型" prop="hasDeliveryHistory">
<el-radio-group v-model="formData.applyType">
<el-radio :value="1">常规用血</el-radio>
<el-radio :value="2">手术备血</el-radio>
<el-radio :value="3">紧急</el-radio>
<el-radio :value="4">大量</el-radio>
<el-radio :value="5">紧急非同型</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="单据类型" prop="type">
<el-select v-model="formData.type">
<el-option label="选项1" value="1" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="预定输血日期" prop="preTransfusionDate">
<el-date-picker v-model="formData.preTransfusionDate" type="date" placeholder="选择日期" />
</el-form-item>
</el-col>
</el-row>
界面调整
2026-06-09 18:00:10 +08:00
</div>
代码字典
2026-06-12 18:01:21 +08:00
<!-- 检查结果（添加单位后缀） -->
<div class="box-item">
<div class="box-title">患者最近检查结果</div>
<el-row :gutter="10">
<el-col :span="6">
<el-form-item label="HGB" prop="hgb">
<el-input v-model="formData.hgb">
<template #suffix>g/L</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="HCT" prop="hct">
<el-input v-model="formData.hct">
<template #suffix>%</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="PLT" prop="plt">
<el-input v-model="formData.plt">
<template #suffix>×10^9/L</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="ALT" prop="alt">
<el-input v-model="formData.alt">
<template #suffix>U/L</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="HBsAg" prop="hbsag">
<el-input v-model="formData.hbsag">
<template #suffix>ng/ml</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="TP" prop="tp">
<el-input v-model="formData.tp">
<template #suffix>g/L</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="Anti-HCV" prop="antiHcv">
<el-input v-model="formData.antiHcv">
<template #suffix>S/CO</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="Anti-HIV" prop="antiHiv">
<el-input v-model="formData.antiHiv">
<template #suffix>S/CO</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="PT" prop="pt">
<el-input v-model="formData.pt">
<template #suffix>秒</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="APTT" prop="aptt">
<el-input v-model="formData.aptt">
<template #suffix>秒</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="FIB" prop="fib">
<el-input v-model="formData.fib">
<template #suffix>g/L</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="INR" prop="inr">
<el-input v-model="formData.inr">
<template #suffix>（无单位）</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
界面调整
2026-06-09 18:00:10 +08:00
</div>
代码字典
2026-06-12 18:01:21 +08:00
<!-- 血液品种 -->
<div class="box-item">
<div class="box-title">
<span>血液品种</span>
<div class="title-btn">
<el-button type="primary" @click="openBloodDialog">增加</el-button>
界面调整
2026-06-09 18:00:10 +08:00
</div>
</div>
代码字典
2026-06-12 18:01:21 +08:00
<el-table :data="bloodList" border height="120">
<el-table-column prop="bloodType" label="血液品种" align="center" />
<el-table-column prop="volume" label="申请血量" align="center" />
<el-table-column prop="unit" label="单位" align="center" />
<el-table-column prop="perVolume" label="每次血量" align="center" />
<el-table-column prop="applyBloodType" label="申请血型" align="center" />
<el-table-column prop="transPurpose" label="输血目的" align="center" />
<el-table-column prop="transIndication" label="输血指征" align="center" />
<el-table-column label="操作" align="center" width="120">
<template #default="scope">
<el-button link type="primary" @click="editBlood(scope.row, scope.$index)">编辑</el-button>
<el-button link type="primary" @click="deleteSingleBlood(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
界面调整
2026-06-09 18:00:10 +08:00
</div>
代码字典
2026-06-12 18:01:21 +08:00
</el-form>
界面调整
2026-06-09 18:00:10 +08:00
</div>
代码字典
2026-06-12 18:01:21 +08:00
<!-- 右侧列表 占1份 -->
<div class="right-wrap">
<div class="box-title">申请单列表</div>
<div class="filter-bar">
<el-radio-group v-model="listScope" size="small">
<el-radio :value="0">当前病人</el-radio>
<el-radio :value="1">病人列表</el-radio>
<el-radio :value="2">当前医生</el-radio>
</el-radio-group>
<div class="date-filter">
<span>单据状态：</span>
<el-select v-model="filterStatus" style="width:110px" size="small">
<el-option label="全部" value="" />
</el-select>
<el-input-number v-model="filterDays" :min="1" :max="30" style="width:80px" class="ml10" size="small" />天内
界面调整
2026-06-09 18:00:10 +08:00
</div>
</div>
代码字典
2026-06-12 18:01:21 +08:00
<el-table :data="orderList" border style="width:100%" height="calc(100vh - 260px)">
界面调整
2026-06-09 18:00:10 +08:00
<el-table-column prop="name" label="血液品种" align="center" width="150" />
<el-table-column prop="applyBloodVolume" label="申请血量" align="center" />
<el-table-column prop="unit" label="单位" align="center" />
<el-table-column prop="perBloodVolume" label="每次血量" align="center" />
<el-table-column prop="applyBloodType" label="申请血型" align="center" />
<el-table-column prop="transPurpose" label="输血目的" align="center" width="150" />
<el-table-column prop="indication" label="输血指征" align="center" width="150" />
<el-table-column prop="specialTreatment" label="特殊处理" align="center" width="150" />
<el-table-column prop="alternativeBloodType" label="替代血液品种" align="center" width="150" />
<el-table-column prop="remark" label="备注" align="center" />
</el-table>
</div>
</div>
代码字典
2026-06-12 18:01:21 +08:00
<!-- 血液品种编辑弹窗 -->
<el-dialog v-model="bloodDialogVisible" title="血液品种信息" width="600px" @close="resetBloodForm">
界面调整
2026-06-09 18:00:10 +08:00
<el-form ref="bloodFormRef" :model="bloodForm" label-width="100px" :rules="bloodFormRules">
代码字典
2026-06-12 18:01:21 +08:00
<el-row :gutter="10">
界面调整
2026-06-09 18:00:10 +08:00
<el-col :span="12">
代码字典
2026-06-12 18:01:21 +08:00
<el-form-item label="血液品种" prop="bloodType">
<el-input v-model="bloodForm.bloodType" />
界面调整
2026-06-09 18:00:10 +08:00
</el-form-item>
</el-col>
<el-col :span="12">
代码字典
2026-06-12 18:01:21 +08:00
<el-form-item label="申请血量" prop="volume">
<el-input v-model="bloodForm.volume" type="number" />
界面调整
2026-06-09 18:00:10 +08:00
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="单位" prop="unit">
代码字典
2026-06-12 18:01:21 +08:00
<el-input v-model="bloodForm.unit" />
界面调整
2026-06-09 18:00:10 +08:00
</el-form-item>
</el-col>
<el-col :span="12">
代码字典
2026-06-12 18:01:21 +08:00
<el-form-item label="每次血量" prop="perVolume">
<el-input v-model="bloodForm.perVolume" type="number" />
界面调整
2026-06-09 18:00:10 +08:00
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="申请血型" prop="applyBloodType">
代码字典
2026-06-12 18:01:21 +08:00
<el-input v-model="bloodForm.applyBloodType" />
界面调整
2026-06-09 18:00:10 +08:00
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="输血目的" prop="transPurpose">
代码字典
2026-06-12 18:01:21 +08:00
<el-input v-model="bloodForm.transPurpose" />
界面调整
2026-06-09 18:00:10 +08:00
</el-form-item>
</el-col>
<el-col :span="12">
代码字典
2026-06-12 18:01:21 +08:00
<el-form-item label="输血指征" prop="transIndication">
<el-input v-model="bloodForm.transIndication" />
界面调整
2026-06-09 18:00:10 +08:00
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="特殊处理" prop="specialTreatment">
<el-input v-model="bloodForm.specialTreatment" placeholder="请输入特殊处理" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="替代血液品种" prop="alternativeBloodType">
<el-input v-model="bloodForm.alternativeBloodType" placeholder="请输入替代血液品种" />
</el-form-item>
</el-col>
代码字典
2026-06-12 18:01:21 +08:00
<el-col :span="24">
界面调整
2026-06-09 18:00:10 +08:00
<el-form-item label="备注" prop="remark">
<el-input v-model="bloodForm.remark" placeholder="请输入备注" type="textarea" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
代码字典
2026-06-12 18:01:21 +08:00
<el-button type="primary" @click="saveBloodForm">确定</el-button>
界面调整
2026-06-09 18:00:10 +08:00
<el-button @click="bloodDialogVisible = false">取消</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
代码字典
2026-06-12 18:01:21 +08:00
import type { ElForm, ElTable } from 'element-plus'
import { ElMessageBox, ElMessage } from 'element-plus'
界面调整
2026-06-09 18:00:10 +08:00
代码字典
2026-06-12 18:01:21 +08:00
// 定义表单Ref
const formRef = ref<InstanceType<typeof ElForm>>()
界面调整
2026-06-09 18:00:10 +08:00
const bloodFormRef = ref<InstanceType<typeof ElForm>>()
const formData = reactive({
代码字典
2026-06-12 18:01:21 +08:00
applyNo: '',
applyDate: new Date(),
applyDoctor: '管理员',
attendingDoctor: '',
superiorDoctor: '',
hospitalNo: '',
name: '',
bloodType: '',
gender: '',
age: '',
rhd: '',
dept: '',
ward: '',
bedNo: '',
界面调整
2026-06-09 18:00:10 +08:00
deptType: '',
代码字典
2026-06-12 18:01:21 +08:00
singleDisease: '',
界面调整
2026-06-09 18:00:10 +08:00
diagnosis: '',
transPurpose: '',
代码字典
2026-06-12 18:01:21 +08:00
transIndication: '',
hasTransfusionHistory: '0',
hasReactionHistory: '0',
hasTransplantHistory: '0',
hasPregnancyHistory: '0',
hasDeliveryHistory: '0',
operationName: '',
operationLevel: '',
signedConsent: true,
hgb: '',
hct: '',
plt: '',
alt: '',
hbsag: '',
tp: '',
antiHcv: '',
antiHiv: '',
pt: '',
aptt: '',
fib: '',
inr: ''
界面调整
2026-06-09 18:00:10 +08:00
})
代码字典
2026-06-12 18:01:21 +08:00
// 血液品种列表
const bloodList = ref([
{ bloodType: '', volume: 'test1', unit: '', perVolume: '', applyBloodType: '', transPurpose: '', transIndication: '' }
])
界面调整
2026-06-09 18:00:10 +08:00
代码字典
2026-06-12 18:01:21 +08:00
const orderList = ref([
{ status: '', name: 'test1', hospitalNo: '', applyNo: '', dept: '', bloodType: '', rhd: '', bloodTypeDetail: '', quantity: '', unit: '', applyDate: '', applyDoctor: '' }
界面调整
2026-06-09 18:00:10 +08:00
])
代码字典
2026-06-12 18:01:21 +08:00
const useBarcode = ref(false)
const listScope = ref(0)
const filterStatus = ref('')
const filterDays = ref(3)
// 血液品种弹窗相关
const bloodDialogVisible = ref(false)
const editIndex = ref(-1)
界面调整
2026-06-09 18:00:10 +08:00
const bloodForm = reactive({
代码字典
2026-06-12 18:01:21 +08:00
bloodType: '',
volume: '',
界面调整
2026-06-09 18:00:10 +08:00
unit: '',
代码字典
2026-06-12 18:01:21 +08:00
perVolume: '',
界面调整
2026-06-09 18:00:10 +08:00
applyBloodType: '',
transPurpose: '',
代码字典
2026-06-12 18:01:21 +08:00
transIndication: ''
界面调整
2026-06-09 18:00:10 +08:00
})
代码字典
2026-06-12 18:01:21 +08:00
// 血液品种表单验证规则
const bloodFormRules = reactive({
bloodType: [{ required: true, message: '请输入血液品种', trigger: 'blur' }],
volume: [{ required: true, message: '请输入申请血量', trigger: 'blur', type: 'number' }],
unit: [{ required: true, message: '请输入单位', trigger: 'blur' }],
applyBloodType: [{ required: true, message: '请输入申请血型', trigger: 'blur' }]
界面调整
2026-06-09 18:00:10 +08:00
})
代码字典
2026-06-12 18:01:21 +08:00
// 打开新增弹窗
const openBloodDialog = () => {
editIndex.value = -1
界面调整
2026-06-09 18:00:10 +08:00
resetBloodForm()
bloodDialogVisible.value = true
}
代码字典
2026-06-12 18:01:21 +08:00
// 重置弹窗表单
const resetBloodForm = () => {
if (bloodFormRef.value) {
bloodFormRef.value.clearValidate()
}
Object.assign(bloodForm, {
bloodType: '',
volume: '',
unit: '',
perVolume: '',
applyBloodType: '',
transPurpose: '',
transIndication: ''
})
界面调整
2026-06-09 18:00:10 +08:00
}
代码字典
2026-06-12 18:01:21 +08:00
// 编辑血液品种
const editBlood = (row: any, index: number) => {
editIndex.value = index
// 深拷贝行数据到表单
Object.assign(bloodForm, row)
bloodDialogVisible.value = true
界面调整
2026-06-09 18:00:10 +08:00
}
代码字典
2026-06-12 18:01:21 +08:00
// 保存血液品种表单
const saveBloodForm = async () => {
界面调整
2026-06-09 18:00:10 +08:00
if (!bloodFormRef.value) return
代码字典
2026-06-12 18:01:21 +08:00
try {
// 表单验证
await bloodFormRef.value.validate()
if (editIndex.value === -1) {
// 新增
} else {
// 编辑
界面调整
2026-06-09 18:00:10 +08:00
}
代码字典
2026-06-12 18:01:21 +08:00
bloodDialogVisible.value = false
ElMessage.success(editIndex.value === -1 ? '新增成功' : '编辑成功')
} catch (error) {
console.error('表单验证失败:', error)
ElMessage.error('请完善必填信息')
界面调整
2026-06-09 18:00:10 +08:00
}
}
代码字典
2026-06-12 18:01:21 +08:00
// 删除单条血液品种
const deleteSingleBlood = (index: number) => {
ElMessageBox.confirm(
'确定要删除这条血液品种信息吗？',
'提示',
{
type: 'warning',
size: 'small'
}
).then(() => {
bloodList.value.splice(index, 1)
ElMessage.success('删除成功')
}).catch(() => {
ElMessage.info('已取消删除')
界面调整
2026-06-09 18:00:10 +08:00
})
}
代码字典
2026-06-12 18:01:21 +08:00
// 批量删除（原删除按钮，保留）
const deleteBlood = () => {
if (bloodList.value.length === 0) {
ElMessage.warning('暂无可删除的血液品种信息')
return
}
ElMessageBox.confirm(
'确定要删除最后一条血液品种信息吗？',
'提示',
{
type: 'warning',
size: 'small'
}
).then(() => {
bloodList.value.pop()
ElMessage.success('删除成功')
}).catch(() => {
ElMessage.info('已取消删除')
界面调整
2026-06-09 18:00:10 +08:00
})
}
代码字典
2026-06-12 18:01:21 +08:00
// 可选：添加表单验证和提交方法
const validateForm = async () => {
if (!formRef.value) return false
try {
const valid = await formRef.value.validate()
return valid
} catch (err) {
console.error('表单验证失败:', err)
return false
}
}
const submitForm = async () => {
const isValid = await validateForm()
if (isValid) {
// 表单验证通过，执行提交逻辑
console.log('表单提交数据:', formData)
// 这里可以添加接口请求等逻辑
}
界面调整
2026-06-09 18:00:10 +08:00
}
</script>
<style scoped lang="scss">
.app-container {
display: flex;
代码字典
2026-06-12 18:01:21 +08:00
flex-direction: column;
界面调整
2026-06-09 18:00:10 +08:00
box-sizing: border-box;
代码字典
2026-06-12 18:01:21 +08:00
overflow-y: auto;
界面调整
2026-06-09 18:00:10 +08:00
代码字典
2026-06-12 18:01:21 +08:00
.toolbar {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 8px;
界面调整
2026-06-09 18:00:10 +08:00
background: #fff;
代码字典
2026-06-12 18:01:21 +08:00
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
界面调整
2026-06-09 18:00:10 +08:00
border-radius: 4px;
代码字典
2026-06-12 18:01:21 +08:00
margin-bottom: 8px;
界面调整
2026-06-09 18:00:10 +08:00
}
代码字典
2026-06-12 18:01:21 +08:00
.main-content {
flex: 1;
界面调整
2026-06-09 18:00:10 +08:00
display: flex;
代码字典
2026-06-12 18:01:21 +08:00
gap: 10px;
overflow: hidden;
.box-title {
position: relative;
padding-left: 12px;
padding-bottom: 6px;
font-size: 15px;
font-weight: 600;
display: flex;
justify-content: space-between;
// align-items: center;
/* 左侧蓝色小竖线 */
界面调整
2026-06-09 18:00:10 +08:00
&::before {
content: '';
代码字典
2026-06-12 18:01:21 +08:00
position: absolute;
left: 0;
top: 2px;
bottom: 2px;
界面调整
2026-06-09 18:00:10 +08:00
width: 4px;
height: 14px;
background-color: #409eff;
margin-right: 8px;
border-radius: 0 4px 4px 0;
}
代码字典
2026-06-12 18:01:21 +08:00
.title-btn {
display: flex;
gap: 6px;
}
界面调整
2026-06-09 18:00:10 +08:00
}
代码字典
2026-06-12 18:01:21 +08:00
/* 左侧 2份 */
.left-wrap {
界面调整
2026-06-09 18:00:10 +08:00
flex: 1;
代码字典
2026-06-12 18:01:21 +08:00
display: flex;
flex-direction: column;
gap: 6px;
overflow-y: auto;
界面调整
2026-06-09 18:00:10 +08:00
代码字典
2026-06-12 18:01:21 +08:00
.blood-transfusion-form {
width: 100%;
}
界面调整
2026-06-09 18:00:10 +08:00
代码字典
2026-06-12 18:01:21 +08:00
.box-item {
background: #fff;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
padding: 10px;
margin-bottom: 10px;
界面调整
2026-06-09 18:00:10 +08:00
代码字典
2026-06-12 18:01:21 +08:00
:deep(.el-form-item) {
margin-bottom: 6px !important;
界面调整
2026-06-09 18:00:10 +08:00
}
}
}
代码字典
2026-06-12 18:01:21 +08:00
/* 右侧 1份 */
.right-wrap {
width: 35%;
display: flex;
flex-direction: column;
background: #fff;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
padding: 10px;
.filter-bar {
margin-bottom: 8px;
// display: flex;
// align-items: center;
gap: 10px;
flex-wrap: wrap;
}
界面调整
2026-06-09 18:00:10 +08:00
代码字典
2026-06-12 18:01:21 +08:00
.date-filter {
font-size: 14px;
color: #333;
}
}
界面调整
2026-06-09 18:00:10 +08:00
}
}
</style>
Reference in New Issue Copy Permalink