Teld Approval Component 审批组件

在原来的 ToC 框架项目【审批组件】（原项目名 approvaltestprocess）代码基础上，抽离出独立 NPM 包组件，

2023.08 开始重构

因此会依赖【teld/api-proxy】包的一些内置公共处理内容。组件会依赖【teld/component-proxy】使用组件代理暴露出的组件。

组件代理移动端 tm-实际使用vant组件

提供功能包括：

• 仿 DingDing，以竖版时间线的形式，展示审批流程信息
• 留有插槽可以插入展示如表单信息等内容（主要用于业务方表单）
• 运行时流程图展示入口
• 审批流程的处理：
  • 审批同意
  • 审批拒绝
  • 撤销、转办、加签、评论等其它操作

所以，主要是用来处理审批使之流转用的， 其次是可以查看审批历史、审批流程进展状况等内容。

本项目为独立 NPM 包，因非 ToC 框架项目， 故无法使用框架内功能即无法提供开发页面， 可将源码 link 到 ToC 框架项目进行开发调试。

Usage

用于 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

0. 组件准备

在 /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;
  }
}

1. 引入组件

新建 /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 },
// }

2. 引入完成，使用组件

在 nuxt.config.js中引入 /plugins/approval-component.js

{
  // ...
  plugins: [
    {
      src: '@@/plugins/approval-component.js',
      ssr: false,
    },
  ];
  // ...
}

3. 展示运行时流程图需要配 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;

API

本 NPM 包提供的组件一览

| Vue 组件 | 说明 | | --------------------------------------- | ------------------------------------------------------------------------------------------- | | ApprovalComponent | 审批组件完整使用，包含所有内部组件及功能，其它均为内部子组件 通常情况下只使用这一个就可以了 | | ApprovalHeadInfo | 顶部信息 | | ApprovalDetail | 详情信息，内部包含：TimelineDetail，以及底部各种操作按钮 | | TimelineDetail | 详情信息里的时间线部分 | | CommentPopup | 评论框弹窗组件 | | CommentReplyPopup | 针对评论作回复的弹窗组件 | | UserSelectorPopup | 选人框弹窗组件 | | AddApproversPopup | 加签弹窗组件 | | RemindApproversPopup | 催办弹窗组件 |

ApprovalComponent

Props

| 参数 | 说明 | 类型 | 是否必须 | 默认值 | | | -------------------- | --------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------- | ------ | ------------------------------------------------------ | | showHeadInfo | 是否展示顶部流程标题信息 | Boolean | 否 | true | | | showProcess | 是否展示流程部分 | Boolean | 否 | true | 旧有参数 | | showBack | 是否展示返回箭头 | Boolean | 否 | false | | | isFasApproval | 是否低代码审批（用于区分是否来字审批详情项目） | Boolean | 否 | false | | | ~~isCloseWindow~~ | 是否为打开新窗口的关闭 | Boolean | | false | 已删除该旧有参数，用不到 | | ~~TargetSetID~~ | 数据中心 | 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, sortNo: Number, iconSlot: VueComponnet}] | |approvalCommentRequired|审批意见必填|Boolean|否|false|仅审批同意的场景| |approvalCommentMinLength|审批意见最少文字数|Number|否|0|0：无限制仅审批同意的场景| |approvalCommentTemplate|审批意见模板内容|String|否|-|仅审批同意的场景| |approvalCommentAutoShow|审批意见模板内容|Boolean|否|false|approvalCommentTemplate有值时有效仅审批同意的场景| |enableHistory|启用审批历史|Boolean|否|false|| |enableApprovalRevert|启用审批退回功能|Boolean|否|false|回退也可看作是一种类似于审批拒绝的审批行为，只是不需要从头发起，而是从指定的节点继续流程| |beforeApprovalRevert|审批退回前业务方自有处理（校验等）|Function|否|null|接收一个callback参数，业务根据逻辑需要判断是否调用，调用则继续退回|

Events

| 事件名称 | 说明 | 回调参数 | | -------- | -------------------------------------------------------------- | ----------------------------------------------------------------------------------- | | 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 | 撤回回复 | | APPROVAL_OPERATIONS.ApprovalRevert| 审批退回 |

Slots

| name | 说明 | | ---- | ------------------------------------ | | - | 默认插槽，主要用于呈现关联的表单页面 |

ApprovalDetail

对应抽离为 NPM 包之前的 processPart.vue文件

Props

| 参数 | 说明 | 类型 | 是否必须 | 默认值 | | | -------------------- | --------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | showProcess | 是否展示流程部分 | Boolean | 否 | true | 旧有参数 | | ~~isCloseWindow~~ | 是否为打开新窗口的关闭 | Boolean | | false | 已删除该旧有参数，用不到 | | ~~TargetSetID~~ | 数据中心 | 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}] |

Events

| 事件名称 | 说明 | 回调参数 | | -------- | -------------------------------------------------------------- | --------------------------------------------------- | | refresh | 评论、回复、同意、拒绝、撤销、催办、加签等任何审批操作之后触发 | operation: APPROVAL_OPERATIONS 审批组件中的操作类型 |

Changelog

changelog

Development

通过 npm link teld-approval-component提供给消费者项目使用

pnpm install

Compiles and hot-reloads for development

pnpm build:dev

Compiles and minifies for production

pnpm build

Deploy (publish to NMP)

pnpm build
pnpm publish

TODO: private NPM

Customize configuration

See Configuration Reference.