RemoteSelect

基于FSelect封装的远程下拉组件。

业务场景

• 当search区域，搜索条件有较多select，且options数据源来自接口请求，开发者往往需要维护较多options数据，在不做优化的情况下可能会产生较多无用的请求，浪费资源
• 当form区域，同样如此

何时使用

• 当普通下拉组件options来源于远端时，可考虑使用此组件
• 业务开发时可以更好的维护options数据源，内部已做缓存处理

代码演示

基本使用

v-model:value =>

<script setup lang="ts">
import { ref } from 'vue'

const modelValue = ref()

// 模拟接口请求
const fetchOptions = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        { label: 'AAA', value: 'a' },
        { label: 'BBB', value: 'b' },
        { label: 'CCC', value: 'c' },
      ])
    }, 500)
  })
}
</script>

<template>
  <div class="test">
    v-model:value => {{ modelValue }}
    <br />
    <br />
    <RemoteSelect
      style="width: 240px"
      v-model:value="modelValue"
      :fetch="fetchOptions"
      pressLine="远程下拉"
      placeholder="作为查询条件的场景"
    />
    <br />
    <br />
    <RemoteSelect
      style="width: 240px"
      v-model:value="modelValue"
      :fetch="fetchOptions"
      placeholder="作为表单的场景"
      immediate
    />
  </div>
</template>

特殊场景，如wms中的字典配置场景，查询时后端需要code+value两个字段

v-model:value =>

<script setup lang="ts">
import { ref } from 'vue'

const modelValue = ref()

// 模拟接口请求
const fetchOptions = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        {
          optionCode: 'BUSINESS_ORDER_TYPE',
          code: 'REQUISITION_ORDER',
          codeName: '领用单',
        },
        {
          optionCode: 'BUSINESS_ORDER_TYPE',
          code: 'INSPECTION_ORDER',
          codeName: '送检单',
        },
        {
          optionCode: 'BUSINESS_ORDER_TYPE',
          code: 'SCRAP ORDER',
          codeName: '报废单',
        },
      ])
    }, 500)
  })
}
</script>

<template>
  <div class="test">
    v-model:value => {{ modelValue }}
    <br />
    <br />

    <RemoteSelect
      style="width: 240px"
      v-model:value="modelValue"
      :fetch="fetchOptions"
      :valueFormat="[
        (v: any) => v?.orderTypeVal,
        (_v: any, option: any) => ({
          orderTypeVal: option?.code,
          orderTypeCode: option?.optionCode,
        }),
      ]"
      :fieldNames="{
        label: 'codeName',
        value: 'code',
        options: 'options',
      }"
      immediate
    />
  </div>
</template>

如果未来有字典平台可内置字典处理逻辑以简化业务使用。

API

由于此组件继承自FSelect，以下仅针对专属API加以说明

参数	说明	类型	默认值	版本
value(v-model)	指定当前选中的条目	string | string[] | number | number[] | object	-	-
fetch	远程搜索方法	fetch?: (query?: string) => Promise<Array<{ [key: string]: any }>>	-	-
filter	针对接口数据源二次过滤	filter?: (option: Record<string, any>) => boolean	-	-
immediate	是否立即查询	boolean	false	-
cache	是否缓存	boolean	true	-