待出角标

src/api/ecw/order.js

@@ -999,3 +999,11 @@ export function exportOrderSummaryByContainerNumber(params){
     responseType: 'blob'
   })
 }
+
+// 查询权限范围内待出订单数量
+export function getWaitingShipmentCount(){
+  return request({
+    url: '/air/order/data/scope/waiting/shipment/count',
+    method: 'get'
+  })
+}

src/layout/components/Sidebar/Item.vue

@@ -10,20 +10,32 @@ export default {
     title: {
       type: String,
       default: ''
-    }
+    },
+    badge: Number
   },
   render(h, context) {
-    const { icon, title } = context.props
+    const { icon, title, badge } = context.props
     const vnodes = []
 
     if (icon) {
-      vnodes.push(<svg-icon icon-class={icon}/>)
+      vnodes.push(<svg-icon icon-class={icon} test="1"/>)
     }
 
     if (title) {
-      vnodes.push(<span slot='title'>{(title)}</span>)
+      vnodes.push(<span><span>{(title)}</span><span class="badge">{badge}</span></span>)
     }
+
     return vnodes
   }
 }
 </script>
+<style lang="scss" scoped>
+.badge:not(:empty){
+  background: red;
+  color: #fff;
+  padding: 2px 8px;
+  font-size: 12px;
+  border-radius: 10px;
+  margin-left: 5px;
+}
+</style>

src/layout/components/Sidebar/SidebarItem.vue

@@ -3,14 +3,14 @@
     <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="$l(onlyOneChild.meta, 'title')" />
+          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="$l(onlyOneChild.meta, 'title')" :badge="badge" />
         </el-menu-item>
       </app-link>
     </template>
 
     <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
       <template slot="title">
-        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="$l(item.meta, 'title')" />
+        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="$l(item.meta, 'title')" :badge="badge" />
       </template>
       <sidebar-item
         v-for="child in item.children"
@@ -54,6 +54,11 @@ export default {
     this.onlyOneChild = null
     return {}
   },
+  computed:{
+    badge(){
+      return this.$store.getters.badgeData[this.item.meta.badgeField]
+    }
+  },
   methods: {
     hasOneShowingChild(children = [], parent) {
       if (!children) {

src/layout/components/Sidebar/index.vue

@@ -28,6 +28,7 @@ import { mapGetters, mapState } from "vuex";
 import Logo from "./Logo";
 import SidebarItem from "./SidebarItem";
 import variables from "@/assets/styles/variables.scss";
+import {getWaitingShipmentCount} from "@/api/ecw/order";
 
 export default {
   components: { SidebarItem, Logo },
@@ -52,6 +53,13 @@ export default {
     isCollapse() {
       return !this.sidebar.opened;
     }
+  },
+  created() {
+    // 查询待出订单数量 waitingShipment
+    getWaitingShipmentCount().then(res => {
+      console.log('getWaitingShipmentCount', res.data)
+      this.$store.commit('SET_BADGE_DATA', { waitingShipment: res.data}, )
+    })
   }
 };
 </script>

src/store/getters.js

@@ -17,6 +17,8 @@ const getters = {
   defaultRoutes:state => state.permission.defaultRoutes,
   sidebarRouters:state => state.permission.sidebarRouters,
   // 数据字典
-  dict_datas: state => state.dict.dictDatas
+  dict_datas: state => state.dict.dictDatas,
+  // 角标数据
+  badgeData: state => state.user.badgeData
 }
 export default getters

src/store/modules/permission.js

@@ -56,7 +56,8 @@ function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
       titleEn: route.nameEn,
       icon: route.icon,
       noCache: !route.keepalive, // 不缓存，如果需要缓存则需要组件名称能对应上
-      componentPath: route.component
+      componentPath: route.component,
+      badgeField: route.badgeField
     }
     route.hidden = typeof route.isShowInMenuBar != 'undefined' && (route.isShowInMenuBar == 'false' || !route.isShowInMenuBar)
     // 处理 component 属性

src/store/modules/user.js

@@ -13,7 +13,11 @@ const user = {
     permissions: [],
     notMessage:0,
     matterNum:0,
-    download: 0
+    download: 0,
+    badgeData:{
+      // 待出订单数量
+      waitingShipment: 0
+    }
   },
 
   mutations: {
@@ -43,6 +47,9 @@ const user = {
     },
     SET_DOWNLOAD(state, cnt){
         state.download = cnt;
+    },
+    SET_BADGE_DATA(state, data){
+      state.badgeData = Object.assign({}, state.badgeData, data)
     }
   },
 

src/views/ecw/order/detail.vue

@@ -261,7 +261,7 @@
           <el-timeline v-if="order.orderTimeVOList && order.orderTimeVOList.length" :reverse="true">
             <el-timeline-item v-for="(activity, index) in order.orderTimeVOList" :key="index" :timestamp="parseTime(activity.businessTime)">
               {{ $l(activity, 'title') }}
-              <div>{{$l(activity, 'remarks')}}</div>
+              <div :class="{red: !!activity.mark}">{{$l(activity, 'remarks')}}</div>
             </el-timeline-item>
           </el-timeline>
           <el-result v-else icon="info " :title="$t('暂无数据')" :subTitle="$t('暂无订单动态数据')" />
@@ -794,6 +794,9 @@ export default {
 </script>
 
 <style scoped>
+.red{
+  color: red;
+}
 .card {
   margin-bottom: 20px;
 }

src/views/system/menu/index.vue

@@ -148,6 +148,11 @@
               <el-input v-model="form.redirect" :placeholder="$t('请输入重定向地址')" />
             </el-form-item>
           </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('角标字段')" prop="redirect">
+              <el-input v-model="form.badgeField" :placeholder="$t('不清楚请留空,已设勿改')" />
+            </el-form-item>
+          </el-col>
         </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">