vue与C#实现自定义表单审批流程构建
做信息化项目相信绝大部分人都接触过单据审批流程的需求,例如发起一个采购申请,需要几个节点审核,部门负责人审核,采购审核,财务审核等等。审批人也需要可自定义,以及可能会出现审批条件分支的情况,这时我们的审批流程就需要完全可定义才能满足。像市面上的钉钉,企业威信等都有审批流,如果接入到第三方也是可以的,但是有的公司没用这些产品 或者企业WX内部本身有信息化团队有很多定制化的OA流程等,就需要有自己的审批流了。本文展示的审批流UI借鉴了钉钉的设计 比较简洁易用,框架是vue.js 组件是elementui,如图。

节点构成主要包括发起人节点,审核节点,分支节点,抄送节点四类。
审核方式又包含依次审批 会签和或签,
节点分支可以对发起人流程以及发起人表单数据进行条件判断。
看清来简单的几个功能 ,事实上需要实现的内容是比较多的,后续有时间将慢慢讲解。
以下内容凑字数。
v-for="item in options" :key="item.value" :label="item.label" :value="item.value" >
v-for="item in personOptions" :key="item.id" :label="item.realName" :value="item.id" > {{ item.realName }} {{ item.number}}
// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
// 例如:import 《组件名称》 from '《组件路径》';
import MessageTool from "@/utils/MessageTool";
import workProcessInstance from "@/api/approveFlow/workProcessInstance";
import employee from "@/api/auth/employee";
const employeeClass = new employee();
const MessageToolClass = new MessageTool();
const workProcessInstanceClass = new workProcessInstance();
export default {
// import引入的组件需要注入到对象中才能使用
name: "approveAction",
components: {},
data() {
return {
dialogVisible: false,
submitLoading:false,
isCanAddSign:true,
data: {
instanceId: 0,
currentNodeId: 0,
isAddSignature:false,
personId:undefined,
taskId: 0,
action: 1,
approvalComment: "同意审批"
},
options: [{ value: 1, label: "同意" }, { value: 2, label: "拒绝" }],
backFunc:undefined,
personOptions:[],
};
},
// 监听属性 类似于data概念
computed: {},
props: {},
// 监控data中的数据变化
watch: {},
// 方法集合
methods: {
//获取负责人
getMajorPersonOptions() {
employeeClass.getlist().then(res => {
this.personOptions = res;
});
},
changeType(v) {
if (v == 2) {
this.data.approvalComment = "拒绝审批";
this.isCanAddSign = false;
} else if (v == 1) {
this.data.approvalComment = "同意审批";
this.isCanAddSign= true;
}
},
open(data,backFunc){
this.dialogVisible = true;
this.data.instanceId = data.instanceId;
this.data.currentNodeId = data.currentNodeId;
this.data.taskId = data.taskId;
this.data.isAddSignature = false;
if(backFunc){
this.backFunc = backFunc;
}
},
selectApprover(v){
let person = this.personOptions.find(x=>x.id==v);
if(person){
this.data.personName = person.realName;
}
},
ok() {
if (
this.data.instanceId == 0 ||
this.data.currentNodeId == 0 ||
this.data.taskId == 0
) {
this.$message.error("找不到审核的单据!");
return;
}
if (this.data.approvalComment == "") {
this.$message.error("审核意见不能为空!");
return;
}
if (this.data.isAddSignature&&this.data.personId==undefined) {
this.$message.error("请选择加签审批人!");
return;
}
this.submitLoading =true;
workProcessInstanceClass
.handCurrentNode(this.data)
.then(res => {
if (res.isSuccess) {
MessageToolClass.NotifySuccessShow("操作成功");
this.dialogVisible = false;
if(this.backFunc){
this.backFunc();
}
}
this.submitLoading =false;
})
.catch(res => { this.submitLoading =false;});
}
},
// 生命周期 - 创建完成(可以访问当前this实例)
async created() {
this.getMajorPersonOptions();
},
// 生命周期 - 挂载完成(可以访问DOM元素)
mounted() {},
beforeCreate() {}, // 生命周期 - 创建之前
beforeMount() {}, // 生命周期 - 挂载之前
beforeUpdate() {}, // 生命周期 - 更新之前
updated() {}, // 生命周期 - 更新之后
beforeDestroy() {}, // 生命周期 - 销毁之前
destroyed() {}, // 生命周期 - 销毁完成
activated() {} // 如果页面有keep-alive缓存功能,这个函数会触发
};
.el-table .success-row {
background: #fbfbfb;
}
.el-table .disabledCheck .cell .el-checkbox__inner {
display: none !important;
}
.el-form-item {
margin-bottom: 16px;
}
.has-gutter .el-checkbox {
display: none;
}
.grid-content {
border-radius: 4px;
border: 1px solid #dedede;
height: 350px;
overflow-y: scroll;
background: #f4f6f8;
margin: 0 10px;
padding: 10px;
}
.el-dialog__body {
padding: 20px 20px;
}