feat:多端基础下拉以及下拉表格开发 (#3871)

Author: discreted66

packages/design/aurora/index.ts

@@ -27,6 +27,7 @@ import Pager from './src/pager'
 import Wizard from './src/wizard'
 import DialogBox from './src/dialog-box'
 import Popeditor from './src/popeditor'
+import BaseSelect from './src/base-select'
 import { version } from './package.json'
 
 export default {
@@ -61,6 +62,7 @@ export default {
     Pager,
     Wizard,
     DialogBox,
-    Popeditor
+    Popeditor,
+    BaseSelect
   }
 }

packages/design/aurora/src/base-select/index.ts

@@ -0,0 +1,109 @@
+import { iconChevronDown } from '@opentiny/vue-icon'
+
+export default {
+  // 虚拟滚动的默认options不一致
+  baseOpts: { optionHeight: 34, limit: 20 },
+  icons: {
+    dropdownIcon: iconChevronDown()
+  },
+  state: {
+    sizeMap: {
+      default: 30,
+      mini: 24,
+      small: 36,
+      medium: 42
+    },
+    spacingHeight: 2,
+    initialInputHeight: 30,
+    // 显示清除等图标时，不隐藏下拉箭头时
+    autoHideDownIcon: false,
+    delayBlur: true
+  },
+  props: {
+    tagType: 'info',
+    stopPropagation: true
+  },
+  renderless: (props, hooks, { emit }, api) => {
+    const state = api.state
+
+    return {
+      // 兼容不同主题输入框尺寸对应标签尺寸不一致
+      computedCollapseTagSize: () => {
+        let size = 'small'
+
+        if (~['small', 'mini'].indexOf(state.selectSize)) {
+          size = state.selectSize
+        } else if (~['medium', 'default'].indexOf(state.selectSize)) {
+          size = 'small'
+        }
+
+        return size
+      },
+      // 兼容显示清除图标时，是否同时显示下拉图标
+      computedShowDropdownIcon: () => {
+        return !(props.remote && props.filterable && !props.remoteConfig.showIcon)
+      },
+
+      // aui 的勾选未处理disabled的选项，故此放这里。
+      toggleCheckAll: (filtered) => {
+        const getEnabledValues = (options) => {
+          let values = []
+
+          for (let i = 0; i < options.length; i++) {
+            if (!options[i].state.disabled && !options[i].state.groupDisabled && options[i].state.visible) {
+              values.push(options[i].value)
+            }
+          }
+
+          return values
+        }
+
+        let value
+        const enabledValues = getEnabledValues(state.options)
+
+        if (filtered) {
+          if (state.filteredSelectCls === 'check' || state.filteredSelectCls === 'halfselect') {
+            value = Array.from(new Set([...state.modelValue, ...enabledValues]))
+          } else {
+            value = state.modelValue.filter((val) => !enabledValues.includes(val))
+          }
+        } else {
+          if (state.selectCls === 'check') {
+            value = enabledValues
+          } else if (state.selectCls === 'halfselect') {
+            const unchecked = state.options.filter((item) => !item.state.disabled && item.state.selectCls === 'check')
+
+            unchecked.length ? (value = enabledValues) : (value = [])
+          } else if (state.selectCls === 'checked-sur') {
+            value = []
+          }
+        }
+
+        const requiredValue = []
+        if (props.multiple) {
+          state.options.forEach((opt) => {
+            if (opt.required) requiredValue.push(opt.value)
+          })
+        }
+
+        if (Array.isArray(value)) {
+          value = requiredValue.concat(value.filter((val) => !requiredValue.find((requireVal) => requireVal === val)))
+        }
+
+        api.setSoftFocus()
+
+        state.isSilentBlur = true
+        api.updateModelValue(value)
+        api.directEmitChange(value)
+      },
+      // aurora 禁用和只展示的时候都是tagText，默认主题是 isDisplayOnly 才显示tagText
+      computedShowTagText: () => {
+        return state.isDisabled || state.isDisplayOnly
+      },
+      // aurora 禁用已选项无效果，必选不显示关闭图标
+      isTagClosable: (item) => {
+        return !item.required
+      }
+    }
+  }
+}

packages/design/saas/index.ts

@@ -30,6 +30,7 @@ import Popeditor from './src/popeditor'
 import DialogSelect from './src/dialog-select'
 import DatePanel from './src/date-panel'
 import Cascader from './src/cascader'
+import BaseSelect from './src/base-select'
 import { version } from './package.json'
 
 export default {
@@ -67,6 +68,7 @@ export default {
     DialogBox,
     DatePanel,
     DialogSelect,
-    Cascader
+    Cascader,
+    BaseSelect
   }
 }

packages/design/saas/src/base-select/icon-loading.svg

@@ -0,0 +1,106 @@
+import { iconChevronDown, iconPlus } from '@opentiny/vue-icon'
+import loadingIcon from './icon-loading.svg'
+
+export default {
+  // 虚拟滚动的默认options不一致
+  baseOpts: { optionHeight: 34, limit: 20 },
+  icons: {
+    dropdownIcon: iconChevronDown(),
+    addIcon: iconPlus(),
+    loadingIcon
+  },
+  state: {
+    sizeMap: {
+      default: 28,
+      mini: 24,
+      small: 28,
+      medium: 32
+    },
+    spacingHeight: 4,
+    initialInputHeight: 28,
+    // 显示清除等图标时，不隐藏下拉箭头时
+    autoHideDownIcon: false,
+    delayBlur: true
+  },
+  props: {
+    tagType: 'info',
+    stopPropagation: true
+  },
+  renderless: (props, hooks, { emit }, api) => {
+    const state = api.state
+
+    return {
+      computedCollapseTagSize: () => {
+        let size = 'small'
+
+        if (~['small', 'mini'].indexOf(state.selectSize)) {
+          size = state.selectSize
+        } else if (~['medium', 'default'].indexOf(state.selectSize)) {
+          size = 'small'
+        }
+
+        return size
+      },
+      // aui 的勾选未处理disabled的选项，故此放这里。
+      toggleCheckAll: (filtered) => {
+        const getEnabledValues = (options) => {
+          let values = []
+
+          for (let i = 0; i < options.length; i++) {
+            if (!options[i].state.disabled && !options[i].state.groupDisabled && options[i].state.visible) {
+              values.push(options[i].value)
+            }
+          }
+
+          return values
+        }
+
+        let value
+        const enabledValues = getEnabledValues(state.options)
+
+        if (filtered) {
+          if (state.filteredSelectCls === 'check' || state.filteredSelectCls === 'halfselect') {
+            value = Array.from(new Set([...state.modelValue, ...enabledValues]))
+          } else {
+            value = state.modelValue.filter((val) => !enabledValues.includes(val))
+          }
+        } else {
+          if (state.selectCls === 'check') {
+            value = enabledValues
+          } else if (state.selectCls === 'halfselect') {
+            const unchecked = state.options.filter((item) => !item.state.disabled && item.state.selectCls === 'check')
+
+            unchecked.length ? (value = enabledValues) : (value = [])
+          } else if (state.selectCls === 'checked-sur') {
+            value = []
+          }
+        }
+
+        const requiredValue = []
+        if (props.multiple) {
+          state.options.forEach((opt) => {
+            if (opt.required) requiredValue.push(opt.value)
+          })
+        }
+
+        if (Array.isArray(value)) {
+          value = requiredValue.concat(value.filter((val) => !requiredValue.find((requireVal) => requireVal === val)))
+        }
+
+        api.setSoftFocus()
+
+        state.isSilentBlur = true
+        api.updateModelValue(value)
+        api.directEmitChange(value)
+      },
+      // aurora 禁用和只展示的时候都是tagText，默认主题是 isDisplayOnly 才显示tagText
+      computedShowTagText: () => {
+        return state.isDisabled || state.isDisplayOnly
+      },
+      // aurora 禁用已选项无效果，必选不显示关闭图标
+      isTagClosable: (item) => {
+        return !item.required
+      }
+    }
+  }
+}

packages/design/saas/src/base-select/index.ts

@@ -277,6 +277,11 @@ const getOptionOfSetSelected = ({ api, props }) => {
     option.state = {}
   }
 
+  // 如果 option 有 currentLabel 但没有设置到 state 中，则复制过去
+  if (option.currentLabel !== undefined && option.state.currentLabel === undefined) {
+    option.state.currentLabel = option.currentLabel
+  }
+
   if (option.created) {
     option.createdLabel = option.state.currentLabel
     option.createdSelected = true
@@ -285,7 +290,7 @@ const getOptionOfSetSelected = ({ api, props }) => {
   }
 
   // tiny 新增
-  if (!option.state.currentLabel) {
+  if (!option.state.currentLabel && !option.currentLabel) {
     api.clearNoMatchValue('')
   }
 
@@ -301,7 +306,8 @@ const getResultOfSetSelected = ({ state, api, props }) => {
     state.modelValue.forEach((value) => {
       // tiny 新增
       const option = api.getOption(value)
-      if (!props.clearNoMatchValue || (props.clearNoMatchValue && option.label)) {
+      const hasLabel = option?.label || option?.currentLabel || (option?.state && option.state.currentLabel)
+      if (!props.clearNoMatchValue || (props.clearNoMatchValue && hasLabel)) {
         result.push(option)
         newModelValue.push(value)
       }
@@ -321,6 +327,10 @@ export const setSelected =
       state.selected = option
       state.selectedLabel = option.state.currentLabel || option.currentLabel
       ;(props.filterable || props.searchable) && !props.shape && (state.query = state.selectedLabel)
+      // 使用 panel 插槽且有选中值时，不显示 placeholder
+      if (vm.$slots.panel && state.selectedLabel && (props.filterable || props.searchable)) {
+        state.currentPlaceholder = ''
+      }
     } else {
       const result = getResultOfSetSelected({ state, props, api })
       state.selectCls = result.length
@@ -334,6 +344,11 @@ export const setSelected =
       }
       state.selected.length && (state.selectedLabel = '')
 
+      // 使用 panel 插槽且有选中值时，不显示 placeholder
+      if (vm.$slots.panel && result.length > 0 && (props.filterable || props.searchable)) {
+        state.currentPlaceholder = ''
+      }
+
       state.tips = state.selected.map((item) => (item.state ? item.state.currentLabel : item.currentLabel)).join(',')
 
       setFilteredSelectCls(nextTick, state, props)
@@ -1121,7 +1136,10 @@ export const watchValue =
     if (props.multiple) {
       api.resetInputHeight()
 
-      if ((value && value.length > 0) || (vm.$refs.input && state.query !== '')) {
+      // 使用 panel 插槽且有选中值时，不显示 placeholder
+      if (vm.$slots.panel && value && value.length > 0) {
+        state.currentPlaceholder = ''
+      } else if ((value && value.length > 0) || (vm.$refs.input && state.query !== '')) {
         state.currentPlaceholder = ''
       } else {
         state.currentPlaceholder = state.cachedPlaceHolder
@@ -1196,7 +1214,7 @@ export const calcOverFlow =
     }
   }
 
-const postOperOfToVisible = ({ props, state, constants }) => {
+const postOperOfToVisible = ({ props, state, constants, vm }) => {
   if (props.multiple) {
     if (props.modelValue && props.modelValue.length && props.initLabel && !state.selected.length) {
       state.selectedLabel = props.initLabel
@@ -1219,8 +1237,13 @@ const postOperOfToVisible = ({ props, state, constants }) => {
       }
     }
 
+    // 使用 panel 插槽且有选中值时，不显示 placeholder
     if (props.filterable || props.searchable) {
-      state.currentPlaceholder = state.cachedPlaceHolder
+      if (vm.$slots.panel && state.selectedLabel) {
+        state.currentPlaceholder = ''
+      } else {
+        state.currentPlaceholder = state.cachedPlaceHolder
+      }
     }
 
     if (props.modelValue && props.initLabel && !state.selectedLabel) {
@@ -1255,7 +1278,7 @@ export const toVisible =
       }
     })
 
-    postOperOfToVisible({ props, state, constants })
+    postOperOfToVisible({ props, state, constants, vm })
   }
 
 export const toHide =

packages/renderless/src/base-select/index.ts

@@ -56,9 +56,12 @@ export const syncGridSelection =
             vm.$refs.gridRef.clearRadioRow()
             if (rowToSelect) {
               vm.$refs.gridRef.setRadioRow(rowToSelect)
+              // 确保 state.currentKey 与选中行同步，这样 buildRadioConfig 才能正确返回 checkRowKey
+              state.currentKey = rowToSelect[props.valueField]
             }
           } else {
             vm.$refs.gridRef.clearRadioRow()
+            state.currentKey = ''
           }
         }
       } catch (e) {
@@ -534,6 +537,8 @@ export const radioChange =
 
       state.selected = row
       state.currentKey = row[props.valueField]
+      // 更新 state.modelValue，确保与 props.modelValue 同步
+      state.modelValue = row[props.valueField]
 
       vm.$refs.baseSelectRef.hidePanel()
 

packages/renderless/src/grid-select/index.ts

@@ -124,7 +124,7 @@ export const renderless = (props, { reactive, computed, watch, onMounted, nextTi
         api.filter(state.previousQuery || '')
       }
     },
-    { deep: true }
+    { deep: true, immediate: false }
   )
 
   // 监听面板打开，同步表格选中状态（通过事件处理）