在原来的 ToC 框架项目【审批组件】(原项目名 approvaltestprocess)代码基础上,抽离出独立 NPM 包组件,
2023.08 开始重构
因此会依赖【teld/api-proxy】包的一些内置公共处理内容。组件会依赖【teld/component-proxy】使用组件代理暴露出的组件。
组件代理移动端
tm-
实际使用vant
组件
提供功能包括:
- 仿 DingDing,以竖版时间线的形式,展示审批流程信息
- 留有插槽可以插入展示如表单信息等内容(主要用于业务方表单)
- 运行时流程图展示入口
- 审批流程的处理:
- 审批同意
- 审批拒绝
- 撤销、转办、加签、评论等其它操作
所以,主要是用来处理审批使之流转用的, 其次是可以查看审批历史、审批流程进展状况等内容。
本项目为独立 NPM 包,因非 ToC 框架项目, 故无法使用框架内功能即无法提供开发页面, 可将源码 link 到 ToC 框架项目进行开发调试。
用于 TELD 内部 ToC 框架项目中
安装
npm install teld-approval-component
# 如果是商机项目那样的一套移动端风格样式,流程图查看目前是嵌入在审批组件中的,使用 teld-approval-flow-mobile
npm install teld-approval-flow-mobile
# 只要按照该包即可,审批组件内部依赖了,打包时排除了。也就是仅移动端时使用,将来也可以改成跳页面
# 如果有单独的PC端页面,就不用这个 teld-approval-flow-mobile 包的功能了
# 有单独的流程图查看页面 //domain/afd/view-instance?ProcessInstanceId=xxx&TargetSetID=xxx
- 组件准备
在 /plugins/components/mobile.js
文件中注册项目中用到的组件
确保如下注册组件:
以下注册的组件,对应的在
/assets
文件夹下的custom-mobile.less
中引入组件的样式文件,有自定义样式需求的也响应地在这里进行覆盖
import Vue from 'vue';
import { install } from '@teld/component-proxy/export/mobile.js';
import {
Tabs,
Tab,
Icon,
Popup,
Cell,
CellGroup,
Row,
Col,
PullRefresh,
Empty,
NavBar,
List,
Field,
Loading,
Collapse,
CollapseItem,
//
Button,
Overlay,
Uploader,
Checkbox,
Dialog,
Image,
ImagePreview,
ActionSheet,
Swipe,
SwipeItem,
Popover,
Switch,
} from '@teld/component-proxy/mobile.js';
install([
Tabs,
Tab,
Icon,
Popup,
Cell,
CellGroup,
Row,
Col,
PullRefresh,
Empty,
NavBar,
List,
Field,
Loading,
Collapse,
CollapseItem,
//
Button,
Overlay,
Uploader,
Checkbox,
Dialog,
Image,
ImagePreview,
ActionSheet,
Swipe,
SwipeItem,
Popover,
Switch,
]);
贴一下本人 ToC 项目中用到的样式覆盖(
/assets/custom-mobile.less
)
/**NavBar顶部导航组件变量覆盖*/
@nav-bar-background-color: var(--theme-color);
@nav-bar-icon-color: @white;
@nav-bar-text-color: @white;
@nav-bar-title-text-color: @white;
/**Tabs组件变量覆盖*/
@tab-active-text-color: var(--theme-color);
@tabs-bottom-bar-color: var(--theme-color);
@tab-text-color: var(--color-gray);
@tab-font-size: 14px;
.van-tab--active {
font-weight: 600;
}
/**Checkbox组件变量覆盖*/
@checkbox-checked-icon-color: var(--theme-color);
/**适配PC端时主题色的 hover 效果*/
.van-button {
&:not(.van-button--plain):hover {
background-color: var(--theme-color-hover) !important;
}
}
- 引入组件
新建 /plugins/approval-component.js
本 NPM 包提供的组件详情见下文 API 部分
// 在ToC框架的项目中,需要全局式引入
import Vue from 'vue';
import TAC from 'teld-approval-component';
Vue.use(TAC);
/**
* 这里可传入 options,
* Vue.use(TAC, options)
*
* options 参考:
* {
* maxSelectableUserCount: 50, // 选人框复选模式下最大可选人数
* useFasService: false, // 目前只有商机项目需设,其它无需设置,默认 true
* pcPolyfill: false, // 默认只用于移动端,若用于 PC 端则设为 true
* enableAutoNext: false, // 审批同意或拒绝之后是否自动进入下一条审批
* // 以下是给流程图用的,通常使用默认值即可
* flowChart: {
* disabled: false,
* scaleButtons: {
visible: true,
position: 'bottom right',
spaceX: '10px',
spaceY: '20px',
},
designer: {
useButtonToggleAll: true, // 【全展开|全收起】
legend: {
open: true,
},
},
* },
* }
*/
// ----全局引入忽略以下----
// // 组件内局部引入
// import { ApprovalComponent } 'teld-approval-component'
// import 'teld-approval-flow/lib/approval-component.css'
// // 页面组件中注册
// export default {
// components: { ApprovalComponent },
// }
- 引入完成,使用组件
在 nuxt.config.js
中引入 /plugins/approval-component.js
{
// ...
plugins: [
{
src: '@@/plugins/approval-component.js',
ssr: false,
},
];
// ...
}
- 展示运行时流程图需要配 store
新建 /store/flow.js
文件
也就是这里,以移动端样式展示时组件内部依赖了
teld-approval-flow-mobile
(PC 端跳到流程图查看页面展示)
const { flowStore } = require('teld-approval-component').default || require('teld-approval-component');
export default flowStore;
// 或
import * as TAF from 'teld-approval-flow';
export default TAF.flowStore;
本 NPM 包提供的组件一览
Vue 组件 | 说明 |
---|---|
ApprovalComponent | 审批组件完整使用,包含所有内部组件及功能,其它均为内部子组件 通常情况下只使用这一个就可以了 |
ApprovalHeadInfo | 顶部信息 |
ApprovalDetail | 详情信息,内部包含:TimelineDetail,以及底部各种操作按钮 |
TimelineDetail | 详情信息里的时间线部分 |
CommentPopup | 评论框弹窗组件 |
CommentReplyPopup | 针对评论作回复的弹窗组件 |
UserSelectorPopup | 选人框弹窗组件 |
AddApproversPopup | 加签弹窗组件 |
RemindApproversPopup | 催办弹窗组件 |
参数 | 说明 | 类型 | 是否必须 | 默认值 | |
---|---|---|---|---|---|
showHeadInfo | 是否展示顶部流程标题信息 | Boolean | 否 | true | |
showProcess | 是否展示流程部分 | Boolean | 否 | true | 旧有参数 |
showBack | 是否展示返回箭头 | Boolean | 否 | false | |
isFasApproval | 是否低代码审批(用于区分是否来字审批详情项目) | Boolean | 否 | false | |
是否为打开新窗口的关闭 | Boolean | false | 已删除该旧有参数,用不到 | ||
数据中心 | String | true | 已删除该旧有参数,重构后已废弃 | ||
processInstanceId | 流程实例 ID | String | 是:当没有传入 processDefinitionKey 和 businessKey 否:当传入了 processDefinitionKey 和 businessKey
|
旧有参数 ProcessInstanceId 不规范,重命名 |
|
processDefinitionKey | 流程定义 | String | 是:当没有传入 processInstanceId 否:当传入了 processInstanceId
|
旧有参数 ProcessDefinitionKey 不规范,重命名 |
|
businessKey | 业务单据 | String | 是:当没有传入 processInstanceId 否:当传入了 processInstanceId
|
旧有参数 BusinessKey 不规范,重命名 |
|
parameters | 业务单据变量 | String | 否 | 旧有参数 Parameters 不规范,重命名 |
|
beforeApprove | 用户传入的点击审批同意的处理函数 | String | 否 | 旧有参数 dispath 不规范且拼写错误,重命名 |
|
beforeRefuse | 用户传入的点击审批拒绝的处理函数 | String | 否 | 旧有参数 refuseCallBack 不规范,重命名 |
|
customButtons | 自定义按钮(因当前 ToC 框架运行时不支持具名插槽,暂时使用传参方式变通地实现) | Array | 否 | 数据结构示例:[{displayName: '', onClick: Function}]
|
事件名称 | 说明 | 回调参数 |
---|---|---|
load | 组件完成数据加载时 | - |
refresh | 评论、回复、同意、拒绝、撤销、催办、加签等任何审批操作之后触发 | {operation: APPROVAL_OPERATIONS, autoNext: {ApprovalUrl:""}, processInstanceId: ""} |
APPROVAL_OPERATIONS
常量枚举定义
操作类型 | 说明 |
---|---|
APPROVAL_OPERATIONS.Comment | 评论 |
APPROVAL_OPERATIONS.Approve | 同意 |
APPROVAL_OPERATIONS.Refuse | 拒绝 |
APPROVAL_OPERATIONS.Transfer | 转交 |
APPROVAL_OPERATIONS.Remind | 催办 |
APPROVAL_OPERATIONS.AddSign | 加签 |
APPROVAL_OPERATIONS.Reply | 回复评论 |
APPROVAL_OPERATIONS.Revoke | 撤销审批申请 |
APPROVAL_OPERATIONS.RevokeComment | 撤回评论 |
APPROVAL_OPERATIONS.RevokeReply | 撤回回复 |
name | 说明 |
---|---|
- | 默认插槽,主要用于呈现关联的表单页面 |
对应抽离为 NPM 包之前的 processPart.vue
文件
参数 | 说明 | 类型 | 是否必须 | 默认值 | |
---|---|---|---|---|---|
showProcess | 是否展示流程部分 | Boolean | 否 | true | 旧有参数 |
是否为打开新窗口的关闭 | Boolean | false | 已删除该旧有参数,用不到 | ||
数据中心 | String | true | 已删除该旧有参数,重构后已废弃 | ||
processInstanceId | 流程实例 ID | String | 是:当没有传入 processDefinitionKey 和 businessKey 否:当传入了 processDefinitionKey 和 businessKey
|
旧有参数 ProcessInstanceId 不规范,重命名 |
|
processDefinitionKey | 流程定义 | String | 是:当没有传入 processInstanceId 否:当传入了 processInstanceId
|
旧有参数 ProcessDefinitionKey 不规范,重命名 |
|
businessKey | 业务单据 | String | 是:当没有传入 processInstanceId 否:当传入了 processInstanceId
|
旧有参数 BusinessKey 不规范,重命名 |
|
parameters | 业务单据变量 | String | 否 | 旧有参数 Parameters 不规范,重命名 |
|
processInstanceInfo | 流程实例数据 | String | 否 | 当传入流程实例数据后,就不需要本组件内再去调用接口获取了;一般在整体使用审批组件时由父级组件传入,如果直接使用本组件的情况,则通过 processInstanceId 或者 processDefinitionKey + businessKey 参数调接口获取 |
|
beforeApprove | 用户传入的点击审批同意的处理函数 | String | 否 | 旧有参数 dispath 不规范且拼写错误,重命名 |
|
beforeRefuse | 用户传入的点击审批拒绝的处理函数 | String | 否 | 旧有参数 refuseCallBack 不规范,重命名 |
|
customButtons | 自定义按钮(因当前 ToC 框架运行时不支持具名插槽,暂时使用传参方式变通地实现) | Array | 否 | 数据结构示例:[{displayName: '', onClick: Function}]
|
事件名称 | 说明 | 回调参数 |
---|---|---|
refresh | 评论、回复、同意、拒绝、撤销、催办、加签等任何审批操作之后触发 | operation: APPROVAL_OPERATIONS 审批组件中的操作类型 |
通过 npm link teld-approval-component
提供给消费者项目使用
pnpm install
pnpm build:dev
pnpm build
pnpm build
pnpm publish
TODO: private NPM