肠内营养

src/views/patients/enteralNutrition/components/LeftCard.vue

@@ -0,0 +1,203 @@
+<template>
+  <el-card class="left-card">
+    <!-- 顶部标签页 -->
+    <el-tabs v-model="activeTab" class="main-tabs">
+      <el-tab-pane label="肠内营养" name="nutrition">
+        <div class="content-wrapper">
+          <!-- 日期和操作栏 -->
+          <div class="operation-bar">
+            <!-- 日期选择 -->
+            <el-row>
+              <el-col :span="10">
+                <span class="label">日期时间：</span>
+                <el-date-picker
+                  v-model="dateRange"
+                  type="daterange"
+                  range-separator="-"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  style="width: 280px"
+                  @keydown.enter.prevent
+                />
+              </el-col>
+              <el-col class="right_btn" :span="7">
+                <el-button type="primary" plain>打印知情同意书</el-button>
+                <el-button type="success" @click="goHistoryPrescription">历史处方</el-button>
+              </el-col>
+            </el-row>
+
+            <!-- 添加按钮组 -->
+            <div class="add-buttons">
+              <el-button :class="['add-btn', {'is-active': prescriptionType === 'normal'}]" @click="addPrescription">添加配置处方</el-button>
+              <el-button :class="['add-btn', {'is-active': prescriptionType === 'package'}]" @click="addTemplate">添加预包装处方</el-button>
+              <el-button :class="['add-btn', {'is-active': prescriptionType === 'long-term'}]" @click="addLongTerm">添加长期医嘱处方</el-button>
+            </div>
+
+            <!-- 开方原因 -->
+            <div class="prescription-reason">
+              <span class="reason-label">开方原因：</span>
+              <span class="reason-value">1111</span>
+            </div>
+          </div>
+
+          <!-- 处方提示信息 -->
+          <div class="prescription-info">
+            <div class="warning-box">
+              当前处方中的脂肪、维生素A、维生素D、维生素E、维生素B1、维生素B2、维生素B6、维生素B12、硒(尼克黄)、维生素C、生物素、泛酸元素可能过量
+            </div>
+          </div>
+
+          <!-- 处方表格 -->
+          <div class="prescription-tables">
+            <template v-if="tableType === 'package'">
+              <PackageTable />
+            </template>
+            <template v-else>
+              <NutritionTable :type="tableType" />
+              <MaterialTable />
+            </template>
+          </div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="膳食治疗" name="therapy">
+        <!-- 膳食治疗内容 -->
+      </el-tab-pane>
+    </el-tabs>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue';
+import NutritionTable from './table/NutritionTable.vue';
+import MaterialTable from './table/MaterialTable.vue';
+import PackageTable from './table/PackageTable.vue';
+import {useRouter} from 'vue-router';
+const router = useRouter();
+const emit = defineEmits(['gotoTop']);
+
+// 顶部tab切换
+const activeTab = ref('nutrition');
+
+// 表格类型
+const tableType = ref<'normal' | 'package' | 'long-term'>('normal');
+
+// 日期范围
+const dateRange = ref([]);
+
+// 处方类型
+const prescriptionType = ref<'normal' | 'package' | 'long-term'>('normal');
+
+// 添加配置处方
+const addPrescription = () => {
+  prescriptionType.value = 'normal';
+  tableType.value = 'normal';
+};
+
+// 添加预包装处方
+const addTemplate = () => {
+  prescriptionType.value = 'package';
+  tableType.value = 'package';
+};
+
+// 添加长期医嘱处方
+const addLongTerm = () => {
+  prescriptionType.value = 'long-term';
+  tableType.value = 'long-term';
+};
+
+// 跳转历史处方页面
+const goHistoryPrescription = () => {
+  emit('gotoTop')
+};
+
+</script>
+
+<style lang="scss" scoped>
+.left-card {
+  flex: 1;
+  position: relative;
+  .main-tabs {
+    :deep(.el-tabs__header) {
+      margin-bottom: 20px;
+    }
+    :deep(.el-tabs__nav) {
+      .el-tabs__item {
+        font-size: 15px;
+        padding: 0 30px;
+        height: 40px;
+        line-height: 40px;
+      }
+    }
+  }
+  .operation-bar {
+    margin-bottom: 16px;
+    .right_btn {
+      margin-left: 268px;
+    }
+
+    .add-buttons {
+      display: flex;
+      gap: 12px;
+      margin-top: 30px;
+      margin-bottom: 12px;
+
+      .add-btn {
+        min-width: 120px;
+        background-color: #fff;
+        border: 1px solid #dcdfe6;
+        color: #606266;
+        transition: all 0.3s;
+
+        &.is-active {
+          background-color: var(--el-color-primary);
+          border-color: var(--el-color-primary);
+          color: #fff;
+        }
+
+        &:hover:not(.is-active) {
+          border-color: var(--el-color-primary);
+          color: var(--el-color-primary);
+        }
+      }
+    }
+
+    .prescription-reason {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: #f56c6c;
+      font-size: 14px;
+
+      .reason-label {
+        color: #606266;
+      }
+
+      .reason-value {
+        color: #f56c6c;
+      }
+    }
+  }
+
+  .prescription-info {
+    margin-bottom: 16px;
+
+    .warning-box {
+      padding: 8px 16px;
+      background: #fff7e6;
+      border: 1px solid #ffd591;
+      border-radius: 4px;
+      color: #fa8c16;
+      border: 1px solid #fa8c16;
+      font-size: 12px;
+      line-height: 1.5;
+    }
+  }
+
+  .prescription-tables {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    margin-bottom: 16px;
+  }
+}
+</style>

src/views/patients/enteralNutrition/components/RightCard.vue

@@ -0,0 +1,310 @@
+<template>
+  <el-card class="right-card">
+    <div class="card-header">
+      <span>营养数据分析</span>
+      <el-button link>收起</el-button>
+    </div>
+    <div class="nutrition-analysis">
+      <!-- 营养设定 -->
+      <div class="nutrition-setting">
+        <span>营养设定：</span>
+        <span class="value">897.3kcal/d</span>
+      </div>
+
+      <!-- 三大营养素表格 -->
+      <div class="nutrition-table">
+        <el-table :data="nutritionData" border size="small">
+          <el-table-column prop="name" label="三大营养素" align="center" />
+          <el-table-column prop="weight" label="质量(g)" align="center" />
+          <el-table-column prop="ratio" label="热量占比" align="center">
+            <template #default="{row}">{{ row.ratio }}%</template>
+          </el-table-column>
+          <el-table-column prop="reference" label="参考值" align="center" />
+        </el-table>
+        <div class="total-amount">
+          <span>含量：</span>
+          <span class="value">7.624g/天</span>
+        </div>
+      </div>
+
+      <!-- 营养素占比图表 -->
+      <div class="nutrition-chart">
+        <div class="chart-title">三大营养元素质量占比</div>
+        <div class="chart-content">
+          <div ref="chartRef" class="pie-chart"></div>
+          <div class="chart-legend">
+            <div class="legend-item">
+              <span class="color-block protein"></span>
+              <span>蛋白质</span>
+              <span class="percentage">44.12%</span>
+            </div>
+            <div class="legend-item">
+              <span class="color-block fat"></span>
+              <span>脂肪</span>
+              <span class="percentage">23.66%</span>
+            </div>
+            <div class="legend-item">
+              <span class="color-block carbs"></span>
+              <span>碳水化合物</span>
+              <span class="percentage">32.22%</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 产品列表 -->
+      <div class="product-list">
+        <el-table :data="productData" border size="small">
+          <el-table-column prop="name" label="产品名称" min-width="180" />
+          <el-table-column prop="code" label="商品编码" width="120" align="center" />
+          <el-table-column prop="type" label="产品" width="80" align="center" />
+        </el-table>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import {ref, onMounted} from 'vue';
+import * as echarts from 'echarts';
+
+// 图表相关
+const chartRef = ref<HTMLElement | null>(null);
+let myChart: echarts.ECharts | null = null;
+
+// 营养分析数据
+const nutritionData = ref([
+  {name: '蛋白质', weight: '12.7505', ratio: '34.00', reference: '10%~20%'},
+  {name: '蛋白质', weight: '12.7505', ratio: '34.00', reference: '10%~20%'},
+  {name: '蛋白质', weight: '12.7505', ratio: '34.00', reference: '10%~20%'}
+]);
+
+// 产品列表数据
+const productData = ref([
+  {name: '复合矿物质210463A', code: 'T2463098', type: '肠内'},
+  {name: '复合矿物质210463A', code: 'T2463098', type: '肠内'},
+  {name: '复合矿物质210463A', code: 'T2463098', type: '肠内'},
+  {name: '复合矿物质210463A', code: 'T2463098', type: '肠内'},
+  {name: '复合矿物质210463A', code: 'T2463098', type: '肠内'},
+  {name: '复合矿物质210463A', code: 'T2463098', type: '肠内'},
+  {name: '复合矿物质210463A', code: 'T2463098', type: '肠内'},
+  {name: '复合矿物质210463A', code: 'T2463098', type: '肠内'},
+  {name: '复合矿物质210463A', code: 'T2463098', type: '肠内'},
+  {name: '复合矿物质210463A', code: 'T2463098', type: '肠内'},
+  {name: '复合矿物质210463A', code: 'T2463098', type: '肠内'},
+  {name: '复合矿物质210463A', code: 'T2463098', type: '肠内'},
+  {name: '复合矿物质210463A', code: 'T2463098', type: '肠内'}
+]);
+
+// 初始化图表
+const initChart = () => {
+  if (!chartRef.value) return;
+
+  myChart = echarts.init(chartRef.value);
+  const option = {
+    tooltip: {
+      show: false
+    },
+    legend: {
+      show: false
+    },
+    color: ['#4B6EFF', '#8592A6', '#8CDFFF'],
+    series: [
+      {
+        name: '营养元素',
+        type: 'pie',
+        radius: ['65%', '85%'],
+        center: ['50%', '50%'],
+        startAngle: 90,
+        avoidLabelOverlap: false,
+        silent: true,
+        itemStyle: {
+          borderWidth: 0,
+          borderRadius: 0
+        },
+        label: {
+          show: false
+        },
+        emphasis: {
+          disabled: true
+        },
+        labelLine: {
+          show: false
+        },
+        data: [
+          {value: 44.12, name: '蛋白质'},
+          {value: 23.66, name: '脂肪'},
+          {value: 32.22, name: '碳水化合物'}
+        ]
+      }
+    ]
+  };
+
+  myChart.setOption(option);
+};
+
+onMounted(() => {
+  initChart();
+  window.addEventListener('resize', () => {
+    myChart?.resize();
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.right-card {
+  width: 400px;
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding: 0 4px;
+
+    span {
+      font-size: 16px;
+      font-weight: 500;
+      color: #303133;
+    }
+  }
+
+  .nutrition-analysis {
+    .nutrition-setting {
+      background: #fff;
+      padding: 12px;
+      margin-bottom: 16px;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: #606266;
+
+      .value {
+        color: var(--el-color-primary);
+        font-weight: 500;
+      }
+    }
+
+    .nutrition-table {
+      margin-bottom: 16px;
+
+      :deep(.el-table) {
+        margin-bottom: 8px;
+
+        th {
+          background-color: #f5f7fa;
+          color: #606266;
+          font-weight: 500;
+          padding: 8px 0;
+        }
+
+        td {
+          padding: 8px;
+        }
+      }
+
+      .total-amount {
+        padding: 8px 12px;
+        background: #f5f7fa;
+        color: #606266;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        .value {
+          color: #303133;
+        }
+      }
+    }
+
+    .nutrition-chart {
+      margin-bottom: 16px;
+      background: #fff;
+      border-radius: 4px;
+      border: 1px solid #e4e7ed;
+      overflow: hidden;
+
+      .chart-title {
+        font-size: 14px;
+        color: #303133;
+        text-align: center;
+        padding: 12px 0;
+        background-color: #f5f7fa;
+        border-bottom: 1px solid #e4e7ed;
+        font-weight: 500;
+      }
+
+      .chart-content {
+        display: flex;
+        align-items: center;
+        gap: 32px;
+        padding: 16px;
+        background-color: #fff;
+
+        .pie-chart {
+          flex: none;
+          width: 140px;
+          height: 140px;
+        }
+
+        .chart-legend {
+          flex: 1;
+          min-width: 120px;
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+
+          .legend-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 14px;
+            color: #606266;
+            white-space: nowrap;
+
+            .color-block {
+              width: 12px;
+              height: 12px;
+              border-radius: 2px;
+              flex-shrink: 0;
+
+              &.protein {
+                background: #4b6eff;
+              }
+              &.fat {
+                background: #8592a6;
+              }
+              &.carbs {
+                background: #8cdfff;
+              }
+            }
+
+            .percentage {
+              margin-left: 8px;
+              color: #303133;
+              font-weight: 500;
+            }
+          }
+        }
+      }
+    }
+
+    .product-list {
+      :deep(.el-table) {
+        th {
+          background-color: #f5f7fa;
+          color: #606266;
+          font-weight: 500;
+          padding: 8px 0;
+        }
+
+        td {
+          padding: 8px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/patients/enteralNutrition/components/history/LeftCard.vue

@@ -0,0 +1,178 @@
+<template>
+  <el-card class="left-card">
+    <!-- 搜索框 -->
+    <div class="search-box">
+      <el-input v-model="searchValue" placeholder="请输入处方ID" class="search-input">
+        <template #prefix>
+          <el-icon><Search /></el-icon>
+        </template>
+      </el-input>
+    </div>
+
+    <!-- 处方列表 -->
+    <div class="prescription-list">
+      <div
+        v-for="item in prescriptionList"
+        :key="item.id"
+        :class="['prescription-item', {active: item.id === activeId}]"
+        @click="handleItemClick(item)"
+      >
+        <!-- 时间 -->
+        <div class="item-time">{{ item.time }}</div>
+        <!-- 处方类型 -->
+        <div class="item-type">{{ item.type }}</div>
+        <!-- 处方ID -->
+        <div class="item-id">处方ID：{{ item.id }}</div>
+        <!-- 已编辑角标 -->
+        <div v-if="item.isEdited" class="edit-badge">
+          <span>已编辑</span>
+        </div>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue';
+import {Search} from '@element-plus/icons-vue';
+
+// 搜索值
+const searchValue = ref('');
+
+// 当前选中的处方ID
+const activeId = ref('');
+
+// 处方列表数据
+const prescriptionList = ref([
+  {
+    id: '194705349732148019',
+    time: '2025-07-23 10:57:18',
+    type: '长期处方',
+    isEdited: false
+  },
+  {
+    id: '194754209113291980',
+    time: '2025-07-22 14:19:53',
+    type: '配置处方',
+    isEdited: true
+  },
+  {
+    id: '194753542425735168',
+    time: '2025-07-22 13:53:23',
+    type: '长期处方',
+    isEdited: true
+  },
+  {
+    id: '194746976848480665',
+    time: '2025-07-22 09:32:30',
+    type: '长期处方',
+    isEdited: false
+  },
+  {
+    id: '194746840280684134',
+    time: '2025-07-22 09:27:04',
+    type: '长期处方',
+    isEdited: false
+  },
+  {
+    id: '194746840280681234',
+    time: '2025-07-21 16:28:56',
+    type: '长期处方',
+    isEdited: true
+  }
+]);
+
+// 点击处方项
+const handleItemClick = (item) => {
+  activeId.value = item.id;
+};
+</script>
+
+<style lang="scss" scoped>
+.left-card {
+  width: 300px;
+  height: calc(100vh - 40px);
+
+  :deep(.el-card__body) {
+    height: 100%;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .search-box {
+    .search-input {
+      .el-input__wrapper {
+        box-shadow: none;
+        border: 1px solid #dcdfe6;
+        border-radius: 4px;
+
+        &:hover {
+          border-color: #c0c4cc;
+        }
+
+        &.is-focus {
+          border-color: var(--el-color-primary);
+        }
+      }
+    }
+  }
+
+  .prescription-list {
+    flex: 1;
+    overflow-y: auto;
+
+    .prescription-item {
+      position: relative;
+      padding: 16px;
+      border-radius: 4px;
+      background: #f5f7fa;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      &:not(:last-child) {
+        margin-bottom: 12px;
+      }
+
+      &:hover {
+        background: #ebeef5;
+      }
+
+      &.active {
+        background: #e6f2ff;
+      }
+
+      .item-time {
+        font-size: 16px;
+        color: #303133;
+        margin-bottom: 8px;
+      }
+
+      .item-type {
+        font-size: 14px;
+        color: #303133;
+        margin-bottom: 4px;
+      }
+
+      .item-id {
+        font-size: 13px;
+        color: #909399;
+      }
+
+      .edit-badge {
+        position: absolute;
+        top: 8px;
+        right: -10px;
+        transform: rotate(35deg);
+        background: #fff;
+        padding: 2px 16px;
+        font-size: 12px;
+        color: #ffa801;
+        border-radius: 2px;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+</style>

src/views/patients/enteralNutrition/components/history/RightCard.vue

@@ -0,0 +1,651 @@
+<template>
+  <el-card class="right-card">
+    <!-- 顶部操作按钮 -->
+    <div class="operation-buttons">
+      <div class="left-buttons">
+        <el-button plain>返回</el-button>
+        <el-button plain>打印</el-button>
+        <el-button type="success" plain>引用处方</el-button>
+        <el-button type="danger" plain>处方作废</el-button>
+      </div>
+      <div class="pay-status">
+        <img src="@/assets/images/pay.png" alt="待支付" />
+      </div>
+    </div>
+
+    <!-- 停嘱日期 -->
+    <div class="stop-date">
+      <span class="label">停嘱日期：</span>
+      <span class="value">2025-07-24</span>
+    </div>
+
+    <!-- 处方表格 -->
+    <div class="prescription-tables">
+      <!-- 营养产品表格 -->
+      <el-table :data="productData" border>
+        <el-table-column type="index" label="组号" width="60" align="center" />
+        <el-table-column label="营养产品" min-width="180" prop="product" />
+        <el-table-column label="用量/次" width="100" align="center">
+          <template #default="{row}">
+            <span>{{ row.dosage }}g</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="餐次时间" width="180" align="center" prop="mealTime" />
+        <el-table-column label="频次" width="100" align="center">
+          <template #default>一天3次</template>
+        </el-table-column>
+        <el-table-column label="首日" width="80" align="center">
+          <template #default="{row}">
+            <span>{{ row.firstDay }}次</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="用量/日" width="100" align="center">
+          <template #default="{row}">
+            <span>{{ row.dailyDosage }}g</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="规格" width="140" align="center">
+          <template #default="{row}">
+            <span>{{ row.specification }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="用法" width="80" align="center" prop="usage" />
+        <el-table-column label="制剂液量/次" width="120" align="center">
+          <template #default="{row}">
+            <span>{{ row.liquidVolume }}ml</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="制剂浓度/次" width="120" align="center">
+          <template #default="{row}">
+            <span>{{ row.concentration }}%</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="能量密度/次" width="140" align="center">
+          <template #default="{row}">
+            <span>{{ row.energyDensity }}kcal/ml</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="处方备注" min-width="150" prop="note" />
+        <el-table-column label="每日热量" width="100" align="center">
+          <template #default="{row}">
+            <span>{{ row.dailyCalories }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="金额" width="100" align="right">
+          <template #default="{row}">
+            <span>{{ row.amount }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 耗材表格 -->
+      <el-table :data="materialData" border>
+        <el-table-column type="index" label="组号" width="60" align="center" />
+        <el-table-column label="耗材" min-width="200" />
+        <el-table-column label="规格" width="120" align="center" />
+        <el-table-column label="用量/次" width="100" align="center">
+          <template #default="{row}">
+            <span>{{ row.dosage }}袋</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="频次" width="100" align="center">
+          <template #default>一天3次</template>
+        </el-table-column>
+        <el-table-column label="用量/日" width="100" align="center">
+          <template #default="{row}">
+            <span>{{ row.dailyDosage }}袋</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="首日" width="80" align="center">
+          <template #default="{row}">
+            <span>{{ row.firstDay }}次</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="数量" width="80" align="center">
+          <template #default="{row}">
+            <span>{{ row.quantity }}袋</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="处方备注" min-width="150" />
+        <el-table-column label="金额" width="100" align="right">
+          <template #default="{row}">
+            <span>{{ row.amount }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 费用统计 -->
+      <div class="table-cost">
+        <div class="cost-item">处方费用：￥15.25</div>
+        <div class="cost-item">营养配置费：￥5</div>
+        <div class="cost-item total">总计：￥20.25</div>
+      </div>
+    </div>
+
+    <!-- 分析区域 -->
+    <el-tabs v-model="activeTab" class="analysis-tabs">
+      <el-tab-pane label="三大营养素分析" name="nutrition">
+        <div class="analysis-content">
+          <div class="analysis-data">
+            <div class="data-item">
+              <span class="label">营养设定：</span>
+              <span class="value">897.3kcal/d</span>
+            </div>
+            <div class="data-item">
+              <span class="label">实际热量：</span>
+              <span class="value">12.3000kcal/d</span>
+            </div>
+          </div>
+          <div class="analysis-detail">
+            <!-- 左侧表格 -->
+            <div class="table-container">
+              <el-table :data="nutritionData" border>
+                <el-table-column label="三大营养素" prop="name" width="120" />
+                <el-table-column label="质量 (g)" prop="mass" width="120" align="center" />
+                <el-table-column label="热量占比" prop="ratio" width="120" align="center" />
+                <el-table-column label="参考值" prop="reference" min-width="120" align="center" />
+              </el-table>
+              <div class="extra-info">
+                <div class="info-item">
+                  <span class="label">氮含量：</span>
+                  <span class="value">0.1166 g/天</span>
+                </div>
+                <div class="info-item">
+                  <span class="label">热氮比：</span>
+                  <span class="value">12.3 : 0.1166</span>
+                </div>
+              </div>
+            </div>
+            <!-- 右侧饼图 -->
+            <div class="chart-container">
+              <div class="chart-title">三大营养素元素质量占比</div>
+              <div class="pie-chart" ref="pieChart"></div>
+              <div class="chart-legend">
+                <div class="legend-item">
+                  <span class="color-block" style="background: #36cfc9"></span>
+                  <span class="text">蛋白质 30.41%</span>
+                </div>
+                <div class="legend-item">
+                  <span class="color-block" style="background: #ffd666"></span>
+                  <span class="text">脂肪 16.27%</span>
+                </div>
+                <div class="legend-item">
+                  <span class="color-block" style="background: #2f54eb"></span>
+                  <span class="text">碳水化合物 53.32%</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="营养数据分析" name="data">
+        <el-table :data="nutritionAnalysisData" border>
+          <el-table-column label="元素类型" prop="type" width="120" align="center" />
+          <el-table-column label="元素名称" prop="name" width="120" align="center" />
+          <el-table-column label="单位" prop="unit" width="80" align="center" />
+          <el-table-column label="肠内营养含量/天" align="center">
+            <el-table-column label="当前处方" prop="current" width="120" align="center" />
+            <el-table-column label="历史处方" prop="history" width="120" align="center" />
+          </el-table-column>
+          <el-table-column label="肠外营养含量/天" prop="parenteral" width="140" align="center" />
+          <el-table-column label="膳食营养含量/天" prop="dietary" width="140" align="center" />
+          <el-table-column label="营养设定" prop="target" width="120" align="center" />
+        </el-table>
+      </el-tab-pane>
+    </el-tabs>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import {ref, onMounted} from 'vue';
+import * as echarts from 'echarts';
+
+const activeTab = ref('nutrition');
+const pieChart = ref(null);
+
+// 营养产品数据
+const productData = ref([
+  {
+    product: '孕妇营养包（1-12月）',
+    dosage: '1.0000',
+    mealTime: '08:00,12:00,18:00',
+    firstDay: 2,
+    dailyDosage: '3.0000',
+    specification: '840.0000g/袋',
+    usage: '口服',
+    liquidVolume: '100.0000',
+    concentration: '0.9900',
+    energyDensity: '0.0410',
+    note: '--',
+    dailyCalories: '12.3000',
+    amount: '5.25'
+  }
+]);
+
+// 耗材数据
+const materialData = ref([
+  {
+    material: '肠内营养空白合剂',
+    specification: '3g/袋',
+    dosage: '1.0000',
+    dailyDosage: '3.000',
+    firstDay: 2,
+    quantity: '5.0000',
+    amount: '10.00'
+  }
+]);
+
+// 营养素分析数据
+const nutritionData = ref([
+  {
+    name: '蛋白质',
+    mass: '0.729',
+    ratio: '23.71%',
+    reference: '10% - 15%'
+  },
+  {
+    name: '脂肪',
+    mass: '0.39',
+    ratio: '28.54%',
+    reference: '20% - 30%'
+  },
+  {
+    name: '碳水化合物',
+    mass: '1.278',
+    ratio: '41.56%',
+    reference: '50% - 65%'
+  }
+]);
+
+// 营养数据分析数据
+const nutritionAnalysisData = ref([
+  {
+    type: '热能及三大营养素',
+    name: '热量',
+    unit: 'kcal',
+    current: '12.3',
+    history: '12.3',
+    parenteral: '--',
+    dietary: '--',
+    target: '897.3'
+  },
+  {
+    type: '热能及三大营养素',
+    name: '热能',
+    unit: 'kj',
+    current: '51.45',
+    history: '51.45',
+    parenteral: '--',
+    dietary: '--',
+    target: '3754.3'
+  },
+  {
+    type: '热能及三大营养素',
+    name: '碳水化合物',
+    unit: 'g',
+    current: '1.278',
+    history: '1.28',
+    parenteral: '--',
+    dietary: '--',
+    target: '112.16'
+  },
+  {
+    type: '热能及三大营养素',
+    name: '蛋白质',
+    unit: 'g',
+    current: '0.729',
+    history: '0.73',
+    parenteral: '--',
+    dietary: '--',
+    target: '50'
+  },
+  {
+    type: '热能及三大营养素',
+    name: '脂肪',
+    unit: 'g',
+    current: '0.39',
+    history: '0.39',
+    parenteral: '--',
+    dietary: '--',
+    target: '19.94'
+  },
+  {
+    type: '常量元素',
+    name: '钠',
+    unit: 'mg',
+    current: '9',
+    history: '9',
+    parenteral: '--',
+    dietary: '--',
+    target: '1500'
+  },
+  {
+    type: '常量元素',
+    name: '钙',
+    unit: 'mg',
+    current: '0',
+    history: '--',
+    parenteral: '--',
+    dietary: '--',
+    target: '800'
+  },
+  {
+    type: '常量元素',
+    name: '磷',
+    unit: 'mg',
+    current: '0',
+    history: '--',
+    parenteral: '--',
+    dietary: '--',
+    target: '720'
+  },
+  {
+    type: '常量元素',
+    name: '钾',
+    unit: 'mg',
+    current: '0',
+    history: '--',
+    parenteral: '--',
+    dietary: '--',
+    target: '2000'
+  },
+  {
+    type: '常量元素',
+    name: '镁',
+    unit: 'mg',
+    current: '0',
+    history: '--',
+    parenteral: '--',
+    dietary: '--',
+    target: '330'
+  },
+  {
+    type: '常量元素',
+    name: '氯',
+    unit: 'mg',
+    current: '0',
+    history: '--',
+    parenteral: '--',
+    dietary: '--',
+    target: '2300'
+  },
+  {
+    type: '常量元素',
+    name: '铁',
+    unit: 'mg',
+    current: '0',
+    history: '--',
+    parenteral: '--',
+    dietary: '--',
+    target: '20'
+  },
+  {
+    type: '常量元素',
+    name: '锌',
+    unit: 'mg',
+    current: '0',
+    history: '--',
+    parenteral: '--',
+    dietary: '--',
+    target: '7.5'
+  }
+]);
+
+// 初始化饼图
+onMounted(() => {
+  const chart = echarts.init(pieChart.value);
+  const option = {
+    tooltip: {
+      trigger: 'item',
+      formatter: (params) => {
+        return `营养数据分析<br/>${params.marker} ${params.name} ${params.value}`;
+      },
+      backgroundColor: '#fff',
+      borderColor: '#eee',
+      borderWidth: 1,
+      textStyle: {
+        color: '#666'
+      }
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['50%', '70%'],
+        center: ['50%', '50%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: false
+        },
+        labelLine: {
+          show: false
+        },
+        emphasis: {
+          scale: false,
+          scaleSize: 0
+        },
+        data: [
+          {
+            value: 30.41,
+            name: '蛋白质',
+            itemStyle: {
+              color: '#36cfc9',
+              borderWidth: 0
+            }
+          },
+          {
+            value: 16.27,
+            name: '脂肪',
+            itemStyle: {
+              color: '#ffd666',
+              borderWidth: 0
+            }
+          },
+          {
+            value: 53.32,
+            name: '碳水化合物',
+            itemStyle: {
+              color: '#2f54eb',
+              borderWidth: 0
+            }
+          }
+        ]
+      }
+    ]
+  };
+  chart.setOption(option);
+
+  // 监听窗口大小变化，重新调整图表大小
+  window.addEventListener('resize', () => {
+    chart.resize();
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.right-card {
+  flex: 1;
+  height: calc(100vh - 40px);
+  overflow-y: auto;
+
+  :deep(.el-card__body) {
+    padding: 20px;
+  }
+
+  .operation-buttons {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 20px;
+
+    .left-buttons {
+      display: flex;
+      gap: 12px;
+    }
+
+    .pay-status {
+      position: absolute;
+      top: -10px;
+      right: -10px;
+
+      img {
+        width: 100px;
+        height: auto;
+      }
+    }
+  }
+
+  .stop-date {
+    margin-bottom: 20px;
+    font-size: 14px;
+
+    .label {
+      color: #606266;
+    }
+
+    .value {
+      color: #303133;
+    }
+  }
+
+  .prescription-tables {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    margin-bottom: 30px;
+
+    :deep(.el-table) {
+      .el-table__header th {
+        background-color: #f5f7fa;
+        color: #606266;
+      }
+    }
+
+    .table-cost {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      padding: 16px 0;
+      border-bottom: 1px solid #ebeef5;
+
+      .cost-item {
+        line-height: 24px;
+        color: #606266;
+        font-size: 18px;
+
+        &.total {
+          color: #f56c6c;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+
+  .analysis-tabs {
+    margin-bottom: 30px;
+
+    :deep(.el-tabs__header) {
+      margin-bottom: 20px;
+    }
+
+    .analysis-content {
+      .analysis-data {
+        display: flex;
+        gap: 40px;
+        margin-bottom: 20px;
+
+        .data-item {
+          font-size: 14px;
+
+          .label {
+            color: #606266;
+          }
+
+          .value {
+            color: #303133;
+          }
+        }
+      }
+
+      .analysis-detail {
+        display: flex;
+        gap: 40px;
+
+        .table-container {
+          width: 50%;
+
+          .extra-info {
+            margin-top: 16px;
+            display: flex;
+            justify-content: space-between;
+            color: #606266;
+            font-size: 14px;
+
+            .info-item {
+              .value {
+                color: #303133;
+                margin-left: 8px;
+              }
+            }
+          }
+        }
+
+        .chart-container {
+          width: 50%;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding-right: 20px;
+
+          .chart-title {
+            font-size: 16px;
+            font-weight: 500;
+            color: #303133;
+            margin-bottom: 20px;
+            text-align: center;
+          }
+
+          .pie-chart {
+            height: 220px;
+            margin-bottom: 20px;
+          }
+
+          .chart-legend {
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+
+            .legend-item {
+              display: flex;
+              align-items: center;
+              gap: 8px;
+
+              .color-block {
+                width: 14px;
+                height: 14px;
+                border-radius: 2px;
+              }
+
+              .text {
+                font-size: 13px;
+                color: #606266;
+                white-space: nowrap;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .footer-cost {
+    display: none;
+  }
+
+  .copyright {
+    text-align: center;
+    color: #909399;
+    font-size: 12px;
+  }
+}
+</style>

src/views/patients/enteralNutrition/components/table/MaterialTable.vue

@@ -0,0 +1,480 @@
+<template>
+  <div class="material-table">
+    <el-table :data="tableData" border :max-height="600">
+      <el-table-column type="index" label="组号" width="60" align="center" />
+      <el-table-column label="耗材" min-width="300">
+        <template #default="{row}">
+          <div class="material-group">
+            <div class="material-row">
+              <el-input v-model="row.material1" placeholder="请输入" />
+            </div>
+            <div class="material-row">
+              <el-input v-model="row.material2" placeholder="请输入" />
+            </div>
+            <div class="material-row">
+              <el-input v-model="row.material3" placeholder="请输入" />
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="规格" width="100" align="center">
+        <template #default="{row}">
+          <div class="spec-group">
+            <span>{{ row.specification1 }}</span>
+            <span>{{ row.specification2 }}</span>
+            <span>{{ row.specification3 }}</span>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="用量/次" width="150">
+        <template #default="{row}">
+          <div class="dosage-group">
+            <div class="dosage-input">
+              <el-input v-model="row.dosage1" placeholder="请输入" class="input-center" />
+              <span class="unit">g</span>
+            </div>
+            <div class="dosage-input">
+              <el-input v-model="row.dosage2" placeholder="请输入" class="input-center" />
+              <span class="unit">g</span>
+            </div>
+            <div class="dosage-input">
+              <el-input v-model="row.dosage3" placeholder="请输入" class="input-center" />
+              <span class="unit">g</span>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="餐次时间" width="460">
+        <template #default="{row}">
+          <div class="time-slots">
+            <div class="time-row">
+              <div class="time-group">
+                <el-checkbox v-model="row.timeSlots[0].checked" />
+                <el-time-select
+                  v-model="row.timeSlots[0].time"
+                  start="06:00"
+                  step="00:30"
+                  end="22:00"
+                  placeholder="选择时间"
+                  :disabled="!row.timeSlots[0].checked"
+                />
+              </div>
+              <div class="time-group">
+                <el-checkbox v-model="row.timeSlots[1].checked" />
+                <el-time-select
+                  v-model="row.timeSlots[1].time"
+                  start="06:00"
+                  step="00:30"
+                  end="22:00"
+                  placeholder="选择时间"
+                  :disabled="!row.timeSlots[1].checked"
+                />
+              </div>
+              <div class="time-group">
+                <el-checkbox v-model="row.timeSlots[2].checked" />
+                <el-time-select
+                  v-model="row.timeSlots[2].time"
+                  start="06:00"
+                  step="00:30"
+                  end="22:00"
+                  placeholder="选择时间"
+                  :disabled="!row.timeSlots[2].checked"
+                />
+              </div>
+            </div>
+            <div class="time-row">
+              <div class="time-group">
+                <el-checkbox v-model="row.timeSlots[3].checked" />
+                <el-time-select
+                  v-model="row.timeSlots[3].time"
+                  start="06:00"
+                  step="00:30"
+                  end="22:00"
+                  placeholder="选择时间"
+                  :disabled="!row.timeSlots[3].checked"
+                />
+              </div>
+              <div class="time-group">
+                <el-checkbox v-model="row.timeSlots[4].checked" />
+                <el-time-select
+                  v-model="row.timeSlots[4].time"
+                  start="06:00"
+                  step="00:30"
+                  end="22:00"
+                  placeholder="选择时间"
+                  :disabled="!row.timeSlots[4].checked"
+                />
+              </div>
+              <div class="time-group">
+                <el-checkbox v-model="row.timeSlots[5].checked" />
+                <el-time-select
+                  v-model="row.timeSlots[5].time"
+                  start="06:00"
+                  step="00:30"
+                  end="22:00"
+                  placeholder="选择时间"
+                  :disabled="!row.timeSlots[5].checked"
+                />
+              </div>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="频次" width="100" align="center">
+        <template #default>
+          <span>一天3次</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="用量/日" width="100" align="center">
+        <template #default="{row}">
+          <span>{{ row.dailyDosage }}袋</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="使用天数" width="100" align="center">
+        <template #default="{row}">
+          <span>{{ row.days }}天</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="首日" width="80" align="center">
+        <template #default="{row}">
+          <span>{{ row.firstDayTimes }}次</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="table-footer">
+      <div class="left-buttons">
+        <el-button type="primary" plain>登为个人模板</el-button>
+        <el-button type="primary" plain>批量添加营养品</el-button>
+        <el-button type="primary" plain>处方模板</el-button>
+      </div>
+      <div class="right-summary">
+        <div class="summary-list">
+          <div class="summary-item">
+            <span class="label">处方费用：</span>
+            <span class="value">￥0.00</span>
+          </div>
+          <div class="summary-item">
+            <span class="label">营养配置费：</span>
+            <span class="value">￥39.00</span>
+          </div>
+          <div class="summary-item total">
+            <span class="label">总计：</span>
+            <span class="value">￥39.00</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue';
+
+interface TimeSlot {
+  checked: boolean;
+  time: string;
+}
+
+interface TableRow {
+  material1: string;
+  material2: string;
+  material3: string;
+  specification1: string;
+  specification2: string;
+  specification3: string;
+  dosage1: string;
+  dosage2: string;
+  dosage3: string;
+  timeSlots: TimeSlot[];
+  dailyDosage: number;
+  days: number;
+  firstDayTimes: number;
+}
+
+// 示例数据
+const tableData = ref<TableRow[]>([
+  {
+    material1: '',
+    material2: '',
+    material3: '',
+    specification1: '4克/袋',
+    specification2: '4克/袋',
+    specification3: '4克/袋',
+    dosage1: '',
+    dosage2: '',
+    dosage3: '',
+    timeSlots: [
+      {checked: false, time: '08:00'},
+      {checked: false, time: '08:00'},
+      {checked: false, time: '08:00'},
+      {checked: false, time: '08:00'},
+      {checked: false, time: '08:00'},
+      {checked: false, time: '08:00'}
+    ],
+    dailyDosage: 3.0,
+    days: 1,
+    firstDayTimes: 2
+  },
+  {
+    material1: '',
+    material2: '',
+    material3: '',
+    specification1: '4克/袋',
+    specification2: '4克/袋',
+    specification3: '4克/袋',
+    dosage1: '',
+    dosage2: '',
+    dosage3: '',
+    timeSlots: [
+      {checked: false, time: '08:00'},
+      {checked: false, time: '08:00'},
+      {checked: false, time: '08:00'},
+      {checked: false, time: '08:00'},
+      {checked: false, time: '08:00'},
+      {checked: false, time: '08:00'}
+    ],
+    dailyDosage: 3.0,
+    days: 1,
+    firstDayTimes: 2
+  }
+]);
+
+// 选择耗材
+const selectMaterial = (row: TableRow) => {
+  // TODO: 实现耗材选择逻辑
+  console.log('选择耗材', row);
+};
+
+// 删除耗材
+const deleteMaterial = (row: TableRow) => {
+  // TODO: 实现耗材删除逻辑
+  console.log('删除耗材', row);
+};
+
+// 复制行
+const copyRow = (index: number) => {
+  const newRow = JSON.parse(JSON.stringify(tableData.value[index]));
+  tableData.value.splice(index + 1, 0, newRow);
+};
+
+// 删除行
+const deleteRow = (index: number) => {
+  if (tableData.value.length === 1) return;
+  tableData.value.splice(index, 1);
+};
+</script>
+
+<style lang="scss" scoped>
+.material-table {
+  :deep(.el-table) {
+    // 表头样式
+    .el-table__header {
+      th {
+        background-color: #f5f7fa;
+        color: #606266;
+        font-weight: 500;
+        padding: 8px 0;
+        height: 40px;
+      }
+    }
+
+    // 表格行样式
+    .el-table__row {
+      td {
+        padding: 4px 8px;
+      }
+    }
+  }
+
+  // 耗材输入框组样式
+  .material-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .material-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .el-input {
+        flex: 1;
+      }
+    }
+  }
+
+  // 规格组样式
+  .spec-group {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    padding: 8px 0;
+
+    span {
+      color: #606266;
+      font-size: 14px;
+    }
+  }
+
+  // 用量输入框组样式
+  .dosage-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .dosage-input {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+
+      .input-center {
+        width: 100px;
+
+        :deep(.el-input__inner) {
+          text-align: center;
+        }
+      }
+
+      .unit {
+        color: #909399;
+        font-size: 14px;
+        flex-shrink: 0;
+      }
+    }
+  }
+
+  // 餐次时间样式
+  .time-slots {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .time-row {
+      display: flex;
+      gap: 8px;
+
+      .time-group {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+
+        :deep(.el-checkbox) {
+          margin-right: 0;
+          .el-checkbox__label {
+            display: none;
+          }
+        }
+
+        :deep(.el-time-select) {
+          .el-input {
+            width: 120px;
+          }
+          .el-input__wrapper {
+            padding: 0 8px;
+            border-radius: 2px;
+            box-shadow: 0 0 0 1px #dcdfe6 inset;
+            &:hover:not(.is-disabled) {
+              box-shadow: 0 0 0 1px #c0c4cc inset;
+            }
+            &.is-disabled {
+              background-color: #f5f7fa;
+              box-shadow: 0 0 0 1px #e4e7ed inset;
+              .el-input__inner {
+                color: #909399;
+                -webkit-text-fill-color: #909399;
+              }
+            }
+          }
+          .el-input__inner {
+            height: 32px;
+            text-align: center;
+            font-size: 14px;
+            color: #606266;
+          }
+        }
+      }
+    }
+  }
+
+  // 操作按钮样式
+  :deep(.el-button--link) {
+    height: 28px;
+    padding: 0 8px;
+    font-size: 13px;
+
+    &.el-button--primary {
+      color: var(--el-color-primary);
+      &:hover {
+        color: var(--el-color-primary-light-3);
+      }
+    }
+
+    &.el-button--danger {
+      color: var(--el-color-danger);
+      &:hover {
+        color: var(--el-color-danger-light-3);
+      }
+    }
+  }
+
+  .table-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-top: 16px;
+
+    .left-buttons {
+      display: flex;
+      gap: 12px;
+
+      .el-button {
+        height: 32px;
+        padding: 0 16px;
+        font-size: 14px;
+      }
+    }
+
+    .right-summary {
+      min-width: 200px;
+
+      .summary-list {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 4px;
+
+        .summary-item {
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          gap: 8px;
+          text-align: right;
+
+          .label {
+            font-size: 16px;
+            color: #606266;
+          }
+
+          .value {
+            font-size: 20px;
+            color: #606266;
+            min-width: 80px;
+            text-align: right;
+          }
+
+          &.total {
+            margin-top: 4px;
+
+            .label,
+            .value {
+              color: #f56c6c;
+              font-weight: 500;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/patients/enteralNutrition/components/table/NutritionTable.vue

@@ -0,0 +1,496 @@
+<template>
+  <div class="nutrition-table">
+    <!-- 停嘱日期 (仅长期医嘱显示) -->
+    <div v-if="type === 'long-term'" class="stop-date">
+      <span class="required">*</span>
+      <span class="label">停嘱日期</span>
+      <el-date-picker v-model="stopDate" type="date" placeholder="请选择" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
+      <span class="days">(使用天数：0天)</span>
+    </div>
+
+    <el-table :data="tableData" border>
+      <el-table-column type="index" label="组号" width="60" align="center" />
+      <el-table-column label="营养产品" min-width="300">
+        <template #default="{row}">
+          <div class="product-group">
+            <template v-if="!row.isNewRow">
+              <div v-for="(product, index) in row.products" :key="index" class="product-row">
+                <el-input v-model="product.value" placeholder="请输入" />
+                <div class="action-buttons">
+                  <el-button class="icon-btn" @click="addProduct(row)">
+                    <el-icon><Plus /></el-icon>
+                  </el-button>
+                  <el-button class="icon-btn" @click="removeProduct(row, index)">
+                    <el-icon><Delete /></el-icon>
+                  </el-button>
+                </div>
+              </div>
+            </template>
+            <template v-else>
+              <div v-for="(product, index) in row.products" :key="index" class="product-row">
+                <el-input v-model="product.value" placeholder="请选择" />
+                <div class="action-buttons">
+                  <el-button class="icon-btn" @click="addProduct(row)">
+                    <el-icon><Plus /></el-icon>
+                  </el-button>
+                  <el-button class="icon-btn" @click="removeProduct(row, index)">
+                    <el-icon><Delete /></el-icon>
+                  </el-button>
+                </div>
+              </div>
+            </template>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="用量/次" width="150" align="center">
+        <template #default="{row}">
+          <div class="dosage-group">
+            <template v-if="!row.isNewRow">
+              <div v-for="(product, index) in row.products" :key="index" class="dosage-input">
+                <el-input v-model="product.dosage" placeholder="请输入" class="input-center" />
+                <span class="unit">g</span>
+              </div>
+            </template>
+            <template v-else>
+              <div v-for="(product, index) in row.products" :key="index" class="dosage-input">
+                <el-input v-model="product.dosage" placeholder="请输入" class="input-center" />
+                <span class="unit">g</span>
+              </div>
+            </template>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="餐次时间" width="500">
+        <template #default="{row}">
+          <div class="time-slots">
+            <div class="time-row">
+              <div class="time-group">
+                <el-checkbox v-model="row.timeSlots[0].checked" />
+                <el-time-select
+                  v-model="row.timeSlots[0].time"
+                  start="06:00"
+                  step="00:30"
+                  end="22:00"
+                  placeholder="选择时间"
+                  :disabled="!row.timeSlots[0].checked"
+                />
+              </div>
+              <div class="time-group">
+                <el-checkbox v-model="row.timeSlots[1].checked" />
+                <el-time-select
+                  v-model="row.timeSlots[1].time"
+                  start="06:00"
+                  step="00:30"
+                  end="22:00"
+                  placeholder="选择时间"
+                  :disabled="!row.timeSlots[1].checked"
+                />
+              </div>
+              <div class="time-group">
+                <el-checkbox v-model="row.timeSlots[2].checked" />
+                <el-time-select
+                  v-model="row.timeSlots[2].time"
+                  start="06:00"
+                  step="00:30"
+                  end="22:00"
+                  placeholder="选择时间"
+                  :disabled="!row.timeSlots[2].checked"
+                />
+              </div>
+            </div>
+            <div class="time-row">
+              <div class="time-group">
+                <el-checkbox v-model="row.timeSlots[3].checked" />
+                <el-time-select
+                  v-model="row.timeSlots[3].time"
+                  start="06:00"
+                  step="00:30"
+                  end="22:00"
+                  placeholder="选择时间"
+                  :disabled="!row.timeSlots[3].checked"
+                />
+              </div>
+              <div class="time-group">
+                <el-checkbox v-model="row.timeSlots[4].checked" />
+                <el-time-select
+                  v-model="row.timeSlots[4].time"
+                  start="06:00"
+                  step="00:30"
+                  end="22:00"
+                  placeholder="选择时间"
+                  :disabled="!row.timeSlots[4].checked"
+                />
+              </div>
+              <div class="time-group">
+                <el-checkbox v-model="row.timeSlots[5].checked" />
+                <el-time-select
+                  v-model="row.timeSlots[5].time"
+                  start="06:00"
+                  step="00:30"
+                  end="22:00"
+                  placeholder="选择时间"
+                  :disabled="!row.timeSlots[5].checked"
+                />
+              </div>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="频次" width="120" align="center">
+        <template #default>
+          <span>一天3次</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="用量/日" width="150" align="center">
+        <template #default="{row}">
+          <div class="daily-dosage">
+            <span>{{ row.dailyDosage }}</span>
+            <span class="unit">袋</span>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="使用天数" width="120" align="center">
+        <template #default="{row}">
+          <div class="days">
+            <span>{{ row.days }}</span>
+            <span class="unit">天</span>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="160" align="center" fixed="right">
+        <template #default="{$index}">
+          <div class="operation-cell">
+            <el-button type="primary" link @click="copyRow($index)">复制餐次</el-button>
+            <el-button type="danger" link @click="deleteRow($index)">删除</el-button>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="table-footer">
+      <el-button type="primary" class="add-prescription-btn" @click="addNewRow">
+        <el-icon><CirclePlus /></el-icon>
+        开具多处方
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref, defineProps} from 'vue';
+import {Plus, Delete, CirclePlus} from '@element-plus/icons-vue';
+
+const props = defineProps<{
+  type?: 'normal' | 'long-term';
+}>();
+
+// 停嘱日期
+const stopDate = ref('');
+
+interface TimeSlot {
+  checked: boolean;
+  time: string;
+}
+
+interface Product {
+  value: string;
+  dosage: string;
+}
+
+interface TableRow {
+  products: Product[];
+  timeSlots: TimeSlot[];
+  dailyDosage: number;
+  days: number;
+  isNewRow?: boolean;
+}
+
+// 创建默认行数据的函数
+const createDefaultRow = (isNew: boolean = false): TableRow => ({
+  products: isNew
+    ? [{value: '', dosage: ''}]
+    : [
+        {value: '', dosage: ''},
+        {value: '', dosage: ''},
+        {value: '', dosage: ''}
+      ],
+  timeSlots: [
+    {checked: false, time: '08:00'},
+    {checked: false, time: '08:30'},
+    {checked: false, time: '12:00'},
+    {checked: false, time: '12:30'},
+    {checked: false, time: '18:00'},
+    {checked: false, time: '18:30'}
+  ],
+  dailyDosage: 2.0,
+  days: 1,
+  isNewRow: isNew
+});
+
+// 示例数据
+const tableData = ref<TableRow[]>([createDefaultRow(), createDefaultRow()]);
+
+// 新增行
+const addNewRow = () => {
+  tableData.value.push(createDefaultRow(true));
+};
+
+// 新增产品输入框
+const addProduct = (row: TableRow) => {
+  row.products.push({value: '', dosage: ''});
+};
+
+// 删除产品输入框
+const removeProduct = (row: TableRow, index: number) => {
+  // 如果删除后只剩一个输入框，删除整行
+  if (row.products.length <= 1) {
+    const rowIndex = tableData.value.findIndex((item) => item === row);
+    if (rowIndex !== -1) {
+      tableData.value.splice(rowIndex, 1);
+    }
+  } else {
+    // 否则只删除当前输入框
+    row.products.splice(index, 1);
+  }
+};
+
+// 选择产品
+const selectProduct = (row: TableRow, index: number) => {
+  // TODO: 实现产品选择逻辑
+  console.log('选择产品', row, index);
+};
+
+// 删除产品
+const deleteProduct = (row: TableRow, index: number) => {
+  // TODO: 实现产品删除逻辑
+  console.log('删除产品', row, index);
+};
+
+// 复制行
+const copyRow = (index: number) => {
+  const newRow = JSON.parse(JSON.stringify(tableData.value[index]));
+  tableData.value.splice(index + 1, 0, newRow);
+};
+
+// 删除行
+const deleteRow = (index: number) => {
+  if (tableData.value.length === 1) return;
+  tableData.value.splice(index, 1);
+};
+</script>
+
+<style lang="scss" scoped>
+.nutrition-table {
+  :deep(.el-table) {
+    // 表头样式
+    .el-table__header {
+      th {
+        background-color: #f5f7fa;
+        color: #606266;
+        font-weight: 500;
+        padding: 8px 0;
+        height: 40px;
+      }
+    }
+
+    // 表格行样式
+    .el-table__row {
+      td {
+        padding: 4px 8px;
+      }
+    }
+  }
+
+  // 产品输入框组样式
+  .product-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .product-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .el-input {
+        flex: 1;
+      }
+
+      .action-buttons {
+        display: flex;
+        gap: 1px;
+
+        .icon-btn {
+          padding: 6px;
+          height: 32px;
+          border: 1px solid #dcdfe6;
+
+          &:hover {
+            border-color: var(--el-color-primary);
+            color: var(--el-color-primary);
+          }
+
+          .el-icon {
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+
+  // 用量输入框组样式
+  .dosage-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .dosage-input {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+
+      .input-center {
+        width: 100px;
+
+        :deep(.el-input__inner) {
+          text-align: center;
+        }
+      }
+
+      .unit {
+        color: #909399;
+        font-size: 14px;
+        flex-shrink: 0;
+      }
+    }
+  }
+
+  // 餐次时间样式
+  .time-slots {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .time-row {
+      display: flex;
+      gap: 8px;
+
+      .time-group {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+
+        :deep(.el-checkbox) {
+          margin-right: 0;
+          .el-checkbox__label {
+            display: none;
+          }
+        }
+
+        :deep(.el-time-select) {
+          .el-input {
+            width: 120px;
+          }
+          .el-input__wrapper {
+            padding: 0 8px;
+            border-radius: 2px;
+            box-shadow: 0 0 0 1px #dcdfe6 inset;
+            &:hover:not(.is-disabled) {
+              box-shadow: 0 0 0 1px #c0c4cc inset;
+            }
+            &.is-disabled {
+              background-color: #f5f7fa;
+              box-shadow: 0 0 0 1px #e4e7ed inset;
+              .el-input__inner {
+                color: #909399;
+                -webkit-text-fill-color: #909399;
+              }
+            }
+          }
+          .el-input__inner {
+            height: 32px;
+            text-align: center;
+            font-size: 14px;
+            color: #606266;
+          }
+        }
+      }
+    }
+  }
+
+  .daily-dosage,
+  .days {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+
+    .unit {
+      color: #909399;
+      font-size: 14px;
+    }
+  }
+
+  .operation-cell {
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+
+    .el-button {
+      padding: 4px 8px;
+    }
+  }
+
+  .table-footer {
+    height: 50px;
+    border: 1px solid var(--el-table-border-color);
+    border-top: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #f5f7fa;
+
+    .add-prescription-btn {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      height: 32px;
+      padding: 0 16px;
+      font-size: 14px;
+      background-color: var(--el-color-primary-light-8);
+      color: var(--el-color-primary);
+      border: none;
+
+      &:hover {
+        background-color: var(--el-color-primary-light-9);
+      }
+
+      .el-icon {
+        font-size: 16px;
+      }
+    }
+  }
+
+  .stop-date {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 16px;
+
+    .required {
+      color: #f56c6c;
+      font-size: 14px;
+    }
+
+    .label {
+      color: #606266;
+      font-size: 14px;
+    }
+
+    .days {
+      color: #f56c6c;
+      font-size: 14px;
+    }
+  }
+}
+</style>

src/views/patients/enteralNutrition/components/table/PackageTable.vue

@@ -0,0 +1,507 @@
+<template>
+  <div class="package-table">
+    <el-table :data="tableData" border>
+      <el-table-column type="index" label="组号" width="60" align="center" />
+      <el-table-column label="营养产品" min-width="300">
+        <template #default="{row}">
+          <div class="product-group">
+            <div v-for="(product, index) in row.products" :key="index" class="product-row">
+              <el-input v-model="product.value" placeholder="请选择" />
+              <div class="action-buttons">
+                <el-button class="icon-btn" @click="addProduct(row)">
+                  <el-icon><Plus /></el-icon>
+                </el-button>
+                <el-button class="icon-btn" @click="deleteProduct(row, index)">
+                  <el-icon><Delete /></el-icon>
+                </el-button>
+              </div>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="数量" width="150" align="center">
+        <template #default="{row}">
+          <div class="quantity-group">
+            <div v-for="(product, index) in row.products" :key="index" class="quantity-input">
+              <el-input v-model="product.quantity" placeholder="请输入" class="input-center" />
+              <span class="unit">袋</span>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="用量/次" width="150" align="center">
+        <template #default="{row}">
+          <div class="dosage-group">
+            <div v-for="(product, index) in row.products" :key="index" class="dosage-input">
+              <el-input v-model="product.dosage" placeholder="请输入" class="input-center" />
+              <span class="unit">g</span>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="餐次时间" width="500">
+        <template #default="{row}">
+          <div class="time-slots">
+            <div class="time-row">
+              <div class="time-group">
+                <el-checkbox v-model="row.timeSlots[0].checked" />
+                <el-time-select
+                  v-model="row.timeSlots[0].time"
+                  start="06:00"
+                  step="00:30"
+                  end="22:00"
+                  placeholder="选择时间"
+                  :disabled="!row.timeSlots[0].checked"
+                />
+              </div>
+              <div class="time-group">
+                <el-checkbox v-model="row.timeSlots[1].checked" />
+                <el-time-select
+                  v-model="row.timeSlots[1].time"
+                  start="06:00"
+                  step="00:30"
+                  end="22:00"
+                  placeholder="选择时间"
+                  :disabled="!row.timeSlots[1].checked"
+                />
+              </div>
+              <div class="time-group">
+                <el-checkbox v-model="row.timeSlots[2].checked" />
+                <el-time-select
+                  v-model="row.timeSlots[2].time"
+                  start="06:00"
+                  step="00:30"
+                  end="22:00"
+                  placeholder="选择时间"
+                  :disabled="!row.timeSlots[2].checked"
+                />
+              </div>
+            </div>
+            <div class="time-row">
+              <div class="time-group">
+                <el-checkbox v-model="row.timeSlots[3].checked" />
+                <el-time-select
+                  v-model="row.timeSlots[3].time"
+                  start="06:00"
+                  step="00:30"
+                  end="22:00"
+                  placeholder="选择时间"
+                  :disabled="!row.timeSlots[3].checked"
+                />
+              </div>
+              <div class="time-group">
+                <el-checkbox v-model="row.timeSlots[4].checked" />
+                <el-time-select
+                  v-model="row.timeSlots[4].time"
+                  start="06:00"
+                  step="00:30"
+                  end="22:00"
+                  placeholder="选择时间"
+                  :disabled="!row.timeSlots[4].checked"
+                />
+              </div>
+              <div class="time-group">
+                <el-checkbox v-model="row.timeSlots[5].checked" />
+                <el-time-select
+                  v-model="row.timeSlots[5].time"
+                  start="06:00"
+                  step="00:30"
+                  end="22:00"
+                  placeholder="选择时间"
+                  :disabled="!row.timeSlots[5].checked"
+                />
+              </div>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="频次" width="120" align="center">
+        <template #default>
+          <span>一天3次</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="首日" width="100" align="center">
+        <template #default="{row}">
+          <div class="first-day">
+            <el-input-number v-model="row.firstDayTimes" :min="1" :max="10" size="small" controls-position="right" />
+            <span class="unit">次</span>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="用量/日" width="100" align="center">
+        <template #default="{row}">
+          <span>{{ row.dailyDosage }}g</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="使用天数" width="120" align="center">
+        <template #default="{row}">
+          <div class="days">
+            <el-input-number v-model="row.days" :min="1" :max="99" size="small" controls-position="right" />
+            <span class="unit">天</span>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="160" align="center" fixed="right">
+        <template #default="{$index}">
+          <div class="operation-cell">
+            <el-button type="primary" link @click="copyRow($index)">复制餐次</el-button>
+            <el-button type="danger" link @click="deleteRow($index)">删除</el-button>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 添加营养产品按钮 -->
+    <div class="add-product">
+      <el-button type="primary" class="add-btn" @click="addRow">
+        <el-icon><CirclePlus /></el-icon>
+        添加营养产品
+      </el-button>
+    </div>
+    <!-- 底部按钮和总计 -->
+    <div class="table-footer">
+      <div class="left-buttons">
+        <el-button type="primary" plain>存为个人模板</el-button>
+        <el-button type="primary" plain>批量添加营养品</el-button>
+        <el-button type="primary" plain>处方模板</el-button>
+      </div>
+      <div class="right-summary">
+        <div class="summary-list">
+          <div class="summary-item">
+            <span class="label">处方费用：</span>
+            <span class="value">￥0.00</span>
+          </div>
+          <div class="summary-item total">
+            <span class="label">总计：</span>
+            <span class="value">￥0.00</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue';
+import {Plus, Delete, CirclePlus} from '@element-plus/icons-vue';
+
+interface TimeSlot {
+  checked: boolean;
+  time: string;
+}
+
+interface Product {
+  value: string;
+  quantity: string;
+  dosage: string;
+}
+
+interface TableRow {
+  products: Product[];
+  timeSlots: TimeSlot[];
+  firstDayTimes: number;
+  dailyDosage: number;
+  days: number;
+}
+
+// 创建默认行数据
+const createDefaultRow = (): TableRow => ({
+  products: [
+    {
+      value: '',
+      quantity: '',
+      dosage: ''
+    }
+  ],
+  timeSlots: [
+    {checked: false, time: '08:00'},
+    {checked: false, time: '08:30'},
+    {checked: false, time: '12:00'},
+    {checked: false, time: '12:30'},
+    {checked: false, time: '18:00'},
+    {checked: false, time: '18:30'}
+  ],
+  firstDayTimes: 2,
+  dailyDosage: 2.0,
+  days: 1
+});
+
+// 表格数据
+const tableData = ref<TableRow[]>([createDefaultRow()]);
+
+// 添加产品输入框
+const addProduct = (row: TableRow) => {
+  row.products.push({
+    value: '',
+    quantity: '',
+    dosage: ''
+  });
+};
+
+// 删除产品输入框
+const deleteProduct = (row: TableRow, index: number) => {
+  if (row.products.length <= 1) {
+    // 如果只剩一个输入框，删除整行
+    const rowIndex = tableData.value.findIndex((item) => item === row);
+    if (rowIndex !== -1) {
+      tableData.value.splice(rowIndex, 1);
+    }
+  } else {
+    // 否则只删除当前输入框
+    row.products.splice(index, 1);
+  }
+};
+
+// 复制行
+const copyRow = (index: number) => {
+  const newRow = JSON.parse(JSON.stringify(tableData.value[index]));
+  tableData.value.splice(index + 1, 0, newRow);
+};
+
+// 删除行
+const deleteRow = (index: number) => {
+  if (tableData.value.length === 1) return;
+  tableData.value.splice(index, 1);
+};
+
+// 添加行
+const addRow = () => {
+  tableData.value.push(createDefaultRow());
+};
+</script>
+
+<style lang="scss" scoped>
+.package-table {
+  :deep(.el-table) {
+    .el-table__header {
+      th {
+        background-color: #f5f7fa;
+        color: #606266;
+        font-weight: 500;
+        padding: 8px 0;
+        height: 40px;
+      }
+    }
+
+    .el-table__row {
+      td {
+        padding: 4px 8px;
+      }
+    }
+  }
+
+  .product-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .product-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .el-input {
+        flex: 1;
+      }
+
+      .action-buttons {
+        display: flex;
+        gap: 1px;
+
+        .icon-btn {
+          padding: 6px;
+          height: 32px;
+          border: 1px solid #dcdfe6;
+
+          &:hover {
+            border-color: var(--el-color-primary);
+            color: var(--el-color-primary);
+          }
+
+          .el-icon {
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+
+  .quantity-group,
+  .dosage-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .quantity-input,
+    .dosage-input {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+      height: 32px;
+
+      .input-center {
+        width: 80px;
+
+        :deep(.el-input__inner) {
+          text-align: center;
+        }
+      }
+
+      .unit {
+        color: #909399;
+        font-size: 14px;
+      }
+    }
+  }
+
+  .time-slots {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .time-row {
+      display: flex;
+      gap: 8px;
+
+      .time-group {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+
+        :deep(.el-checkbox) {
+          margin-right: 0;
+          .el-checkbox__label {
+            display: none;
+          }
+        }
+
+        :deep(.el-time-select) {
+          .el-input {
+            width: 120px;
+          }
+          .el-input__wrapper {
+            padding: 0 8px;
+            border-radius: 2px;
+            box-shadow: 0 0 0 1px #dcdfe6 inset;
+            &:hover:not(.is-disabled) {
+              box-shadow: 0 0 0 1px #c0c4cc inset;
+            }
+            &.is-disabled {
+              background-color: #f5f7fa;
+              box-shadow: 0 0 0 1px #e4e7ed inset;
+              .el-input__inner {
+                color: #909399;
+                -webkit-text-fill-color: #909399;
+              }
+            }
+          }
+          .el-input__inner {
+            height: 32px;
+            text-align: center;
+            font-size: 14px;
+            color: #606266;
+          }
+        }
+      }
+    }
+  }
+
+  .operation-cell {
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+  }
+
+  .add-product {
+    display: flex;
+    justify-content: center;
+    margin-top: 16px;
+    padding: 12px 0;
+    background-color: #f5f7fa;
+    border: 1px solid var(--el-table-border-color);
+    border-top: none;
+
+    .add-btn {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      height: 32px;
+      padding: 0 16px;
+      font-size: 14px;
+      background-color: var(--el-color-primary-light-8);
+      color: var(--el-color-primary);
+      border: none;
+
+      &:hover {
+        background-color: var(--el-color-primary-light-9);
+      }
+
+      .el-icon {
+        font-size: 16px;
+      }
+    }
+  }
+
+  .table-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-top: 16px;
+    padding: 16px;
+    border: 1px solid var(--el-table-border-color);
+    border-top: 1px solid var(--el-table-border-color);
+
+    .left-buttons {
+      display: flex;
+      gap: 12px;
+
+      .el-button {
+        height: 32px;
+        padding: 0 16px;
+        font-size: 14px;
+      }
+    }
+
+    .right-summary {
+      min-width: 200px;
+
+      .summary-list {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 4px;
+
+        .summary-item {
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          gap: 8px;
+          text-align: right;
+
+          .label {
+            font-size: 16px;
+            color: #606266;
+          }
+
+          .value {
+            font-size: 20px;
+            color: #606266;
+            min-width: 80px;
+            text-align: right;
+          }
+
+          &.total {
+            margin-top: 4px;
+
+            .label,
+            .value {
+              color: #f56c6c;
+              font-weight: 500;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/patients/enteralNutrition/history.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="history-container">
+    <LeftCard />
+    <RightCard />
+  </div>
+</template>
+
+<script setup lang="ts">
+import LeftCard from './components/history/LeftCard.vue';
+import RightCard from './components/history/RightCard.vue';
+</script>
+
+<style lang="scss" scoped>
+.history-container {
+  display: flex;
+  gap: 20px;
+  min-height: 100vh;
+  background: #f5f7fa;
+}
+</style>

src/views/patients/enteralNutrition/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="container">
+    <div class="main-content">
+      <!-- 左侧卡片 -->
+      <LeftCard  @gotoTop="goHistoryPrescription"/>
+      <!-- 右侧卡片 -->
+      <RightCard />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import LeftCard from './components/LeftCard.vue';
+import RightCard from './components/RightCard.vue';
+
+const { patientInfo } = defineProps<{ patientInfo: any }>()
+
+// 解决bug核心
+const emit = defineEmits(['change']);
+
+const goHistoryPrescription = () => {  
+  emit('change', 'enteralNutritionHistory',patientInfo.id)
+};
+
+</script>
+
+<style lang="scss" scoped>
+.container {
+  min-height: 100vh;
+  background: #f5f7fa;
+}
+
+.main-content {
+  display: flex;
+  gap: 20px;
+  min-height: calc(100vh - 40px);
+}
+</style>

src/views/patients/medicalRecord/index.vue

@@ -36,6 +36,7 @@
                     <template #title>营养干预</template>
                     <el-menu-item index="nutritionSetting">营养设定</el-menu-item>
                     <el-menu-item index="enteralNutrition">肠内营养</el-menu-item>
+                    <el-menu-item index="enteralNutritionHistory" v-show="false">肠内营养历史处方</el-menu-item>
                     <el-menu-item index="parenteralNutrition">肠外营养</el-menu-item>
                     <el-menu-item index="dietTherapy">膳食治疗</el-menu-item>
                 </el-sub-menu>
@@ -130,7 +131,8 @@
     const NutritionScreeningAdd = defineAsyncComponent(() => import('@/views/patients/screening/add.vue'));
     const NutritionEvaluationAdd = defineAsyncComponent(() => import('@/views/patients/evaluation/add.vue'));
     const ParenteralNutrition = defineAsyncComponent(() => import('@/views/patients/parenteralNutrition/index.vue'));
-    
+    const EnteralNutrition = defineAsyncComponent(() => import('@/views/patients/enteralNutrition/index.vue'));
+    const EnteralNutritionHistory = defineAsyncComponent(() => import('@/views/patients/enteralNutrition/history.vue'));    
 
     const componentMap = {
         medicalRecord: MedicalRecord, // “营养病例”对应MedicalRecord.vue
@@ -141,6 +143,8 @@
         nutritionEvaluation:NutritionEvaluation,
         nutritionEvaluationAdd: NutritionEvaluationAdd,
         parenteralNutrition: ParenteralNutrition,
+        enteralNutrition: EnteralNutrition,
+        enteralNutritionHistory: EnteralNutritionHistory,
         // ... 其它映射
     };
     const currentComponent = ref(componentMap['medicalRecord']); // 默认显示
@@ -172,6 +176,8 @@
     const handleSelect = (key: string,other?:string[]) => {   
         if(key=='nutritionScreeningAdd'||key=='nutritionEvaluationAdd'){            
             activeMenu.value = key.replace('Add',''); 
+        }if(key=='enteralNutritionHistory'){            
+            activeMenu.value = key.replace('History',''); 
         }else{
             activeMenu.value = key; 
         }