Browse Source

报表功能新增 导出 纸张 格式 内容 补充

Chente 8 years ago
parent
commit
3a3c822440
1 changed files with 211 additions and 1 deletions
  1. 211 1
      baobiao.html

+ 211 - 1
baobiao.html

@@ -72,6 +72,10 @@
                             <i class="fa fa-print"></i><br>
                             <i class="fa fa-print"></i><br>
                             打印 <span id="checkCount" class="badge badge-primary">5</span>
                             打印 <span id="checkCount" class="badge badge-primary">5</span>
                           </button>
                           </button>
+                          <button class="btn btn-secondary btn-sm" type="button">
+                            <i class="fa fa-share-square-o"></i><br>
+                            导出 <span id="checkCount" class="badge badge-primary">5</span>
+                          </button>
                         </div>
                         </div>
                       </div>
                       </div>
                       <div class="panel">
                       <div class="panel">
@@ -197,15 +201,59 @@
                       </button>
                       </button>
                   </div>
                   </div>
                   <div class="modal-body">
                   <div class="modal-body">
+                    <div class="row mb-1">
+                      <div class="col-3">
+                        纸张大小
+                      </div>
+                      <div class="col-3">
+                        <select class="form-control form-control-sm"><option>A4</option><option>A3</option></select>
+                      </div>
+                      <div class="col-3">
+                        纸张方向
+                      </div>
+                      <div class="col-3">
+                        <select class="form-control form-control-sm"><option>纵向</option><option>横向</option></select>
+                      </div>
+                    </div>
+                    <div class="row mb-1">
+                      <div class="col-3">
+                        缩放比例
+                      </div>
+                      <div class="col-3">
+                        <select class="form-control form-control-sm"><option>100%</option></select>
+                      </div>
+                    </div>
+                    <div class="row mb-1">
+                      <div class="col-3">
+                        页边距
+                      </div>
+                      <div class="form-group col-md-2">
+                       <label class="col-form-label">上</label>
+                       <input type="number" class="form-control form-control-sm" value="12">
+                      </div>
+                      <div class="form-group col-md-2">
+                       <label class="col-form-label">下</label>
+                       <input type="number" class="form-control form-control-sm" value="12">
+                      </div>
+                      <div class="form-group col-md-2">
+                       <label class="col-form-label">左</label>
+                       <input type="number" class="form-control form-control-sm" value="12">
+                      </div>
+                      <div class="form-group col-md-2">
+                       <label class="col-form-label">右</label>
+                       <input type="number" class="form-control form-control-sm" value="12">
+                      </div>
+                    </div>
                   </div>
                   </div>
                   <div class="modal-footer">
                   <div class="modal-footer">
+                      <button type="button" class="btn btn-link float-left" data-dismiss="modal">恢复默认值</button>
                       <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                       <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                       <a href="" class="btn btn-primary">确定</a>
                       <a href="" class="btn btn-primary">确定</a>
                   </div>
                   </div>
               </div>
               </div>
           </div>
           </div>
       </div>
       </div>
-      <!--弹出页面-->
+      <!--弹出格式-->
       <div class="modal fade" id="format" data-backdrop="static">
       <div class="modal fade" id="format" data-backdrop="static">
           <div class="modal-dialog" role="document">
           <div class="modal-dialog" role="document">
               <div class="modal-content">
               <div class="modal-content">
@@ -216,8 +264,169 @@
                       </button>
                       </button>
                   </div>
                   </div>
                   <div class="modal-body">
                   <div class="modal-body">
+                    <div class="row mb-1">
+                      <div class="col-3">
+                        表标题
+                      </div>
+                      <div class="col-3">
+                        <select class="form-control form-control-sm"><option>宋体</option></select>
+                      </div>
+                      <div class="col-3">
+                        <select class="form-control form-control-sm"><option>20</option></select>
+                      </div>
+                      <div class="col-3">
+                        <a href="" class="btn btn-sm btn-secondary" title="加粗"><i class="fa fa-bold"></i></a>
+                        <a href="" class="btn btn-sm btn-secondary" title="斜体"><i class="fa fa-italic"></i></a>
+                        <a href="" class="btn btn-sm btn-secondary" title="下划线"><i class="fa fa-underline"></i></a>
+                      </div>
+                    </div>
+                    <div class="row mb-1">
+                      <div class="col-3">
+                        表栏头
+                      </div>
+                      <div class="col-3">
+                        <select class="form-control form-control-sm"><option>宋体</option></select>
+                      </div>
+                      <div class="col-3">
+                        <select class="form-control form-control-sm"><option>20</option></select>
+                      </div>
+                      <div class="col-3">
+                        <a href="" class="btn btn-sm btn-secondary active" title="加粗"><i class="fa fa-bold"></i></a>
+                        <a href="" class="btn btn-sm btn-secondary" title="斜体"><i class="fa fa-italic"></i></a>
+                        <a href="" class="btn btn-sm btn-secondary" title="下划线"><i class="fa fa-underline"></i></a>
+                      </div>
+                    </div>
+                    <div class="row mb-1">
+                      <div class="col-3">
+                        表正文
+                      </div>
+                      <div class="col-3">
+                        <select class="form-control form-control-sm"><option>宋体</option></select>
+                      </div>
+                      <div class="col-3">
+                        <select class="form-control form-control-sm"><option>20</option></select>
+                      </div>
+                      <div class="col-3">
+                        <a href="" class="btn btn-sm btn-secondary" title="加粗"><i class="fa fa-bold"></i></a>
+                        <a href="" class="btn btn-sm btn-secondary active" title="斜体"><i class="fa fa-italic"></i></a>
+                        <a href="" class="btn btn-sm btn-secondary" title="下划线"><i class="fa fa-underline"></i></a>
+                      </div>
+                    </div>
+                    <div class="row mb-1">
+                      <div class="col-3">
+                        表合计
+                      </div>
+                      <div class="col-3">
+                        <select class="form-control form-control-sm"><option>宋体</option></select>
+                      </div>
+                      <div class="col-3">
+                        <select class="form-control form-control-sm"><option>20</option></select>
+                      </div>
+                      <div class="col-3">
+                        <a href="" class="btn btn-sm btn-secondary" title="加粗"><i class="fa fa-bold"></i></a>
+                        <a href="" class="btn btn-sm btn-secondary" title="斜体"><i class="fa fa-italic"></i></a>
+                        <a href="" class="btn btn-sm btn-secondary active" title="下划线"><i class="fa fa-underline"></i></a>
+                      </div>
+                    </div>
+                    <div class="row mb-1">
+                      <div class="col-3">
+                        表眉表脚
+                      </div>
+                      <div class="col-3">
+                        <select class="form-control form-control-sm"><option>宋体</option></select>
+                      </div>
+                      <div class="col-3">
+                        <select class="form-control form-control-sm"><option>20</option></select>
+                      </div>
+                      <div class="col-3">
+                        <a href="" class="btn btn-sm btn-secondary" title="加粗"><i class="fa fa-bold"></i></a>
+                        <a href="" class="btn btn-sm btn-secondary" title="斜体"><i class="fa fa-italic"></i></a>
+                        <a href="" class="btn btn-sm btn-secondary" title="下划线"><i class="fa fa-underline"></i></a>
+                      </div>
+                    </div>
+                    <div class="row mb-1">
+                      <div class="col-3">
+                        页眉页脚
+                      </div>
+                      <div class="col-3">
+                        <select class="form-control form-control-sm"><option>宋体</option></select>
+                      </div>
+                      <div class="col-3">
+                        <select class="form-control form-control-sm"><option>20</option></select>
+                      </div>
+                      <div class="col-3">
+                        <a href="" class="btn btn-sm btn-secondary" title="加粗"><i class="fa fa-bold"></i></a>
+                        <a href="" class="btn btn-sm btn-secondary" title="斜体"><i class="fa fa-italic"></i></a>
+                        <a href="" class="btn btn-sm btn-secondary" title="下划线"><i class="fa fa-underline"></i></a>
+                      </div>
+                    </div>
+                    <div class="row mb-1">
+                      <div class="col-3">
+                        表格线粗
+                      </div>
+                      <div class="col-4">
+                        <select class="form-control form-control-sm"><option>1</option></select>
+                      </div>
+                    </div>
+                    <div class="row mb-1">
+                      <div class="col-3">
+                        边框线粗
+                      </div>
+                      <div class="col-4">
+                        <select class="form-control form-control-sm"><option>1</option></select>
+                      </div>
+                    </div>
+                    <div class="row mb-1">
+                      <div class="col-4">
+                        <label class="form-check-label">
+                          <input type="checkbox" class="form-check-input">
+                          报表边框横线
+                        </label>
+                      </div>
+                      <div class="col-4">
+                        <label class="form-check-label">
+                          <input type="checkbox" class="form-check-input">
+                          报表边框竖线
+                        </label>
+                      </div>
+                    </div>
+                    <div class="row mb-1">
+                      <div class="col-4">
+                        <label class="form-check-label">
+                          <input type="checkbox" class="form-check-input">
+                          报表表格横线
+                        </label>
+                      </div>
+                      <div class="col-4">
+                        <label class="form-check-label">
+                          <input type="checkbox" class="form-check-input">
+                          报表表格竖线
+                        </label>
+                      </div>
+                    </div>
+                    <div class="row mb-1">
+                      <div class="col-4">
+                        <label class="form-check-label">
+                          <input type="checkbox" class="form-check-input">
+                          自动换行打印
+                        </label>
+                      </div>
+                      <div class="col-4">
+                        <label class="form-check-label">
+                          <input type="checkbox" class="form-check-input">
+                          内容窄体输出
+                        </label>
+                      </div>
+                      <div class="col-4">
+                        <label class="form-check-label">
+                          <input type="checkbox" class="form-check-input">
+                          小数补0
+                        </label>
+                      </div>
+                    </div>
                   </div>
                   </div>
                   <div class="modal-footer">
                   <div class="modal-footer">
+                      <button type="button" class="btn btn-link float-left" data-dismiss="modal">恢复默认值</button>
                       <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                       <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                       <a href="" class="btn btn-primary">确定</a>
                       <a href="" class="btn btn-primary">确定</a>
                   </div>
                   </div>
@@ -237,6 +446,7 @@
                   <div class="modal-body">
                   <div class="modal-body">
                   </div>
                   </div>
                   <div class="modal-footer">
                   <div class="modal-footer">
+                      <button type="button" class="btn btn-link float-left" data-dismiss="modal">恢复默认值</button>
                       <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                       <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                       <a href="" class="btn btn-primary">确定</a>
                       <a href="" class="btn btn-primary">确定</a>
                   </div>
                   </div>