feat:navbar.vue 增加 物流通知按钮

src/layout/components/Navbar.vue

@@ -16,6 +16,12 @@
           ></i>
         </el-tooltip>
       </div> -->
+      <div class="right-menu-item hover-effect" style="display: flex" @click="handleShow">
+        <el-badge>
+          <i class="el-icon-message-solid" style="font-size: 24px; line-height: 50px" />
+        </el-badge>
+        <span style="font-size: 16px; margin-left: 15px">物流通知</span>
+      </div>
       <div class="right-menu-item hover-effect" style="display: flex" @click="handleNotice('click')">
         <el-badge value="示">
           <i class="el-icon-message-solid" style="font-size: 24px; line-height: 50px" />
@@ -68,7 +74,14 @@
       </div>
     </el-dialog>
 
-    <el-dialog title="到货通知" :modal="false" width="70%" :visible.sync="hasNotice" center @close="handleNotice(false)">
+    <el-dialog
+      title="到货通知"
+      :modal="false"
+      width="70%"
+      :visible.sync="hasNotice"
+      center
+      @close="handleNotice(false)"
+    >
       <div class="mymain-container">
         <el-form ref="form" :model="form" label-width="80px" label-position="left" size="mini">
           <el-row>
@@ -76,10 +89,13 @@
               <el-form-item prop="specification" label="规格型号">
                 <div style="display: flex">
                   <el-input v-model="form.specification" clearable style="margin-right: 10px" />
-                  <el-button @click="
-  form.specification = ''
-                    getNoticeList()
-                  ">重置</el-button>
+                  <el-button
+                    @click="
+                      form.specification = ''
+                      getNoticeList()
+                    "
+                    >重置</el-button
+                  >
                   <el-button type="primary" @click="getNoticeList">查询</el-button>
                 </div>
               </el-form-item>
@@ -88,26 +104,129 @@
         </el-form>
         <div class="table">
           <el-table v-loading="listLoading" :data="noticeList" border>
-            <el-table-column property="materialOldNumber" align="left" min-width="120" label="产品编号"
-              show-overflow-tooltip />
-            <el-table-column property="materialNumber" align="left" min-width="100" label="物料编码"
-              show-overflow-tooltip />
-            <el-table-column property="materialName" align="left" min-width="250" label="产品名称" show-overflow-tooltip />
-            <el-table-column property="specification" align="left" min-width="350" label="规格型号" show-overflow-tooltip />
+            <el-table-column
+              property="materialOldNumber"
+              align="left"
+              min-width="120"
+              label="产品编号"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              property="materialNumber"
+              align="left"
+              min-width="100"
+              label="物料编码"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              property="materialName"
+              align="left"
+              min-width="250"
+              label="产品名称"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              property="specification"
+              align="left"
+              min-width="350"
+              label="规格型号"
+              show-overflow-tooltip
+            />
             <el-table-column property="stockName" align="left" min-width="100" label="到货仓库" show-overflow-tooltip />
-            <el-table-column property="updateTime" align="left" min-width="200" label="到货通知时间" show-overflow-tooltip />
+            <el-table-column
+              property="updateTime"
+              align="left"
+              min-width="200"
+              label="到货通知时间"
+              show-overflow-tooltip
+            />
           </el-table>
           <div class="flex">
             <div />
             <div class="fr">
-              <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="10"
-                layout="total, prev, pager, next" :total="listTotal" @size-change="handleSizeChange"
-                @current-change="handleCurrentChange" />
+              <el-pagination
+                :current-page="currentPage"
+                :page-sizes="[10, 20, 30, 50]"
+                :page-size="10"
+                layout="total, prev, pager, next"
+                :total="listTotal"
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+              />
             </div>
           </div>
         </div>
       </div>
     </el-dialog>
+    <el-dialog title="物流通知" :visible.sync="isLogistics" width="50%" :modal="false" @close="isLogistics = false">
+      <div class="table">
+        <el-table
+          v-if="invoiceOrderList.length"
+          ref="table"
+          v-loading="listLoading"
+          :data="invoiceOrderList"
+          element-loading-text="Loading"
+          border
+          fit
+          highlight-current-row
+          stripe
+        >
+          <el-table-column align="center" type="index" min-width="160" show-overflow-tooltip />
+          <el-table-column align="center" label="发货单" prop="id" min-width="160" show-overflow-tooltip />
+          <el-table-column align="center" label="内容" prop="orderTrackStatus" min-width="160" show-overflow-tooltip />
+          <el-table-column align="center" label="时间" prop="orderTrackTime" min-width="160" show-overflow-tooltip />
+          <el-table-column align="center" label="" min-width="160" show-overflow-tooltip fixed="right">
+            <template slot-scope="scope">
+              <el-button type="text" class="textColor" @click="handLogistics(scope.row)">查看</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <!-- 分页 -->
+      <div class="fr">
+        <el-pagination
+          :current-page="currentPage"
+          :page-sizes="[10, 20, 30, 50]"
+          :page-size="10"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="listTotal"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+      <br />
+      <br />
+    </el-dialog>
+    <el-dialog
+      title="物流信息"
+      :visible.sync="visible"
+      width="60%"
+      @close="onClose"
+      :modal="false"
+      :close-on-click-modal="false"
+    >
+      <el-timeline class="logistics" :reverse="false" v-if="logisticsDetail.length">
+        <el-timeline-item
+          placement="top"
+          type="success"
+          v-for="(item, index) in logisticsDetail"
+          :key="index"
+          :timestamp="item.time"
+        >
+          <el-row :gutter="20">
+            <el-col class="logistics-title"> {{ item.status }} </el-col>
+            <el-col>
+              <div class="flex">
+                <div>{{ item.context }}</div>
+                <!-- <div>{{ item.createTime }}</div> -->
+              </div>
+            </el-col>
+          </el-row>
+        </el-timeline-item>
+      </el-timeline>
+      <div v-else class="tip">暂无物流信息</div>
+    </el-dialog>
     <!--    工程机多帐号-->
     <!--    <el-dialog-->
     <!--      title="绑定工程机系统"-->
@@ -159,7 +278,6 @@
 </template>
 
 <script>
-import { getRebateOrderMsg } from '@/api/dashboard'
 import { mapGetters } from 'vuex'
 import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
@@ -167,6 +285,9 @@ import Screenfull from '@/components/Screenfull'
 import NavMenu from '@/components/NavMenu'
 import { getNoticeListCount } from '@/api/notice'
 import { getNoticeList } from '@/api/stock'
+import { getListOrderTrack } from '@/api/supply/pickup'
+import { getListInvoiceOrder } from '@/api/dashboard'
+
 import { bindEngineAccount, checkEngineAccount } from '@/api/setting'
 import mixin from '@/mixin'
 import ret from 'bluebird/js/release/util'
@@ -202,7 +323,15 @@ export default {
       noticeList: [],
       form: {
         specification: ''
-      }
+      },
+      isLogistics: false,
+      visible: false,
+      orderId: '',
+      logisticsDetail: [],
+      invoiceOrderList: [],
+      currentPage: 1, // 当前页码
+      pageSize: 10, // 每页数量
+      listTotal: 0 // 列表总数
     }
   },
   mounted() {
@@ -263,11 +392,9 @@ export default {
         pageSize: this.pageSize,
         specification: this.form.specification
       }).then(res => {
-
         this.noticeList = res.data.records
         this.listTotal = res.data.total
         this.listLoading = false
-
       })
     },
     handleNotice(flag = true) {
@@ -496,6 +623,43 @@ export default {
         that.initWebSocket()
         that.lockReconnect = false
       }, 20000)
+    },
+    // 获取物流列表
+    async getListInvoiceOrder(data) {
+      this.invoiceOrderList = []
+      const res = await getListInvoiceOrder({
+        pageSize: this.pageSize,
+        pageNum: this.currentPage
+      })
+      this.invoiceOrderList = res.data.records
+      this.listTotal = res.data.total
+    },
+    handleShow() {
+      ;(this.isLogistics = true), this.getListInvoiceOrder()
+    },
+    // 更改每页数量
+    handleSizeChange(val) {
+      this.pageSize = val
+      this.currentPage = 1
+      this.getListInvoiceOrder()
+    },
+    // 更改当前页
+    handleCurrentChange(val) {
+      this.currentPage = val
+
+      this.getListInvoiceOrder()
+    },
+    handLogistics(row) {
+      getListOrderTrack({ orderId: row.id }).then(res => {
+        this.logisticsDetail = res.data
+      })
+      this.orderId = row.id
+      this.visible = true
+    },
+    onClose() {
+      this.logisticsDetail = []
+      this.orderId = ''
+      this.visible = false
     }
   }
 }
@@ -550,7 +714,7 @@ export default {
     height: 100%;
     line-height: 50px;
 
-    &>div {
+    & > div {
       float: left;
     }
 
@@ -604,7 +768,7 @@ export default {
 .navbar {
   .right-menu {
     .right-menu-item {
-      .notice-icon>i {
+      .notice-icon > i {
         font-size: 18px;
       }