wkx-his-web/src/views/patients/enteralNutrition/components/table/PackageTable.vue

<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>