index.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <template>
  2. <div class="container">
  3. <div class="main-content">
  4. <!-- 左侧卡片 -->
  5. <LeftCard @gotoTop="goHistoryPrescription" :patientInfo="patientInfo"
  6. @nutritionProductsChange="handleNutritionProductsChange" />
  7. <!-- 右侧卡片 -->
  8. <RightCard :nutritionProducts="currentNutritionProducts" />
  9. </div>
  10. </div>
  11. </template>
  12. <script setup lang="ts">
  13. import { ref } from 'vue';
  14. import LeftCard from './components/LeftCard.vue';
  15. import RightCard from './components/RightCard.vue';
  16. const { patientInfo } = defineProps<{ patientInfo: any }>();
  17. // 解决bug核心
  18. const emit = defineEmits(['change']);
  19. // 当前营养产品列表
  20. const currentNutritionProducts = ref<Array<{
  21. name: string,
  22. productCode: string,
  23. type: string,
  24. protein?: number,
  25. fat?: number,
  26. carbohydrate?: number,
  27. calorie?: number,
  28. dosePerTime?: number,
  29. quantity?: number
  30. }>>([]);
  31. const goHistoryPrescription = () => {
  32. emit('change', 'enteralNutritionHistory');
  33. };
  34. // 处理营养产品变化
  35. const handleNutritionProductsChange = (products: Array<{
  36. name: string,
  37. productCode: string,
  38. type: string,
  39. protein?: number,
  40. fat?: number,
  41. carbohydrate?: number,
  42. calorie?: number,
  43. dosePerTime?: number,
  44. quantity?: number
  45. }>) => {
  46. currentNutritionProducts.value = products;
  47. console.log('父组件接收到营养产品变化:', products);
  48. };
  49. </script>
  50. <style lang="scss" scoped>
  51. .container {
  52. min-height: 100vh;
  53. background: #f5f7fa;
  54. }
  55. .main-content {
  56. display: flex;
  57. gap: 20px;
  58. min-height: calc(100vh - 40px);
  59. }
  60. </style>