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

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