B端大仓文档

基于现有UI设计封装，底层依赖Form，使用API可参考AdvancedForm。

统一UI，及交互行为
配置化支持，内置常用数据录入组件，以及支持自定义Field

业务场景

符合UI规范的查询表单场景，多与表格查询组合使用。

如何使用

vue

<script setup lang="ts">
import { useCommonPage, IFieldType, SearchForm } from '@fs/lib'

const { searchForm, searchModel } = useCommonPage()

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

// 查询字段配置
const config = {
  fields: [
    {
      type: IFieldType.Input,
      label: '仓库',
      name: 'warehouse',
    },
    {
      type: IFieldType.Select,
      label: '库区',
      name: 'area',
      options: [
        { label: 'AAA', value: 1 },
        { label: 'BBB', value: 2 },
      ],
    },
    {
      type: IFieldType.RemoteSelect,
      label: '状态',
      name: 'shiftStateTypeCode',
      props: {
        fetch: fetchOptions,
      },
    },
    {
      type: IFieldType.Input,
      label: '快速搜索',
      name: 'search',
      placeholder: '转移单号/库存ID',
    },
  ],
}

const search = (modelValue: any) => {
  console.log('查询参数:回调=>', modelValue)
  console.log('查询参数:v-model=>', searchModel.value)
}
</script>

<template>
  <SearchForm
    ref="searchForm"
    v-model="searchModel"
    :config="config"
    @query="search"
    @reset="search"
  />
</template>

代码演示

基本使用

<script setup lang="ts">
import { useCommonPage, IFieldType } from '@fs/lib'

const { searchForm, searchModel } = useCommonPage()

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

// 查询字段配置
const config = {
  fields: [
    {
      type: IFieldType.Input,
      label: '仓库',
      name: 'warehouse',
    },
    {
      type: IFieldType.Select,
      label: '库区',
      name: 'area',
      options: [
        { label: '蔡甸', value: 1 },
        { label: '北美', value: 2 },
      ],
    },
    {
      type: IFieldType.RemoteSelect,
      label: '状态',
      name: 'shiftStateTypeCode',
      props: {
        fetch: fetchOptions,
      },
    },
    {
      type: IFieldType.Input,
      label: '快速搜索',
      name: 'search',
      placeholder: '转移单号/库存ID',
    },
  ],
}

const search = (modelValue: any) => {
  console.log('查询参数:回调=>', modelValue)
  console.log('查询参数:v-model=>', searchModel.value)
}
</script>

<template>
  <SearchForm
    ref="searchForm"
    v-model="searchModel"
    :config="config"
    @query="search"
    @reset="search"
  />
</template>

自定义Field(规则见AdvancedForm中自定义Field)

<script setup lang="ts">
import { useCommonPage, IFieldType, CusFormItem } from '@fs/lib'

const { searchForm, searchModel } = useCommonPage()

// 查询字段配置
const config = {
  fields: [
    {
      type: IFieldType.Input,
      label: '仓库',
      name: 'warehouse',
    },
    {
      type: IFieldType.Select,
      label: '库区',
      name: 'area',
      options: [
        { label: 'AAA', value: 1 },
        { label: 'BBB', value: 2 },
      ],
    },
    {
      type: CusFormItem,
      label: '自定义',
      name: 'cus',
      options: [
        { label: '已上架', value: 1 },
        { label: '已下架', value: 2 },
      ],
    },
    {
      type: IFieldType.Input,
      label: '快速搜索',
      name: 'search',
      placeholder: '转移单号/库存ID',
    },
  ],
}

const search = (modelValue: any) => {
  console.log('查询参数:回调=>', modelValue)
  console.log('查询参数:v-model=>', searchModel.value)
}
</script>

<template>
  <SearchForm
    ref="searchForm"
    v-model="searchModel"
    :config="config"
    @query="search"
    @reset="search"
  />
</template>

指定宽度
默认单选Select->120px,其余都为240px,如遇特殊情况可自定义宽度。

<script setup lang="ts">
import { useCommonPage, IFieldType } from '@fs/lib'

const { searchForm, searchModel } = useCommonPage()

// 查询字段配置
const config = {
  width: 100,
  fields: [
    {
      type: IFieldType.Input,
      label: '仓库',
      name: 'warehouse',
    },
    {
      type: IFieldType.Select,
      label: '库区',
      name: 'area',
      options: [
        { label: '蔡甸', value: 1 },
        { label: '北美', value: 2 },
      ],
    },
    {
      type: IFieldType.Input,
      label: '快速搜索',
      name: 'search',
      placeholder: '转移单号/库存ID',
      width: 300,
    },
  ],
}

const search = (modelValue: any) => {
  console.log('查询参数:回调=>', modelValue)
  console.log('查询参数:v-model=>', searchModel.value)
}
</script>

<template>
  <SearchForm
    ref="searchForm"
    v-model="searchModel"
    :config="config"
    @query="search"
    @reset="search"
  />
</template>

自定义插槽(即时查询可能会带来较多非必要的查询，特别是级联表单域时较为突出?)

<script setup lang="ts">
import { useCommonPage, IFieldType } from '@fs/lib'

const { searchForm, searchModel } = useCommonPage()

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

// 查询字段配置
const config = {
  fields: [
    {
      type: IFieldType.Input,
      label: '仓库',
      name: 'warehouse',
    },
    {
      type: IFieldType.Select,
      label: '库区',
      name: 'area',
      options: [
        { label: '蔡甸', value: 1 },
        { label: '北美', value: 2 },
      ],
    },
    {
      type: IFieldType.RemoteSelect,
      label: '状态',
      name: 'shiftStateTypeCode',
      props: {
        fetch: fetchOptions,
      },
    },
    {
      type: IFieldType.Input,
      label: '快速搜索',
      name: 'search',
      placeholder: '转移单号/库存ID',
    },
  ],
}

const search = (modelValue: any) => {
  console.log('查询参数:回调=>', modelValue)
  console.log('查询参数:v-model=>', searchModel.value)
}

// 重置
const handleReset = () => {
  searchForm.value?.reset()
  search(searchModel.value)
}
</script>

<template>
  <SearchForm ref="searchForm" v-model="searchModel" :config="config">
    <template #append>
      <f-button style="margin-right: 10px" @click="handleReset">重置</f-button>
      <f-button type="primary" @click="search">查询</f-button>
    </template>
  </SearchForm>
</template>

API

参数	说明	类型	默认值	版本
value(v-model)	表单内容	object	-	-
config	表单配置	ISearchFormConfig	-	-

说明，
config类型约束如下。详见AdvancedForm。

export interface ISearchFormConfig {
  width?: string | number // 每个field所占宽度
  immediate?: boolean // field改变是否立即触发query,自动查询时，查询触发时机不一样 Input=>回车触发，清除触发；剩余数据录入组件皆为update:model时触发，即change
  fields: Array<Partial<Field>> // field项配置
}

插槽

append

事件

事件名	说明	回调参数	版本
change	表单内容变更时回调	function(name: string, value: any, ...rest: any)	-
reset	表单重置时回调	function(modelValue: any)	-
init	表单初始化时回调	function(modelValue: any)	-
click	表单域点击时	function(e: Event, name: string)	-
query	触发查询	function(modelValue: object)	-

说明，
使用方式同AdvancedForm。
query为SearchForm特有，可监听此事件进行表格数据查询。

query触发条件：

change事件，如select，radio等
form keydown.enter时触发
input特殊，回车触发，以及change时为空触发

方法

同AdvancedForm。

SearchForm ​

业务场景 ​

如何使用 ​

代码演示 ​

API ​

插槽 ​

事件 ​

方法 ​

SearchForm

业务场景

如何使用

代码演示

API

插槽

事件

方法