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.添加页面标签
`
5.流程设置组件
`
A.添加引用
import FlowSet from 'db_approval_flow/FlowSet'
B.注册组件
components: { FlowSet },
C.添加页面标签
`
6.我的审批组件
`
A.添加引用
import FlowList from 'db_approval_flow/FlowList'
B.注册组件
components: { FlowList },
C.添加页面标签
hasAll:是否可查看所有审批数据
`
7.列表状态展示
`
A.添加引用
import applyEnums from 'db_approval_flow/Enums'//状态枚举
B.页面标签slot
{{ getAppStatusInfo(row.status).Text }}
C.序列化状态方法
//获得审批状态
getAppStatusInfo(val) {
return applyEnums.getApprovalStatus(val)
},
`
8.发起审批组件
`
A.添加引用
import FlowEditDrawer from 'db_approval_flow/FlowEdit'//发起审批
B.注册组件
components: { FlowEditDrawer },
C.添加页面标签
ref="flowEditDrawer"
:show="flowEditDrawer.show"
:width="flowEditDrawer.width"
:title="flowEditDrawer.title"
:type="flowEditDrawer.type"
:VFormObj="flowEditDrawer.VFormObj"
:father="this"
@closeDrawer="closeDrawer('flowEditDrawer')"
>
发起审批
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 审批流对业务操作的回调事件==============================
///
/// 审批流对业务操作的回调事件
///
public async Task 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.添加页面标签
ref="flowViewDrawer"
:show="flowViewDrawer.show"
:width="flowViewDrawer.width"
:title="flowViewDrawer.title"
:type="flowViewDrawer.type"
:VFormObj="flowViewDrawer.VFormObj"
:father="this"
@closeDrawer="closeDrawer('flowViewDrawer')"
>
查看审批
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
},
``