Browse Source

修正模态框样式调整

wangcz 8 years ago
parent
commit
0bcaebf968

+ 43 - 0
src/main/webapp/resources/js/index/app.js

@@ -5496,6 +5496,49 @@ define(['toaster', 'charts', 'ngTable', 'common/services', 'common/directives',
                 toaster.pop('error', '附件上传失败');
                 toaster.pop('error', '附件上传失败');
             });
             });
         }
         }
+
+        $scope.previewShow = false;
+        $scope.pdfShow = false;
+        $scope.noneFileShow = true;
+        $scope.$watch('myFiles', function () {
+            if ($scope.myFiles) {
+                $scope.noneFileShow = false;
+                var file = $scope.myFiles[0];
+                if (file.name.indexOf('.pdf') != -1 || file.name.indexOf('.PDF') != -1) {//pdf文件
+                    $scope.pdfShow = true;
+                    $scope.previewShow = false;
+                    $scope.imgPreviewName = file.name;
+                } else {
+                    if (typeof(Worker) !== "undefined") {//支持HTML5
+                        $scope.imgPreview = getObjectURL(file);
+                        $scope.imgPreviewName = file.name;
+                    } else {//不支持HTML5
+                        $scope.imgPreview = 'static/img/all/preview-error.jpg';
+                        $scope.imgPreviewName = file.name;
+                    }
+                    $scope.previewShow = true;
+                    $scope.pdfShow = false;
+                }
+            } else {
+                $scope.noneFileShow = true;
+                $scope.previewShow = false;
+                $scope.pdfShow = false;
+            }
+        });
+        //建立一个可存取到该file的url
+        var imgurl = null;
+        var getObjectURL = function (file) {
+            var url = null;
+            if (window.createObjectURL != undefined) { // basic
+                url = window.createObjectURL(file);
+            } else if (window.URL != undefined) { // mozilla(firefox)
+                url = window.URL.createObjectURL(file);
+            } else if (window.webkitURL != undefined) { // webkit or chrome
+                url = window.webkitURL.createObjectURL(file);
+            }
+            imgurl = url;
+            return url;
+        };
     }]);
     }]);
 
 
 
 

+ 43 - 50
src/main/webapp/resources/tpl/index/baseInfo/modal/quotation_modal.html

@@ -1,9 +1,9 @@
 <style>
 <style>
     .modal-dialog{
     .modal-dialog{
-        position: fixed;
+        position: relative;
         top: 23%;
         top: 23%;
         left: 50%;
         left: 50%;
-        margin: -150px 0 0 -195px;
+        margin: -150px 0 0 -350px;
     }
     }
     .modal-content{
     .modal-content{
         width: 700px;
         width: 700px;
@@ -27,12 +27,10 @@
         padding:30px 25px 10px 25px;
         padding:30px 25px 10px 25px;
         margin-left: 15px;
         margin-left: 15px;
     }
     }
-    .modal-add{
-        background: #f5f5f5;
-        margin-left: 0;
-        padding: 20px 20px 20px 40px;
+    .modal-body .modal-add{
+        position:relative;
     }
     }
-    .modal-add i{
+    .modal-add a i{
         position: absolute;
         position: absolute;
         top: 4px;
         top: 4px;
         right: 0;
         right: 0;
@@ -70,21 +68,35 @@
     }
     }
     .modal-body .bottom{
     .modal-body .bottom{
         padding-top:10px;
         padding-top:10px;
+        margin-left: -15px;
     }
     }
-    .modal-body .bottom a{
+    .modal-body .bottom span{
+        position:relative;
         display:inline-block;
         display:inline-block;
         color:#5078Cb;
         color:#5078Cb;
         font-size: 14px;
         font-size: 14px;
         margin-bottom:15px;
         margin-bottom:15px;
         text-decoration: none;
         text-decoration: none;
     }
     }
-    .modal-body .bottom a:hover{
+    .modal-body .bottom span:hover{
         cursor:pointer;
         cursor:pointer;
         text-decoration: underline;
         text-decoration: underline;
     }
     }
-    .modal-body .bottom a i{
+    .modal-body .bottom span i{
         margin-right:10px;
         margin-right:10px;
     }
     }
+    .modal-body .bottom span.file input{
+        display:inline-block;
+        position:absolute;
+        top:0;
+        left:0;
+        z-index:1000;
+        opacity:0;
+        width:100px;
+    }
+    .modal-body .bottom span.file input:hover{
+        cursor:pointer;
+    }
     .modal-footer{
     .modal-footer{
         border-top: none;
         border-top: none;
     }
     }
@@ -173,58 +185,39 @@
                 </div>
                 </div>
             </div>
             </div>
         </div>
         </div>
-        <div ng-repeat="reply in inquiryItem.replies">
-            <div class="col-xs-6 form-horizontal">
-                <div class="form-group">
-                    <label for="inputEmail6" class="col-xs-4 control-label">分段数量<span ng-bind="$index + 1" ng-if="inquiryItem.replies.length > 1"></span></label>
-                    <div class="col-xs-8">
-                        <input type="text" class="form-control" id="inputEmail6" ng-model="reply.lapQty">
-                    </div>
-                </div>
-            </div>
-            <div class="col-xs-6 form-horizontal">
-                <div class="form-group">
-                    <label for="inputEmail7" class="col-xs-4 control-label">价格<span ng-bind="$index + 1" ng-if="inquiryItem.replies.length > 1"></span></label>
-                    <div class="col-xs-8">
-                        <input type="text" class="form-control" id="inputEmail7" ng-model="reply.price">
-                    </div>
+    </div>
+    <div ng-repeat="reply in inquiryItem.replies" class="modal-add row">
+        <div class="col-xs-6 form-horizontal">
+            <div class="form-group">
+                <label for="inputEmail6" class="col-xs-4 control-label">分段数量
+                    <span ng-bind="$index + 1" ng-if="inquiryItem.replies.length > 1"></span></label>
+                <div class="col-xs-8">
+                    <input type="text" class="form-control" id="inputEmail6" ng-model="reply.lapQty">
                 </div>
                 </div>
             </div>
             </div>
-            <a ng-click="removeStep(inquiryItem, $index)" ng-if="!$first"><i class="fa fa-trash"></i></a>
         </div>
         </div>
-</div>
-<div class="modal-body modal-add">
-    <div class="row" >
-        <div style="position:relative;" ng-repeat="">
-            <i class="fa fa-trash"></i>
-            <div class="col-xs-6 form-horizontal">
-                <div class="form-group">
-                    <label for="inputNum1" class="col-xs-4 control-label">分段数量</label>
-                    <div class="col-xs-8">
-                        <input type="text" class="form-control" id="inputNum1">
-                    </div>
-                </div>
-            </div>
-            <div class="col-xs-6 form-horizontal">
-                <div class="form-group">
-                    <label for="inputNum2" class="col-xs-4 control-label">价格</label>
-                    <div class="col-xs-8">
-                        <input type="text" class="form-control" id="inputNum2">
-                    </div>
+        <div class="col-xs-6 form-horizontal">
+            <div class="form-group">
+                <label for="inputEmail7" class="col-xs-4 control-label">价格
+                    <span ng-bind="$index + 1" ng-if="inquiryItem.replies.length > 1"></span></label>
+                <div class="col-xs-8">
+                    <input type="text" class="form-control" id="inputEmail7" ng-model="reply.price">
                 </div>
                 </div>
             </div>
             </div>
         </div>
         </div>
+        <a ng-click="removeStep(inquiryItem, $index)" ng-if="!$first"><i class="fa fa-trash"></i></a>
     </div>
     </div>
-    <div class="modal-file" ng-if="inquiryItem.attaches.length > 0" ng-repeat="attach in inquiryItem.attaches">
-        <span>附件:</span><a href="attach.path" ng-bind="attach.name"></a>
+    <div class="modal-file" ng-if="imgPreviewName">
+        <span>附件:</span><a ng-bind="imgPreviewName" style="margin-left:10px;"></a>
     </div>
     </div>
 </div>
 </div>
 <div class="modal-body">
 <div class="modal-body">
     <div class="bottom">
     <div class="bottom">
-        <a ng-click="addStep(inquiryItem)"><i class="fa fa-plus"></i>增加分段数量和分段报价</a>
+        <span ng-click="addStep(inquiryItem)"><i class="fa fa-plus"></i>增加分段数量和分段报价</span>
         <br/>
         <br/>
-        <a href=""><i class="fa fa-plus"></i>添加附件</a>
-        <input type="file" ng-file-select name="file" ng-model="myFiles">
+        <span class="file"><i class="fa fa-plus"></i>
+            <input type="file" ng-file-select name="file" ng-model="myFiles">添加附件
+        </span>
     </div>
     </div>
 </div>
 </div>
 <div class="modal-footer">
 <div class="modal-footer">