维护

WXL

2 天以前 c8e9849cb5f24848df0174c13bfbbff37bb08a5a

 src/components/MaintainComponents/BloodRoutinePanel.vue

@@ -65,6 +65,43 @@
        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-wrapper">
            <el-input
@@ -411,7 +448,57 @@
        this.attachments = [...this.internalData.attachments];
      }
    },
// 编辑指定索引的列
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.columnFormB && this.$refs.columnFormB.clearValidate();
  });
},

// 通过索引删除列（带确认）
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({
      type: 'success',
      message: '时间点已删除'
    });
  }).catch(() => {
    // 取消删除，不做任何操作
  });
},
    // 初始化默认表格数据
    initTableData() {
      const medicalItems = this.getMedicalItems();
@@ -983,7 +1070,67 @@
  font-size: 13px;
  margin-left: 8px;
}
/* 自定义列头样式 */
.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;
}
/* 响应式设计 */
@media (max-width: 768px) {
  .medical-panel {