审批/备案

首先看审批流程。如果用户不是 hr，显示一个审批对话框，如果用户是 hr，则显示备案对话框。其实，无论审批还是备案，都不过是调用服务器的相应接口而已。无非是 hr 没有驳回操作而已。所以我们都用一个 approve 方法来处理：

approve(task, username, agree) {let params = {};params.username = username;params.taskId = task.taskId;params.agree = agree;if (username == task.leader) {_leaderApprove(params).then(res => {if (res.data.success == true) {this.$Message.success("审批成功");this.todoList();}else{this.$Message.error("出错了");}});} else if (username == task.director) {_directorApprove(params).then(res => {if (res.data.success == true) {this.$Message.success("审批成功");this.todoList();}else{this.$Message.error("出错了");}});} else if (username == task.hr) {_hrRecord(params).then(res => {if (res.data.success == true) {this.$Message.success("备案成功");this.todoList();}else{this.$Message.error("出错了");}});}},

在这里，对用户身份进行判断，从而调用不同的后台接口来进行审批、驳回、备案处理。

重新提交

重新提交时，有可能用户会对原来的表单进行修改，比如修改请假天数。因此，如果用户要重新提交，需要显示一张表单，允许用户编辑请假信息。这里我们使用了 Drawer 组件。

首先定义自己的 Drawer，自定义 Drawer 和一般的组件没有太大区别。新建一个 Edit.vue 文件，内容如下:

首先是 isShow 这个变量，它绑定到了 Drawer 的 v-modal 属性，可以用它来控制 Drawer 的显示与隐藏。然后是 show 方法，这个方法用于给父组件（即主页面）调用并显示 Drawer，同时将主页面中的参数（比如 Task）传递给 Drawer。当用户点击提交按钮，调用 submitApplication 方法，在这个方法请求服务器接口。注意，当请求成功后，会调用 this.$emit 发送一个 onSubmit 事件。我们可以在父组件 Main.vue 中监听这个事件。通过这种方式，子组件就能和父组件通讯。

接下来在主页面 Main.vue 中引入这个 Drawer 组件：

import edit from "@/views/Edit.vue";export default {components:{edit},

同时在模板中使用 edit 标签：

ref 属性定义 drawer 组件的引用名。方便我们通过 this.$refs 来引用这个组件。
这里的 @onSubmit 是 Drawer 中自定义的事件。这表示当 Drawer 发生 onSubmit 事件时，父组件会调用 todoList 方法。也就是说，如果用户重新提交申请成功，待办列表会被刷新。

当用户点击待办列表中的“办理”按钮时，如果用户身份是 hr，则会调用 showEdit 方法。在 showEdit 方法中，调用 drawer 中定义的 show 方法，从而显示出 Drawer 组件并将待办任务作为参数传递给 Drawer：

showEdit(task) {console.log('1235:',task)this.$refs.drawer.show(task);
},