|
|
@@ -0,0 +1,424 @@
|
|
|
+<style>
|
|
|
+ .product-file{
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ min-height: 505px;
|
|
|
+ background: #fff;
|
|
|
+ padding-top: 16px;
|
|
|
+ border: #e8e8e8 1px solid;
|
|
|
+ }
|
|
|
+ .product-file ul{
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 16px;
|
|
|
+ }
|
|
|
+ .product-file ul li{
|
|
|
+ width: 78px;
|
|
|
+ float: left;
|
|
|
+ margin: 0 15px;
|
|
|
+ }
|
|
|
+ .product-file ul li:first-child{
|
|
|
+ margin-left: 25px;
|
|
|
+ }
|
|
|
+ .product-file ul li a{
|
|
|
+ display: inline-block;
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ position: relative;
|
|
|
+ background: #f5f8fe;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ border-radius: 1px;
|
|
|
+ }
|
|
|
+ .product-file ul li a.active,.product-file ul li:hover a{
|
|
|
+ background: #5078cb;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .product-file ul li a.active:before,.product-file ul li:hover a:before{
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ display: inline-block;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-left: 5px solid transparent;
|
|
|
+ border-right: 5px solid transparent;
|
|
|
+ border-bottom: 5px solid #fff;
|
|
|
+ bottom: -1px;
|
|
|
+ left: 33px;
|
|
|
+ }
|
|
|
+ .product-file .content{
|
|
|
+ width: 98%;
|
|
|
+ border: #5078cb 1px solid;
|
|
|
+ padding: 15px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .product-file .content .batch{
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .product-file .content .batch .row{
|
|
|
+ padding: 0 15px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .product-file .content .batch .row:first-child{
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 45px;
|
|
|
+ }
|
|
|
+ .product-file .content .batch .row span.dot{
|
|
|
+ display: inline-block;
|
|
|
+ width: 22px;
|
|
|
+ height: 19px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .product-file .content .batch .row span em{
|
|
|
+ display: inline-block;
|
|
|
+ width: 14px;
|
|
|
+ height: 19px;
|
|
|
+ background: #ff8522;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ position: relative;
|
|
|
+ line-height: 19px;
|
|
|
+ }
|
|
|
+ .product-file .content .batch .row span em:before{
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ display: inline-block;
|
|
|
+ border-width: 9px 0 10px 10px;
|
|
|
+ border-style: solid;
|
|
|
+ border-color: transparent transparent transparent #ff8522;
|
|
|
+ right: -10px;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ .product-file .content .batch .row .btn01{
|
|
|
+ display: inline-block;
|
|
|
+ width: 70px;
|
|
|
+ height: 22px;
|
|
|
+ line-height: 22px;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ background: #ff8522;
|
|
|
+ border-radius: 2px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .import-input span input:hover {
|
|
|
+ cursor:pointer;
|
|
|
+ }
|
|
|
+ .product-file .content .batch .row a.load-btn{
|
|
|
+ color: #5078cb;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ .product-file .import-area{
|
|
|
+ width: 940px;
|
|
|
+ margin-left: 22px;
|
|
|
+ background: #f5f8fe;
|
|
|
+ padding-top: 10px !important;
|
|
|
+ padding-bottom: 10px !important;
|
|
|
+ }
|
|
|
+ .product-file .import-area p{
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ /*checked*/
|
|
|
+ .import-area .check-act{
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+
|
|
|
+ .import-area .check-act:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .import-area .check-act:last-child{
|
|
|
+ margin-left: 45px;
|
|
|
+ }
|
|
|
+ .import-area .check-act input{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .import-area .check-act label{
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ margin-right: 5px;
|
|
|
+ display: inline-block;
|
|
|
+ background: url(static/img/icon/check-rule.png) no-repeat;
|
|
|
+ position: relative;
|
|
|
+ top: 2px;
|
|
|
+ }
|
|
|
+ .import-area .check-act label{
|
|
|
+ background-position: 0 0;
|
|
|
+ }
|
|
|
+ .import-area input:checked + label{
|
|
|
+ background-position: -15px 0;
|
|
|
+ }
|
|
|
+ .import-input{
|
|
|
+ width: 100%;
|
|
|
+ margin: 15px 0 0 0;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ }
|
|
|
+ .import-input span{
|
|
|
+ width: 460px;
|
|
|
+ margin: 0 auto;
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .import-input span #upload_text{
|
|
|
+ width: 265px;
|
|
|
+ height: 26px;
|
|
|
+ border: #e2e2e2 1px solid;
|
|
|
+ padding-left: 10px;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+ .import-input span .upload01{
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ height: 26px;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ .import-input span a.btn01{
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ .import-input a.btn01{
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ .blue-bg{
|
|
|
+ background: #5078cb !important;
|
|
|
+ }
|
|
|
+ /*单个导入*/
|
|
|
+ .no-batch{
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ min-height: 200px;
|
|
|
+ }
|
|
|
+ .no-batch .row{
|
|
|
+ background: #f5f8fe;
|
|
|
+ padding: 20px 15px 30px;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .no-batch .row .row-line{
|
|
|
+ float: left;
|
|
|
+ line-height: 26px;
|
|
|
+ margin-right: 18px;
|
|
|
+ }
|
|
|
+ .no-batch .row .row-line span.title{
|
|
|
+ font-size: 14px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .no-batch .row .row-line span.title em{
|
|
|
+ color: #f00;
|
|
|
+ margin-right: 3px;
|
|
|
+ position: relative;
|
|
|
+ top: 2px;
|
|
|
+ }
|
|
|
+ .no-batch .row .row-line input{
|
|
|
+ width: 168px;
|
|
|
+ height: 26px;
|
|
|
+ line-height: 26px;
|
|
|
+ border: #e2e2e2 1px solid;
|
|
|
+ border-radius: 0;
|
|
|
+ background: #fff;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ .no-batch .row .row-line:last-child{
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .no-batch .row .row-line:last-child input{
|
|
|
+ margin-right: 0;
|
|
|
+ width: 128px;
|
|
|
+ }
|
|
|
+ /*操作取消保存*/
|
|
|
+ .deal-btn{
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 80px;
|
|
|
+ }
|
|
|
+ .deal-btn a{
|
|
|
+ width: 70px;
|
|
|
+ height: 30px;
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 30px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .deal-btn a.off{
|
|
|
+ background: #cdcccc;
|
|
|
+ color: #666;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ .deal-btn a.save-other{
|
|
|
+ width: 100px;
|
|
|
+ background: #ff8522;
|
|
|
+ color: #fff;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ .deal-btn a.ok{
|
|
|
+ background: #5078cb;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .deal-btn a:hover{
|
|
|
+ background: #337ab7;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ /*防误删*/
|
|
|
+ .com-del-box{
|
|
|
+ position: fixed;
|
|
|
+ z-index: 22;
|
|
|
+ height: 152px;
|
|
|
+ opacity: 1;
|
|
|
+ background-color: white;
|
|
|
+ width: 310px;
|
|
|
+ -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
|
|
|
+ box-shadow: 0 5px 15px rgba(0,0,0,.5);
|
|
|
+ margin: -155px 0 0 -75px;
|
|
|
+ top: 55%;
|
|
|
+ left: 50%;
|
|
|
+ }
|
|
|
+ .com-del-box .title{
|
|
|
+ height: 30px;
|
|
|
+ background-color: #5078cb;
|
|
|
+ text-align: right;
|
|
|
+ padding-right: 15px;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+ .com-del-box .title a{
|
|
|
+ color: white;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ .com-del-box .content{
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .com-del-box .content p{
|
|
|
+ font-size: 14px;
|
|
|
+ padding-top: 10px;
|
|
|
+ }
|
|
|
+ .com-del-box .content p:first-child{
|
|
|
+ padding-top: 25px;
|
|
|
+ }
|
|
|
+ .com-del-box .content p:nth-child(2),.com-del-box .content p:nth-child(3){
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .com-del-box .content p em:first-child,.com-del-box .content p:nth-child(3) a,.com-del-box .content p:nth-child(3) em{
|
|
|
+ color: #5078cb;
|
|
|
+ }
|
|
|
+ .com-del-box .content p:nth-child(2) em{
|
|
|
+ color: #f00;
|
|
|
+ }
|
|
|
+ .com-del-box .content p i{
|
|
|
+ color: #5078cb;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .com-del-box .content div{
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<div class="user_right fr">
|
|
|
+ <!--产品导入-->
|
|
|
+ <div class="pro_management device">
|
|
|
+ <div class="com_tab">
|
|
|
+ <ul class="fl" style="width: 100%">
|
|
|
+ <li ng-class="{'active': $$productOn.leadIn == 'bathOn'}"><a href="javascript:void(0)">新产品建档</a></li>
|
|
|
+ <li ui-sref="product_repository"><a href="javascript:void(0)">产品库</a></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--产品建档-->
|
|
|
+ <div class="product-file">
|
|
|
+ <ul class="file-tab">
|
|
|
+ <li><a ng-class="{'active': style == 'batch'}" ng-click="checkTab('batch')">批量建档</a></li>
|
|
|
+ <li><a ng-class="{'active': style == 'single'}" ng-click="checkTab('single')">单个建档</a></li>
|
|
|
+ </ul>
|
|
|
+ <div class="content" ng-controller="productOnCtrl">
|
|
|
+ <!--批量-->
|
|
|
+ <div class="batch" ng-if="style == 'batch'">
|
|
|
+ <div class="row">
|
|
|
+ <span class="dot"><em>1</em></span>
|
|
|
+ 下载Excel导入模板，在模板上编辑产品信息
|
|
|
+ <a class="btn01" style="margin-left: 35px;" ng-click="download()" title="下载模板">下载模板</a>
|
|
|
+ <a class="load-btn" ng-click="showImg()" title="查看表格示例">查看表格示例</a>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <span class="dot"><em>2</em></span>导入数据
|
|
|
+ </div>
|
|
|
+ <div class="import-area row">
|
|
|
+ <p>
|
|
|
+ 产品已存在时：
|
|
|
+ <label class="check-act">
|
|
|
+ <input type="radio" id="1" name="radio2" checked/>
|
|
|
+ <label for="1"></label>
|
|
|
+ 不导入
|
|
|
+ </label>
|
|
|
+ <label class="check-act">
|
|
|
+ <input type="radio" id="2" name="radio2"/>
|
|
|
+ <label for="2"></label>
|
|
|
+ 更新产品信息
|
|
|
+ </label>
|
|
|
+ </p>
|
|
|
+ <div class="import-input">
|
|
|
+ <span>
|
|
|
+ <input type="text" name="txt" id="upload_text" />
|
|
|
+ <a class="btn01" ng-click="">选择文件</a>
|
|
|
+ <input type="file" onchange="upload_text.value=this.value" class="upload01" />
|
|
|
+ <a class="btn01 blue-bg" ng-click="">导入</a>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--单个-->
|
|
|
+ <div class="no-batch" ng-if="style == 'single'">
|
|
|
+ <div class="row">
|
|
|
+ <div class="row-line">
|
|
|
+ <span class="title">产品名称（类目）</span>
|
|
|
+ <input type="text" class="form-control" />
|
|
|
+ </div>
|
|
|
+ <div class="row-line">
|
|
|
+ <span class="title"><em>*</em>型号</span>
|
|
|
+ <input type="text" class="form-control" />
|
|
|
+ </div>
|
|
|
+ <div class="row-line">
|
|
|
+ <span class="title"><em>*</em>品牌</span>
|
|
|
+ <input type="text" class="form-control" />
|
|
|
+ </div>
|
|
|
+ <div class="row-line">
|
|
|
+ <span class="title">封装</span>
|
|
|
+ <input type="text" class="form-control" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--操作取消保存-->
|
|
|
+ <div class="deal-btn">
|
|
|
+ <a ng-click="" class="off">取消</a>
|
|
|
+ <a ng-click="" class="ok">保存</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<!--提示内容-->
|
|
|
+<div class="com-del-box" style="display: none">
|
|
|
+ <div class="title">
|
|
|
+ <a ng-click=""><i class="fa fa-close fa-lg"></i></a>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <p><i class="fa fa-exclamation-circle"></i>共导入 <em>1000</em> 个，其中<em>600</em> 个建档成功!</p>
|
|
|
+ <p>（另有<em>20</em>个已存在，<em>380</em>个必填项缺失）</p>
|
|
|
+ <p>正在为您跳转 <a>产品库 >></a> <em>5秒</em> </p>
|
|
|
+ <!--<div><a ng-click="">取消</a><a ng-click="">确认</a></div>-->
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<!--查看大图-->
|
|
|
+<div id="image-box" style="display: none;">
|
|
|
+ <div class="x-floating-wrap"></div>
|
|
|
+ <div class="x-floating">
|
|
|
+ <div id="item-content">
|
|
|
+ <div class="x-close-wrap"><a href="javascript:void(0);">×</a></div>
|
|
|
+ <div class="img"><img src="static/img/product/excel_product_import.png"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
ouxq