```vue
<el-dialog title="添加订单" :visible.sync="addDialogVisible">
<el-form :model="addForm" ref="addForm" rules="addFormRules">
<el-form-item label="商品名称" prop="name">
<el-input v-model="addForm.name"></el-input>
</el-form-item>
<el-form-item label="价格" prop="price">
<el-input v-model="addForm.price"></el-input>
</el-form-item>
<el-form-item label="数量" prop="quantity">
<el-input v-model="addForm.quantity"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false">取消</el-button>
<el-button type="primary" @click="addOrder">添加</el-button>
</div>
</el-dialog>
<el-dialog title="编辑订单" :visible.sync="editDialogVisible">
<el-form :model="editForm" ref="editForm" rules="editFormRules">
<el-form-item label="商品名称" prop="name">
<el-input v-model="editForm.name"></el-input>
</el-form-item>
<el-form-item label="价格" prop="price">
<el-input v-model="editForm.price"></el-input>
</el-form-item>
<el-form-item label="数量" prop="quantity">
<el-input v-model="editForm.quantity"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="editDialogVisible = false">取消</el-button>
<el-button type="primary" @click="editOrder">保存</el-button>
</div>
</el-dialog>
```
在上面的代码中，我们使用了Element UI组件库来构建一个订单管理页面。页面包括一个显示订单列表的表格，以及添加订单和编辑订单的弹窗。我们通过data属性定义了订单数据，通过methods属性定义了显示、添加、编辑和删除订单等操作的方法。在添加和编辑订单的操作中，我们使用了Element UI的表单组件来收集用户输入的信息，并对输入进行验证。当用户成功添加或编辑订单时，会弹出消息提示框显示操作成功的信息。整个页面实现了基本的curd功能。
