版本更新
This commit is contained in:
269
openhis-ui-vue3/src/views/hospitalRecord/HospitalRecordForm.vue
Normal file
269
openhis-ui-vue3/src/views/hospitalRecord/HospitalRecordForm.vue
Normal file
@@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<div class="hospital-record-form">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="病案首页(一)" name="first">
|
||||
<medicalRecordFirst :formData="formData"></medicalRecordFirst>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="病案首页(二)" name="second">
|
||||
<medicalRecordSecond :formData="formData"></medicalRecordSecond>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="病案附页(一)" name="third"></el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<div class="form-footer">
|
||||
<button @click="printForm" class="print-btn">打印表单</button>
|
||||
<button @click="resetForm" class="reset-btn">重置表单</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import medicalRecordFirst from './components/medicalRecordFirst.vue';
|
||||
import medicalRecordSecond from './components/medicalRecordSecond.vue';
|
||||
import medicalRecordFirstPrint from './components/medicalRecordFirstPrint.json';
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
hospital: {
|
||||
orgCode: '41275054-7',
|
||||
paymentMethod: '城乡居民基本医疗保险'
|
||||
},
|
||||
patient: {
|
||||
healthCardNo: '',
|
||||
name: '',
|
||||
gender: '',
|
||||
birthDate: '',
|
||||
age: '',
|
||||
nationality: '中国',
|
||||
nativePlace: '',
|
||||
ethnicity: '汉族',
|
||||
idCardNo: '',
|
||||
householdAddress: '',
|
||||
workUnit: '',
|
||||
contactName: '',
|
||||
contactRelation: '',
|
||||
contactAddress: '',
|
||||
contactPhone: ''
|
||||
},
|
||||
admission: {
|
||||
times: 1,
|
||||
hospitalNo: '',
|
||||
recordNo: '',
|
||||
channel: '',
|
||||
admitTime: '',
|
||||
department: '',
|
||||
ward: '',
|
||||
confirmDate: '',
|
||||
dischargeTime: '',
|
||||
dischargeDepartment: '',
|
||||
dischargeWard: '',
|
||||
hospitalDays: ''
|
||||
},
|
||||
diagnosis: {
|
||||
mainDiagnosis: '',
|
||||
otherDiagnosis: ''
|
||||
},
|
||||
medicalInfo: {
|
||||
bloodTransfusion: '2',
|
||||
bloodType: '',
|
||||
rhType: '',
|
||||
drugAllergy: '1'
|
||||
},
|
||||
doctorInfo: {
|
||||
departmentDirector: '',
|
||||
chiefPhysician: '',
|
||||
attendingPhysician: '',
|
||||
residentPhysician: '',
|
||||
chargeNurse: '',
|
||||
chiefResident: '',
|
||||
intern: '',
|
||||
recordQuality: '1',
|
||||
coder: '',
|
||||
qualityControlDate: ''
|
||||
}
|
||||
});
|
||||
|
||||
const activeName = ref('first');
|
||||
|
||||
// 打印表单
|
||||
const printForm = () => {
|
||||
// 创建一个新的打印窗口
|
||||
const printWindow = window.open('', '_blank');
|
||||
let printContent
|
||||
// 获取模板字符串并替换转义的插值标记
|
||||
if(activeName.value == 'first') {
|
||||
printContent = medicalRecordFirstPrint.printContent;
|
||||
}else if(activeName.value == 'second') {
|
||||
|
||||
}else {
|
||||
|
||||
}
|
||||
// 这里可以进行实际的数据替换操作
|
||||
printContent = printContent.replace(/\$\{([^}]+)\}/g, (match, expr) => {
|
||||
// 简单示例:实际应根据expr内容进行数据提取
|
||||
return eval(expr); // 注意:实际使用中应避免eval,这里仅为示例
|
||||
});
|
||||
|
||||
// 将内容写入打印窗口并打印
|
||||
printWindow.document.write(printContent);
|
||||
printWindow.document.close();
|
||||
}
|
||||
|
||||
function handleClick() {
|
||||
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
Object.keys(formData).forEach(key => {
|
||||
if (typeof formData[key] === 'object') {
|
||||
Object.keys(formData[key]).forEach(subKey => {
|
||||
formData[key][subKey] = '';
|
||||
});
|
||||
} else {
|
||||
formData[key] = '';
|
||||
}
|
||||
});
|
||||
|
||||
// 重置默认值
|
||||
formData.hospital.orgCode = '41275054-7';
|
||||
formData.hospital.paymentMethod = '城乡居民基本医疗保险';
|
||||
formData.patient.nationality = '中国';
|
||||
formData.patient.ethnicity = '汉族';
|
||||
formData.admission.times = 1;
|
||||
formData.medicalInfo.bloodTransfusion = '2';
|
||||
formData.medicalInfo.drugAllergy = '1';
|
||||
formData.doctorInfo.recordQuality = '1';
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hospital-record-form {
|
||||
font-family: 'SimSun', serif;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.form-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.hospital-name {
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.form-title {
|
||||
font-size: 20px;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 30px;
|
||||
border: 1px solid #ccc;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
margin-right: 15px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.form-item.full-width {
|
||||
flex: 0 0 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 80px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.form-footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.print-btn, .reset-btn {
|
||||
padding: 10px 20px;
|
||||
margin: 0 10px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.print-btn {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
background-color: #f44336;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 打印样式 */
|
||||
@media print {
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.hospital-record-form {
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.form-footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 2cm;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,472 @@
|
||||
<template>
|
||||
<div class="form-header">
|
||||
<h2 class="form-title">住院病案首页</h2>
|
||||
</div>
|
||||
|
||||
<div class="form-content">
|
||||
<!-- 医院信息 -->
|
||||
<div class="section">
|
||||
<div class="section-title">医院信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<label>组织机构代码:</label>
|
||||
<el-input type="text" v-model="formData.hospital.orgCode" placeholder="41275054-7" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>医疗付费方式:</label>
|
||||
<el-select v-model="formData.hospital.paymentMethod">
|
||||
<el-option value="">请选择</el-option>
|
||||
<el-option value="城镇职工基本医疗保险">城镇职工基本医疗保险</el-option>
|
||||
<el-option value="城乡居民基本医疗保险">城乡居民基本医疗保险</el-option>
|
||||
<el-option value="自费">自费</el-option>
|
||||
<el-option value="其他">其他</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 患者基本信息 -->
|
||||
<div class="section">
|
||||
<div class="section-title">患者基本信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<label>健康卡号:</label>
|
||||
<el-input type="text" v-model="formData.patient.healthCardNo" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>姓名:</label>
|
||||
<el-input type="text" v-model="formData.patient.name" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>性别:</label>
|
||||
<el-select v-model="formData.patient.gender">
|
||||
<el-option value="" label="请选择"></el-option>
|
||||
<el-option value="1" label="男"></el-option>
|
||||
<el-option value="2" label="女"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>出生日期:</label>
|
||||
<el-date-picker v-model="formData.patient.birthDate" type="date" size="default"></el-date-picker>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>年龄:</label>
|
||||
<el-input type="number" max="120" min="0" v-model="formData.patient.age" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>国籍:</label>
|
||||
<el-input type="text" v-model="formData.patient.nationality" placeholder="中国" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<label>籍贯:</label>
|
||||
<el-input type="text" v-model="formData.patient.nativePlace" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>民族:</label>
|
||||
<el-input type="text" v-model="formData.patient.ethnicity" placeholder="汉族" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>身份证号:</label>
|
||||
<el-input type="text" v-model="formData.patient.idCardNo" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<label>户口地址:</label>
|
||||
<el-input type="text" v-model="formData.patient.householdAddress" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<label>工作单位及地址:</label>
|
||||
<el-input type="text" v-model="formData.patient.workUnit" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<label>联系人姓名:</label>
|
||||
<el-input type="text" v-model="formData.patient.contactName" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>关系:</label>
|
||||
<el-input type="text" v-model="formData.patient.contactRelation" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>地址:</label>
|
||||
<el-input type="text" v-model="formData.patient.contactAddress" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>电话:</label>
|
||||
<el-input type="text" v-model="formData.patient.contactPhone" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 住院信息 -->
|
||||
<div class="section">
|
||||
<div class="section-title">住院信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<label>第几次住院:</label>
|
||||
<el-input type="number" v-model="formData.admission.times" min="1" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>住院号:</label>
|
||||
<el-input type="text" v-model="formData.admission.hospitalNo" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>病案号:</label>
|
||||
<el-input type="text" v-model="formData.admission.recordNo" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<label>入院途径:</label>
|
||||
<el-select v-model="formData.admission.channel">
|
||||
<el-option value="">请选择</el-option>
|
||||
<el-option value="1">急诊</el-option>
|
||||
<el-option value="2">门诊</el-option>
|
||||
<el-option value="3">其他医疗机构转入</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>入院时间:</label>
|
||||
<el-input type="date" v-model="formData.admission.admitTime" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>入院科室:</label>
|
||||
<el-input type="text" v-model="formData.admission.department" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>病房:</label>
|
||||
<el-input type="text" v-model="formData.admission.ward" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>确诊日期:</label>
|
||||
<el-input type="date" v-model="formData.admission.confirmDate" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<label>出院时间:</label>
|
||||
<el-input type="datetime-local" v-model="formData.admission.dischargeTime" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>出院科室:</label>
|
||||
<el-input type="text" v-model="formData.admission.dischargeDepartment" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>病房:</label>
|
||||
<el-input type="text" v-model="formData.admission.dischargeWard" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>实际住院天数:</label>
|
||||
<el-input type="number" v-model="formData.admission.hospitalDays" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 诊断信息 -->
|
||||
<div class="section">
|
||||
<div class="section-title">诊断信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item full-width">
|
||||
<label>主要诊断:</label>
|
||||
<el-input type="text" v-model="formData.diagnosis.mainDiagnosis" placeholder="腰椎间盘突出症(L4-5)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item full-width">
|
||||
<label>其他诊断:</label>
|
||||
<el-input type="textarea" v-model="formData.diagnosis.otherDiagnosis" placeholder="腰椎管狭窄(L4-5)\n右下肢不全瘫"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 医疗信息 -->
|
||||
<div class="section">
|
||||
<div class="section-title">医疗信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<label>是否输血:</label>
|
||||
<el-select v-model="formData.medicalInfo.bloodTransfusion">
|
||||
<el-option value="">请选择</el-option>
|
||||
<el-option value="1">是</el-option>
|
||||
<el-option value="2">否</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>血型:</label>
|
||||
<el-select v-model="formData.medicalInfo.bloodType">
|
||||
<el-option value="">请选择</el-option>
|
||||
<el-option value="A">A</el-option>
|
||||
<el-option value="B">B</el-option>
|
||||
<el-option value="AB">AB</el-option>
|
||||
<el-option value="O">O</el-option>
|
||||
<el-option value="不详">不详</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>Rh:</label>
|
||||
<el-select v-model="formData.medicalInfo.rhType">
|
||||
<el-option value="">请选择</el-option>
|
||||
<el-option value="1">阴</el-option>
|
||||
<el-option value="2">阳</el-option>
|
||||
<el-option value="3">不详</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<label>药物过敏史:</label>
|
||||
<el-select v-model="formData.medicalInfo.drugAllergy">
|
||||
<el-option value="">请选择</el-option>
|
||||
<el-option value="1" label="无"></el-option>
|
||||
<el-option value="2" label="有过敏药物"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 医师信息 -->
|
||||
<div class="section">
|
||||
<div class="section-title">医师信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<label>科主任:</label>
|
||||
<el-input type="text" v-model="formData.doctorInfo.departmentDirector" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>主任(副主任)医师:</label>
|
||||
<el-input type="text" v-model="formData.doctorInfo.chiefPhysician" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>主治医师:</label>
|
||||
<el-input type="text" v-model="formData.doctorInfo.attendingPhysician" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>住院医师:</label>
|
||||
<el-input type="text" v-model="formData.doctorInfo.residentPhysician" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<label>责任护士:</label>
|
||||
<el-input type="text" v-model="formData.doctorInfo.chargeNurse" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>住院总医师:</label>
|
||||
<el-input type="text" v-model="formData.doctorInfo.chiefResident" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>实习医师:</label>
|
||||
<el-input type="text" v-model="formData.doctorInfo.intern" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<label>病案质量:</label>
|
||||
<el-select v-model="formData.doctorInfo.recordQuality">
|
||||
<el-option value="">请选择</el-option>
|
||||
<el-option value="1" label="甲"></el-option>
|
||||
<el-option value="2" label="乙"></el-option>
|
||||
<el-option value="3" label="丙"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>编码员:</label>
|
||||
<el-input type="text" v-model="formData.doctorInfo.coder" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>质控日期:</label>
|
||||
<el-input type="date" v-model="formData.doctorInfo.qualityControlDate" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
hospital: {
|
||||
orgCode: '41275054-7',
|
||||
paymentMethod: '城乡居民基本医疗保险'
|
||||
},
|
||||
patient: {
|
||||
healthCardNo: '',
|
||||
name: '',
|
||||
gender: '',
|
||||
birthDate: '',
|
||||
age: '',
|
||||
nationality: '中国',
|
||||
nativePlace: '',
|
||||
ethnicity: '汉族',
|
||||
idCardNo: '',
|
||||
householdAddress: '',
|
||||
workUnit: '',
|
||||
contactName: '',
|
||||
contactRelation: '',
|
||||
contactAddress: '',
|
||||
contactPhone: ''
|
||||
},
|
||||
admission: {
|
||||
times: 1,
|
||||
hospitalNo: '',
|
||||
recordNo: '',
|
||||
channel: '',
|
||||
admitTime: '',
|
||||
department: '',
|
||||
ward: '',
|
||||
confirmDate: '',
|
||||
dischargeTime: '',
|
||||
dischargeDepartment: '',
|
||||
dischargeWard: '',
|
||||
hospitalDays: ''
|
||||
},
|
||||
diagnosis: {
|
||||
mainDiagnosis: '',
|
||||
otherDiagnosis: ''
|
||||
},
|
||||
medicalInfo: {
|
||||
bloodTransfusion: '2',
|
||||
bloodType: '',
|
||||
rhType: '',
|
||||
drugAllergy: '1'
|
||||
},
|
||||
doctorInfo: {
|
||||
departmentDirector: '',
|
||||
chiefPhysician: '',
|
||||
attendingPhysician: '',
|
||||
residentPhysician: '',
|
||||
chargeNurse: '',
|
||||
chiefResident: '',
|
||||
intern: '',
|
||||
recordQuality: '1',
|
||||
coder: '',
|
||||
qualityControlDate: ''
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hospital-record-form {
|
||||
font-family: 'SimSun', serif;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.form-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.hospital-name {
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.form-title {
|
||||
font-size: 20px;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 30px;
|
||||
border: 1px solid #ccc;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
margin-right: 15px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.form-item.full-width {
|
||||
flex: 0 0 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 80px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.form-footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.print-btn, .reset-btn {
|
||||
padding: 10px 20px;
|
||||
margin: 0 10px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.print-btn {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
background-color: #f44336;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,345 @@
|
||||
<template>
|
||||
<div style="width: 100%">
|
||||
<div style="margin-bottom: 5px">
|
||||
<el-button type="primary" @click="handleAddPrescription()" :disabled="false">
|
||||
新增
|
||||
</el-button>
|
||||
<el-button type="danger" plain @click="handleDelete()" :disabled="false"> 删除 </el-button>
|
||||
</div>
|
||||
<el-table
|
||||
max-height="650"
|
||||
ref="prescriptionRef"
|
||||
:data="prescriptionList"
|
||||
row-key="uniqueKey"
|
||||
border
|
||||
@row-dblclick="clickRowDb"
|
||||
:expand-row-keys="expandOrder"
|
||||
>
|
||||
<el-table-column label="手术操作日期" align="center" prop="productName" width="400">
|
||||
<template #default="scope">
|
||||
<el-date-picker
|
||||
v-model="scope.row.occurrenceTime"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="手术操作日期"
|
||||
:default-time="defaultTime"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="手术级别" align="center" prop="" width="90">
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.operationLevel" placeholder="请选择手术级别">
|
||||
<el-option
|
||||
v-for="item in operationLevelList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="手术及操作名称" align="center" prop="">
|
||||
<template #default="scope">
|
||||
<el-select
|
||||
v-model="scope.row.operationName"
|
||||
placeholder="请选择手术及操作名称"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in operationNameList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="手术及操作医师">
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="术者">
|
||||
<template #default="scope">
|
||||
<el-select
|
||||
v-model="scope.row.operationDoctor"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in operationDoctorList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="nameFirst"
|
||||
label="Ⅰ助">
|
||||
<template v-slot="scope">
|
||||
<el-select
|
||||
v-model="scope.row.nameFirst"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in operationDoctorList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="nameFirst"
|
||||
label="Ⅱ助">
|
||||
<template v-slot="scope">
|
||||
<el-select
|
||||
v-model="scope.row.nameSecond"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in operationDoctorList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<label>手术方式:</label>
|
||||
<el-select v-model="formData.surgeryType">
|
||||
<el-option value="" label="请选择"></el-option>
|
||||
<el-option value="1" label="择期手术"></el-option>
|
||||
<el-option value="2" label="限期手术"></el-option>
|
||||
<el-option value="3" label="急诊手术"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>离院方式:</label>
|
||||
<el-select v-model="formData.surgeryType">
|
||||
<el-option value="" label="请选择"></el-option>
|
||||
<el-option value="1" label="医嘱离院"></el-option>
|
||||
<el-option value="2" label="医嘱转院"></el-option>
|
||||
<el-option value="3" label="医嘱转社区卫生服务机构"></el-option>
|
||||
<el-option value="4" label="非医嘱离院"></el-option>
|
||||
<el-option value="5" label="死亡"></el-option>
|
||||
<el-option value="9" label="其他"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<label>是否有出院31天内再住院计划:</label>
|
||||
<el-select v-model="formData.hospitalizationPlan">
|
||||
<el-option value="" label="请选择"></el-option>
|
||||
<el-option value="1" label="无"></el-option>
|
||||
<el-option value="2" label="有"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>目的:</label>
|
||||
<el-input v-model="formData.purpose"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getCurrentInstance, nextTick, ref, watch } from 'vue';
|
||||
|
||||
const emit = defineEmits(['selectDiagnosis']);
|
||||
const prescriptionList = ref([]);
|
||||
const form = ref({
|
||||
prescriptionList: prescriptionList.value,
|
||||
});
|
||||
const adviceQueryParams = ref({});
|
||||
const rowIndex = ref(-1);
|
||||
const nextId = ref(1);
|
||||
const operationLevelList = [
|
||||
{ name: '一级', id: 1 },
|
||||
{ name: '二级', id: 2 },
|
||||
{ name: '三级', id: 3 },
|
||||
];
|
||||
const operationDoctorList = ref([]);
|
||||
const formData = ref({});
|
||||
const props = defineProps({
|
||||
|
||||
});
|
||||
const isAdding = ref(false);
|
||||
const prescriptionRef = ref();
|
||||
const expandOrder = ref([]); //目前的展开行
|
||||
const { proxy } = getCurrentInstance();
|
||||
const requiredProps = ref([]); // 存储必填项 prop 顺序
|
||||
const handleSaveDisabled = ref(false) //签发状态
|
||||
watch(
|
||||
() => expandOrder.value,
|
||||
(newValue) => {
|
||||
console.log(newValue,"监听·")
|
||||
if (newValue.length > 0) {
|
||||
nextTick(() => {
|
||||
|
||||
const index = prescriptionList.value.findIndex((row) => row.uniqueKey === newValue[0]);
|
||||
const items = proxy.$refs['formRef' + index]?.$el?.querySelectorAll('[data-prop]');
|
||||
requiredProps.value = Array.from(items).map((item) => item.dataset.prop);
|
||||
});
|
||||
} else {
|
||||
requiredProps.value = {};
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => prescriptionList.value,
|
||||
(newValue) => {
|
||||
console.log(prescriptionList.value,"prescriptionList.value")
|
||||
if(newValue&&newValue.length>0){
|
||||
let saveList = prescriptionList.value.filter((item) => {
|
||||
return item.statusEnum == 1&&(Number(item.bizRequestFlag)==1||!item.bizRequestFlag)
|
||||
})
|
||||
prescriptionList.value.map(k=>{
|
||||
k.check = false
|
||||
})
|
||||
console.log(saveList,"prescriptionList.value")
|
||||
if (saveList.length == 0) {
|
||||
handleSaveDisabled.value = true
|
||||
}else{
|
||||
handleSaveDisabled.value = false
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 新增
|
||||
function handleAddPrescription() {
|
||||
if (isAdding.value) {
|
||||
proxy.$modal.msgWarning('请先保存');
|
||||
return;
|
||||
}
|
||||
isAdding.value = true;
|
||||
// 在数组最前方添加一行,让新增行显示在最上边
|
||||
prescriptionList.value.unshift({
|
||||
uniqueKey: nextId.value++,
|
||||
showPopover: false,
|
||||
check: false,
|
||||
isEdit: true,
|
||||
statusEnum: 1,
|
||||
});
|
||||
nextTick(() => {
|
||||
proxy.$refs['adviceRef0'].focus();
|
||||
});
|
||||
}
|
||||
|
||||
// 行双击打开编辑块,仅待发送的可编辑
|
||||
function clickRowDb(row) {
|
||||
if (row.statusEnum == 1) {
|
||||
row = { ...row, ...JSON.parse(row.contentJson) };
|
||||
row.isEdit = true;
|
||||
const index = prescriptionList.value.findIndex((item) => item.uniqueKey === row.uniqueKey);
|
||||
prescriptionList.value[index] = row;
|
||||
console.log(prescriptionList.value,"prescriptionList.value")
|
||||
expandOrder.value = [row.uniqueKey];
|
||||
}
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
let deleteList = prescriptionList.value
|
||||
.filter((item) => {
|
||||
return item.check && item.statusEnum == 1;
|
||||
})
|
||||
.map((item) => {
|
||||
return {
|
||||
requestId: item.requestId,
|
||||
dbOpType: '3',
|
||||
adviceType: item.adviceType,
|
||||
};
|
||||
});
|
||||
if (deleteList.length == 0) {
|
||||
proxy.$modal.msgWarning('请选择要删除的项目');
|
||||
return;
|
||||
}
|
||||
expandOrder.value = [];
|
||||
isAdding.value = false;
|
||||
adviceQueryParams.value.adviceType = undefined;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-table__expand-icon) {
|
||||
display: none !important;
|
||||
}
|
||||
.medicine-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
min-width: 280px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #409eff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.medicine-info {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #606266;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: #fff;
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ebeef5;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
/* 调整element组件默认间距 */
|
||||
// .el-select,
|
||||
// .el-input-number {
|
||||
// margin-right: 0 !important;
|
||||
// }
|
||||
|
||||
.el-input-number .el-input__inner {
|
||||
text-align: center;
|
||||
}
|
||||
.el-table__cell .el-form-item--default {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
margin-right: 15px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.form-item.full-width {
|
||||
flex: 0 0 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,10 @@
|
||||
<!--
|
||||
* @Author: X_bo v-hss@tbpartners.local
|
||||
* @Date: 2025-10-11 16:47:22
|
||||
* @LastEditTime: 2025-10-11 16:47:28
|
||||
* @LastEditors: X_bo v-hss@tbpartners.local
|
||||
* @Description:
|
||||
* @FilePath: \openhis-ui-vue3\src\views\hospitalRecord\components\medicalRecordThird.vue
|
||||
-->
|
||||
<template></template>
|
||||
<script></script>
|
||||
Reference in New Issue
Block a user