# 模板变量说明

## 模板变量配置说明

目前，模板变量控件支持以下类型

- input - 普通文本输入框。
- select - 单选下拉框。
- switch - 开关组件。
- smallfile - 文件上传控件，仅支持小于 2M 的文件，文件内容以 base64 转码后的字符串存储。
- switchForm - 开关表单，通过控件 switch 控制下面表单的显示
- complexSelect - 复杂单选框，通过控件 select 控制下面显示哪个表单
- table - 表格控件，table 类型的模板配置目前只支持 Array<Object> 类型配置项，比如 APPS。
- division - 分栏折叠控件，division 分栏组件将界面上众多的组件分栏并给出每一栏目的标头。该控件仅用于界面展示控制由于其不具有 name 属性故其子元素取值方式保持原有不变，举例 division 包含子控件 b 其取值变量为 b)。分区组件，用于界面控制，作为分栏使用，对参数使用没意义。
- password - 密码输入框，密码框输入值将被加密保存，数据加密处理。
- hidden - 隐藏输入框，默认值输入框，不显示给用户，用于存储系统级别的配置参数。

### input（输入框）

配置如下所示

```js
variables: [
  {
    type: 'input', // 控件类型，这里是 input 控件
    label: 'input', // 左侧的 label 标签
    tooltip: ' Input 输入框 测试 ', // 控件下面的提示框
    name: 'INPUT', // 变量绑定，跟 sysconfig.js 或者 config.local.js 文件下的 window.LOCAL_CONFIG 属性字段的 key 相对应
    default: '输入框的默认值' // input 的默认值
  }
];
```

### select（单选框）

配置如下所示

```js
variables: [
  {
    type: 'select', // 控件类型 这里是 单选框
    label: 'select', // 左侧的 label 标签
    options: 'A:A;B:B;C:C', // 单选框选项, 值:标签 为一组，标签和值用 ":" 分开，每一组选项用 ";" 分开
    tooltip: 'select 单选框 测试', // 控件下面的提示框
    name: 'SELECT', // 变量绑定，跟 sysconfig.js 或者 config.local.js 文件下的 window.LOCAL_CONFIG 属性字段的 key 相对应
    default: 'A' // 默认值，这里默认选项值为 A
  }
];
```

### switch（开关）

配置如下所示

```js
variables: [
  {
    type: 'switch', // 控件类型 这里是开关
    label: 'switch', // 左侧的 label 标签
    tooltip: 'switch 开关 测试', // 控件下面的提示框
    name: 'SWITCH', // 变量绑定，跟 sysconfig.js 或者 config.local.js 文件下的 window.LOCAL_CONFIG 属性字段的 key 相对应
    options: 'true:是;false:否', // 开关选项选项, 值:标签为一组，标签和值用 ":" 分开，只有两者，true和 false
    default: 'true' // 默认值
  }
];
```

### switchForm（开关表单）

配置如下所示

```js
variables: [
  {
    type: 'switchForm', // 控件类型
    label: 'switchForm', // 左侧的 label 标签
    tooltip: 'switchForm 开关表单 测试', // 控件下面的提示框
    name: 'SWITCH_FORM', // 变量绑定，跟 sysconfig.js 或者 config.local.js 文件下的 window.LOCAL_CONFIG 属性字段的 key 相对应
    children: [
      //!!! 开关表单下面的表单元素
      {
        type: 'mselect',
        label: 'switchForm mselect',
        options: 'A:A;B:B;C:C;D:D',
        tooltip: 'switchForm  mselect 开关表单 多选框 测试',
        name: 'SWITCH_FORM_MSELECT',
        default: 'A,B'
      }
    ]
  }
];
```

### complexSelect

配置如下所示

```js
variables: [
  {
    type: 'complexSelect',
    label: 'complexSelect',
    tooltip: '复杂选择器 测试 注意，一次只能一个表单填写的值有效，当保存一个表单填写的值后其他的值会 “制空”',
    options: 'A:第一个表单;B:第二个表单', // 单选框选项
    name: 'ComplexSelect',
    children: [
      {
        type: 'form',
        name: 'A', // 下拉框对应选项的值，如果单选框选择的值为 A，则会显示这表单
        children: [
          // ...
        ]
      },
      {
        type: 'form',
        name: 'B', // 下拉框对应选项的值，如果单选框选择的值为 B，则会显示这表单
        children: [
          // ...
        ]
      }
    ]
  }
];
```

### table

配置如下所示

```js
variables: [
  {
    type: 'table', // 控件类型
    label: 'table', // 左侧 标签名
    tooltip: 'table 表格 测试 使用 frameLayout - app', // 下面控件的提示语
    name: 'TABLES',
    columns: [
      {
        type: 'input', // 类型
        label: '应用名称', // 标签名
        name: 'name', // 模板变量绑定名
        default: 'foo' // 默认值
      },
      {
        type: 'input',
        label: '应用入口',
        name: 'entry',
        default: '//192.168.194.101:8010/omc/index.html'
      },
      {
        type: 'input',
        label: '挂载容器',
        name: 'container',
        default: '#subapp-container'
      },
      {
        type: 'input',
        label: '激活条件',
        name: 'activeWhen',
        default: ''
      },
      {
        type: 'input',
        label: '路由前缀',
        name: 'urlPrefix',
        default: '/foo/#'
      }
    ]
  }
];
```

### division

配置如下所示

```js
variables: [
  {
    type: 'division',
    label: '中银证券分享页配置参数',
    name: 'bocichiaShareSetting',
    fold: false,
    children: [
      {
        type: 'input',
        label: '用户中心',
        name: 'API_BIND',
        default: 'https://zygjdev.winner123.cn/g/hsxone.uic/v'
      },
      {
        type: 'input',
        label: '用户中心（boc）',
        name: 'API_BIND_BOC',
        default: 'https://zygjdev.winner123.cn/g/hsxone.uic.boc/v'
      },
      {
        type: 'input',
        label: '权益中心',
        name: 'API_HOME',
        default: 'https://zygjdev.winner123.cn/g/hsxone.ric.member/v'
      },
      {
        type: 'input',
        label: '是否启用调试工具',
        name: 'IS_OPEN_VCONSOLE',
        default: 'false'
      }
    ]
  }
];
```

### password（密码输入框）

配置如下所示

```js
variables: [
  {
    type: 'password', // 控件类型，这里是密码输入框
    label: '数据库密码', // 左侧的 label 标签
    tooltip: '数据库连接密码', // 控件下面的提示框
    name: 'DB_PASSWORD', // 变量绑定，跟 sysconfig.js 或者 config.local.js 文件下的 window.LOCAL_CONFIG 属性字段的 key 相对应
    required: true, // 是否必填
    default: '' // 默认值
  }
];
```

### hidden（隐藏输入框）

配置如下所示

```js
variables: [
  {
    type: 'hidden', // 控件类型，这里是隐藏输入框
    label: '应用版本号', // 左侧的 label 标签（虽然隐藏，但仍需要设置）
    tooltip: '应用内部版本号，用于系统识别', // 控件下面的提示框
    name: 'APP_VERSION', // 变量绑定，跟 sysconfig.js 或者 config.local.js 文件下的 window.LOCAL_CONFIG 属性字段的 key 相对应
    default: '1.0.0' // 默认值
  }
];
```

## more

更多内容可参考 see 平台的 [Deploy 帮助手册](http://rdcdocs.hundsun.com/pages/viewpage.action?pageId=39243038)