Merge pull request #6574 from dataease/pr@dev@feat_filter_select_first

perf: 尝试完善文本下拉选择首项
2023-11-07 17:47:45 +08:00 · 2023-11-07 17:47:45 +08:00 · cc168d8661
commit cc168d8661
parent d52ecdedfc 0e6fede97f
17 changed files with 169 additions and 25 deletions
--- a/core/frontend/src/components/canvas/components/editor/ComponentWrapper.vue
+++ b/core/frontend/src/components/canvas/components/editor/ComponentWrapper.vue
@ -48,6 +48,7 @@
        :h="config.style.height"
        :search-count="searchCount"
        :canvas-id="canvasId"
+        @filter-loaded="filterLoaded"
      />
      <component
        :is="config.component"
@ -235,6 +236,9 @@ export default {
    runAnimation(this.$el, this.config.animations)
  },
  methods: {
+    filterLoaded(p) {
+      this.$emit('filter-loaded', p)
+    },
    getComponentId() {
      return this.config.id
    },
--- a/core/frontend/src/components/canvas/components/editor/DeEditor.vue
+++ b/core/frontend/src/components/canvas/components/editor/DeEditor.vue
@ -80,6 +80,7 @@
        :out-style="getShapeStyleInt(item.style)"
        :active="item === curComponent"
        :h="getShapeStyleIntDeDrag(item.style,'height')"
+        @filter-loaded="filterLoaded"
      />
      <component
        :is="item.component"
@ -170,7 +171,7 @@ import DeOutWidget from '@/components/dataease/DeOutWidget'
 import DragShadow from '@/components/deDrag/Shadow'
 import bus from '@/utils/bus'
 import LinkJumpSet from '@/views/panel/linkJumpSet'
-import { buildFilterMap, buildViewKeyMap, formatCondition, valueValid, viewIdMatch } from '@/utils/conditionUtil'
+import { buildFilterMap, buildViewKeyMap, formatCondition, valueValid, viewIdMatch, buildAfterFilterLoaded } from '@/utils/conditionUtil'
 // 挤占式画布
 import _ from 'lodash'
 import _jq from 'jquery'
@ -1143,6 +1144,9 @@ export default {
  created() {
  },
  methods: {
+    filterLoaded(p) {
+      buildAfterFilterLoaded(this.filterMap, p)
+    },
    getWrapperChildRefs() {
      return this.$refs['wrapperChild']
    },
--- a/core/frontend/src/components/canvas/components/editor/Preview.vue
+++ b/core/frontend/src/components/canvas/components/editor/Preview.vue
@ -59,6 +59,7 @@
          :screen-shot="screenShot"
          :canvas-style-data="canvasStyleData"
          :show-position="showPosition"
+          @filter-loaded="filterLoaded"
        />
      </div>
    </div>
@ -155,7 +156,7 @@ import eventBus from '@/components/canvas/utils/eventBus'
 import elementResizeDetectorMaker from 'element-resize-detector'
 import CanvasOptBar from '@/components/canvas/components/editor/CanvasOptBar'
 import bus from '@/utils/bus'
-import { buildFilterMap, buildViewKeyMap, formatCondition, valueValid, viewIdMatch } from '@/utils/conditionUtil'
+import { buildFilterMap, buildViewKeyMap, formatCondition, valueValid, viewIdMatch, buildAfterFilterLoaded } from '@/utils/conditionUtil'
 import { hasDataPermission } from '@/utils/permission'
 import { activeWatermark } from '@/components/canvas/tools/watermark'
 import { proxyUserLoginInfo, userLoginInfo } from '@/api/systemInfo/userLogin'
@ -461,6 +462,9 @@ export default {
    bus.$off('trigger-reset-button', this.triggerResetButton)
  },
  methods: {
+    filterLoaded(p) {
+      buildAfterFilterLoaded(this.filterMap, p)
+    },
    getWrapperChildRefs() {
      return this.$refs['viewWrapperChild']
    },
--- a/core/frontend/src/components/canvas/customComponent/UserView.vue
+++ b/core/frontend/src/components/canvas/customComponent/UserView.vue
@ -599,7 +599,22 @@ export default {
    this.refId = uuid.v1
    if (this.element && this.element.propValue && this.element.propValue.viewId) {
      // 如果watch.filters 已经进行数据初始化时候，此处放弃数据初始化
-
+      const unReadyList = []
+      const readyList = []
+      this.filters.forEach(f => {
+        if (f instanceof Promise) {
+          unReadyList.push(f)
+        } else {
+          readyList.push(f)
+        }
+      })
+      if (unReadyList.length) {
+        Promise.all(this.filters.filter(f => f instanceof Promise)).then(fList => {
+          this.filter.filter = readyList.concat(fList)
+          this.getData(this.element.propValue.viewId, false)
+        })
+        return
+      }
      this.getData(this.element.propValue.viewId, false)
    }
  },
--- a/core/frontend/src/components/dataease/DeOutWidget.vue
+++ b/core/frontend/src/components/dataease/DeOutWidget.vue
@ -49,6 +49,7 @@
                :element="element"
                :in-draw="inDraw"
                :in-screen="inScreen"
+                @filter-loaded="filterLoaded"
              />
            </div>
          </div>
@ -180,6 +181,9 @@ export default {
    this.$set(this.element.style, 'innerBgColor', innerBgColor || '')
  },
  methods: {
+    filterLoaded(p) {
+      this.$emit('filter-loaded', p)
+    },
    getComponentId() {
      return this.element.id
    },
--- a/core/frontend/src/components/elVisualSelect/index.vue
+++ b/core/frontend/src/components/elVisualSelect/index.vue
@ -7,7 +7,7 @@
    popper-class="VisualSelects coustom-de-select"
    no-match-text=" "
    reserve-keyword
-    clearable
+    :clearable="clearable"
    v-bind="$attrs"
    v-on="$listeners"
    @change="visualChange"
@ -32,6 +32,7 @@
      :label="item.text"
      :value="item.id"
      :class="setSelect(item.id)"
+      :disabled="itemDisabled"
    >
      <span :title="item.text">{{ item.text }}</span>
    </el-option>
@ -76,6 +77,14 @@ export default {
    keyWord: {
      type: String,
      default: ''
+    },
+    itemDisabled: {
+      type: Boolean,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: true
    }
  },
  data() {
--- a/core/frontend/src/components/widget/deWidget/DeSelect.vue
+++ b/core/frontend/src/components/widget/deWidget/DeSelect.vue
@ -6,13 +6,14 @@
    v-model="value"
    :class-id="'visual-' + element.id + '-' + inDraw + '-' + inScreen"
    :collapse-tags="showNumber"
-    :clearable="!element.options.attrs.multiple"
+    :clearable="!element.options.attrs.multiple && (inDraw || !selectFirst)"
    :multiple="element.options.attrs.multiple"
    :placeholder="$t(element.options.attrs.placeholder) + placeholderSuffix"
    :popper-append-to-body="inScreen"
    :size="size"
    :filterable="true"
    :filter-method="filterMethod"
+    :item-disabled="!inDraw && selectFirst"
    :key-word="keyWord"
    popper-class="coustom-de-select"
    :list="data"
@ -31,6 +32,7 @@
      :style="{width:selectOptionWidth}"
      :label="item[element.options.attrs.label]"
      :value="item[element.options.attrs.value]"
+      :disabled="!inDraw && selectFirst"
    >
      <span
        :title="item[element.options.attrs.label]"
@ -133,12 +135,16 @@ export default {
    },
    isCustomSortWidget() {
      return this.element.serviceName === 'textSelectWidget'
+    },
+    selectFirst() {
+      return this.element.serviceName === 'textSelectWidget' && this.element.options.attrs.selectFirst
    }
  },

  watch: {
    'viewIds': function(value, old) {
      if (typeof value === 'undefined' || value === old) return
+      this.value = this.fillFirstValue()
      this.setCondition()
    },
    'defaultValueStr': function(value, old) {
@ -164,12 +170,18 @@ export default {
      this.element.options.attrs.fieldId.length > 0 &&
      method(param).then(res => {
        this.data = this.optionData(res.data)
+
        this.clearDefault(this.data)
+        this.fillFirstValue()
        bus.$emit('valid-values-change', true)
      }).catch(e => {
        bus.$emit('valid-values-change', false)
      }) || (this.element.options.value = '')
    },
+    'selectFirst': function(value, old) {
+      if (value === old) return
+      this.fillFirstValue()
+    },
    'element.options.attrs.multiple': function(value, old) {
      if (typeof old === 'undefined' || value === old) return
      if (!this.inDraw) {
@ -179,6 +191,7 @@ export default {

      this.show = false
      this.$nextTick(() => {
+        this.fillFirstValue()
        this.show = true
        this.handleCoustomStyle()
      })
@ -204,6 +217,7 @@ export default {
      method(param).then(res => {
        this.data = this.optionData(res.data)
        this.$nextTick(() => {
+          this.fillFirstValue()
          this.show = true
          this.handleCoustomStyle()
        })
@ -285,17 +299,26 @@ export default {
      }, 500)
    },
    initLoad() {
-      this.value = this.fillValueDerfault()
-      this.initOptions()
-      if (this.element.options.value) {
+      // this.value = this.fillValueDerfault()
+      this.initOptions(this.fillFirstSelected)
+      if (this.element.options.value && !this.selectFirst) {
        this.value = this.fillValueDerfault()
        this.changeValue(this.value)
      }
    },
+    fillFirstSelected() {
+      if (this.selectFirst && this.data?.length) {
+        this.fillFirstValue()
+        this.$emit('filter-loaded', {
+          componentId: this.element.id,
+          val: this.value
+        })
+      }
+    },
    refreshLoad() {
      this.initOptions()
    },
-    initOptions() {
+    initOptions(cb) {
      this.data = []
      if (this.element.options.attrs.fieldId) {
        let method = multFieldValues
@ -310,6 +333,7 @@ export default {
        }).then(res => {
          this.data = this.optionData(res.data)
          bus.$emit('valid-values-change', true)
+          cb && cb()
        }).catch(e => {
          bus.$emit('valid-values-change', false)
        })
@ -338,6 +362,10 @@ export default {
      this.setCondition()
      this.handleShowNumber()
    },
+    firstChange(value) {
+      this.setCondition()
+      this.handleShowNumber()
+    },
    handleShowNumber() {
      this.showNumber = false

@ -377,6 +405,20 @@ export default {
      }
      return this.value.split(',')
    },
+    fillFirstValue() {
+      if (!this.selectFirst) {
+        return
+      }
+      const defaultV = this.data[0].id
+      if (this.element.options.attrs.multiple) {
+        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') return []
+        this.value = defaultV.split(this.separator)
+      } else {
+        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') return null
+        this.value = defaultV.split(this.separator)[0]
+      }
+      this.firstChange(this.value)
+    },
    fillValueDerfault() {
      const defaultV = this.element.options.value === null ? '' : this.element.options.value.toString()
      if (this.element.options.attrs.multiple) {
--- a/core/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
+++ b/core/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
@ -87,8 +87,13 @@ class TextSelectServiceImpl extends WidgetService {
    })
  }

-  getParam(element) {
-    const value = this.fillValueDerfault(element)
+  getParam(element, val) {
+    let value = null
+    if (!val) {
+      value = this.fillValueDerfault(element)
+    } else {
+      value = [val]
+    }
    const param = {
      component: element,
      value: !value ? [] : Array.isArray(value) ? value : value.toString().split(','),
--- a/core/frontend/src/lang/en.js
+++ b/core/frontend/src/lang/en.js
@ -2024,6 +2024,7 @@ export default {
    back_parent: 'Back to previous'
  },
  panel: {
+    first_item: 'First item',
    forbidden_copy: 'Forbidden copy',
    url_check_error: 'Jump error, Illegal URL',
    view_style: 'View Style',
--- a/core/frontend/src/lang/tw.js
+++ b/core/frontend/src/lang/tw.js
@ -2018,6 +2018,7 @@ export default {
    back_parent: '返回上一級'
  },
  panel: {
+    first_item: '首項',
    forbidden_copy: '當前組件不允許復製',
    url_check_error: '跳轉錯誤，URL不合法',
    view_style: '視圖樣式',
--- a/core/frontend/src/lang/zh.js
+++ b/core/frontend/src/lang/zh.js
@ -2018,6 +2018,7 @@ export default {
    back_parent: '返回上一级'
  },
  panel: {
+    first_item: '首项',
    forbidden_copy: '当前组件不允许复制',
    url_check_error: '跳转错误，URL不合法',
    view_style: '视图样式',
--- a/core/frontend/src/utils/conditionUtil.js
+++ b/core/frontend/src/utils/conditionUtil.js
@ -70,6 +70,9 @@ export const buildViewKeyMap = panelItems => {
  return result
 }

+const cacheCondition = (cb, obj) => {
+  obj.cb = cb
+}
 export const buildViewKeyFilters = (panelItems, result) => {
  if (!(panelItems && panelItems.length > 0)) {
    return result
@ -79,6 +82,7 @@ export const buildViewKeyFilters = (panelItems, result) => {
    if (element.type !== 'custom') {
      return true
    }
+    const selectFirst = element.serviceName === 'textSelectWidget' && element.options.attrs.selectFirst

    let param = null
    const widget = ApplicationContext.getService(element.serviceName)
@ -88,15 +92,28 @@ export const buildViewKeyFilters = (panelItems, result) => {
    const filterComponentId = condition.componentId
    Object.keys(result).forEach(viewId => {
      const vidMatch = viewIdMatch(condition.viewIds, viewId)
-      const viewFilters = result[viewId]
-      let j = viewFilters.length
-      while (j--) {
-        const filter = viewFilters[j]
-        if (filter.componentId === filterComponentId) {
-          viewFilters.splice(j, 1)
+      if (vidMatch && selectFirst) {
+        const obj = {}
+        const promise = new Promise(resolve => {
+          cacheCondition(cbParam => {
+            const newCondition = getCondition(element, cbParam)
+            resolve(newCondition)
+          }, obj)
+        })
+        promise.componentId = filterComponentId
+        promise.cacheObj = obj
+        result[viewId].push(promise)
+      } else {
+        const viewFilters = result[viewId]
+        let j = viewFilters.length
+        while (j--) {
+          const filter = viewFilters[j]
+          if (filter.componentId === filterComponentId) {
+            viewFilters.splice(j, 1)
+          }
        }
+        vidMatch && vValid && viewFilters.push(condition)
      }
-      vidMatch && vValid && viewFilters.push(condition)
    })
  })
  return result
@ -108,6 +125,26 @@ export const buildFilterMap = panelItems => {
  return result
 }

+const getCondition = (element, p) => {
+  const widget = ApplicationContext.getService(element.serviceName)
+  const param = widget.getParam(element, p?.val)
+  const condition = formatCondition(param)
+  return condition
+}
+export const buildAfterFilterLoaded = (originMap, p) => {
+  const componentId = p.componentId
+  Object.keys(originMap).forEach(viewId => {
+    const conditions = originMap[viewId]
+    if (conditions?.length) {
+      conditions.forEach(condition => {
+        if (condition instanceof Promise && condition.componentId === componentId && condition.cacheObj?.cb) {
+          condition.cacheObj.cb(p)
+        }
+      })
+    }
+  })
+}
+
 export const fillElementsFilter = (panelItems, filterMap) => {
  panelItems.forEach(element => {
    if (element.type === 'view') {
--- a/core/frontend/src/views/panel/filter/FilterDialog.vue
+++ b/core/frontend/src/views/panel/filter/FilterDialog.vue
@ -278,7 +278,10 @@
          :active-name="activeName"
        />

-        <filter-foot :element="currentElement" />
+        <filter-foot
+          :element="currentElement"
+          :control-attrs="myAttrs"
+        />

      </div>
    </de-main-container>
@ -922,6 +925,9 @@ export default {
    },

    getElementInfo() {
+      if (this.currentElement.options.attrs.selectFirst) {
+        this.currentElement.options.value = ''
+      }
      return this.currentElement
    },

--- a/core/frontend/src/views/panel/filter/filterMain/FilterFoot.vue
+++ b/core/frontend/src/views/panel/filter/filterMain/FilterFoot.vue
@ -8,6 +8,15 @@
        >
          <div style="margin-bottom: 10px;">
            <span>{{ $t('dynamic_time.set_default') }}</span>
+
+            <el-checkbox
+              v-if="element.serviceName === 'textSelectWidget'"
+              v-model="element.options.attrs.selectFirst"
+              class="select-first-check"
+              @change="selectFirstChange"
+            >
+              {{ $t('panel.first_item') }}
+            </el-checkbox>
          </div>
          <div class="custom-component-class">
            <component
@ -67,12 +76,14 @@ export default {
  },
  data() {
    return {
-
+      attrs: null
    }
  },
-
+  created() {
+  },
  methods: {
-
+    selectFirstChange(val) {
+    }
  }
 }

@ -91,5 +102,8 @@ export default {
    max-height: 100%;
    overflow-y: scroll;
  }
+  .select-first-check {
+    margin-left: 25px;
+  }

 </style>
--- a/core/frontend/src/views/panel/filter/filterMain/FilterHead.vue
+++ b/core/frontend/src/views/panel/filter/filterMain/FilterHead.vue
@ -74,7 +74,6 @@ export default {
    getTableName(tableId) {
      let tableName = null
      this.$emit('dataset-name', tableId, t => { tableName = t })
-      console.log(tableName)
      return tableName
    },
    onMove(e, originalEvent) {
--- a/core/frontend/src/views/panel/outerParamsSet/index.vue
+++ b/core/frontend/src/views/panel/outerParamsSet/index.vue
@ -292,7 +292,6 @@ export default {
      this.outerParamsInfo.targetViewInfoList.forEach((targetViewInfo) => {
        viewIds.push(targetViewInfo.targetViewId)
      })
-      console.log('viewIds=' + JSON.stringify(viewIds))
      return viewIds
    },
    ...mapState([
--- a/core/frontend/src/views/system/sysParam/MapSetting/OnlineMap.vue
+++ b/core/frontend/src/views/system/sysParam/MapSetting/OnlineMap.vue
@ -114,7 +114,6 @@ export default {
      })
    },
    initLoad() {
-      console.log('map load ...')
      queryMapKey().then(res => {
        this.key = res.data
        this.loadMap()