设备档案的详情tab显示角标

src/components/LowDesign/src/LowForm/components/FormTabs.vue

@@ -15,6 +15,15 @@
           :class="`control-${key}`"
           v-if="item.display"
         >
+        <!-- {{controlObj['layoutTabs_' + props.prop + '_' + key]?.layoutTable}} -->
+           <template #label>
+            <div style="position:relative;display:inline-block;">
+              {{ item.label }}
+              <span class="subTag" v-if="['维修工单','保养工单'].includes(item.label) && controlObj['layoutTabs_' + props.prop + '_' + key]?.layoutTable">
+                {{tabsData[key][controlObj['layoutTabs_' + props.prop + '_' + key]?.layoutTable[0]?.prop].length}}
+              </span>
+            </div>
+          </template>
           <avue-form
             :ref="(el) => (avueFormRef[key] = el)"
             v-model="tabsData[key]"
@@ -437,4 +446,15 @@ defineExpose({
 })
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.subTag{
+  font-size: 12px;
+  color: #fff;
+  line-height: 16px;width: 16px;text-align: center;
+  background-color: var(--el-color-primary);
+  border-radius: 50%;
+  position: absolute;
+  top: 0;
+  right: -16px;
+}
+</style>