vue 流程图

git地址
根据原开源项目拓展修改的项目

安装依赖

cnpm i

运行

npm run serve

打包

npm run build

节点基础结构组成

  			nodeName: "开始",  	// 节点名称
            error: true,      	// 是否有误
            type: this.type,  	// 节点类型
            nodeId: getUUID(),	// 节点id
            setting: {},  		// 节点配置 不同类型内容不同
            conditionNodes:[],  // 仅类型为条件分支的时候有
            childNode,			// 子节点
            fatherID,			// 父节点id
            level				// 层级

不同节点下setting的属性

开始节点

抄送人数据数组项

审核节点

条件节点

结构

            nodeName,
            error: !priorityLevel ? false : true,
            nodeId: getUUID(),
            type: this.type,
            priorityLevel,	// 优先级 几乎不用处理 按原顺序就好了 0 一定是为else的情况
            setting: {
                conditionList=[[{
		            operator: "属于",
		            key: "submitter",
		            value: []
        		}]],	// 条件数组
            },
            childNode,
            fatherID,
            level

二维数组 第一层是条件组 第二层数组才是条件 索引0以后的全部视为或关系

配置

配置文件 config.js

	// 常用类型 全局化 防止swtich语句不知道是谁用的
	export const NodeType = {
	    开始: 0,
	    审核人: 1,
	    抄送人: 2,
	    条件: 3,
	    条件分支: 4,
	    办理人: 5,
	    结束: 6,
	    分支跳出: 7,  // 跳出这次if else 回到主分支继续走
	    toString: function (type) {
	        for (let kv in this) {
	            if (kv == "toString") continue
	            if (this[kv] == type) return kv
	        }
	        return "未知类型"
	    },
	}
	
	export const levelOptions = [
	    {
	        value: 1,
	        label: "一级部门主管",
	    },
	    {
	        value: 2,
	        label: "二级部门主管",
	    },
	]
	
	export const operatorList = ["属于", "不属于"]
	export const dataFields = [{ name: "提交人", key: "submitter" }]
	
	// 配置
	const FlowConfig = {
	
	    // 创建节点后立即弹窗
	    createPopupImmediately: false,
	    // 各个类型标题的颜色
	    headerColor: {
	        [NodeType.开始]: "#8cafff",
	        [NodeType.审核人]: "rgb(230, 162, 60)",
	        [NodeType.抄送人]: "rgb(72, 128, 255)",
	        [NodeType.办理人]: "",
	        // 条件分支 没有颜色 可以无视
	        [NodeType.条件分支]: "",
	        [NodeType.结束]: "#8cafff",
	    },
	    // 生成添加按钮 popover 的显示
	    addNodesOptions: [
	        {
	            type: NodeType.审核人,
	            label: "审批人",
	            icon: "./img/审批人.png",
	            class: "approver",
	        },
	        {
	            type: NodeType.抄送人,
	            label: "抄送人",
	            icon: "./img/抄送人.png",
	            class: "notifier",
	        },
	        // {
	        //     type: NodeType.办理人,
	        //     label: "办理人",
	        //     icon: "./img/办理人.png",
	        //     class: "notifier",
	        // },
	        {
	            type: NodeType.条件分支,
	            label: "条件分支",
	            icon: "./img/条件.png",
	            class: "condition",
	        }
	    ],
	    // 允许条件嵌套数量
	    conditionNestCount: 2,
	    levelOptions,
	    operatorList,
	    dataFields
	}

自定义节点

// utils/type下添加js文件 创建对应文件后并指定名称 
import { NodeType } from "../config"
import { BaseType, getUUID } from "../factory"
import { carbonTextHandle, carbonValidate } from "../tools"

/**
 * @description: 开始类型
 * @param {*}
 * @return {*}
 */
export default class StartType extends BaseType {

	// 无需手动导入components到nodeWrap下与Editor下
    filename = "normal"  // 指定在 ./components/node下的文件名称 无需样式更改默认不改动
    form = "startForm"	 // 指定在 ./components/form下的文件名称 自定义表单
    type = NodeType.开始  // 指定类型

	// 返回结构
    getStruct(fatherID, childNode, level) {
        return {
            nodeName: "开始",
            error: true,
            type: this.type,
            nodeId: getUUID(),
            setting: {
                allowCommit: "All",  // All 全员 Assign 指定 None 均不可提交
                assignMode: 0,      // 0 指定部门 1 指定成员
                department: [],     // 指定部门
                member: [],         // 指定成员
                carbonCopySetting: [
                    // {
                    //     type: 1, // 直属上级
                    //     level: 1, // 如果为部门负责人 选择层级
                    //     member: [],
                    // },
                ],   // 抄送人配置
            },
            childNode,
            fatherID,
            level
        }
    }
    
    // 保存后的文字处理
    handleText(nodeConfig) {
        let text = []
        let nodeSetting = nodeConfig.setting
        switch (nodeSetting.allowCommit) {
            case "All":
                text.push("提交人：全员可提交")
                break;
            case "Assign":
                let value = nodeSetting.assignMode ? `提交人：${nodeSetting.member.map((x) => x.name).toString()}` : `提交部门：${nodeSetting.department.map((x) => x.thirdDepartment).toString()}`
                text.push(value)
                break
            case "None":
                return ["提交人：均不可提交"]
        }
        carbonTextHandle(nodeSetting.carbonCopySetting, text)
        return text.length > 0 && text || ["暂无配置"]
    }

    // 保存前的校验 会返回true false 外部赋值error
    beforeSave(nodeConfig) {
        let nodeSetting = nodeConfig.setting
        if (nodeSetting.allowCommit == "Assign") {
            let noSelect = nodeSetting.assignMode ? nodeSetting.member.length < 1 : nodeSetting.department.length < 1
            if (noSelect) {
                return false
            }
        }
        // 存在抄送人 但是没有选择成员的情况
        return carbonValidate(nodeSetting.carbonCopySetting)
    }

}

注意事项

1.创建新的node节点与form的表单的vue文件 请手动混入对应文件夹下的mixin.js
2.form表单混入后提供字段 approverConfig 节点数据 setting 配置数据 可读写
3.node节点混入后提供nodeConfig 当前节点数据 可读写

提供获取数据方法

…编写中

效果图