帮我写一个基于vue3的医疗器械管理的vue页面。关键字：医疗器械，分类，添加，删除，修改。

好的，我可以帮你写一个简单的医疗器械管理页面，使用 Vue3 和 Element Plus 组件库。以下是示例代码：

<template>
  <div class="container">
    <h2>医疗器械管理</h2>
    <el-row>
      <el-col :span="8">
        <h3>器械分类</h3>
        <el-tree
          :data="treeData"
          :props="treeProps"
          default-expand-all
          @node-click="handleNodeClick"
        ></el-tree>
      </el-col>
      <el-col :span="16">
        <h3>器械列表</h3>
        <el-row>
          <el-col :span="6">
            <el-input
              placeholder="器械名称"
              v-model="searchText"
              @keyup.enter.native="handleSearch"
            ></el-input>
          </el-col>
          <el-col :span="6">
            <el-select v-model="selectedCategory" placeholder="分类">
              <el-option
                v-for="category in categories"
                :key="category.id"
                :label="category.name"
                :value="category.id"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="handleAdd">添加器械</el-button>
          </el-col>
        </el-row>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="器械名称" prop="name"></el-table-column>
          <el-table-column label="分类" prop="category"></el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button type="text" size="small" @click="handleEdit(row)">编辑</el-button>
              <el-button type="text" size="small" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="dialogVisible" width="30%">
      <h3>{{ dialogTitle }}</h3>
      <el-form :model="form" label-position="top">
        <el-form-item label="器械名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="所属分类">
          <el-select v-model="form.category" placeholder="请选择">
            <el-option
              v-for="category in categories"
              :key="category.id"
              :label="category.name"
              :value="category.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref } from 'vue'
import { ElMessage, ElMessageBox, ElTree, ElTable, ElTableColumn, ElButton, ElDialog, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElRow, ElCol } from 'element-plus'

export default {
  components: {
    ElMessage,
    ElMessageBox,
    ElTree,
    ElTable,
    ElTableColumn,
    ElButton,
    ElDialog,
    ElForm,
    ElFormItem,
    ElInput,
    ElSelect,
    ElOption,
    ElRow,
    ElCol,
  },
  setup() {
    // 模拟数据
    const categories = [
      { id: 1, name: '心脏病' },
      { id: 2, name: '呼吸系统疾病' },
      { id: 3, name: '消化系统疾病' },
    ]
    const tableData = [
      { id: 1, name: '血压计', category: '心脏病' },
      { id: 2, name: '呼吸机', category: '呼吸系统疾病' },
      { id: 3, name: '胃镜', category: '消化系统疾病' },
      { id: 4, name: '心电图机', category: '心脏病' },
      { id: 5, name: '氧气机', category: '呼吸系统疾病' },
      { id: 6, name: '肠镜', category: '消化系统疾病' },
    ]
    const treeData = [
      {
        id: 1,
        label: '心脏病',
        children: [{ id: 4, label: '心电图机' }, { id: 1, label: '血压计' }],
      },
      {
        id: 2,
        label: '呼吸系统疾病',
        children: [{ id: 2, label: '呼吸机' }, { id: 5, label: '氧气机' }],
      },
      {
        id: 3,
        label: '消化系统疾病',
        children: [{ id: 3, label: '胃镜' }, { id: 6, label: '肠镜' }],
      },
    ]

    // 状态
    const selectedCategory = ref('')
    const searchText = ref('')
    const dialogVisible = ref(false)
    const dialogTitle = ref('')
    const form = ref({ name: '', category: '' })

    // 计算属性
    const treeProps = {
      label: 'label',
      children: 'children',
    }
    const categoriesOptions = categories.map((category) => ({
      label: category.name,
      value: category.id,
    }))

    // 方法
    const handleNodeClick = (node) => {
      selectedCategory.value = node.label
      handleSearch()
    }
    const handleSearch = () => {
      // 根据搜索条件和分类过滤数据
    }
    const handleAdd = () => {
      dialogTitle.value = '添加器械'
      form.value = { name: '', category: '' }
      dialogVisible.value = true
    }
    const handleEdit = (row) => {
      dialogTitle.value = '编辑器械'
      form.value = { name: row.name, category: row.category }
      dialogVisible.value = true
    }
    const handleDelete = (row) => {
      ElMessageBox.confirm('确定删除该器械吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        // 发送删除请求
        // 成功后更新数据表格
        ElMessage.success('删除成功')
      })
    }
    const handleSave = () => {
      // 发送保存请求
      // 成功后更新数据表格
      ElMessage.success('保存成功')
      dialogVisible.value = false
    }

    // 暴露给模板的数据和方法
    return {
      categories,
      tableData,
      treeData,
      treeProps,
      selectedCategory,
      searchText,
      dialogVisible,
      dialogTitle,
      form,
      categoriesOptions,
      handleNodeClick,
      handleSearch,
      handleAdd,
      handleEdit,
      handleDelete,
      handleSave,
    }
  },
}
</script>

<style>
.container {
  padding: 20px;
}
</style>

这个页面包含了一个左侧的树形分类列表和右侧的器械列表。你可以根据分类和搜索框中的关键字来过滤器械列表。你可以添加、编辑和删除器械。当你点击添加或编辑按钮时，会弹出一个对话框，让你输入器械名称和所属分类。当你点击保存按钮时，会发送请求保存数据。当你点击删除按钮时，会弹出一个确认框，让你确认是否要删除该器械。