优化资料填报的树样式

src/layout/modules/MenuStretchBar.vue

@@ -16,7 +16,7 @@ const menuBarShow = ref(useAppState.menuBarShow)
 
 //监听
 watch(() => [
-    useAppState.menuBarShow,
+    useAppState.menuBarShow
 ], ([show]) => {
     menuBarShow.value = show
 })

src/styles/other/order-service.scss

@@ -7,6 +7,7 @@
         flex: 1 1 auto;
         height: 105%;
         margin: -24px;
+        margin-top: -10px;
         .content-box {
             position: relative;
             padding: 24px;

src/views/data-fill/components/WbsTree.vue

@@ -4,13 +4,14 @@
         <template #default="{ node, data }"  >
             <div class="data-custom-tree-node" :id="`${idPrefix}${data['primaryKeyId']}`">
                 <!--树组件，节点名称-->
-                <div class="label" :class="node.level === 1?'level-name':''" style="width: 100%;display: flex;justify-content: space-between;"
-               >
-                            <span :class="data?.colorStatus === 2?'text-blue':data?.colorStatus === 3?'text-orange':data?.colorStatus === 4?'text-green':''" v-if="isColor">{{ node.label }}</span>
-                            <span v-else>{{ node.label }}</span>
-                            <div class="text-blue submit-counts" v-if="submitCounts">【{{ data.submitCounts ?? 0 }}】</div>
+                <div class="label" :class="node.level === 1?'level-name':''">
+                    <span :class="data?.colorStatus === 2?'text-blue':data?.colorStatus === 3?'text-orange':data?.colorStatus === 4?'text-green':''" v-if="isColor">{{ node.label }}</span>
+                    <span v-else>{{ node.label }}</span>
                 </div>
 
+                <!--树组件，统计数量-->
+                <div class="text-blue submit-counts" v-if="submitCounts">【{{ data.submitCounts ?? 0 }}】</div>
+
                 <!--树组件，操作菜单-->
                 <div class="menu-icon1" :class="node.showTreeMenu?'show':''" v-if="node.level !== 1 && menusData.length > 0">
                     <div class="cu-tree-node-popover-menu-icon" @click.prevent.stop="ElTreeLabelContextMenu($event,data,node)">
@@ -320,40 +321,64 @@ defineExpose({
 <style lang="scss" scoped>
 @import "../../../styles/app/tree.scss";
 .el-radio-group {
-   width: 100% !important;
-   display:inline-grid;
-
-
+    width: 100% !important;
+    display:inline-grid;
 }
 
 .data-custom-tree-node {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    .label {
+        flex: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .submit-counts {
+        position: unset;
+    }
     .menu-icon1 {
-        // position: absolute;
+        position: unset;
         vertical-align: bottom;
         display:inline-block;
-            pointer-events: none;
-            transition: opacity 0.2s;
-            opacity: 0;
-            right: 0;
-            background: rgba(255, 255, 255, 0.25);
-            border-radius: 2px;
+        pointer-events: none;
+        transition: opacity 0.2s;
+        opacity: 0;
+        right: 0;
+        background: rgba(255, 255, 255, 0.25);
+        border-radius: 2px;
         .cu-tree-node-popover-menu-icon {
-                display: flex;
+            display: flex;
             align-items: center;
             justify-content: center;
         }
-        }
+    }
     &:hover {
-            .menu-icon1 {
-                opacity: 1;
-                pointer-events: all;
-                cursor: context-menu;
-            }
-        }
-        .menu-icon1.show {
+        .menu-icon1 {
             opacity: 1;
             pointer-events: all;
             cursor: context-menu;
         }
+    }
+    .menu-icon1.show {
+        opacity: 1;
+        pointer-events: all;
+        cursor: context-menu;
+    }
+}
+</style>
+
+<style lang="scss">
+.el-tree.hc-tree-node .el-tree-node {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    .el-tree-node_content {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 }
 </style>