资料填报界面横向滚动

src/styles/app/element.scss

@@ -415,6 +415,9 @@
     .el-tree-node__expand-icon {
         font-size: 16px;
     }
+     .el-tree-node__children{
+                   overflow: visible!important;
+       }
 }
 
 //弹窗提示

src/styles/app/tree.scss

@@ -1,4 +1,5 @@
 // 树的线样式
+
 .tree-line {
     :deep(.el-tree-node) {
         position: relative;
@@ -15,13 +16,13 @@
         width: 1px;
         position: absolute;
         left: 1px;
-        top: -26px;
+        top: 0px;
         border-width: 1px;
         border-left: 2px dashed var(--el-color-primary);
     }
     // 当前层最后⼀个节点的竖线⾼度固定
     :deep(.el-tree-node:last-child::before) {
-        height: 38px; // 可以⾃⼰调节到合适数值
+        height: 15px; // 可以⾃⼰调节到合适数值
     }
     // 横线
     :deep(.el-tree-node::after) {
@@ -36,7 +37,8 @@
     }
     // 去掉最顶层的虚线，放最下⾯样式才不会被上⾯的覆盖了
     & > :deep(.el-tree-node::after) {
-        border-top: none;
+        border-top: none !important;
+        border-top: 0px !important;
     }
     & > :deep(.el-tree-node::before) {
         border-left: none;

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

@@ -1,5 +1,5 @@
 <template>
-    <ElTree class="hc-tree-node tree-line" ref="ElTreeRef" :props="ElTreeProps" :data="datas" highlight-current accordion node-key="primaryKeyId"
+    <ElTree class="hc-tree-node tree-line el-radio-group" ref="ElTreeRef" :props="ElTreeProps" :data="datas" highlight-current accordion node-key="primaryKeyId"
             :default-expanded-keys="TreeExpandKey" @node-click="ElTreeClick" @node-contextmenu="ElTreeLabelContextMenu" :indent="0"  :filter-node-method="filterNode">
         <template #default="{ node, data }">
             <div class="data-custom-tree-node" :id="`${idPrefix}${data['primaryKeyId']}`">
@@ -10,7 +10,7 @@
                 </div>
                 <div class="text-blue submit-counts" v-if="isSubmitCounts">【{{ data.submitCounts ?? 0 }}】</div>
                 <!--树组件，操作菜单-->
-                <div class="menu-icon" :class="node.showTreeMenu?'show':''" v-if="node.level !== 1 && menusData.length > 0" @click.stop>
+                <div class="menu-icon1" :class="node.showTreeMenu?'show':''" v-if="node.level !== 1 && menusData.length > 0" @click.stop>
                     <div class="cu-tree-node-popover-menu-icon" @click.prevent.stop="ElTreeLabelContextMenu($event,data,node)">
                         <HcIcon name="menu" ui="text-2xl"/>
                     </div>
@@ -229,30 +229,64 @@ defineExpose({
 
 <style lang="scss" scoped>
 @import "../../../styles/app/tree.scss";
+.el-radio-group {
+   width: auto;
+   
+}
+// .data-custom-tree-node {
+//     .menu-icon {
+//         position: relative;
+//         font-size: 20px;
+//         opacity: 0;
+//         pointer-events: none;
+//         transition: opacity 0.2s;
+//         .cu-tree-node-popover-menu-icon {
+//             display: flex;
+//             align-items: center;
+//             justify-content: center;
+//         }
+//     }
+//     &:hover {
+//         .menu-icon {
+//             opacity: 1;
+//             pointer-events: all;
+//             cursor: context-menu;
+//         }
+//     }
+//     .menu-icon.show {
+//         opacity: 1;
+//         pointer-events: all;
+//         cursor: context-menu;
+//     }
+// }
 .data-custom-tree-node {
-    .menu-icon {
-        position: relative;
-        font-size: 20px;
-        opacity: 0;
-        pointer-events: none;
-        transition: opacity 0.2s;
+    .menu-icon1 {
+        // position: absolute;
+        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;
         .cu-tree-node-popover-menu-icon {
-            display: flex;
+                display: flex;
             align-items: center;
             justify-content: center;
         }
-    }
+        }
     &:hover {
-        .menu-icon {
+            .menu-icon1 {
+                opacity: 1;
+                pointer-events: all;
+                cursor: context-menu;
+            }
+        }
+        .menu-icon1.show {
             opacity: 1;
             pointer-events: all;
             cursor: context-menu;
         }
-    }
-    .menu-icon.show {
-        opacity: 1;
-        pointer-events: all;
-        cursor: context-menu;
-    }
 }
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-    <ElTree class="hc-tree-node tree-line" :class="ui" ref="ElTreeRef" :props="ElTreeProps" :load="ElTreeLoadNode" lazy highlight-current accordion node-key="primaryKeyId"
+    <ElTree class="hc-tree-node tree-line el-radio-group" :class="ui" ref="ElTreeRef" :props="ElTreeProps" :load="ElTreeLoadNode" lazy highlight-current accordion node-key="primaryKeyId"
             :default-expanded-keys="defaultExpandedCids" @node-click="ElTreeClick" @node-contextmenu="ElTreeLabelContextMenu" :indent="0">
         <template #default="{ node, data }">
             <div class="data-custom-tree-node" :id="`${idPrefix}${data['primaryKeyId']}`">
@@ -10,7 +10,7 @@
                 </div>
                 <div class="text-blue submit-counts" v-if="isSubmitCounts">【{{ data.submitCounts ?? 0 }}】</div>
                 <!--树组件，操作菜单-->
-                <div class="menu-icon" :class="node.showTreeMenu?'show':''" v-if="node.level !== 1 && menusData.length > 0">
+                <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)">
                         <HcIcon name="apps" ui="text-2xl"/>
                     </div>
@@ -276,32 +276,37 @@ defineExpose({
 
 <style lang="scss" scoped>
 @import "../../../styles/app/tree.scss";
+.el-radio-group {
+   width: auto !important; 
+}
 .data-custom-tree-node {
-    .menu-icon {
-        position: absolute;
-        pointer-events: none;
-        transition: opacity 0.2s;
-        opacity: 0;
-        right: 0;
-        background: rgba(255, 255, 255, 0.25);
-        border-radius: 2px;
+    .menu-icon1 {
+        // position: absolute;
+        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;
         .cu-tree-node-popover-menu-icon {
-            display: flex;
+                display: flex;
             align-items: center;
             justify-content: center;
         }
-    }
+        }
     &:hover {
-        .menu-icon {
+            .menu-icon1 {
+                opacity: 1;
+                pointer-events: all;
+                cursor: context-menu;
+            }
+        }
+        .menu-icon1.show {
             opacity: 1;
             pointer-events: all;
             cursor: context-menu;
         }
-    }
-    .menu-icon.show {
-        opacity: 1;
-        pointer-events: all;
-        cursor: context-menu;
-    }
 }
 </style>