teld-approval-component

# Teld Approval Component 审批组件在原来的 ToC 框架项目【审批组件】（原项目名 approvaltestprocess）代码基础上，抽离出独立 NPM 包组件， > 2023.08 开始重构因此会依赖【teld/api-proxy】包的一些内置公共处理内容。组件会依赖【teld/component-proxy】使用组件代理暴露出的组件。 > 组件代理移动端 `tm-`实际使用[`vant`组件](https://vant-contrib.gitee.io/vant/v2/#/zh-CN/home) 提供功能包括： - 仿 DingDing，以竖版时间线的形式，展示审批流程信息 - 留有插槽可以插入展示如表单信息等内容（主要用于业务方表单） - 运行时流程图展示入口 - 审批流程的处理： - 审批同意 - 审批拒绝 - 撤销、转办、加签、评论等其它操作所以，主要是用来处理审批使之流转用的，其次是可以查看审批历史、审批流程进展状况等内容。 > 本项目为独立 NPM 包，因非 ToC 框架项目， > 故无法使用框架内功能即无法提供开发页面， > 可将源码 link 到 ToC 框架项目进行开发调试。 ## Usage 用于 TELD 内部 ToC 框架项目中安装 ```shell 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`中引入组件的样式文件，有自定义样式需求的也响应地在这里进行覆盖 ```js 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`） ```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 部分 ```js // 在ToC框架的项目中，需要全局式引入 import Vue from 'vue'; import TAC from 'teld-approval-component'; Vue.use(TAC); /** * 这里可传入 options， * Vue.use(TAC, options) * * options 参考： * { * maxSelectableUserCount: 50, // 选人框复选模式下最大可选人数 * useFasService: true, // 仅为支持商机项目迁移用（迁移前需设 false，迁移到FASWF后不用设），其它无需设置，默认 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` ```js { // ... plugins: [ { src: '@@/plugins/approval-component.js', ssr: false, }, ]; // ... } ``` 3. 展示运行时流程图需要配 store 新建 `/store/flow.js`文件 > 也就是这里，以移动端样式展示时组件内部依赖了 `teld-approval-flow-mobile`（PC 端跳到流程图查看页面展示） ```js 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](#ApprovalComponent) | 审批组件完整使用，包含所有内部组件及功能，其它均为内部子组件通常情况下只使用这一个就可以了 | | ApprovalHeadInfo | 顶部信息 | | [ApprovalDetail](#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 | 已删除该旧有参数，重构后已废弃 | | targetSetId | 数据中心SetID | String | | false | | | targetIdc | 数据中心IDC | String | | false | | | fasDevAppId | 数据中心别名 | String | | false | | | 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：无限制<br>仅`审批同意`的场景| |approvalCommentTemplate|审批意见模板内容|String|否|-|仅`审批同意`的场景| |approvalCommentAutoShow|审批意见模板内容|Boolean|否|false|`approvalCommentTemplate`有值时有效<br>仅`审批同意`的场景| |enableHistory|启用审批历史|Boolean|否|false|| |enableApprovalRevert|启用审批退回功能|Boolean|否|false|回退也可看作是一种类似于审批拒绝的审批行为，只是不需要从头发起，而是从指定的节点继续流程| |beforeApprovalRevert|审批退回前业务方自有处理（校验等）|Function|否|null|接收一个`callback`参数，业务根据逻辑需要判断是否调用，调用则继续退回| > 关于`fasDevAppId`、`targetIdc`、`targetSetId`的说明： > 用于审批流服务请求地址 > 1. targetSetId 是之前一直有的组件入参，没有变化，其它两个增加的入参，如果不传，会从 url search 参数获取 > 2. 新增两个入参后这三个参数的使用规则与之前对比发生的变化： > 1. 有`fasDevAppId`的情况，使用`fasDevAppId`，另外两个忽略 > 2. 没有`fasDevAppId`的情况，使用`targetSetId`和`targetIdc` > 1. 有`targetSetId`和`targetIdc`的情况，使用`targetSetId + targetIdc` > 2. 没有`targetIdc`的情况，如果`targetSetId`为`MC`开头的，`targetIdc`补全为`MA`，其它情况不补全，只用`targetSetId` #### 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](./CHANGELOG.md) ## 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](https://cli.vuejs.org/config/).