利益分成交互实现

zjugis-business/src/main/resources/static/OwCommon/OwCommon.css

@@ -0,0 +1,38 @@
+/**
+** Tab控件CSS样式
+**/
+.ow-tabs {
+    display: flex;
+    flex-direction: column;
+}
+.ow-tabs>.ow-tab-nav {
+    position: relative;
+}
+.ow-tabs>.ow-tab-nav::after {
+    content: "";
+    display: block;
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    border-bottom: 2px solid #E1E9F5;
+}
+.ow-tabs>.ow-tab-nav>.ow-tab-item {
+    display: inline-block;
+    padding: 8px 15px !important;
+    cursor: pointer;
+    position: relative;
+    z-index: 9999999;
+    border-bottom: 2px solid transparent;
+}
+.ow-tabs>.ow-tab-nav>.ow-tab-item:hover,
+.ow-tabs>.ow-tab-nav>.ow-tab-item.on {
+    border-bottom: 2px solid #2E77E6;
+    color: #2E77E6;
+}
+.ow-tabs>.ow-tab-scroll {
+    height: 0px;
+    flex-grow: 1;
+    overflow-y: auto;
+    margin-top: 15px;
+}

zjugis-business/src/main/resources/static/OwCommon/OwCommon.js

@@ -0,0 +1,26 @@
+/**
+ * TabScroll控件JS交互效果
+ * **/
+;(function(_g){
+    function TabScroll(){
+        if(!$) throw new Error("$未定义，请先引入jQuery库!");
+        $(".ow-tab-content").hide(0);
+        var dataName = $(".ow-tab-item").removeClass('on').eq(0).addClass("on").attr("data-name")
+        $("[name='"+dataName+"']").show();
+        return this;
+    }
+    TabScroll.prototype = {
+        init: function(handle){
+            $(".ow-tab-item").click(function(){
+                $(".ow-tab-item").removeClass('on')
+                var dataName = $(this).addClass("on").attr('data-name');
+                $(".ow-tab-content").hide(0);
+                $("[name='"+dataName+"']").show();
+                if(handle){
+                    handle($(this))
+                }
+            })
+        }
+    }
+    _g.tabScroll = TabScroll;
+})(window);

zjugis-business/src/main/resources/templates/FlowProject/apply.ftl

@@ -1,12 +1,10 @@
-<@w.workFlow javascripts=['/FlowProject/js/apply.js','/flow/js/formCommon.js']
-  styles=[ '/flow/css/formCommon.css' ]>
-  <div class="z-position form-boss ow-tab" name="flow-form">
-    <div class="oa_tabBox">
-      <ul class="z-tab-bar">
-        <li z-tabindex="0" class="ow-tab-item on" data-name="jbxx">基础信息</li>
-        <li z-tabindex="1" class="ow-tab-item" data-name="yj">审批意见</li>
-      </ul>
-    </div>
+<@w.workFlow javascripts=['/FlowProject/js/apply.js','/flow/js/formCommon.js', '/OwCommon/OwCommon.js']
+  styles=[ '/flow/css/formCommon.css', '/OwCommon/OwCommon.css' ]>
+  <div class="z-position form-boss ow-tabs" name="flow-form">
+    <ul class="ow-tab-nav">
+      <li z-tabindex="0" class="ow-tab-item on" data-name="jbxx">基础信息</li>
+      <li z-tabindex="1" class="ow-tab-item" data-name="yj">审批意见</li>
+    </ul>
     <div class="ow-tab-scroll">
       <div class="ow-tab-content on" name="jbxx">
         <div class="z-form-row" style="display: none;">
@@ -214,7 +212,7 @@
                       <div class="z-comp-radio" name="project$shareRatio">
                         <div class="z-radio-item <#if (formEntity.shareRatio!0) == 0.4>checked</#if>" value="0.4"><i></i> 60% / 40%</div>
                         <div class="z-radio-item <#if (formEntity.shareRatio!0) == 0.375>checked</#if>" value="0.375"><i></i>62.5% / 37.5%</div>
-                        <div class="z-radio-item flexInputTwo" value=""><i></i>
+                        <div class="z-radio-item flexInputTwo" value="0.6"><i></i>
                           <input id="lyfcGs" type="text">%&nbsp;&nbsp;/&nbsp;&nbsp;  <input id="lyfcBm" type="text">%
                         </div>
                       </div>
@@ -263,4 +261,46 @@
       margin-top: 0;
     }
   </style>
+  <script>
+      //利益分成JS交互
+      var lyfcGsDom = document.querySelector("#lyfcGs");
+      var lyfcBmDom = document.querySelector("#lyfcBm");
+      var initVal = 100;
+      lyfcGsDom.addEventListener('input', function(evt){
+        var tar = evt.target;
+        var val = tar.value;
+        if(val !== ''){
+            lyfcBmDom.value = initVal - parseInt(val);
+        }
+      })
+      lyfcBmDom.addEventListener('input', function(evt){
+          var tar = evt.target;
+          var val = tar.value;
+          if(val !== '') {
+              lyfcGsDom.value = initVal - parseInt(val);
+          }
+      })
+      //动态设置
+      var defaultVal = 0.42;
+      var ratioGroupDom = document.querySelector("[name='project$shareRatio']");
+      var ratioDoms = ratioGroupDom.querySelectorAll("div");
+      console.log(ratioDoms)
+      for(var i = 0; i < ratioDoms.length;i++){
+          var ele = ratioDoms[i]
+          if(!ele) continue;
+          var val = ele.getAttribute('value');
+          var eleClass = ele.classList;
+          if([0.4, 0.375].indexOf(val) != -1){
+              eleClass.add('checked')
+              break;
+          }else{
+              if(ratioDoms.length - 1 === i){
+                  eleClass.add('checked')
+                  lyfcBmDom.value = defaultVal * 100;
+                  lyfcGsDom.value = 100 - defaultVal * 100;
+                  break;
+              }
+          }
+      }
+  </script>
 </@w.workFlow>