BOM清单详情静态页

src/main/webapp/resources/css/commonComponent.css

@@ -215,6 +215,8 @@ i.fa-minus-circle{
 .com-check-box,
 .com-check-box label {
     margin-bottom: 0;
+    font-weight: normal;
+    user-select: none;
 }
 .com-check-box input {
     display: none!important;

src/main/webapp/resources/js/usercenter/app.js

@@ -436,6 +436,11 @@ define([ 'angularAMD', 'ui.router', 'ui-bootstrap', 'ngLocal', 'ngTable', 'commo
 			templateUrl: 'static/view/usercenter/forstore/bomDetail.html',
 			controller: 'bomDetailCtrl',
 			controllerUrl: 'app/controllers/forstore/bom_detail_ctrl'
+		})).state('buyerBomListDetail', angularAMD.route({
+			url: '/bomListDetail/:id',
+			templateUrl: 'static/view/usercenter/forstore/bomListDetail.html',
+			controller: 'bomListDetailCtrl',
+			controllerUrl: 'app/controllers/forstore/bomListDetailCtrl'
 		}));
 	}]);
 

src/main/webapp/resources/js/usercenter/controllers/forstore/bomListDetailCtrl.js

@@ -0,0 +1,21 @@
+/**
+ *  支付中心控制器
+ */
+define(['app/app'], function(app) {
+    'use strict';
+    app.register.controller('bomListDetailCtrl', ['$scope', '$rootScope', 'ngTableParams', 'BaseService', 'toaster', 'Authority', '$stateParams', function($scope, $rootScope, ngTableParams, BaseService, toaster, Authority, $stateParams) {
+        document.title = '我的求购-优软商城';
+        // 是否编辑物料中
+        $scope.editBom = false;
+        // 是否编辑询价
+        $scope.editSeek = false;
+
+        $scope.setEditBom = function (editBom) {
+            $scope.editBom = editBom;
+        }
+
+        $scope.setEditSeek = function (editSeek) {
+            $scope.editSeek = editSeek;
+        }
+    }]);
+});

src/main/webapp/resources/js/usercenter/controllers/forstore/seek_purchase_ctrl.js

@@ -9,12 +9,16 @@ define(['app/app', 'clipboard', 'QRCode'], function (app, clipboard, QRCode) {
         'ngTableParams', 'Order', 'SessionService', '$filter', '$upload', '$stateParams', 'Search', '$http', 'Authority',
         function ($scope, $location, $rootScope, seekPurchase, toaster, BaseService,
             ngTableParams, Order, SessionService, $filter, $upload, $stateParams, Search, $http, Authority) {
-          $rootScope.active = 'seek_purchase';
-          document.title = '我的求购-优软商城';
-          $scope.activeType = $stateParams.type ? $stateParams.type :'seekManage';
-          $scope.toogleType = function (type) {
-            clearSeekStatus();
-            $scope.activeType = type;
+            $rootScope.active = 'seek_purchase';
+            document.title = '我的求购-优软商城';
+            $scope.activeType = $stateParams.type ? $stateParams.type :'seekManage';
+            $scope.bomTab = 'bomList';
+            $scope.toogleBomTab = function (tab) {
+                $scope.bomTab = tab;
+            }
+            $scope.toogleType = function (type) {
+                clearSeekStatus();
+                $scope.activeType = type;
           }
           $rootScope.ShaRETimer = {}
 
@@ -1132,7 +1136,13 @@ define(['app/app', 'clipboard', 'QRCode'], function (app, clipboard, QRCode) {
                       toaster.pop('error', data.msg || '系统错误');
                       return;
                   } else {
-                      window.location.href = 'user#/bomDetail/' + id;
+                      if ($scope.bomTab === 'seekRecord') {
+                          // 求购记录
+                          window.location.href = 'user#/bomDetail/' + id;
+                      } else {
+                          // BOM清单
+                          window.location.href = 'user#/bomListDetail/' + id;
+                      }
                   }
               });
           }

src/main/webapp/resources/view/usercenter/forstore/bomListDetail.html

@@ -0,0 +1,282 @@
+<style>
+    .bom-list-detail {
+        font-size: 14px;
+        background: #fff;
+        padding: 12px;
+    }
+    .bom-list-detail .remind {
+        color: #fd7748;
+    }
+    .bom-list-detail .back {
+        color: #4290f7;
+    }
+    .bom-list-detail .operate {
+        margin-top: 28px;
+        margin-left: 27px;
+    }
+    .bom-list-detail .operate .operate-btn {
+        background: #89aefa;
+        border-radius: 2px;
+        color: #fff;
+        padding: 3px 17px;
+        border: 1px solid #89aefa;
+        font-size: 14px;
+        margin-right: 5px;
+    }
+    .bom-list-detail .operate .fr .sure-btn {
+        width: 64px;
+        height: 28px;
+        background: #3c7cf5;
+        color: #fff;
+        border-radius: 2px;
+        border: 1px solid #3c7cf5;
+        font-size: 14px;
+    }
+    .bom-list-detail .operate .fr .cancel-btn {
+        background: #c8c6c6;
+        border-color: #c8c6c6;
+        margin-left: 5px;
+    }
+    .bom-list-detail .operate .operate-btn:first-child {
+        margin-left: 10px;
+    }
+    .bom-list-detail .bom-info {
+        margin: 14px 0 0 0;
+        border: 1px dashed #fd7748;
+        padding: 5px 30px;
+        line-height: 50px;
+    }
+    .bom-list-detail .bom-info .info-list li {
+        font-size: 14px;
+        width: 33%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        vertical-align: middle;
+        padding: 0;
+    }
+    .bom-list-detail .bom-info .info-list .spec {
+        width: 100%;
+    }
+    .bom-list-detail .bom-info .info-list.seek .spec {
+        width: 33%;
+    }
+    .bom-list-detail .bom-info .info-list li b {
+        font-weight: bold;
+    }
+    .bom-list-detail .bom-info .info-list li .bom-input {
+        height: 30px;
+        border-radius: 2px;
+        border: 1px solid #dadada;
+        padding: 0 10px;
+        font-size: 14px;
+    }
+    .bom-list-detail .bom-info .info-list li:nth-child(1) input {
+        width: 218px;
+    }
+    .bom-list-detail .bom-info .info-list li:nth-child(4) input {
+        width: 253px;
+    }
+    .bom-list-detail .bom-info .info-list .expand {
+        color: #666;
+    }
+    .bom-list-detail .bom-info .info-list .amount input {
+        width: 126px;
+    }
+    .bom-list-detail .bom-info .info-list .date input {
+        width: 146px;
+    }
+    .bom-list-detail .bom-list-table {
+        width: 100%;
+        margin-top: 10px;
+    }
+    .bom-list-detail .bom-list-table thead tr {
+        font-size: 14px;
+        height: 40px;
+        line-height: 40px;
+        background: #89aefa;
+        color: #fff;
+    }
+    .bom-list-detail .bom-list-table thead tr th {
+        font-weight: normal;
+        text-align: center;
+    }
+    .bom-list-detail .bom-list-table thead tr th .com-check-box {
+        position: relative;
+    }
+    .bom-list-detail .bom-list-table thead tr th .com-check-box .check-all {
+        position: absolute;
+        left: 17px;
+        width: 28px;
+        top: 0;
+        display: block;
+    }
+    .bom-list-detail .bom-list-table tbody tr {
+        height: 107px;
+        border-bottom: 1px solid #dae5fd;
+        border-left: 1px solid #dae5fd;
+        border-right: 1px solid #dae5fd;
+    }
+    .bom-list-detail .bom-list-table tbody tr td {
+        font-size: 14px;
+        padding: 0 10px;
+    }
+    .bom-list-detail .bom-list-table tbody tr td:nth-child(1) {
+        text-align: center;
+    }
+    .bom-list-detail .must {
+        color: #ff0000;
+    }
+    .bom-list-detail .bom-list-table tbody tr td .content-line .inline-block {
+        display: inline-block;
+        vertical-align: middle;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    .bom-list-detail .bom-list-table tbody tr td.base-info {
+        padding-left: 20px;
+    }
+    .bom-list-detail .bom-list-table tbody tr td.base-info .content-line {
+        margin-bottom: 10px;
+        height: 30px;
+        line-height: 30px;
+    }
+    .bom-list-detail .bom-list-table tbody tr td.base-info .content-line:last-child {
+        margin-bottom: 0;
+    }
+    .bom-list-detail .bom-list-table tbody tr td.base-info .content-line .inline-block{
+        width: 224px;
+    }
+    .bom-list-detail .bom-list-table tbody tr td.pcs-line .content-line .inline-block {
+        width: 134px;
+    }
+    .bom-list-detail .bom-list-table tbody tr td.base-info .content-line .title {
+        width: 80px;
+        text-align: right;
+    }
+    .bom-list-detail .bom-list-table tbody tr td.base-info input {
+        width: 100%;
+        height: 30px;
+        border-radius: 2px;
+        border: 1px solid #dadada;
+        font-size: 14px;
+        padding: 0 10px;
+        text-align: center;
+    }
+</style>
+<div class="user_right fr bom-list-detail">
+    <a class="back" href="user#/seekPurchase?type=bomManage">&lt;返回BOM列表</a>
+    <div class="operate">
+        操作：
+        <button class="operate-btn" ng-click="setEditSeek(!editSeek)">发布求购</button>
+        <button class="operate-btn" ng-click="setEditBom(!editBom)">编辑BOM</button>
+        <button class="operate-btn">删除物料</button>
+        <button class="operate-btn">删除本BOM</button>
+        <div class="fr">
+            <button class="sure-btn">确认</button>
+            <button class="sure-btn cancel-btn">取消</button>
+        </div>
+    </div>
+    <div class="bom-info">
+        <ul class="list-inline info-list" ng-class="{'seek': editSeek}">
+            <li>
+                <b>BOM名称：
+                    <span ng-show="!editBom">bom求购模板</span>
+                    <input class="bom-input" ng-show="editBom" type="text">
+                </b>
+            </li>
+            <li><b>本单共<span class="remind">112</span>个产品</b></li>
+            <li>创建时间：2017-12-12 11:11:11</li>
+            <li class="spec">规格：
+                <span ng-show="!editBom">123123123</span>
+                <input class="bom-input" ng-show="editBom" type="text">
+            </li>
+            <li class="expand amount" ng-if="editSeek">
+                <i class="must">*</i>采购数量(套)：
+                <input class="bom-input" type="text">
+            </li>
+            <li class="expand date" ng-if="editSeek">
+                <i class="must">*</i>截止时间：
+                <input class="bom-input" type="text">
+            </li>
+        </ul>
+    </div>
+    <table class="bom-list-table">
+        <thead>
+            <tr>
+                <th>
+                    <label class="com-check-box">
+                        <input type="checkbox" id="checkAll">
+                        <label for="checkAll"></label>
+                        <span class="check-all">全选</span>
+                    </label>
+                </th>
+                <th>品牌/物料名称</th>
+                <th>型号/规格</th>
+                <th>单位用量(pcs)</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>
+                    <label class="com-check-box">
+                        <input type="checkbox" id="1">
+                        <label for="1"></label>
+                    </label>
+                </td>
+                <td class="base-info">
+                    <div class="content-line">
+                        <div class="inline-block title">
+                            <i class="must">*</i>品牌：
+                        </div>
+                        <div class="inline-block">
+                            <span ng-show="!editBom">123123123123</span>
+                            <input ng-show="editBom" ng-shw="editBom" type="text">
+                        </div>
+                    </div>
+                    <div class="content-line">
+                        <div class="inline-block title">
+                            <i class="must">*</i>物料名称：
+                        </div>
+                        <div class="inline-block">
+                            <span ng-show="!editBom">123123123123</span>
+                            <input ng-show="editBom" type="text">
+                        </div>
+                    </div>
+                </td>
+                <td class="base-info">
+                    <div class="content-line">
+                        <div class="inline-block title">
+                            <i class="must">*</i>型号：
+                        </div>
+                        <div class="inline-block">
+                            <span ng-show="!editBom">123123123123</span>
+                            <input ng-show="editBom" type="text">
+                        </div>
+                    </div>
+                    <div class="content-line">
+                        <div class="inline-block title">
+                            <i class="must">*</i>规格：
+                        </div>
+                        <div class="inline-block">
+                            <span ng-show="!editBom">123123123123</span>
+                            <input ng-show="editBom" type="text">
+                        </div>
+                    </div>
+                </td>
+                <td class="base-info pcs-line">
+                    <div class="content-line">
+                        <div class="inline-block title">
+                            单位用量：
+                        </div>
+                        <div class="inline-block">
+                            <span ng-show="!editBom">123123123123</span>
+                            <input ng-show="editBom" type="text">
+                        </div>
+                    </div>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>

src/main/webapp/resources/view/usercenter/forstore/seekPurchase.html

@@ -945,6 +945,9 @@
     .check-filter .radio-block .com-check-radio:last-child {
         margin-right: 0;
     }
+    .remind-text {
+        color: #fd7748;
+    }
 </style>
 <div class="user_right fr seek-purchase">
     <!--求购询价-->
@@ -964,6 +967,14 @@
             </ul>
         </div>
     </div>
+    <div class="oder" style="margin-top: 10px;" ng-show="activeType == 'bomManage'">
+        <div class="oder01 oder012">
+            <ul>
+                <li ng-class="{'active': bomTab == 'bomList'}"><a href="javascript:void(0)" ng-click="toogleBomTab('bomList')">BOM清单</a></li>
+                <li ng-class="{'active': bomTab == 'seekRecord'}"><a href="javascript:void(0)" ng-click="toogleBomTab('seekRecord')">求购记录</a></li>
+            </ul>
+        </div>
+    </div>
     <div class="seek-purchase-content" ng-show="activeType == 'seekManage'" style="margin-top:0px">
         <div class="publish-purchase">
             <div class="fl">
@@ -1528,7 +1539,7 @@
                         <!--<div>共 <span class="blue-text" ng-bind="bom.amount || 0"></span> 个产品&lt;!&ndash;，<span class="red-text" ng-bind="bom.offerAmount || 0">10</span> 个有报价，<span class="red-text" ng-bind="bom.goodsAmount || 0">7</span> 个有现货&ndash;&gt;</div>-->
                         <!--<div ng-bind="bom.releaseDate | date:'yyyy-MM-dd HH:mm:ss'"></div>-->
                     </div>
-                    <div>
+                    <div ng-if="bomTab == 'seekRecord'">
                         <div class="progress">
                             <div class="left">{{bom.quotedAmount || 0}}</div>
                             <div class="progressBtn" ng-style="{width: bom.quotedAmount / bom.amount * '100' + '%'}"></div>
@@ -1536,6 +1547,9 @@
                         </div>
                         <p>本单共<span>{{bom.amount}}</span>个产品，<span>{{bom.quotedAmount || 0}}</span>个已报价</p>
                     </div>
+                    <div ng-if="bomTab == 'bomList'">
+                        <p>本单共<span class="remind-text">112</span>个产品</p>
+                    </div>
                     <a class="fr">查看详情</a>
                 </td>
             </tr>