产品导入、采购物料（新增、单据详情）上传文件图片加查看效果。

git-svn-id: svn+ssh://10.10.101.21/source/platform/platform-b2b@9899 f3bf4e98-0cf0-11e4-a00c-a99a8b9d557d

src/main/webapp/resources/css/index.css

@@ -4198,4 +4198,116 @@ input[required]:invalid, input:focus:invalid, textarea[required]:invalid, textar
 
 ::-webkit-scrollbar-thumb:hover {
 	background-color: #b1abab;
+}
+/*
+查看大图*/
+.upload-pro .well{
+	padding: 0;
+	width: 100px;
+	height: 100px;
+	position: relative;
+	top: -110px;
+	overflow: hidden;
+}
+.upload-pro .hover-show{
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 100%;
+	left: 0;
+	background: rgba(0,0,0,.5);
+}
+.upload-pro .hover-show .delete{
+	padding: 0;
+	width: 30px;
+	height: 30px;
+	float: right;
+	text-align: center;
+	line-height: 30px;
+}
+.upload-pro .hover-show .delete:hover{
+	cursor: pointer;
+}
+.upload-pro .hover-show .delete em{
+	color: #fff;
+	font-size: 18px;
+	margin-top: 10px;
+}
+.upload-pro .hover-show a{
+	display: inline-block;
+	width: 100%;
+	height: 70px;
+	font-size: 14px;
+	color: #fff;
+	text-align: center;
+	line-height:45px;
+	padding-right: 0;
+}
+.upload-pro .hover-show a:hover{
+	cursor: pointer;
+}
+.upload-pro .hover-show a em{
+	margin-right: 5px;
+	font-size: 16px;
+}
+.upload-pro .well:hover .hover-show{
+	top: 0;
+}
+/* 预览框 end */
+#image-box .x-floating-wrap {
+	position: fixed;
+	z-index: 99998;
+	background: #000;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	opacity: 0.5;
+}
+#image-box .x-floating {
+	position: fixed;
+	z-index: 99999;
+	width: 970px;
+	height: 600px;
+	top: 50%;
+	left: 50%;
+	margin-left: -485px;
+	margin-top: -300px;
+	line-height: 560px;
+	text-align: center;
+	vertical-align: middle;
+}
+#image-box .x-floating img {
+	margin: auto auto;
+	max-width: 970px !important;
+	max-height: 600px !important;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none
+}
+
+#image-box .x-close-wrap {
+	position: fixed;
+	top: 0;
+	right: 0;
+	z-index: 100000;
+	width: 120px;
+	height: 120px;
+	margin: -60px -60px 0 0;
+	border-radius: 100%;
+	background: #000;
+	opacity: .3
+}
+
+#image-box .x-close-wrap a {
+	position: absolute;
+	left: 25px;
+	bottom: 25px;
+	font-size: 42px;
+	color: #fff
+}
+
+#image-box .x-close-wrap:hover {
+	opacity: .7
 }

src/main/webapp/resources/tpl/index/baseInfo/newProdInfo.html

@@ -96,6 +96,15 @@
     font-size: 14px;
     width: 190px;
 }
+.pro-add-tab .upload-pro{
+    min-height: 140px;
+}
+.upload-pro p{
+    width: 100%;
+    display: inline-block;
+    line-height: 20px;
+}
+
 </style>
 <div class="wrap">
 	<div class="content">
@@ -176,34 +185,40 @@
                 <dd class="upload-pro">
                     <div class="fl">产品图片：</div>
                     <div class="fr">
-                        <!-- <span><input type="file" onchange="proText.value=this.value" ng-model="myFiles" placeholder="图片或PDF文件" ng-multiple="false"></span> -->
-                        <span><input ng-file-select  ng-model="myFiles" type="file" ng-multiple="false" id="enImage" name="enImage" placeholder="图片或PDF文件"></span>
-                       <!--  <input type="text" id="proText"> -->
-                        <i>提示：图片尺寸在750*750像素以上，图片请避免全文字</i>
-                        
+                        <div class="col-md-12" style="position: relative;">
+                            <!-- <span><input type="file" onchange="proText.value=this.value" ng-model="myFiles" placeholder="图片或PDF文件" ng-multiple="false"></span> -->
+                            <span><input ng-file-select  ng-model="myFiles" type="file" ng-multiple="false" id="enImage" name="enImage" placeholder="图片或PDF文件"></span>
+                            <!--  <input type="text" id="proText"> -->
+                            <i>提示：图片尺寸在750*750像素以上，图片请避免全文字</i>
+                            <div class="well margin-b-0" ng-show="previewShow">
+                                <div ng-show="previewShow">
+                                    <img ng-show="previewShow" alt="营业执照复印件" src="{{imgPreview}}" width="100px" height="100px">
+                                    <!--<div>
+                                        &nbsp;&nbsp;<span class="text-primary"><b>{{imgPreviewName}}</b></span>
+                                    </div>-->
+                                </div>
+                                <div ng-show="pdfShow">
+                                    <img ng-show="pdfShow" src="static/img/all/pdf.jpg" alt="PDF文件" width="30px" height="40px">
+                                    &nbsp;&nbsp;<span class="text-primary"><b>{{imgPreviewName}}</b></span>
+                                </div>
+                                <div ng-show="noneFileShow">
+                                    <span class="text-warning">请上传清晰照片的图片文件或PDF文件</span>
+                                </div>
+                                <div class="hover-show">
+                                    <em class="delete" title="删除" ng-click="clearfile()"><em class="fa fa-trash"></em></em>
+                                    <a ng-href="" target="_blank"><em class="fa fa-search"></em>查看</a>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </dd>
-                <dd ng-show="previewShow">
+               <!-- <dd ng-show="previewShow">
                 	<div class="fl">&nbsp;</div>
                     <div class="fr">
-                  	 <div class="well margin-b-0" >
-			      		<div ng-show="previewShow">
-			      			<img ng-show="previewShow" alt="营业执照复印件" src="{{imgPreview}}" width="200px" height="100px">
-			      			<div>
-				      			&nbsp;&nbsp;<span class="text-primary"><b>{{imgPreviewName}}</b></span>
-				      		</div>
-			      		</div>
-			      		<div ng-show="pdfShow">
-			      			<img ng-show="pdfShow" src="static/img/all/pdf.jpg" alt="PDF文件" width="30px" height="40px">
-				      		&nbsp;&nbsp;<span class="text-primary"><b>{{imgPreviewName}}</b></span>
-			      		</div>
-			      		<div ng-show="noneFileShow">
-			      			<span class="text-warning">请上传清晰照片的图片文件或PDF文件</span>
-			      		</div>
-			      	</div>
-			      	<a ng-click="clearfile()">删除</a>
+
+
                     </div>
-                </dd>
+                </dd>-->
               <!--   <dd class="text-detail">
                     <div class="fl">详细描述：</div>
                     <div class="fr">
@@ -226,5 +241,15 @@
         </form>
 	</div>
 </div>
+<!--查看大图-->
+<div id="image-box" style="display: none">
+    <div class="x-close-wrap" title="关闭">
+        <a href="javascript:void(0);">&times;</a>
+    </div>
+    <div class="x-floating-wrap"></div>
+    <div class="x-floating">
+        <img/>
+    </div>
+</div>
 </body>
-</html>
+</html>

src/main/webapp/resources/tpl/index/baseInfo/productDetail.html

@@ -116,6 +116,14 @@
 .table>tbody+tbody{
     border-top: 0;
 }
+.pro-add-tab .upload-pro{
+    min-height: 140px;
+}
+.upload-pro p{
+    width: 100%;
+    display: inline-block;
+    line-height: 20px;
+}
 </style>
 <div class="wrap">
 	<div class="content">
@@ -219,34 +227,41 @@
                 <dd class="upload-pro">
                     <div class="fl">产品图片：</div>
                     <div class="fr">
-                        <span><input ng-file-select  ng-model="myFiles" type="file" ng-multiple="false" id="enImage" name="enImage" placeholder="图片或PDF文件"></span>
-                        <a ng-click="showImg()" ng-if="prodInfo.attach">{{prodInfo.attach.name}}</a>
-                        <i>提示：图片尺寸在750*750像素以上，图片请避免全文字</i>
+                        <div class="col-md-12" style="position: relative;">
+                            <span><input ng-file-select  ng-model="myFiles" type="file" ng-multiple="false" id="enImage" name="enImage" placeholder="图片或PDF文件"></span>
+                            <a ng-click="showImg()" ng-if="prodInfo.attach">{{prodInfo.attach.name}}</a>
+                            <i>提示：图片尺寸在750*750像素以上，图片请避免全文字</i>
+                            <div class="well margin-b-0" ng-show="previewShow && isShow">
+                                <div ng-show="previewShow">
+                                    <img ng-show="previewShow" alt="营业执照复印件" src="{{imgPreview}}"
+                                         width="100px" height="100px">
+                                    <div>
+                                        &nbsp;&nbsp;<span class="text-primary"><b>{{imgPreviewName}}</b></span>
+                                    </div>
+                                </div>
+                                <div ng-show="pdfShow">
+                                    <img ng-show="pdfShow" src="static/img/all/pdf.jpg" alt="PDF文件"
+                                         width="30px" height="40px"> &nbsp;&nbsp;<span
+                                        class="text-primary"><b>{{imgPreviewName}}</b></span>
+                                </div>
+                                <div ng-show="noneFileShow">
+                                    <span class="text-warning">请上传清晰照片的图片文件或PDF文件</span>
+                                </div>
+                                <div class="hover-show">
+                                    <em class="delete" title="删除" ng-click="clearfile()"><em class="fa fa-trash"></em></em>
+                                    <a ng-href="" target="_blank"><em class="fa fa-search"></em>查看</a>
+                                </div>
+                            </div>
+                         </div>
                     </div>
                 </dd>
-				<dd ng-show="previewShow && isShow">
+				<!--<dd ng-show="previewShow && isShow">
 					<div class="fl">&nbsp;</div>
 					<div class="fr">
-						<div class="well margin-b-0">
-							<div ng-show="previewShow">
-								<img ng-show="previewShow" alt="营业执照复印件" src="{{imgPreview}}"
-									width="200px" height="100px">
-								<div>
-									&nbsp;&nbsp;<span class="text-primary"><b>{{imgPreviewName}}</b></span>
-								</div>
-							</div>
-							<div ng-show="pdfShow">
-								<img ng-show="pdfShow" src="static/img/all/pdf.jpg" alt="PDF文件"
-									width="30px" height="40px"> &nbsp;&nbsp;<span
-									class="text-primary"><b>{{imgPreviewName}}</b></span>
-							</div>
-							<div ng-show="noneFileShow">
-								<span class="text-warning">请上传清晰照片的图片文件或PDF文件</span>
-							</div>
-						</div>
+
 						<a ng-click="clearfile()">删除</a>
 					</div>
-				</dd>
+				</dd>-->
 					<!--      <dd class="text-detail">
                     <div class="fl">详细描述：</div>
                     <div class="fr">
@@ -318,5 +333,15 @@
         </div>
 	</div>
 </div>
+<!--查看大图-->
+<div id="image-box" style="display: none">
+    <div class="x-close-wrap" title="关闭">
+        <a href="javascript:void(0);">&times;</a>
+    </div>
+    <div class="x-floating-wrap"></div>
+    <div class="x-floating">
+        <img/>
+    </div>
+</div>
 </body>
 </html>

src/main/webapp/resources/tpl/index/purc/newProdInfo.html

@@ -93,6 +93,14 @@
     font-size: 14px;
     width: 190px;
 }
+.pro-add-tab .upload-pro{
+    min-height: 140px;
+}
+.upload-pro p{
+    width: 100%;
+    display: inline-block;
+    line-height: 20px;
+}
 </style>
 <div class="wrap">
 	<div class="content">
@@ -214,34 +222,40 @@
                 <dd class="upload-pro">
                     <div class="fl">物料图片：</div>
                     <div class="fr">
-                        <!-- <span><input type="file" onchange="proText.value=this.value" ng-model="myFiles" placeholder="图片或PDF文件" ng-multiple="false"></span> -->
-                        <span><input ng-file-select  ng-model="myFiles" type="file" ng-multiple="false" id="enImage" name="enImage" placeholder="图片或PDF文件"></span>
-                       <!--  <input type="text" id="proText"> -->
-                        <i>提示：图片尺寸在750*750像素以上，图片请避免全文字</i>
-                        
+                        <div class="col-md-12" style="position: relative;">
+                            <!-- <span><input type="file" onchange="proText.value=this.value" ng-model="myFiles" placeholder="图片或PDF文件" ng-multiple="false"></span> -->
+                            <span><input ng-file-select  ng-model="myFiles" type="file" ng-multiple="false" id="enImage" name="enImage" placeholder="图片或PDF文件"></span>
+                           <!--  <input type="text" id="proText"> -->
+                            <i>提示：图片尺寸在750*750像素以上，图片请避免全文字</i>
+                            <div class="well margin-b-0" ng-show="previewShow">
+                                <div ng-show="previewShow">
+                                    <img ng-show="previewShow" alt="营业执照复印件" src="{{imgPreview}}" width="100px" height="100px">
+                                    <div>
+                                        &nbsp;&nbsp;<span class="text-primary"><b>{{imgPreviewName}}</b></span>
+                                    </div>
+                                </div>
+                                <div ng-show="pdfShow">
+                                    <img ng-show="pdfShow" src="static/img/all/pdf.jpg" alt="PDF文件" width="30px" height="40px">
+                                    &nbsp;&nbsp;<span class="text-primary"><b>{{imgPreviewName}}</b></span>
+                                </div>
+                                <div ng-show="noneFileShow">
+                                    <span class="text-warning">请上传清晰照片的图片文件或PDF文件</span>
+                                </div>
+                                <div class="hover-show">
+                                    <em class="delete" title="删除" ng-click="clearfile()"><em class="fa fa-trash"></em></em>
+                                    <a ng-href="" target="_blank"><em class="fa fa-search"></em>查看</a>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </dd>
-                <dd ng-show="previewShow">
+                <!--<dd ng-show="previewShow">
                 	<div class="fl">&nbsp;</div>
                     <div class="fr">
-                  	 <div class="well margin-b-0" >
-			      		<div ng-show="previewShow">
-			      			<img ng-show="previewShow" alt="营业执照复印件" src="{{imgPreview}}" width="200px" height="100px">
-			      			<div>
-				      			&nbsp;&nbsp;<span class="text-primary"><b>{{imgPreviewName}}</b></span>
-				      		</div>
-			      		</div>
-			      		<div ng-show="pdfShow">
-			      			<img ng-show="pdfShow" src="static/img/all/pdf.jpg" alt="PDF文件" width="30px" height="40px">
-				      		&nbsp;&nbsp;<span class="text-primary"><b>{{imgPreviewName}}</b></span>
-			      		</div>
-			      		<div ng-show="noneFileShow">
-			      			<span class="text-warning">请上传清晰照片的图片文件或PDF文件</span>
-			      		</div>
-			      	</div>
+
 			      	<a ng-click="clearfile()">删除</a>
                     </div>
-                </dd>
+                </dd>-->
               <!--   <dd class="text-detail">
                     <div class="fl">详细描述：</div>
                     <div class="fr">
@@ -264,5 +278,15 @@
         </form>
 	</div>
 </div>
+<!--查看大图-->
+<div id="image-box" style="display: none">
+    <div class="x-close-wrap" title="关闭">
+        <a href="javascript:void(0);">&times;</a>
+    </div>
+    <div class="x-floating-wrap"></div>
+    <div class="x-floating">
+        <img/>
+    </div>
+</div>
 </body>
 </html>

src/main/webapp/resources/tpl/index/purc/productDetail.html

@@ -116,6 +116,14 @@
 .table>tbody+tbody{
     border-top: 0;
 }
+.pro-add-tab .upload-pro{
+    min-height: 140px;
+}
+.upload-pro p{
+    width: 100%;
+    display: inline-block;
+    line-height: 20px;
+}
 </style>
 <div class="wrap">
 	<div class="content">
@@ -219,34 +227,41 @@
                 <dd class="upload-pro">
                     <div class="fl">产品图片：</div>
                     <div class="fr">
-                        <span><input ng-file-select  ng-model="myFiles" type="file" ng-multiple="false" id="enImage" name="enImage" placeholder="图片或PDF文件" ng-disabled="!prodInfo.$editing"></span>
-                        <a ng-click="showImg()" ng-if="prodInfo.attach">{{prodInfo.attach.name}}</a>
-                        <i>提示：图片尺寸在750*750像素以上，图片请避免全文字</i>
+                        <div class="col-md-12" style="position: relative;">
+                            <span><input ng-file-select  ng-model="myFiles" type="file" ng-multiple="false" id="enImage" name="enImage" placeholder="图片或PDF文件" ng-disabled="!prodInfo.$editing"></span>
+                            <a ng-click="showImg()" ng-if="prodInfo.attach">{{prodInfo.attach.name}}</a>
+                            <i>提示：图片尺寸在750*750像素以上，图片请避免全文字</i>
+                            <div class="well margin-b-0" ng-show="previewShow && isShow">
+                                <div ng-show="previewShow">
+                                    <img ng-show="previewShow" alt="营业执照复印件" src="{{imgPreview}}"
+                                         width="100px" height="100px">
+                                    <div>
+                                        &nbsp;&nbsp;<span class="text-primary"><b>{{imgPreviewName}}</b></span>
+                                    </div>
+                                </div>
+                                <div ng-show="pdfShow">
+                                    <img ng-show="pdfShow" src="static/img/all/pdf.jpg" alt="PDF文件"
+                                         width="30px" height="40px"> &nbsp;&nbsp;<span
+                                        class="text-primary"><b>{{imgPreviewName}}</b></span>
+                                </div>
+                                <div ng-show="noneFileShow">
+                                    <span class="text-warning">请上传清晰照片的图片文件或PDF文件</span>
+                                </div>
+                                <div class="hover-show">
+                                    <em class="delete" title="删除" ng-click="clearfile()"><em class="fa fa-trash"></em></em>
+                                    <a ng-href="" target="_blank"><em class="fa fa-search"></em>查看</a>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </dd>
-				<dd ng-show="previewShow && isShow">
+				<!--<dd ng-show="previewShow && isShow">
 					<div class="fl">&nbsp;</div>
 					<div class="fr">
-						<div class="well margin-b-0">
-							<div ng-show="previewShow">
-								<img ng-show="previewShow" alt="营业执照复印件" src="{{imgPreview}}"
-									width="200px" height="100px">
-								<div>
-									&nbsp;&nbsp;<span class="text-primary"><b>{{imgPreviewName}}</b></span>
-								</div>
-							</div>
-							<div ng-show="pdfShow">
-								<img ng-show="pdfShow" src="static/img/all/pdf.jpg" alt="PDF文件"
-									width="30px" height="40px"> &nbsp;&nbsp;<span
-									class="text-primary"><b>{{imgPreviewName}}</b></span>
-							</div>
-							<div ng-show="noneFileShow">
-								<span class="text-warning">请上传清晰照片的图片文件或PDF文件</span>
-							</div>
-						</div>
+
 						<a ng-click="clearfile()">删除</a>
 					</div>
-				</dd>
+				</dd>-->
 					<!--      <dd class="text-detail">
                     <div class="fl">详细描述：</div>
                     <div class="fr">
@@ -318,5 +333,15 @@
         </div>
 	</div>
 </div>
+<!--查看大图-->
+<div id="image-box" style="display: none">
+    <div class="x-close-wrap" title="关闭">
+        <a href="javascript:void(0);">&times;</a>
+    </div>
+    <div class="x-floating-wrap"></div>
+    <div class="x-floating">
+        <img/>
+    </div>
+</div>
 </body>
 </html>