用于展示患者的就诊记录。每一条就诊记录需要展示就诊日期、医生姓名、诊断结果和处方信息。用户可以通过输入关键字进行搜索，搜索结果将实时展示在表格中。点击详情可以弹出一个弹窗组件，展示基本信息。 <img src="images/day04-homework1.gif" /> 需求： 1. 实现搜索框根据关键词 查询出对应的数据 2. 封装一个表格组件，组件里边人记录，根据父组件传递过来的数组展示 3. 封装一个详情组件 4. 点击详情的时候，可以打开弹窗组件，并且展示用户的信息 5. 点击X关闭弹窗 组件

实现这个需求可以采用以下步骤：

1. 创建一个包含就诊日期、医生姓名、诊断结果和处方信息的数据数组。

2. 创建一个搜索框组件，当用户输入关键字时，使用 JavaScript 的 filter() 方法过滤出包含该关键字的数据。

3. 创建一个表格组件，接收父组件传递的数据数组并展示在表格中。

4. 创建一个详情组件，当用户点击某条记录的详情按钮时，弹出弹窗组件并将该条记录的数据传递给详情组件展示。

5. 创建一个弹窗组件，展示传递给它的数据，并在点击关闭按钮时关闭弹窗。

下面是一个代码示例：

<!-- SearchBox.vue 搜索框组件 -->
<template>
  <div>
    <input type="text" v-model="keyword" @input="search" placeholder="输入关键字搜索">
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '' // 用户输入的关键字
    }
  },
  methods: {
    search() {
      // 过滤出包含关键字的数据
      this.$emit('search', this.keyword)
    }
  }
}
</script>


<!-- DataTable.vue 表格组件 -->
<template>
  <table>
    <thead>
      <tr>
        <th>就诊日期</th>
        <th>医生姓名</th>
        <th>诊断结果</th>
        <th>处方信息</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="record in filteredRecords" :key="record.id">
        <td>{{ record.date }}</td>
        <td>{{ record.doctor }}</td>
        <td>{{ record.diagnosis }}</td>
        <td>{{ record.prescription }}</td>
        <td>
          <button @click="showDetails(record)">详情</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: ['records'],
  data() {
    return {
      filteredRecords: this.records // 初始展示所有记录
    }
  },
  methods: {
    showDetails(record) {
      // 显示详情弹窗
      this.$emit('show-details', record)
    }
  },
  watch: {
    records(newVal) {
      // 数据数组更新时同时更新过滤后的数据
      this.filteredRecords = newVal
    }
  }
}
</script>


<!-- Details.vue 详情组件 -->
<template>
  <div class="details">
    <h2>就诊日期：{{ record.date }}</h2>
    <p>医生姓名：{{ record.doctor }}</p>
    <p>诊断结果：{{ record.diagnosis }}</p>
    <p>处方信息：{{ record.prescription }}</p>
    <button @click="$emit('close')">关闭</button>
  </div>
</template>

<script>
export default {
  props: ['record']
}
</script>


<!-- Popup.vue 弹窗组件 -->
<template>
  <div class="popup">
    <div class="overlay"></div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 在组件挂载后，监听 ESC 键按下事件
    // 按下 ESC 键时关闭弹窗
    window.addEventListener('keydown', this.closeOnEsc)
  },
  beforeDestroy() {
    // 在组件销毁前，解除 ESC 键按下事件的监听
    window.removeEventListener('keydown', this.closeOnEsc)
  },
  methods: {
    closeOnEsc(event) {
      if (event.keyCode === 27) {
        this.$emit('close')
      }
    }
  }
}
</script>


<!-- App.vue 父组件 -->
<template>
  <div>
    <SearchBox @search="filterRecords"></SearchBox>
    <DataTable :records="filteredRecords" @show-details="showDetails"></DataTable>
    <Popup v-if="showPopup" @close="closePopup">
      <Details :record="selectedRecord"></Details>
    </Popup>
  </div>
</template>

<script>
import SearchBox from './SearchBox.vue'
import DataTable from './DataTable.vue'
import Popup from './Popup.vue'
import Details from './Details.vue'

export default {
  components: { SearchBox, DataTable, Popup, Details },
  data() {
    return {
      records: [
        { id: 1, date: '2021-01-01', doctor: '张医生', diagnosis: '感冒', prescription: '感冒药' },
        { id: 2, date: '2021-02-01', doctor: '李医生', diagnosis: '发烧', prescription: '退烧药' },
        { id: 3, date: '2021-03-01', doctor: '王医生', diagnosis: '胃炎', prescription: '胃药' }
      ],
      filteredRecords: [], // 搜索后的数据
      selectedRecord: null, // 当前选中的记录
      showPopup: false // 是否显示弹窗
    }
  },
  methods: {
    filterRecords(keyword) {
      // 根据关键字过滤数据
      this.filteredRecords = this.records.filter(record => {
        return record.doctor.includes(keyword) ||
               record.diagnosis.includes(keyword) ||
               record.prescription.includes(keyword)
      })
    },
    showDetails(record) {
      // 显示详情弹窗
      this.selectedRecord = record
      this.showPopup = true
    },
    closePopup() {
      // 关闭弹窗
      this.showPopup = false
    }
  }
}
</script>

这样就实现了一个简单的就诊记录展示系统，包含搜索、表格、详情、弹窗等多个组件。