vue与C#实现自定义表单审批流程构建-前端

vue与C#实现自定义表单审批流程构建

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

节点构成主要包括发起人节点，审核节点，分支节点，抄送节点四类。

审核方式又包含依次审批  会签和或签，

节点分支可以对发起人流程以及发起人表单数据进行条件判断。

看清来简单的几个功能 ，事实上需要实现的内容是比较多的，后续有时间将慢慢讲解。

以下内容凑字数。

<template>

  <el-dialog width="500px" :append-to-body="true" title="审批处理" :visible.sync="dialogVisible">

    <div>

        <el-form :model="data" ref="ruleForm" label-width="100px" class="demo-ruleForm">

  <el-form-item label="审批类型" prop="action">

   <el-select v-model="data.action" style=" width:80%"  @change="changeType" placeholder="请选择审批类型">

        <el-option

          v-for="item in options"

          :key="item.value"

          :label="item.label"

          :value="item.value"

        ></el-option>

      </el-select>

  </el-form-item>

    <el-form-item label="审批意见" prop="approvalComment">

 <el-input type="textarea" :rows="5" placeholder="请输入审批意见" v-model.trim="data.approvalComment"></el-input>

  </el-form-item>

    <el-form-item label="加签" v-show="isCanAddSign" prop="isAddSignature">

 <el-checkbox v-model="data.isAddSignature">需要加签审核人</el-checkbox>

  </el-form-item>

      <el-form-item v-show="isCanAddSign&&data.isAddSignature" label="加签审批人" prop="personId">

    <el-select v-model="data.personId" filterable  style=" width:80%" @change="selectApprover" placeholder="请选择加签审批人">

        <el-option

            v-for="item in personOptions"

            :key="item.id"

            :label="item.realName"

            :value="item.id"

          >

            <span style="float: left">{{ item.realName }}</span>

            <span style="float: right; color: #409EFF; font-size: 13px">{{ item.number}}</span>

          </el-option>

      </el-select>

  </el-form-item>

</el-form>

    </div>

    <div slot="footer" class="dialog-footer">

      <el-button @click="dialogVisible = false">取 消</el-button>

      <el-button type="primary" :loading="submitLoading" @click="ok">确 定</el-button>

    </div>

  </el-dialog>

</template>

<script>

// 这里可以导入其他文件（比如：组件，工具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缓存功能，这个函数会触发

};

</script>

<style>

.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;

}

</style>