Ver código fonte

首页导航指引

chenrui 3 anos atrás
pai
commit
368ac96a8a
2 arquivos alterados com 396 adições e 58 exclusões
  1. 9 1
      src/api/data.js
  2. 387 57
      src/views/Home.vue

+ 9 - 1
src/api/data.js

@@ -113,7 +113,7 @@ export const getArea = (params) => {
   })
 }
 
-// 首页请求导航指引合计
+// 首页 导航指引合计
 export const bizStateCount = (params) => {
   return axios({
     url: `/home/queryBizStateCount`,
@@ -121,3 +121,11 @@ export const bizStateCount = (params) => {
     method: 'post'
   })
 }
+// 首页  数据看板信息
+export const bizData = (params) => {
+  return axios({
+    url: `/home/queryBizData`,
+    data: params,
+    method: 'post'
+  })
+}

+ 387 - 57
src/views/Home.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="home">
-    <a-alert :message="message" type="info" />
-    <!-- <a-card size="small" :bordered="false" class="page-cont" :bodyStyle="{padding: '17px 30px 20px'}">
+    <!-- <a-alert :message="message" type="info" /> -->
+    <a-card size="small" :bordered="false" class="page-cont" :bodyStyle="{padding: '17px 30px 20px'}">
       <h3 class="page-tit">客户信息</h3>
       <ul class="page-list">
-        <li>商户名称:广州生产经销商</li>
+        <li>商户名称:{{ $store.getters.userInfo.orgName || '--' }}</li>
         <li>商户别名:广州生产经销商</li>
-        <li>登录账号:admin</li>
+        <li>登录账号:{{ $store.getters.userInfo.username || '--' }}</li>
         <li>所属角色:升级经销商</li>
       </ul>
-    </a-card> -->
-    <!-- <a-card size="small" :bordered="false" class="page-cont" :bodyStyle="{padding: '0px'}">
+    </a-card>
+    <a-card size="small" :bordered="false" class="page-cont" :bodyStyle="{padding: '0px'}">
       <a-row>
         <a-col :span="6">
           <div class="page-data-module">
@@ -50,14 +50,14 @@
           <div class="page-data-module">
             <div class="page-data-con">
               <p class="page-data-tit">客户总数(个)</p>
-              <h3 class="page-data-num">100/26,56.00</h3>
+              <h3 class="page-data-num">{{ bizData&&bizData.customer&&(bizData.customer.custCount || bizData.customer.custCount==0) ? bizData.customer.custCount : '--' }}</h3>
               <p class="page-data-item">
                 <span class="page-data-itemText">本周新增</span>
-                <span class="page-data-itemText">2000</span>
+                <span class="page-data-itemText">{{ bizData&&bizData.customer&&(bizData.customer.addCurrentWeekCustCount || bizData.customer.addCurrentWeekCustCount==0) ? bizData.customer.addCurrentWeekCustCount : '--' }}</span>
               </p>
               <p class="page-data-item">
                 <span class="page-data-itemText">本月内采购客户</span>
-                <span class="page-data-itemText">1200</span>
+                <span class="page-data-itemText">{{ bizData&&bizData.customer&&(bizData.customer.salesThirtyDayCustCount || bizData.customer.salesThirtyDayCustCount==0) ? bizData.customer.salesThirtyDayCustCount : '--' }}</span>
               </p>
             </div>
             <span class="page-data-line"></span>
@@ -67,45 +67,84 @@
           <div class="page-data-module">
             <div class="page-data-con">
               <p class="page-data-tit">总库存(个)</p>
-              <h3 class="page-data-num" style="line-height: 36px;">101</h3>
+              <h3 class="page-data-num" style="line-height: 36px;">{{ bizData&&bizData.stock&&(bizData.stock.totalCurrentStockQty || bizData.stock.totalCurrentStockQty==0) ? bizData.stock.totalCurrentStockQty : '--' }}</h3>
               <p class="page-data-tit">库存总金额(元)</p>
-              <h3 class="page-data-num" style="line-height: 36px;margin: 0;">101.25</h3>
+              <h3 class="page-data-num" style="line-height: 36px;margin: 0;">{{ bizData&&bizData.stock&&(bizData.stock.totalCurrentStockCost || bizData.stock.totalCurrentStockCost==0) ? bizData.stock.totalCurrentStockCost : '--' }}</h3>
             </div>
           </div>
         </a-col>
       </a-row>
-    </a-card> -->
-    <!-- <div>
+    </a-card>
+    <div>
       <a-row>
         <a-col :span="16">
           <a-card size="small" :bordered="false" class="page-cont" :bodyStyle="{padding: '17px 30px 20px'}">
             <h3 class="page-tit">销售/采购/调拨指引</h3>
             <div class="page-nav-main">
-
+              <!-- 导航指引  start -->
               <div class="page-nav-con" v-for="(item, index) in navList" :key="index">
                 <div class="page-nav-box" v-for="(subItem, subInd) in item" :key="subInd">
-                  <a-badge count="5" class="page-nav-badge" v-for="(unitItem, unitInd) in subItem" :key="unitInd">
+                  <a-badge
+                    :count="countData&&unitItem.orderNum ? countData[unitItem.orderNum] : 0"
+                    class="page-nav-badge"
+                    v-for="(unitItem, unitInd) in subItem"
+                    :key="unitInd"
+                    @click.native="goPage(unitItem.url)"
+                    :style="{cursor: unitItem.url?'pointer': 'initial'}">
                     <div :class="['page-nav-item', unitItem.styleC]">
                       <div class="page-nav-n">
-                        <img :src="unitItem.icon" width="16" height="16" />
+                        <img v-show="unitItem.icon" :src="unitItem.icon" width="16" height="16" />
                         <span>{{ unitItem.name }}</span>
                       </div>
-                      <a-icon type="caret-right" style="color: #BBBBBB;" />
+                      <a-icon type="caret-right" v-show="unitItem.url" style="color: #BBBBBB;" />
                     </div>
                   </a-badge>
                 </div>
               </div>
-
+              <!-- 导航指引  end -->
             </div>
           </a-card>
         </a-col>
         <a-col :span="8">
           <a-card size="small" :bordered="false" class="page-cont right-con" :bodyStyle="{padding: '17px 30px 20px'}">
             <h3 class="page-tit">财务指引</h3>
+            <!-- 财务指引  start -->
+            <div class="page-nav-con" v-for="(item, index) in navFinancialList" :key="index">
+              <div class="page-nav-box" v-for="(subItem, subInd) in item" :key="subInd" style="width: 50%;">
+                <div class="page-nav-badge" v-for="(unitItem, unitInd) in subItem" :key="unitInd" @click.native="goPage(unitItem.url)" :style="{cursor: unitItem.url?'pointer': 'initial'}">
+                  <div :class="['page-nav-item', unitItem.styleC]">
+                    <div class="page-nav-n">
+                      <img v-show="unitItem.icon" :src="unitItem.icon" width="16" height="16" />
+                      <span>{{ unitItem.name }}</span>
+                    </div>
+                    <a-icon type="caret-right" v-show="unitItem.url" style="color: #BBBBBB;" />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- 财务指引  end -->
+          </a-card>
+          <a-card size="small" :bordered="false" class="page-cont right-con" :bodyStyle="{padding: '17px 30px 20px'}">
+            <h3 class="page-tit">其他指引</h3>
+            <!-- 其他指引  start -->
+            <div class="page-nav-con" v-for="(item, index) in navOtherList" :key="index">
+              <div class="page-nav-box" v-for="(subItem, subInd) in item" :key="subInd" style="width: 50%;">
+                <div class="page-nav-badge" v-for="(unitItem, unitInd) in subItem" :key="unitInd" @click.native="goPage(unitItem.url)" :style="{cursor: unitItem.url?'pointer': 'initial'}">
+                  <div :class="['page-nav-item', unitItem.styleC]">
+                    <div class="page-nav-n">
+                      <img v-show="unitItem.icon" :src="unitItem.icon" width="16" height="16" />
+                      <span>{{ unitItem.name }}</span>
+                    </div>
+                    <a-icon type="caret-right" v-show="unitItem.url" style="color: #BBBBBB;" />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- 其他指引  end -->
           </a-card>
         </a-col>
       </a-row>
-    </div> -->
+    </div>
     <!-- 重置密码 -->
     <a-modal
       class="resetPwdModal"
@@ -141,7 +180,7 @@ import { mapGetters } from 'vuex'
 import ResetPwd from '@/views/user/ResetPwd.vue'
 import newProduct from '@/views/productManagement/newProduct/modal.vue'
 import { queryNewProductPage } from '@/api/product'
-import { bizStateCount } from '@/api/data'
+import { bizStateCount, bizData } from '@/api/data'
 export default {
   name: 'Home',
   components: { ResetPwd, newProduct },
@@ -184,15 +223,41 @@ export default {
               name: '销售审核',
               styleC: 'blue-color',
               url: '/salesManagement/salesQuery/list',
-              orderNum: ''
+              orderNum: 'salesWaitAuditCount'
             },
             {
               icon: require('@/assets/home-icon/home_icon_verify.png'),
               name: '退货审核',
               styleC: 'blue-color',
               url: '/salesManagement/salesReturn/list',
-              orderNum: ''
+              orderNum: 'salesReturnWaitAuditCount'
+            }
+          ],
+          [
+            {
+              icon: require('@/assets/home-icon/home_icon_stock.png'),
+              name: '销售出库',
+              styleC: 'red-color',
+              url: '/outboundOrderManagement/outboundOrder/list',
+              orderNum: 'salesWaitOutWarehouseCount'
+            },
+            {
+              icon: require('@/assets/home-icon/home_icon_finance_pay.png'),
+              name: '财务付款',
+              styleC: 'red-color',
+              url: '/financialManagement/financialPayment/list',
+              orderNum: 'salesReturnFinancialWaitCount'
             }
+          ],
+          [
+            {
+              icon: require('@/assets/home-icon/home_icon_finance_payment.png'),
+              name: '财务收款',
+              styleC: 'blue-color',
+              url: '/financialManagement/financialCollection/list',
+              orderNum: 'salesFinancialWaitCount'
+            },
+            {}
           ]
         ],
         [ // 供应商(箭冠)
@@ -220,11 +285,256 @@ export default {
               url: '/purchasingManagement/purchaseReturn/list',
               orderNum: ''
             }
+          ],
+          [
+            {
+              icon: require('@/assets/home-icon/home_icon_verify_return.png'),
+              name: '入库审核',
+              styleC: 'blue-color',
+              url: '/financialManagement/warehousingAudit/list',
+              orderNum: 'purchaseWaitAuditCount'
+            },
+            {
+              icon: require('@/assets/home-icon/home_icon_verify_return.png'),
+              name: '退货审核',
+              styleC: 'blue-color',
+              url: '/purchasingManagement/purchaseReturn/list',
+              orderNum: 'purchaseReturnWaitAuditCount'
+            }
+          ],
+          [
+            {},
+            {
+              icon: require('@/assets/home-icon/home_icon_finance_pay.png'),
+              name: '财务收款',
+              styleC: 'red-color',
+              url: '/financialManagement/financialCollection/list',
+              orderNum: 'purchaseReturnFinancialWaitCount'
+            }
+          ]
+        ],
+        [ // 供应商(其他)
+          [
+            {
+              icon: require('@/assets/home-icon/home_icon_supplier.png'),
+              name: '供应商(其他)',
+              styleC: 'blue-color',
+              url: '/supplierManagement/supplierInfo/list',
+              orderNum: ''
+            }
+          ],
+          [
+            {
+              icon: require('@/assets/home-icon/home_icon_scatter_warehousing.png'),
+              name: '散件入库',
+              styleC: 'red-color',
+              url: '/bulkManagement/bulkWarehousingOrder/list',
+              orderNum: ''
+            },
+            {
+              icon: require('@/assets/home-icon/home_icon_scatter_return.png'),
+              name: '散件退货',
+              styleC: 'red-color',
+              url: '/bulkManagement/bulkReturnGoods/list',
+              orderNum: ''
+            }
+          ],
+          [
+            {
+              icon: require('@/assets/home-icon/home_icon_verify_return.png'),
+              name: '待入库',
+              styleC: 'blue-color',
+              url: '/bulkManagement/bulkWarehousingOrder/list',
+              orderNum: 'sparePartsPurchaseWaitAuditCount'
+            },
+            {
+              icon: require('@/assets/home-icon/home_icon_verify_return.png'),
+              name: '退货审核',
+              styleC: 'blue-color',
+              url: '/bulkManagement/bulkReturnGoods/list',
+              orderNum: 'sparePartsReturnWaitAuditCount'
+            }
+          ],
+          [
+            {
+              icon: require('@/assets/home-icon/home_icon_finance_pay.png'),
+              name: '财务付款',
+              styleC: 'red-color',
+              url: '/bulkManagement/bulkWarehousingOrder/list',
+              orderNum: 'sparePartsPurchaseFinancialWaitCount'
+            },
+            {
+              icon: require('@/assets/home-icon/home_icon_stock.png'),
+              name: '待出库',
+              styleC: 'red-color',
+              url: '/bulkManagement/bulkReturnGoods/list',
+              orderNum: 'sparePartsReturnWaitOutWarehouseCount'
+            }
+          ],
+          [
+            {},
+            {
+              icon: require('@/assets/home-icon/home_icon_finance_payment.png'),
+              name: '财务收款',
+              styleC: 'blue-color',
+              url: '/financialManagement/financialCollection/list',
+              orderNum: 'sparePartsReturnFinancialWaitCount'
+            }
+          ]
+        ],
+        [ // 调拨
+          [
+            {
+              icon: require('@/assets/home-icon/home_icon_transfer.png'),
+              name: '调拨',
+              styleC: 'blue-color',
+              url: '',
+              orderNum: ''
+            }
+          ],
+          [
+            {
+              icon: require('@/assets/home-icon/home_icon_stor_out.png'),
+              name: '店内调出',
+              styleC: 'red-color',
+              url: '/allocationManagement/storeTransferOut/list',
+              orderNum: ''
+            },
+            {
+              icon: require('@/assets/home-icon/home_icon_billing.png'),
+              name: '仓库调拨',
+              styleC: 'red-color',
+              url: '/allocationManagement/warehouseAllocation/list',
+              orderNum: ''
+            },
+            {
+              icon: require('@/assets/home-icon/home_icon_billing.png'),
+              name: '连锁调出',
+              styleC: 'red-color',
+              url: '/allocationManagement/chainTransferOut/list',
+              orderNum: ''
+            }
+          ],
+          [
+            {
+              icon: require('@/assets/home-icon/home_icon_verify.png'),
+              name: '调出审核',
+              styleC: 'blue-color',
+              url: '/allocationManagement/storeTransferOut/list',
+              orderNum: 'storeCallOutWaitAuditCount'
+            },
+            {
+              icon: require('@/assets/home-icon/home_icon_verify.png'),
+              name: '调拨审核',
+              styleC: 'blue-color',
+              url: '/allocationManagement/warehouseAllocation/list',
+              orderNum: 'alloWarehouseWaitAuditCount'
+            },
+            {
+              icon: require('@/assets/home-icon/home_icon_verify.png'),
+              name: '调出审核',
+              styleC: 'blue-color',
+              url: '/allocationManagement/chainTransferOut/list',
+              orderNum: 'alloLinkageOutWaitAuditCount'
+            }
+          ],
+          [
+            {
+              icon: require('@/assets/home-icon/home_icon_stock.png'),
+              name: '出库审核',
+              styleC: 'red-color',
+              url: '/outboundOrderManagement/outboundOrder/list',
+              orderNum: 'storeCallOutWaitOutWarehouseCount'
+            },
+            {},
+            {
+              icon: require('@/assets/home-icon/home_icon_stock.png'),
+              name: '出库审核',
+              styleC: 'red-color',
+              url: '/outboundOrderManagement/outboundOrder/list',
+              orderNum: 'alloLinkageOutWaitOutWarehouseCount'
+            }
+          ],
+          [
+            {
+              icon: require('@/assets/home-icon/home_icon_finance_payment.png'),
+              name: '财务收款',
+              styleC: 'blue-color',
+              url: '/financialManagement/financialCollection/list',
+              orderNum: 'storeCallOutFinancialWaitCount'
+            },
+            {},
+            {}
           ]
         ]
 
+      ],
+      countData: null,
+      bizData: null,
+      navFinancialList: [ // 财务指引
+        [
+          [
+            {
+              icon: require('@/assets/home-icon/home_icon_receivable.png'),
+              name: '应收应付',
+              styleC: 'blue-color',
+              url: '/financialManagement/companyReceivablePayable/list',
+              permission: 'M_companyReceivablePayableList',
+              orderNum: ''
+            },
+            {
+              icon: require('@/assets/home-icon/home_icon_finance.png'),
+              name: '财务收款',
+              styleC: 'blue-color',
+              url: '/financialManagement/financialCollection/list',
+              permission: 'M_financialCollectionList',
+              orderNum: ''
+            }
+          ],
+          [
+            {
+              icon: require('@/assets/home-icon/home_icon_unit.png'),
+              name: '单位应收',
+              styleC: 'blue-color',
+              url: '/financialManagement/companyCollectionPayment/list',
+              permission: 'M_companyCollectionPaymentList',
+              orderNum: ''
+            },
+            {
+              icon: require('@/assets/home-icon/home_icon_pay.png'),
+              name: '财务付款',
+              styleC: 'blue-color',
+              url: '/financialManagement/financialPayment/list',
+              permission: 'M_financialPaymentList',
+              orderNum: ''
+            }
+          ]
+        ]
+      ],
+      navOtherList: [ // 其他指引
+        [
+          [
+            {
+              icon: require('@/assets/home-icon/home_icon_stock s.png'),
+              name: '实时库存',
+              styleC: 'blue-color',
+              url: '/inventoryManagement/inventoryQuery/list',
+              permission: 'M_inventoryInventoryQueryList',
+              orderNum: ''
+            }
+          ],
+          [
+            {
+              icon: require('@/assets/home-icon/home_icon_inventory.png'),
+              name: '库存盘点',
+              styleC: 'blue-color',
+              url: '/inventoryManagement/inventoryChecking/list',
+              permission: 'M_inventoryCheckingList',
+              orderNum: ''
+            }
+          ]
+        ]
       ]
-
     }
   },
   computed: {
@@ -267,7 +577,22 @@ export default {
     getNavCount () {
       bizStateCount({}).then(res => {
         if (res.status == 200) {
-
+          this.countData = res.data
+        } else {
+          this.countData = null
+        }
+      })
+    },
+    // 导航跳转
+    goPage (url) {
+      this.$router.push({ path: url, query: { closeLastOldTab: true } })
+    },
+    getBizData () {
+      bizData({}).then(res => {
+        if (res.status == 200) {
+          this.bizData = res.data
+        } else {
+          this.bizData = null
         }
       })
     }
@@ -276,6 +601,7 @@ export default {
     next(vm => {
       // 请求导航指引合计
       vm.getNavCount()
+      vm.getBizData()
       //  判断登录用户是否重置过密码(首次登陆需强制重置密码)
       if (vm.mustChangePwd == 0) {
         vm.openResetPwd = false
@@ -356,41 +682,45 @@ export default {
         }
       }
       // 操作导航引导
-      .page-nav-main{
-        .page-nav-con{
-          display: flex;
-          align-items: center;
-          .page-nav-box{
-            display: inline-block;
-            width: 20%;
-            .page-nav-badge{
-              width: 80%;
-              &:first-child{
-                margin-bottom: 10px;
-              }
-              .page-nav-item{
-                border-radius: 8px;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                padding: 13px 10px;
-                .page-nav-n{
-                  img{
-                    vertical-align: sub;
-                  }
-                  span{
-                    color: rgba(0, 0, 0, 0.65);
-                    font-size: 14px;
-                    padding-left: 5px;
-                  }
+      .page-nav-con{
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
+        padding-bottom: 20px;
+        border-bottom: 1px solid #e8e8e8;
+        &:last-child{
+          margin-bottom: 0px;
+          padding-bottom: 0px;
+          border-bottom: none;
+        }
+        .page-nav-box{
+          display: inline-block;
+          width: 20%;
+          .page-nav-badge{
+            width: 94%;
+            margin: 5px 0;
+            .page-nav-item{
+              border-radius: 8px;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              padding: 13px 10px;
+              .page-nav-n{
+                img{
+                  vertical-align: sub;
+                }
+                span{
+                  color: rgba(0, 0, 0, 0.65);
+                  font-size: 14px;
+                  padding-left: 5px;
                 }
               }
-              .blue-color{
-                background-color: #EDF0F9;
-              }
-              .red-color{
-                background-color: #F8F1EF;
-              }
+            }
+            .blue-color{
+              background-color: #EDF0F9;
+            }
+            .red-color{
+              background-color: #F8F1EF;
             }
           }
         }