# 功能描述
本组件可与其它组件混合(mix)使得混合后的组件具有增删改查等功能。
本组件根据参数自动组装为两种格式：数据查询格式和数据保存格式提交到后并获得后台的返回值，同时根据配置选择对查询后的数据进行变换处理（例如变为树形结构等)。
源码路径: node_modules/sei-ui/src/components/support/data-source.js。
# 功能列表
本控件有超80个主要功能如下：
(1) 控件依赖功能
1) 依赖别的控件(dependent.target)
2) 依赖变化时的查询条件(dependent.filter)
3) 依赖变化时的回调(dependent.call)
(2) 查询功能
1) 定制控件加载就查询(option.load)
2) 定制操作按钮(option.privilege)
3) 只查询字段名称(query.onlyField)
4) 查询主键字段名(option.keyField)
5) 定制查询字段(option.fields)
6) 定制查询条件(query.filter)
7) 定制查询分组(query.group)
8) 定制查询排序(query.order)
9) 定制查询地址(query.url)
10) 定制多表查询(query.merge)
11) 查询前回调函数(query.beforeQueryEvn)
12) 查询后回调函数(query.afterQueryEvn)
13) 直接使用sql语句查询(query.sql)
14) 查询结果作为字典缓存(query.dic)
15) 查询结果后端做字典翻译(dict)
(3) 查询结果转换功能
1) 查询结果数组、json与字符串间的转换(option.dataConver)
2) 查询结果转树形结构(data.tree)
3) 查询结果转下拉框数据格式(data.option)
4) 查询结果单值数组转json数组(data.map)
5) 查询结果遍历(data.rowEvn)
(4) 禁用操作按钮
1) 禁用新增操作按钮(buttonsDisabled.add)
2) 禁用修改操作按钮(buttonsDisabled.edit)
3) 禁用删除操作按钮(buttonsDisabled.del)
4) 禁用查看操作按钮(buttonsDisabled.see)
(5) 保存操作(增/删/改)
1) 更改新增初始化值(option.initRow)
2) 上传附件后保存附件路径功能(option.attFile)
3) 定制服务器不存储的字段(save.noSaveFields)
4) 定制服务器始终要存储的字段(save.alwaysSaveFields)
5) 定制保存后是否立即查询(save.isReload)
6) 传输到后端但不保存的数据,即额外数据(att)
7) 保存前数据转换(option.dataConver)
8) 保存前每行数据遍历(save.rowEvn)
9) 保存前数据校验(form)
10) 新增时的提交地址(save.add.url)
11) 新增到其它表(save.add.head)
12) 新增时的查询条件(save.add.filter)
13) 新增时的后端的其它操作，例如增加子表数据、修改或删除其它表数据(save.add.serverEvn)
14) 修改时的提交地址(save.edit.url)
15) 修改到其它表(save.edit.head)
16) 修改时的查询条件(save.edit.filter)
17) 修改时的后端的其它操作，例如增加子表数据、修改或删除其它表数据(save.edit.serverEvn)
18) 删除时的提交地址(save.del.url)
19) 删除时的查询条件(save.del.filter)
20) 删除时的后端的其它操作，例如增加子表数据、修改或删除其它表数据(save.del.serverEvn)
(6) web事件回调功能
1) 点击增加按钮前的函数回调(beforeAddEvn)
2) 点击编辑按钮前的函数回调(beforeEditEvn)
3) 点击查看按钮前的函数回调(beforeSeeEvn)
4) 点击删除按钮前的函数回调(beforeDelEvn)
5) 点击增加按钮后的函数回调(afterAddEvn)
6) 点击编辑按钮后的函数回调(afterEditEvn)
7) 点击查看按钮后的函数回调(afterSeeEvn)
8) 点击按钮完成前的回调(beforeOpen)
9) 点击按钮完成后的回调(afterOpen)
10) 新增数据保存前回调(beforeAddSaveEvn)
11) 修改数据保存前回调(beforeEditSaveEvn)
12) 删除数据保存前回调(beforeDelSaveEvn)
13) add,edit,del 操作保存操作前的回调函数(beforeSaveEvn)
14) 新增数据保存后回调(afterAddSaveEvn)
15) 修改数据保存后回调(afterEditSaveEvn)
16) 删除数据保存后回调(afterDelSaveEvn)
17) add,edit,del 成功保存后的回调函数(afterSaveEvn)
(7) 通过属性props实现的功能
1) 新增字典功能(dic)
2) 外部传输的数据(data)
3) 联动别的控件功能(linkage)
4) 指定主键字段功能(keyField)
5) 禁止通过配置的数据源装载数据(isDataSourceLoad)
6) 禁止通过配置的数据源保存数据(isDataSourceSave)
7) 是否保留历史更改行数据(isKeepRowsDiff)
8) 附加的按钮(attButton)
9) 剔除查询返回数组中主键字段值在excludeVal中的记录(excludeVal)
10) 是否保留上下页的已经选择项(multiSelectionKeep)
11) 新增事件,替换默认的新增事件(addAction)
12) 编辑事件,替换默认的编辑事件(editAction)
13) 保存事件,替换默认的保存事件(saveAction)
14) 删除事件,替换默认的删除事件(delAction)
15) 查询事件,替换默认的查询事件(queryAction)
# 属性props
本控件的属性
| 参数 | 必填 | 数据类型 | 默认值 | 可选值 | 说明 |
|---|---|---|---|---|---|
| form | 否 | Object, Function | 要校验的form表单(针对element表单在保存时自动校验) | ||
| isDataSourceLoad | 否 | Boolean | true | true/false | 是否通过数据源装载数据 |
| isDataSourceSave | 否 | Boolean | true | true/false | 是否通过数据源保存数据 |
| isKeepRowsDiff | 否 | Boolean | false | true/false | 是否保留历史更改行数据(常用于非每行更改后都要保存的情况，即一次性保存所有更改数据的情况) |
| keyField | 否 | String | 不通过数据源操作时指定表格行的主键字段 | ||
| attButton | 否 | Object | 附加的按钮,例如附加新增按钮、修改按钮、删除按钮:{add: {}, edit: {}, del: {}} | ||
| dic | 否 | Array | 字典配置 | ||
| data | 否 | Array | {} | 外部传输的数据 | |
| dataSource | 否 | Object | 数据源配置 | ||
| linkage | 否 | Function | 联动操作,常用于选择一个值后, 根据选择项刷新别的控件数据 | ||
| excludeVal | 否 | Array | 剔除查询返回数组中主键字段值在excludeVal中的记录 | ||
| multiSelectionKeep | 否 | Boolean | false | true/false | 是否保留上下页的已经选择项 |
| addAction | 否 | Function | 新增事件,替换默认的新增事件 | ||
| editAction | 否 | Function | 编辑事件,替换默认的编辑事件 | ||
| saveAction | 否 | Function | 保存事件,替换默认的保存事件 | ||
| delAction | 否 | Function | 删除事件,替换默认的删除事件 | ||
| queryAction | 否 | Function | 查询事件,替换默认的查询事件 |
# 计算属性computed
| 名称 | 返回值类型 | 说明 |
|---|---|---|
| dataSourceDependent | JSON | 获得配置的依赖控件所选中行数据 |
| getDic | JSON | 获得字段改变后的数据数数据 |
| isSelect | Boolean | 是否选中(常用于只有选中才会有修改和删除按钮) |
| isAddDisabled | Boolean | 系统的新增按钮是否禁用 |
| isEditDisabled | Boolean | 系统的编辑按钮是否禁用 |
| isDelDisabled | Boolean | 系统的删除按钮是否禁用 |
| isSeeDisabled | Boolean | 系统的查看按钮是否禁用 |
| hasPvButtons | Boolean | 是否有按钮(pvButtons中) |
| hasAdd | Boolean | pvButtons中是否有新增按钮 |
| hasEdit | Boolean | pvButtons中是否有编辑按钮 |
| hasDel | Boolean | pvButtons中是否有删除按钮 |
| hasSee | Boolean | pvButtons中是否有查看按钮 |
| hasExport | Boolean | pvButtons中是否有导出按钮 |
| hasSave | Boolean | 当前是否为保存状态 |
| hasCancel | Boolean | 当前是否为取消状态(等同于hasSave状态) |
| isAdd | Boolean | 当前是否为新增状态 |
| isEdit | Boolean | 当前是否为编辑状态 |
| isSee | Boolean | 当前是否为查看状态 |
| isAddOrEdit | Boolean | 当前是否为新增或者编辑状态 |
# 方法Methods
| 方法名 | 功能说明 | 参数说明 | 返回值类型 | 其它说明 |
|---|---|---|---|---|
| refresh() | 刷新控件数据 | |||
| getDialogEdit() | 如果有弹出编辑框，则返回弹出编辑框实例 | |||
| getActionType() | 获得当前操作类型(add/edit/see) | String | add: 新增, edit: 编辑 see:查看 | |
| getPvButtons() | 获得权限按钮 | |||
| getData() | 获得控件数据 | Array | ||
| getDataSource() | 获得配置的数据源json | JSON | ||
| getCurrSelection() | 获得当前选中行json数据(单选时) | JSON | ||
| getMultiSelection() | 针对多选时获得多选行数组数据(多选时) | Array | ||
| getCurrEditSelection() | 获得当前正在编辑的数据结构体(currEditSelection) | currEditSelection | 结构体currEditSelection格式: { index: null, /* 正在新增或编辑的行的行号,只用于表格 / oldData: null, / 正在新增或编辑的行的副本数据 / newData: {}, / 正在新增或编辑的行的副本新数据 / originalData: null / 当前操作的原始行数据 */ } | |
| getKeyFieldName() | 获得当前控件的主键字段名称 | String | ||
| getCurrSelectionKeyFieldVal() | 获得当前选中行的主键字段值 | 根据当前行数据确定 | ||
| doLinkage() | 联动操作,常用于选择一个值后, 根据选择项刷新别的控件数据 | |||
| checkDoubleRow(row) | 判断主键与浏览器现有数据主键是否重复(常用于新增或修改前的数据重复判断) | row:当前行数据 | Boolean | true: 有重复, false: 无重复 |
| validate(row) | 校验当前行数据(仅用于校验v-rules规则) | row:当前行数据 | Boolean | true: 校验通过, false: 校验不通过 |
| getRowsDiff() | 获得原始的差异行(注意有无主键时格式不一样) | |||
| getRowsDiffBySaveJson() | 获得要保存的差异行数据的后端保存需要的json格式 | JSON | ||
| beginAction(action, index, afterCallback, filter, isReload) | 新增/修改/查看操作 | action:操作类型,新增(add),修改(edit),查看(see) index:表格数据的行索引(只针对表格) afterCallback:回调 filter:查询条件 isReload:是否重新从数据库中查询出数据 | ||
| handelSave(beforeCallback, afterCallback, isReload) | 数据新增、修改的保存操作 | beforeCallback:保存前回调,返回false将取消保存操作 afterCallback:保存后回调 isReload:保存后是否同步查询最新数据 | ||
| handelDel(beforeCallback, afterCallback) | 数据删除操作 | beforeCallback:保存前回调,返回false将取消保存操作 afterCallback:保存后回调 | ||
| handelQuery(filter, beforeCallback, afterCallback) | 数据查询操作(不保留filter) | filter:查询条件 beforeCallback:查询前回调,返回false将取消查询操作 afterCallback:查询后回调 | ||
| handelQueryFilter(filter, beforeCallback, afterCallback) | 数据查询操作(保留filter) | filter:查询条件 beforeCallback:查询前回调,返回false将取消查询操作 afterCallback:查询后回调 | ||
| clearData() | 清除数据并初始化状态 | |||
| initClear() | 清除数据以及权限并初始化状态 | |||
| resetEditStatus(afterCallback) | 初始化状态标志 | afterCallback:回调 |
# 事件emit
| 事件名 | 功能说明 | 参数 | 参数说明 |
|---|---|---|---|
| created | 控件创建事件 | (instance) | 控件实例本身 |
| mounted | 控件加载成功 | (instance) | 控件实例本身 |
| dependentArrive | 依赖控件变化事件 | (dataSourceX, newValue, oldValue, res) | dataSourceX：当前数据源配置内容。 newValue：依赖控件的新值。 oldValue： 依赖控件的旧值。 res：本控件查询服务器返回结果集。 |
| afterDBQuery | 查询结束后事件 | (data) | 服务器返回结果 |
| afterDBSave | 数据新增、修改保存后事件 | (res, actionType, currEditSelection, diff) | res：操作结果, actionType：操作类型, currEditSelection：数据集, diff：差异数据 |
| afterDBDel | 数据删除后事件 | (res) | 执行结果 |
| beginDBAdd | 开始新增数据时事件 | (currEditSelection) | 结构体currEditSelection：{ index:null,//正在新增或编辑的行的行号,只用于表格。 oldData:{}, //正在新增或编辑的行的副本数据 newData:{}, //正在新增或编辑的行的副本新数据。 originalData:{}, //当前操作的原始行数据。 } |
| beginDBEdit | 开始删除数据时事件 | (currEditSelection) | 结构体currEditSelection：{ index:null,//正在新增或编辑的行的行号,只用于表格。 oldData:{}, //正在新增或编辑的行的副本数据 newData:{}, //正在新增或编辑的行的副本新数据。 originalData:{}, //当前操作的原始行数据。 } |
| beginSee | 开始查看数据时事件 | (currEditSelection) | 结构体currEditSelection：{ index:null,//正在新增或编辑的行的行号,只用于表格。 oldData:{}, //正在新增或编辑的行的副本数据 newData:{}, //正在新增或编辑的行的副本新数据。 originalData:{}, //当前操作的原始行数据。 } |
| clearDicData | 控件销毁前销毁字典数据事件 | (name) | 字典名称 |
| beforeDestroy | 控件销毁前事件 | (instance) | 控件实例本身 |
# 结构体currEditSelection
currEditSelection用于控件临时存储新增数据、修改数据的值。 结构格式为：
{
index: null, /* 正在新增或编辑的行的行号,只用于表格 */
oldData: null, /* 正在新增或编辑的行的副本数据 */
newData: {}, /* 正在新增或编辑的行的副本新数据 */
originalData: null /* 当前操作的原始行数据 */
}
1
2
3
4
5
6
2
3
4
5
6
# 选项组成
data-source由 head、dict、dependent、option、att、query、data、webEvn、save 组成，其中每部分都是json结构体。
{
head: { }, /* 必配，头部，如果不配置则本dataSource无效 */
option: { }, /* 选配，选项 */
dependent: { }, /* 选配，依赖，用于本控件值依赖别的控件值变化而变化 */
dict: {}, /* 选配，对查询的结果后端进行字典翻译后传回前端 */
att: { }, /* 选配，发送到后端的附加数据 */
query: { }, /* 选配，查询选项 */
data: { }, /* 选配，对查询返回后的数据进行处理,例如增加数据、转map、转树形结构等 */
webEvn: { }, /* 选配，web事件，包括保存前后的事件等 */
save: { }, /* 选配，保存选项 */
buttonsDisabled: {} /* 选配, 根据返回值决定按钮禁用状态 */
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 选项一览表
{
head:{ //必配, 操作数据头部
dbType:'mongodb' //选配, 数据库类型,支持关系数据库和非关系数据库,默认为关系数据库, 非关系数据库目前只支持mongodb
module:'', //模块编号,建议都设置
source:'', //数据源编号,使用本项可以不设置module的值
view:'', //视图名称,使用本项必须设置module值
table:'', //表名称,使用本项必须设置module值
},
option: { //选配
ignoreNoField: false, //选配, 是否忽略数据库中不存在的字段
isPrivilege: false, //选配, 对模块子表是否进行权限判断,默认为true
export:true, //选配, 导出数据时是否从数据库字典表拿字段名称和标题
attFile: [], //选配, 如果该文档中包含附件,则指明附件字段名称
subTable: 0, //是否将关联平行表或子表的数据传回,0:不传,1:传所有平行表,2:传所有平行表和所有第一级子表,3:传所有第一级子表但不传平行表,4:传所有第一级子表和第二级子表及但不传平行表, 5:传所有第一级子表和第二级子表及第三级子表但不传平行表, 以此类推
load:true, //选配, 是否加载后就立即查询,默认为true,只有设置为false时初始化加载后才不拿数据
privilege:false, //选配, 是否加载后立即从服务器拿按钮操作权限,默认为false,可设置类型:Boolean, String, Array
table: '', //选配,用于查询或保存时字段名前面加的表名
keyField:false, //选配, 是否回传主键字段名称, 默认为false, 查询返回数据后变为主键字段的名称
keyFieldValue: ()=>$ref.控件名.currSelection.字段名, //选配, 用于在表格对话框中配置了DataSource，在打开对话框是拿表格数据的字段
dataConver:{ //选配, 数据转换
oid: 'array->string' //web需要的数据类型和服务器端数据类型转换,目前只支持 'array->string' 和 'json->string'
},
fields:'name,id', //选配, 需要返回的所有字段名称,多个字段间逗号分隔
initRow:{}, //选配, 新增加一行数据时的每个字段默认值,可以是函数
dic:{name:'',destroy:true} //选配,字符串或者json对象格式{name:'',destroy:true}，对服务器返回的数据作为字典缓存,名字尽量与模块名称相同，destroy为tre代表所属控件销毁的时候删除该字典缓存
},
dependent: { //选配, 控件依赖的其它控件,填写此项后数据和权限开始都不会加载,直到依赖的控件的当前行数据currSelection有值才会去加载加载数据和权限
target: ()=>$ref.控件名, //必配,格式为引用对象回调,例如依赖ref名称为role的表格控件,则格式为()=>$ref.role
filter:(row)=>[{}], //必配,查询条件,row值为target控件的当前选中行数据,例如配置查询mid字段为row行字段的值,格式:[{name: 'mid', opt: '=', val: row.mid}]
call:(datasource,row,oldrow,res)=>{} //选配, 依赖变化时的回调，参数为:
datasource: 当前控件的datasource
row: target控件的当前行数据
oldrow: target控件的最近一次行数据
res: 成功后返回的数据
},
dict: { //选配,后端字典翻译
字段名: { //必配,要翻译的字段名
appendField: '' //选配, 翻译后要增加到结果集中的字段名称，如果翻译后不增加字段则不配置本项，系统将翻译后的字段替换源字段值
fix: {1:'男',0:'女'} //选配, 固定值翻译，注意：fix和table选项必须配置一个
table: { //选配, 数据库查询后翻译， 注意：fix和table选项必须配置一个
name: '', //必配, 表名字
field: '', //必配, 要拿值的字段名称,多个字段用逗号分隔,支持as别名, 例如: name, uid as id
where: "字段名=?" //选配, 查询条件，如果不配置此项，则查询条件默认为翻译的字段名称(当2个表的字段名称相同时可以不配置)
}
}
},
buttonsDisabled: { //选配, 根据返回值决定按钮禁用状态
add: (row)=>null, //选配, 对新增按钮状态检查，返回值为true标识禁用新增按钮
edit: (row)=>null, //选配, 对编辑按钮状态检查，返回值为true标识禁用编辑按钮
del: (row)=>null, //选配, 对删除按钮状态检查，返回值为true标识禁用删除按钮
see: (row)=>null, //选配, 对查看按钮状态检查，返回值为true标识禁用查看按钮
}
att:{}, //选配, 发给服务器的扩展信息,json格式,默认为:null
query:{ //选配, 查询选项参数
onlyField:false, //只拿查询结果字段,不拿数据,true:只拿字段,不拿数据 false:数据与字段都要拿,默认为false
url:'', //选配, 查询地址,默认为: /api/data/public/query
order:'', //选配, 服务器查询时排序,例如按姓名升序排序: 'name asc'
filter:[], //选配, 服务器SQL过滤条件,每次查询都会带上
filterOne:[], //选配, 服务器SQL过滤条件,只使用一次，使用后立即删除该选项,常用于表格加载时使用了查询框中的默认值
group:'id,name', //选配,查询结果分组
sql: '', //自定义sql(后端服务器要开启允许自定义sql)，如果采用此项，merge\filter\option.fields选项都无效
merge: '', //选配,联合查询,例如 'INNER JOIN sys_module_action ON sys_module.mid = sys_module_action.mid '
beforeQueryEvn: null, //查询前的回调方法, 参数为:发往服务器的json数据和固定的'query'字符串,本方法返回false将终止后续操作
afterQueryEvn: null, //查询后的回调, 参数为服务器返回数据
},
data:{ //选配, 对服务器返回的数据处理
addData:[], //选配, 附加数据,从服务器拿到数据后附加在后面
map:0, //选配, 返回的结果转换为键值对形式,结果只有value 转换后的结果为: value ==> {id:value,name:value}
tree:2, //选配, 返回的结果是否转换为树形结构,1:父子都在同一条记录情况,2:父子为2条记录的情况,使用本项必须配置option
option:{ //选配, 下拉选择框必配,包括(x-select,x-selectTree)
pid:'', //选配, 父字段名称, 树型结构必配
id:'', //必配, 子字段名称
label:'' //必配, 显示字段
},
rowEvn: //选配, 数据重新组装前每一行遍历回调函数,参数为服务器的返回的每一行JSON数据
},
webEvn:{ //选配, 浏览器前端回调事件
beforeAddEvn: //选配, 点击增加按钮前的函数回调, 参数为currSelection原始数据, 返回false终止操作
beforeEditEvn: //选配, 点击编辑按钮前的函数回调, 参数为currSelection原始数据, 返回false终止操作
beforeSeeEvn: //选配, 点击查看按钮前的函数回调, 参数为currSelection原始数据, 返回false终止操作
beforeDelEvn: //选配, 点击删除按钮前的函数回调, 参数为currSelection原始数据, 返回false终止操作
afterAddEvn: //选配, 点击增加按钮后的函数回调, 参数为currEditSelection结构体类型
afterEditEvn: //选配, 点击编辑按钮后的函数回调, 参数currEditSelection结构体类型
afterSeeEvn: //选配, 点击查看按钮后的函数回调, 参数为currEditSelection结构体类型
beforeOpen: //选配,点击按钮完成前的回调, 参数为currSelection当前选中行数据和action当前操作类型, 返回false终止操作
afterOpen: //选配,点击按钮完成后的回调, 参数为currEditSelection结构体类型和action当前操作类型
beforeAddSaveEvn: //选配, 新增数据保存前回调,参数为diff:差异数据,originalData:原始数据,返回false终止操作,更改diff会影响发往服务器的数据
beforeEditSaveEvn: //选配, 修改数据保存前回调,参数为diff:差异数据,originalData:原始数据,返回false终止操作,更改diff会影响发往服务器的数据
beforeDelSaveEvn: //选配, 删除数据保存前回调,参数为rows(当前选中行原始数据), originalData(当前选中行原始数据), 返回false终止操作, 更改rows行内主键字段值会影响发往服务器的数据
beforeSaveEvn: //选配, add,edit,del 操作保存操作前的回调函数, 参数为saveJson:发往服务器的JSON数据, action:操作类型, diff:发往服务器的转换前的数据, originalData: 原始数据行, 返回false将终止后续操作, 只有更改saveJson才会影响发往服务器的数据
afterAddSaveEvn: //选配, 新增数据保存后回调,参数为res(服务器返回数据),diff(新增行数据),originalData(为null,因为新增行无原始数据)
afterEditSaveEvn: //选配, 修改数据保存后回调,参数为res(服务器返回数据),diff(发往服务器的转换前的数据),originalData(原始数据)
afterDelSaveEvn: //选配, 删除数据保存后回调,参数为res(服务器返回数据),diff(发往服务器的转换前的数据),originalData(原始数据)
afterSaveEvn: //选配, add,edit,del 成功保存后的回调函数, 参数为action(操作类型),res(服务器返回数据),diff(发往服务器的转换前的数据),originalData(原始数据)
},
save:{ //选配, 保存数据的选项
isReload: true //保存后是否执行再查询返回查询数据
noSaveFields:[] //选配, 服务器不存储的字段数组
alwaysSaveFields:[] //选配, 服务器始终要存储的字段数组
rowEvn: //选配, 数据保存前每一行遍历回调,参数为每一行JSON数据
add:{ //选配, 新增加数据时的选项
head:{} //选配, 操作数据时的head, 不配置则采用上级的head
keyVal:false //选配, 是否需要服务器传回新增加的数据的主键值
url:'' //选配, 新增数据url地址,默认为: /api/data/public/save
filter:[] //选配, 格式等同于del选项内的filter
serverEvn: [] //选配, 格式等同于del选项内的serverEvn
},
edit:{ //选配, 修改数据时的选项
head:{} //选配, 操作数据时的head, 不配置则采用上级的head
url:'' //选配, 修改数据地址,默认为: /api/data/public/save
filter:[] //选配, 格式等同于del选项内的filter
serverEvn:[ //选配, 注意格式与add和del稍有不同
{
field:[], //必配, 字段名称,只有改变此配置的数据才会执行下行的serverEvn
serverEvn:[] //必配, 上面选项field内的字段值有变化才执行此serverEvn, 格式等同于del选项内的serverEvn
}
]
}
del:{ //选配, 删除数据时的选项
url:'' //选配, 删除数据地址,默认为: /api/data/public/save
filter:[] //选配,
serverEvn:[ //选配,服务器端的其它操作
{
head:{ //选配, 格式等同上级head格式, 如果不配则直接复用上级的head
module:'', //操作的模块,如果不设置则采用上一级的module
table: 'sys_user_log', //操作的表
},
data:[ //必须配置, 格式等同上级data格式
{
action: 'edit', //必须配置, 操作类型:add,edit,del
rows: [ //选配, 但是新增add和修改edit必须配置,只有del才选配
{
keyVal: "111", //选配, 主键字段的值，选配时可通过filter条件来确定数据行
row:{ //选配, 但是新增add和修改edit必须配置,只有del才选配
w1: "#{w1}", //w1字段的值
w2: "&{w2}", //w2字段的值,&表示如果该值为数组则会产生多条记录
},
filter:[]
}
],
filter: [ //选配, 查询条件,变量采用 #{} 方式,旧值采用old. ,新值采用new. 注意:AND或OR后面必须是数组,如果中括号前不写AND或OR，则默认为AND
{AND:[{'rid':{'=':'#{rid}'}}]}, ==>简写为 {'rid':{'=':'#{rid}'}} => 简写为 {'rid':'#{rid}'} //简写方式,操作符默认为=
{OR:[{'rid':{'=':'#{rid}'}} ==>简写为 {'rid':{'=':'#{rid}'}} => 简写为 {'rid':'#{rid}'} //简写方式
{OR:[{'rid':{'=':'#{rid}'}}]} ==>简写为 {OR:[{rid:'#{rid}'},]}
{AND:[{'rid':{'=':'#{rid}'}}]}
]
}
[{'rid':'#{rid}'},{'rid':{'=':'#{rid}'}}], //AND的简写方式 => 对应sql为: rid=1 and rid=2
[{p:1},{and:[or:{p1:2},{or:{p2:3}}]}], ==>简写为 [{p:1},[{p1:2},{or:{p2:3}}]] ==> 对应sql为: p1=1 and (p1=2 or p2=3)
]
}
],
serverEvn:[] //选配
}
]
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
# head选项
# 选项格式
说明：head 结构体为 JSON 格式。如果不使用自定义接口，则必须配置头部参数
{
head: {
module: 'sys_position', //模块编号,在sys_module表中找
source: 'sysPositionList_01', //sql语句编号,在sys_data_sql表中找
view: '', //视图名称,在数据库视图名称中找
table: '', //表名称,在sys_module表中maintable字段和subtable字段中找
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 选项说明
说明：head 结构体为 JSON 格式。
| 参数 | 必填 | 数据类型 | 默认值 | 可选值 | 说明 |
|---|---|---|---|---|---|
| module | 否 | String | 说明本组件所属模块编号,建议设置,用于数据操作时的权限判断以及获取该模块的主表 | ||
| source | 否 | String | 说明本组件操作的sql语句编号（需事先在后端设置sql语句并编号） | ||
| view | 否 | String | 说明本组件操作的视图编号（需事先在数据库中设置视图），使用本项必须设置module值 | ||
| table | 否 | String | 说明本组件操作的表名，使用本项必须设置module值，只有在该module下有子表并且使用子表时才设置 |
# option选项
# 选项格式
说明：option 结构体为 JSON 格式，结构体格式为：
option:{ //选配
ignoreNoField: false, //选配, 是否忽略数据库中不存在的字段
isPrivilege: false, //选配, 对模块子表是否进行权限判断,默认为true
export:true //选配, 导出数据时是否从数据库字典表拿字段名称和标题
attFile: [], //选配, 如果该文档中包含附件,则指明附件字段名称
subTable: 0, //是否将关联平行表或子表的数据传回,0:不传,1:传所有平行表,2:传所有平行表和所有第一级子表,3:传所有第一级子表但不传平行表,4:传所有第一级子表和第二级子表及但不传平行表, 5:传所有第一级子表和第二级子表及第三级子表但不传平行表, 以此类推
load:true, //选配, 是否加载后就立即查询,默认为true,只有设置为false时初始化加载后才不拿数据
privilege:false, //选配, 是否加载后立即从服务器拿按钮操作权限,默认为false,可设置类型:Boolean, String, Array
table: '', //选配,用于查询或保存时字段名前面加的表名
keyField:false, //选配, 是否回传主键字段名称, 默认为false, 查询返回数据后变为主键字段的名称
keyFieldValue: ()=>$ref.控件名.currSelection.字段名, //选配, 用于在表格对话框中配置了DataSource，在打开对话框是拿表格数据的字段
dataConver:{
oid: 'array->string' //web需要的数据类型和服务器端数据类型转换,目前只支持 'array->string' 和 'json->string'
}
fields:'name,id', //选配, 需要返回的所有字段名称,多个字段间逗号分隔
initRow:{}, //选配, 新增加一行数据时的每个字段默认值,可以是函数
dic:{name:'',destroy:true} //选配,字符串或者json对象格式{name:'',destroy:true}，对服务器返回的数据作为字典缓存,名字尽量与模块名称相同，destroy为tre代表所属控件销毁的时候删除该字典缓存
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 选项说明
| 参数 | 必填 | 数据类型 | 默认值 | 可选值 | 说明 |
|---|---|---|---|---|---|
| ignoreNoField | 否 | Boolean | false | true false | 是否忽略数据库中不存在的字段 |
| isPrivilege | 否 | Boolean | true | true false | 对模块子表是否进行权限判断 |
| export | 否 | Boolean | true | true false | 导出数据时是否从数据库字典表拿字段名称和标题 |
| attFile | 否 | Array | 如果该文档中包含附件,则指明存放附件路径的字段名称 | ||
| subTable | 否 | Integer | 0 | 是否将关联平行表或子表的数据传回,0:不传,1:传所有平行表,2:传所有平行表和所有第一级子表,3:传所有第一级子表但不传平行表,4:传所有第一级子表和第二级子表及但不传平行表, 5:传所有第一级子表和第二级子表及第三级子表但不传平行表, 以此类推 | |
| load | 否 | Boolean | true | true false | 是否加载后就立即查询,默认为true,只有设置为false时初始化加载后才不拿数据 |
| privilege | 否 | Boolean String Array | false | 是否加载后立即从服务器拿按钮操作权限,默认为false,可设置类型:Boolean, String, Array | |
| keyField | 否 | Boolean | true | true false | 是否回传主键字段名称, 回传后变为主键字段的名称 |
| dataConver | 否 | JSON | web需要的数据类型和服务器端数据类型转换，例如将web的数组类型转换为字符串类型：dataConver:{oid: array->string} | ||
| fields | 否 | String | 设置返回的字段,多个字段间逗号分隔，例如只返回name字段和id字段配置： fields:'name,id' | ||
| initRow | 否 | JSON Function | 新增加一行数据时的每个字段默认值,可以是函数 | ||
| dic | 否 | String JSON | 对服务器返回的数据作为字典缓存(名字尽量与模块名称相同,便于模块修改数据时清空清空与模块名字相同的缓存)，如果本控件退出时需清空本缓存字典，则格式为 {name:'字典名称', destroy: true} |
# dependent选项(依赖)
# 选项格式
本控件依赖的其它控件,填写此项后数据和权限开始都不会加载,直到依赖的控件的当前行数据currSelection有值才会去加载数据和权限
说明：dependent 结构体为 JSON 格式，结构体格式为：
dependent: { //选配, 控件依赖的其它控件,填写此项后数据和权限开始都不会加载,直到依赖的控件的当前行数据currSelection有值才会去加载加载数据和权限
target: ()=>$ref.控件名, //必配,格式为引用对象回调,例如依赖ref名称为role的表格控件,则格式为()=>$ref.role
filter:(row)=>[{}], //必配,查询条件,row值为target控件的当前选中行数据,例如配置查询mid字段为row行字段的值,格式:[{name: 'mid', opt: '=', val: row.mid}]
call:(datasource,row,oldrow, res)=>{} //选配, 依赖变化时的回调，参数为:
datasource: 当前控件的datasource
row: target控件的当前行数据
oldrow: target控件的最近一次行数据
res: 成功后返回的数据
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 选项说明
| 参数 | 必填 | 数据类型 | 默认值 | 可选值 | 说明 |
|---|---|---|---|---|---|
| target | 是 | Function | ()=>$ref.依赖的控件ref名称 | 格式为引用对象回调,例如依赖ref名称为role的表格控件,则格式为()=>$ref.role，默认监控$ref.role.currSelection对象 | |
| filter | 是 | Function | (row)=>[{}] | 查询条件,row值为target控件的当前选中行数据,例如置入查询条件：查询条件中mid字段的值为当前选中行，即row行的mid字段的值,格式:[{name: 'mid', opt: '=', val: row.mid}] | |
| call | 否 | Function | (datasource,row)=>{} | 回调，参数为当前控件的datasource和target控件的当前行数据 |
# dict选项(字典翻译)
# 选项格式
说明：dict 结构体为 JSON 格式，结构体格式为：
dict: { //选配,后端字典翻译
字段名: { //必配,要翻译的字段名
appendField: '' //选配, 翻译后要增加到结果集中的字段名称，如果翻译后不增加字段则不配置本项，系统将翻译后的字段替换源字段值
fix: {1:'男',0:'女'} //选配, 固定值翻译
table: { //选配, 数据库查询后翻译
name: '', //必配, 表名字
field: '', //必配, 要拿值的字段名称
where: "字段名=?" //选配, 查询条件，如果不配置此项，则查询条件默认为翻译的字段名称(当2个表的字段名称相同时可以不配置)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
注意：fix和table选项必须配置一个
# 选项说明
针对每个需要翻译的字段配置如下参数
| 参数 | 必填 | 数据类型 | 默认值 | 可选值 | 说明 |
|---|---|---|---|---|---|
| appendField | 否 | String | 是否对翻译后的字段作为新字段添加到查询结果中,如果不配置此项，则将查询结果替换查询结果中的该字段值 | ||
| fix | 否 | Object | 固定值翻译，例如将1翻译为男，0翻译为女，则结构体为:{1:'男',0:'女'} | ||
| table | 否 | Object | 表查询翻译，有3个属性：name:查询的表名称,field:要拿值的字段,where:查询条件。例如要对查询结果中的sysid字段值进行翻译，而翻译值在sys_system表中的name，翻译后增加一个字段名称为sysname列，两张表都是sysid字段则可以不写where选项，完整写法为：{sysid: {appendField:'sysname',table: {appendField: 'sysname', name: 'sys_system', field: 'name', where: "sysid=?"}}},可简写为：{sysid: {appendField:'sysname',table: {appendField: 'sysname', name: 'sys_system', field: 'name'}}} |
# att选项(附加数据)
# 选项格式
说明：att 结构体为 JSON 格式，发给服务器的附加数据，为后续未来开发提供数据扩展。
# query选项(查询)
# 选项格式
说明：query 结构体为 JSON 格式，结构体格式为：
query:{ //选配, 查询选项参数
onlyField:false, //只拿查询结果字段名称,不拿数据,true:只拿字段,不拿数据 false:数据与字段都要拿,默认为false
url:'', //选配, 查询地址,默认为: /api/data/public/query
order:'', //选配, 服务器查询时排序,例如按姓名升序排序: 'name asc'
filter:[], //选配, 服务器SQL过滤条件,每次查询都会带上
filterOne:[], //选配, 服务器SQL过滤条件,只使用一次，使用后立即删除该选项,常用于表格加载时使用了查询框中的默认值
group:'id,name', //选配,查询结果分组
sql: '' //自定义sql(后端服务器要开启允许自定义sql)，如果采用此项，merge\filter\option.fields选项都无效
merge: '' //选配,联合查询
beforeQueryEvn: null, //查询前的回调方法, 参数为:发往服务器的json数据和固定的'query'字符串,本方法返回false将终止后续操作
afterQueryEvn: null, //查询后的回调, 参数为服务器返回数据
},
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 选项说明
| 参数 | 必填 | 数据类型 | 默认值 | 可选值 | 说明 |
|---|---|---|---|---|---|
| onlyField | 否 | Boolean | false | true/false | 只拿查询结果字段名称,不拿数据 |
| url | 否 | String | /api/data/public/query | 查询地址 | |
| url | 否 | String | /api/data/public/query | 查询地址 | |
| order | 否 | String | 服务器查询时排序,例如按姓名及编号升序排序: 'name asc, id desc' | ||
| group | 否 | String | 查询结果分组字段多个字段逗号分隔，例如对name,id字段进行分组则设置为: 'id,name' | ||
| filter | 否 | JSON/Array | 服务器SQL过滤条件,每次查询都会自动带上 | ||
| filterOne | 否 | Array | 服务器SQL过滤条件,只使用一次，使用后立即删除该选项,常用于表格加载时带入查询框中的默认值 | ||
| merge | 否 | JSON | 多表联合查询，例如3张表联合查询格式为inner join sys_module on sys_privilege.mid = sys_module.mid INNER JOIN sys_module_action on sys_module.mid = sys_module_action.mid and sys_privilege.action = sys_module_action.action | ||
| beforeQueryEvn | 否 | Function | 查询前的回调方法, 参数为:发往服务器的json数据和固定的'query'字符串,本方法返回false将终止后续操作 | ||
| afterQueryEvn | 否 | JSON | 查询后的回调, 参数为服务器的返回数据 |
# data选项(查询结果转换)
# 选项格式
data:{ //选配, 对服务器返回的数据处理
addData:[], //选配, 附加数据,从服务器拿到数据后增加的数据
map:0 //选配, 返回的结果转换为键值对形式,结果只有value 转换后的结果为: value ==> {id:value,name:value}
tree:2 //选配, 返回的结果是否转换为树形结构,1:父子都在同一条记录情况,2:父子为2条记录的情况,使用本项必须配置option
option:{ //选配, 下拉选择框必配,包括(x-select,x-selectTree)
pid:'' //选配, 父字段名称, 树型结构必配
id:'' //必配, 子字段名称
label:'' //必配, 显示字段
},
rowEvn: //选配, 数据重新组装前每一行遍历回调,参数为服务器的返回的每一行JSON数据
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 选项说明
| 名称 | 类型 | 说明 |
|---|---|---|
| addData | array | 选配,增加新数据到服务器返回的数据集中 |
| map | number | 选配,返回的结果转换为键值对形式,因为结果只有value，因此转换后的结果为: value ==> {id:value,name:value} |
| tree | number | 选配,返回的结果是否转换为树形结构,1:父子都在同一条记录情况,2:父子为2条记录的情况,使用本项必须配置option |
| option.pid | string | 选配,父字段名称, 树型结构必配 |
| option.id | string | 必配,子字段名称 |
| option.label | string | 必配, 显示字段 |
| rowEvn | function | 选配, 数据重新组装前每一行遍历回调,参数为服务器的返回的每一行JSON数据 |
# buttonsDisabled选项(操作按钮)
对服务器返回的某些按钮进行禁用处理。
格式如下：
buttonsDisabled: { //选配, 根据返回值决定按钮禁用状态
add: (row)=>null //选配, 对新增按钮状态检查，返回值为true标识禁用新增按钮
edit: (row)=>null //选配, 对编辑按钮状态检查，返回值为true标识禁用编辑按钮
del: (row)=>null //选配, 对删除按钮状态检查，返回值为true标识禁用删除按钮
see: (row)=>null //选配, 对查看按钮状态检查，返回值为true标识禁用查看按钮
}
1
2
3
4
5
6
2
3
4
5
6
# webEvn选项(浏览器前端回调事件)
# 选项格式
webEvn:{ //选配, 浏览器前端回调事件
beforeAddEvn: //选配, 点击增加按钮前的函数回调, 参数为currSelection原始数据, 返回false终止操作
beforeEditEvn: //选配, 点击编辑按钮前的函数回调, 参数为currSelection原始数据, 返回false终止操作
beforeSeeEvn: //选配, 点击查看按钮前的函数回调, 参数为currSelection原始数据, 返回false终止操作
beforeDelEvn: //选配, 点击删除按钮前的函数回调, 参数为currSelection原始数据, 返回false终止操作
afterAddEvn: //选配, 点击增加按钮后的函数回调, 参数为currEditSelection结构体类型
afterEditEvn: //选配, 点击编辑按钮后的函数回调, 参数currEditSelection结构体类型
afterSeeEvn: //选配, 点击查看按钮后的函数回调, 参数为currEditSelection结构体类型
beforeOpen: //选配,点击按钮完成前的回调, 参数为currSelection当前选中行数据和action当前操作类型, 返回false终止操作
afterOpen: //选配,点击按钮完成后的回调, 参数为currEditSelection结构体类型和action当前操作类型
beforeAddSaveEvn: //选配, 新增数据保存前回调,参数为diff:差异数据,originalData:原始数据,返回false终止操作,更改diff会影响发往服务器的数据
beforeEditSaveEvn: //选配, 修改数据保存前回调,参数为diff:差异数据,originalData:原始数据,返回false终止操作,更改diff会影响发往服务器的数据
beforeDelSaveEvn: //选配, 删除数据保存前回调,参数为rows(当前选中行原始数据), originalData(当前选中行原始数据), 返回false终止操作, 更改rows行内主键字段值会影响发往服务器的数据
beforeSaveEvn: //选配, add,edit,del 操作保存操作前的回调函数, 参数为saveJson:发往服务器的JSON数据, action:操作类型, diff:发往服务器的转换前的数据, originalData: 原始数据行, 返回false将终止后续操作, 只有更改saveJson才会影响发往服务器的数据
afterAddSaveEvn: //选配, 新增数据保存后回调,参数为res(服务器返回数据),diff(新增行数据),originalData(为null,因为新增行无原始数据)
afterEditSaveEvn: //选配, 修改数据保存后回调,参数为res(服务器返回数据),diff(发往服务器的转换前的数据),originalData(原始数据)
afterDelSaveEvn: //选配, 删除数据保存后回调,参数为res(服务器返回数据),diff(发往服务器的转换前的数据),originalData(原始数据)
afterSaveEvn: //选配, add,edit,del 成功保存后的回调函数, 参数为action(操作类型),res(服务器返回数据),diff(发往服务器的转换前的数据),originalData(原始数据)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 选项说明
| 方法名 | 功能说明 | 参数说明 | 返回值类型 | 其它说明 |
|---|---|---|---|---|
| beforeAddEvn(currSelection) | 点击增加按钮前的函数回调 | 参数为currSelection原始数据 | 返回false终止操作 | |
| beforeEditEvn(currSelection) | 点击编辑按钮前的函数回调 | 参数为currSelection原始数据 | 返回false终止操作 | |
| beforeSeeEvn(currSelection) | 点击查看按钮前的函数回调 | 参数为currSelection原始数据 | 返回false终止操作 | |
| afterAddEvn(currEditSelection) | 点击增加按钮后的函数回调 | 参数为currEditSelection结构体类型 | ||
| afterEditEvn(currEditSelection) | 点击编辑按钮后的函数回调 | 参数为currEditSelection结构体类型 | ||
| afterSeeEvn(currEditSelection) | 点击查看按钮后的函数回调 | 参数为currEditSelection结构体类型 | ||
| beforeOpen(currSelection, action) | 点击查看按钮后的函数回调 | 参数为currSelection(当前选中行数据),action(当前操作类型) | 返回false终止操作 | |
| afterOpen(currEditSelection, action) | 点击查看按钮后的函数回调 | 参数为currEditSelection结构体类型,action(当前操作类型) | ||
| beforeAddSaveEvn(diff, originalData) | 新增数据保存前回调 | 参数为diff:差异数据,originalData:原始数据 | 返回false终止操作 | 更改diff会影响发往服务器的数据 |
| beforeEditSaveEvn(diff, originalData) | 修改数据保存前回调 | 参数为diff:差异数据, originalData(原始数据) | 返回false终止操作 | 更改diff会影响发往服务器的数据 |
| beforeDelSaveEvn(rows, originalData) | 删除数据保存前回调 | 参数为rows(当前选中行原始数据), originalData(当前选中行原始数据) | 返回false终止操作 | 更改rows行内主键字段值会影响发往服务器的数据 |
| beforeSaveEvn(saveJson, action, diff, originalData) | add,edit,del 操作保存操作前的回调函数 | saveJson:要发送到后端的json数据, action:操作类型, diff:发往服务器的转换前的数据, originalData: 原始数据 | 只有更改saveJson才会影响发往服务器的数据 | |
| afterAddSaveEvn(res, diff, originalData) | 新增数据保存后回调 | 参数为res(服务器返回数据)和diff(新增行数据), originalData(为null,因为新增行无原始数据) | ||
| afterEditSaveEvn(res, diff, originalData) | 编辑数据保存后回调 | 参数为res(服务器返回数据)和diff(发往服务器的转换前的数据), originalData(原始数据) | ||
| afterDelSaveEvn(res, diff, originalData) | 删除数据保存后回调 | 参数为res(服务器返回数据)和diff(发往服务器的转换前的数据, originalData(原始数据)) | ||
| afterSaveEvn(action, res, diff, originalData) | add,edit,del操作成功保存后的回调函数 | 参数为action(操作类型), res(服务器返回的数据), diff(发往服务器的转换前的数据), originalData(原始数据) |
# save选项(保存数据)
# 选项格式
说明：save 结构体为 JSON 格式，可配置同时增/删/修多张表的多条记录，构体格式为：
save:{ //选配, 保存数据的选项
isReload: true, //保存后是否执行再查询返回查询数据
noSaveFields:[], //选配, 服务器不存储的字段数组
alwaysSaveFields:[], //选配, 服务器始终要存储的字段数组
rowEvn: , //选配, 数据保存前每一行遍历回调,参数为每一行JSON数据
add:{ //选配, 新增加数据时的选项
head:{}, //选配, 操作数据时的head, 不配置则采用上级的head
keyVal:false, //选配, 是否需要服务器传回新增加的数据的主键值
url:'', //选配, 新增数据url地址,默认为: /api/data/public/save
filter:[] , //选配, 格式等同于del选项内的filter
serverEvn: [] //选配, 格式等同于del选项内的serverEvn
},
edit:{ //选配, 修改数据时的选项
head:{} , //选配, 操作数据时的head, 不配置则采用上级的head
url:'', //选配, 修改数据地址,默认为: /api/data/public/save
filter:[] , //选配, 格式等同于del选项内的filter
serverEvn:[ //选配, 注意格式与add和del稍有不同
{
field:[], //必配, 字段名称,只有改变此配置的数据才会执行下行的serverEvn
serverEvn:[] //必配, 上面选项field内的字段值有变化才执行此serverEvn, 格式等同于del选项内的serverEvn
}
]
}
del:{ //选配, 删除数据时的选项
url:'', //选配, 删除数据地址,默认为: /api/data/public/save
filter:[], //选配,
serverEvn:[] //选配,服务器端的其它操作
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# 选项说明
| 参数 | 必填 | 数据类型 | 默认值 | 可选值 | 说明 |
|---|---|---|---|---|---|
| isReload | 否 | Boolean | true | true/false | 保存后是否执行再查询返回查询数据 |
| noSaveFields | 否 | Array | 服务器不存储的字段 | ||
| alwaysSaveFields | 否 | Array | 服务器始终要存储的字段数组 | ||
| rowEvn(row) | 否 | Function | 数据保存前每一行遍历回调,参数为每一行JSON数据 | ||
| add | 否 | JSON | 新增加数据时的选项,详见add结构体选项参数 | ||
| edit | 否 | JSON | 修改数据时的选项,详见edit结构体选项参数 | ||
| del | 否 | JSON | 删除数据时的选项,详见del结构体选项参数 |
# add选项
# add选项格式
add:{ //选配, 新增加数据时的选项
head:{}, //选配, 操作数据时的head, 不配置则采用上级的head
keyVal:false, //选配, 是否需要服务器传回新增加的数据的主键值
url:'', //选配, 新增数据url地址,默认为: /api/data/public/save
filter:[] , //选配, 格式等同于del选项内的filter
serverEvn: [] //选配, 格式等同于del选项内的serverEvn
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# add选项说明
| 参数 | 必填 | 数据类型 | 默认值 | 可选值 | 说明 |
|---|---|---|---|---|---|
| head | 否 | JSON | 操作数据时的head, 不配置则采用上级的head | ||
| keyVal | 否 | Boolean | false | true/false | 是否需要服务器传回新增加的数据的主键值 |
| url | 否 | String | /api/data/public/save | 新增数据的url地址 | |
| filter | 否 | Array | 保存时的查询条件 | ||
| serverEvn | 否 | Array | 格式等同于del选项内的serverEvn |
# edit选项
# edit选项格式
edit:{ //选配, 修改数据时的选项
head:{} , //选配, 操作数据时的head, 不配置则采用上级的head
url:'', //选配, 修改数据地址,默认为: /api/data/public/save
filter:[] , //选配, 格式等同于del选项内的filter
serverEvn:[ //选配, 注意格式与add和del稍有不同
{
field:[], //必配, 字段名称,只有改变此配置的数据才会执行下行的serverEvn
serverEvn:[] //必配, 上面选项field内的字段值有变化才执行此serverEvn, 格式等同于del选项内的serverEvn
}
]
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# edit选项说明
| 参数 | 必填 | 数据类型 | 默认值 | 可选值 | 说明 |
|---|---|---|---|---|---|
| head | 否 | JSON | 操作数据时的head, 不配置则采用上级的head | ||
| url | 否 | String | /api/data/public/save | 新增数据的url地址 | |
| filter | 否 | Array | 保存时的查询条件 | ||
| serverEvn | 否 | Array | 注意格式与add和del稍有不同 |
# delete选项
# delete选项格式
del:{ //选配, 删除数据时的选项
url:'', //选配, 删除数据地址,默认为: /api/data/public/save
filter:[], //选配,
serverEvn:[] //选配,服务器端的其它操作
}
1
2
3
4
5
2
3
4
5
# delete选项说明
| 参数 | 必填 | 数据类型 | 默认值 | 可选值 | 说明 |
|---|---|---|---|---|---|
| url | 否 | String | /api/data/public/save | 删除数据的url地址 | |
| filter | 否 | Array | 删除时的查询条件 | ||
| serverEvn | 否 | Array | 服务器端的其它操作 |
# serverEvn选项
serverEvn选项用于服务器端当进行增、删、改操作后，系统更加当前行数据进行其他的操作，例如对其它子表的增、删、改操作等。
# serverEvn选项格式
{
head:{ //选配, 格式等同上级head格式, 如果不配则直接复用上级的head
module: '', //操作的模块,如果不设置则采用上一级的module
table: '' //操作的表
},
data:[ //必须配置, 格式等同上级data格式
{
action: 'edit', //必须配置, 操作类型:add,edit,del
rows: [ //选配, 但是新增add和修改edit必须配置,只有del才选配
{
keyVal: "111", //选配, 主键字段的值，选配时可通过filter条件来确定数据行
row:{ //选配, 但是新增add和修改edit必须配置,只有del才选配
f1: "#{w1}", //w1字段的值
f2: "&{w2}", //w2字段的值,&表示如果该值为数组则会产生多条记录
},
filter:[] //选配, 查询条件
}
],
filter: [] //选配, 查询条件
}
],
serverEvn:[] //选配，服务器的其它操作
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# serverEvn选项说明
serverEvn用于服务器端的其它操作，例如更新子表数据、删除子表数据、新增子表数据等
提示
如果没有对其它表的操作，可以不配置。
配置时注意：
(1) 配置字段值时除给固定值外，可以设置为变量，系统根据变量名动态拿值。
(2) #{w1} 代表拿w1字段的值(只有一个普通值)
(3) &{w1} 代表拿w1字段数组值(是个数组)
例如：
(1) f1: "#{w1}" 代表在f1字段的值是取当前主操作记录中w1字段的普通值，如果是插入操作，则会插入1行数据
(2) f2: "&{w1}" 代表在f1字段的值是取当前主操作记录中w1字段的数组值，如果是插入操作，则会插入多行数据
# filter选项
# filter项格式
filter: [ //选配, 查询条件,变量采用 #{} 方式,旧值采用old. ,新值采用new. 注意:AND或OR后面必须是数组,如果中括号前不写AND或OR，则默认为AND
{AND:[{'rid':{'=':'#{rid}'}}]}, ==>简写为 {'rid':{'=':'#{rid}'}} => 简写为 {'rid':'#{rid}'} //简写方式,操作符默认为=
{OR:[{'rid':{'=':'#{rid}'}} ==>简写为 {'rid':{'=':'#{rid}'}} => 简写为 {'rid':'#{rid}'} //简写方式
{OR:[{'rid':{'=':'#{rid}'}}]} ==>简写为 {OR:[{rid:'#{rid}'},]}
{AND:[{'rid':{'=':'#{rid}'}}]}
]
}
[{'rid':'#{rid}'},{'rid':{'=':'#{rid}'}}], //AND的简写方式 => 对应sql为: rid=1 and rid=2
[{p:1},{and:[or:{p1:2},{or:{p2:3}}]}], ==>简写为 [{p:1},[{p1:2},{or:{p2:3}}]] ==> 对应sql为: p1=1 and (p1=2 or p2=3)
]
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# filter选项说明
filte配置字段值时除给固定值外，可以设置为变量，系统根据变量名动态拿值。
变量与serverEvn选项等同。
# 例1: 新增加时给字段赋初值
系统默认新增时所有字段初始值为null，可配置给不同的字段赋不同的值。
配置option选项下的initRow即可。
initRow可以是函数，也可以直接是json值。
例如： 配置w1字段的值为123，配置如下：
方式一： 配置为json:
[
{
option: {
initRow: {row.w1 = 123}
}
}
]
1
2
3
4
5
6
7
2
3
4
5
6
7
方式二： 配置为函数:
[
{
option: {
initRow: (row) => row.w1 = 123
}
}
]
1
2
3
4
5
6
7
2
3
4
5
6
7
提示
配置为函数时可进行更多的变化。
# 例2: 只拿字段名称，不拿字段值
[
{
query: {
onlyField: true
}
}
]
1
2
3
4
5
6
7
2
3
4
5
6
7
# 例3: 初始化时不查询数据
系统默认初始化就立即发起查询，可设置为不查询。
[
{
option: {
load: false
}
}
]
1
2
3
4
5
6
7
2
3
4
5
6
7
# 例4: 获得操作按钮
系统默认初始化会自动查询并拿操作按钮，可设置为拿操作按钮。
[
{
option: {
privilege: false
}
}
]
1
2
3
4
5
6
7
2
3
4
5
6
7
也可以设置为只拿需要的操作按钮，例如只拿新增按钮(add),删除按钮(del),修改按钮(edit),查看按钮(see)，其它按钮不拿。
[
{
option: {
privilege: ['add', 'del', 'edit', 'see']
}
}
]
1
2
3
4
5
6
7
2
3
4
5
6
7
# 例5: 获得主键字段名称
系统默认初始化会自动查询但不拿主键字段名称，可设置为拿主键字段名称。
[
{
option: {
keyField: true
}
}
]
1
2
3
4
5
6
7
2
3
4
5
6
7
# 例6: 定制查询字段
系统默认会自动检查需要的字段，如果不够可设置此项增加字段，如果字段重复系统会自动剔除重复字段。
例如还需要拿uuid和name字段：
[
{
option: {
fields: 'uuid,name'
}
}
]
1
2
3
4
5
6
7
2
3
4
5
6
7
# 例7: 查询或保存时数据结构转换
针对某些情况，例如前端多选时该值为数据，保存时需将该数组转换为字符串，而从数据库查询后需将该值转回数组的情况。
数组转字符串，配置oid字段数组与字符串的转换：
[
{
option: {
dataConver:{
oid: 'array->string'
}
}
}
]
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
json转字符串，配置oid字段数组与字符串的转换：
[
{
option: {
dataConver:{
oid: 'json->string'
}
}
}
]
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
除系统提供的json和数组转字符串外，其它转换可使用save选项的rowEvn进行转换。
例如将oid字段保存时从数组转字符串，显示时从字符串转数组：
[
{
save:{rowEvn: (row) => {row.oid != null && (row.oid = row.oid.join(','));}},
data:{rowEvn: (row) => {row.oid != null && (row.oid = row.oid.split(','));}},
}
]
1
2
3
4
5
6
2
3
4
5
6
除此之外，还可以配置wenEven事件，在查询后和保存前进行数据转换。
# 例8: 将查询结果作为字典缓存
例如将查询结果作为字典缓存，假设字典名称为sys_system。
注意：此时是前端未刷新主界面前都会缓存，不会删除。
[
{
dic: 'sys_system'
}
]
1
2
3
4
5
2
3
4
5
例如将查询结果作为字典缓存，假设字典名称为sys_system。
注意：此时是前端该组件销毁时会自动销毁。
[
{
dic:{name:'sys_system', destroy:true}
}
]
1
2
3
4
5
2
3
4
5
# 例9: 配置额外字典缓存
系统支持将data-source的查询结果作为缓存，但是这只有1个字典，如果还需要更多字典，则可另外配置配置一个data-source并通过属性dic传入data-source中进行另外的字典配置。
例如：下例通过dic属性配置了一个新的查询并将查询结果作为sys_module名称进行缓存。
具体代码参见 node_modules/sei-ui/src/components/sys-menu-base/sys-menu-base.vue。
<!-- 菜单模板管理 -->
<template>
<x-table-edit row-key="muid" :singleSelect="false" :show-pagination="false" :data-source="{head:{module:'sys_menu_base'},option:{privilege:true,keyField:true,fields:'sysid,_pid,type',initRow:{sysid:$project.sysid}},query:{order:'_pid asc,sort asc'},data:{tree:2,option:{pid:'_pid',id:'muid',label:'name'}}}"
:dic="[{head:{module:'sys_module'},option:{dic:{name:'sys_module',destroy:true}},query:{order:'mid asc'},data:{option:{id:'mid',label:'name'},addData:[{mid:'0',name:'无'}]}}]">
<x-query slot="query">
<x-query-item prop="sysid" label="所属系统：">
<x-select slot-scope="scope" v-model="scope.row.sysid" :data-source="{head:{module:'sys_system'},option:{dic:{name:'sys_system',destroy:true}},data:{option:{id:'sysid',label:'name'}}}" placeholder="请选择所属系统"/>
</x-query-item>
<x-query-item prop="name" opt="like" label="菜单名称："/>
</x-query>
<x-table-column prop="name" label="菜单名称" :verify="{length: [1,20]}" width="150"/>
<x-table-column prop="muid" label="菜单编号" :verify="{length: [1,32]}" width="150"/>
<x-table-column prop="sysid" label="所属系统" width="150">
<template slot-scope="scope" slot="show">
{{scope.row.sysid | dic('sys_system')}}
</template>
</x-table-column>
。。。
</x-table-edit>
</template>
。。。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
提示
上例dic配置的data-source配置的缓存在本组件销毁的时候会自动销毁缓存。
由于该缓存将用于下拉框选择，因此对结果集进行了转换，并附加了一条数据({mid:'0',name:'无'})。
# 例10: 配置依赖
配置dependent选项从而支持依赖其它控件的数据变化而变化。
注意：当配置dependent选项后，初始化时将不会加载查询数据和权限操作按钮，直到依赖的控件的当前行数据currSelection有值才会去加载数据和权限。
例如：下例"角色"依赖选择"所属系统"后才能选择角色。即"角色"控件依赖"所属系统"控件。具体代码参见：node_modules/sei-ui/src/components/sys-user/sys-user.vue。
<template>
<x-table-edit 。。。>
<x-query slot="query">
<x-query-item :query="false" prop="sysid" label="所属系统：">
<x-select ref="sys" slot-scope="scope" v-model="scope.row.sysid" :data-source="{head:{module:'sys_system'},option:{dic:{name:'sys_system',destroy:true}},data:{option:{id:'sysid',label:'name'}}}" placeholder="请选择所属系统"/>
</x-query-item>
<x-query-item prop="rid" label="角色：">
<x-select ref="rid" slot-scope="scope" v-model="scope.row.rid" :data-source="{head:{module:'sys_role'},dependent: {target:()=>$refs.sys,filter:(row)=>[{sysid: row.sysid}]}, option:{fields:'rid,name'},data:{option:{id:'rid',label:'name'}}}" placeholder="请选择角色"/>
</x-query-item>
。。。
</x-query>
<x-table-column prop="uid" label="账号" width="100"/>
<x-table-column prop="name" label="姓名" width="100"/>
。。。
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
提示
第一步：由于是"角色"控件依赖"所属系统"控件，因此先对"所属系统"控件(即x-select控件)取个名称叫sys(即ref=sys)。
<x-select ref="sys" 。。。/>
1
第二步：在"角色"控件(即另一个x-select控件)配置数据源时配置dependent选项。内容为： dependent: {target:()=>$refs.sys,filter:(row)=>[{sysid: row.sysid}]}
<x-select ref="rid" 。。。 :data-source="{。。。,dependent: {target:()=>$refs.sys,filter:(row)=>[{sysid: row.sysid}]}, 。。。}" placeholder="请选择角色"/>
1
# 例11: 查询结果转下拉框数据
系统默认查询结果为json数组，而下拉框需要名称和值的对应关系，因此必须对json数组进行转换。
转换关系为: id字段字段对应下拉框的value，label字段对应下拉框的label。
例如配置"所属系统"下拉框将查询结果中的sys字段作为下拉框的value值，name字段作为下拉框的label值。
具体代码参见：node_modules/sei-ui/src/components/sys-user/sys-user.vue。
<x-select 。。。 :data-source="{head:{。。。,data:{option:{id:'sysid',label:'name'}}}" placeholder="请选择所属系统"/>
1
# 例12: 查询结果转树形结构数据
系统默认查询结果为json数组，例如下拉树形框需要树形结构，因此须对json数组进行转换为树形结构。
转换关系为: _pid指明父级 id字段字段对应下拉框的value，label字段对应下拉框的label。
例如配置"所属机构"下拉框将查询结果中的_pid字段作为树形结构父字段，oid字段作为下拉框的value值，name字段作为下拉框的label值。
具体代码参见：node_modules/sei-ui/src/components/sys-user/sys-user.vue。
<x-select 。。。 is-tree :data-source="{。。。,data:{tree:2,option:{pid:'_pid',id:'oid',label:'name'}}}" placeholder="请选择机构"/>
1
提示
由于父记录是一体记录，子记录是另一条记录，因此是2条记录转换为树形结构，因此data选项下的tree选项值为2。
如果父记录与子记录在一条记录中，则因此data选项下的tree选项值为1。
# 例13: 查询结果单值数组转json数组
针对例如查询结构为：['w1',w2'] 格式转换为[{w1: 'w2'}, {w2: 'w2'}] 格式。
配置格式:
<x-select 。。。 :data-source="{。。。,data:{map: 0},。。。}" placeholder="请选择"/>
1
# 例14: 遍历查询结果
如果需要遍历查询结果做某些操作，则配置data选项下的rowEvn选项。
<template>
<x-select 。。。 :data-source="{。。。,data:{rowEvn: myrowEvn},。。。}" placeholder="请选择"/>
</template>
<script>
export default {
methods: {
myrowEvn(row) {
console.log(row);
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 例15: 配置后端字典翻译
如果需要后端对查询结果的数据进行翻译，则配置dict选项。
例如下例将sex字段中的值进行翻译转换，将1转换为'男',0转换为'女'。
<x-select 。。。 :data-source="{。。。,dict:{sex: {fix: {1: '男', 0: '女'}} },。。。}" placeholder="请选择"/>
1
如果要保留sex字段的值，新增加一个字段来保存翻译后的值，则需配置appendField选项。
例如下例保留sex字段的值，将翻译后的值增加一个字段sexName来保存，则配置如下：
<x-select 。。。 :data-source="{。。。,dict:{appendField: 'sexName', sex:{fix: {1: '男', 0: '女'}} },。。。}" placeholder="请选择"/>
1
如果要翻译的不是固定值，需要从数据库中查询，则需配置table选项。
例如翻译sex字段的值，字典表为sys_dic,查询的字段为name和条件为sys_dic表的flag值等于sex字段的值。
<x-select 。。。 :data-source="{。。。,dict:{appendField: 'sexName', sex: {table: {name: 'sys_dic', field: 'flag', where: 'flag=?'}},。。。}" placeholder="请选择"/>
1
# 例16: 配置多表连接查询
可通过配置query项下的merge项实现多表查询。
例如data-source中head设置的为sys_system表，需要与sys_user连接查询，连接条件为sys_user表的sysid与sys_system的sysid对应。
如果连接中还要加条件，例如加 sys_user的name字段值为 '张三'
# 配置方式1
query: {
merge: "inner join sys_user on sys_user.sysid=sys_system.sysid WHERE sys_user.name='张三'"
}
1
2
3
2
3
提示
上述方式配置为内连接，以此类推可配置左连接或右连接。
# 配置方式2
注意： 此方式前面一定有个逗号哦。
query: {
merge: ",sys_user WHERE sys_system.sysid=sys_user.sysid AND sys_user.name='张三'"
}
1
2
3
2
3
提示
注意配置方式2前面一定要加逗号。