BOM确认页

assets/scss/commonComponent.css

@@ -447,184 +447,6 @@ div.tip{
     background: #5078cb;
 }
 /*-------------------------下拉选框 end--------------------*/
-/*-------------------------分页 start--------------------*/
-/*主要分页table(使用tableParams即可)*/
-
-/*主要分页非table代码示例*/
-/*
-<div class="ng-cloak ng-table-pager com-sup-pager">
-    <ul class="pagination ng-table-pagination">
-        <li ng-class="{'disabled': !page.active && !page.current, 'active': page.current}" ng-repeat="page in pages" ng-switch="page.type">
-            <a ng-switch-when="prev" ng-click="setPage(page.type, -1)" href="">&laquo;</a>
-            <a ng-switch-when="first" ng-click="setPage(page.type, page.number)" href=""><span ng-bind="page.number"></span></a>
-            <a ng-switch-when="page" ng-click="setPage(page.type, page.number)" href=""><span ng-bind="page.number"></span></a>
-            <a ng-switch-when="more" ng-click="setPage(page.type, -1)" href="">&#8230;</a>
-            <a ng-switch-when="last" ng-click="setPage(page.type, page.number)" href=""><span ng-bind="page.number"></span></a>
-            <a ng-switch-when="next" ng-click="setPage(page.type, -1)" href="">&raquo;</a>
-        </li>
-    </ul>
-    <div class="page-go-block">
-        <input class="page-number" type="text" ng-model="param.currentPage" ng-keydown="listenEnter()"/>
-        <a class="page-a" ng-click="setPage('page', param.currentPage)">GO</a>
-    </div>
-</div>
-*/
-.com-sup-pager .pagination{
-    margin-bottom: 0;
-}
-.com-sup-pager .pagination.ng-table-pagination > li > a > span {
-    height: 17px;
-    line-height: 17px;
-}
-.com-sup-pager .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover{
-    z-index: 2;
-    color: #fff;
-    cursor: default;
-    background-color: #5078cb;
-    border-color: #5078cb;
-}
-.com-sup-pager .pagination.ng-table-pagination > li > a{
-    font-size: 12px;
-}
-.com-sup-pager.ng-table-pager  input.page-number {
-    vertical-align: inherit;
-    display: inline-block;
-    width: 40px;
-    height: 31px;
-    padding: 6px 6px;
-    font-size: 14px;
-    line-height: 1.42857143;
-    color: #9B9792;
-    text-align: center;
-    background-color: #F6F5F4;
-    background-image: none;
-    border: 1px solid #ccc;
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
-    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
-}
-.com-sup-pager.ng-table-pager{
-    margin-right: 0 !important;
-    background: #fff;
-}
-.com-sup-pager.ng-table-pager a.page-a {
-    color: #fff;
-    cursor: pointer;
-    background-color: #5078cb;
-    border-color: #5078cb;
-    padding: 7px 6px;
-    font-size: 14px;
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
-    text-decoration: none;
-    height: 31px;
-}
-
-.com-sup-pager.ng-table-pager div.page-go-block {
-    float: right;
-    margin-left: 20px;
-    font-size: 0px;
-    height: 31px;
-    line-height: 31px;
-}
-
-/*次要分页代码示例*/
-/*
- <div class="ng-cloak ng-table-pager com-sub-pager text-center">
-        <ul class="pagination ng-table-pagination">
-            <li ng-class="{'disabled': !page.active && !page.current, 'active': params.page == page.number}" ng-repeat="page in pages" ng-switch="page.type">
-                <a ng-switch-when="prev" ng-click="setPage(page.type, -1)">&laquo;</a>
-                <a ng-switch-when="first" ng-click="setPage(page.type, page.number)"><span ng-bind="page.number"></span></a>
-                <a ng-switch-when="page" ng-click="setPage(page.type, page.number)"><span ng-bind="page.number"></span></a>
-                <a ng-switch-when="more" ng-click="setPage(page.type, -1)">&#8230;</a>
-                <a ng-switch-when="last" ng-click="setPage(page.type, page.number)"><span ng-bind="page.number"></span></a>
-                <a ng-switch-when="next" ng-click="setPage(page.type, -1)">&raquo;</a>
-            </li>
-        </ul>
-        <div class="page-go-block" ng-if="rolesData.length>6">
-            <input class="page-number" type="text" ng-model="params.currentPage" ng-keydown="listenEnter()"/>
-            <a class="page-a" ng-click="setPage('page', params.currentPage)">GO</a>
-        </div>
-    </div>
-*/
-.com-sub-pager .ng-table-pagination a {
-    border: none;
-    font-size: 12px;
-    cursor: pointer;
-}
-.com-sub-pager .pagination li:first-child a, .com-sub-pager .pagination li:last-child a{
-    font-size: 20px;
-}
-.com-sub-pager ul.pagination.ng-table-pagination > li > a > span {
-    height: 17px;
-    line-height: 17px;
-    color: #666;
-}
-.com-sub-pager.ng-table-pager {
-    background: #f4f4f4;
-    margin: 0!important;
-    padding-right: 29px;
-}
-.com-sub-pager.ng-table-pager  input.page-number {
-    vertical-align: inherit;
-    display: inline-block;
-    width: 37px;
-    height: 28px;
-    padding: 6px 6px;
-    font-size: 12px;
-    line-height: 1.42857143;
-    color: #9B9792;
-    text-align: center;
-    background-color: #F6F5F4;
-    background-image: none;
-    border: 1px solid #ccc;
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
-    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
-}
-
-.com-sub-pager.ng-table-pager a.page-a {
-    color: #fff;
-    cursor: pointer;
-    padding: 5.55px 6px;
-    font-size: 12px;
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
-    text-decoration: none;
-    height: 31px;
-}
-
-.com-sub-pager.ng-table-pager .page-go-block {
-    float: right;
-    font-size: 0px;
-    height: 31px;
-    margin-top: 20px;
-    line-height: 31px;
-}
-.com-sub-pager.ng-table-pager .ng-table-pagination{
-    text-align: center;
-    max-width: 460px;
-    margin: 0;
-}
-.com-sub-pager.ng-table-pager .ng-table-pagination a{
-    height: 29px;
-    line-height: 13px;
-}
-.com-sub-pager .pagination li.active a span{
-    color: white !important;
-}
-.com-sub-pager.ng-table-pager .ng-table-pagination li.active a {
-    background: none!important;
-}
-.com-sub-pager.ng-table-pager .ng-table-pagination li a {
-    background: none!important;
-}
-.com-sub-pager.ng-table-pager .ng-table-pagination li.active a span {
-    color: #5078cb!important;
-}
-/*-------------------------分页 end--------------------*/
 
 /*----------遮罩层 start-------------*/
 .modal-wrap {

components/applyPurchase/BatchPublish.vue

@@ -1,10 +1,15 @@
 <template>
   <div class="batch-publish">
-    <p>成功上传<b class="red-text">100</b>个<br/>另有<span class="red-text">100</span>个必填项缺失，请在当前页完善信息</p>
+    <p>成功上传<b class="red-text">{{bomNumber.successImport || 0}}</b>个<br/>另有<span class="red-text">{{bomNumber.nullField || 0}}</span>个必填项缺失，请在当前页完善信息</p>
     <table>
       <thead>
         <tr>
-          <th><input type="checkbox">全选</th>
+          <th>
+            <label class="com-check-box">
+              <input type="checkbox" id="all" @change="onCheck()" v-model="isCheckAll">
+              <label for="all"></label>
+            </label>全选
+          </th>
           <th><i class="red-text">*</i>型号</th>
           <th><i class="red-text">*</i>品牌</th>
           <th>采购数量</th>
@@ -15,16 +20,21 @@
           <th>操作</th>
         </tr>
       </thead>
-      <tbody>
-        <tr>
-        <td><input type="checkbox"></td>
-        <td>asdasd</td>
-        <td>asdasda</td>
-        <td>123</td>
-        <td class="blue-text">$123</td>
-        <td>asd</td>
-        <td>2016+</td>
-        <td>2012-12-12</td>
+      <tbody v-for="(item, index) in bomList.content">
+      <tr>
+        <td>
+          <label class="com-check-box">
+            <input type="checkbox" @change="onCheck(index)" v-model="item.checked" :id="index">
+            <label :for="index"></label>
+          </label>
+        </td>
+        <td>{{item.code}}</td>
+        <td>{{item.brand}}</td>
+        <td>{{item.amount || '-'}}</td>
+        <td class="blue-text">{{(item.currency === 'RMB' ? '¥' : '$') + item.unitPrice}}</td>
+        <td>{{item.encapsulation || '-'}}</td>
+        <td>{{item.produceDate}}</td>
+        <td>{{item.releaseDate | date}}</td>
         <td class="operate">
           <a class="modify-btn">修改</a>
           <a class="delete-btn">删除</a>
@@ -32,30 +42,110 @@
           <a class="cancel-btn">取消</a>-->
         </td>
       </tr>
-        <tr>
-          <td><input type="checkbox"></td>
-          <td>asdasd</td>
-          <td>asdasda</td>
-          <td>123</td>
-          <td class="blue-text">$123</td>
-          <td>asd</td>
-          <td>2016+</td>
-          <td>2012-12-12</td>
-          <td class="operate">
-            <a class="modify-btn">修改</a>
-            <a class="delete-btn">删除</a>
-            <!--<a class="submit-btn">确认</a>
-            <a class="cancel-btn">取消</a>-->
-          </td>
-        </tr>
       </tbody>
     </table>
-    <div>
+    <page :total="bomList.totalElements" :page-size="pageSize"
+          :current="nowPage" @childEvent="listenPage"></page>
+    <div class="submit-area">
       <a class="delete-btn">删除</a>
-      <a class="modify-btn">确认发布</a>
+      <a class="modify-btn" @click="submitBOM">确认发布</a>
+    </div>
+    <!--提示框-->
+    <div class="apply-del-box" v-if="showRemindBox">
+      <div class="title">
+        <a @click="showRemindBox = false"><i class="fa fa-close fa-lg"></i></a>
+      </div>
+      <div class="content">
+        <!--<p style="line-height: 20px;margin-top: 10px;padding:0 10px">非常抱歉，目前暂无此品牌！<br>若直接前往“品牌申请”，我们将为您先开通寄售功能，待申请通过后再提交开店申请。</p>-->
+        <!--<p style="line-height: 20px;">前往<a @click="goBrandApply()"  target="_blank" style="color: #5078CB">品牌申请&nbsp;<i class="fa fa-arrow-right"></i></a></p>-->
+        <p><img src="/images/applyPurchase/check.png" alt="">发布成功</p>
+        <p>其中<span>100</span>个求购型号有现货在售，您可前往“<span>买家中心-我的求购</span>”查询并直接购买</p>
+        <div>
+          <a @click="showRemindBox = false">我知道了</a>
+          <a href="/user#/seekPurchase">前往我的求购</a>
+        </div>
+      </div>
     </div>
   </div>
 </template>
+<script>
+  import Page from '~components/common/page/pageComponent.vue'
+  export default {
+    data () {
+      return {
+        pageSize: 10,
+        nowPage: 1,
+        isCheckAll: false,
+        showRemindBox: false
+      }
+    },
+    components: {
+      Page
+    },
+    computed: {
+      bomList () {
+        let list = this.$store.state.applyPurchase.bomMaterial.bomList.data
+        for (let i = 0; i < list.content.length; i++) {
+          list.content[i].checked = false
+        }
+        return list
+      },
+      bomNumber () {
+        return this.$store.state.applyPurchase.bomMaterial.bomNumber.data
+      }
+    },
+    filters: {
+      date: function (input) {
+        const d = new Date(input)
+        const year = d.getFullYear()
+        const monthTemp = d.getMonth() + 1
+        const month = monthTemp < 10 ? '0' + monthTemp : '' + monthTemp
+        const day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
+        return year + '-' + month + '-' + day
+      }
+    },
+    methods: {
+      listenPage: function (page) {
+        this.nowPage = page
+        this.$store.dispatch('applyPurchase/loadBOMMaterialList', {bomId: this.$route.params.id, page: this.nowPage, count: this.pageSize})
+      },
+      submitBOM: function () {
+        this.$http.post('/seek/confirmBom', {'bomId': Number(this.$route.params.id)})
+          .then(response => {
+            if (response.data.success) {
+              this.showRemindBox = true
+              this.listenPage(1)
+            } else {
+              this.$message.error('发布失败')
+            }
+          }, err => {
+            console.log(err)
+            this.$message.error('系统错误')
+          })
+      },
+      onCheck: function (index) {
+        if (!index) {
+          let isCheckedAll = true
+          for (let i = 0; i < this.bomList.content.length; i++) {
+            if (!this.bomList.content[i].checked) {
+              isCheckedAll = false
+              break
+            }
+          }
+          console.log(isCheckedAll)
+          this.setAllCheck(isCheckedAll)
+        } else {
+          console.log(this.bomList.content[index].checked)
+        }
+      },
+      setAllCheck: function (flag) {
+        for (let i = 0; i < this.bomList.content.length; i++) {
+          this.bomList.content[i].checked = flag
+        }
+      }
+    }
+  }
+</script>
 <style lang="scss" scoped>
   .batch-publish {
     margin: 0 auto;
@@ -63,7 +153,10 @@
     .red-text {
       color: #ff0000;
     }
-    p {
+    .blue-text {
+      color: #3c7cf5;
+    }
+    > p {
       margin: 59px 0 42px;
       font-size: 16px;
     }
@@ -78,9 +171,8 @@
             height: 50px;
             line-height: 50px;
             text-align: center;
-            input[type="checkbox"] {
-              position: relative;
-              top: 2px;
+            .com-check-box {
+              margin-right: 2px;
             }
             i {
               margin-right: 3px;
@@ -102,9 +194,6 @@
             background: #f3f3f3;
           }
           td {
-            .blue-text {
-              color: #3c7cf5;
-            }
             &.operate {
               a {
                 display: block;
@@ -139,9 +228,10 @@
       color: #fff;
       background: #3c7cf5;
     }
-    > div {
+    .submit-area {
       margin: 51px auto 60px;
       text-align: center;
+      clear: both;
       a {
         display: inline-block;
         width: 64px;
@@ -155,5 +245,72 @@
         }
       }
     }
+    .apply-del-box{
+      position: fixed;
+      z-index: 1000;
+      height: auto;
+      opacity: 1;
+      background-color: white;
+      width: 310px;
+      -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
+      -moz-box-shadow: 0 5px 15px rgba(0,0,0,.5);
+      -o-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: 43%;
+      .title{
+        height: 24px;
+        background-color: #007aff;
+        text-align: right;
+        padding-right: 15px;
+        line-height: 24px;
+        a{
+          color: white;
+          font-size: 12px;
+        }
+      }
+      .content{
+        width: 100%;
+        text-align: center;
+        margin: 0 auto;
+        p{
+          padding: 12px 31px;
+          margin: 0;
+          i{
+            color: #5078cb;
+            font-size: 16px;
+            margin-right: 10px;
+          }
+          span {
+            color: #007aff;
+          }
+          &:last-child {
+            font-size: 12px;
+          }
+        }
+        div{
+          width: 100%;
+          text-align: center;
+          margin: 0 auto 20px;
+          a{
+            padding: 0 19px;
+            height: 26px;
+            line-height: 26px;
+            display: inline-block;
+            text-align: center;
+            font-size: 14px;
+            color: #fff;
+            &:first-child{
+              background: #c8c6c6;
+              margin-right: 10px;
+            }
+            &:last-child{
+              background: #007aff;
+            }
+          }
+        }
+      }
+    }
   }
 </style>

components/applyPurchase/PublishApply.vue

@@ -102,7 +102,7 @@
       </table>
     </div>
     <!--提示框-->
-    <div class="com-del-box" v-if="showRemindBox">
+    <div class="apply-del-box" v-if="showRemindBox">
       <div class="title">
         <a @click="showRemindBox = false"><i class="fa fa-close fa-lg"></i></a>
       </div>
@@ -113,7 +113,7 @@
         <p>其中 <span>100</span>个求购型号有现货在售，您可前往“<span>买家中心-我的求购</span>”查询并直接购买</p>
         <div>
           <a @click="showRemindBox = false">我知道了</a>
-          <a href="javascript:void(0)">前往我的求购</a>
+          <a href="/user#/seekPurchase">前往我的求购</a>
         </div>
       </div>
     </div>
@@ -188,7 +188,7 @@
             this.$http.post('/seek/saveOneSeekPurchase', this.applyObj)
               .then(response => {
                 this.$message.success('发布成功')
-  //              this.showRemindBox = true
+//                this.showRemindBox = true
                 this.emptyForm()
                 this.$store.dispatch('applyPurchase/loadPurchaseManList', {page: 1, count: 10})
               }, error => {
@@ -500,7 +500,7 @@
         }
       }
     }
-    .com-del-box{
+    .apply-del-box{
       position: fixed;
       z-index: 1000;
       height: auto;

components/default/Header.vue

@@ -149,7 +149,7 @@
           isSelf = true
         }
         if (isSelf) {
-          window.location.href = '/personalMaterial'
+          window.location.href = '/register-saler'
         } else {
           if (tempEnterprise.isVendor === 313) {
             window.location.href = '/vendor#/index'

nuxt.config.js

@@ -1,6 +1,6 @@
 const path = require('path')
 const isProdMode = Object.is(process.env.NODE_ENV, 'production')
-const baseUrl = process.env.BASE_URL || (isProdMode ? 'http://10.10.100.107:8081/platform-b2c/' : 'http://10.1.51.90:8080/platform-b2c/')
+const baseUrl = process.env.BASE_URL || (isProdMode ? 'http://10.10.100.107:8081/platform-b2c/' : 'http://10.1.51.88:8080/platform-b2c/')
 
 module.exports = {
   router: {

pages/applyPurchase/_id.vue

@@ -8,6 +8,12 @@
   export default {
     components: {
       BatchPublish
+    },
+    fetch ({store, route}) {
+      return Promise.all([
+        store.dispatch('applyPurchase/loadBOMMaterialList', {bomId: route.params.id, page: 1, count: 10}),
+        store.dispatch('applyPurchase/loadBOMNumber', {bomId: route.params.id})
+      ])
     }
   }
 </script>

store/applyPurchase.js

@@ -63,6 +63,26 @@ export const actions = {
       }, err => {
         commit('goodPurchaseMan/GET_GOODPURCHASE_FAILURE', err)
       })
+  },
+  // 获取BOM物料列表
+  loadBOMMaterialList ({ commit }, params = {}) {
+    commit('bomMaterial/REQUEST_BOM_MATERIAL')
+    return axios.get('/seek/getSeekPurchaseByBatchPageInfo', {params: params})
+      .then(response => {
+        commit('bomMaterial/GET_BOM_MATERIAL_SUCCESS', response.data)
+      }, err => {
+        commit('bomMaterial/GET_BOM_MATERIAL_FAILURE', err)
+      })
+  },
+  // 获取BOM上传情况
+  loadBOMNumber ({ commit }, params = {}) {
+    commit('bomMaterial/REQUEST_BOM_INFO')
+    return axios.get('/seek/getImportBomInfo', {params: params})
+      .then(response => {
+        commit('bomMaterial/GET_BOM_INFO_SUCCESS', response.data)
+      }, err => {
+        commit('bomMaterial/GET_BOM_INFO_FAILURE', err)
+      })
   }
 }
 

store/applyPurchase/bomMaterial.js

@@ -0,0 +1,34 @@
+export const state = () => ({
+  bomList: {
+    fetching: false,
+    data: []
+  },
+  bomNumber: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_BOM_MATERIAL (state) {
+    state.bomList.fetching = true
+  },
+  GET_BOM_MATERIAL_FAILURE (state) {
+    state.bomList.fetching = false
+  },
+  GET_BOM_MATERIAL_SUCCESS (state, result) {
+    state.bomList.fetching = false
+    state.bomList.data = result
+  },
+  REQUEST_BOM_INFO (state) {
+    state.bomNumber.fetching = true
+  },
+  GET_BOM_INFO_FAILURE (state) {
+    state.bomNumber.fetching = false
+  },
+  GET_BOM_INFO_SUCCESS (state, result) {
+    state.bomNumber.fetching = false
+    state.bomNumber.data = result
+  }
+}
+