根据vue设计一个页面，这个页面是用来制定体检套餐的，首先 通过ajax接收后端返回的科室列表，根据科室选择科室下的体检项目，以复选框形式展示,选择好的体检项按行放入页面中下部一个空白框内，空白框内的行可以选择删除，行末尾可以输入体检项目折扣

好的，让我们开始设计这个页面。

首先，我们需要用 Vue 来构建这个页面。在 HTML 中，我们可以定义一个容器来渲染 Vue 组件，比如：

<div id="app">
  <!-- Vue 组件将会渲染到这里 -->
</div>

然后，我们需要在 JavaScript 中定义一个 Vue 组件，来描述这个页面的行为和样式。我们可以使用 Vue 的组件选项来定义这个组件，比如：

Vue.component('package-builder', {
  // 这里写组件的代码
})

接下来，我们需要在组件中添加一些数据和方法来处理页面的逻辑。首先，我们需要定义一个 `departments` 数组来存储科室列表，以及一个 `selectedItems` 数组来存储用户选择的体检项目。我们还需要定义两个方法，一个用来从后端获取科室列表，另一个用来添加一个选中的体检项目到 `selectedItems` 数组中，比如：

Vue.component('package-builder', {
  data() {
    return {
      departments: [],
      selectedItems: []
    }
  },
  methods: {
    fetchDepartments() {
      // 从后端获取科室列表，并将结果存储到 this.departments 中
    },
    addItem(item) {
      // 将选中的体检项目添加到 this.selectedItems 中
    }
  }
})

现在，我们可以在组件的 `mounted` 生命周期钩子中调用 `fetchDepartments` 方法来获取科室列表，并将结果存储到 `departments` 数组中，比如：

Vue.component('package-builder', {
  data() {
    return {
      departments: [],
      selectedItems: []
    }
  },
  methods: {
    fetchDepartments() {
      // 从后端获取科室列表，并将结果存储到 this.departments 中
    },
    addItem(item) {
      // 将选中的体检项目添加到 this.selectedItems 中
    }
  },
  mounted() {
    this.fetchDepartments()
  }
})

接下来，我们需要在组件的模板中添加一些 HTML 元素来展示科室列表和体检项目。我们可以使用 Vue 的指令来动态渲染页面，比如：

<div id="app">
  <div>
    <h2>选择科室</h2>
    <ul>
      <li v-for="department in departments" :key="department.id">
        <label>
          <input type="radio" name="department" :value="department.id">
          {{ department.name }}
        </label>
      </li>
    </ul>
  </div>
  <div>
    <h2>选择体检项目</h2>
    <ul>
      <li v-for="item in items" :key="item.id">
        <label>
          <input type="checkbox" :value="item" @change="addItem(item)">
          {{ item.name }}
        </label>
      </li>
    </ul>
  </div>
  <div>
    <h2>已选择的体检项目</h2>
    <table>
      <thead>
        <tr>
          <th>名称</th>
          <th>价格</th>
          <th>折扣</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in selectedItems" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td><input type="text" v-model="item.discount"></td>
          <td><button @click="removeItem(item)">删除</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

在上面的代码中，我们使用了 `v-for` 指令来遍历科室列表和体检项目，使用 `v-model` 指令来双向绑定输入框的值，以及使用 `@change` 和 `@click` 指令来监听用户的输入和点击事件，并调用相应的方法来更新数据。

最后，我们需要在 JavaScript 中实现 `removeItem` 方法，来删除已选择的体检项目。我们可以使用 `splice` 方法来从数组中删除一个元素，比如：

Vue.component('package-builder', {
  data() {
    return {
      departments: [],
      selectedItems: []
    }
  },
  methods: {
    fetchDepartments() {
      // 从后端获取科室列表，并将结果存储到 this.departments 中
    },
    addItem(item) {
      // 将选中的体检项目添加到 this.selectedItems 中
    },
    removeItem(item) {
      // 从 this.selectedItems 中删除指定的体检项目
      const index = this.selectedItems.indexOf(item)
      if (index !== -1) {
        this.selectedItems.splice(index, 1)
      }
    }
  },
  mounted() {
    this.fetchDepartments()
  }
})

好了，现在我们已经完成了这个页面的设计和开发。完整的代码如下：