style: 过滤组件样式

frontend/src/components/dataease/DeOutWidget.vue

@@ -10,10 +10,18 @@
           </div>
         </div>
       </div>
-      <div ref="deContentContainer" class="condition-content" :class="element.options.attrs.title ? '' : 'condition-content-default'">
+      <div
+        ref="deContentContainer"
+        class="condition-content"
+        :class="element.options.attrs.title ? '' : 'condition-content-default'"
+      >
         <div class="condition-content-container">
           <div class="first-element">
-            <div :class="element.component === 'de-select-grid' ? 'first-element-grid-contaner': ''" class="first-element-contaner">
+            <div
+              :class="element.component === 'de-select-grid' ? 'first-element-grid-contaner': ''"
+              class="first-element-contaner"
+            >
+
               <component
                 :is="element.component"
                 v-if="element.type==='custom'"
@@ -27,6 +35,7 @@
               />
             </div>
           </div>
+
         </div>
       </div>
     </div>
@@ -71,6 +80,7 @@ export default {
     sizeInfo() {
       let size
       if (this.h > this.inputMaxSize) {
+        return size
       } else if (this.h > this.inputLargeSize) {
         size = 'medium'
       } else if (this.h > this.inputSmallSize) {
@@ -99,14 +109,12 @@ export default {
         const titleWidth = this.$refs.deTitle.offsetWidth
         const deContentContainer = this.$refs.deContentContainer
         this.$nextTick(() => {
-          let min = 75
+          let min = this.element.style.fontSize * 2 + 50
           if (this.element.component === 'de-number-range') {
-            min = 105
+            min = this.element.style.fontSize * 2 + 80
           }
           if (height < min) {
-            // console.log(titleWidth)
             this.mainClass = 'condition-main-line'
-            /* deContentContainer && (deContentContainer.style.inset = '0 0 0 ' + (titleWidth + 15) + 'px') */
 
             if (deContentContainer) {
               deContentContainer.style.top = '0px'
@@ -114,9 +122,8 @@ export default {
             }
           } else {
             this.mainClass = ''
-            /* deContentContainer && (deContentContainer.style.inset = '33px 0px 0px') */
             if (deContentContainer) {
-              deContentContainer.style.top = '33px'
+              deContentContainer.style.top = '2em'
               deContentContainer.style.marginLeft = '0px'
             }
           }
@@ -125,37 +132,38 @@ export default {
     }
   }
 }
+
 </script>
 
 <style lang="scss" scoped>
   .my-container {
     position: absolute;
     overflow: auto;
-    /* inset: 0px; */
-    top:0px;
+    top: 0px;
     right: 0px;
     bottom: 0px;
     left: 0px;
   }
+
   .ccondition-main {
     position: absolute;
     overflow: auto;
-    /* inset: 0px; */
-    top:0px;
+    top: 0px;
     right: 0px;
     bottom: 0px;
     left: 0px;
   }
+
   .condition-title {
-    /* inset: 0; */
-    top:0px;
+    top: 0px;
     right: 0px;
     bottom: 0px;
     left: 0px;
     position: absolute;
-    height: 35px;
+    height: 2em;
     cursor: -webkit-grab;
   }
+
   .first-title {
     width: 100%;
     overflow: hidden;
@@ -166,12 +174,13 @@ export default {
   }
 
   .condition-title-absolute {
-    /* inset: 0px 0px; */
     right: 0px;
     bottom: 0px;
     position: absolute;
-    top: 15px;
+    top: 0px;
     left: 4px;
+    display: flex;
+    align-items: flex-end;
   }
 
   .span-container {
@@ -182,14 +191,14 @@ export default {
 
   .condition-content {
     overflow: auto hidden;
-    /* inset: 33px 0px 0px; */
-    top: 33px;
+    top: 2em;
     left: 0px;
     right: 0px;
     bottom: 0px;
     position: absolute;
-    letter-spacing: 0px!important;
+    letter-spacing: 0px !important;
   }
+
   .condition-content-container {
     position: relative;
     display: table;
@@ -197,6 +206,7 @@ export default {
     height: 100%;
     white-space: nowrap;
   }
+
   .first-element {
     position: relative;
     display: table-cell;
@@ -205,25 +215,34 @@ export default {
     padding: 0px;
     height: 100%;
   }
+
   .first-element-contaner {
-      width: calc(100% - 10px);
-      background: initial;
-      position:absolute;
-      bottom: 5px;
-      margin: 0 4px;
-      div {
-          width: 100%;
-      }
+    width: calc(100% - 10px);
+    background: initial;
+    position: absolute;
+    bottom: 5px;
+    margin: 0 4px;
+
+    div {
+      width: 100%;
+    }
+
+    display: flex;
+    align-items: flex-end;
   }
+
   .first-element-grid-contaner {
-      background: #fff;
-      border: 1px solid #d7dae2;
-      top: 5px;
+    background: #fff;
+    border: 1px solid #d7dae2;
+    top: 5px;
   }
+
   .condition-main-line {
-      height: 40px !important;
+    height: 40px !important;
   }
+
   .condition-content-default {
-      inset: 0px 0px 0px !important;
+    inset: 0px 0px 0px !important;
   }
+
 </style>

frontend/src/components/widget/DeWidget/DeDate.vue

@@ -19,9 +19,13 @@
 </template>
 
 <script>
-import { ApplicationContext } from '@/utils/ApplicationContext'
-import { timeSection } from '@/utils'
-import bus from "@/utils/bus";
+import {
+  ApplicationContext
+} from '@/utils/ApplicationContext'
+import {
+  timeSection
+} from '@/utils'
+import bus from '@/utils/bus'
 export default {
 
   props: {
@@ -92,7 +96,8 @@ export default {
     }
   },
   created() {
-    if (this.element.serviceName === 'timeDateWidget' && this.element.options.attrs.default && this.element.options.attrs.default.isDynamic) {
+    if (this.element.serviceName === 'timeDateWidget' && this.element.options.attrs.default && this.element.options
+      .attrs.default.isDynamic) {
       if (this.element.options.attrs.default) {
         const widget = ApplicationContext.getService(this.element.serviceName)
         this.values = widget.dynamicDateFormNow(this.element)
@@ -172,15 +177,16 @@ export default {
     fillValueDerfault() {
       const defaultV = this.element.options.value === null ? '' : this.element.options.value.toString()
       if (this.element.options.attrs.type === 'daterange') {
-        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') return []
+        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') { return [] }
         return defaultV.split(',').map(item => parseFloat(item))
       } else {
-        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') return null
+        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') { return null }
         return parseFloat(defaultV.split(',')[0])
       }
     }
   }
 }
+
 </script>
 
 <style lang="scss" scoped>

frontend/src/components/widget/DeWidget/DeSelectGrid.vue

@@ -2,12 +2,19 @@
 
   <div v-if="element.options!== null && element.options.attrs!==null && show" class="de-select-grid-class">
     <div class="de-select-grid-search">
-      <el-input v-model="keyWord" :placeholder="$t('deinputsearch.placeholder')" :size="size" prefix-icon="el-icon-search" clearable />
+      <el-input
+        v-model="keyWord"
+        :placeholder="$t('deinputsearch.placeholder')"
+        :size="size"
+        prefix-icon="el-icon-search"
+        clearable
+      />
     </div>
     <div class="list">
 
       <div v-if="element.options.attrs.multiple" class="checkbox-group-container">
-        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">{{ $t('commons.all') }}</el-checkbox>
+        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
+          {{ $t('commons.all') }}</el-checkbox>
 
         <el-checkbox-group v-model="value" @change="handleCheckedChange">
           <el-checkbox v-for="item in datas" :key="item.id" :label="item.id">{{ item.id }}</el-checkbox>
@@ -27,7 +34,9 @@
 </template>
 
 <script>
-import { multFieldValues } from '@/api/dataset/dataset'
+import {
+  multFieldValues
+} from '@/api/dataset/dataset'
 export default {
 
   props: {
@@ -100,10 +109,10 @@ export default {
       if (typeof value === 'undefined' || value === old) return
       this.datas = []
       this.element.options.attrs.fieldId &&
-      this.element.options.attrs.fieldId.length > 0 &&
-      multFieldValues(this.element.options.attrs.fieldId.split(',')).then(res => {
-        this.datas = this.optionDatas(res.data)
-      }) || (this.element.options.value = '')
+          this.element.options.attrs.fieldId.length > 0 &&
+          multFieldValues(this.element.options.attrs.fieldId.split(',')).then(res => {
+            this.datas = this.optionDatas(res.data)
+          }) || (this.element.options.value = '')
     },
     'element.options.attrs.multiple': function(value, old) {
       if (typeof old === 'undefined' || value === old) return
@@ -167,10 +176,10 @@ export default {
     fillValueDerfault() {
       const defaultV = this.element.options.value === null ? '' : this.element.options.value.toString()
       if (this.element.options.attrs.multiple) {
-        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') return []
+        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') { return [] }
         return defaultV.split(',')
       } else {
-        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') return null
+        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') { return null }
         return defaultV.split(',')[0]
       }
     },
@@ -204,41 +213,49 @@ export default {
 
   }
 }
+
 </script>
 
 <style lang="scss" scoped>
+  .de-select-grid-search {
+    >>>input {
+      border-radius: 0px;
 
-.de-select-grid-search {
-  >>>input {
-    border-radius: 0px;
-  }
-}
-.de-select-grid-class {
-  .list {
-    overflow-y: auto;
-    width: 100%;
-    position: absolute;
-    top: 30px;
-    bottom: 0;
+    }
+
+    .el-input {
+      display: block !important;
+    }
   }
-}
 
-.radio-group-container > .el-radio-group > label {
-    display: block !important;
-    margin: 10px !important;
-}
+  .de-select-grid-class {
+    height: 100%;
 
-.checkbox-group-container{
-  label.el-checkbox {
-    display: block !important;
-    margin: 10px !important;
+    .list {
+      overflow-y: auto;
+      width: 100%;
+      position: relative;
+      bottom: 0;
+      height: calc(100% - 40px);
+    }
   }
 
-  .el-checkbox-group > label {
+  .radio-group-container>.el-radio-group>label {
     display: block !important;
     margin: 10px !important;
   }
 
-}
+  .checkbox-group-container {
+    label.el-checkbox {
+      display: block !important;
+      margin: 10px !important;
+    }
+
+    .el-checkbox-group>label {
+      display: block !important;
+      margin: 10px !important;
+    }
+
+  }
 
 </style>