From c8e9849cb5f24848df0174c13bfbbff37bb08a5a Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期二, 21 七月 2026 15:45:30 +0800
Subject: [PATCH] 维护
---
src/components/MaintainComponents/LiverKidneyPanel.vue | 406 +++++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 344 insertions(+), 62 deletions(-)
diff --git a/src/components/MaintainComponents/LiverKidneyPanel.vue b/src/components/MaintainComponents/LiverKidneyPanel.vue
index d1ee0fd..0ea5c72 100644
--- a/src/components/MaintainComponents/LiverKidneyPanel.vue
+++ b/src/components/MaintainComponents/LiverKidneyPanel.vue
@@ -2,15 +2,26 @@
<div class="medical-panel">
<div class="panel-header">
<h3>鑲濆姛鑳借偩鍔熻兘璁板綍琛�</h3>
- <el-button
- v-if="isEditing"
- type="primary"
- size="small"
- @click="addColumn"
- icon="el-icon-plus"
- >
- 鏂板璁板綍鍒�
- </el-button>
+ <div class="panel-actions">
+ <el-button
+ v-if="isEditing"
+ type="primary"
+ size="small"
+ @click="addColumn"
+ icon="el-icon-plus"
+ >
+ 鏂板璁板綍鍒�
+ </el-button>
+ <el-tooltip content="鍒锋柊琛ㄦ牸甯冨眬" placement="top">
+ <el-button
+ size="small"
+ @click="forceTableLayout"
+ icon="el-icon-refresh"
+ >
+ 鍒锋柊甯冨眬
+ </el-button>
+ </el-tooltip>
+ </div>
</div>
<el-table
@@ -19,7 +30,6 @@
style="width: 100%"
class="medical-table"
:key="tableKey"
-
@header-dragend="handleHeaderDragEnd"
>
<el-table-column
@@ -30,19 +40,61 @@
class-name="leave-alone"
>
<template #default="scope">
- <span :class="{ 'required-item': scope.row.required }">
- {{ scope.row.itemName }}
- </span>
+ <div class="item-name-cell">
+ <span :class="{ 'required-item': scope.row.required }">
+ {{ scope.row.itemName }}
+ </span>
+ <el-tooltip
+ v-if="scope.row.reference"
+ :content="`鍙傝�冭寖鍥�: ${scope.row.reference}`"
+ placement="top"
+ >
+ <i class="el-icon-info reference-icon"></i>
+ </el-tooltip>
+ </div>
</template>
</el-table-column>
<el-table-column
v-for="(col, index) in dynamicColumns"
:key="col.key"
- :label="col.label"
- :min-width="120"
+ :min-width="140"
:resizable="isEditing"
+ header-align="center"
+ align="center"
>
+ <!-- 鑷畾涔夊垪澶� -->
+ <template #header>
+ <div class="custom-column-header">
+ <div class="header-content" @click.stop="handleEditColumn(index)">
+ <span class="header-label">{{ col.label.replace('\n', ' ') }}</span>
+ <el-tooltip v-if="col.remark" :content="col.remark" placement="top">
+ <i class="el-icon-info header-remark-icon"></i>
+ </el-tooltip>
+ </div>
+ <div class="header-actions" v-if="isEditing">
+ <el-tooltip content="缂栬緫鏃堕棿" placement="top">
+ <el-button
+ size="mini"
+ type="text"
+ icon="el-icon-edit"
+ class="header-btn"
+ @click.stop="handleEditColumn(index)"
+ />
+ </el-tooltip>
+ <el-tooltip content="鍒犻櫎姝ゅ垪" placement="top">
+ <el-button
+ size="mini"
+ type="text"
+ icon="el-icon-delete"
+ class="header-btn delete-btn"
+ @click.stop="handleDeleteColumnByIndex(index)"
+ />
+ </el-tooltip>
+ </div>
+ </div>
+ </template>
+
<template #default="scope">
<div class="cell-content">
<el-input
@@ -157,34 +209,28 @@
<!-- 鍒楃紪杈戝璇濇 -->
<el-dialog
- title="缂栬緫鏃堕棿鐐�"
+ :title="`${editingColumnIndex !== null ? '缂栬緫' : '鏂板'}鏃堕棿鐐筦"
:visible.sync="columnDialogVisible"
- width="400px"
+ width="450px"
@closed="handleDialogClosed"
>
- <el-form :model="columnForm" label-width="80px" ref="columnForm">
- <el-form-item
- label="鏃ユ湡"
- prop="date"
- :rules="[
- { required: true, message: '璇烽�夋嫨鏃ユ湡', trigger: 'change' }
- ]"
- >
+ <el-form
+ :model="columnForm"
+ label-width="80px"
+ ref="columnForm"
+ :rules="columnRules"
+ >
+ <el-form-item label="鏃ユ湡" prop="date">
<el-date-picker
v-model="columnForm.date"
type="date"
placeholder="閫夋嫨鏃ユ湡"
value-format="yyyy-MM-dd"
style="width: 100%"
+ :disabled-date="disableFutureDates"
/>
</el-form-item>
- <el-form-item
- label="鏃堕棿"
- prop="time"
- :rules="[
- { required: true, message: '璇烽�夋嫨鏃堕棿', trigger: 'change' }
- ]"
- >
+ <el-form-item label="鏃堕棿" prop="time">
<el-time-picker
v-model="columnForm.time"
placeholder="閫夋嫨鏃堕棿"
@@ -192,10 +238,33 @@
style="width: 100%"
/>
</el-form-item>
+ <el-form-item label="澶囨敞" prop="remark">
+ <el-input
+ v-model="columnForm.remark"
+ type="textarea"
+ :rows="2"
+ placeholder="鍙�夊～鍐欐椂闂寸偣澶囨敞淇℃伅"
+ maxlength="100"
+ show-word-limit
+ />
+ </el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="columnDialogVisible = false">鍙栨秷</el-button>
- <el-button type="primary" @click="confirmAddColumn">纭畾</el-button>
+ <el-button
+ v-if="editingColumnIndex !== null"
+ type="danger"
+ @click="handleDeleteColumn"
+ >
+ 鍒犻櫎
+ </el-button>
+ <el-button
+ type="primary"
+ @click="confirmAddColumn"
+ :loading="saveLoading"
+ >
+ 纭畾
+ </el-button>
</span>
</el-dialog>
@@ -238,10 +307,18 @@
columnDialogVisible: false,
columnForm: {
date: "",
- time: ""
+ time: "",
+ remark: ""
},
+ editingColumnIndex: null,
tableKey: 0,
+ tableLoading: false,
+ saveLoading: false,
internalData: {},
+ columnRules: {
+ date: [{ required: true, message: "璇烽�夋嫨鏃ユ湡", trigger: "change" }],
+ time: [{ required: true, message: "璇烽�夋嫨鏃堕棿", trigger: "change" }]
+ },
// 棰勮鐩稿叧
previewVisible: false,
@@ -279,7 +356,8 @@
this.forceTableLayout();
});
},
- deep: true
+ deep: true,
+ immediate: true
},
// 鐩戝惉闄勪欢鏁版嵁鍙樺寲
attachments: {
@@ -353,7 +431,8 @@
label: `${new Date().toISOString().split("T")[0]}\n08:00`,
key: "time1",
date: new Date().toISOString().split("T")[0],
- time: "08:00"
+ time: "08:00",
+ remark: "鏅ㄨ捣妫�娴�"
}
];
}
@@ -376,11 +455,31 @@
},
addColumn() {
+ this.editingColumnIndex = null;
this.columnForm = {
date: new Date().toISOString().split("T")[0],
- time: "08:00"
+ time: "08:00",
+ remark: ""
};
this.columnDialogVisible = true;
+ this.$nextTick(() => {
+ this.$refs.columnForm && this.$refs.columnForm.clearValidate();
+ });
+ },
+
+ handleEditColumn(index) {
+ if (!this.isEditing) return;
+ this.editingColumnIndex = index;
+ const column = this.dynamicColumns[index];
+ this.columnForm = {
+ date: column.date || '',
+ time: column.time || '',
+ remark: column.remark || ''
+ };
+ this.columnDialogVisible = true;
+ this.$nextTick(() => {
+ this.$refs.columnForm && this.$refs.columnForm.clearValidate();
+ });
},
confirmAddColumn() {
@@ -390,34 +489,114 @@
return;
}
- const newIndex = this.dynamicColumns.length + 1;
- const newColumn = {
- label: `${this.columnForm.date}\n${this.columnForm.time}`,
- key: `time${newIndex}`,
- date: this.columnForm.date,
- time: this.columnForm.time
- };
+ this.saveLoading = true;
- this.dynamicColumns.push(newColumn);
+ if (this.editingColumnIndex !== null) {
+ // 缂栬緫鐜版湁鍒�
+ const column = this.dynamicColumns[this.editingColumnIndex];
+ column.label = `${this.columnForm.date}\n${this.columnForm.time}`;
+ column.date = this.columnForm.date;
+ column.time = this.columnForm.time;
+ column.remark = this.columnForm.remark;
+ this.$message.success("鏃堕棿鐐逛慨鏀规垚鍔�");
+ } else {
+ // 鏂板鍒�
+ const newIndex = this.dynamicColumns.length + 1;
+ const newColumn = {
+ label: `${this.columnForm.date}\n${this.columnForm.time}`,
+ key: `time${newIndex}_${Date.now()}`,
+ date: this.columnForm.date,
+ time: this.columnForm.time,
+ remark: this.columnForm.remark
+ };
- // 涓烘墍鏈夎鏂板涓�涓┖鍊�
- this.tableData.forEach(row => {
- if (!row.values) {
- row.values = [];
- }
- row.values.push("");
- });
+ this.dynamicColumns.push(newColumn);
+
+ // 涓烘墍鏈夎鏂板涓�涓┖鍊�
+ this.tableData.forEach(row => {
+ if (!row.values) {
+ row.values = [];
+ }
+ row.values.push("");
+ });
+
+ this.$message.success("鏃堕棿鐐规坊鍔犳垚鍔�");
+ }
this.columnDialogVisible = false;
- this.$message.success("鏃堕棿鐐规坊鍔犳垚鍔�");
+ this.saveLoading = false;
this.tableKey += 1;
this.saveData();
});
},
+ handleDeleteColumn() {
+ if (this.editingColumnIndex !== null) {
+ this.$confirm(
+ `纭畾瑕佸垹闄ゃ��${this.dynamicColumns[this.editingColumnIndex].label.replace('\n', ' ')}銆嶈繖涓椂闂寸偣鐨勬墍鏈夋暟鎹悧锛焋,
+ '鍒犻櫎纭',
+ {
+ confirmButtonText: '纭畾鍒犻櫎',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }
+ ).then(() => {
+ // 鍒犻櫎鍒�
+ this.dynamicColumns.splice(this.editingColumnIndex, 1);
+
+ // 鍚屾鍒犻櫎姣忚瀵瑰簲鐨勬暟鎹�
+ this.tableData.forEach(row => {
+ if (row.values && row.values.length > this.editingColumnIndex) {
+ row.values.splice(this.editingColumnIndex, 1);
+ }
+ });
+
+ this.columnDialogVisible = false;
+ this.tableKey += 1;
+ this.saveData();
+ this.$message.success("鏃堕棿鐐瑰垹闄ゆ垚鍔�");
+ }).catch(() => {
+ // 鍙栨秷鍒犻櫎锛屼笉鍋氫换浣曟搷浣�
+ });
+ }
+ },
+
+ handleDeleteColumnByIndex(index) {
+ this.$confirm(
+ `纭畾瑕佸垹闄ゃ��${this.dynamicColumns[index].label.replace('\n', ' ')}銆嶈繖涓椂闂寸偣鐨勬墍鏈夋暟鎹悧锛焋,
+ '鍒犻櫎纭',
+ {
+ confirmButtonText: '纭畾鍒犻櫎',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }
+ ).then(() => {
+ // 鍒犻櫎鍒�
+ this.dynamicColumns.splice(index, 1);
+
+ // 鍚屾鍒犻櫎姣忚瀵瑰簲鐨勬暟鎹�
+ this.tableData.forEach(row => {
+ if (row.values && row.values.length > index) {
+ row.values.splice(index, 1);
+ }
+ });
+
+ this.tableKey += 1;
+ this.saveData();
+ this.$message.success("鏃堕棿鐐瑰垹闄ゆ垚鍔�");
+ }).catch(() => {
+ // 鍙栨秷鍒犻櫎锛屼笉鍋氫换浣曟搷浣�
+ });
+ },
+
handleDialogClosed() {
- this.columnForm = { date: "", time: "" };
+ this.editingColumnIndex = null;
+ this.columnForm = { date: "", time: "", remark: "" };
this.$refs.columnForm && this.$refs.columnForm.clearValidate();
+ },
+
+ disableFutureDates(time) {
+ return time.getTime() > Date.now();
},
handleValueChange(row, columnIndex) {
@@ -662,6 +841,12 @@
font-weight: 600;
}
+.panel-actions {
+ display: flex;
+ gap: 12px;
+ align-items: center;
+}
+
.medical-table {
margin-bottom: 30px;
min-width: 100%;
@@ -671,34 +856,116 @@
overflow-x: auto;
}
+/* 鑷畾涔夊垪澶存牱寮� */
+.custom-column-header {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 4px;
+ padding: 4px 0;
+}
+
+.header-content {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ cursor: pointer;
+ transition: color 0.2s;
+ white-space: nowrap;
+}
+
+.header-content:hover {
+ color: #409eff;
+}
+
+.header-label {
+ font-size: 13px;
+ line-height: 1.4;
+}
+
+.header-remark-icon {
+ color: #909399;
+ font-size: 12px;
+ cursor: help;
+}
+
+.header-actions {
+ display: flex;
+ gap: 4px;
+ opacity: 0;
+ transition: opacity 0.2s;
+}
+
+.custom-column-header:hover .header-actions {
+ opacity: 1;
+}
+
+.header-btn {
+ padding: 2px 4px !important;
+ font-size: 14px !important;
+}
+
+.header-btn.delete-btn {
+ color: #f56c6c !important;
+}
+
+.header-btn.delete-btn:hover {
+ color: #c0392b !important;
+}
+
+/* 缂栬緫妯″紡涓嬪缁堟樉绀烘搷浣滄寜閽� */
+.is-editing .header-actions {
+ opacity: 1;
+}
+
+.item-name-cell {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.reference-icon {
+ color: #909399;
+ font-size: 14px;
+ cursor: help;
+ margin-left: 8px;
+}
+
.cell-content {
display: flex;
align-items: center;
justify-content: space-between;
- min-height: 32px;
+ min-height: 38px;
+ gap: 8px;
}
.value-input {
flex: 1;
- margin-right: 8px;
+ min-width: 60px;
}
.value-display {
font-weight: 500;
color: #303133;
+ max-width: 70px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.unit {
color: #909399;
- font-size: 12px;
- margin-left: 4px;
+ font-size: 11px;
+ margin-left: 2px;
+ flex-shrink: 0;
}
.reference-range {
color: #67c23a;
- font-size: 12px;
+ font-size: 11px;
font-style: italic;
- margin-left: 8px;
+ margin-left: 4px;
+ flex-shrink: 0;
}
.required-item::before {
@@ -761,24 +1028,39 @@
.panel-header {
flex-direction: column;
align-items: flex-start;
+ gap: 12px;
}
.panel-header h3 {
- margin-bottom: 10px;
+ margin-bottom: 0;
+ }
+
+ .panel-actions {
+ width: 100%;
+ justify-content: flex-end;
}
.cell-content {
flex-direction: column;
align-items: flex-start;
+ gap: 4px;
}
.reference-range {
margin-left: 0;
- margin-top: 4px;
+ margin-top: 2px;
}
.attachment-section {
padding: 10px;
}
+
+ .custom-column-header {
+ padding: 2px 0;
+ }
+
+ .header-actions {
+ opacity: 1;
+ }
}
</style>
--
Gitblit v1.9.3