|
|
@@ -1,16 +1,17 @@
|
|
|
<template>
|
|
|
- <div class="app-container">
|
|
|
+ <div class="detail-container">
|
|
|
<!-- 页面头部 -->
|
|
|
<div class="detail-header">
|
|
|
+ <h2 class="detail-title">处方订单详情</h2>
|
|
|
<el-button
|
|
|
- type="text"
|
|
|
+ type="primary"
|
|
|
icon="el-icon-arrow-left"
|
|
|
@click="goBack"
|
|
|
- class="back-btn"
|
|
|
+ class="back-button"
|
|
|
+ plain
|
|
|
>
|
|
|
返回列表
|
|
|
</el-button>
|
|
|
- <h2 class="detail-title">处方订单详情</h2>
|
|
|
</div>
|
|
|
|
|
|
<!-- 选项卡 -->
|
|
|
@@ -18,134 +19,180 @@
|
|
|
<!-- 详细信息选项卡 -->
|
|
|
<el-tab-pane label="详细信息" name="detail">
|
|
|
<div class="detail-content" v-loading="detailLoading">
|
|
|
- <el-card class="detail-card">
|
|
|
+ <div class="detail-card">
|
|
|
<div class="detail-info">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <div class="info-item">
|
|
|
- <label>处方编号：</label>
|
|
|
- <span>{{ prescriptionDetail.serialNo || '-' }}</span>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div class="info-item">
|
|
|
- <label>医院名称：</label>
|
|
|
- <span>{{ prescriptionDetail.hospitalName || '-' }}</span>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <div class="info-item">
|
|
|
- <label>药店名称：</label>
|
|
|
- <span>{{ prescriptionDetail.storeName || '-' }}</span>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div class="info-item">
|
|
|
- <label>患者姓名：</label>
|
|
|
- <span>{{ prescriptionDetail.userFamilyName || '-' }}</span>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <div class="info-item">
|
|
|
- <label>患者手机号：</label>
|
|
|
- <span>{{ prescriptionDetail.userFamilyPhone || '-' }}</span>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div class="info-item">
|
|
|
- <label>患者性别：</label>
|
|
|
- <span>{{ getGenderText(prescriptionDetail.userFamilyGender) }}</span>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <div class="info-item">
|
|
|
- <label>患者年龄：</label>
|
|
|
- <span>{{ prescriptionDetail.userFamilyAge || '-' }}</span>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div class="info-item">
|
|
|
- <label>医生姓名：</label>
|
|
|
- <span>{{ prescriptionDetail.doctorName || '-' }}</span>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <div class="info-item">
|
|
|
- <label>医生科室：</label>
|
|
|
- <span>{{ prescriptionDetail.doctorOffice || '-' }}</span>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div class="info-item">
|
|
|
- <label>审核状态：</label>
|
|
|
- <span>{{ getAuditStatusText(prescriptionDetail.auditStatus) }}</span>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <div class="info-item">
|
|
|
- <label>审方药师：</label>
|
|
|
- <span>{{ prescriptionDetail.auditApothecaryName || '-' }}</span>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div class="info-item">
|
|
|
- <label>审方时间：</label>
|
|
|
- <span>{{ parseTime(prescriptionDetail.auditTime) || '-' }}</span>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="24">
|
|
|
- <div class="info-item">
|
|
|
- <label>诊断标签：</label>
|
|
|
- <span>{{ prescriptionDetail.tags || '-' }}</span>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="24">
|
|
|
- <div class="info-item">
|
|
|
- <label>备注：</label>
|
|
|
- <span>{{ prescriptionDetail.memo || '-' }}</span>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="24">
|
|
|
- <div class="info-item">
|
|
|
- <label>说明：</label>
|
|
|
- <span>{{ prescriptionDetail.remarks || '-' }}</span>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <div class="info-item">
|
|
|
- <label>创建时间：</label>
|
|
|
- <span>{{ parseTime(prescriptionDetail.createdTime) || '-' }}</span>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div class="info-item">
|
|
|
- <label>更新时间：</label>
|
|
|
- <span>{{ parseTime(prescriptionDetail.updatedTime) || '-' }}</span>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ <div class="info-grid">
|
|
|
+ <div class="info-item">
|
|
|
+ <label>用户ID：</label>
|
|
|
+ <span>{{ prescriptionDetail.userId || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>处方ID：</label>
|
|
|
+ <span>{{ prescriptionDetail.pid || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>处方编号：</label>
|
|
|
+ <span>{{ prescriptionDetail.serialNo || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>问诊单ID：</label>
|
|
|
+ <span>{{ prescriptionDetail.diagnosisId || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>商城订单ID：</label>
|
|
|
+ <span>{{ prescriptionDetail.storeOrderId || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>服务类型：</label>
|
|
|
+ <span>{{ getServiceTypeText(prescriptionDetail.serviceType) }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>是否需要审方：</label>
|
|
|
+ <span>{{ getYesNoText(prescriptionDetail.isExamine) }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>来源：</label>
|
|
|
+ <span>{{ getSourceText(prescriptionDetail.souceFrom) }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>是否孕妇：</label>
|
|
|
+ <span>{{ getYesNoText(prescriptionDetail.isPregnantWoman) }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>是否哺乳期：</label>
|
|
|
+ <span>{{ getYesNoText(prescriptionDetail.isLactation) }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>开方情况：</label>
|
|
|
+ <span>{{ getPrescriptionStatusText(prescriptionDetail.prescriptionStatus) }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>就诊人姓名：</label>
|
|
|
+ <span>{{ prescriptionDetail.userFamilyName || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>就诊人身份证：</label>
|
|
|
+ <span>{{ prescriptionDetail.userFamilyIdCard || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>就诊人年龄：</label>
|
|
|
+ <span>{{ prescriptionDetail.userFamilyAge || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>就诊人性别：</label>
|
|
|
+ <span>{{ getGenderText(prescriptionDetail.userFamilyGender) }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>就诊人手机号：</label>
|
|
|
+ <span>{{ prescriptionDetail.userFamilyPhone || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>关系：</label>
|
|
|
+ <span>{{ getRelationshipText(prescriptionDetail.relationship) }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>就诊人住址：</label>
|
|
|
+ <span>{{ prescriptionDetail.userFamilyAddr || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>医院名称：</label>
|
|
|
+ <span>{{ prescriptionDetail.hospitalName || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>药店ID：</label>
|
|
|
+ <span>{{ prescriptionDetail.storeId || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>药店名称：</label>
|
|
|
+ <span>{{ prescriptionDetail.storeName || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>医生ID：</label>
|
|
|
+ <span>{{ prescriptionDetail.doctorId || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>医生姓名：</label>
|
|
|
+ <span>{{ prescriptionDetail.doctorName || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>医生科室：</label>
|
|
|
+ <span>{{ prescriptionDetail.doctorOffice || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>医生签名时间：</label>
|
|
|
+ <span>{{ parseTime(prescriptionDetail.doctorSignTime) || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>诊断标签：</label>
|
|
|
+ <span>{{ prescriptionDetail.tags || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>处方状态：</label>
|
|
|
+ <span>{{ getStatusText(prescriptionDetail.status) }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>审核状态：</label>
|
|
|
+ <span>{{ getAuditStatusText(prescriptionDetail.auditStatus) }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>审方药师：</label>
|
|
|
+ <span>{{ prescriptionDetail.auditApothecaryName || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>审方时间：</label>
|
|
|
+ <span>{{ parseTime(prescriptionDetail.auditTime) || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>审核不通过理由：</label>
|
|
|
+ <span>{{ prescriptionDetail.reason || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>图片附件URL：</label>
|
|
|
+ <span>{{ prescriptionDetail.imgList || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>三方跳转地址：</label>
|
|
|
+ <span>{{ prescriptionDetail.thirdReturnUrl || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>问诊知情确认页面URL：</label>
|
|
|
+ <span>{{ prescriptionDetail.jumpUrl || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>处方图片地址：</label>
|
|
|
+ <span>{{ prescriptionDetail.dstFilePath || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>备注：</label>
|
|
|
+ <span>{{ prescriptionDetail.memo || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>说明：</label>
|
|
|
+ <span>{{ prescriptionDetail.remarks || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>问诊时间：</label>
|
|
|
+ <span>{{ parseTime(prescriptionDetail.createTime) || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>开方时间：</label>
|
|
|
+ <span>{{ parseTime(prescriptionDetail.createdTime) || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>更新时间：</label>
|
|
|
+ <span>{{ parseTime(prescriptionDetail.updateTime) || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 药品列表 -->
|
|
|
- <div class="drug-list-title">药品列表</div>
|
|
|
- <el-table :data="prescriptionDetail.drugRspList || []" border style="width: 100%; margin-bottom: 20px;">
|
|
|
+ <!-- 药品列表 -->
|
|
|
+ <div class="list-title">药品列表</div>
|
|
|
+ <el-table
|
|
|
+ :data="prescriptionDetail.drugRspList || []"
|
|
|
+ border
|
|
|
+ style="width: 100%; margin-bottom: 20px;"
|
|
|
+ :empty-text="prescriptionDetail.drugRspList && prescriptionDetail.drugRspList.length === 0 ? '暂无药品信息' : ''"
|
|
|
+ >
|
|
|
<el-table-column prop="drugCommonName" label="药品通用名" />
|
|
|
<el-table-column prop="drugName" label="药品名称" />
|
|
|
<el-table-column prop="amount" label="药品数量" width="100" />
|
|
|
@@ -154,29 +201,22 @@
|
|
|
<el-table-column prop="commodityCode" label="三方商品编码" width="120" />
|
|
|
<el-table-column prop="medicineId" label="系统药品ID" width="120" />
|
|
|
</el-table>
|
|
|
+
|
|
|
+ <!-- 问诊答案列表 -->
|
|
|
+ <div class="list-title">问诊答案列表</div>
|
|
|
+ <el-table
|
|
|
+ :data="prescriptionDetail.beforeAiDataList || []"
|
|
|
+ border
|
|
|
+ style="width: 100%; margin-bottom: 20px;"
|
|
|
+ :empty-text="prescriptionDetail.beforeAiDataList && prescriptionDetail.beforeAiDataList.length === 0 ? '暂无问诊答案信息' : ''"
|
|
|
+ >
|
|
|
+ <el-table-column prop="subjectId" label="题目ID" width="80" />
|
|
|
+ <el-table-column prop="title" label="题目" />
|
|
|
+ <el-table-column prop="answer" label="答案" />
|
|
|
+ <el-table-column prop="answerMedicine" label="用药信息" width="150" />
|
|
|
+ </el-table>
|
|
|
</div>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
- </el-tab-pane>
|
|
|
-
|
|
|
- <!-- 问诊信息选项卡 -->
|
|
|
- <el-tab-pane label="问诊信息" name="consultation">
|
|
|
- <div class="consultation-content" v-loading="consultationLoading">
|
|
|
- <el-card class="consultation-card">
|
|
|
- <el-table :data="consultationTableData" border style="width: 100%; margin-bottom: 20px;">
|
|
|
- <el-table-column prop="label" label="字段名称" width="200" />
|
|
|
- <el-table-column prop="value" label="字段值" />
|
|
|
- </el-table>
|
|
|
-
|
|
|
- <!-- 答案列表 -->
|
|
|
- <div class="answer-list-title">答案列表</div>
|
|
|
- <el-table :data="answerList || []" border style="width: 100%">
|
|
|
- <!-- <el-table-column prop="subjectId" label="题目ID" width="100" /> -->
|
|
|
- <el-table-column prop="title" label="问题" />
|
|
|
- <el-table-column prop="answer" label="答案" />
|
|
|
- <el-table-column prop="answerMedicine" label="存问诊用药信息选择" />
|
|
|
- </el-table>
|
|
|
- </el-card>
|
|
|
+
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
|
|
|
@@ -185,6 +225,7 @@
|
|
|
<div class="chat-content" v-loading="chatLoading">
|
|
|
<el-card class="chat-card">
|
|
|
<div class="chat-container">
|
|
|
+ <!-- 聊天消息列表 -->
|
|
|
<div
|
|
|
v-for="(message, index) in chatMessages"
|
|
|
:key="index"
|
|
|
@@ -197,9 +238,17 @@
|
|
|
<el-avatar :size="32" :src="doctorAvatar">医</el-avatar>
|
|
|
</div>
|
|
|
<div class="message-bubble doctor-bubble">
|
|
|
+ <!-- type=1: 纯文本内容 -->
|
|
|
<div class="message-content" v-if="message.type === 1">
|
|
|
- {{ message.content }}
|
|
|
+ <!-- 检查是否为处方信息 -->
|
|
|
+ <template v-if="isPrescriptionContent(message.content)">
|
|
|
+ <PrescriptionCard :prescriptionData="parsePrescriptionContent(message.content)" />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ {{ message.content }}
|
|
|
+ </template>
|
|
|
</div>
|
|
|
+ <!-- type=2: 图片内容 -->
|
|
|
<div class="message-content" v-else-if="message.type === 2">
|
|
|
<el-image
|
|
|
:src="message.content"
|
|
|
@@ -208,6 +257,20 @@
|
|
|
:preview-src-list="[message.content]"
|
|
|
/>
|
|
|
</div>
|
|
|
+ <!-- type=3: JSON数据渲染 -->
|
|
|
+ <div class="message-content" v-else-if="message.type === 3">
|
|
|
+ <template v-if="isPrescriptionContent(message.content)">
|
|
|
+ <PrescriptionCard :prescriptionData="parsePrescriptionContent(message.content)" />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <pre class="json-content">{{ formatJsonContent(message.content) }}</pre>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <!-- type=4: 格式化文本（HTML标签解析） -->
|
|
|
+ <div class="message-content" v-else-if="message.type === 4">
|
|
|
+ <div class="formatted-text" v-html="message.content"></div>
|
|
|
+ </div>
|
|
|
+ <!-- 其他类型: 默认显示 -->
|
|
|
<div class="message-content" v-else>
|
|
|
{{ message.content }}
|
|
|
</div>
|
|
|
@@ -220,9 +283,17 @@
|
|
|
<!-- 患者消息 - 右对齐 -->
|
|
|
<template v-else>
|
|
|
<div class="message-bubble patient-bubble">
|
|
|
+ <!-- type=1: 纯文本内容 -->
|
|
|
<div class="message-content" v-if="message.type === 1">
|
|
|
- {{ message.content }}
|
|
|
+ <!-- 检查是否为处方信息 -->
|
|
|
+ <template v-if="isPrescriptionContent(message.content)">
|
|
|
+ <PrescriptionCard :prescriptionData="parsePrescriptionContent(message.content)" />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ {{ message.content }}
|
|
|
+ </template>
|
|
|
</div>
|
|
|
+ <!-- type=2: 图片内容 -->
|
|
|
<div class="message-content" v-else-if="message.type === 2">
|
|
|
<el-image
|
|
|
:src="message.content"
|
|
|
@@ -231,6 +302,20 @@
|
|
|
:preview-src-list="[message.content]"
|
|
|
/>
|
|
|
</div>
|
|
|
+ <!-- type=3: JSON数据渲染 -->
|
|
|
+ <div class="message-content" v-else-if="message.type === 3">
|
|
|
+ <template v-if="isPrescriptionContent(message.content)">
|
|
|
+ <PrescriptionCard :prescriptionData="parsePrescriptionContent(message.content)" />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <pre class="json-content">{{ formatJsonContent(message.content) }}</pre>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <!-- type=4: 格式化文本（HTML标签解析） -->
|
|
|
+ <div class="message-content" v-else-if="message.type === 4">
|
|
|
+ <div class="formatted-text" v-html="message.content"></div>
|
|
|
+ </div>
|
|
|
+ <!-- 其他类型: 默认显示 -->
|
|
|
<div class="message-content" v-else>
|
|
|
{{ message.content }}
|
|
|
</div>
|
|
|
@@ -243,6 +328,11 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- 空状态提示 -->
|
|
|
+ <div v-if="chatMessages.length === 0 && !chatLoading" class="no-messages">
|
|
|
+ 暂无聊天记录
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
@@ -252,10 +342,14 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getPrescription, getConsultationInfo, getChatMessages } from "@/api/hisStore/storePrescription";
|
|
|
+import { getPrescription, getChatMessages } from "@/api/hisStore/storePrescription";
|
|
|
+import PrescriptionCard from "@/components/PrescriptionCard/index.vue";
|
|
|
|
|
|
export default {
|
|
|
name: "StorePrescriptionDetail",
|
|
|
+ components: {
|
|
|
+ PrescriptionCard
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
// 当前选中的选项卡
|
|
|
@@ -270,8 +364,6 @@ export default {
|
|
|
chatLoading: false,
|
|
|
// 处方详情数据
|
|
|
prescriptionDetail: {},
|
|
|
- // 问诊信息表格数据
|
|
|
- consultationTableData: [],
|
|
|
// 聊天消息数据
|
|
|
chatMessages: [],
|
|
|
// 头像
|
|
|
@@ -302,9 +394,7 @@ export default {
|
|
|
},
|
|
|
/** 选项卡切换 */
|
|
|
handleTabClick(tab) {
|
|
|
- if (tab.name === 'consultation' && this.consultationTableData.length === 0) {
|
|
|
- this.getConsultationInfo();
|
|
|
- } else if (tab.name === 'chat' && this.chatMessages.length === 0) {
|
|
|
+ if (tab.name === 'chat' && this.chatMessages.length === 0) {
|
|
|
this.getChatMessages();
|
|
|
}
|
|
|
},
|
|
|
@@ -318,66 +408,6 @@ export default {
|
|
|
this.detailLoading = false;
|
|
|
});
|
|
|
},
|
|
|
- /** 获取问诊信息 */
|
|
|
- getConsultationInfo() {
|
|
|
- this.consultationLoading = true;
|
|
|
- getConsultationInfo(this.preId).then(response => {
|
|
|
- // 将API返回的数据转换为表格格式
|
|
|
- const data = response.data;
|
|
|
- this.consultationTableData = [
|
|
|
- { label: '用户手机号', value: data.memberId || '-' },
|
|
|
- { label: '用户ID', value: data.userId || '-' },
|
|
|
- { label: '服务类型', value: this.getServiceTypeText(data.serviceType) },
|
|
|
- { label: '是否需要审方', value: this.getYesNoText(data.isExamine) },
|
|
|
- { label: '是否孕妇', value: this.getYesNoText(data.isPregnantWoman) },
|
|
|
- { label: '是否哺乳期', value: this.getYesNoText(data.isLactation) },
|
|
|
- { label: '来源', value: this.getSourceText(data.souceFrom) },
|
|
|
- { label: '用药人姓名', value: data.userFamilyName || '-' },
|
|
|
- { label: '身份证', value: data.userFamilyIdCard || '-' },
|
|
|
- { label: '年龄', value: data.userFamilyAge || '-' },
|
|
|
- { label: '性别', value: this.getGenderText(data.userFamilyGender) },
|
|
|
- { label: '手机号码', value: data.userFamilyPhone || '-' },
|
|
|
- { label: '关系', value: this.getRelationshipText(data.relationship) },
|
|
|
- { label: '就诊人住址', value: data.userFamilyAddr || '-' },
|
|
|
- { label: '图片附件URL', value: data.imgList || '-' },
|
|
|
- { label: '三方跳转地址', value: data.thirdReturnUrl || '-' },
|
|
|
- { label: '创建时间', value: this.parseTime(data.createdTime) || '-' },
|
|
|
- { label: '问诊确认页面URL', value: data.jumpUrl || '-' },
|
|
|
- { label: '开方情况', value: this.getPrescriptionStatusText(data.prescriptionStatus) },
|
|
|
- { label: '未开方原因', value: data.reason || '-' }
|
|
|
- ];
|
|
|
-
|
|
|
- // 处理答案列表
|
|
|
- this.answerList = data.beforeAiDataList || [];
|
|
|
-
|
|
|
- this.consultationLoading = false;
|
|
|
- }).catch(() => {
|
|
|
- this.consultationLoading = false;
|
|
|
- // 如果API调用失败，显示模拟数据
|
|
|
- this.consultationTableData = [
|
|
|
- { label: '用户手机号', value: '13800138000' },
|
|
|
- { label: '用户ID', value: '123456789' },
|
|
|
- { label: '服务类型', value: '0-图文' },
|
|
|
- { label: '是否需要审方', value: '1-需要' },
|
|
|
- { label: '是否孕妇', value: '0-否' },
|
|
|
- { label: '是否哺乳期', value: '0-否' },
|
|
|
- { label: '来源', value: '0-微信小程序' },
|
|
|
- { label: '用药人姓名', value: '张三' },
|
|
|
- { label: '身份证', value: '110101199001011234' },
|
|
|
- { label: '年龄', value: '30' },
|
|
|
- { label: '性别', value: '1-男' },
|
|
|
- { label: '手机号码', value: '13800138000' },
|
|
|
- { label: '关系', value: '1-本人' },
|
|
|
- { label: '就诊人住址', value: '北京市朝阳区' },
|
|
|
- { label: '图片附件URL', value: 'http://example.com/image.jpg' },
|
|
|
- { label: '三方跳转地址', value: 'http://example.com/return' },
|
|
|
- { label: '创建时间', value: '2023-12-01 10:00:00' },
|
|
|
- { label: '问诊确认页面URL', value: 'http://example.com/confirm' },
|
|
|
- { label: '开方情况', value: '1-开方' },
|
|
|
- { label: '未开方原因', value: '-' }
|
|
|
- ];
|
|
|
- });
|
|
|
- },
|
|
|
/** 获取聊天消息 */
|
|
|
getChatMessages() {
|
|
|
this.chatLoading = true;
|
|
|
@@ -386,33 +416,8 @@ export default {
|
|
|
this.chatLoading = false;
|
|
|
}).catch(() => {
|
|
|
this.chatLoading = false;
|
|
|
- // 如果API调用失败，显示模拟数据
|
|
|
- this.chatMessages = [
|
|
|
- {
|
|
|
- content: '医生您好，我最近感觉头痛，想咨询一下',
|
|
|
- target: 1,
|
|
|
- type: 1,
|
|
|
- created_time: '2023-12-01 10:00:00'
|
|
|
- },
|
|
|
- {
|
|
|
- content: '您好，请问头痛持续多长时间了？有其他症状吗？',
|
|
|
- target: 2,
|
|
|
- type: 1,
|
|
|
- created_time: '2023-12-01 10:01:00'
|
|
|
- },
|
|
|
- {
|
|
|
- content: '大概有3天了，还伴有轻微发热',
|
|
|
- target: 1,
|
|
|
- type: 1,
|
|
|
- created_time: '2023-12-01 10:02:00'
|
|
|
- },
|
|
|
- {
|
|
|
- content: '根据您的症状，建议您服用以下药物...',
|
|
|
- target: 2,
|
|
|
- type: 1,
|
|
|
- created_time: '2023-12-01 10:05:00'
|
|
|
- }
|
|
|
- ];
|
|
|
+ // 不显示模拟数据，保持空数组
|
|
|
+ this.chatMessages = [];
|
|
|
});
|
|
|
},
|
|
|
/** 获取性别文本 */
|
|
|
@@ -445,87 +450,236 @@ export default {
|
|
|
const relationships = { '1': '本人', '2': '父母', '3': '配偶', '4': '子女', '5': '其他' };
|
|
|
return relationships[String(value)] || '-';
|
|
|
},
|
|
|
+ /** 检查是否为处方信息 */
|
|
|
+ isPrescriptionContent(content) {
|
|
|
+ // 检查输入是否为有效字符串
|
|
|
+ if (!content || typeof content !== 'string') {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ const parsed = JSON.parse(content);
|
|
|
+ // 检查解析结果是否为对象，且包含必要字段
|
|
|
+ return parsed &&
|
|
|
+ typeof parsed === 'object' &&
|
|
|
+ parsed.id &&
|
|
|
+ parsed.list &&
|
|
|
+ Array.isArray(parsed.list);
|
|
|
+ } catch (e) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 解析处方信息内容 */
|
|
|
+ parsePrescriptionContent(content) {
|
|
|
+ try {
|
|
|
+ return JSON.parse(content);
|
|
|
+ } catch (e) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 格式化JSON内容显示 */
|
|
|
+ formatJsonContent(content) {
|
|
|
+ try {
|
|
|
+ const parsed = JSON.parse(content);
|
|
|
+ return JSON.stringify(parsed, null, 2);
|
|
|
+ } catch (e) {
|
|
|
+ return content;
|
|
|
+ }
|
|
|
+ },
|
|
|
/** 获取开方情况文本 */
|
|
|
getPrescriptionStatusText(value) {
|
|
|
const statuses = { '0': '未开方', '1': '开方', '2': '拒绝' };
|
|
|
return statuses[String(value)] || '-';
|
|
|
+ },
|
|
|
+ /** 获取处方状态文本 */
|
|
|
+ getStatusText(value) {
|
|
|
+ const statuses = { '1': '正常', '2': '已作废' };
|
|
|
+ return statuses[String(value)] || '-';
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+.detail-container {
|
|
|
+ padding: 20px;
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ min-height: 100vh;
|
|
|
+}
|
|
|
+
|
|
|
.detail-header {
|
|
|
display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-bottom: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.back-btn {
|
|
|
- margin-right: 20px;
|
|
|
+ padding: 16px 0;
|
|
|
+ border-bottom: 1px solid #e9ecef;
|
|
|
}
|
|
|
|
|
|
.detail-title {
|
|
|
- margin: 0;
|
|
|
font-size: 20px;
|
|
|
font-weight: 600;
|
|
|
+ color: #212529;
|
|
|
+ margin: 0;
|
|
|
}
|
|
|
|
|
|
-.detail-tabs {
|
|
|
- margin-top: 20px;
|
|
|
+.back-button {
|
|
|
+ background-color: #6c757d;
|
|
|
+ border-color: #6c757d;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
|
|
|
-.detail-content, .consultation-content, .chat-content {
|
|
|
- min-height: 400px;
|
|
|
+.back-button:hover {
|
|
|
+ background-color: #5a6268;
|
|
|
+ border-color: #545b62;
|
|
|
}
|
|
|
|
|
|
-.detail-card, .consultation-card, .chat-card {
|
|
|
- margin-bottom: 20px;
|
|
|
+.detail-tabs {
|
|
|
+ background-color: #ffffff;
|
|
|
border-radius: 8px;
|
|
|
- box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.detail-card {
|
|
|
+ border: none;
|
|
|
+ box-shadow: none;
|
|
|
+ background-color: #ffffff;
|
|
|
}
|
|
|
|
|
|
.detail-info {
|
|
|
- padding: 20px;
|
|
|
+ padding: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 信息网格布局 */
|
|
|
+.info-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
|
+ gap: 16px 24px;
|
|
|
+ padding: 0;
|
|
|
}
|
|
|
|
|
|
.info-item {
|
|
|
- margin-bottom: 15px;
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- min-height: 32px;
|
|
|
+ align-items: flex-start;
|
|
|
+ padding: 12px 0;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+ min-height: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+.info-item:last-child {
|
|
|
+ border-bottom: none;
|
|
|
}
|
|
|
|
|
|
.info-item label {
|
|
|
- font-weight: bold;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
min-width: 120px;
|
|
|
- display: inline-block;
|
|
|
- color: #606266;
|
|
|
+ margin-right: 12px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.5;
|
|
|
}
|
|
|
|
|
|
.info-item span {
|
|
|
- color: #303133;
|
|
|
+ color: #666666;
|
|
|
+ flex: 1;
|
|
|
word-break: break-all;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.5;
|
|
|
+}
|
|
|
+
|
|
|
+.list-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #212529;
|
|
|
+ margin: 32px 0 16px 0;
|
|
|
+ padding: 12px 0;
|
|
|
+ border-bottom: 2px solid #dee2e6;
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ padding-left: 16px;
|
|
|
+ border-radius: 4px 4px 0 0;
|
|
|
+}
|
|
|
+
|
|
|
+/* 表格样式优化 */
|
|
|
+:deep(.el-table) {
|
|
|
+ border: 1px solid #dee2e6;
|
|
|
+ border-radius: 6px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-table th) {
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ color: #495057;
|
|
|
+ font-weight: 600;
|
|
|
+ border-bottom: 1px solid #dee2e6;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-table td) {
|
|
|
+ color: #212529;
|
|
|
+ border-bottom: 1px solid #f1f3f4;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-table tr:hover > td) {
|
|
|
+ background-color: #f8f9fa;
|
|
|
+}
|
|
|
+
|
|
|
+/* 选项卡样式 */
|
|
|
+:deep(.el-tabs__header) {
|
|
|
+ margin: 0;
|
|
|
+ border-bottom: 1px solid #dee2e6;
|
|
|
+ background-color: #f8f9fa;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-tabs__nav-wrap) {
|
|
|
+ padding: 0 24px;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-tabs__item) {
|
|
|
+ color: #6c757d;
|
|
|
+ font-weight: 500;
|
|
|
+ padding: 0 20px;
|
|
|
+ height: 48px;
|
|
|
+ line-height: 48px;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-tabs__item.is-active) {
|
|
|
+ color: #212529;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-tabs__active-bar) {
|
|
|
+ background-color: #495057;
|
|
|
+}
|
|
|
+
|
|
|
+/* 聊天内容样式 */
|
|
|
+.chat-content {
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.chat-card {
|
|
|
+ border: none;
|
|
|
+ box-shadow: none;
|
|
|
+ background-color: #ffffff;
|
|
|
}
|
|
|
|
|
|
.chat-container {
|
|
|
- padding: 20px;
|
|
|
+ padding: 24px;
|
|
|
max-height: 600px;
|
|
|
overflow-y: auto;
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ border-radius: 8px;
|
|
|
}
|
|
|
|
|
|
.message-item {
|
|
|
display: flex;
|
|
|
- margin-bottom: 16px; /* 增加垂直间距 */
|
|
|
+ margin-bottom: 16px;
|
|
|
align-items: flex-start;
|
|
|
}
|
|
|
|
|
|
-/* 医生消息样式 - 左对齐 */
|
|
|
.doctor-message {
|
|
|
justify-content: flex-start;
|
|
|
}
|
|
|
|
|
|
-/* 患者消息样式 - 右对齐 */
|
|
|
.patient-message {
|
|
|
justify-content: flex-end;
|
|
|
}
|
|
|
@@ -536,31 +690,61 @@ export default {
|
|
|
padding: 12px 16px;
|
|
|
position: relative;
|
|
|
margin: 0 10px;
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
.doctor-bubble {
|
|
|
- background: #f5f7fa;
|
|
|
- color: #333;
|
|
|
+ background-color: #ffffff;
|
|
|
+ color: #212529;
|
|
|
+ border: 1px solid #dee2e6;
|
|
|
}
|
|
|
|
|
|
.patient-bubble {
|
|
|
- background: #409eff;
|
|
|
- color: white;
|
|
|
+ background-color: #6c757d;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
|
|
|
.message-content {
|
|
|
word-break: break-word;
|
|
|
line-height: 1.5;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 格式化文本样式 */
|
|
|
+.formatted-text {
|
|
|
+ line-height: 1.6;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.formatted-text br {
|
|
|
+ line-height: 1.8;
|
|
|
+}
|
|
|
+
|
|
|
+/* JSON内容样式 */
|
|
|
+.json-content {
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ border: 1px solid #e9ecef;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 12px;
|
|
|
+ font-family: 'Courier New', monospace;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 1.4;
|
|
|
+ color: #495057;
|
|
|
+ white-space: pre-wrap;
|
|
|
+ word-break: break-all;
|
|
|
+ max-width: 100%;
|
|
|
+ overflow-x: auto;
|
|
|
}
|
|
|
|
|
|
.message-time {
|
|
|
font-size: 12px;
|
|
|
- margin-top: 5px;
|
|
|
+ margin-top: 8px;
|
|
|
text-align: right;
|
|
|
+ opacity: 0.7;
|
|
|
}
|
|
|
|
|
|
.doctor-bubble .message-time {
|
|
|
- color: #909399;
|
|
|
+ color: #6c757d;
|
|
|
}
|
|
|
|
|
|
.patient-bubble .message-time {
|
|
|
@@ -573,42 +757,32 @@ export default {
|
|
|
|
|
|
.no-messages {
|
|
|
text-align: center;
|
|
|
- color: #909399;
|
|
|
- padding: 50px 0;
|
|
|
+ color: #6c757d;
|
|
|
+ padding: 60px 0;
|
|
|
font-size: 14px;
|
|
|
-}
|
|
|
-
|
|
|
-/* 药品列表样式 */
|
|
|
-.drug-list-title {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- margin: 20px 0 10px 0;
|
|
|
- padding-bottom: 10px;
|
|
|
- border-bottom: 1px solid #ebeef5;
|
|
|
-}
|
|
|
-
|
|
|
-/* 答案列表样式 */
|
|
|
-.answer-list-title {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- margin: 20px 0 10px 0;
|
|
|
- padding-bottom: 10px;
|
|
|
- border-bottom: 1px solid #ebeef5;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #dee2e6;
|
|
|
}
|
|
|
|
|
|
/* 响应式设计 */
|
|
|
@media (max-width: 768px) {
|
|
|
+ .detail-container {
|
|
|
+ padding: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
.detail-info {
|
|
|
- padding: 15px;
|
|
|
+ padding: 16px;
|
|
|
}
|
|
|
|
|
|
.info-item {
|
|
|
flex-direction: column;
|
|
|
align-items: flex-start;
|
|
|
+ padding: 8px 0;
|
|
|
}
|
|
|
|
|
|
.info-item label {
|
|
|
- margin-bottom: 5px;
|
|
|
+ margin-bottom: 4px;
|
|
|
min-width: auto;
|
|
|
}
|
|
|
|
|
|
@@ -617,7 +791,12 @@ export default {
|
|
|
}
|
|
|
|
|
|
.chat-container {
|
|
|
- padding: 15px;
|
|
|
+ padding: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-title {
|
|
|
+ margin: 24px 0 12px 0;
|
|
|
+ padding-left: 12px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
zhangqin