xflow流程可视化-项目搭建

本系列主要讲述一个自定义流程可视化功能的开发,使用Ant Design Pro作为脚手架,AntV/xflow作为可视化开发框架,定制自定义节点,对节点及连线添加自定义属性,使用formliy生成自定义表单对节点属性进行编辑。

本篇主要介绍整体页面以及xflow各个控件的功能。

开发前准备

我们选择Ant Design Pro + umijs3.x作为我们开发的脚手架,umi4已经可以尝鲜了但是还不稳定,后面稳定了升级umi4,首先构建脚手架,建议使用pnpm

mkdir designable-xflow && cd designable-xflow
yarn create @umijs/umi-app
yarn

基本脚手架构建完成,接下来安装xflow,以及formliy

yarn add @antv/xflow @formily/core @formily/react @formily/antd

这样我们使用到的基本库都安装完毕了,接下来我们对主视图进行改造。
首先主目录新建config/config.ts,将.umirc.ts文件中的内容复制到config.ts中,然后删除.umirc.ts,添加对应路由
config/config.ts:

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  layout: {},
  routes: [
    {
        path: '/',
        redirect: '/xflow',
      },
      {
        name: '流程可视化',
        path: '/xflow',
        icon: 'SmileOutlined',
        component: '@/pages/Xflow',
      },
  ],
  fastRefresh: {},
});

将antv官网xflow列子复制一份到pages目录下(pages/Xflow),链接,启动服务

yarn run start

但是这时候看到的主页是乱的,缺少了css引入,在pages/Xflow/index.tsx中添加

+ import '@antv/xflow/dist/index.css'
import './index.less'

src下新建global.css,添加

@import '~antd/dist/antd.css';)

xlfow

这时候可以看见我们的页面和官网列子一样了,官网列子还是比较全面的,但是只限于展示,在正式使用时我们需要对组件进行定制化,比如一个组件代表什么,组件下的属性有什么,那些属性可以编辑,组件和组件之间是否可以连接等等,官方的列子满足不了这么多场景,所以需要我们自定义组件进行开发,接下来几篇博文将会对这些情况进行一一解答与说明,尽情期待。

本文地址:链接
本文github地址:链接
github demo地址:链接

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注