From aa351f0c2dda67f45a67196eb494240062c0c0bf Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Fri, 11 Nov 2022 19:40:21 +0800
Subject: [PATCH] =?UTF-8?q?pref:=20=E4=BF=AE=E6=94=B9=20asset=20table?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AssetSelect/index.vue | 37 +++++++++++++-------
 src/components/TreeTable/index.vue   | 52 ++++++++++++++++++++++------
 2 files changed, 66 insertions(+), 23 deletions(-)

diff --git a/src/components/AssetSelect/index.vue b/src/components/AssetSelect/index.vue
index 50aec0fb2..cc3bd7a96 100644
--- a/src/components/AssetSelect/index.vue
+++ b/src/components/AssetSelect/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="asset-select-dialog">
+  <div class="asset-select-formatter">
     <Select2
       ref="select2"
       v-model="select2Config.value"
@@ -20,6 +20,7 @@
     >
       <TreeTable
         ref="ListPage"
+        class="tree-table"
         :tree-setting="treeSetting"
         :table-config="tableConfig"
         :header-actions="headerActions"
@@ -183,24 +184,34 @@ export default {
 </script>
 
 <style lang='scss' scoped>
-  .el-select{
+  .el-select {
     width: 100%;
   }
-  .page  ::v-deep  .page-heading{
+
+  .page ::v-deep .page-heading {
     display: none;
   }
-  .el-dialog__wrapper  ::v-deep .el-dialog__body{
-    padding: 5px 10px;
-  }
-  .page  ::v-deep  .treebox {
-    height: inherit !important;
-  }
-  .asset-select-dialog >>> .transition-box:first-child {
-    background-color: #f3f3f3 ;
+
+  .el-dialog__wrapper ::v-deep .el-dialog__body {
+    padding: 0;
+
+    .tree-table {
+      .left {
+        padding: 5px;
+      }
+
+      .mini {
+        padding-top: 8px;
+      }
+
+      .transition-box {
+        padding: 5px;
+      }
+    }
   }
 
-  .el-dialog__wrapper  ::v-deep .el-dialog__body .wrapper-content {
-    padding: 10px;
+  .page ::v-deep .treebox {
+    height: inherit !important;
   }
 
 </style>
diff --git a/src/components/TreeTable/index.vue b/src/components/TreeTable/index.vue
index 54efaac96..90613a306 100644
--- a/src/components/TreeTable/index.vue
+++ b/src/components/TreeTable/index.vue
@@ -1,7 +1,10 @@
 <template>
   <el-collapse-transition>
-    <div style="display: flex;justify-items: center; flex-wrap: nowrap;justify-content:space-between;">
-      <div v-show="iShowTree" :style="iShowTree?('width:20%;'):('width:0;')" class="transition-box left">
+    <div
+      class="tree-table-content"
+      style="display: flex;justify-items: center; flex-wrap: nowrap;justify-content:space-between;"
+    >
+      <div v-show="iShowTree" :style="iShowTree?('width:20%;'):('width:0;')" class="left">
         <component
           :is="component"
           ref="AutoDataZTree"
@@ -16,7 +19,10 @@
           </div>
         </component>
       </div>
-      <div :style="iShowTree?('display: flex;width: calc(100% - 20%);'):('display: flex;width:100%;')">
+      <div
+        class="right"
+        :style="iShowTree?('display: flex;width: calc(100% - 20%);'):('display: flex;width:100%;')"
+      >
         <div v-if="showTree" class="mini">
           <div style="display:block" class="mini-button" @click="iShowTree = !iShowTree">
             <i v-show="iShowTree" class="fa fa-angle-left fa-x" />
@@ -128,7 +134,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .mini-button{
+  .mini-button {
     width: 12px;
     float: right;
     text-align: center;
@@ -138,21 +144,47 @@ export default {
     color: #FFFFFF;
     border-radius: 3px;
     line-height: 1.428;
-    cursor:pointer;
+    cursor: pointer;
   }
-  .el-tree{
+
+  .el-tree {
     background-color: inherit !important;
   }
-  .mini{
+
+  .mini {
     margin-right: 5px;
     width: 12px !important;
   }
 
+  .tree-table-content {
+    .left {
+      border-right: solid 1px #ebeef5;
+      background: #f3f3f3;
+    }
+
+    .right {
+    }
+
+    .treebox {
+      background-color: transparent;
+
+      .ztree {
+        background-color: transparent;
+
+        li {
+          background-color: transparent;
+        }
+      }
+
+      .ztree * {
+        background-color: transparent;
+      }
+    }
+  }
+
   .auto-data-ztree {
     overflow: auto;
     /*border-right: solid 1px red;*/
   }
-  .transition-box.left {
-    background: #f3f3f3;
-  }
+
 </style>