一个二级审批流程的具体实现(4)

审批/备案

首先看审批流程。如果用户不是 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 文件，内容如下:

<template><div><!-- <router-view/> --><Drawer :closable="true" width="90" v-model="isShow"><br/><br/><Row style="margin-bottom:1%;border-top:1px solid #ccc;padding-top:2%"><Col span="12" style="font-size:16px">请假事由</Col><Col span="12"><i-input v-model="task.reason" placeholder="请假的原因" style="width:200px;outline:none"></i-input></Col></Row><Row style="margin-bottom:1%"><Col span="12" style="font-size:16px">开始日期</Col><Col span="12"><DatePickertype="date"v-model="task.date"placeholder="从哪天开始请假"format="yyyy-MM-dd"style="width: 200px"></DatePicker></Col></Row><Row style="margin-bottom:1%;"><Col span="12" style="font-size:16px">请假天数</Col><Col span="12"><i-input v-model="task.days" placeholder="0" style="width:200px;outline:none"></i-input></Col></Row><Row style="margin-bottom:1%;border-top:1px solid #ccc;padding-top:2%"><Col span="24"><i-button type="default" @click="submitApplication()">提交</i-button></Col></Row></Drawer></div>
</template>
<script>
import { _submitApplication } from "@/api/data";
export default {name: "edit",data() {return {isShow: false,task: {}};},isLogin() {let username = this.$store.state.username;if (username == null || username === "") {this.$Message.error({content: "无效的用户名，请重新登录",duration: 4,closable: true});return false;} else {return true;}},methods: {isLogin() {let username = this.$store.state.username;if (username == null || username === "") {this.$Message.error({content: "无效的用户名，请重新登录",duration: 4,closable: true});return false;} else {return true;}},show(task) {this.task = task;this.isShow = true;},//提交submitApplication() {let username = this.$store.state.username;if (this.isLogin() == false) {// 如果未登录this.$Message.error("请先登录");return;}if (username == this.task.assignee && username == this.task.applicant) {_submitApplication(this.task).then(res => {if (res.data.success == true) {this.$Message.success("请假提交成功");// 子组件向父组件发送 onSubmit 事件this.$emit('onSubmit',this.task);this.isShow = false;} else {this.$Message.error("出错了");}});} else {this.$Message.error("没有权限操作");this.isShow = false;}}}
};
</script>

首先是 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 标签：

<edit ref="drawer" @onSubmit="todoList()"/>

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);
},