流程服务平台5. 安装包获取和使用
5.1 Jar包的获取和使用
1. 下载示例工程tar.gz包；
2. 解压 tar 包，会解压出所需要的 jar 包和 pom 文件；
3. Jar 可以参照pom文件配置，也可以部署到自定义仓库，也可以 install 到本地，也可以直接读物理路径；
5.2 npm包的获取和使用
包源地址：容器云私服地址， 也可在提供的前端框架项目中的.npmrc文件中查看
5.2.1 支持的功能模块清单
(1) 业务流程设计bpmnlist；
(2) 决策模型设计dmnlist。
(3) 我的待办todolist；
(4) 我的已办finishedlist；
(5) 所有历史任务allhistasks
(6) 我的流程mineprocess；
(7) 所有历史流程allhisprocess；
(8) 正在运行中的流程allrunprocess；
5.2.2 业务流程设计模块安装
1. 依赖安装pnpm add @cpit-ibpm/bpmnlist；
2. 配置引用，main.js/main.ts引入；
js
import VXETable from 'vxe-table';
import 'vxe-table/lib/style.css';
import BpmnList from '@cpit-ibpm/bpmnlist';
import '@cpit-ibpm/bpmnlist/dist/bpmnlist.style.css'; //BpmnList
app.use(BpmnList); app.use(VXETable); //依赖VXETable3. 页面组件引用；
vue
<template>
<div class="my-6 mx-6">
<BpmnList />
</div>
</template>
<route lang="yaml">
meta:
auth: true
</route>5.2.3 决策模型设计模块安装
1. 依赖安装pnpm add @cpit-ibpm/dmnlist；
2. 配置引用，main.js/main.ts引入；
js
import VXETable from 'vxe-table';
import 'vxe-table/lib/style.css';
import DmnList from '@cpit-ibpm/dmnlist';
import '@cpit-ibpm/dmnlist/dist/dmnlist.style.css'; //DmnList
app.use(DmnList); app.use(VXETable); //依赖VXETable3. 页面组件引用；
<template>
<div class="my-6 mx-6">
<DmnList />
</div>
</template>
<route lang="yaml">
meta:
auth: true
</route>5.2.4 我的待办模块安装
1. 依赖安装pnpm add @cpit-ibpm/todolist；
2. 配置引用，main.js/main.ts引入；
js
`import VXETable from 'vxe-table'`;
`import 'vxe-table/lib/style.css'`;
import TodoList from '@cpit-ibpm/todolist';
import '@cpit-ibpm/todolist/dist/todolist.style.css'; //todolist
app.use(TodoList ); app.use(VXETable); //依赖VXETable3. 页面组件引用；
vue
<template>
<div class="my-6 mx-6">
<TodoList />
</div>
</template>5.2.5 我的已办模块安装
1. 依赖安装pnpm add @cpit-ibpm/finishedlist；
2. 配置引用，main.js/main.ts引入；
js
import VXETable from 'vxe-table';
import 'vxe-table/lib/style.css';
import FinishedList from '@cpit-ibpm/finishedlist';
import '@cpit-ibpm/finishedlist/dist/finishedlist.style.css'; // finishedlist
app.use(FinishedList ); app.use(VXETable); //依赖VXETable3. 页面组件引用；
vue
<template>
<div class="my-6 mx-6">
<FinishedList />
</div>
</template>
<route lang="yaml">
meta:
auth: true
</route>5.2.6 历史任务模块安装
1. 依赖安装pnpm add @cpit-ibpm/allhistasks；
2. 配置引用，main.js/main.ts引入；
js
import VXETable from 'vxe-table';
import 'vxe-table/lib/style.css';
import AllHistasks from '@cpit-ibpm/allhistasks';
import '@cpit-ibpm/allhistasks/dist/allhistasks.style.css'; //AllHistasks
app.use(AllHistasks ); app.use(VXETable); //依赖VXETable3. 页面组件引用；
vue
<template>
<div class="my-6 mx-6">
<AllHistasks />
</div>
</template>
<route lang="yaml">
meta:
auth: true
</route>5.2.7 我的流程模块安装
1. 依赖安装pnpm add @cpit-ibpm/mineprocess；
2. 配置引用，main.js/main.ts引入；
js
import VXETable from 'vxe-table';
import 'vxe-table/lib/style.css';
import MineProcess from '@cpit-ibpm/mineprocess';
import '@cpit-ibpm/mineprocess/dist/mineprocess.style.css'; // mineprocess
app.use(MineProcess); app.use(VXETable); //依赖VXETable3. 页面组件引用
<template>
<div class="my-6 mx-6">
<MineProcess/>
</div>
</template>
<route lang="yaml">
meta:
auth: true
</route>5.2.8 全部历史流程模块安装
1. 依赖安装pnpm add @cpit-ibpm/allhisprocess；
2. 配置引用，main.js/main.ts引入；
js
import VXETable from 'vxe-table';
import 'vxe-table/lib/style.css';
import AllHisprocess from '@cpit-ibpm/allhisprocess';
import '@cpit-ibpm/allhisprocess/dist/allhisprocess.style.css'; //AllHisprocess
app.use(AllHisprocess ); app.use(VXETable); //依赖VXETable3. 页面组件引用
vue
<template>
<div class="my-6 mx-6">
<AllHisprocess />
</div>
</template>
<route lang="yaml">
meta:
auth: true
</route>5.2.9 全部运行中的流程模块安装
1. 依赖安装pnpm add @cpit-ibpm/allrunprocess；
2. 配置引用，main.js/main.ts引入；
js
import VXETable from 'vxe-table';
import 'vxe-table/lib/style.css';
import AllRunprocess from '@cpit-ibpm/allrunprocess';
import '@cpit-ibpm/allrunprocess/dist/allrunprocess.style.css'; //AllRunprocess
app.use(AllRunprocess ); app.use(VXETable); //依赖VXETable3. 页面组件引用；
vue
<template>
<div class="my-6 mx-6">
<AllRunprocess />
</div>
</template>
<route lang="yaml">
meta:
auth: true
</route>5.2.10 表单设计器模块安装
1. 依赖安装pnpm add @cpit-ibpm/cpvfform；pnpm add @cpit-ibpm/demoform；
2. 配置引用，main.js/main.ts引入；
js
import App from './App.vue';
import { customFormCom } from './views/customForm'; // 全局引入自建表单及编码表单文件
import CpvfForm from '@cpit-ibpm/cpvfform'; // 引入表单设计器模块
import '@cpit-ibpm/cpvfform/dist/cpvfform.style.css'; // 引入模块样式
import designerForm from '@cpit-cpvf/demoform'; // 引入设计器组件
import '@cpit-cpvf/demoform/dist/designer.style.css'; //引入组件样式
const app = createApp(App);
app.use(designerForm);
app.use(CpvfForm);
customFormCom(app); // 注册自建组件，编码组件3. 页面组件引用
vue
<template>
<div class="my-6 mx-6">
<CpvfForm/>
</div>
</template>4. 配置引用，main.js/main.ts引入；