From e758f9e14ca742fabfe2bb4dc83ba479340232ae Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Fri, 15 Apr 2022 15:22:30 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=BF=87=E6=BB=A4=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=BC=B9=E6=A1=86=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/panel/filter/filterDialog.vue   | 46 ++++++++++++++-----
 .../panel/filter/filterMain/FilterHead.vue    | 11 +++--
 2 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/frontend/src/views/panel/filter/filterDialog.vue b/frontend/src/views/panel/filter/filterDialog.vue
index 115c0185c0..6b6ddea4f3 100644
--- a/frontend/src/views/panel/filter/filterDialog.vue
+++ b/frontend/src/views/panel/filter/filterDialog.vue
@@ -39,7 +39,7 @@
                   :load="loadTree"
                   @node-click="handleNodeClick"
                 >
-                  <div slot-scope="{ node, data }" class="custom-tree-node">
+                  <span slot-scope="{ node, data }" style="display: flex;flex: 1;width: 0%;" class="custom-tree-node">
                     <span>
                       <svg-icon v-if="data.type === 'db'" icon-class="ds-db" class="ds-icon-db" />
                       <svg-icon v-if="data.type === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
@@ -48,12 +48,14 @@
                       <svg-icon v-if="data.type === 'union'" icon-class="ds-union" class="ds-icon-union" />
                       <svg-icon v-if="data.type === 'api'" icon-class="ds-api" class="ds-icon-api" />
                     </span>
-                    <el-tooltip class="item" effect="dark" placement="top">
-                      <div slot="content">{{ node.label }}</div>
-                      <span class="label-span">{{ node.label }}</span>
-                    </el-tooltip>
+                    <span v-if="data.modelInnerType === 'db' || data.modelInnerType === 'sql'">
+                      <span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>
+                      <span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-alarm-clock" /></span>
+                    </span>
 
-                  </div>
+                    <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="node.label">{{ node.label }}</span>
+
+                  </span>
                 </el-tree>
 
                 <div v-if="showDomType === 'field'">
@@ -71,9 +73,15 @@
                         :key="item.id"
                         :class="myAttrs && myAttrs.fieldId && myAttrs.fieldId.includes(item.id) ? 'filter-db-row-checked' : 'filter-db-row'"
                         class="filter-db-row"
+                        style="margin: 5px 0;"
                       >
-                        <i class="el-icon-s-data" />
-                        <span> {{ item.name }}</span>
+                        <span style="display: flex;flex: 1;">
+                          <span>
+                            <i class="el-icon-s-data" />
+                          </span>
+
+                          <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="item.name">{{ item.name }}</span>
+                        </span>
                       </div>
                     </transition-group>
                   </draggable>
@@ -122,8 +130,15 @@
                   <el-table-column prop="name" :label="$t('commons.name')">
                     <template v-if="comShowDomType === 'view'" :id="scope.row.id" slot-scope="scope">
                       <div class="filter-db-row" @click="comShowFieldDatas(scope.row)">
-                        <i class="el-icon-s-data" />
-                        <span> {{ scope.row.name }}</span>
+                        <!-- <i class="el-icon-s-data" />
+                        <span> {{ scope.row.name }}</span> -->
+                        <span style="display: flex;flex: 1;">
+                          <span>
+                            <i class="el-icon-s-data" />
+                          </span>
+
+                          <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="scope.row.name">{{ scope.row.name }}</span>
+                        </span>
                       </div>
                     </template>
                   </el-table-column>
@@ -144,9 +159,16 @@
                         :key="item.id"
                         :class="myAttrs && myAttrs.fieldId && myAttrs.fieldId.includes(item.id) ? 'filter-db-row-checked' : 'filter-db-row'"
                         class="filter-db-row"
+                        style="margin: 5px 0;"
                       >
-                        <i class="el-icon-s-data" />
-                        <span> {{ item.name }}</span>
+                        <span style="display: flex;flex: 1;">
+                          <span>
+                            <i class="el-icon-s-data" />
+                          </span>
+
+                          <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="item.name">{{ item.name }}</span>
+                        </span>
+
                       </div>
                     </transition-group>
                   </draggable>
diff --git a/frontend/src/views/panel/filter/filterMain/FilterHead.vue b/frontend/src/views/panel/filter/filterMain/FilterHead.vue
index 9858627c7a..e0aface874 100644
--- a/frontend/src/views/panel/filter/filterMain/FilterHead.vue
+++ b/frontend/src/views/panel/filter/filterMain/FilterHead.vue
@@ -5,7 +5,7 @@
         <div class="field-content">
 
           <div class="field-content-right">
-            <el-row style="display:flex;height: 32px;">
+            <el-row style="display:inline-flex;height: 32px;width: auto;">
               <draggable
                 v-model="element.options.attrs.dragItems"
                 group="dimension"
@@ -78,7 +78,7 @@ export default {
 <style lang="scss" scoped>
   .filter-field {
     border-radius: 4px;
-    height: 45px;
+    height: 40px;
 
     .field-content {
       position: relative;
@@ -113,14 +113,15 @@ export default {
         border-left: none;
         color: #9ea6b2;
         border: 1px solid var(--TableBorderColor, #E6E6E6);
-        width: 0%;
+        width: auto;
         max-width: 0%;
         position: relative;
-        display: table-cell;
+        display: inherit;
         vertical-align: middle;
         margin: 0px;
-        padding: 0 0 0 0;
+        padding: 4px 0 0 0;
         height: 100%;
+        line-height: 100%;
       }
     }