Merge branch 'master' of http://114.55.67.98:8070/Natural_p1/zjugis_OA

zjugis-business/src/main/resources/templates/WorkFlow/qjsq.ftl

@@ -0,0 +1,192 @@
+<@w.workFlow javascripts=['/WorkFlow/js/index.js']
+  styles=['/WorkFlow/css/form.css', '../common/formCommon.css' ,'../timeSelector/TimeSelector.css' ]>
+  <div class="z-position form-boss">
+    <div class="form-title" style="margin-top: 0px;">
+      <div class="form-icon">
+        <img src="./imgs/titleIcon.png" alt="">
+        <span>基本信息</span>
+      </div>
+      <div class="form-btn">
+      </div>
+    </div>
+    <div class="jbxx-box">
+      <table class="jbxx-table-info">
+        <tr>
+          <td>
+            <div class="form-label">请假人：</div>
+          </td>
+          <td>
+            <div class="form-group">
+              <div class="form-item">
+                <div class="z-comp-input" name="demoForm1$field1">
+                  <input type="text" value="张三">
+                </div>
+              </div>
+            </div>
+          </td>
+          <td>
+            <div class="form-label">所在部门：</div>
+          </td>
+          <td>
+            <div class="form-group">
+              <div class="form-item">
+                <div class="z-comp-input" name="demoForm1$field1">
+                  <input type="text" value="张三">
+                </div>
+              </div>
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <div class="form-label">申请时间：</div>
+          </td>
+          <td>
+            <div class="form-group">
+              <div class="form-item">
+                <div class="z-comp-input" name="demoForm1$field1">
+                  <input type="text" value="张三">
+                </div>
+              </div>
+            </div>
+          </td>
+          <td>
+            <div class="form-label">请假单号：</div>
+          </td>
+          <td>
+            <div class="form-group">
+              <div class="form-item">
+                <div class="z-comp-input" name="demoForm1$field1">
+                  <input type="text" value="张三">
+                </div>
+              </div>
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <div class="form-label">休假类型：</div>
+          </td>
+          <td>
+            <div class="form-group">
+              <div class="form-item">
+                <div class="z-comp-input" name="demoForm1$field1">
+                  <input type="text" value="张三">
+                </div>
+              </div>
+            </div>
+          </td>
+          <td>
+            <div class="form-label">休假天数：</div>
+          </td>
+          <td>
+            <div class="form-group">
+              <div class="form-item">
+                <div class="z-comp-input" name="demoForm1$field1">
+                  <input type="text" value="张三">
+                </div>
+              </div>
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <div class="form-label">请假原因：</div>
+          </td>
+          <td colspan="3">
+            <div class="form-group">
+              <div class="form-item" style="margin: 10px 0;">
+                <div class="z-comp-textarea" name="demoForm1$field1">
+                  <textarea></textarea>
+                </div>
+              </div>
+            </div>
+          </td>
+        </tr>
+      </table>
+    </div>
+    <div class="form-title">
+      <div class="form-icon">
+        <img src="./imgs/titleIcon.png" alt="">
+        <span>请假时间信息</span>
+      </div>
+      <div class="form-btn">
+        <div>
+          <img src="./imgs/addIcon.png" alt="">
+          <span>新增</span>
+        </div>
+      </div>
+    </div>
+    <div class="qjsjxx-box">
+      <table class="form-table-info">
+        <tr>
+          <td>序号</td>
+          <td style="width: 30%;">起始时间</td>
+          <td style="width: 30%;">截止时间</td>
+          <td>备注</td>
+          <td>操作</td>
+        </tr>
+        <tr>
+          <td> 1 </td>
+          <td>
+            <div class="form-flex">
+              <div class="form-item" style="width: 50%;margin-right: 5px;">
+                <div class="z-comp-date" name="demoForm1$field8">
+                  <input type="text" value="2015-05-03">
+                </div>
+              </div>
+              <div style="width: 50%;margin-left: 5px;" class="dateTimeRange dateTimeRange1">
+              </div>
+              <span class="nbsp"> - </span>
+            </div>
+    </div>
+    </td>
+    <td>
+      <div class="form-flex">
+        <div class="form-item" style="width: 50%;margin-right: 5px;">
+          <div class="z-comp-date" name="demoForm1$field8">
+            <input type="text" value="2015-05-03">
+          </div>
+        </div>
+        <div style="width: 50%;margin-left: 5px;" class="dateTimeRange dateTimeRange2">
+        </div>
+      </div>
+  </div>
+  </td>
+  <td>
+    <div class="form-item">
+      <div class="z-comp-input" name="demoForm1$field1">
+        <input type="text" value="张三">
+      </div>
+    </div>
+  </td>
+  <td>
+    <div class="table-btn">
+      <span>删除</span>
+    </div>
+  </td>
+  </tr>
+  </table>
+  </div>
+  </div>
+  <script language="javascript" src="../timeSelector/TimeSelector.js"></script>
+  <script language="javascript">
+  ;
+  (function() {
+    timeSelector({
+      ele: ".dateTimeRange1",
+      callback: function(val) {
+        console.log("2222222222", val);
+      }
+    })
+    timeSelector({
+      ele: ".dateTimeRange2",
+      callback: function(val) {
+        console.log("2222222222", val);
+      }
+    })
+  })();
+  </script>
+  <style type="text/css">
+  </style>
+</@w.workFlow>

zjugis-business/src/main/resources/templates/common/formCommon.css

@@ -21,7 +21,7 @@
     font-size: 16px;
 }
 .form-item {
-    margin: 10px 0px;
+    width: 100%;
 }
 .form-group .form-label {
     margin-bottom: 10px;
@@ -73,4 +73,142 @@
 
 .table-wrap table td input {
     font-size: 16px;
+}
+
+
+
+
+
+
+
+
+
+
+.form-boss {
+  padding: 20px 30px;
+}
+
+.form-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 20px 0px 10px 0;
+}
+
+.form-title .form-icon {
+  display: flex;
+  align-items: center;
+}
+
+.form-title .form-icon span {
+  font-weight: 600;
+  font-size: 18px;
+}
+
+.form-title .form-btn {
+  display: flex;
+  align-items: center;
+}
+
+.form-title .form-btn div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  border-radius: 4px 4px 4px 4px;
+  padding: 0 10px;
+  border: 1px solid #2E77E6;
+  cursor: pointer;
+}
+
+.form-title .form-btn div span {
+  font-size: 16px;
+  color: #2E77E6;
+}
+
+.form-title img {
+  margin-right: 10px;
+}
+
+.jbxx-box {
+  width: 100%;
+}
+.jbxx-table-info {
+  width: 100%;
+  border-collapse: collapse;
+  border: none;
+}
+
+.jbxx-table-info tr {
+  height: 60px;
+  border: 1px solid #E8EBF1;
+}
+
+.jbxx-table-info tr td {
+  text-align: center;
+  background-color: #fff;
+  border-top: #E8EBF1;
+  border-bottom: #E8EBF1;
+  padding: 0 15px;
+}
+
+.jbxx-table-info tr td:nth-child(2n-1) {
+  width: 230px;
+  background-color: #F2F4F8;
+  text-align: right;
+}
+
+.qjsjxx-box {
+  width: 100%;
+}
+
+.qjsjxx-box .form-table-info {
+  width: 100%;
+  border-collapse: collapse;
+  border: none;
+}
+
+.qjsjxx-box .form-table-info tr {
+  height: 63px;
+  background-color: #fff;
+  border: 1px solid #E8EBF1;
+}
+
+.qjsjxx-box .form-table-info tr td {
+  padding: 0 15px;
+}
+
+.qjsjxx-box .form-table-info tr td .form-flex {
+  display: flex;
+  align-items: center;
+}
+
+.qjsjxx-box .form-table-info tr td .form-flex .nbsp {
+  margin-left: 33px;
+  line-height: 63px;
+}
+
+.qjsjxx-box .form-table-info tr:nth-child(1) {
+  background-color: #F2F4F8;
+  height: 37px;
+}
+
+.qjsjxx-box .form-table-info tr:nth-child(1) td {
+  text-align: left;
+  color: #505A69;
+}
+
+.form-table-info .table-btn {
+  padding: 0 15px;
+  height: 32px;
+  background: #F7F8FA;
+  border-radius: 4px 4px 4px 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.form-table-info .table-btn span {
+  color: #2E77E6;
 }

zjugis-business/src/main/resources/templates/timeSelector/TimeSelector.css

@@ -1,15 +1,23 @@
 .dateTimeRange {
     position: relative;
     width: 260px;
+    height: 30px;
+}
+.dateTime{
+  height: 100%;
+  border: solid 1px #cbd1d6;
+  border-radius: 4px;
+  box-sizing: border-box;
 }
 .dateTimeRange>.dateTime>input {
     padding: 5px 10px;
-    border: 1px solid #DEE0E3;
-    border-radius: 3px;
     width: 100%;
     cursor: pointer;
     outline: none;
     box-sizing: border-box;
+    height: 28px;
+    border: none;
+    font-size: 16px;
 }
 .dateTimeRange>.dateTime>.icon {
     position: absolute;