FlowBL/src/views/dicomForm/dicomViewForm.vue
2024-08-15 23:07:10 +08:00

659 lines
21 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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 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">
<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">
<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="true"
: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="true"
: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="5"
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="5"
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: 13px"
@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: 13px"
@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: 'DicomViewForm' })
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 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.username
// 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)
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
) => {
resetForm()
const Src = `/static/dicom/dicomViewPc1.html?t=${new Date().getTime()}`
// const Src="D:\pacs\vue\FlowVue-1\dist-prod\dicom\dicomViewPc1.html"+"?"+new Date().getTime()
newSrc.value = Src
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()
} 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
do: response
}
// 在存入新数据之前,先删除原有的'data'项
localStorage.removeItem('data')
// 将对象转换为JSON字符串
var localStorageData = JSON.stringify(localData)
localStorage.setItem('data', localStorageData)
} 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.isexamine)
if (Profilevo.value.isexamine === '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>