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