FcDesigner Pro

Appearance

修改选择项配置方式 ​

在设计器中，select、radio、checkbox、cascader、treeSelect、transfer 等“依赖 options 的组件”，右侧属性面板通常会提供一组“选项配置方式”（例如：静态结构、远程请求、全局数据源）。这些配置方式并不是散落在每个 DragRule 里，而是由通用工具方法统一生成：

  • makeOptionsRule(...)：普通列表 options（对应 TableOptions）
  • makeTreeOptionsRule(...)：树形 options（对应 TreeOptions）

本文讲清楚如何二开上述方法，达到两类目标：

  • 新增一种选项配置方式（示例：增加“脚本/结构体编辑 Struct”）
  • 删除一种默认内置方式（示例：移除“全局数据源”）

你要改哪些地方？ ​

影响“选项配置方式”的核心文件是：

  • /src/utils/index.js
    • makeOptionsRule(t, to, label, value)
    • makeTreeOptionsRule(t, to, label, value)

这些方法内部引用的关键配置组件（便于理解与排查）：

  • 远程请求配置：/src/designer/fetch/FetchConfig.vue（组件名：FetchConfig）
  • 树形静态配置：/src/designer/TreeOptions.vue（组件名：TreeOptions）
  • 全局数据源选择：/src/designer/GlobalFetchSelect.vue（组件名：GlobalFetchSelect）
  • 全局数据源管理弹窗：/src/designer/fetch/GlobalFetchConfig.vue

机制说明：_optionType + control ​

makeOptionsRule / makeTreeOptionsRule 的核心是一个 radio 规则：

  • 字段名固定为：field: '_optionType'
  • 默认选中值：value: 2（默认“静态结构”）
  • 选项列表：options: [...]
  • 联动渲染：control: [...]

其中 control 的含义是：

  • 当 _optionType === 某个 value 时，把对应的 rule: [...] 动态插入到面板中（也就是切换不同的配置方式 UI）。

默认内置的 3 种方式（当前实现）：

  • 1：全局数据源（global）
    • UI：GlobalFetchSelect
    • 存储：field: 'formCreateEffect>fetch'（对象，内部带 key/to/_uni 等字段）
  • 3：远程请求（fetch）
    • UI：FetchConfig
    • 存储：field: 'formCreateEffect>fetch'（对象，内部会写入 to）
  • 2：静态结构（struct）
    • 普通 options：TableOptions（makeOptionsRule）
    • 树形 options：TreeOptions（makeTreeOptionsRule）
    • 存储：field: 'formCreate' + upper(to).replace('.', '>')（写入对应的 rule.props.xxx）

to 参数是什么意思？ ​

to 用于描述“选项数据应该写回到哪一个字段”，例如：

  • 组件通过 rule.props.data 接收 options，则 to 应传：'props.data'
  • 组件通过 rule.options 接收 options（少见），则 to 可传：'options'

对于静态方式（TableOptions/TreeOptions），to 会被转换成面板内部的 field（formCreateProps>data 这类路径），最终落到对应的 rule 上。

对于远程/全局方式（FetchConfig/GlobalFetchSelect），to 会写入 formCreateEffect>fetch.to，用于告知运行时“请求结果要写到哪个目标字段”。

示例一：新增一种配置方式 ​

目标：在“静态结构（TableOptions/TreeOptions）”之外，再提供一个更灵活的方式，让高级用户直接用脚本/结构体编辑 options（支持复制粘贴大段数据、支持更复杂的值类型）。

这里复用内置 Struct 组件：

  • 组件文件：/src/designer/Struct.vue
  • 组件名：Struct

1. 修改 makeOptionsRule（普通 options） ​

在 /src/utils/index.js 的 makeOptionsRule 中：

  • 在 options 数组里新增一项（value 例：4）
  • 在 control 数组里新增对应的 rule

示例改法（仅展示关键结构）：

js
// 新增一种选项配置方式：Struct（脚本/结构体编辑）
options.push({ label: t('fetch.optionsType.structEditor'), value: 4 });

control.push({
  value: 4,
  rule: [
    {
      type: 'Struct',
      field: 'formCreate' + upper(to).replace('.', '>'),
      title: t('props.options'),
      _fc_important_prop: true,
      wrap: { show: false },
    },
  ],
});

2. 修改 makeTreeOptionsRule（树形 options） ​

同理在 makeTreeOptionsRule 中追加 value=4 的分支（树形 options 的目标字段一致）：

js
options.push({ label: t('fetch.optionsType.structEditor'), value: 4 });

control.push({
  value: 4,
  rule: [
    {
      type: 'Struct',
      field: 'formCreate' + upper(to).replace('.', '>'),
      title: t('props.options'),
      _fc_important_prop: true,
      wrap: { show: false },
    },
  ],
});

3. 补齐多语言（必须） ​

由于新增了 fetch.optionsType.structEditor，需要在语言包中补齐该 key（至少 zh-cn，并建议同步 en 等其他语言）。

示例（/src/locale/zh-cn.js）：

js
fetch: {
  // ...
  optionsType: {
    fetch: '远程数据',
    global: '全局数据源',
    struct: '静态数据',
    structEditor: '脚本编辑',
  },
},

4. （可选）把新增方式设为默认 ​

如果你希望新方式成为默认选中的配置方式，把 value: 2 改成 value: 4 即可：

js
return {
  type: 'radio',
  field: '_optionType',
  value: 4, // 默认选中“脚本编辑”
  // ...
};

示例二：删除一种默认内置方式 ​

目标：某些项目不允许引用全局数据源（避免跨表单复用导致治理困难），希望右侧面板只保留“静态结构”和“远程请求”两类方式。

要点：必须同时删除两处，否则会出现“能显示选项，但切换后没有对应配置 UI”的问题：

  • options：删掉 value: 1 的那一项
  • control：删掉 value: 1 的那一段

1. 在 makeOptionsRule 中移除 global 分支 ​

从 options 中移除：

js
{ label: t('fetch.optionsType.global'), value: 1 }

并从 control 中移除：

js
{
  value: 1,
  rule: [
    {
      type: 'GlobalFetchSelect',
      field: 'formCreateEffect>fetch',
      props: { to },
    },
  ],
}

2. 在 makeTreeOptionsRule 中移除 global 分支 ​

与上面完全一致：同步移除 options 与 control 中的 value: 1 分支。

常见问题排查 ​

1. 选项切换后没有任何配置 UI ​

  • 最可能原因：只改了 options 没改 control（或 value 对不上）
  • 定位路径：/src/utils/index.js 的 makeOptionsRule / makeTreeOptionsRule

2. 静态 options 改了，但运行态组件拿不到数据 ​

  • 最可能原因：to 传错（例如应该传 'props.data'，但传了 'data' 或 'options'）
  • 定位路径：组件 DragRule 的 props() 里调用 makeOptionsRule(t, to, ...) 的那一行

3. 新增方式文案显示为空 ​

  • 最可能原因：多语言 key 缺失（fetch.optionsType.xxx 未补齐）
  • 定位路径：/src/locale/zh-cn.js（以及其他语言包）