1. Project Overview

Antdv Workflow Component: smart-flow-design

A Frontend Workflow Design Tool Inspired by DingTalk, Feishu, and Queshu, Featuring Workflow Approval and Design Capabilities.

Custom Components Based on Vue and ant-design-vue

Note: The project is built with Vue 2, while the demo uses Vue 3.

2. Open Source License

Licensed under Apache-2.0

3. Screenshots

4. Feature Overview

Features

• Supports an online workflow designer and DingTalk-style approval workflows tailored to Chinese business processes.
• Supports workflow processing, task returns, free-flow workflows, countersignatures, parallel and sequential execution, service tasks, and more.
• Supports returning tasks to a specified step, the previous step, or the initiator.
• Supports task reassignment, allowing tasks to be handed over to others for processing. Once completed, the workflow proceeds to the next step.
• Supports task delegation, allowing tasks to be assigned to others. Once they complete the task, it returns to the original assignee.
• Supports intelligent submission, automatically skipping users who have already processed the task and allowing the next assignee to be specified freely.
• Supports workflow cancellation, allowing initiators to terminate workflows quickly and administrators to manage workflow termination.
• Supports free-flow workflows, allowing users to select steps and jump freely to designated stages for special-case processing.
• Supports workflow withdrawal. Tasks that have not yet been processed by the next assignee can be retrieved, canceled, and resubmitted.
• Supports workflow tracking diagrams, displaying workflow status, transition information, task history, and task assignment details.
• Supports linking multiple business documents to a single workflow model. For example, a company may have eight types of expense approval forms with different layouts but the same workflow.
• Supports linking multiple workflow steps to a single form, enabling workflow management from the form perspective for easier business understanding.
• Supports global forms for workflow-wide form configuration. Currently supports built-in forms and URL-based forms. If no form is configured, an error message will appear when initiating a workflow.
• Supports node-specific forms. If no node-specific form is configured, the global form is used by default.
• Supports online scripting of workflow event handlers, including workflow start, completion, and cancellation, as well as task assignment, creation, and termination.
• Supports processing my pending tasks, viewing my completed tasks, searching tasks I created, tracking workflows, and querying approval records.
• Workflow Management: Supports workflow debugging without associated forms, including workflow initiation and suspension; querying workflow definitions, instances, and tasks; task processing; repositioning; and more.
• Supports workflow component tag definitions (workflow buttons, approval comments, next-step workflow information, etc.) for quickly establishing relationships with custom business forms.
• Supports versioned workflow management. Newly modified workflows do not affect workflows currently in progress, and unfinished workflows continue running under their original versions.
• Supports task approval addition, task reminders, task circulation, workflow delegation settings, serial number management, and frequently used phrases.

Terminology

• Or-Sign Approval: An approval node is passed once any one of the assigned approvers approves it.
• Countersignature: An approval node is passed only after all assigned approvers have approved it.
• Additional Approvers: Pre-Approval Addition: Adds an approver before the current task. If this operation is selected, the current pending task disappears and cannot be processed until the newly added approver completes their approval. Post-Approval Addition: Adds an approver after the current task. Once selected, the task is sent to the newly added approver. After their approval, it is forwarded to the next approver defined in the workflow. Parallel Approval: The additional approver reviews the task in parallel with the current assignee.
• Delegation: Delegates a task to another person for processing. Once the delegated person completes the task, it returns to the delegator's task list.
• Reassignment: Transfers an approval task to a designated person, directly replacing the current assignee with someone else. In this case, the task is no longer owned by the original assignee.
• Claim: When multiple candidate users or candidate groups are available, the task must first be claimed to prevent someone else from performing the same task.
• Unclaim: Sets the task assignee to empty. Note: Before unclaiming a task, make sure that candidate users or candidate groups are configured. If neither exists, the task cannot be unclaimed, as this would make it impossible for anyone to claim the task.

5. Tech Stack

Module Installation

Components

• FlowDesign Workflow Designer

Deployment

npm login

npm publish

Local run

# Using yarn
yarn install

yarn run dev

# Using npm
npm install

npm run dev

Plugin Installation

# Using yarn
yarn add smart-flow-design

# Using npm
npm i smart-flow-design --save

Import the Component

// Import in main.js
import SmartFlowDesign from 'smart-flow-design';
import 'smart-flow-design/styles/flow-design.less';
Vue.use(SmartFlowDesign);

Using the Component

<template>
  <div>
    <FlowDesign ref="FlowDesign" />
  </div>
</template>

Importing the Mini Package

The default package integrates antd ui. If your project also uses antd ui, you can choose to import the mini package to reduce the final project size. Make sure that the components referenced in components_use.js have already been imported into your project. For usage examples, refer to smart-flow-design-demo.

- import SmartFlowDesign from 'smart-flow-design';
+ import SmartFlowDesign from 'smart-flow-design/lib/smart-flow-design-mini.umd.min'
import 'smart-flow-design/lib/smart-flow-design.css'
Vue.use(SmartFlowDesign)

Refer to smart-flow-design-demo

Detailed content, please refer to README.md document.

# Build the mini package and generate the lib directory
yarn run mini

# Publish the files in lib to npm
npm login

npm publish