dynamic-form-config

T20 动态表单配置组件（Vue 2）。只负责编辑态 UI（分组 / 字段 / 联动 / 计算规则）。

• 动态表单渲染组件不在本包内。
• 通用转换：createGroupsAdapter（本包导出）。业务只需提供 fieldMap + fieldsKey，示例见
  T20-UI/src/views/DynamicForm/DynamicFormConfig/adapter/

安装

npm i dynamic-form-config

Peer 依赖（宿主需已安装并全局注册）：

| 包 | 说明 | | --- | --- | | vue ^2.6 | | | element-ui ^2.15 | el-* 组件 | | n20-common-lib >=2.9 | N20-table-pro / N20-dialog / $msgboxPor | | vxe-table ^3.6 | 表格底层 |

宿主 webpack / vue-cli 需将本包加入 transpileDependencies（发布的是 Vue SFC 源码）。

快速使用

import Vue from 'vue'
import DynamicFormConfig, {
  setRequest,
  createGroupsAdapter,
  registerSelectDialog
} from 'dynamic-form-config'
// 或直接用业务封装好的：
// import { prepareGroupsForImport, prepareGroupsForExport } from '@/views/DynamicForm/DynamicFormConfig/adapter'

import request from '@/utils/request'
setRequest(request)

Vue.component('DynamicFormConfig', DynamicFormConfig)

<template>
  <DynamicFormConfig ref="cfg" :initial-data="uiGroups" :config="config" />
</template>

<script>
export default {
  data() {
    return {
      uiGroups: [], // 必须是编辑态；接口 groups 先经 adapter 转换
      config: { /* createDefaultField / MENU_FIELD_VALUE_MAP / … */ }
    }
  },
  methods: {
    async load(bussNo, pageNo) {
      const res = await api.loadStructure({ bussNo, pageNo })
      this.uiGroups = prepareGroupsForImport(res.data.groups, this.config.MENU_FIELD_VALUE_MAP)
      // 或：this.$refs.cfg.importConfig(uiGroups)
    },
    async save() {
      const uiGroups = this.$refs.cfg.getConfig()
      const groups = prepareGroupsForExport(uiGroups, this.config.MENU_FIELD_VALUE_MAP)
      await api.saveFormConfig({ page: { /* … */ }, groups })
    }
  }
}
</script>

Props

| Prop | 类型 | 说明 | | --- | --- | --- | | initialData | Array | 编辑态 groups | | config | Object | 业务注入，见下表 |

config 常用项

| 键 | 类型 | 默认 | 说明 | | --- | --- | --- | --- | | showIsChangeColumn | Boolean | true | 是否显示「是否可变更」列（标准分组始终不显示） | | showAddFieldButton | Boolean | true | 是否显示内置「添加字段」按钮 | | showAddGroupButton | Boolean | true | 是否显示分组列表右侧「新增」按钮 | | createDefaultField / createDefaultGroup | Function | — | 字段/分组工厂 | | MENU_FIELD_VALUE_MAP 等 | — | — | 取值来源映射 | | request | Function | — | HTTP 请求 |

插槽

| 插槽 | 作用域参数 | 说明 | | --- | --- | --- | | group-header | group-pool | 分组列表标题右侧（原「新增」位置），可自定义「选择分组」等 | | toolbar | group / group-pool / add-fields(fields[]) | 字段列表标题栏右侧，可自定义「选择字段」等按钮；add-fields 向当前分组头部插入字段 |

<DynamicFormConfig :config="config">
  <template slot="group-header">
    <el-button type="text" size="mini" @click="openGroupSelect">选择分组</el-button>
  </template>
  <template slot="toolbar" slot-scope="{ group, addFields }">
    <el-button size="mini" @click="openSelect(addFields)">选择字段</el-button>
  </template>
</DynamicFormConfig>

modify === 0 时该行其他配置项、编辑/控制设置/计算规则/删除均禁用；仅「是否可变更」本身可切换。

实例方法（ref）

| 方法 | 返回 | 说明 | | --- | --- | --- | | getConfig() | GroupUi[] | 编辑态 groups | | importConfig(uiGroups) | boolean | 载入编辑态 groups（接口数据请先 adapter） | | reset() | void | 清空 |

编辑态数据结构（组件内部）

getConfig() / importConfig() / initialData 使用的结构。与接口报文不同；接口形态由业务侧 DynamicFormConfig/adapter 转换。

顶层为 分组数组 GroupUi[]。

结构总览

GroupUi[]
├── groupNo / groupName / groupType / groupNature / …
├── fields: FieldUi[]          // 字段列表（注意：不是 elements）
├── linkages: LinkageRule[]    // 组内联动（数组，不是 JSON 字符串）
├── crossLinkages: CrossLinkageRule[]
└── calcRules: CalcRule[]

1. 分组 GroupUi

| 字段 | 类型 | 必填 | 说明 | 示例 | | --- | --- | --- | --- | --- | | groupNo | String | 是 | 分组编码 | BASE_INFO | | groupName | String | 是 | 分组名称 | 基本信息 | | groupType | Number | 是 | 分组类型：0 表单 / 1 列表 | 0 | | groupNature | Number | 是 | 分组性质：0 标准 / 1 半自定义 / 2 自定义 | 2 | | desc | String | 否 | 分组描述 | 基本字段信息 | | visible | Boolean | 否 | 是否在业务页可见（标准分组开关） | true | | orderNum | Number | 否 | 排序 | 1 | | fields | FieldUi[] | 是 | 字段列表 | [] | | linkages | LinkageRule[] | 否 | 组内联动规则 | [] | | crossLinkages | CrossLinkageRule[] | 否 | 跨组联动规则（挂在触发字段所在分组） | [] | | calcRules | CalcRule[] | 否 | 计算规则 | [] |

2. 字段 FieldUi（fields[]）

对应配置表格列 / createDefaultField 产出。

2.1 基础与开关

| 字段 | 类型 | 必填 | 说明 | 示例 | | --- | --- | --- | --- | --- | | fieldId | String | 是 | 字段编号 | contractNo | | name | String | 是 | 字段名称（可改） | 合同编号 | | initialName | String | 否 | 初始名称（表格只读参考） | 合同编号 | | elementNature | Number | 否 | 字段性质：0 标准 / 1 扩展列 / 2 扩展 | 2 | | mold | String | 是 | 控件类型（见下方枚举） | input | | source | String | 否 | 取值来源（字符串，不是接口整数） | dataDict | | elementValueKey | String | 否 | 「字段值」列选中项的 value | gdtBuss | | defaultValue | String | 否 | 默认值 | GDT_11 | | display | Number | 是 | 是否显示：0 / 1 | 1 | | required | Number | 是 | 是否必填：0 / 1 | 1 | | edit | Number | 是 | 是否可编辑：0 / 1 | 1 | | modify | Number | 是 | 是否可变更：0 / 1 | 0 | | orderNum | Number | 否 | 排序 | 1 | | validationRule | String | 否 | 校验规则（编辑态可带；导出时亦可由 required 推导） | required |

source 取值：''（空/手动）| masterData | dataDict | autoCalc | other | businessData

mold 常用值：input / textarea / numberInput / datepicker / money / rate / scaleRate / limitSelectGroup / select / radio / booleanRadio / checkbox / cascader / treeBySearch / branchBankSelect / scrollLoadSelect / dialogSelect

2.2 控件扩展配置（编辑态扁平挂在字段上）

按 mold 使用，无则空。导出到接口时由 adapter 打进 elementConfig。

| 字段 | 类型 | 说明 | 典型控件 | | --- | --- | --- | --- | | url | String | 选项/字典请求地址 | select、cascader、dataDict | | urlKey | String | 字典 key | dataDict | | urlParams | String | 额外 query | cascader | | searchUrl | String | 搜索接口 | scrollLoadSelect、branchBankSelect | | searchField | String | 搜索入参字段名 | masterData select | | searchLabelField | String | 选项展示字段 | select | | searchValueField | String | 选项值字段 | select | | searchKeyName | String | 搜索关键字参数名 | branchBankSelect、scrollLoadSelect | | optionValueKey | String | 选项 value 键 | cascader、远程选项 | | optionLabelKey | String | 选项 label 键 | cascader、远程选项 | | option | Array|null | 静态选项 [{value,label}] | limitSelectGroup、radio 等 | | maxLevel | Number | 级联层级 | cascader，默认 3 | | commonId | String | 弹框全局组件名 | dialogSelect | | dialogName | String | 弹框组件名（常与 commonId 相同） | dialogSelect | | selectedLabelField | String | 选中后回显文案字段 | dialogSelect、tree、scrollLoad | | moduleNo | String | 模块号 | treeBySearch | | relaNo | String | 权限/关联号 | treeBySearch | | isUnitDataScope | String | 单位数据范围 | treeBySearch |

3. 组内联动 LinkageRule（linkages[]）

| 字段 | 类型 | 说明 | 示例 | | --- | --- | --- | --- | | id | String | 规则 ID | lk_xxx | | sourceField | String | 触发字段 fieldId | formField1 | | conditions | Condition[] | 触发条件 | 见下表 | | logic | String | 条件组合：AND / OR | AND | | targetFields | String[] | 目标字段列表 | ['formField2'] | | targetField | String | 当前生效目标字段 | formField2 | | targetGroupId | String | 组内联动一般为 '' | '' | | sourceGroupId | String | 源分组（编辑辅助） | '' | | action | String | 动作：hide/show/required/optional/editable/readonly/setValue 等 | hide | | actionValue | Any | 动作附加值（如 setValue） | '' | | expression | String | 表达式（可选） | '' |

Condition

| 字段 | 类型 | 说明 | 示例 | | --- | --- | --- | --- | | field | String | 条件字段 fieldId | formField1 | | op | String | == / != / empty / notEmpty / > / < / >= / <= | == | | value | Any | 比较值 | today |

4. 跨组联动 CrossLinkageRule（crossLinkages[]）

在 LinkageRule 基础上：

| 字段 | 类型 | 说明 | | --- | --- | --- | | targetGroupId | String | 目标分组 groupNo（必填语义） | | （其余） | | 同 LinkageRule |

5. 计算规则 CalcRule（calcRules[]）

| 字段 | 类型 | 说明 | 示例 | | --- | --- | --- | --- | | id | String | 规则 ID | 可选 | | targetField | String | 结果写入字段 fieldId | amount | | calcMode | String | local / remote | local | | expression | String | 本地表达式（{fieldId} 语法） | {a}+{b} | | tokens | Array | 表达式 token（回显用） | [] | | triggerFields | String[] | 触发字段列表 | ['a','b'] | | scope | String | inner / cross | inner | | sourceGroupId | String|null | 跨组时源分组 | null | | periodType | String|null | 日期期间；日期计算固定为 day | day | | literalValue | String | 常量/计法：非日期为插入常量临时值；日期为 add（加一天）/ inclusive（含首日），不写入表达式 | 日期默认 add | | remoteCalcApi | String | 远程计算地址 | '' | | remoteCalcParams | Object | 远程额外参数 | {} |

6. 编辑态示例

[
  {
    "groupNo": "BASE_INFO",
    "groupName": "基本信息",
    "groupType": 0,
    "groupNature": 2,
    "desc": "",
    "visible": true,
    "fields": [
      {
        "fieldId": "contractNo",
        "name": "合同编号",
        "initialName": "合同编号",
        "mold": "input",
        "source": "",
        "elementValueKey": "",
        "defaultValue": "",
        "display": 1,
        "required": 1,
        "edit": 1,
        "modify": 0
      },
      {
        "fieldId": "currencyNo",
        "name": "币种",
        "initialName": "币种",
        "mold": "select",
        "source": "masterData",
        "elementValueKey": "currency",
        "defaultValue": "",
        "url": "/api/bems/1.0/currency",
        "searchField": "searchKey",
        "searchLabelField": "currencyName",
        "searchValueField": "currencyNo",
        "display": 1,
        "required": 0,
        "edit": 1,
        "modify": 0
      }
    ],
    "linkages": [],
    "crossLinkages": [],
    "calcRules": []
  }
]

接口侧字段映射与 createGroupsAdapter 见：

T20-UI/src/views/DynamicForm/DynamicFormConfig/adapter/（fieldContract.js + index.js） packages/dynamic-form-config/src/adapter/createGroupsAdapter.js

发布

cd packages/dynamic-form-config
npm publish

本包以 SFC 源码形式发布（main: src/index.js），无需单独 build。适配层不随本包发布。