vue+css实现一个oa审批流程图工作流编辑效果代码-html代码-BFW代码库

代码语言：html
所属分类：图表
代码描述：vue+css实现一个oa审批流程图工作流编辑效果代码，实现了编辑、新增、删除节点效果。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <title>BFW NEW PAGE</title>

    <style>
        body{
            background: rgb(247,247,247);
        }
            .flowChartContainer {
                width: 100%;
                height: 100%
            }
            
            .nodeEditBox {
                padding: 20px
            }
            
            .nodeEditBox .nodeEditTitle {
                margin-bottom: 20px
            }
            
            .nodeEditBox .nodeEditTitle .showTitle {
                display: flex;
                align-items: center
            }
            
            .nodeEditBox .nodeEditTitle .showTitle .title {
                color: rgba(0,0,0,.85);
                font-size: 20px;
                font-weight: 700;
                margin-right: 5px
            }
            
            .nodeEditBox .nodeEditTitle .showTitle .icon {
                cursor: pointer
            }
            
            #app,body,html {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0
            }
            
            .sfcActionBar {
                position: absolute;
                right: 30px;
                top: 12px;
                z-index: 3;
                -webkit-user-select: none;
                -moz-user-select: none;
                user-select: none
            }
            
            .sfcActionBar .sfcActionScale {
                display: flex;
                align-items: center
            }
            
            .sfcActionBar .sfcActionScale .sfcActionScaleBtn {
                width: 30px;
                height: 30px;
                background-color: #fff;
                box-shadow: 0 1px 5px 0 rgba(10,30,65,.08);
                border-radius: 6px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer
            }
            
            .sfcActionBar .sfcActionScale .sfcActionScaleBtn svg {
                width: 20px;
                height: 20px;
                fill: rgba(0,0,0,.85)
            }
            
            .sfcActionBar .sfcActionScale .sfcActionScaleNum {
                width: 50px;
                color: rgba(0,0,0,.85);
                font-size: 14px;
                text-align: center
            }
            
            .sfcContainer {
                width: 100%;
                height: 100%;
                overflow: auto;
                box-sizing: border-box
            }
            
            .sfcContainer * {
                box-sizing: border-box;
                margin: 0;
                padding: 0
            }
            
            .sfcContainer .sfcContent {
                display: flex;
                align-items: center;
                padding: 20px;
                min-width: 100%;
                min-height: 100%;
                width: -moz-max-content;
                width: max-content;
                height: -moz-max-content;
                height: max-content;
                transform-origin: left top
            }
            
            .sfcContainer .sfcContent.transformOriginCenter {
                transform-origin: center center
            }
            
            .sfcContainer .sfcContent.vertical {
                flex-direction: column;
                justify-content: center
            }
            
            .sfcArrowLine {
                position: relative;
                width: 65px;
                -webkit-user-select: none;
                -moz-user-select: none;
                user-select: none
            }
            
            .sfcArrowLine.vertical {
                width: auto;
                height: 65px
            }
            
            .sfcArrowLine.vertical:before {
                width: 2px;
                height: 100%;
                transform: translateX(-50%)
            }
            
            .sfcArrowLine.vertical.showArrow:after {
                right: auto;
                bottom: 0;
                top: auto;
                border-top: 10px solid #dedede;
                border-left: 6px solid transparent;
                border-right: 6px solid transparent;
                border-bottom: none;
                transform: translateX(-50%)
            }
            
            .sfcArrowLine:before {
                position: absolute;
                z-index: 0;
                top: 0;
                left: 0;
                transform: translateY(-50%);
                height: 2px;
                width: 100%;
                background-color: #dedede;
                content: ""
            }
            
            .sfcArrowLine.showArrow:after {
                position: absolute;
                width: 0;
                height: 0;
                border-left: 10px solid #dedede;
                border-top: 6px solid transparent;
                border-bottom: 6px solid transparent;
                content: "";
                right: 0;
                top: 0;
                transform: translateY(-50%)
            }
            
            .sfcAddNode {
                position: absolute;
                right: 0;
                top: 0;
                width: 65px;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center
            }
            
            .sfcAddNode.vertical {
                right: auto;
                top: auto;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 65px
            }
            
            .sfcAddNode .sfcAddNodeBtn {
                position: relative;
                background: #0089ff;
                color: white;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                transform: scale(0);
                transition: all .3s;
                z-index: 2;
                font-size: 20px;
                line-height: 20px;
            }
            
            .sfcAddNode .sfcAddNodeBtn:hover {
                z-index: 3
            }
            
            .sfcAddNode .sfcAddNodeBtn.dot {
                transform: scale(.3)
            }
            
            .sfcAddNode .sfcAddNodeBtn.dot svg {
                transform: scale(0)
            }
            
            .sfcAddNode .sfcAddNodeBtn.normal,.sfcAddNode .sfcAddNodeBtn.normal svg {
                transform: scale(1)
            }
            
            .sfcAddNode .sfcAddNodeBtn svg {
                fill: #fff;
                width: 24px;
                height: 24px;
                transform: scale(0)
            }
            
            .sfcAddNode .sfcNodeTypePopover {
                position: absolute;
                visibility: hidden;
                transform: scale(0);
                transition: all .3s
            }
            
            .sfcAddNode .sfcNodeTypePopover:after,.sfcAddNode .sfcNodeTypePopover:before {
                content: "";
                position: absolute;
                top: 0;
                width: 20px;
                height: 100%
            }
            
            .sfcAddNode .sfcNodeTypePopover:before {
                left: -20px
            }
            
            .sfcAddNode .sfcNodeTypePopover:after {
                right: -20px
            }
            
            .sfcAddNode .sfcNodeTypePopover.show {
                visibility: visible;
                transform: scale(1)
            }
            
            .sfcConditionNodeContainer {
                position: relative;
                display: flex;
                align-items: center
            }
            
            .sfcConditionNodeContainer.vertical {
                flex-direction: column
            }
            
            .sfcConditionNodeContainer.vertical .sfcConditionAddBtn {
                left: 50%;
                top: -18px;
                transform: translateX(-50%);
                width: auto;
                height: 36px;
                padding-top: 0;
                padding-bottom: 0;
                line-height: 32px
            }
            
            .sfcConditionNodeContainer.vertical .sfcConditionNodeItemList {
                display: flex
            }
            
            .sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem {
                padding-right: 30px;
                padding-bottom: 0
            }
            
            .sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemLine {
                height: 2px;
                width: 100%;
                top: 0;
                left: 0
            }
            
            .sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemLine.sfcConditionNodeItemLastLine {
                left: 0;
                top: 100%
            }
            
            .sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem:first-of-type>.sfcConditionNodeItemLine {
                left: 50%;
                width: 50%;
                height: 2px;
                top: 0
            }
            
            .sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem:first-of-type>.sfcConditionNodeItemLine.sfcConditionNodeItemLastLine {
                top: 100%
            }
            
            .sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem:last-of-type>.sfcConditionNodeItemLine {
                left: 0;
                width: 50%;
                height: 2px;
                top: 0
            }
            
            .sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem:last-of-type>.sfcConditionNodeItemLine.sfcConditionNodeItemLastLine {
                top: 100%
            }
            
            .sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemLinkLine {
                height: 30px;
                width: 2px;
                top: 0;
                left: 50%;
                transform: translateX(-50%)
            }
            
            .sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemNodeWrap {
                flex-direction: column;
                height: 100%
            }
            
            .sfcConditionNodeContainer.vertical .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemNodeWrap .sfcConditionNodeItemLinkCrossLine {
                width: 2px
            }
            
            .sfcConditionNodeContainer .sfcConditionAddBtn {
                position: absolute;
                left: -18px;
                top: 50%;
                transform: translateY(-50%);
                z-index: 2;
                width: 36px;
                display: flex;
                flex-wrap: wrap;
                border: 2px solid #dedede;
                background: #fff;
                border-radius: 18px;
                color: #222;
                cursor: pointer;
                font-size: 12px;
                padding: 10px;
                text-align: center
            }
            
            .sfcConditionNodeContainer .sfcConditionNodeItemList .sfcConditionNodeItem {
                padding: 30px;
                padding-right: 0;
                position: relative
            }
            
            .sfcConditionNodeContainer .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemLine {
                position: absolute;
                height: 100%;
                width: 2px;
                left: 0;
                top: 0;
                background-color: #dedede
            }
            
            .sfcConditionNodeContainer .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemLine.sfcConditionNodeItemLastLine {
                left: 100%
            }
            
            .sfcConditionNodeContainer .sfcConditionNodeItemList .sfcConditionNodeItem:first-of-type>.sfcConditionNodeItemLine {
                top: 50%;
                height: 50%
            }
            
            .sfcConditionNodeContainer .sfcConditionNodeItemList .sfcConditionNodeItem:last-of-type>.sfcConditionNodeItemLine {
                top: 0;
                height: 50%
            }
            
            .sfcConditionNodeContainer .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemLinkLine {
                position: absolute;
                width: 30px;
                height: 2px;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                background-color: #dedede
            }
            
            .sfcConditionNodeContainer .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemNodeWrap {
                display: flex;
                align-items: center
            }
            
            .sfcConditionNodeContainer .sfcConditionNodeItemList .sfcConditionNodeItem .sfcConditionNodeItemNodeWrap .sfcConditionNodeItemLinkCrossLine {
                height: 2px;
                flex-grow: 1;
                background-color: #dedede
            }
            
            .sfcEndNodeContainer {
                width: 90px;
                height: 40px;
                border-radius: 30px;
                box-shadow: 0 1px 5px 0 rgba(10,30,65,.08);
                color: #fff;
                line-height: 40px;
                text-align: center;
                background: #6e6e6e
            }
            
            .sfcNodeContainer {
                position: relative
            }
            
            .sfcNormalNodeContainer {
                position: relative;
                display: flex;
                flex-shrink: 0;
                align-items: center
            }
            
            .sfcNormalNodeContainer.vertical .sfcNormalNodeWrap,.sfcNormalNodeContainer.vertical {
                flex-direction: column
            }
            
            .sfcNormalNodeContainer .sfcNormalNodeWrap {
                position: relative;
                display: flex;
                align-items: center
            }
            
            .sfcNormalNodeContainer .sfcNormalNodeWrap .sfcNormalNodeContentWrap.........完整代码请登录后点击上方下载按钮下载查看