|
|
@@ -0,0 +1,802 @@
|
|
|
+<template>
|
|
|
+ <div class="detail-container">
|
|
|
+ <!-- 页面头部 -->
|
|
|
+ <div class="detail-header">
|
|
|
+ <h2 class="detail-title">处方订单详情</h2>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-arrow-left"
|
|
|
+ @click="goBack"
|
|
|
+ class="back-button"
|
|
|
+ plain
|
|
|
+ >
|
|
|
+ 返回列表
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 选项卡 -->
|
|
|
+ <el-tabs v-model="activeTab" class="detail-tabs" @tab-click="handleTabClick">
|
|
|
+ <!-- 详细信息选项卡 -->
|
|
|
+ <el-tab-pane label="详细信息" name="detail">
|
|
|
+ <div class="detail-content" v-loading="detailLoading">
|
|
|
+ <div class="detail-card">
|
|
|
+ <div class="detail-info">
|
|
|
+ <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="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" />
|
|
|
+ <el-table-column prop="instructions" label="使用说明" />
|
|
|
+ <el-table-column prop="spec" label="药品规格" />
|
|
|
+ <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>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+
|
|
|
+ <!-- 聊天内容选项卡 -->
|
|
|
+ <el-tab-pane label="聊天内容" name="chat">
|
|
|
+ <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"
|
|
|
+ class="message-item"
|
|
|
+ :class="{ 'patient-message': message.target === 1, 'doctor-message': message.target === 2 }"
|
|
|
+ >
|
|
|
+ <!-- 医生消息 - 左对齐 -->
|
|
|
+ <template v-if="message.target === 2">
|
|
|
+ <div class="message-avatar">
|
|
|
+ <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">
|
|
|
+ <!-- 检查是否为处方信息 -->
|
|
|
+ <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"
|
|
|
+ fit="cover"
|
|
|
+ style="width: 200px; height: 150px;"
|
|
|
+ :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>
|
|
|
+ <div class="message-time">
|
|
|
+ {{ parseTime(message.createdTime) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 患者消息 - 右对齐 -->
|
|
|
+ <template v-else>
|
|
|
+ <div class="message-bubble patient-bubble">
|
|
|
+ <!-- type=1: 纯文本内容 -->
|
|
|
+ <div class="message-content" v-if="message.type === 1">
|
|
|
+ <!-- 检查是否为处方信息 -->
|
|
|
+ <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"
|
|
|
+ fit="cover"
|
|
|
+ style="width: 200px; height: 150px;"
|
|
|
+ :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>
|
|
|
+ <div class="message-time">
|
|
|
+ {{ parseTime(message.createdTime) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="message-avatar">
|
|
|
+ <el-avatar :size="32" :src="userAvatar">患</el-avatar>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 空状态提示 -->
|
|
|
+ <div v-if="chatMessages.length === 0 && !chatLoading" class="no-messages">
|
|
|
+ 暂无聊天记录
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getPrescription, getChatMessages } from "@/api/hisStore/storePrescription";
|
|
|
+import PrescriptionCard from "@/components/PrescriptionCard/index.vue";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "StorePrescriptionDetail",
|
|
|
+ components: {
|
|
|
+ PrescriptionCard
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 当前选中的选项卡
|
|
|
+ activeTab: 'detail',
|
|
|
+ // 处方ID
|
|
|
+ preId: null,
|
|
|
+ // 详细信息加载状态
|
|
|
+ detailLoading: false,
|
|
|
+ // 问诊信息加载状态
|
|
|
+ consultationLoading: false,
|
|
|
+ // 聊天内容加载状态
|
|
|
+ chatLoading: false,
|
|
|
+ // 处方详情数据
|
|
|
+ prescriptionDetail: {},
|
|
|
+ // 聊天消息数据
|
|
|
+ chatMessages: [],
|
|
|
+ // 头像
|
|
|
+ doctorAvatar: '',
|
|
|
+ userAvatar: '',
|
|
|
+ // 性别选项
|
|
|
+ genderOptions: [
|
|
|
+ { dictLabel: "未知", dictValue: "0" },
|
|
|
+ { dictLabel: "男", dictValue: "1" },
|
|
|
+ { dictLabel: "女", dictValue: "2" }
|
|
|
+ ],
|
|
|
+ // 审核状态选项
|
|
|
+ auditStatusOptions: [
|
|
|
+ { dictLabel: "待审核", dictValue: "1" },
|
|
|
+ { dictLabel: "审核通过", dictValue: "2" },
|
|
|
+ { dictLabel: "审核不通过", dictValue: "3" }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.preId = this.$route.params.preId;
|
|
|
+ this.getPrescriptionDetail();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /** 返回列表 */
|
|
|
+ goBack() {
|
|
|
+ this.$router.go(-1);
|
|
|
+ },
|
|
|
+ /** 选项卡切换 */
|
|
|
+ handleTabClick(tab) {
|
|
|
+ if (tab.name === 'chat' && this.chatMessages.length === 0) {
|
|
|
+ this.getChatMessages();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 获取处方详情 */
|
|
|
+ getPrescriptionDetail() {
|
|
|
+ this.detailLoading = true;
|
|
|
+ getPrescription(this.preId).then(response => {
|
|
|
+ this.prescriptionDetail = response.data;
|
|
|
+ this.detailLoading = false;
|
|
|
+ }).catch(() => {
|
|
|
+ this.detailLoading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 获取聊天消息 */
|
|
|
+ getChatMessages() {
|
|
|
+ this.chatLoading = true;
|
|
|
+ getChatMessages(this.preId).then(response => {
|
|
|
+ this.chatMessages = response.data || [];
|
|
|
+ this.chatLoading = false;
|
|
|
+ }).catch(() => {
|
|
|
+ this.chatLoading = false;
|
|
|
+ // 不显示模拟数据,保持空数组
|
|
|
+ this.chatMessages = [];
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 获取性别文本 */
|
|
|
+ getGenderText(value) {
|
|
|
+ const option = this.genderOptions.find(item => item.dictValue === String(value));
|
|
|
+ return option ? option.dictLabel : '-';
|
|
|
+ },
|
|
|
+ /** 获取审核状态文本 */
|
|
|
+ getAuditStatusText(value) {
|
|
|
+ const option = this.auditStatusOptions.find(item => item.dictValue === String(value));
|
|
|
+ return option ? option.dictLabel : '-';
|
|
|
+ },
|
|
|
+ /** 获取服务类型文本 */
|
|
|
+ getServiceTypeText(value) {
|
|
|
+ const types = { '0': '图文', '1': '视频' };
|
|
|
+ return types[String(value)] || '-';
|
|
|
+ },
|
|
|
+ /** 获取是否文本 */
|
|
|
+ getYesNoText(value) {
|
|
|
+ const types = { '0': '否', '1': '是' };
|
|
|
+ return types[String(value)] || '-';
|
|
|
+ },
|
|
|
+ /** 获取来源文本 */
|
|
|
+ getSourceText(value) {
|
|
|
+ const sources = { '0': '微信小程序', '1': 'APP', '2': 'H5', '3': '支付宝小程序' };
|
|
|
+ return sources[String(value)] || '-';
|
|
|
+ },
|
|
|
+ /** 获取关系文本 */
|
|
|
+ getRelationshipText(value) {
|
|
|
+ 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;
|
|
|
+ padding: 16px 0;
|
|
|
+ border-bottom: 1px solid #e9ecef;
|
|
|
+}
|
|
|
+
|
|
|
+.detail-title {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #212529;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.back-button {
|
|
|
+ background-color: #6c757d;
|
|
|
+ border-color: #6c757d;
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.back-button:hover {
|
|
|
+ background-color: #5a6268;
|
|
|
+ border-color: #545b62;
|
|
|
+}
|
|
|
+
|
|
|
+.detail-tabs {
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.detail-card {
|
|
|
+ border: none;
|
|
|
+ box-shadow: none;
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.detail-info {
|
|
|
+ padding: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 信息网格布局 */
|
|
|
+.info-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
|
+ gap: 16px 24px;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.info-item {
|
|
|
+ display: flex;
|
|
|
+ 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: 500;
|
|
|
+ color: #333333;
|
|
|
+ min-width: 120px;
|
|
|
+ margin-right: 12px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.5;
|
|
|
+}
|
|
|
+
|
|
|
+.info-item span {
|
|
|
+ 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: 24px;
|
|
|
+ max-height: 600px;
|
|
|
+ overflow-y: auto;
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.message-item {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ align-items: flex-start;
|
|
|
+}
|
|
|
+
|
|
|
+.doctor-message {
|
|
|
+ justify-content: flex-start;
|
|
|
+}
|
|
|
+
|
|
|
+.patient-message {
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+.message-bubble {
|
|
|
+ max-width: 60%;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 12px 16px;
|
|
|
+ position: relative;
|
|
|
+ margin: 0 10px;
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.doctor-bubble {
|
|
|
+ background-color: #ffffff;
|
|
|
+ color: #212529;
|
|
|
+ border: 1px solid #dee2e6;
|
|
|
+}
|
|
|
+
|
|
|
+.patient-bubble {
|
|
|
+ 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: 8px;
|
|
|
+ text-align: right;
|
|
|
+ opacity: 0.7;
|
|
|
+}
|
|
|
+
|
|
|
+.doctor-bubble .message-time {
|
|
|
+ color: #6c757d;
|
|
|
+}
|
|
|
+
|
|
|
+.patient-bubble .message-time {
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+}
|
|
|
+
|
|
|
+.message-avatar {
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.no-messages {
|
|
|
+ text-align: center;
|
|
|
+ color: #6c757d;
|
|
|
+ padding: 60px 0;
|
|
|
+ font-size: 14px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #dee2e6;
|
|
|
+}
|
|
|
+
|
|
|
+/* 响应式设计 */
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .detail-container {
|
|
|
+ padding: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-info {
|
|
|
+ padding: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-item {
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ padding: 8px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-item label {
|
|
|
+ margin-bottom: 4px;
|
|
|
+ min-width: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .message-bubble {
|
|
|
+ max-width: 80%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container {
|
|
|
+ padding: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-title {
|
|
|
+ margin: 24px 0 12px 0;
|
|
|
+ padding-left: 12px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|