# Troy 工作流引擎 web 设计器 基于 LogicFlow2, Vue3 自研流程引擎设计器 # 如何使用 ## Vue3 ### 安装 ```bash pnpm install troy-flow-engine --save ``` ### 其他依赖 设计器依赖以下第三方库，如果工程中没有引入这些第三库将会无法正常使用，需自行安装。 ```bash pnpm install element-plus --save pnpm install @element-plus/icons-vue --save ``` ### 快速使用 ```js import { TroyFlowEngine } from "troy-flow-engine"; import "troy-flow-engine/dist/troy-flow-engine.css"; const getUserList = async (deptId, { pageNum, pageSize }) => { // 模拟一个请求 const data = await new Promise((resolve) => { setTimeout(() => { resolve({ total: 5, rows: [], code: 200, msg: "查询成功", }); }, 1000); }); return data; }; const getDeptTree = async () => { // 模拟一个请求 const data = await new Promise((resolve) => { setTimeout(() => { resolve([]); }, 1000); }); return data; }; const getRoleList = async () => { // 模拟一个请求 const data = await new Promise((resolve) => { setTimeout(() => { resolve([]); }, 1000); }); return data; }; const getFormList = async () => { // 模拟一个请求 const data = await new Promise((resolve) => { setTimeout(() => { resolve([]); }, 1000); }); return data; } const saveFlow = (data) => { console.log("data", data); }; ``` ### 属性 | 参数 | 说明 | 类型 | 可选值 | 默认值 | | --------------- | -------------------- | -------------- | ---------- | ------ | | value / v-model | 绑定值（json） | string/object | -- | -- | | viewer | 是否预览模式 | boolean | true/false | false | | highLight | 高亮数据，具体见下表 | object | -- | -- | | getDeptTree | 获取部门树数据 | () => Promise | -- | -- | | getUserList | 获取用户分页列表 | () => Promise | -- | -- | | getRoleList | 获取角色列表 | () => Promise | -- | -- | | getFormList | 获取表单列表 | () => Promise | -- | -- | | on-save | 保存流程数据 | (data) => void | -- | | | is-read-only | 是否是自读模式 | boolean | true/false | false |