为入库单按钮添加角标显示未入库表单数量

src/views/WarehouseManagement/PurchasePartsStorage/index.vue

@@ -47,10 +47,11 @@
             <el-button
               type="primary"
               icon="el-icon-s-home"
-              style="margin-left: 10px"
+              style="margin-left: 10px; position: relative;"
               plain
               size="small"
               @click="showRKDDialog">入库单
+              <span v-if="tableDataRKD && tableDataRKD.length > 0" style="position: absolute; top: -8px; right: -8px; background-color: #F56C77; color: white; border-radius: 50%; padding: 2px 6px; font-size: 12px; line-height: 1; min-width: 20px; text-align: center;">{{ tableDataRKD.length }}</span>
             </el-button>
             <el-button
               type="primary"
@@ -721,9 +722,17 @@ export default {
     this.getSelectTheOutsourcingManufacturers()
     this.initWebpack()
     this.getorderSelection()
+    this.loadRKDCounter()
     // this.searchTable1()
   },
   methods: {
+    loadRKDCounter() {
+      var param = []
+      var Data = this.CreateData('11', '仓储管理_入库单_查询', param)
+      this.ExecDatabase(Data).then(response => {
+        this.tableDataRKD = response.data.filter(item => item.是否入库 === 0)
+      })
+    },
     onChangeSupplierSelection() {
       let obj = {}
       obj = this.supplierSelection.find((item) => {