FlowBL/src/views/dicomPathologyForm/dicomPathologyViewForm.vue

686 lines
22 KiB
Vue
Raw Normal View History

2024-10-08 11:00:36 +08:00
<template>
<el-dialog
v-model="dialogVisible"
:title="dialogTitle"
class="my-custom-close-icon"
:fullscreen="true"
>
<el-tabs v-model="activeName" type="card">
<el-tab-pane v-if="tagLoaded" label="影像" name="first">
<iframe
v-if="dataLoaded"
frameborder="0"
scrolling="no"
:src="newSrc"
style="width: 100%; height: 87vh"
></iframe>
</el-tab-pane>
<el-tab-pane label="报告单" name="second">
<!-- 外层 Flex 容器 -->
<div style="display: flex; height: 100%">
<!-- 模版区域 -->
<div style="flex: 1; min-width: 0; overflow: auto">
<el-select
v-model="fordevicemValue"
placeholder="请选择模版类别"
clearable
@change="handleselectchange"
@clear="selectclear"
>
<el-option label="门诊" value="门诊模版" />
<el-option label="住院" value="住院模版" />
<el-option label="体检" value="体检模版" />
</el-select>
<el-tabs type="border-card" style="height: 83vh; overflow: auto">
<el-tab-pane label="通用模版">
<!-- -->
<el-tree
style="min-width: 195px"
v-loading="formLoading"
class="treeStyle"
:check-on-click-node="true"
:highlight-current="true"
:default-expand-all="false"
:data="treeData"
:props="treeDefaultProps"
node-key="id"
:show-checkbox="false"
:check-strictly="true"
@check="handleTreeNodeClick"
ref="selectTree"
:expand-on-click-node="false"
/>
</el-tab-pane>
<el-tab-pane label="私有模版">
<!-- -->
<el-tree
style="min-width: 195px"
v-loading="formLoading"
class="treeStyle"
:check-on-click-node="true"
:highlight-current="true"
:default-expand-all="false"
:data="privateData"
:props="treeDefaultProps"
node-key="id"
:show-checkbox="false"
:check-strictly="true"
@node-click="handleTreeNodeClick"
ref="priselectTree"
:expand-on-click-node="false"
/>
</el-tab-pane>
</el-tabs>
</div>
<!-- 用户信息区域 -->
<div style="flex: 3; min-width: 0">
<label style="font-size: 18px; font-weight: bold; margin-left: 50px">患者信息</label>
<el-divider />
<el-form
:model="applyFormVO"
label-width="auto"
style="max-width: 1000px; margin: auto"
:inline="true"
>
<el-row>
<el-col :span="7">
<el-form-item label="检查号" style="font-weight: bold" label-width="110px">
<el-input v-model="applyFormVO.examId" style="width: 220px" :disabled="true" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="姓名" style="font-weight: bold" label-width="130px">
<el-input v-model="applyFormVO.pname" style="width: 220px" :disabled="true" />
</el-form-item>
</el-col>
<el-col :span="9">
<el-form-item label="性别" style="font-weight: bold" label-width="160px">
<el-input v-model="applyFormVO.gender" style="width: 220px" :disabled="true" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="出生日期" style="font-weight: bold" label-width="110px">
<el-date-picker
v-model="applyFormVO.birthday"
type="date"
placeholder="出生日期"
size="default"
style="width: 220px"
:disabled="true"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="检查时间" style="font-weight: bold" label-width="130px">
<el-date-picker
v-model="applyFormVO.examDate"
type="datetime"
placeholder="检查时间"
size="default"
style="width: 220px"
:disabled="true"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="送检科室" style="font-weight: bold" label-width="160px">
<el-input
v-model="applyFormVO.billDoctorDepartment"
style="width: 220px"
:disabled="true"
/>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="申请时间" style="font-weight: bold" label-width="110px">
<el-date-picker
v-model="applyFormVO.applicationDate"
type="datetime"
placeholder="检查时间"
size="default"
style="width: 220px"
:disabled="true"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="申请单号" style="font-weight: bold" label-width="130px">
<el-input v-model="applyFormVO.regId" style="width: 220px" :disabled="true" />
</el-form-item>
</el-col>
<el-col :span="7">
<!-- <el-form-item label="检查项目名称" label-width="160px" style="font-weight: bold">
<el-input
v-model="applyFormVO.examItemName"
style="width: 220px"
:disabled="true"
/>
</el-form-item> -->
</el-col>
</el-row>
</el-form>
<label style="font-size: 18px; font-weight: bold; margin-left: 50px">检查项目</label>
<el-divider />
<el-input
v-model="applyFormVO.examItemName"
style="width: 95%; font-size: 20px; margin-left: 40px; margin-bottom: 6px"
:rows="1"
:disabled="true"
/>
<label style="font-size: 18px; font-weight: bold; margin-left: 50px">影像所见</label>
<el-divider />
<el-input
v-model="sj"
style="width: 95%; font-size: 20px; margin-left: 40px; margin-bottom: 3px"
:rows="4"
type="textarea"
placeholder="影像所见"
/>
<label style="font-size: 18px; font-weight: bold; margin-left: 50px">影像结论</label>
<el-divider />
<el-input
v-model="zdjl"
style="width: 95%; font-size: 20px; margin-left: 40px; margin-bottom: 3px"
:rows="4"
type="textarea"
placeholder="影像结论"
/>
<label style="font-size: 18px; font-weight: bold; margin-left: 50px">报告备注</label>
<el-divider />
<el-input
v-model="notes"
style="
width: 95%;
font-size: 19px;
margin-left: 40px;
margin-top: 6px;
margin-bottom: 6px;
"
placeholder=""
/>
<el-divider />
<el-radio-group
v-model="radio1"
size="small"
class="radio-group-wrapper"
@dblclick="cancelSelection"
>
<el-radio-button label="阴性" value="0" />
<el-radio-button label="阳性" value="1" />
<el-radio-button label="重大阳性" value="2" />
</el-radio-group>
<el-divider />
<div class="form-row-yx">
<el-form-item label="诊断医生" class="form-item">
<el-input v-model="applyFormVO.diagDoctor" style="width: 180px" :disabled="true" />
</el-form-item>
<el-form-item label="审核医生" class="form-item">
<el-input
v-model="applyFormVO.reviewDoctor"
style="width: 180px"
:disabled="true"
/>
</el-form-item>
<el-form-item label="报告状态" class="form-item">
<el-input
v-model="applyFormVO.reportstatus"
style="width: 180px"
:disabled="true"
/>
</el-form-item>
</div>
<div style="position: absolute; bottom: 0; right: 0">
<el-button
type="success"
plain
style="
width: 80px;
float: right;
margin-right: 15px;
margin-top: 30px;
background-color: rgba(56, 119, 246, 1);
font-size: 14;
color: rgb(255, 255, 255);
"
@click="save"
:disabled="savedisabled"
>保存</el-button
>
<!-- v-show="examinedisabled" -->
<el-button
type="primary"
plain
v-show="examinedisabled"
style="
width: 80px;
float: right;
margin-right: 15px;
margin-top: 30px;
background-color: rgba(56, 119, 246, 1);
font-size: 14;
color: rgb(255, 255, 255);
"
@click="examine"
>审核</el-button
>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
</el-dialog>
<!-- </Dialog> -->
<!-- 弹窗-->
<el-dialog v-model="dialogTableVisible" title="选择结论添加方式" width="320" align-center>
<div>
<el-button @click="handleButtonClick('覆盖')" type="primary" style="font-size: 20px"
>覆盖</el-button
>
<el-button @click="handleButtonClick('追加')" type="success" style="font-size: 20px"
>追加</el-button
>
<el-button @click="dialogTableVisible = false" type="info" style="font-size: 20px"
>关闭</el-button
>
</div>
</el-dialog>
</template>
<script setup lang="ts">
import { ApplyformApi, ApplyformVO, UPFJApplyformVO } from '@/api/applyregistration/applyform'
import { ultrasoniccomApi, updateexamineimageVO } from '@/api/ultrasoniccom'
import axios from 'axios'
import { PatientexamlistApi, PatientexamlistVO } from '@/api/tblist/patientexamlist'
import { getUserProfile, ProfileVO } from '@/api/system/user/profile'
/** dicom */
defineOptions({ name: 'DicomPathologyViewForm' })
const Profilevo = ref<ProfileVO>({} as ProfileVO) //当前登录人信息
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const upFJApplyformVO = ref<UPFJApplyformVO[]>([])
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中1修改时的数据加载2提交的按钮禁用
const examineFormVO = ref<PatientexamlistVO>({} as PatientexamlistVO)
const savedisabled = ref(true) //保存按钮是否可用
const examinedisabled = ref(false) //审核按钮是否可见
const dataLoaded = ref(false) //是否加载网页
const tagLoaded = ref(true) //是否加载影像标签
//点击节点更新使用时间
const clickuptime = async (pid: string) => {
await ultrasoniccomApi.upreporttemplatetime(pid)
}
// 是否弹窗
const dialogTableVisible = ref(false)
//表示自定义弹窗点击的按钮名称
const btncleckname = ref()
//自定义弹窗点击方法 获取按钮名称
const handleButtonClick = (buttonName) => {
if (buttonName == '覆盖') {
zdjl.value = strzdjl
sj.value = strsj
} else if (buttonName == '追加') {
let lszdjl: string = zdjl.value
let lssj: string = sj.value
zdjl.value = lszdjl + strzdjl
sj.value = lssj + strsj
}
dialogTableVisible.value = false
console.log('获取到父节点' + pid)
clickuptime(pid)
}
//调用删除or更新标识实体集合
const updateexamineimage = ref<updateexamineimageVO[]>([])
//备注
const notes = ref()
//保存
const save = async () => {
try {
// 二次确认
await message.delConfirm('是否进行保存', '确认')
let timesta = new Date()
var localDateTime = new Date(timesta.getTime()).toISOString() // 转换为ISO格式的字符串
localDateTime = localDateTime.slice(0, localDateTime.length - 1)
console.log('当前时间' + localDateTime)
examineFormVO.value.id = ID.toString()
examineFormVO.value.examDescription = sj.value
examineFormVO.value.diagResults = zdjl.value
examineFormVO.value.notes = notes.value
examineFormVO.value.diagFlag = radio1.value
examineFormVO.value.diagDoctor = Profilevo.value.doctorname
examineFormVO.value.diagDoctorId = Profilevo.value.doctorID
// examineFormVO.value.reviewDoctor = Profilevo.value.username
examineFormVO.value.reportstatus = '已分析'
// examineFormVO.value.diagDate=localDateTime
// examineFormVO.value.reviewDate=dateTime
const response = await PatientexamlistApi.examineupdatelist(examineFormVO.value)
// 根据code判断接口调用是否成功
if (response) {
message.alertSuccess('保存成功')
// 接口调用成功可以根据需要处理返回的data数据
console.log('接口调用成功')
console.log('data:', response.data)
//查询患者信息 根据ID
getPatientexamlist(ID)
emit('success')
} else {
// 接口调用失败,根据具体情况处理错误
console.error('接口调用失败:', response.msg)
}
} catch (error) {
// 处理异常情况,例如接口调用失败或其他错误
console.error('接口调用失败:', error)
}
}
// 审核
const examine = async () => {
if (applyFormVO.value.reportstatus === '已分析') {
const response = await PatientexamlistApi.examine(ID.toString())
if (response) {
message.alertSuccess('审核成功')
//查询患者信息 根据ID
getPatientexamlist(ID)
emit('success')
}
} else if (applyFormVO.value.reportstatus === '已审核') {
message.warning('已经审核,无需再次审核')
return
} else {
message.warning('请先进行保存')
return
}
}
// 计算年龄
const age = ref()
const calculateAge = (birthdate) => {
if (!birthdate) {
age.value = null
return
}
const today = new Date()
const birth = new Date(birthdate)
let yearsDiff = today.getFullYear() - birth.getFullYear()
// Check if the birthday hasn't occurred yet this year
const hasBirthdayPassed =
today.getMonth() > birth.getMonth() ||
(today.getMonth() === birth.getMonth() && today.getDate() >= birth.getDate())
if (!hasBirthdayPassed) {
yearsDiff--
}
age.value = yearsDiff
}
//基本信息
const applyFormVO = ref<PatientexamlistVO>({} as PatientexamlistVO)
//下拉模版类别
const fordevicemValue = ref('')
//下拉清除
const selectclear = async () => {
//选择模版后 刷新接口
//通用
const dd = await ultrasoniccomApi.getreporttemplatelist('', '', '')
treeData.value = dd
const pridate = await ultrasoniccomApi.getreporttemplatelist('', '', '1')
privateData.value = pridate
}
const fordevicemData = ref<any[]>([])
const formRules = reactive({})
const formRef = ref() // 表单 Ref
//用户信息的table页
const activeName = ref('first')
//阴性阳性
const radio1 = ref('')
const cancelSelection = () => {
radio1.value = ''
}
//诊断结论
const zdjl = ref('')
//所见
const sj = ref('')
//树相关
const selectTree = ref()
// 通用树数据
const treeData = ref([])
// 私有树数据
const privateData = ref([])
// 树配置项
const treeDefaultProps = {
children: 'children',
label: 'tempname'
}
//当前选中节点的值
let strzdjl: string = ''
let strsj: string = ''
let pid: string = '' //当前节点的父id
// 树节点选中事件
const handleTreeNodeClick = async (data) => {
strzdjl = data.diagResults
strsj = data.examDescription
pid = data.pid
console.log('父节点' + data.pid)
//判断节点类型的不需要弹
if (data.dataType === '0') {
dialogTableVisible.value = true
}
}
//下拉选择事件
const handleselectchange = async () => {
console.log(fordevicemValue.value)
if (fordevicemValue.value) {
//选择模版后 刷新接口
//通用
const dd = await ultrasoniccomApi.getreporttemplatelist('', String(fordevicemValue.value), '')
treeData.value = dd
const pridate = await ultrasoniccomApi.getreporttemplatelist(
'',
String(fordevicemValue.value),
'1'
)
privateData.value = pridate
}
}
//患者主键
let ID: number
//orgid
const orgId = ref('')
//regid
const regId = ref('')
const examid = ref('')
//内嵌网页加载增加时间戳 防止缓存
const newSrc = ref('')
/** 打开弹窗 */
const open = async (id: number, orgid: string, regid: string, examId: string, isLoaded: string) => {
resetForm()
//判断是否隐藏影像标签
if (isLoaded == '1') {
tagLoaded.value = false
activeName.value = 'second'
} else {
tagLoaded.value = true
activeName.value = 'first'
}
console.log('orgid' + orgid)
console.log('regid' + regid)
console.log('id' + id)
orgId.value = orgid
regId.value = regid
examid.value = examId
ID = id
dialogVisible.value = true
dialogTitle.value = '书写报告(影像)'
// 提交请求
formLoading.value = true
try {
//通用
const dd = await ultrasoniccomApi.getreporttemplatelist('', String(fordevicemValue.value), '')
treeData.value = dd
console.log('返回值1' + dd)
console.log('返回值2' + treeData.value)
//私有
const pridate = await ultrasoniccomApi.getreporttemplatelist(
'',
String(fordevicemValue.value),
'1'
)
privateData.value = pridate
//查询患者信息 根据ID
getPatientexamlist(id)
//获取登录人信息
getlogininfo()
iframeData()
// 延迟1秒后加载iframe
setTimeout(() => {
dataLoaded.value = true // 确保iframe只在弹窗打开时加载
}, 200)
} finally {
formLoading.value = false
}
}
// 加载网页请求的数据
const iframeData = async () => {
try {
const response = await ultrasoniccomApi.getdcmlist(examid.value, orgId.value, regId.value)
if (response) {
//给打开的内嵌html 传递参数
var localData = {
regid: '', // 这里的 'someNumber' 应该替换为实际的数值
orgId: '', // 这里的 'someOrgId' 应该替换为实际的组织ID
maxSize: 10,
do: response
}
// 在存入新数据之前,先删除原有的'data'项
localStorage.removeItem('data')
// 将对象转换为JSON字符串
var localStorageData = JSON.stringify(localData)
localStorage.setItem('data', localStorageData)
const Src = `/static/dicom/dicomViewPc1.html?t=${new Date().getTime()}`
newSrc.value = Src
} else {
// 如果status不是success可以根据需要处理错误情况
console.error('Request did not succeed:', response.data)
}
// dataLoaded.value = true // 请求完成后无论成功与否都设置dataLoaded为true
} catch (error) {
console.error('Error fetching data:', error)
// dataLoaded.value = true // 即使发生错误也设置dataLoaded为true以便可以显示错误信息
}
}
//查询患者信息 根据ID
const getPatientexamlist = async (id: number) => {
const data = await PatientexamlistApi.getPatientexamlist(id)
applyFormVO.value = data
//阳性阴性 赋值
radio1.value = applyFormVO.value.diagFlag
zdjl.value = applyFormVO.value.diagResults
sj.value = applyFormVO.value.examDescription
notes.value = applyFormVO.value.notes
calculateAge(applyFormVO.value.birthday)
if (applyFormVO.value.reportstatus == '已分检' || applyFormVO.value.reportstatus == '待分析') {
savedisabled.value = false
} else {
savedisabled.value = true
}
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
//打印方法 暂时不需要 使用v-print
const PrintForm = () => {
// window.print()
// 发送操作成功的事件
emit('success')
}
//获取当前登录人信息
const getlogininfo = async () => {
Profilevo.value = await getUserProfile()
console.log('审核是否可见' + Profilevo.value.isimageexamine)
if (Profilevo.value.isimageexamine === '1') {
examinedisabled.value = true
}
}
/** 重置表单 */
const resetForm = () => {
applyFormVO.value = {} as PatientexamlistVO
pid = ''
strzdjl = ''
strsj = ''
activeName.value = 'first'
updateexamineimage.value = []
selectTree.value = ''
treeData.value = []
privateData.value = []
fordevicemData.value = []
fordevicemValue.value = ''
upFJApplyformVO.value = []
formRef.value?.resetFields()
orgId.value = ''
regId.value = ''
}
</script>
<style>
/* .my-container-yx {
height: 100vh;
width: 100vw;
}
*/ /* 报告区域 左侧模版选择字体大小 */
.treeStyle {
font-size: 20px;
}
/* 分割线内部的间距 */
.el-divider--horizontal {
margin: 6px;
}
/* 阴性 阳性 */
.radio-group-wrapper {
display: flex;
justify-content: flex-end;
margin-top: 10px; /* 调整上方外边距 */
margin-right: 33px;
}
/* 诊断医生等样式 */
.form-row-yx {
display: flex;
justify-content: space-around; /* 将元素左右对齐 */
margin-top: 10px;
margin-left: 100px;
}
</style>