teld-approval-component v0.2.17-beta.1

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 包提供的组件一览

ApprovalComponent

Props

Events

APPROVAL_OPERATIONS常量枚举定义

Slots

ApprovalDetail

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

Props

Events

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.