From 3a520a0d1f47c2dc480379bb7ce9ef39e25c5e81 Mon Sep 17 00:00:00 2001
From: kun <1422840143@qq.com>
Date: Mon, 8 Apr 2024 15:09:54 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20BUG=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/companyAdmin/companyDiagram.vue     |   5 -
 .../questionManagement/questionManagement.vue | 229 ++++++++++--------
 2 files changed, 131 insertions(+), 103 deletions(-)

diff --git a/src/views/companyAdmin/companyDiagram.vue b/src/views/companyAdmin/companyDiagram.vue
index 0bf17e45..ed11311e 100644
--- a/src/views/companyAdmin/companyDiagram.vue
+++ b/src/views/companyAdmin/companyDiagram.vue
@@ -2075,11 +2075,6 @@ export default {
       editGroupForm: {
         groupId: "",
       },
-      treeData: [
-        { id: 1, label: "一级 1", children: [{ id: 11, label: "二级 1-1" }] },
-        { id: 2, label: "一级 2", children: [{ id: 21, label: "二级 2-1" }] },
-        { id: 3, label: "一级 3", children: [{ id: 31, label: "二级 3-1" }] },
-      ],
       selectTreeProps: {
         children: "children",
         label: "label",
diff --git a/src/views/projectFront/examSystem/questionManagement/questionManagement.vue b/src/views/projectFront/examSystem/questionManagement/questionManagement.vue
index 294b6b7d..bb10718c 100644
--- a/src/views/projectFront/examSystem/questionManagement/questionManagement.vue
+++ b/src/views/projectFront/examSystem/questionManagement/questionManagement.vue
@@ -1,30 +1,108 @@
 <template>
-  <div class="reportForm">
+  <div class="main-content">
     <div class="left">
-      <div class="menu-list">
-        <div
-          class="menu-item"
-          :class="{ 'active-menu': activeNav == 1 }"
-          @click="checkNav(1)"
+      <div class="left-title">
+        科目类别
+      </div>
+      <div class="left-tree">
+        <el-tree
+          :data="level1CompanyData"
+          :highlight-current="true"
+          :check-on-click-node="false"
+          :props="defaultProps"
+          style="margin-top: 10px;"
+          ref="groupTree"
         >
-          <!-- 实时数据 -->
-          {{ $t("message.unload.realData") }}
-        </div>
+          <span class="custom-tree-node" slot-scope="{ node, data }">
+            <span
+              style="
+                    width: 100%;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    display: inline-block;
+                  "
+              class="courseName"
+              :title="node.label"
+              >{{ node.label }}</span
+            >
+          </span>
+        </el-tree>
       </div>
     </div>
     <div class="right">
-      <div class="reportTable">
-      </div>
+      <div class="reportTable"></div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "reportForm",
+  name: "questionManagement",
   data() {
     return {
-      activeNav: 1
+      activeNav: 1,
+      level1CompanyData: [
+        {
+          label: "一级 1",
+          children: [
+            {
+              label: "二级 1-1",
+              children: [
+                {
+                  label: "三级 1-1-1",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: "一级 2",
+          children: [
+            {
+              label: "二级 2-1",
+              children: [
+                {
+                  label: "三级 2-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 2-2",
+              children: [
+                {
+                  label: "三级 2-2-1",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: "一级 3",
+          children: [
+            {
+              label: "二级 3-1",
+              children: [
+                {
+                  label: "三级 3-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 3-2",
+              children: [
+                {
+                  label: "三级 3-2-1",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
     };
   },
   methods: {
@@ -36,102 +114,57 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.reportForm {
-  width: 100%;
-  height: 100%;
-  .left {
-    float: left;
-    width: 188px;
-    margin-right: 0;
-    padding-top: 28px;
-    box-sizing: border-box;
-    height: 100%;
-    background: #fff;
-    .menu-list {
-      .menu-item {
-        color: #7c829e;
-        padding-left: 28px;
-        width: 100%;
-        height: 30px;
-        box-sizing: border-box;
-        line-height: 30px;
-        margin-bottom: 10px;
-        cursor: pointer;
-        position: relative;
-      }
-      .menu-item:hover {
-        background: rgba(78, 124, 255, 0.1);
-        color: #4e7cff;
-      }
-      .active-menu {
-        background: rgba(78, 124, 255, 0.25) !important;
-        color: #4e7cff;
-      }
-      .active-menu::before {
-        content: "";
-        width: 3px;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        background: #4e7cff;
-      }
-    }
-  }
-  .right {
-    float: right;
-    width: calc(100% - 208px);
-    height: 100%;
-    margin-left: 20px;
-  }
+.flex() {
+  display: flex;
+  align-items: center;
 }
-.reportTable {
+.flexColumn() {
+  display: flex;
+  flex-direction: column;
+}
+.main-content {
   width: 100%;
   height: 100%;
+  .flex();
+  > div {
+    background: #ffffff;
+  }
   .left {
-    float: left;
-    width: 188px;
-    margin-right: 0;
-    padding-top: 28px;
-    box-sizing: border-box;
+    width: 280px;
     height: 100%;
-    background: #fff;
-    .menu-list {
-      .menu-item {
-        color: #7c829e;
-        padding-left: 28px;
+    margin-right: 20px;
+    .flexColumn();
+    &-title {
+      height: 18px;
+      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-weight: 500;
+      font-size: 14px;
+      color: #272d45;
+      border-left: 2px solid #5c81ee;
+      padding-left: 5px;
+      margin: 15px 20px 12px 20px;
+    }
+    &-tree {
+      flex: 1;
+      margin: 0px 20px 20px 20px;
+      background: #f7f7f7;
+      .custom-tree-node {
         width: 100%;
-        height: 30px;
-        box-sizing: border-box;
-        line-height: 30px;
-        margin-bottom: 10px;
-        cursor: pointer;
-        position: relative;
-      }
-      .menu-item:hover {
-        background: rgba(78, 124, 255, 0.1);
-        color: #4e7cff;
-      }
-      .active-menu {
-        background: rgba(78, 124, 255, 0.25) !important;
-        color: #4e7cff;
-      }
-      .active-menu::before {
-        content: "";
-        width: 3px;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        background: #4e7cff;
+        .courseName {
+          font-size: 16px;
+          font-weight: bold;
+          display: inline-block;
+          width: 192px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
       }
     }
   }
   .right {
-    float: right;
-    width: calc(100% - 208px);
+    width: calc(100% - 300px);
     height: 100%;
-    margin-left: 20px;
   }
 }
 </style>