# workflow-base-vue

**Repository Path**: macrolam/workflow-base-vue

## Basic Information

- **Project Name**: workflow-base-vue
- **Description**: 基于vue2.x实现的工作流、审批流。可以实时查看节点状态。节点样式可以定制，不同类型节点对应的颜色可以配置。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2022-04-05
- **Last Updated**: 2024-05-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

![](https://img.shields.io/npm/dt/workflow-base-vue.svg) ![](https://img.shields.io/npm/v/workflow-base-vue.svg)  ![](https://img.shields.io/badge/language-JavaScript-red.svg)

# 工作流

##介绍
基于vue2.x实现的工作流、审批流。可以实时查看节点状态。节点样式可以定制，不同类型节点对应的颜色可以配置。

## 软件架构
- 基于vue2.6+
- 代码结构仿elementUI
    - packages：用于存放组件
        - workflowBaseVue：工作流组件
    - examples：用于存放测试代码，类应用型项目的src
- vue-cli 支持构建一个第三方库 vue-cli-service build --target lib packages/index.js


## 安装

npm i workflow-base-vue --save

## API说明

#####  1.API-Attributes

| 参数 | 类型 | 说明 | 可选值 | 默认值 |
| --- | --- |--- |--- |--- |
|  treeData| object | 数据源 | - | - | 
|  config| object | 转换器 | - | { nodeId: "nodeId",nodeTitle: "nodeTitle", status: "status", nodeDesc: "nodeDesc", opt: "opt", stime: "stime", etime: "etime", nexts: "nexts", next: "next"} | 
|  rootNodeID| number/string | 根节点的id | - | '1' | 
|  lastNodeID| number/string | 尾节点的id | - | - | 
|  showItem| array| 要显示的字段及顺序 | - | - | 
|  statusANDcolorConfig| array | 配置状态值与节点背景色的对照表 | - | - | 
|  hasSlot| boolean| 是否使用插槽 | - | false | 

#####  2.API-Events

| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| click | 点击节点触发的事件 | 点击的节点数据 |
#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)