perf: 尝试完善文本下拉选择首项

2023-11-07 17:38:53 +08:00 · 2023-11-07 17:38:53 +08:00 · 2d32f82c78
commit 2d32f82c78
parent 7cd4d99b58
14 changed files with 112 additions and 81 deletions
--- 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"
@ -126,7 +127,7 @@
      :canvas-id="canvasId"
    />
    <!-- 右击菜单 -->
-    <ContextMenu/>
+    <ContextMenu />

    <!-- 对齐标线 -->
    <span
@ -150,13 +151,13 @@
 </template>

 <script>
-import {mapState} from 'vuex'
+import { mapState } from 'vuex'
 import Shape from './Shape'
 import DeDrag from '@/components/deDrag'

 // eslint-disable-next-line no-unused-vars
-import {getComponentRotatedStyle, getStyle} from '@/components/canvas/utils/style'
-import {_$, imgUrlTrans} from '@/components/canvas/utils/utils'
+import { getComponentRotatedStyle, getStyle } from '@/components/canvas/utils/style'
+import { _$, imgUrlTrans } from '@/components/canvas/utils/utils'
 import ContextMenu from './ContextMenu'
 import MarkLine from './MarkLine'
 import Area from './Area'
@ -164,19 +165,19 @@ import eventBus from '@/components/canvas/utils/eventBus'
 import Grid from './Grid'
 import PageLineEditor from './PageLineEditor'
 import PGrid from './PGrid'
-import {changeStyleWithScale} from '@/components/canvas/utils/translate'
+import { changeStyleWithScale } from '@/components/canvas/utils/translate'
 import UserViewDialog from '@/components/canvas/customComponent/UserViewDialog'
 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'
 import Background from '@/views/background/index'
 import PointShadow from '@/components/deDrag/PointShadow'
-import {hexColorToRGBA} from "@/views/chart/chart/util";
+import { hexColorToRGBA } from '@/views/chart/chart/util'

 // let positionBox = []
 // let coordinates = [] // 坐标点集合
@ -190,11 +191,11 @@ let itemMaxX = 0

 function debounce(func, time) {
  if (!isOverlay) {
-    (function (t) {
+    (function(t) {
      isOverlay = true
-      setTimeout(function () {
+      setTimeout(function() {
        t()
-        setTimeout(function () {
+        setTimeout(function() {
          isOverlay = false
          if (lastTask !== undefined) {
            debounce(lastTask, time)
@ -319,10 +320,10 @@ function init() {
  resetPositionBox.call(this)
  initPosition(this)
  let i = 0
-  const timeid = setInterval(function () {
+  const timeid = setInterval(function() {
    if (i >= vm.yourList.length) {
      clearInterval(timeid)
-      vm.$nextTick(function () {
+      vm.$nextTick(function() {
        vm.moveAnimate = true
      })
    } else {
@ -339,7 +340,7 @@ function resizePlayer(item, newSize) {
  removeItemFromPositionBox.call(vm, item)

  const belowItems = findBelowItems.call(this, item)
-  _.forEach(belowItems, function (upItem) {
+  _.forEach(belowItems, function(upItem) {
    const canGoUpRows = canItemGoUp.call(vm, upItem)
    if (canGoUpRows > 0) {
      moveItemUp.call(vm, upItem, canGoUpRows)
@ -426,7 +427,7 @@ function movePlayer(item, position) {
  removeItemFromPositionBox.call(vm, item)

  const belowItems = findBelowItems.call(this, item)
-  _.forEach(belowItems, function (upItem) {
+  _.forEach(belowItems, function(upItem) {
    const canGoUpRows = canItemGoUp.call(vm, upItem)
    if (canGoUpRows > 0) {
      moveItemUp.call(vm, upItem, canGoUpRows)
@ -452,7 +453,7 @@ function removeItem(index) {
    removeItemFromPositionBox.call(vm, item)

    const belowItems = findBelowItems.call(this, item)
-    _.forEach(belowItems, function (upItem) {
+    _.forEach(belowItems, function(upItem) {
      const canGoUpRows = canItemGoUp.call(vm, upItem)
      if (canGoUpRows > 0) {
        moveItemUp.call(vm, upItem, canGoUpRows)
@ -544,7 +545,7 @@ function findClosetCoords(item, tCoord) {
    y: collisionsItem[0].coord.el.y
  })

-  setTimeout(function () {
+  setTimeout(function() {
    isOverlay = false
  }, 200)
 }
@ -592,7 +593,7 @@ function changeItemCoord(item) {
    el: item
  }

-  const index = _.findIndex(vm.coordinates, function (o) {
+  const index = _.findIndex(vm.coordinates, function(o) {
    return o.el._dragId === item._dragId
  })
  if (index !== -1) {
@ -609,7 +610,7 @@ function emptyTargetCell(item) {
  const vm = this
  const belowItems = findBelowItems.call(vm, item)

-  _.forEach(belowItems, function (downItem, index) {
+  _.forEach(belowItems, function(downItem, index) {
    if (downItem._dragId === item._dragId) return
    const moveSize = item.y + item.sizey - downItem.y
    if (moveSize > 0) {
@ -649,7 +650,7 @@ function moveItemDown(item, size) {
  const vm = this
  removeItemFromPositionBox.call(vm, item)
  const belowItems = findBelowItems.call(vm, item)
-  _.forEach(belowItems, function (downItem, index) {
+  _.forEach(belowItems, function(downItem, index) {
    if (downItem._dragId === item._dragId) return
    const moveSize = calcDiff.call(vm, item, downItem, size)
    if (moveSize > 0) {
@ -722,7 +723,7 @@ function moveItemUp(item, size) {

  changeItemCoord.call(this, item)

-  _.forEach(belowItems, function (upItem, index) {
+  _.forEach(belowItems, function(upItem, index) {
    const moveSize = canItemGoUp.call(vm, upItem)
    if (moveSize > 0) {
      moveItemUp.call(vm, upItem, moveSize)
@ -806,19 +807,19 @@ export default {
    dragStart: {
      required: false,
      type: Function,
-      default: function () {
+      default: function() {
      }
    },
    dragging: {
      required: false,
      type: Function,
-      default: function () {
+      default: function() {
      }
    },
    dragEnd: {
      required: false,
      type: Function,
-      default: function () {
+      default: function() {
      }
    },
    resizable: {
@ -829,19 +830,19 @@ export default {
    resizeStart: {
      required: false,
      type: Function,
-      default: function () {
+      default: function() {
      }
    },
    resizing: {
      required: false,
      type: Function,
-      default: function () {
+      default: function() {
      }
    },
    resizeEnd: {
      required: false,
      type: Function,
-      default: function () {
+      default: function() {
      }
    },
    matrixCount: {
@ -1143,11 +1144,14 @@ export default {
  created() {
  },
  methods: {
+    filterLoaded(p) {
+      buildAfterFilterLoaded(this.filterMap, p)
+    },
    getWrapperChildRefs() {
      return this.$refs['wrapperChild']
    },
    getAllWrapperChildRefs() {
-      let allChildRefs = []
+      const allChildRefs = []
      const currentChildRefs = this.getWrapperChildRefs()
      if (currentChildRefs && currentChildRefs.length > 0) {
        allChildRefs.push.apply(allChildRefs, currentChildRefs)
@ -1290,7 +1294,7 @@ export default {
      }
      return -1
    },
-    pluginEditHandler({e, id}) {
+    pluginEditHandler({ e, id }) {
      let index = -1
      for (let i = 0; i < this.componentData.length; i++) {
        const item = this.componentData[i]
@ -1400,12 +1404,12 @@ export default {
    getSelectArea() {
      const result = []
      // 区域起点坐标
-      const {x, y} = this.start
+      const { x, y } = this.start
      // 计算所有的组件数据，判断是否在选中区域内
      this.componentData.forEach(component => {
        if (component.isLock) return

-        const {left, top, width, height} = component.style
+        const { left, top, width, height } = component.style
        if (x <= left && y <= top && (left + width <= x + this.width) && (top + height <= y + this.height)) {
          result.push(component)
        }
@ -1461,7 +1465,7 @@ export default {

    getTextareaHeight(element, text) {
      // eslint-disable-next-line prefer-const
-      let {lineHeight, fontSize, height} = element.style
+      let { lineHeight, fontSize, height } = element.style
      if (lineHeight === '') {
        lineHeight = 1.5
      }
@ -1552,7 +1556,7 @@ export default {
      }
    },
    getRefLineParams(params) {
-      const {vLine, hLine} = params
+      const { vLine, hLine } = params
      this.vLine = vLine
      this.hLine = hLine
    },
@ -1705,8 +1709,8 @@ export default {
      newX = newX > 0 ? newX : 1
      newY = newY > 0 ? newY : 1
      if (item.sizex !== nowX || item.sizey !== nowY) {
-        debounce((function (newX, oldX, newY, oldY) {
-          return function () {
+        debounce((function(newX, oldX, newY, oldY) {
+          return function() {
            if (newX !== oldX || oldY !== newY) {
              movePlayer.call(vm, resizeItem, {
                x: newX,
@ -1742,8 +1746,8 @@ export default {
        return
      }
      if (newX !== oldX || oldY !== newY) {
-        debounce((function (newX, oldX, newY, oldY) {
-          return function () {
+        debounce((function(newX, oldX, newY, oldY) {
+          return function() {
            if (newX !== oldX || oldY !== newY) {
              movePlayer.call(vm, moveItem, {
                x: newX,
@ -1781,7 +1785,7 @@ export default {
      // 不使用copy 保持原有对象
      const finalList = []
      const _this = this
-      _.forEach(this.componentData, function (item, index) {
+      _.forEach(this.componentData, function(item, index) {
        if (_.isEmpty(item)) return
        if (_this.canvasId === item.canvasId) {
          delete item['_dragId']
@ -1823,7 +1827,7 @@ export default {
    addItemBox(item) {
      this.yourList.push(item)

-      this.$nextTick(function () {
+      this.$nextTick(function() {
        addItem.call(this, item, this.yourList.length - 1)
      })
    },
@ -1854,7 +1858,7 @@ export default {
    // 调整父级组件边界
    resizeParentBoundsRef() {
      const _this = this
-      _this.componentData.forEach(function (data, index) {
+      _this.componentData.forEach(function(data, index) {
        _this.$refs.deDragRef && _this.$refs.deDragRef[index] && _this.$refs.deDragRef[index].checkParentSize()
      })
    },
--- a/core/frontend/src/components/canvas/components/editor/Preview.vue
+++ b/core/frontend/src/components/canvas/components/editor/Preview.vue
@ -463,7 +463,7 @@ export default {
  },
  methods: {
    filterLoaded(p) {
-      buildAfterFilterLoaded(this.componentData, this.filterMap, 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
@ -610,8 +610,7 @@ export default {
      })
      if (unReadyList.length) {
        Promise.all(this.filters.filter(f => f instanceof Promise)).then(fList => {
-          readyList.concat(fList)
-          this.filter.filters = readyList
+          this.filter.filter = readyList.concat(fList)
          this.getData(this.element.propValue.viewId, false)
        })
        return
--- 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"
@ -23,7 +23,7 @@
        :indeterminate="isIndeterminate"
        @change="selectAllChange"
      >
-      <span :style="{ color: `${isConfig ? '#1F2329' : customStyle.wordColor} !important`}">{{ $t('dataset.check_all') }}</span>
+        <span :style="{ color: `${isConfig ? '#1F2329' : customStyle.wordColor} !important`}">{{ $t('dataset.check_all') }}</span>
      </el-checkbox>
    </p>
    <el-option
@ -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,19 +6,20 @@
    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"
    :is-config="isConfig"
-    @resetKeyWords="filterMethod"
    :custom-style="customStyle"
+    @resetKeyWords="filterMethod"
    @change="changeValue"
    @focus="setOptionWidth"
    @blur="onBlur"
@ -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]"
@ -142,6 +144,7 @@ export default {
  watch: {
    'viewIds': function(value, old) {
      if (typeof value === 'undefined' || value === old) return
+      this.value = this.fillFirstValue()
      this.setCondition()
    },
    'defaultValueStr': function(value, old) {
@ -167,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) {
@ -182,6 +191,7 @@ export default {

      this.show = false
      this.$nextTick(() => {
+        this.fillFirstValue()
        this.show = true
        this.handleCoustomStyle()
      })
@ -207,6 +217,7 @@ export default {
      method(param).then(res => {
        this.data = this.optionData(res.data)
        this.$nextTick(() => {
+          this.fillFirstValue()
          this.show = true
          this.handleCoustomStyle()
        })
@ -288,7 +299,7 @@ export default {
      }, 500)
    },
    initLoad() {
-      this.value = this.fillValueDerfault()
+      // this.value = this.fillValueDerfault()
      this.initOptions(this.fillFirstSelected)
      if (this.element.options.value && !this.selectFirst) {
        this.value = this.fillValueDerfault()
@ -297,8 +308,7 @@ export default {
    },
    fillFirstSelected() {
      if (this.selectFirst && this.data?.length) {
-        this.element.options.value = this.data[0]['id']
-        this.value = this.fillValueDerfault()
+        this.fillFirstValue()
        this.$emit('filter-loaded', {
          componentId: this.element.id,
          val: this.value
@ -352,6 +362,10 @@ export default {
      this.setCondition()
      this.handleShowNumber()
    },
+    firstChange(value) {
+      this.setCondition()
+      this.handleShowNumber()
+    },
    handleShowNumber() {
      this.showNumber = false

@ -391,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/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
@ -90,15 +93,15 @@ export const buildViewKeyFilters = (panelItems, result) => {
    Object.keys(result).forEach(viewId => {
      const vidMatch = viewIdMatch(condition.viewIds, viewId)
      if (vidMatch && selectFirst) {
-        
+        const obj = {}
        const promise = new Promise(resolve => {
-          cbParam => {
-            const newCondition = buildAfterFilterLoaded1(element, cbParam)
+          cacheCondition(cbParam => {
+            const newCondition = getCondition(element, cbParam)
            resolve(newCondition)
-          }
+          }, obj)
        })
        promise.componentId = filterComponentId
-        // promise.cb = 
+        promise.cacheObj = obj
        result[viewId].push(promise)
      } else {
        const viewFilters = result[viewId]
@ -122,35 +125,20 @@ export const buildFilterMap = panelItems => {
  return result
 }

-const getElementById = (componentId, panelItems) => {
-  for (let index = 0; index < panelItems.length; index++) {
-    const element = panelItems[index]
-    if (element.id === componentId) {
-      return element
-    }
-  }
-  return null
-}
-const buildAfterFilterLoaded1 = (element, p) => {
+const getCondition = (element, p) => {
  const widget = ApplicationContext.getService(element.serviceName)
-  const param = widget.getParam(element, p.val)
+  const param = widget.getParam(element, p?.val)
  const condition = formatCondition(param)
  return condition
 }
-export const buildAfterFilterLoaded = (panelItems, originMap, p) => {
+export const buildAfterFilterLoaded = (originMap, p) => {
  const componentId = p.componentId
-  const element = getElementById(componentId, panelItems)
-  let param = null
-  const widget = ApplicationContext.getService(element.serviceName)
-  param = widget.getParam(element, p.val)
-  const condition = formatCondition(param)
-  const vValid = valueValid(condition)
  Object.keys(originMap).forEach(viewId => {
    const conditions = originMap[viewId]
    if (conditions?.length) {
      conditions.forEach(condition => {
-        if (condition instanceof Promise && condition.componentId === componentId && vValid) {
-          condition.resolve(condition)
+        if (condition instanceof Promise && condition.componentId === componentId && condition.cacheObj?.cb) {
+          condition.cacheObj.cb(p)
        }
      })
    }
--- a/core/frontend/src/views/panel/filter/FilterDialog.vue
+++ b/core/frontend/src/views/panel/filter/FilterDialog.vue
@ -925,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
@ -14,7 +14,8 @@
              v-model="element.options.attrs.selectFirst"
              class="select-first-check"
              @change="selectFirstChange"
-            >首项
+            >
+              {{ $t('panel.first_item') }}
            </el-checkbox>
          </div>
          <div class="custom-component-class">
@ -82,7 +83,6 @@ export default {
  },
  methods: {
    selectFirstChange(val) {
-      console.log(val)
    }
  }
 }
--- 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
@ -287,12 +287,11 @@ export default {
    panelInfo() {
      return this.$store.state.panel.panelInfo
    },
-    viewSelectedField(){
+    viewSelectedField() {
      const viewIds = []
-      this.outerParamsInfo.targetViewInfoList.forEach((targetViewInfo)=>{
+      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()