250 lines
9.5 KiB
Vue
250 lines
9.5 KiB
Vue
<script setup>
|
|
import { ref, reactive } from 'vue';
|
|
import tab2 from '@/pages/zl-station/menjizhenItem-tabs/tab2.vue';
|
|
import tab3 from '@/pages/zl-station/menjizhenItem-tabs/tab3.vue';
|
|
import tab4 from '@/pages/zl-station/menjizhenItem-tabs/tab4.vue';
|
|
import tab5 from "@/pages/zl-station/menjizhenItem-tabs/tab5.vue";
|
|
// 病人候选下拉框
|
|
const value1 = ref('');
|
|
const value2 = ref('');
|
|
const value3 = ref('');
|
|
const value4 = ref('');
|
|
const items = [
|
|
{ value: '510123456789012345', name: '张三' },
|
|
{ value: '510123456789012342', name: '李四' },
|
|
{ value: '510123456789012346', name: '王五' },
|
|
{ value: '510123456789012347', name: '赵六' },
|
|
{ value: '510123456789012348', name: '田七' },
|
|
{ value: '510123456789012349', name: '周八' },
|
|
{ value: '510123456789012350', name: '吴九' },
|
|
{ value: '510123456789012351', name: '郑十' },
|
|
{ value: '510123456789012352', name: '冯十一' },
|
|
{ value: '510123456789012353', name: '陈十二' },
|
|
{ value: '510123456789012354', name: '褚十三' },
|
|
{ value: '510123456789012355', name: '卫十四' },
|
|
{ value: '510123456789012356', name: '蒋十五' },
|
|
{ value: '510123456789012357', name: '沈十六' },
|
|
{ value: '510123456789012358', name: '韩十七' },
|
|
{ value: '510123456789012359', name: '杨十八' },
|
|
{ value: '510123456789012360', name: '朱十九' },
|
|
{ value: '510123456789012361', name: '秦二十' },
|
|
{ value: '510123456789012362', name: '尤二十一' },
|
|
{ value: '510123456789012363', name: '许二十二' },
|
|
{ value: '510123456789012364', name: '何二十三' },
|
|
{ value: '510123456789012365', name: '吕二十四' },
|
|
];
|
|
const items2 = [
|
|
{ value: '510123456789012366', name: '施二十五' },
|
|
{ value: '510123456789012367', name: '张二十六' },
|
|
{ value: '510123456789012368', name: '孙二十七' },
|
|
{ value: '510123456789012369', name: '曹二十八' },
|
|
{ value: '510123456789012370', name: '严二十九' },
|
|
{ value: '510123456789012371', name: '华三十' },
|
|
{ value: '510123456789012372', name: '邱三十一' },
|
|
{ value: '510123456789012373', name: '高三十二' },
|
|
{ value: '510123456789012374', name: '林三十三' },
|
|
];
|
|
const options = reactive({
|
|
data: items,
|
|
});
|
|
const options2 = reactive({
|
|
data: items2,
|
|
});
|
|
//单选框分组
|
|
const groupFilterList1 = ref(['全天', '上午', '下午']);
|
|
let groupFilterChoose1 = ref('全天');
|
|
|
|
// 分割器
|
|
const collapsed = ref(false);
|
|
const disableBarSize = '2px';
|
|
|
|
const sizeChange = (size) => {
|
|
console.log(size);
|
|
};
|
|
|
|
// tab切换
|
|
const id = ref('tab1');
|
|
|
|
//X-EMR-VUE
|
|
|
|
const patient = ref({})
|
|
|
|
var editor = null
|
|
//加载编辑器
|
|
const onLoad = (e) => {
|
|
editor = e.target.contentWindow.editor
|
|
|
|
setTimeout(()=>{
|
|
//异步加载文档
|
|
editor.loadUrl('/mock/bind_data.html').then(()=>{
|
|
patient.value = editor.getBindObject()
|
|
})
|
|
//文档输入后表单值随着变化
|
|
editor.document.addEventListener('input', ()=>{
|
|
patient.value = editor.getBindObject()
|
|
})
|
|
}, 0)
|
|
|
|
}
|
|
|
|
//表单数据改变
|
|
const bindData = () => {
|
|
editor.setBindObject(patient.value)
|
|
}
|
|
|
|
|
|
const getNameByValue = (value) => {
|
|
const item = items.find((item) => item.value === value);
|
|
if(item){
|
|
return item.name;
|
|
}
|
|
else{
|
|
const item = items2.find((item) => item.value === value);
|
|
if(item){
|
|
return item.name;
|
|
}else{
|
|
return null;
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleInput = (value) => {
|
|
console.log(value1["value"]);
|
|
console.log(getNameByValue(value1["value"]))
|
|
patient.value.pat_name = getNameByValue(value1["value"]);
|
|
editor.setBindObject(patient.value)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section>
|
|
<d-splitter style="height: 1000px" class="splitter-border" orientation="vertical" :disableBarSize="disableBarSize">
|
|
<template v-slot:DSplitterPane>
|
|
<d-splitter-pane size="30px" minSize="30px" maxSize="50px" :collapsed="collapsed" :collapsible="true" @sizeChange="sizeChange">
|
|
<div class="pane-content">
|
|
<d-radio-group class="mb-2 patient" direction="row" v-model="groupFilterChoose1" >
|
|
<d-radio v-for="item in groupFilterList1" :key="item" :value="item">
|
|
{{ item }}
|
|
</d-radio>
|
|
</d-radio-group>
|
|
<d-select size="sm" class="mb-2 patient patient-select" v-model="value1" overview="underlined" placeholder="请选择患者" :allow-clear="true" filter @value-change="handleInput">
|
|
<d-option-group label="待诊病人">
|
|
<d-option v-for="(item, index) in options.data" :key="index" :value="item.value" :name="item.name"></d-option>
|
|
</d-option-group>
|
|
<d-option-group label="已诊病人">
|
|
<d-option v-for="(item, index) in options2.data" :key="index" :value="item.value" :name="item.name"></d-option>
|
|
</d-option-group>
|
|
</d-select>
|
|
<d-button size="sm" class="patient">患者管理</d-button>
|
|
</div>
|
|
</d-splitter-pane>
|
|
<d-splitter-pane style="overflow: hidden">
|
|
<div class="pane-content">
|
|
<d-tabs v-model="id" custom-width="100px">
|
|
<d-tab id="tab1" title="门诊病历">
|
|
<d-row>
|
|
<d-col :span="16">
|
|
<Editor @load="onLoad" style="margin: 10px 0;"></Editor>
|
|
</d-col>
|
|
<d-col :span="8">
|
|
<d-card style="margin: 10px;">
|
|
<d-form @change="bindData()" label-width="auto">
|
|
<d-form-item label="姓名">
|
|
<d-input v-model="patient.pat_name" ></d-input>
|
|
</d-form-item>
|
|
<d-form-item label="性别">
|
|
<d-input v-model="patient.pat_sex"></d-input>
|
|
</d-form-item>
|
|
<d-form-item label="年龄">
|
|
<d-input v-model="patient.pat_age"></d-input>
|
|
</d-form-item>
|
|
<d-form-item label="就诊科室">
|
|
<d-input v-model="patient.visit_dept"></d-input>
|
|
</d-form-item>
|
|
<d-form-item label="就诊号">
|
|
<d-input v-model="patient.pat_id"></d-input>
|
|
</d-form-item>
|
|
<d-form-item label="就诊时间">
|
|
<d-date-picker-pro v-model="patient.visit_time" format="YYYY-MM-DD hh:mm"></d-date-picker-pro>
|
|
<d-radio-group v-model="patient.firstcall" style="margin-left: 10px;">
|
|
<d-radio value="1">初诊</d-radio>
|
|
<d-radio value="2">复诊</d-radio>
|
|
</d-radio-group>
|
|
</d-form-item>
|
|
<d-form-item label="联系电话">
|
|
<d-input v-model="patient.pat_phone"></d-input>
|
|
</d-form-item>
|
|
<d-form-item label=" 家庭住址">
|
|
<d-input v-model="patient.pat_address"></d-input>
|
|
</d-form-item>
|
|
<d-form-item label=" 主诉">
|
|
<d-input v-model="patient.pat_appeal"></d-input>
|
|
</d-form-item>
|
|
<d-form-item label=" 现病史">
|
|
<d-input v-model="patient.pat_now_history"></d-input>
|
|
</d-form-item>
|
|
<d-form-item label=" 既往史">
|
|
<d-input v-model="patient.pat_past_history"></d-input>
|
|
</d-form-item>
|
|
<d-form-item label=" 过敏史">
|
|
<d-input v-model="patient.pat_allergy_history"></d-input>
|
|
</d-form-item>
|
|
<d-form-item label=" 诊断">
|
|
<d-input v-model="patient.diagnosis"></d-input>
|
|
</d-form-item>
|
|
<d-form-item label=" 处方">
|
|
<d-input v-model="patient.presc" type="textarea"></d-input>
|
|
</d-form-item>
|
|
<d-form-item label=" 建议">
|
|
<d-input v-model="patient.advice"></d-input>
|
|
</d-form-item>
|
|
<d-form-item label=" 医生签字">
|
|
<d-input v-model="patient.doctor_name"></d-input>
|
|
</d-form-item>
|
|
</d-form>
|
|
</d-card>
|
|
</d-col>
|
|
</d-row>
|
|
</d-tab>
|
|
<d-tab id="tab2" title="门诊诊断">
|
|
<tab2></tab2>
|
|
</d-tab>
|
|
<d-tab id="tab3" title="处方管理">
|
|
<tab3></tab3>
|
|
</d-tab>
|
|
<d-tab id="tab4" title="申请单">
|
|
<tab4></tab4>
|
|
</d-tab>
|
|
<d-tab id="tab5" title="历史病历">
|
|
<tab5></tab5>
|
|
</d-tab>
|
|
</d-tabs>
|
|
</div>
|
|
</d-splitter-pane>
|
|
<!-- <d-splitter-pane size="150px" :resizable="false" :collapsible="true">-->
|
|
<!-- <div class="pane-content">-->
|
|
<!-- <h2>Bottom</h2>-->
|
|
<!-- <div>height: 150px, resizable: false</div>-->
|
|
<!-- </div>-->
|
|
<!-- </d-splitter-pane>-->
|
|
</template>
|
|
</d-splitter>
|
|
</section>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
.patient-select {
|
|
width: auto;
|
|
}
|
|
.patient {
|
|
position: relative;
|
|
bottom: 0;
|
|
margin-right: 16px;
|
|
float: left;
|
|
}
|
|
|
|
.pane-content {
|
|
padding: 0 12px;
|
|
}
|
|
</style> |