关联字段组件

概述

LinkedField 是一个只读的关联字段组件，用于显示从其他选择器组件（如 form-selector、table-selector）选中数据的某个字段值，实现字段间的数据联动。

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

组件名称：LinkedField

功能特性

• 自动关联源字段数据
• 显示选中项的指定字段
• 只读展示，不可编辑
• 自动同步值到 modelValue

Props

属性	类型	默认值	说明
modelValue	string	-	当前值
sourceField	string	-	源字段名（关联的选择器字段）
displayField	string	-	显示字段名（从选中项中取哪个字段）
formData	object	-	表单数据对象
placeholder	string	''	占位符
disabled	boolean	true	是否禁用（始终为只读）

Events

事件	参数	说明
update:modelValue	string | undefined	值更新
change	string | undefined	值变化

工作原理

1. 监听 formData 中 sourceField 的值变化
2. 从选中项中提取 displayField 指定的字段值
3. 自动更新 modelValue 并显示

组件会尝试从以下位置获取选中项数据：

• formData[sourceField]（如果是对象）
• formData[sourceField + '_selectedItem']
• formData[sourceField + '_selectedItems']

使用示例

基本用法

<template>
  <div>
    <!-- 客户选择器 -->
    <FormSelector
      v-model="formData.customer_id"
      form-code="customer"
      @select-item="handleSelectCustomer"
    />
    
    <!-- 关联显示客户编码 -->
    <LinkedField
      v-model="formData.customer_code"
      source-field="customer_id"
      display-field="code"
      :form-data="formData"
    />
    
    <!-- 关联显示客户联系人 -->
    <LinkedField
      v-model="formData.customer_contact"
      source-field="customer_id"
      display-field="contact_name"
      :form-data="formData"
    />
  </div>
</template>

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

const formData = reactive({
  customer_id: '',
  customer_code: '',
  customer_contact: '',
  customer_id_selectedItem: null, // 存储选中的完整数据
});

function handleSelectCustomer(item) {
  formData.customer_id_selectedItem = item;
}
</script>

与表单设计器集成

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

{
  "type": "linked-field",
  "field": "customer_code",
  "label": "客户编码",
  "props": {
    "sourceField": "customer_id",
    "displayField": "code",
    "placeholder": "选择客户后自动填充"
  }
}

典型应用场景

• 主从关联：选择客户后自动显示客户编码、联系人等
• 数据引用：选择产品后自动显示产品规格、价格等
• 信息展示：选择用户后自动显示部门、职位等

注意事项

• 组件始终为只读状态
• 需要配合支持 select-item 事件的选择器组件使用
• 选择器组件需要将选中的完整数据存储到 formData 中