Teld-approval-flow NPM

teld-approval-flow

TELD 审批流设计器组件包，主要包含设计器和查看器两大功能。
另外对于旧有流程图转换新版流程图，提供了从.bpmn文件转换的功能。

Runtime	Designer

Usage

用于 TELD 内部 ToC 框架中

组件准备

在/plugins/components/pc.js文件中注册项目中用到的组件
确保如下注册组件：

// import Vue from 'vue';
import { install }  from '@teld/component-proxy/export/pc.js'
import {
  Button,
  Popover,
  Tooltip,
  Drawer,
  Input,
  Link,
  RadioGroup,
  RadioButton,
  Radio,
  Switch,
  // ...
} from '@teld/component-proxy/pc.js'

const components = [
  Button,
  Popover,
  Tooltip,
  Drawer,
  Input,
  Link,
  RadioGroup,
  RadioButton,
  Radio,
  Switch,
  // ...
]

// El-xx 组件注册为 Tp-xx
install(components)

// El-xx 组件
// components.forEach(c => {
//   Vue.component(c.name, c);
// })
// 2023.07.13 ↑ 这里不需要了

关于注册组件：
作为NPM包开发中本地 Demo 开发无法安装引入@teld/component-proxy的组件，
因为 ToC 框架中对引入路径做了特殊处理，组件代理的这个包只能在 ToC 框架下使用
将@teld/component-proxy/pc.js这个引入解析为每个组件对应的element-ui引入路径，
所以实际注册的还是element-ui的组件。
所以包开发中无法使用tp-而使用el-导致这里注册组件需要修改；
为了方便，将来考虑包中直接使用tp-标签，避免该处引入要修改的麻烦
2023.07.13 已去除el-，全部替换为tp-

另外，关于上面用到的组件，应在/assets/custom-pc.scss文件中引入其样式：

@import "~@teld/component-proxy/style/pc/drawer.scss";
@import "~@teld/component-proxy/style/pc/radio.scss";
@import "~@teld/component-proxy/style/pc/radio-button.scss";
@import "~@teld/component-proxy/style/pc/radio-group.scss";
@import "~@teld/component-proxy/style/pc/icon.scss";

(如果还有其它组件，缺少样式的话，按照上面的方式进行引入即可)

在plugins下新建approval-flow.js文件

import Vue form 'vue'
import * as TAF from 'teld-approval-flow'
import 'teld-approval-flow/lib/approval-flow.css'
Vue.use(TAF, {
  scaleButtons: {
    visible: true,
    position: 'bottom right',
    spaceX: '10px',
    spaceY: '20px',
  },
  designer: {
    useButtonToggleAll: true, // 【全展开|全收起】
    legendDefaultOpen: true, // 默认展开图例--废弃
    legend: {
      open: true, // 默认展开图例（新）
    },
  }
})
// v0.1.2 起支持传入配置控制缩放按钮组，上面示例等同于默认值

在nuxt.config.js中引入approval-flow.js，ssr: false即可
引入flow数据管理模块

在store/下新建flow.js文件

注：nuxtjs 会按文件名做子模块引入，无需手动在store/index.js中引入子模块

// import { flowStore } from 'teld-approval-flow'
// export default flowStore
// 用 ES6 的解构会导致后面使用 Store 时有问题，暂时使用 require 或者
// import * as TAF
// export default TAF.flowStore

// 或
const { flowStore } = require('teld-approval-flow').default || require('teld-approval-flow');
export default flowStore;

引入完成，使用组件

ApprovalFlowRuntime
~~ApprovalFlowDesigner~~
以上两个基于组件ApprovalFlow，可以直接引入该组件使用更灵活

运行时：查看流程实例带流转状态的流程图
<approval-flow-runtime :flow-info="flowInfo">
设计时：设计器及静态流程图查看都属于设计时