fix: 条件组件弹框样式

frontend/src/styles/index.scss

@@ -744,6 +744,12 @@ div:focus {
   border: 1px solid #999999!important;
   margin: 0 0 6px 6px!important;
 }
-
+.de-checkbox {
+  width: 100%;
+  margin-left: 0px !important;
+  .el-checkbox__input {
+    padding: 0 0 8px 0 !important;
+  }
+}
 
 

frontend/src/views/panel/filter/filterDialog.vue

@@ -7,7 +7,8 @@
           <div class="component-header filter-common">
             <el-breadcrumb separator-class="el-icon-arrow-right">
               <el-breadcrumb-item v-for="bread in dataSetBreads" :key="bread.label">
-                <a v-if="bread.link" :class="{'link-text' : bread.link}" @click="backToLink(bread)"> {{ bread.label }}</a>
+                <a v-if="bread.link" :class="{'link-text' : bread.link}" @click="backToLink(bread)">
+                  {{ bread.label }}</a>
                 <span v-else>{{ bread.label }}</span>
               </el-breadcrumb-item>
             </el-breadcrumb>
@@ -66,7 +67,12 @@
                     @start="start1"
                   >
                     <transition-group>
-                      <div v-for="item in fieldDatas.filter(item => !keyWord || (item.name && item.name.toLocaleLowerCase().includes(keyWord)))" :key="item.id" :class="componentInfo && componentInfo.options.attrs.fieldId === item.id ? 'filter-db-row-checked' : 'filter-db-row'" class="filter-db-row">
+                      <div
+                        v-for="item in fieldDatas.filter(item => !keyWord || (item.name && item.name.toLocaleLowerCase().includes(keyWord)))"
+                        :key="item.id"
+                        :class="componentInfo && componentInfo.options.attrs.fieldId === item.id ? 'filter-db-row-checked' : 'filter-db-row'"
+                        class="filter-db-row"
+                      >
                         <i class="el-icon-s-data" />
                         <span> {{ item.name }}</span>
                       </div>
@@ -81,7 +87,8 @@
           <div class="component-header filter-common">
             <el-breadcrumb separator-class="el-icon-arrow-right">
               <el-breadcrumb-item v-for="bread in componentSetBreads" :key="bread.label">
-                <a v-if="bread.link" :class="{'link-text' : bread.link}" @click="comBackLink(bread)"> {{ bread.label }}</a>
+                <a v-if="bread.link" :class="{'link-text' : bread.link}" @click="comBackLink(bread)">
+                  {{ bread.label }}</a>
                 <span v-else>{{ bread.label }}</span>
               </el-breadcrumb-item>
             </el-breadcrumb>
@@ -135,7 +142,12 @@
                     @start="start1"
                   >
                     <transition-group>
-                      <div v-for="item in comFieldDatas.filter(item => !viewKeyWord || item.name.toLocaleLowerCase().includes(viewKeyWord))" :key="item.id" :class="componentInfo && componentInfo.options.attrs.fieldId === item.id ? 'filter-db-row-checked' : 'filter-db-row'" class="filter-db-row">
+                      <div
+                        v-for="item in comFieldDatas.filter(item => !viewKeyWord || item.name.toLocaleLowerCase().includes(viewKeyWord))"
+                        :key="item.id"
+                        :class="componentInfo && componentInfo.options.attrs.fieldId === item.id ? 'filter-db-row-checked' : 'filter-db-row'"
+                        class="filter-db-row"
+                      >
                         <i class="el-icon-s-data" />
                         <span> {{ item.name }}</span>
                       </div>
@@ -171,7 +183,13 @@
                       @end="end2"
                     >
                       <transition-group class="list-group" :data-value="$t('panel.drag_here')">
-                        <drag-item v-for="(item,index) in selectField" :key="item.id" :item="item" :index="index" @closeItem="closeItem" />
+                        <drag-item
+                          v-for="(item,index) in selectField"
+                          :key="item.id"
+                          :item="item"
+                          :index="index"
+                          @closeItem="closeItem"
+                        />
                       </transition-group>
                     </draggable>
                   </el-row>
@@ -192,24 +210,39 @@
               />
             </div>
           </el-col>
-          <el-col :span="16"><div class="filter-options-right">
+          <el-col :span="16">
+            <div class="filter-options-right">
               <span style="padding-right: 10px;">
-              <el-checkbox v-model="componentInfo.options.attrs.showTitle" @change="showTitleChange">显示标题</el-checkbox>
+                <el-checkbox v-model="componentInfo.options.attrs.showTitle" @change="showTitleChange">显示标题
+                </el-checkbox>
                 <el-popover
                   v-model="titlePopovervisible"
                   placement="bottom-end"
                   :disabled="!componentInfo.options.attrs.showTitle"
                   width="200"
                 >
-                <div style="width: 100%;overflow-y: auto;overflow-x: hidden;word-break: break-all;position: relative;">
-                  <el-input v-model="componentInfo.options.attrs.title" placeholder="请输入标题" type="textarea" maxlength="15" show-word-limit />
+                  <div
+                    style="width: 100%;overflow-y: auto;overflow-x: hidden;word-break: break-all;position: relative;"
+                  >
+                    <el-input
+                      v-model="componentInfo.options.attrs.title"
+                      placeholder="请输入标题"
+                      type="textarea"
+                      maxlength="15"
+                      show-word-limit
+                    />
                   </div>
 
-                <i slot="reference" :class="{'i-filter-active': componentInfo.options.attrs.showTitle, 'i-filter-inactive': !componentInfo.options.attrs.showTitle}" class="el-icon-setting i-filter" />
+                  <i
+                    slot="reference"
+                    :class="{'i-filter-active': componentInfo.options.attrs.showTitle, 'i-filter-inactive': !componentInfo.options.attrs.showTitle}"
+                    class="el-icon-setting i-filter"
+                  />
                 </el-popover>
               </span>
               <span style="padding-left: 10px;">
-              <el-checkbox v-model="componentInfo.options.attrs.enableRange" @change="enableRangeChange"><span>  {{ $t('panel.custom_scope') }} </span> </el-checkbox>
+                <el-checkbox v-model="componentInfo.options.attrs.enableRange" @change="enableRangeChange"><span>
+                  {{ $t('panel.custom_scope') }} </span> </el-checkbox>
 
                 <el-popover
                   v-model="popovervisible"
@@ -219,16 +252,27 @@
                 >
                   <div class="view-container-class">
                     <el-checkbox-group v-model="componentInfo.options.attrs.viewIds" @change="checkedViewsChange">
-                    <el-checkbox v-for="(item ) in viewInfos" :key="item.id" :label="item.id">
-                      <span>
+                      <el-checkbox v-for="(item ) in viewInfos" :key="item.id" :label="item.id" class="de-checkbox">
+                        <div class="span-div">
                           <svg-icon :icon-class="item.type" class="chart-icon" />
+                          <span
+                            v-if="item.name && item.name.length <= 7"
+                            style="margin-left: 6px"
+                          >{{ item.name }}</span>
+                          <el-tooltip v-else class="item" effect="dark" :content="item.name" placement="left">
                             <span style="margin-left: 6px">{{ item.name }}</span>
-                      </span>
+                          </el-tooltip>
+                        </div>
+
                       </el-checkbox>
                     </el-checkbox-group>
                   </div>
 
-                <i slot="reference" :class="{'i-filter-active': componentInfo.options.attrs.enableRange, 'i-filter-inactive': !componentInfo.options.attrs.enableRange}" class="el-icon-setting i-filter" />
+                  <i
+                    slot="reference"
+                    :class="{'i-filter-active': componentInfo.options.attrs.enableRange, 'i-filter-inactive': !componentInfo.options.attrs.enableRange}"
+                    class="el-icon-setting i-filter"
+                  />
                 </el-popover>
               </span>
             </div>
@@ -261,11 +305,22 @@ import DeContainer from '@/components/dataease/DeContainer'
 import DeAsideContainer from '@/components/dataease/DeAsideContainer'
 import draggable from 'vuedraggable'
 import DragItem from '@/components/DragItem'
-import { mapState } from 'vuex'
-// import { ApplicationContext } from '@/utils/ApplicationContext'
-import { groupTree, fieldList, fieldValues, post } from '@/api/dataset/dataset'
-import { viewsWithIds } from '@/api/panel/view'
-import { authModel } from '@/api/system/sysAuth'
+import {
+  mapState
+} from 'vuex'
+  // import { ApplicationContext } from '@/utils/ApplicationContext'
+import {
+  groupTree,
+  fieldList,
+  fieldValues,
+  post
+} from '@/api/dataset/dataset'
+import {
+  viewsWithIds
+} from '@/api/panel/view'
+import {
+  authModel
+} from '@/api/system/sysAuth'
 export default {
   name: 'FilterDialog',
   components: {
@@ -292,12 +347,16 @@ export default {
       activeName: 'dataset',
       showDomType: 'tree',
       comShowDomType: 'view',
-      dataSetBreads: [
-        { label: this.$t('panel.data_list'), link: false, type: 'root' }
-      ],
-      componentSetBreads: [
-        { label: this.$t('panel.component_list'), link: false, type: 'root' }
-      ],
+      dataSetBreads: [{
+        label: this.$t('panel.data_list'),
+        link: false,
+        type: 'root'
+      }],
+      componentSetBreads: [{
+        label: this.$t('panel.component_list'),
+        link: false,
+        type: 'root'
+      }],
       datas: [],
       sceneDatas: [],
       //   viewDatas: [],
@@ -441,7 +500,8 @@ export default {
         // 判断根节点 ###
         el.type = el.modelInnerType
         el.isLeaf = el.leaf
-        if (el[this.defaultProps.parentId] === null || el[this.defaultProps.parentId] === 0 || el[this.defaultProps.parentId] === '0') {
+        if (el[this.defaultProps.parentId] === null || el[this.defaultProps.parentId] === 0 || el[this
+          .defaultProps.parentId] === '0') {
           roots.push(el)
           return
         }
@@ -512,11 +572,19 @@ export default {
       tail.link = true
     },
     addTail(node) {
-      const tail = { link: false, label: node.label || node.name, type: node.type }
+      const tail = {
+        link: false,
+        label: node.label || node.name,
+        type: node.type
+      }
       this.dataSetBreads.push(tail)
     },
     comAddTail(node) {
-      const tail = { link: false, label: node.label || node.name, type: node.type }
+      const tail = {
+        link: false,
+        label: node.label || node.name,
+        type: node.type
+      }
       this.componentSetBreads.push(tail)
     },
 
@@ -668,16 +736,19 @@ export default {
     }
   }
 }
+
 </script>
 
 <style lang="scss" scoped>
   .my-form-item {
     cursor: text;
   }
+
   .de-dialog-container {
     height: 50vh !important;
 
   }
+
   .ms-aside-container {
     width: 40% !important;
     min-width: 230px !important;
@@ -699,6 +770,7 @@ export default {
     //   background: #99a9bf;
     border-radius: 4px;
     height: 45px;
+
     .field-content {
       position: relative;
       display: table;
@@ -716,7 +788,9 @@ export default {
         padding: 8px;
         height: 100%;
         border-right: none;
-            border: 1px solid var(--TableBorderColor, #E6E6E6);;
+        border: 1px solid var(--TableBorderColor, #E6E6E6);
+        ;
+
         .field-content-text {
           box-sizing: border-box;
           overflow: hidden;
@@ -725,6 +799,7 @@ export default {
           word-break: break-all;
         }
       }
+
       .field-content-right {
         border-left: none;
         color: #9ea6b2;
@@ -741,6 +816,7 @@ export default {
     }
 
   }
+
   .filter-options-left {
     align-items: center;
     display: flex;
@@ -749,6 +825,7 @@ export default {
     flex-wrap: nowrap;
     height: 50px;
   }
+
   .filter-options-right {
     align-items: center;
     display: flex;
@@ -768,7 +845,8 @@ export default {
     border: 1px solid var(--TableBorderColor, #E6E6E6);
     padding: 10px;
     height: 100%;
-      >>> div.el-tabs__content {
+
+    >>>div.el-tabs__content {
       height: calc(100% - 55px);
     }
   }
@@ -791,54 +869,66 @@ export default {
     font-weight: 450 !important;
     color: #409EFF;
   }
+
   .filter-db-row {
     i {
       color: #3685f2;
     }
+
     // background-color: #3685f2;
     // color: #fff;
   }
+
   .filter-db-row:hover {
     background-color: var(--background-color-base, #f5f7fa) !important;
     cursor: pointer;
   }
+
   .filter-db-row-checked:hover {
     background-color: var(--background-color-base, #f5f7fa) !important;
     color: inherit;
     cursor: pointer;
+
     i {
       background-color: inherit;
       color: #3685f2;
     }
   }
+
   .filter-db-row-checked {
     background-color: #3685f2 !important;
     color: #fff;
+
     i {
       background-color: #3685f2;
       color: #fff;
     }
   }
+
   .draggable-group {
     display: inline-block;
     width: 100%;
     height: calc(100% - 6px);
   }
+
   .box-card {
     width: 100%;
     height: 100%;
   }
+
   .i-filter {
     text-align: center;
     margin-left: 5px;
     margin-top: 1px;
   }
+
   .i-filter-inactive {
-      color: #9ea6b2!important;
-      cursor: not-allowed!important;
+    color: #9ea6b2 !important;
+    cursor: not-allowed !important;
   }
+
   .i-filter-active {
-      cursor: pointer!important;
+    cursor: pointer !important;
   }
 
   .view-container-class {
@@ -848,23 +938,20 @@ export default {
     width: 100%;
     overflow-y: auto;
     overflow-x: hidden;
-      word-break:break-all;
+    word-break: break-all;
     position: relative;
-        >>> label {
-            width: 100%;
-            margin-left: 0px !important;
-        }
+
   }
 
   .list-group:empty,
-  .list-group > div:empty {
+  .list-group>div:empty {
     display: inline-block;
     width: 100%;
     height: calc(100% - 13px);
   }
 
   .list-group:empty:before,
-  .list-group > div:empty:before {
+  .list-group>div:empty:before {
     content: attr(data-value);
   }
 
@@ -872,4 +959,11 @@ export default {
     background-color: var(--MainBG, #fff);
   }
 
+  .span-div {
+    width: 135px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
 </style>