Jiess文档

Appearance

公用工具函数 ​

位于基础库.jiess/_resource/common/utils目录，提供了公共的工具函数

~/utils/index.js文件 ​

提供了一些基础的工具方法

refValue ​

  • 类型 Function
  • 形参 data
  • 返回 any
  • 详细 提取响应式中的数据

converPX ​

  • 类型 数值转化为像素
  • 形参 data
  • 返回 string
  • 详细 数值转化为像素

converValue ​

  • 类型 Function
  • 形参 data
  • 返回 string
  • 详细 值转化，可按下标提取值

~/utils/open.js文件 ​

基于$tan的封装，常配合SuperTable的编辑和新增使用

  • 类型 Function
  • 形参 midder
  • 返回 Function
  • 详细 闭包函数的外层，用于传入通用配置

midder.open

在使用SuperTable操作编辑或新增时，会调用该方法midder.open进行弹框操作， 而该方法就是上述open闭包函数调用并传入midder后，返回的内层匿名函数

内层匿名函数 ​

该函数接收以下三个参数

is ​

弹框的内容组件，支持任意（含vue/react）类型的组件

customFn ​

弹框数据解析处理后的自定义回调，常调用编辑或新增接口，完成相关操作

说明

点击弹框的确认后，程序进行如下处理：

  • 通过midder上挂载的相应类型的action/actions，获取弹框中的表单数据
  • 通过midder上挂载的相应类型的httpParam，获取弹框中的静态数据
  • 将上述两种数据合并（action数据权重更高），调用并传入customFn

弹框内容组件中可按如下方式挂载action/actions

  • 弹框中仅一块表单区域
js
// 假定弹框内容为示例中的Jiess组件
{
	isJiess: true,
	setup() {
		const area = this.area( /*...*/ );
		area.add( /*...*/ );
		midder[type].action = area.done();
	}
}
  • 弹框中有多块表单区域
js
// 假定弹框内容为示例中的Jiess组件
{
	isJiess: true,
	setup() {
		const actions = [];

		const area1 = this.area( /*...*/ );
		area1.add( /*...*/ );
		actions[0] = area1.done();

		const area2 = this.area( /*...*/ );
		area2.add( /*...*/ );
		actions[1] = area2.done();

		const area3 = this.area( /*...*/ );
		area3.add( /*...*/ );
		actions[2] = area3.done();
	}
}

解析时action的权重更高，没有action则解析actions；不论是否多块区域， 要确保所有表单字段的唯一性，即快捷构造时指定的$name不重复，否则数据会相互覆盖

config ​

config配置对象非必要，默认为空对象{}，内部属性如下

title ​
  • 类型 String
  • 默认 ——
  • 详细 弹框标题

type为add时，title默认为新增；type为edit时，title默认为编辑

type ​
  • 类型 String
  • 默认 ——
  • 详细 弹框类型，类似namespace，须在该SuperTable中具有唯一性，如edit/add
param ​
  • 类型 String
  • 默认 ——
  • 详细 弹框配置，直接作用于$tan
record ​
  • 类型 Object
  • 默认 ——
  • 详细 为弹框内容组件提供默认数据，常用于编辑页面的数据回显

其余属性直接作用于弹框的内容组件

~/utils/NameManger.js文件 ​

用于解析$name的构造函数，每个area会实例化唯一的nameManger实例

非对称的输入/输出

最早的$name就是单纯的字符串，但面对输入/输出非对称的业务需求时，即组件回显数据与接口提供数据， 以及组件反馈数据与接口所需数据，两两不匹配时，往往需要大篇幅的代码修正数据

NameManger试图使用简便的方式处理上述问题，即对输入输出数据提供各自的矫正器，这样书写代码更加规范， 同时可以将组件默认值的自定方式融入到$name，使得api更加精简

构造函数 ​

构造函数接收两个参数，分别为area实例和配置对象

属性 ​

nameManger实例中有以下主要属性

values ​

  • 类型 Object
  • 说明 初始化时，用于存放表单的完整数据
  • 详细

在初始化时，area中提供的initialValues， staticValues；以及单个组件设定的默认值， 会整合到一起，将其合并到values中

在vue中，values是响应式数据，可以通过它调整表单回显，或实时获取数据

方法 ​

nameManger实例中有以下主要方法

input ​

  • 参数 (name, { defaultValue } = {})
  • 返回 字符串类型的组件字段
  • 说明 首参即$name；defaultValue为组件默认值（如多选下拉框，默认为[]）
  • 详细 解析$name属性，并结合values对表单内容进行回显

各种类型的$name

  • 数组类型

数组中的每个字段映射values中的真实值，并作用于组件的回显，如时间范围选择器

js
$DatePicker({
	$label: '时间范围',
	type: 'daterange',
	$name: ['startDate', 'endDate']
});
  • 对象类型

$name为配置对象时，需定义config对象，该对象可以指定inputField, inputDone

js
$Input({
	$name: {
		config: {
			inputField: 'age',
			inputDone: () => 18
		}
	}
});

$name为对象形式，且含多个字段

js
$DatePicker({
	$label: '时间范围',
	type: 'daterange',
	$name: {
		config: [
			{ inputField: 'startDate', inputDone: (v) => v || null },
			{ inputField: 'endDate', inputDone: (v) => v || null }
		]
	}
})
inputDone函数的返回值，即为当前组件的默认值 ​
  • 其他类型

其他类型（通常为字符串），则将其直接视为key，从values中取对应的值，用于回显

output ​

  • 参数 ({ ...values } = this.values)
  • 返回 { ...this.staticValues, ...values }
  • 说明 values解析后，与staticValues合并后返回
  • 详情 获取区域表单数据时，需要先解析$name，再得到矫正后的输出数据

~/utils/table.js文件 ​

在SuperTable组件中，用于有分页和无分页两种数据的解析方案

SuperTable中的updateType属性

  • 类型 字符串
  • 默认 listUpdate
  • 可选 listUpdate|tableUpdate
  • 说明

默认调用本文件中的listUpdate方法，按照带分页的数据解析方案，调用接口发起请求， 并解析响应的异步数据；若列表数据不带分页，可将updateType值指定为tableUpdate

listUpdate ​

有分页列表的数据请求及处理，并按顺序接收以下参数

api ​

  • 类型 Function
  • 必要 是
  • 说明 通常为http接口，也可以是模拟的接口函数

param ​

  • 类型 Object
  • 必要 是
  • 说明 对象中含filter,table,pager,proxy，用于提取接口请求数据

config ​

  • 类型 Object
  • 必要 否
  • 说明 指定列表中需要用到的各种字段，为指定则使用基础库中的默认配置

tableUpdate ​

无分页列表的数据请求及处理，并按顺序接收以下参数

api ​

  • 类型 Function
  • 必要 是
  • 说明 通常为http接口，也可以是模拟的接口函数

param ​

  • 类型 Object
  • 必要 是
  • 说明 对象中含filter,table,proxy，用于提取接口请求数据