Merge pull request #1527 from dataease/pr@dev@style_panel_filter

style: 过滤组件样式
2021-12-27 15:20:50 +08:00 · 2021-12-27 15:20:50 +08:00 · 9fd8b7f147
commit 9fd8b7f147
parent 66bc618550 4cab403cb5
3 changed files with 114 additions and 73 deletions
--- a/frontend/src/components/dataease/DeOutWidget.vue
+++ b/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>
--- a/frontend/src/components/widget/DeWidget/DeDate.vue
+++ b/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>
--- a/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
+++ b/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,42 +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;
+    }
+
+    .el-input {
+      display: block !important;
+    }
  }
-}
-.de-select-grid-class {
-  .list {
-    overflow-y: auto;
-    width: 100%;
-    position: absolute;
-    top: 30px;
-    bottom: 0;
-    text-align: left;
+
+  .de-select-grid-class {
+    height: 100%;
+
+    .list {
+      overflow-y: auto;
+      width: 100%;
+      position: relative;
+      bottom: 0;
+      height: calc(100% - 40px);
+    }
  }
-}

-.radio-group-container > .el-radio-group > label {
-    display: block !important;
-    margin: 10px !important;
-}
-
-.checkbox-group-container{
-  label.el-checkbox {
+  .radio-group-container>.el-radio-group>label {
    display: block !important;
    margin: 10px !important;
  }

-  .el-checkbox-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>