From 96dd34f77d81db58f54e3d0ad4a8cc8082189a61 Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期四, 16 四月 2026 13:52:27 +0800
Subject: [PATCH] 考勤相关更改
---
src/views/business/course/index.vue | 714 ++++++++++++++++++++++++++++++++++-------------------------
1 files changed, 411 insertions(+), 303 deletions(-)
diff --git a/src/views/business/course/index.vue b/src/views/business/course/index.vue
index 90b386a..3a939e1 100644
--- a/src/views/business/course/index.vue
+++ b/src/views/business/course/index.vue
@@ -2,7 +2,7 @@
<div class="donation-process-detail">
<el-card class="process-card">
<div class="process-container">
- <!-- 宸︿晶鏃堕棿绾� -->
+ <!-- 宸︿晶鏃堕棿绾� - 鐙珛鍥哄畾锛屽唴閮ㄥ彲婊氬姩 -->
<div class="timeline-section">
<div class="section-header">
<h3>鎹愮尞杩涚▼鏃堕棿绾�</h3>
@@ -11,45 +11,55 @@
</el-tag>
</div>
- <div class="timeline-container">
- <div
- v-for="stage in processStages"
- :key="stage.key"
- class="timeline-item"
- :class="{
- 'active': activeStage === stage.key,
- 'completed': stage.status === 'completed',
- 'in-progress': stage.status === 'in_progress',
- 'pending': stage.status === 'pending'
- }"
- @click="handleStageClick(stage)"
- >
- <div class="timeline-marker">
- <i v-if="stage.status === 'completed'" class="el-icon-check"></i>
- <i v-else-if="stage.status === 'in_progress'" class="el-icon-loading"></i>
- <i v-else class="el-icon-time"></i>
- </div>
-
- <div class="timeline-content">
- <div class="stage-header">
- <span class="stage-name">{{ stage.name }}</span>
- <el-tag
- size="small"
- :type="getStageStatusTag(stage.status)"
- >
- {{ getStageStatusText(stage.status) }}
- </el-tag>
+ <div class="timeline-scroll-container">
+ <div class="timeline-container">
+ <div
+ v-for="stage in processStages"
+ :key="stage.key"
+ class="timeline-item"
+ :class="{
+ active: activeStage === stage.key,
+ completed: stage.status === 'completed',
+ 'in-progress': stage.status === 'in_progress',
+ pending: stage.status === 'pending'
+ }"
+ @click="handleStageClick(stage)"
+ >
+ <div class="timeline-marker">
+ <i
+ v-if="stage.status === 'completed'"
+ class="el-icon-check"
+ ></i>
+ <i
+ v-else-if="stage.status === 'in_progress'"
+ class="el-icon-loading"
+ ></i>
+ <i v-else class="el-icon-time"></i>
</div>
- <div class="stage-info">
- <div v-if="stage.completeTime" class="time-info">
- <span>瀹屾垚鏃堕棿: {{ formatTime(stage.completeTime) }}</span>
+ <div class="timeline-content">
+ <div class="stage-header">
+ <span class="stage-name">{{ stage.name }}</span>
+ <el-tag
+ size="small"
+ :type="getStageStatusTag(stage.status)"
+ >
+ {{ getStageStatusText(stage.status) }}
+ </el-tag>
</div>
- <div v-if="stage.updateTime" class="time-info">
- <span>鏈�杩戞洿鏂�: {{ formatTime(stage.updateTime) }}</span>
- </div>
- <div v-if="stage.operator" class="operator-info">
- <span>璐熻矗浜�: {{ stage.operator }}</span>
+
+ <div class="stage-info">
+ <div v-if="stage.completeTime" class="time-info">
+ <span
+ >瀹屾垚鏃堕棿: {{ formatTime(stage.completeTime) }}</span
+ >
+ </div>
+ <div v-if="stage.updateTime" class="time-info">
+ <span>鏈�杩戞洿鏂�: {{ formatTime(stage.updateTime) }}</span>
+ </div>
+ <div v-if="stage.operator" class="operator-info">
+ <span>璐熻矗浜�: {{ stage.operator }}</span>
+ </div>
</div>
</div>
</div>
@@ -57,9 +67,9 @@
</div>
</div>
- <!-- 鍙充晶鍐呭鍖哄煙 -->
+ <!-- 鍙充晶鍐呭鍖哄煙 - 鐙珛婊氬姩 -->
<div class="content-section">
- <!-- 妗堜緥鍩烘湰淇℃伅 -->
+ <!-- 妗堜緥鍩烘湰淇℃伅 - 鍥哄畾楂樺害锛屽彲婊氬姩 -->
<div class="basic-info-section">
<div class="section-header">
<h3>妗堜緥鍩烘湰淇℃伅</h3>
@@ -72,88 +82,67 @@
</el-button>
</div>
- <el-descriptions :column="2" border>
- <el-descriptions-item label="妗堜緥缂栧彿">
- {{ caseInfo.caseNo }}
- </el-descriptions-item>
- <el-descriptions-item label="浣忛櫌鍙�">
- {{ caseInfo.hospitalNo }}
- </el-descriptions-item>
- <el-descriptions-item label="鎹愮尞鑰呭鍚�">
- {{ caseInfo.donorName }}
- </el-descriptions-item>
- <el-descriptions-item label="鎬у埆">
- <dict-tag
- :options="dict.type.sys_user_sex"
- :value="parseInt(caseInfo.gender)"
- />
- </el-descriptions-item>
- <el-descriptions-item label="骞撮緞">
- {{ caseInfo.age }} 宀�
- </el-descriptions-item>
- <el-descriptions-item label="琛�鍨�">
- <dict-tag
- :options="dict.type.sys_BloodType"
- :value="caseInfo.bloodType"
- />
- </el-descriptions-item>
- <el-descriptions-item label="鐤剧梾璇婃柇">
- {{ caseInfo.diagnosis }}
- </el-descriptions-item>
- <el-descriptions-item label="妗堜緥鐘舵��">
- <el-tag :type="getOverallStatusTag(caseInfo.status)">
- {{ getStatusText(caseInfo.status) }}
- </el-tag>
- </el-descriptions-item>
- <el-descriptions-item label="鍒涘缓鏃堕棿">
- {{ formatTime(caseInfo.createTime) }}
- </el-descriptions-item>
- <el-descriptions-item label="鐧昏浜�">
- {{ caseInfo.registrant }}
- </el-descriptions-item>
- <el-descriptions-item label="褰撳墠闃舵">
- {{ getCurrentStageName() }}
- </el-descriptions-item>
- </el-descriptions>
+ <div class="basic-info-content">
+ <el-descriptions :column="2" border>
+ <el-descriptions-item label="浣忛櫌鍙�">
+ {{ caseInfo.caseNo }}
+ </el-descriptions-item>
+ <el-descriptions-item label="浣忛櫌鍙�">
+ {{ caseInfo.hospitalNo }}
+ </el-descriptions-item>
+ <el-descriptions-item label="鎹愮尞鑰呭鍚�">
+ {{ caseInfo.donorName }}
+ </el-descriptions-item>
+ <el-descriptions-item label="鎬у埆">
+ <dict-tag
+ :options="dict.type.sys_user_sex"
+ :value="parseInt(caseInfo.gender)"
+ />
+ </el-descriptions-item>
+ <el-descriptions-item label="骞撮緞">
+ {{ caseInfo.age }} 宀�
+ </el-descriptions-item>
+ <el-descriptions-item label="琛�鍨�">
+ <dict-tag
+ :options="dict.type.sys_BloodType"
+ :value="caseInfo.bloodType"
+ />
+ </el-descriptions-item>
+ <el-descriptions-item label="鐤剧梾璇婃柇">
+ {{ caseInfo.diagnosis }}
+ </el-descriptions-item>
+ <el-descriptions-item label="妗堜緥鐘舵��">
+ <el-tag :type="getOverallStatusTag(caseInfo.status)">
+ {{ getStatusText(caseInfo.status) }}
+ </el-tag>
+ </el-descriptions-item>
+ <el-descriptions-item label="鍒涘缓鏃堕棿">
+ {{ formatTime(caseInfo.createTime) }}
+ </el-descriptions-item>
+ <el-descriptions-item label="鐧昏浜�">
+ {{ caseInfo.registrant }}
+ </el-descriptions-item>
+ <el-descriptions-item label="褰撳墠闃舵">
+ {{ getCurrentStageName() }}
+ </el-descriptions-item>
+ </el-descriptions>
+ </div>
</div>
- <!-- 闃舵璇︽儏鍐呭 -->
+ <!-- 闃舵璇︽儏鍐呭 - 鑷�傚簲楂樺害锛屽彲婊氬姩 -->
<div class="stage-detail-section">
<div class="section-header">
<h3>{{ activeStageName }} - 闃舵璇︽儏</h3>
- <div class="stage-actions">
- <el-button
- v-if="activeStageData.status !== 'completed'"
- type="success"
- size="small"
- @click="handleCompleteStage"
- >
- 瀹屾垚闃舵
- </el-button>
- <el-button
- type="primary"
- size="small"
- @click="handleViewDetail"
- >
- 鏌ョ湅璇︽儏
- </el-button>
- <el-button
- v-if="activeStageData.status === 'completed'"
- type="warning"
- size="small"
- @click="handleModifyStage"
- >
- 淇敼淇℃伅
- </el-button>
- </div>
+ <div class="stage-actions"></div>
</div>
<!-- 鍔ㄦ�侀樁娈靛唴瀹� -->
- <div class="stage-content">
+ <div class="stage-content-wrapper">
<component
:is="getStageComponent()"
:stageData="activeStageData"
:caseInfo="caseInfo"
+ :infoid="caseId"
/>
</div>
</div>
@@ -164,19 +153,19 @@
</template>
<script>
-import { getDonationProcessDetail } from './donationProcess';
-import DonorMaintenanceStage from './components/DonorMaintenanceStage';
-import MedicalAssessmentStage from './components/MedicalAssessmentStage';
-import DeathJudgmentStage from './components/DeathJudgmentStage';
-import DonationConfirmStage from './components/DonationConfirmStage';
-import EthicalReviewStage from './components/EthicalReviewStage';
-import OrganAllocationStage from './components/OrganAllocationStage';
-import OrganProcurementStage from './components/OrganProcurementStage';
-import OrganUtilizationStage from './components/OrganUtilizationStage';
+import { getDonationProcessDetail } from "./donationProcess";
+import DonorMaintenanceStage from "./components/DonorMaintenanceStage";
+import MedicalAssessmentStage from "./components/MedicalAssessmentStage";
+import DeathJudgmentStage from "./components/DeathJudgmentStage";
+import DonationConfirmStage from "./components/DonationConfirmStage";
+import EthicalReviewStage from "./components/EthicalReviewStage";
+import OrganAllocationStage from "./components/OrganAllocationStage";
+import OrganProcurementStage from "./components/OrganProcurementStage";
+import OrganUtilizationStage from "./components/OrganUtilizationStage";
import dayjs from "dayjs";
export default {
- name: 'DonationProcessDetail',
+ name: "DonationProcessDetail",
components: {
DonorMaintenanceStage,
MedicalAssessmentStage,
@@ -187,96 +176,97 @@
OrganProcurementStage,
OrganUtilizationStage
},
- dicts: ['sys_user_sex', 'sys_BloodType', 'sys_0_1'],
+ dicts: ["sys_user_sex", "sys_BloodType", "sys_0_1"],
data() {
return {
caseId: null,
caseInfo: {
- id: '',
- caseNo: '',
- hospitalNo: '',
- donorName: '',
- gender: '',
- age: '',
- bloodType: '',
- diagnosis: '',
- status: 'in_progress',
- createTime: '',
- registrant: '',
- currentStage: 'donor_maintenance'
+ id: "",
+ caseNo: "",
+ hospitalNo: "",
+ donorName: "",
+ gender: "",
+ age: "",
+ bloodType: "",
+ diagnosis: "",
+ status: "in_progress",
+ createTime: "",
+ registrant: "",
+ currentStage: "donor_maintenance"
},
processStages: [
{
- key: 'donor_maintenance',
- name: '渚涜�呯淮鎶�',
- status: 'completed',
- completeTime: '2025-12-01 10:00:00',
- updateTime: '2025-12-01 10:00:00',
- operator: '寮犲尰鐢�'
+ key: "donor_maintenance",
+ name: "渚涜�呯淮鎶�",
+ status: "completed",
+ completeTime: "2025-12-01 10:00:00",
+ updateTime: "2025-12-01 10:00:00",
+ operator: "寮犲尰鐢�"
},
{
- key: 'medical_assessment',
- name: '鍖诲璇勪及',
- status: 'completed',
- completeTime: '2025-12-02 14:30:00',
- updateTime: '2025-12-02 14:30:00',
- operator: '鏉庝富浠�'
+ key: "death_judgment",
+ name: "姝讳骸鍒ゅ畾",
+ status: "completed",
+ completeTime: "2025-12-02 14:30:00",
+ updateTime: "2025-12-02 14:30:00",
+ operator: "鐜嬪尰鐢�"
},
{
- key: 'death_judgment',
- name: '姝讳骸鍒ゅ畾',
- status: 'completed',
- completeTime: '2025-12-03 09:15:00',
- updateTime: '2025-12-03 09:15:00',
- operator: '鐜嬪尰鐢�'
+ key: "medical_assessment",
+ name: "鍖诲璇勪及",
+ status: "completed",
+
+ completeTime: "2025-12-03 09:15:00",
+ updateTime: "2025-12-03 09:15:00",
+ operator: "鏉庝富浠�"
},
{
- key: 'donation_confirm',
- name: '鎹愮尞纭',
- status: 'completed',
- completeTime: '2025-12-03 11:00:00',
- updateTime: '2025-12-03 11:00:00',
- operator: '璧靛崗璋冨憳'
+ key: "donation_confirm",
+ name: "鎹愮尞纭",
+ status: "completed",
+ completeTime: "2025-12-03 11:00:00",
+ updateTime: "2025-12-03 11:00:00",
+ operator: "璧靛崗璋冨憳"
},
{
- key: 'ethical_review',
- name: '浼︾悊瀹℃煡',
- status: 'completed',
- completeTime: '2025-12-03 15:20:00',
- updateTime: '2025-12-03 15:20:00',
- operator: '浼︾悊濮斿憳浼�'
+ key: "ethical_review",
+ name: "浼︾悊瀹℃煡",
+ status: "completed",
+ completeTime: "2025-12-03 15:20:00",
+ updateTime: "2025-12-03 15:20:00",
+ operator: "浼︾悊濮斿憳浼�"
},
{
- key: 'organ_allocation',
- name: '鍣ㄥ畼鍒嗛厤',
- status: 'in_progress',
- updateTime: '2025-12-04 10:00:00',
- operator: '鍒嗛厤绯荤粺'
+ key: "organ_allocation",
+ name: "鍣ㄥ畼鍒嗛厤",
+ status: "in_progress",
+ updateTime: "2025-12-04 10:00:00",
+ operator: "鍒嗛厤绯荤粺"
},
{
- key: 'organ_procurement',
- name: '鍣ㄥ畼鑾峰彇',
- status: 'pending',
- operator: '寰呭垎閰�'
+ key: "organ_procurement",
+ name: "鍣ㄥ畼鑾峰彇",
+ status: "pending",
+ operator: "寰呭垎閰�"
},
{
- key: 'organ_utilization',
- name: '鍣ㄥ畼鍒╃敤',
- status: 'pending',
- operator: '寰呭垎閰�'
+ key: "organ_utilization",
+ name: "鍣ㄥ畼鍒╃敤",
+ status: "pending",
+ operator: "寰呭垎閰�"
}
],
- activeStage: 'organ_allocation',
- activeStageName: '鍣ㄥ畼鍒嗛厤',
+ activeStage: "organ_allocation",
+ activeStageName: "鍣ㄥ畼鍒嗛厤",
activeStageData: {},
loading: false
};
},
- computed: {
-
- },
+ computed: {},
created() {
this.caseId = this.$route.query.id;
+ console.log(this.caseId, "this.caseId");
+
if (this.caseId) {
this.getDetail();
} else {
@@ -285,16 +275,16 @@
this.setActiveStage(this.activeStage);
},
methods: {
- getStageComponent() {
+ getStageComponent() {
const componentMap = {
- 'donor_maintenance': 'DonorMaintenanceStage',
- 'medical_assessment': 'MedicalAssessmentStage',
- 'death_judgment': 'DeathJudgmentStage',
- 'donation_confirm': 'DonationConfirmStage',
- 'ethical_review': 'EthicalReviewStage',
- 'organ_allocation': 'OrganAllocationStage',
- 'organ_procurement': 'OrganProcurementStage',
- 'organ_utilization': 'OrganUtilizationStage'
+ donor_maintenance: "DonorMaintenanceStage",
+ death_judgment: "DeathJudgmentStage",
+ medical_assessment: "MedicalAssessmentStage",
+ donation_confirm: "DonationConfirmStage",
+ ethical_review: "EthicalReviewStage",
+ organ_allocation: "OrganAllocationStage",
+ organ_procurement: "OrganProcurementStage",
+ organ_utilization: "OrganUtilizationStage"
};
return componentMap[this.activeStage];
},
@@ -309,8 +299,8 @@
this.setActiveStage(response.data.currentStage);
}
} catch (error) {
- console.error('鑾峰彇鎹愮尞杩涚▼璇︽儏澶辫触:', error);
- this.$message.error('鑾峰彇璇︽儏澶辫触');
+ console.error("鑾峰彇鎹愮尞杩涚▼璇︽儏澶辫触:", error);
+ this.$message.error("鑾峰彇璇︽儏澶辫触");
} finally {
this.loading = false;
}
@@ -318,18 +308,18 @@
// 鐢熸垚妯℃嫙鏁版嵁
generateMockData() {
this.caseInfo = {
- id: '202512001',
- caseNo: 'C202512001',
- hospitalNo: 'D202512001',
- donorName: '寮犱笁',
- gender: '0',
+ id: "202512001",
+ caseNo: "C202512001",
+ hospitalNo: "D202512001",
+ donorName: "寮犱笁",
+ gender: "0",
age: 45,
- bloodType: 'A',
- diagnosis: '鑴戝浼�',
- status: 'in_progress',
- createTime: '2025-12-01 08:00:00',
- registrant: '鏉庡崗璋冨憳',
- currentStage: 'organ_allocation'
+ bloodType: "A",
+ diagnosis: "鑴戝浼�",
+ status: "in_progress",
+ createTime: "2025-12-01 08:00:00",
+ registrant: "鏉庡崗璋冨憳",
+ currentStage: "organ_allocation"
};
},
// 璁剧疆褰撳墠婵�娲婚樁娈�
@@ -339,77 +329,78 @@
if (stage) {
this.activeStageName = stage.name;
this.activeStageData = stage;
+ console.log(this.activeStageData, "this.activeStageData");
}
},
// 澶勭悊闃舵鐐瑰嚮
handleStageClick(stage) {
- if (stage.status !== 'pending') {
+ if (stage.status !== "pending") {
this.setActiveStage(stage.key);
} else {
- this.$message.warning('璇ラ樁娈靛皻鏈紑濮嬶紝鏃犳硶鏌ョ湅璇︽儏');
+ this.$message.warning("璇ラ樁娈靛皻鏈紑濮嬶紝鏃犳硶鏌ョ湅璇︽儏");
}
},
// 鑾峰彇闃舵鐘舵�佹爣绛剧被鍨�
getStageStatusTag(status) {
const map = {
- 'completed': 'success',
- 'in_progress': 'warning',
- 'pending': 'info'
+ completed: "success",
+ in_progress: "warning",
+ pending: "info"
};
- return map[status] || 'info';
+ return map[status] || "info";
},
// 鑾峰彇闃舵鐘舵�佹枃鏈�
getStageStatusText(status) {
const map = {
- 'completed': '宸插畬鎴�',
- 'in_progress': '杩涜涓�',
- 'pending': '鏈紑濮�'
+ completed: "宸插畬鎴�",
+ in_progress: "杩涜涓�",
+ pending: "鏈紑濮�"
};
- return map[status] || '鏈煡';
+ return map[status] || "鏈煡";
},
// 鑾峰彇鏁翠綋鐘舵�佹爣绛剧被鍨�
getOverallStatusTag(status) {
const map = {
- 'completed': 'success',
- 'in_progress': 'warning',
- 'pending': 'info',
- 'terminated': 'danger'
+ completed: "success",
+ in_progress: "warning",
+ pending: "info",
+ terminated: "danger"
};
- return map[status] || 'info';
+ return map[status] || "info";
},
// 鑾峰彇鏁翠綋鐘舵�佹枃鏈�
getStatusText(status) {
const map = {
- 'completed': '宸插畬鎴�',
- 'in_progress': '杩涜涓�',
- 'pending': '鏈紑濮�',
- 'terminated': '宸茬粓姝�'
+ completed: "宸插畬鎴�",
+ in_progress: "杩涜涓�",
+ pending: "鏈紑濮�",
+ terminated: "宸茬粓姝�"
};
- return map[status] || '鏈煡';
+ return map[status] || "鏈煡";
},
// 鏃堕棿鏍煎紡鍖�
formatTime(time) {
- if (!time) return '-';
- return dayjs(time).format('YYYY-MM-DD HH:mm');
+ if (!time) return "-";
+ return dayjs(time).format("YYYY-MM-DD HH:mm");
},
// 鑾峰彇褰撳墠闃舵鍚嶇О
getCurrentStageName() {
const currentStage = this.processStages.find(
- stage => stage.status === 'in_progress'
+ stage => stage.status === "in_progress"
);
- return currentStage ? currentStage.name : '宸插畬鎴�';
+ return currentStage ? currentStage.name : "宸插畬鎴�";
},
// 缂栬緫鍩烘湰淇℃伅
handleEditBasicInfo() {
- this.$message.info('缂栬緫鍩烘湰淇℃伅鍔熻兘');
+ this.$message.info("缂栬緫鍩烘湰淇℃伅鍔熻兘");
},
// 瀹屾垚闃舵
handleCompleteStage() {
- this.$confirm(`纭畾瑕佸畬鎴愩��${this.activeStageName}銆戦樁娈靛悧锛焋, '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
+ this.$confirm(`纭畾瑕佸畬鎴愩��${this.activeStageName}銆戦樁娈靛悧锛焋, "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning"
}).then(() => {
// 鏇存柊褰撳墠闃舵鐘舵��
const currentIndex = this.processStages.findIndex(
@@ -417,32 +408,34 @@
);
if (currentIndex !== -1) {
- this.processStages[currentIndex].status = 'completed';
- this.processStages[currentIndex].completeTime = new Date().toISOString();
+ this.processStages[currentIndex].status = "completed";
+ this.processStages[
+ currentIndex
+ ].completeTime = new Date().toISOString();
// 婵�娲讳笅涓�涓樁娈�
if (currentIndex < this.processStages.length - 1) {
- this.processStages[currentIndex + 1].status = 'in_progress';
+ this.processStages[currentIndex + 1].status = "in_progress";
this.setActiveStage(this.processStages[currentIndex + 1].key);
} else {
- this.caseInfo.status = 'completed';
+ this.caseInfo.status = "completed";
}
- this.$message.success('闃舵宸插畬鎴�');
+ this.$message.success("闃舵宸插畬鎴�");
}
});
},
// 鏌ョ湅璇︽儏
handleViewDetail() {
const routeMap = {
- 'donor_maintenance': '/case/donorMaintenance/detail',
- 'medical_assessment': '/case/medicalAssessment/detail',
- 'death_judgment': '/case/deathJudgment/detail',
- 'donation_confirm': '/case/donationConfirm/detail',
- 'ethical_review': '/case/ethicalReview/detail',
- 'organ_allocation': '/case/organAllocation/detail',
- 'organ_procurement': '/case/organProcurement/detail',
- 'organ_utilization': '/case/organUtilization/detail'
+ donor_maintenance: "/case/donorMaintenance/detail",
+ death_judgment: "/case/deathJudgment/detail",
+ medical_assessment: "/case/medicalAssessment/detail",
+ donation_confirm: "/case/donationConfirm/detail",
+ ethical_review: "/case/ethicalReview/detail",
+ organ_allocation: "/case/organAllocation/detail",
+ organ_procurement: "/case/organProcurement/detail",
+ organ_utilization: "/case/organUtilization/detail"
};
const route = routeMap[this.activeStage];
@@ -466,47 +459,170 @@
padding: 20px;
background-color: #f5f7fa;
min-height: 100vh;
+ box-sizing: border-box;
}
.process-card {
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+ margin-bottom: 20px;
}
.process-container {
display: flex;
- min-height: 800px;
+ min-height: 600px; /* 璁剧疆涓�涓渶灏忛珮搴� */
gap: 20px;
+ align-items: flex-start; /* 椤堕儴瀵归綈 */
}
-/* 宸︿晶鏃堕棿绾挎牱寮� */
+/* 宸︿晶鏃堕棿绾挎牱寮� - 鍥哄畾楂樺害锛屽唴閮ㄦ粴鍔� */
.timeline-section {
- flex: 0 0 300px;
+ flex: 0 0 320px; /* 鍥哄畾瀹藉害 */
+ display: flex;
+ flex-direction: column;
background: white;
border-radius: 6px;
padding: 20px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+ height: calc(120vh - 120px); /* 鏍规嵁瑙嗗彛楂樺害鑷�傚簲 */
+ max-height: 1200px; /* 璁剧疆鏈�澶ч珮搴� */
+ position: sticky; /* 浣跨敤 sticky 瀹氫綅 */
+ top: 20px; /* 璺濈椤堕儴 20px */
}
-.section-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 20px;
- padding-bottom: 15px;
- border-bottom: 1px solid #e4e7ed;
+.timeline-scroll-container {
+ flex: 1;
+ overflow-y: auto; /* 鍐呴儴鍙粴鍔� */
+ margin-top: 20px;
+ padding-right: 8px; /* 涓烘粴鍔ㄦ潯鐣欏嚭绌洪棿 */
}
-.section-header h3 {
- margin: 0;
- color: #303133;
- font-size: 16px;
+.timeline-scroll-container::-webkit-scrollbar {
+ width: 6px;
+}
+
+.timeline-scroll-container::-webkit-scrollbar-track {
+ background: #f1f1f1;
+ border-radius: 3px;
+}
+
+.timeline-scroll-container::-webkit-scrollbar-thumb {
+ background: #c1c1c1;
+ border-radius: 3px;
+}
+
+.timeline-scroll-container::-webkit-scrollbar-thumb:hover {
+ background: #a8a8a8;
}
.timeline-container {
display: flex;
flex-direction: column;
gap: 15px;
+ padding-bottom: 10px;
+}
+
+/* 鍙充晶鍐呭鍖哄煙鏍峰紡 - 鑷�傚簲楂樺害 */
+.content-section {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ min-height: 0; /* 閲嶈锛氬厑璁竑lex瀛愰」鍘嬬缉 */
+}
+
+.basic-info-section {
+ background: white;
+ border-radius: 6px;
+ padding: 20px;
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+ display: flex;
+ flex-direction: column;
+ min-height: 0; /* 閲嶈 */
+}
+
+.basic-info-content {
+ flex: 1;
+ max-height: 300px; /* 鍩烘湰淇℃伅鍖哄煙鏈�澶ч珮搴� */
+ overflow-y: auto; /* 鍩烘湰淇℃伅鍐呴儴鍙粴鍔� */
+ margin-top: 20px;
+ padding-right: 8px;
+}
+
+.basic-info-content::-webkit-scrollbar {
+ width: 6px;
+}
+
+.basic-info-content::-webkit-scrollbar-track {
+ background: #f1f1f1;
+ border-radius: 3px;
+}
+
+.basic-info-content::-webkit-scrollbar-thumb {
+ background: #c1c1c1;
+ border-radius: 3px;
+}
+
+.basic-info-content::-webkit-scrollbar-thumb:hover {
+ background: #a8a8a8;
+}
+
+.basic-info-content .el-descriptions {
+ width: 100%;
+}
+
+.stage-detail-section {
+ flex: 1; /* 鍗犳嵁鍓╀綑绌洪棿 */
+ background: white;
+ border-radius: 6px;
+ padding: 20px;
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+ display: flex;
+ flex-direction: column;
+ min-height: 400px; /* 鏈�灏忛珮搴� */
+ max-height: 800px; /* 鏈�澶ч珮搴︼紝鍙牴鎹渶瑕佽皟鏁� */
+ overflow: hidden; /* 闅愯棌澶栧眰婧㈠嚭 */
+}
+
+.stage-content-wrapper {
+ flex: 1;
+ overflow-y: auto; /* 闃舵璇︽儏鍐呴儴鍙粴鍔� */
+ margin-top: 20px;
+ padding-right: 8px;
+ min-height: 0; /* 閲嶈 */
+}
+
+.stage-content-wrapper::-webkit-scrollbar {
+ width: 6px;
+}
+
+.stage-content-wrapper::-webkit-scrollbar-track {
+ background: #f1f1f1;
+ border-radius: 3px;
+}
+
+.stage-content-wrapper::-webkit-scrollbar-thumb {
+ background: #c1c1c1;
+ border-radius: 3px;
+}
+
+.stage-content-wrapper::-webkit-scrollbar-thumb:hover {
+ background: #a8a8a8;
+}
+
+/* 鍘熸湁鏍峰紡淇濇寔涓嶅彉 */
+.section-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-shrink: 0; /* 闃叉琚帇缂� */
+}
+
+.section-header h3 {
+ margin: 0;
+ color: #303133;
+ font-size: 16px;
+ white-space: nowrap;
}
.timeline-item {
@@ -517,6 +633,7 @@
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid #e4e7ed;
+ flex-shrink: 0; /* 闃叉琚帇缂� */
}
.timeline-item:hover {
@@ -525,17 +642,17 @@
}
.timeline-item.active {
- border-color: #409EFF;
+ border-color: #409eff;
background-color: #f0f9ff;
}
.timeline-item.completed {
- border-color: #67C23A;
+ border-color: #67c23a;
background-color: #f0f9e8;
}
.timeline-item.in-progress {
- border-color: #E6A23C;
+ border-color: #e6a23c;
background-color: #fdf6ec;
}
@@ -557,11 +674,11 @@
}
.timeline-item.completed .timeline-marker {
- background-color: #67C23A;
+ background-color: #67c23a;
}
.timeline-item.in-progress .timeline-marker {
- background-color: #E6A23C;
+ background-color: #e6a23c;
}
.timeline-item.pending .timeline-marker {
@@ -583,6 +700,10 @@
font-weight: 600;
color: #303133;
font-size: 14px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 150px;
}
.stage-info {
@@ -590,33 +711,18 @@
color: #606266;
}
-.time-info, .operator-info {
+.time-info,
+.operator-info {
margin-bottom: 4px;
-}
-
-/* 鍙充晶鍐呭鍖哄煙鏍峰紡 */
-.content-section {
- flex: 1;
- display: flex;
- flex-direction: column;
- gap: 20px;
-}
-
-.basic-info-section,
-.stage-detail-section {
- background: white;
- border-radius: 6px;
- padding: 20px;
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.stage-actions {
display: flex;
gap: 10px;
-}
-
-.stage-content {
- margin-top: 20px;
+ flex-wrap: wrap;
}
/* 鍝嶅簲寮忚璁� */
@@ -627,7 +733,18 @@
.timeline-section {
flex: none;
- margin-bottom: 20px;
+ width: 100%;
+ height: auto;
+ max-height: 300px;
+ position: static; /* 灏忓睆骞曞彇娑� sticky */
+ }
+
+ .timeline-scroll-container {
+ max-height: 250px;
+ }
+
+ .stage-detail-section {
+ max-height: 500px;
}
}
@@ -652,26 +769,17 @@
gap: 10px;
}
- .stage-actions {
- flex-wrap: wrap;
+ .stage-name {
+ max-width: 120px;
}
-}
-/* 鍔ㄧ敾鏁堟灉 */
-.timeline-item {
- transition: all 0.3s ease;
-}
+ .basic-info-content {
+ max-height: 250px;
+ }
-.timeline-item:hover {
- transform: translateY(-2px);
-}
-
-/* 杩涘害鏉℃牱寮忎紭鍖� */
-:deep(.el-progress-bar) {
- padding-right: 0;
-}
-
-:deep(.el-progress__text) {
- font-size: 12px;
+ .stage-detail-section {
+ min-height: 300px;
+ max-height: 400px;
+ }
}
</style>
--
Gitblit v1.9.3