From 2431480f5859ef40dfdf0eb19e1ba6ddebbd9ef2 Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期一, 29 十二月 2025 20:06:22 +0800
Subject: [PATCH] 项目页面优化
---
src/views/business/course/components/MedicalAssessmentStage.vue | 533 ++++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 361 insertions(+), 172 deletions(-)
diff --git a/src/views/business/course/components/MedicalAssessmentStage.vue b/src/views/business/course/components/MedicalAssessmentStage.vue
index ece6b8f..e96310a 100644
--- a/src/views/business/course/components/MedicalAssessmentStage.vue
+++ b/src/views/business/course/components/MedicalAssessmentStage.vue
@@ -1,208 +1,397 @@
<template>
- <base-stage :stage-data="stageData" :case-info="caseInfo">
- <template #header>
- <el-alert
- :title="alertTitle"
- :type="alertType"
- :description="alertDescription"
- show-icon
- :closable="false"
- />
- </template>
+ <div class="assessment-detail">
- <el-row :gutter="20" style="margin-top: 20px;">
- <el-col :span="8">
- <el-card>
- <div slot="header" class="card-header">
- <span>璇勪及姒傚喌</span>
- </div>
- <div class="assessment-stats">
- <div class="stat-item">
- <span class="stat-label">璇勪及鐘舵��:</span>
- <el-tag :type="getStatusTag(stageData.status)">
- {{ getStatusText(stageData.status) }}
- </el-tag>
- </div>
- <div class="stat-item">
- <span class="stat-label">璇勪及鍖荤敓:</span>
- <span>{{ stageData.operator || '寰呭垎閰�' }}</span>
- </div>
- <div class="stat-item">
- <span class="stat-label">寮�濮嬫椂闂�:</span>
- <span>{{ formatTime(stageData.updateTime) }}</span>
- </div>
- <div class="stat-item">
- <span class="stat-label">瀹屾垚鏃堕棿:</span>
- <span>{{ formatTime(stageData.completeTime) || '-' }}</span>
- </div>
- </div>
- </el-card>
- </el-col>
- <el-col :span="16">
- <el-card>
- <div slot="header" class="card-header">
- <span>璇勪及椤圭洰杩涘害</span>
- </div>
- <div class="progress-list">
- <div v-for="item in assessmentItems" :key="item.name" class="progress-item">
- <div class="progress-info">
- <span class="item-name">{{ item.name }}</span>
- <span class="item-status">
- <el-tag :type="item.status === 'completed' ? 'success' : 'warning'" size="small">
- {{ item.status === 'completed' ? '宸插畬鎴�' : '寰呰瘎浼�' }}
- </el-tag>
- </span>
- </div>
- <el-progress
- :percentage="item.status === 'completed' ? 100 : 0"
- :show-text="false"
- :status="item.status === 'completed' ? 'success' : 'exception'"
- />
- </div>
- </div>
- </el-card>
- </el-col>
- </el-row>
-
- <el-card style="margin-top: 20px;">
- <div slot="header" class="card-header">
- <span>璇勪及璇︽儏璁板綍</span>
- <el-button type="primary" size="small" @click="handleViewReport">
- 鏌ョ湅璇勪及鎶ュ憡
- </el-button>
+ <el-card class="organ-assessment-card">
+ <div slot="header" class="clearfix">
+ <span>鍣ㄥ畼璇勪及琛�</span>
+ <!-- <el-button
+ v-if="isCoordinator && allOrgansAssessed"
+ style="float: right; margin-left: 10px"
+ type="primary"
+ size="mini"
+ @click="handleCompleteAssessment"
+ >
+ 纭瀹屾垚璇勪及
+ </el-button> -->
+ <!-- <span v-if="!isCoordinator" class="jstitle">
+ 褰撳墠瑙掕壊锛歿{ currentDepartment }}璇勪及浜哄憳
+ </span> -->
</div>
- <el-descriptions :column="2" border>
- <el-descriptions-item label="鐢熺悊鎸囨爣璇勪及">
- {{ assessmentDetails.physiological || '寰呰瘎浼�' }}
- </el-descriptions-item>
- <el-descriptions-item label="鍣ㄥ畼鍔熻兘璇勪及">
- {{ assessmentDetails.organFunction || '寰呰瘎浼�' }}
- </el-descriptions-item>
- <el-descriptions-item label="鎰熸煋鎬х柧鐥呯瓫鏌�">
- {{ assessmentDetails.infectionScreening || '寰呯瓫鏌�' }}
- </el-descriptions-item>
- <el-descriptions-item label="鎭舵�ц偪鐦ょ瓫鏌�">
- {{ assessmentDetails.cancerScreening || '寰呯瓫鏌�' }}
- </el-descriptions-item>
- <el-descriptions-item label="璇勪及缁撹">
- <el-tag :type="assessmentDetails.conclusion ? 'success' : 'warning'">
- {{ assessmentDetails.conclusion || '璇勪及涓�' }}
- </el-tag>
- </el-descriptions-item>
- <el-descriptions-item label="璇勪及鍖荤敓鎰忚">
- {{ assessmentDetails.doctorOpinion || '寰呭～鍐�' }}
- </el-descriptions-item>
- </el-descriptions>
+
+ <el-table
+ :data="organAssessmentList"
+ v-loading="assessmentLoading"
+ style="width: 100%"
+ :row-class-name="getRowClassName"
+ >
+ <el-table-column
+ label="鍣ㄥ畼绫诲瀷"
+ align="center"
+ prop="organType"
+ width="120"
+ >
+ <template slot-scope="scope">
+ <dict-tag
+ :options="organTypeOptions"
+ :value="scope.row.organType"
+ />
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="璇勪及绉戝"
+ align="center"
+ prop="department"
+ width="120"
+ />
+ <el-table-column
+ label="璇勪及浜哄憳"
+ align="center"
+ prop="assessor"
+ width="100"
+ />
+ <el-table-column label="璇勪及鐘舵��" align="center" width="100">
+ <template slot-scope="scope">
+ <el-tag
+ :type="scope.row.assessmentStatus === '1' ? 'success' : 'warning'"
+ size="small"
+ >
+ {{ scope.row.assessmentStatus === "1" ? "宸茶瘎浼�" : "寰呰瘎浼�" }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="鍔熻兘鐘舵��" align="center" width="100">
+ <template slot-scope="scope">
+ <el-tag
+ :type="getFunctionStatusType(scope.row.functionStatus)"
+ size="small"
+ >
+ {{ getFunctionStatusText(scope.row.functionStatus) }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="璇勪及鎰忚"
+ align="center"
+ prop="assessmentOpinion"
+ min-width="150"
+ show-overflow-tooltip
+ />
+ <el-table-column label="璇勪及鏃堕棿" align="center" width="120">
+ <template slot-scope="scope">
+ <span>{{ scope.row.assessmentTime || "-" }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="鎿嶄綔"
+ align="center"
+ width="150"
+ class-name="small-padding fixed-width"
+ >
+ <template slot-scope="scope">
+ <el-button
+ v-if="canAssessOrgan(scope.row)"
+ size="mini"
+ type="text"
+ @click="handleOrganAssess(scope.row)"
+ >{{
+ scope.row.assessmentStatus === "1" ? "鏌ョ湅/淇敼" : "璇勪及"
+ }}</el-button
+ >
+ <el-button v-else size="mini" type="text" disabled
+ >鏃犳潈闄�</el-button
+ >
+ <el-button
+ v-if="isCoordinator"
+ size="mini"
+ type="text"
+ @click="handleViewOrganDetail(scope.row)"
+ >璇︽儏</el-button
+ >
+ </template>
+ </el-table-column>
+ </el-table>
+
+ <!-- 鍣ㄥ畼璇勪及璇︽儏 -->
+ <el-collapse
+ v-model="activeOrgans"
+ accordion
+ class="organ-detail-collapse"
+ >
+ <el-collapse-item
+ v-for="organ in organAssessmentList"
+ :key="organ.organType"
+ :name="organ.organType"
+ :title="getOrganTitle(organ)"
+ >
+ <organ-assessment-form
+ :organ-data="organ"
+ :readonly="!canAssessOrgan(organ)"
+ @save="handleSaveOrganAssessment"
+ />
+ </el-collapse-item>
+ </el-collapse>
</el-card>
- </base-stage>
+
+ <!-- 闄勪欢棰勮寮圭獥 -->
+ <attachment-preview
+ :visible="attachmentVisible"
+ :attachment-list="attachmentList"
+ @close="attachmentVisible = false"
+ />
+ </div>
</template>
<script>
-import BaseStage from './BaseStage.vue';
+// import { getAssessment, updateOrganAssessment, completeAssessment } from "@/api/case/assessment";
+import {
+ getAssessment,
+ updateOrganAssessment,
+ completeAssessment
+} from "./api/mockAssessmentApi";
+
+import OrganAssessmentForm from "./components/OrganAssessmentForm.vue";
+import AttachmentPreview from "./components/AttachmentPreview.vue";
export default {
- name: 'MedicalAssessmentStage',
- components: { BaseStage },
- props: {
- stageData: {
- type: Object,
- default: () => ({})
- },
- caseInfo: {
- type: Object,
- default: () => ({})
- }
- },
- computed: {
- alertTitle() {
- const status = this.stageData.status;
- return status === 'completed' ? '鍖诲璇勪及瀹屾垚' :
- status === 'in_progress' ? '鍖诲璇勪及杩涜涓�' : '寰呭紑濮嬪尰瀛﹁瘎浼�';
- },
- alertType() {
- const status = this.stageData.status;
- return status === 'completed' ? 'success' :
- status === 'in_progress' ? 'warning' : 'info';
- },
- alertDescription() {
- const status = this.stageData.status;
- return status === 'completed' ? '鎵�鏈夊尰瀛﹁瘎浼伴」鐩凡瀹屾垚锛屼緵鑰呯鍚堟崘鐚潯浠�' :
- status === 'in_progress' ? '鍖诲璇勪及姝ｅ湪杩涜涓紝璇峰叧娉ㄨ瘎浼拌繘搴�' : '绛夊緟寮�濮嬪尰瀛﹁瘎浼版祦绋�';
- }
- },
+ name: "AssessmentDetail",
+ components: { OrganAssessmentForm, AttachmentPreview },
data() {
return {
- assessmentItems: [
- { name: '鐢熺悊鎸囨爣璇勪及', status: 'completed' },
- { name: '鍣ㄥ畼鍔熻兘璇勪及', status: 'completed' },
- { name: '鎰熸煋鎬х柧鐥呯瓫鏌�', status: 'completed' },
- { name: '鎭舵�ц偪鐦ょ瓫鏌�', status: 'completed' },
- { name: '閬椾紶鎬х柧鐥呯瓫鏌�', status: 'completed' },
- { name: '蹇冪悊鐘舵�佽瘎浼�', status: 'completed' }
+ // 璇勪及ID
+ assessmentId: undefined,
+ // 璇勪及鏁版嵁
+ assessmentData: {},
+ // 鍣ㄥ畼璇勪及鍒楄〃
+ organAssessmentList: [],
+ // 闄勪欢鍒楄〃
+ attachmentList: [],
+ // 鍔犺浇鐘舵��
+ assessmentLoading: false,
+ // 褰撳墠鐢ㄦ埛淇℃伅
+ currentUser: {
+ id: "001",
+ name: "寮犲尰鐢�",
+ department: "蹇冭剰澶栫",
+ role: "department" // coordinator: 鍗忚皟鍛�, department: 绉戝浜哄憳
+ },
+ // 灞曞紑鐨勫櫒瀹�
+ activeOrgans: [],
+ // 闄勪欢棰勮鍙鎬�
+ attachmentVisible: false,
+ // 瀛楀吀閫夐」
+ genderOptions: [
+ { value: "0", label: "鐢�" },
+ { value: "1", label: "濂�" }
],
- assessmentDetails: {
- physiological: '鍚勯」鐢熺悊鎸囨爣姝ｅ父锛岀鍚堟崘鐚姹�',
- organFunction: '涓昏鍣ㄥ畼鍔熻兘鑹ソ锛屾棤绂佸繉鐥�',
- infectionScreening: '浼犳煋鐥呯瓫鏌ュ潎涓洪槾鎬�',
- cancerScreening: '鏃犳伓鎬ц偪鐦よ抗璞�',
- conclusion: '閫傚悎鍣ㄥ畼鎹愮尞',
- doctorOpinion: '渚涜�呰韩浣撶姸鍐佃壇濂斤紝绗﹀悎鎹愮尞鍖诲鏍囧噯'
- }
+ bloodTypeOptions: [
+ { value: "A", label: "A鍨�" },
+ { value: "B", label: "B鍨�" },
+ { value: "O", label: "O鍨�" },
+ { value: "AB", label: "AB鍨�" }
+ ],
+ assessmentTypeOptions: [
+ { value: "1", label: "鍒濇璇勪及" },
+ { value: "2", label: "鏈�缁堣瘎浼�" }
+ ],
+ organTypeOptions: [
+ { value: "heart", label: "蹇冭剰" },
+ { value: "liver", label: "鑲濊剰" },
+ { value: "kidney", label: "鑲捐剰" },
+ { value: "lung", label: "鑲鸿剰" },
+ { value: "pancreas", label: "鑳拌吅" },
+ { value: "intestine", label: "鑲犻亾" },
+ { value: "cornea", label: "瑙掕啘" },
+ { value: "skin", label: "鐨偆" }
+ ]
};
},
- methods: {
- getStatusText(status) {
- const map = {
- 'completed': '宸插畬鎴�',
- 'in_progress': '杩涜涓�',
- 'pending': '鏈紑濮�'
- };
- return map[status] || '鏈煡';
+ computed: {
+ // 鏄惁鏄崗璋冨憳
+ isCoordinator() {
+ return this.currentUser.role === "coordinator";
},
- handleViewReport() {
- this.$message.info('鏌ョ湅鍖诲璇勪及鎶ュ憡鍔熻兘');
+ // 褰撳墠绉戝
+ currentDepartment() {
+ return this.currentUser.department;
+ },
+ // 鎵�鏈夊櫒瀹樻槸鍚﹂兘宸茶瘎浼�
+ allOrgansAssessed() {
+ return this.organAssessmentList.every(
+ organ => organ.assessmentStatus === "1"
+ );
+ }
+ },
+ created() {
+ this.assessmentId = this.$route.query.id;
+ this.getAssessmentDetail();
+ },
+ methods: {
+ // 鑾峰彇璇勪及璇︽儏 - 浣跨敤Mock鏁版嵁
+ getAssessmentDetail() {
+ this.assessmentLoading = true;
+ getAssessment(this.assessmentId)
+ .then(response => {
+ if (response.code === 200) {
+ this.assessmentData = response.data.caseInfo;
+ this.organAssessmentList = response.data.organAssessments || [];
+ this.attachmentList = response.data.attachments || [];
+ } else {
+ this.$message.error("鑾峰彇璇勪及璇︽儏澶辫触");
+ }
+ this.assessmentLoading = false;
+ })
+ .catch(error => {
+ console.error("鑾峰彇璇勪及璇︽儏澶辫触:", error);
+ this.assessmentLoading = false;
+ this.$message.error("鑾峰彇璇勪及璇︽儏澶辫触");
+ });
+ },
+ // 鐘舵�佽繃婊ゅ櫒
+ statusFilter(status) {
+ const statusMap = {
+ "0": "warning",
+ "1": "primary",
+ "2": "success",
+ "3": "danger"
+ };
+ return statusMap[status] || "info";
+ },
+ statusTextFilter(status) {
+ const statusMap = {
+ "0": "寰呰瘎浼�",
+ "1": "璇勪及涓�",
+ "2": "宸插畬鎴�",
+ "3": "宸插叧闂�"
+ };
+ return statusMap[status] || "鏈煡";
+ },
+ // 鑾峰彇鍔熻兘鐘舵�佺被鍨�
+ getFunctionStatusType(status) {
+ const typeMap = {
+ "1": "success", // 姝ｅ父
+ "2": "warning", // 杞诲害寮傚父
+ "3": "danger", // 閲嶅害寮傚父
+ "4": "info" // 鏃犳硶璇勪及
+ };
+ return typeMap[status] || "info";
+ },
+ // 鑾峰彇鍔熻兘鐘舵�佹枃鏈�
+ getFunctionStatusText(status) {
+ const textMap = {
+ "1": "姝ｅ父",
+ "2": "杞诲害寮傚父",
+ "3": "閲嶅害寮傚父",
+ "4": "鏃犳硶璇勪及"
+ };
+ return textMap[status] || "鏈煡";
+ },
+ // 妫�鏌ユ槸鍚︽湁鏉冮檺璇勪及璇ュ櫒瀹�
+ canAssessOrgan(organ) {
+ if (this.isCoordinator) return true;
+ return organ.department === this.currentDepartment;
+ },
+ // 鑾峰彇琛岀被鍚�
+ getRowClassName({ row }) {
+ return this.canAssessOrgan(row) ? "assessable-row" : "non-assessable-row";
+ },
+ // 鑾峰彇鍣ㄥ畼鏍囬
+ getOrganTitle(organ) {
+ const organName =
+ this.organTypeOptions.find(opt => opt.value === organ.organType)
+ ?.label || organ.organType;
+ return `${organName}璇勪及璇︽儏锛�${organ.department}锛塦;
+ },
+ // 鍣ㄥ畼璇勪及
+ handleOrganAssess(organ) {
+ this.activeOrgans = [organ.organType];
+ },
+ // 鏌ョ湅鍣ㄥ畼璇︽儏
+ handleViewOrganDetail(organ) {
+ this.activeOrgans = [organ.organType];
+ },
+ // 淇濆瓨鍣ㄥ畼璇勪及 - 浣跨敤Mock API
+ handleSaveOrganAssessment(organData) {
+ updateOrganAssessment(organData)
+ .then(response => {
+ if (response.code === 200) {
+ this.$message.success("璇勪及淇濆瓨鎴愬姛");
+ // 鍒锋柊鏁版嵁
+ this.getAssessmentDetail();
+ }
+ })
+ .catch(error => {
+ console.error("淇濆瓨璇勪及澶辫触:", error);
+ this.$message.error("淇濆瓨澶辫触");
+ });
+ },
+ // 鏌ョ湅闄勪欢棰勮
+ handleAttachmentPreview() {
+ this.attachmentVisible = true;
+ },
+ // 瀹屾垚璇勪及 - 浣跨敤Mock API
+ handleCompleteAssessment() {
+ this.$confirm("纭瀹屾垚鎵�鏈夊櫒瀹樿瘎浼板悧锛熷畬鎴愬悗灏嗘棤娉曚慨鏀�", "纭鎿嶄綔", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning"
+ }).then(() => {
+ completeAssessment(this.assessmentId)
+ .then(response => {
+ if (response.code === 200) {
+ this.$message.success("璇勪及瀹屾垚纭鎴愬姛");
+ this.getAssessmentDetail();
+ }
+ })
+ .catch(error => {
+ console.error("瀹屾垚璇勪及澶辫触:", error);
+ this.$message.error("鎿嶄綔澶辫触");
+ });
+ });
}
}
};
</script>
<style scoped>
-.assessment-stats {
- padding: 10px 0;
+.assessment-detail {
+ padding: 20px;
}
-.stat-item {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 15px;
- padding: 8px 0;
- border-bottom: 1px solid #f0f0f0;
+.basic-info-card {
+ margin-bottom: 20px;
}
-.stat-label {
- color: #606266;
- font-weight: 500;
+.organ-assessment-card {
+ margin-bottom: 20px;
}
-.progress-list {
- padding: 10px 0;
+.organ-detail-collapse {
+ margin-top: 20px;
}
-.progress-item {
- margin-bottom: 15px;
+::v-deep .assessable-row {
+ background-color: #f0f9ff;
}
-.progress-info {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 8px;
+::v-deep .non-assessable-row {
+ background-color: #fafafa;
}
-.item-name {
- color: #606266;
- font-size: 14px;
+::v-deep .el-descriptions__label {
+ width: 120px;
+ background-color: #f5f7fa;
+ font-weight: bold;
+}
+
+.fixed-width .el-button {
+ margin: 0 2px;
+}
+.jstitle {
+ float: right;
+ font-size: 18px !important;
+ font-weight: 600;
+ color: #2645f7;
+ font-size: 12px;
}
</style>
--
Gitblit v1.9.3