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

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

代码语言：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: ""
            }
            
  .........完整代码请登录后点击上方下载按钮下载查看