db_approval_flow

基于vue3+iview的审批流组件,仅适用于本公司内部框架。

1.插件安装

npm install db_approval_flow

2.插件卸载

npm uninstall db_approval_flow

3.配制流程服务api

VUE_APP_APPROVALURL='http://192.168.1.118:7035'

4.流程类型组件

A.添加引用
import FlowType from 'db_approval_flow/FlowType'
B.注册组件
components: { FlowType },
C.添加页面标签
<FlowType/>

5.流程设置组件

A.添加引用
import FlowSet from 'db_approval_flow/FlowSet'
B.注册组件
components: { FlowSet },
C.添加页面标签
<FlowSet/>

6.我的审批组件

A.添加引用
import FlowList from 'db_approval_flow/FlowList'
B.注册组件
components: { FlowList },
C.添加页面标签
<FlowList :hasAll="true"/>
hasAll:是否可查看所有审批数据

7.列表状态展示

A.添加引用
import applyEnums from 'db_approval_flow/Enums'//状态枚举
B.页面标签slot
<!-- 审批状态 -->
<template #status="{ row }">
    <Tag :color="getAppStatusInfo(row.status).Color">
    {{ getAppStatusInfo(row.status).Text }}
    </Tag>
</template>
C.序列化状态方法
//获得审批状态
getAppStatusInfo(val) {
    return applyEnums.getApprovalStatus(val)
},

8.发起审批组件

A.添加引用 
import FlowEditDrawer from 'db_approval_flow/FlowEdit'//发起审批
B.注册组件
components: { FlowEditDrawer },
C.添加页面标签 
<!-- 发起审批表单组件 -->
<FlowEditDrawer
    ref="flowEditDrawer"
    :show="flowEditDrawer.show"
    :width="flowEditDrawer.width"
    :title="flowEditDrawer.title"
    :type="flowEditDrawer.type"
    :VFormObj="flowEditDrawer.VFormObj"
    :father="this"
    @closeDrawer="closeDrawer('flowEditDrawer')"
></FlowEditDrawer>

<!-- 发起审批按钮 -->
<Divider type="vertical" v-if="getAppStatusInfo(row.status).Key=='draft'"/>
<a type="text" v-if="getAppStatusInfo(row.status).Key=='draft'" @click="launchFlow(row)"><Icon type="ios-appstore" />发起审批</a>

flowEditDrawer: {
    //发起审批参数
    show: false,
    title: '',
    width: '',
    VFormObj: null,
    type: '',
    father: null,
},
D.发起审批事件
//发起审批
launchFlow(row) {
    this.flowEditDrawer.title = `对【${row.name}】发起审批`
    this.flowEditDrawer.width = '50%'
    this.flowEditDrawer.type = 'edit'
    let applyTemplate={
        code:'HTGL',//审批模板编码(必填)
        systemId:row.id,//审批业务的主键(必填)
        systemApplyRoute:'/MyFlow',//审批操作页面跳转路由(为空时消息页面没有跳转功能)
        systemModel:{
            title:`${row.name}`,//审批表单的标题(必填)
            name:row.name,
            createBy:row.createBy,
            createTime:this.CommonFunction.DateFormat(row.createTime, 0),
        }
    }
    this.$refs.flowEditDrawer.onInit(applyTemplate)
    this.flowEditDrawer.show = true
},
E.后端回调方法
第三方业务回调域名：如http://192.168.1.116:8192/api/ContractManage/ApprovalRebackOperate
#region 审批流对业务操作的回调事件==============================
/// <summary>
/// 审批流对业务操作的回调事件
/// </summary>
public async Task<Common.Response> ApprovalRebackOperate(Db.PlatFormService.Models.Apply.ApprovalRebackDto dto)
{
    var res = new Common.Response();
    if (dto == null)
    {
        res.Error("请求参数为空");
        return res;
    }
    var model = await _rep.FirstOrDefaultAsync(z => z.Id == dto.SystemId);
    if (model == null)
    {
        res.Error("systemId不存在");
        return res;
    }
    model.Status = (int)dto.Status;
    if (!await _rep.UpdateAsync(model))
    {
        res.Error("状态更新失败");
        return res;
    }
    res.Ok();
    return res;
}
#endregion

9.审批记录查看组件

A.添加引用
import FlowViewDrawer from 'db_approval_flow/FlowView'//查看审批状态
B.注册组件
components: { FlowViewDrawer },

C.添加页面标签
<!-- 查看审批表单组件 -->
<FlowViewDrawer
    ref="flowViewDrawer"
    :show="flowViewDrawer.show"
    :width="flowViewDrawer.width"
    :title="flowViewDrawer.title"
    :type="flowViewDrawer.type"
    :VFormObj="flowViewDrawer.VFormObj"
    :father="this"
    @closeDrawer="closeDrawer('flowViewDrawer')"
></FlowViewDrawer>

<!-- 查看审批按钮 -->
<Divider type="vertical" v-if="getAppStatusInfo(row.status).Key!='draft'"/>
<a type="text" v-if="getAppStatusInfo(row.status).Key!='draft'" @click="showFlow(row)"><Icon type="md-eye" />查看审批</a>

flowViewDrawer:{
    //查看审批参数
    show: false,
    title: '',
    width: '',
    VFormObj: null,
    type: '',
    father: null,
},
D.查看审批事件
//查看审批
showFlow(row){
    this.flowViewDrawer.title = `查看【${row.name}】审批状态`
    this.flowViewDrawer.width = '50%'
    this.flowViewDrawer.type = 'read'
    this.$refs.flowViewDrawer.onInit(row.id)
    this.flowViewDrawer.show = true
},