表单数据选择器组件

概述

FormSelector 是一个表单数据选择器组件，用于从已发布的表单中选择数据记录，支持单选/多选，通过弹窗展示表单数据列表。

组件路径：web/apps/web-ele/src/components/zq-form/form-selector/

组件名称：FormSelector

功能特性

• 从指定表单选择数据记录
• 支持单选/多选模式
• 复用 FormDataList 组件展示数据
• 支持自定义值字段和显示字段
• 标签折叠显示
• 自动加载已选数据的标签信息

Props

属性	类型	默认值	说明
modelValue	string | string[] | null	-	选中的记录值
formCode	string	-	表单编码（必填）
multiple	boolean	false	是否多选
placeholder	string	'点击选择'	占位符
disabled	boolean	false	是否禁用
clearable	boolean	true	是否可清除
collapseTags	boolean	false	是否折叠标签
maxCollapseTags	number	1	最大显示标签数
dialogTitle	string	'选择数据'	弹窗标题
dialogWidth	string	'1200px'	弹窗宽度
valueField	string	'id'	值字段名
labelField	string	'name'	显示字段名

Events

事件	参数	说明
update:modelValue	string | string[] | null	值更新
change	string | string[] | null	值变化
select-item	object | object[] | undefined	选中项完整数据

使用示例

单选数据

<template>
  <FormSelector
    v-model="selectedId"
    form-code="customer"
    placeholder="请选择客户"
  />
</template>

<script setup>
import { ref } from 'vue';

const selectedId = ref('');
</script>

多选数据

<template>
  <FormSelector
    v-model="selectedIds"
    form-code="product"
    :multiple="true"
    :collapse-tags="true"
    :max-collapse-tags="3"
    placeholder="请选择产品"
  />
</template>

<script setup>
import { ref } from 'vue';

const selectedIds = ref([]);
</script>

自定义字段

<template>
  <FormSelector
    v-model="selectedCode"
    form-code="material"
    value-field="code"
    label-field="material_name"
    placeholder="请选择物料"
  />
</template>

<script setup>
import { ref } from 'vue';

const selectedCode = ref('');
</script>

获取选中项完整数据

<template>
  <FormSelector
    v-model="selectedId"
    form-code="customer"
    @select-item="handleSelectItem"
  />
</template>

<script setup>
import { ref } from 'vue';

const selectedId = ref('');

function handleSelectItem(item) {
  console.log('选中的完整数据:', item);
  // 可以获取选中记录的所有字段
}
</script>

与表单设计器集成

在表单设计器中，该组件作为 form-selector 类型的表单项使用：

{
  "type": "form-selector",
  "field": "customer_id",
  "label": "客户",
  "props": {
    "formCode": "customer",
    "multiple": false,
    "valueField": "id",
    "labelField": "name",
    "clearable": true,
    "placeholder": "请选择客户"
  }
}

弹窗布局

弹窗内部复用 FormDataList 组件，展示表单的数据列表：

+----------------------------------------------------------+
|  选择数据                                            [X] |
+----------------------------------------------------------+
|  ┌────────────────────────────────────────────────────┐ |
|  │  [查询条件]                                        │ |
|  │  ┌──────────────────────────────────────────────┐ │ |
|  │  │ ☐ │ 名称      │ 编码      │ 状态   │ 创建时间│ │ |
|  │  │ ☑ │ 客户A     │ C001      │ 正常   │ 2024... │ │ |
|  │  │ ☐ │ 客户B     │ C002      │ 正常   │ 2024... │ │ |
|  │  └──────────────────────────────────────────────┘ │ |
|  └────────────────────────────────────────────────────┘ |
+----------------------------------------------------------+
|  已选 2 条                       [取消]  [确认]          |
+----------------------------------------------------------+

典型应用场景

• 关联数据选择：选择关联的客户、供应商、产品等
• 主从表关联：子表中选择主表数据
• 数据引用：引用其他表单的数据记录
• 级联选择：配合虚拟字段实现级联数据展示