spfm-market
/
spfm-market-front


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
							<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>流程设计</title>
  <link charset="utf-8" rel="stylesheet" href="/static/css/layui.css?v=1.0.0">
  <link rel="stylesheet" href="/static/css/temp.css" media="all">
  <link href="/static/css/flow.css" rel="stylesheet" />
  
  <script src="/static/js/jquery-1.8.2.min.js?v=1.0.0"></script>
  <script src="/static/js/crypto-js.js"></script>
  <script src="/static/js/layui.js?v=1.0.0"></script>
  <script src="/static/js/api.config.js"></script>
  <script src="/static/js/util.js?v=1.0.0"></script>
  <script src="/static/js/customform.js?v=1.0.0"></script>
  <script src="/static/js/url.js?v=1.0.0"></script>
  <script src="/static/js/lay/lay-config.js?v=1.0.0"></script>
  <script src="/static/css/inconfont/iconfont.js"></script>
  <script src="/static/js/jquery-ui.min.js"></script>
  <script src="/static/js/jsplumb.js"></script>
  <script src="/static/js/jquery.contextmenu.r2.js"></script>
  <script src="/static/js/flow.js"></script>
  <style type="text/css">
    #flowBox {
      position: relative;
      overflow: auto;
      width: 200%;
    }

    .div-col {
      display: inline-block;
      background-color: #e7e7e7;
      cursor: e-resize;
      position: absolute;
      top: 0;
      height: 100%;
    }

    .div-col-first {
      display: inline-block;
      background-color: #e7e7e7;
      cursor: e-resize;
      position: absolute;
      height: 100%;
    }

    .div-row {
      background-color: #e7e7e7;
      cursor: n-resize;
      position: absolute;
      left: 0;
      width: 100%;
    }

    .div-row-first {
      background-color: #e7e7e7;
      position: absolute;
      width: 100%;
    }

    .div-row-title {
      height: 40px;
      position: absolute;
      top: 0;
      line-height: 40px;
      text-align: center;
      display: inline-block;
    }

    .div-row-title textarea {
      height: 100%;
      width: 100%;
      display: table-cell;
      vertical-align: middle;
      line-height: 40px;
      text-align: center;
      border: none;
      overflow: auto;
      resize: none;
    }

    .div-row-content {
      cursor: pointer;
      height: 40px;
      position: absolute;
      top: 0;
      line-height: 40px;
      text-align: center;
      display: inline-block;
      vertical-align: middle;
      text-align: center;
      border: none;
      overflow: auto;
    }

    .div-col-content.div-display,
    .div-row-content.div-display,
    .div-row-title.div-display,
    .div-col-title.div-display {
      display: none;
      z-index: -9999;
    }

    .div-col-title {
      width: 40px;
      position: absolute;
      left: 0;
      text-align: center;
      display: inline-block;
    }

    .div-col-title textarea {
      height: 100%;
      width: 100%;
      display: table-cell;
      vertical-align: middle;
      line-height: 40px;
      text-align: center;
      border: none;
      overflow: auto;
      resize: none;
    }

    .div-col-content {
      cursor: pointer;
      width: 40px;
      position: absolute;
      left: 0;
      text-align: center;
      display: inline-block;
    }

    .div-first {
      position: absolute;
    }
  </style>

</head>

<body class="layui-layout-body">
  <div class="pageBox">
    <div class="flowChartWrapper">
      <span class="layui-breadcrumb" lay-separator="ㄑ">
        <!-- <a href="/views/welcome-4.html">首页</a>
          <a><cite>办公审批流程图</cite></a> -->
      </span>
      <ul>
        <li>
          <svg class="icon" aria-hidden="true" style="cursor: pointer;" onclick="editFlowInfo()">
            <use xlink:href="#iconxiangqing"></use>
          </svg>
        </li>
        <li><span></span><span style="cursor: pointer;" onclick="saveFlowInfo()">保存</span></li>
      </ul>
    </div>
    <div class="flowWrapper">
      <ul class="flowleft">
        <li>节点</li>
        <li class="menuItems startNode">
          <span data_id="startNode" data_type="start" data_name="开始节点" class="btn layui-btn layui-btn-primary "></span>
        </li>
        <li class="menuItems IntermediateNode">
          <div data_id="startNode" data_type="task" data_name="流程节点" class="btn layui-btn layui-btn-primary"></div>
        </li>
        <li class="menuItems layui-icon-endNode">
          <div data_id="endNode" data_type="end" data_name="结束节点" class="btn layui-btn layui-btn-primary"></div>
        </li>
        <li class="handleIsShow">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#iconyongdao"></use>
          </svg>
        </li>
      </ul>
      <div class="flowRight">
        <div class="flowRightItem flowBox" id="flowBox">
          <div id="ydt" style="height: 100%;width: 100%;"></div>
        </div>
      </div>
    </div>

  </div>

  <!--右键菜单的源-->
  <div class="contextMenu" id="myMenu1">
    <ul>
      <li id="deleteBtn"><img src="/static/images/contentMenu/cross.png" />删除</li>
    </ul>
  </div>
  <!--右键菜单的源-->
  <div class="contextMenu" id="myMenu2">
    <ul>
      <li id="addRow"><img src="/static/images/contentMenu/cross.png" />添加行</li>
      <li id="addCol"><img src="/static/images/contentMenu/cross.png" />添加列</li>
    </ul>
  </div>

  
  <script>
    //JavaScript代码区域
    layui.use('element', function () {
      var element = layui.element;


    });


    $(".layui-icon-endNode").mouseover(function () {
      layer.tips('结束节点', this, {
        tips: [2, "#494949"],
        time: 1000
      });
    });
    $(".IntermediateNode").mouseover(function () {
      layer.tips('流程节点', this, {
        tips: [2, "#494949"],
        time: 1000
      });
    });
    $(".startNode").mouseover(function () {
      layer.tips('开始节点', this, {
        tips: [2, "#494949"],
        time: 1000
      });
    });
    var isok = false
    // var imagePath = './'
    $('.handleIsShow').click(function () {
      if (isok) {
        $('.div-row-content,.div-first,.div-col-content,.div-row-first,.div-row,.div-col-first,.div-col').css('opacity', 1)
        $(".flowRightItem.flowBox").css('background-image', 'url(../../static/images/yes-net.png)')
        $('.handleIsShow').css('color', '#00a0e9')
        isok = !isok
      } else {
        $('.div-row-content,.div-first,.div-col-content,.div-row-first,.div-row,.div-col-first,.div-col').css('opacity', 0)
        $(".flowRightItem.flowBox").css('background-image', 'url(../../static/images/no-net.png)')
        $('.handleIsShow').css('color', '#cccccc')
        isok = !isok
      }
    })
    // 鼠标移入事件
    // $(".flowRightItem").on('mouseenter',function(){
    //   $(".flowRightItem").css("overflow","auto !important");
    // })
    // $(".flowRightItem").on('mouseleave',function(){
    //   $(".flowRightItem").css("overflow","hidden !important");
    // })
    document.querySelector('.flowRightItem').addEventListener('mouseenter', function () {
      this.style.overflow = 'scroll'
    }, false)

    document.querySelector('.flowRightItem').addEventListener('mouseleave', function () {
      this.style.overflow = 'hidden'
    }, false)
  </script>

</body>

</html>