vue审批流程图可选择审批人效果代码-html代码-BFW代码库

vue审批流程图可选择审批人效果代码

代码语言：html

所属分类：图表

代码描述：vue审批流程图可选择审批人效果代码

下面为部分代码预览，完整代码请点击下载或在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" />

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.2.7.14.js"></script>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/element-ui.2.15.1.css">

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/element-ui.2.15.1.js"></script>
<style>
.sfcNormalNodeTitle{
    padding: 4px 6px !important;
}
    .submitbtn{
        position: fixed;
        top: 10px;
        left: 10px;
       
      
        padding: 10px;
     
        border-radius: 10px;

        z-index: 111;
    }
    .sfcNodeTypeGroup{
        padding: 10PX  !important;
    }
    .sfcNodeTypeContent .sfcNodeTypeGroup .sfcNodeTypeGroupName{
        
    }
    #selectdata{
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100px;
        height: 100px;
        background: white;
        z-index:1111111;
    }
</style>
 <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/SimpleFlowChart.umd.min.js"></script>
 

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/SimpleFlowChart.css">

</head>

<body>



    <div id="app" style="height:100vh;" >
      
        
     
      
    </div>

    <script >

var nodedata="";
Vue.use(SimpleFlowChart)
Vue.component( "SimpleFlowChart", SimpleFlowChart.default) 
Vue.component( "SFCNode", SimpleFlowChart.Node) 
var app = new Vue({
  el: '#app',
  data : function() {
        			return {
        			    checkedid:[],
        			    flowname:"请假",
        			    users:[{username:"张三",uid:1},{username:"李四",uid:2}],
        			    ishow:false,
        			    nodetypelist:[
  {
    name: '审批',
    list: [
      {
        type: 'applyuser',
        name: '申请人'
      },
       {
        type: 'approvuser',
        name: '选择审批人'
      },
      {
        type: 'copyuser',
        name: '选择抄送人'
      }
    ]
  }
  
],
testdata: [{"id":"startEvent","type":"start","title":"开始"},{"type":"applyuser","title":"申请人","content":"张三,李四","children":[],"userids":[6,8]},{"type":"approvuser","title":"审核人","content":"王总,李总","children":[],"userids":[15,19]},{"type":"copyuser","title":"抄送人","content":"李总","children":[],"userids":[19]},{"id":"endEvent","type":"end","title":"结束"}]        				
};
},

  methods: {
      
      
      creatnewnode(nodeData,nodeList,type){
          console.log(type);
          if(type.type=="applyuser"){
               return {
                       type: 'applyuser',
                       title: '申请人',
                       content: '请选择',
                         children: []
                   };
          }
         if(type.type=="copyuser"){
               return {
                       type: 'copyuser',
                       title: '抄送人',
                       content: '请选择',
                         children: []
                   };
          }
           if(type.type=="approvuser"){
               return {
                       type: 'approvuser',
                       title: '审核人',
                       content: '请选择',
                         children: []
                   };
      .........完整代码请登录后点击上方下载按钮下载查看