SEI低代码开发平台文档(v6.0.0)

# 功能描述

本组件可与其它组件混合(mix)使得混合后的组件具有增删改查等功能。
本组件根据参数自动组装为两种格式：数据查询格式和数据保存格式提交到后并获得后台的返回值，同时根据配置选择对查询后的数据进行变换处理（例如变为树形结构等)。
源码路径: node_modules/sei-ui/src/components/support/data-source.js。

# 功能列表

本控件有超100个主要功能如下：
(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)
 16) 配置子表查询所属主表(option.parentTable)
 17) 配置子表与主表的连接字段关系(option.relation)
(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) 新增或修改数据保存前回调(beforeAddEditSaveEvn)
 13) 删除数据保存前回调(beforeDelSaveEvn)
 14) 新增add,修改edit,删除del 操作保存操作前的回调函数(beforeSaveEvn)
 15) 新增数据保存后回调(afterAddSaveEvn)
 16) 修改数据保存后回调(afterEditSaveEvn)
 17) 删除数据保存后回调(afterDelSaveEvn)
 18) 新增add,修改edit,删除del 操作成功保存后的回调函数(afterSaveEvn)
(7) 通过属性props实现的功能
 1) 新增字典功能(dic)
 2) 外部传输的数据(data)

# 属性props

本控件的属性

参数 必填 数据类型 默认值 可选值 说明
form 否 Object, Function 要校验的form表单(针对element表单在保存时自动校验)，例如对表单formUser进行校验:()=>$refs.formUser
dic 否 Array 字典配置，建议采用在模块配置中进行字典翻译，以便加快访问速度
data 否 Array [] 外部传入的数据
dataSource 否 Object {} 数据源配置

# 计算属性computed

名称 返回值类型 说明
dataSourceDependent 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() 获得权限按钮
hasButtons(buttonName) 权限按钮中是否存在指定的按钮
getData() 获得控件数据 Array
getDataSource() 获得配置的数据源json JSON
getCurrSelection() 获得当前选中行json数据(单选时) JSON
getMultiSelection() 针对多选时获得多选行数组数据(多选时) Array
getCurrEditSelection() 获得当前正在编辑行的数据结构体(currEditSelection) currEditSelection 结构体currEditSelection格式:
{
index: null, /* 正在新增或编辑的行的行号,只用于表格 /
oldData: null, / 正在新增或编辑的行的副本数据 /
newData: {}, / 正在新增或编辑的行的副本新数据 /
originalData: null / 当前操作的原始行数据 */
}
getKeyFieldName() 获得当前控件的主键字段名称 String
getCurrSelectionKeyFieldVal() 获得当前选中行的主键字段值
checkDoubleRow(row, field, message) 新增或修改前判断主键与浏览器现有数据主键是否重复 row:要检测的数据行，field: 要比较的字段，如果不设置则用主键字段，message: 提示信息前缀 Boolean true: 有重复, false: 无重复
validate(row) 保存前的总校验 row:当前行数据 Boolean true: 校验通过, false: 校验不通过
getRowsDiff() 获得原始的差异行(注意有无主键时格式不一样，有主键时返回map类型，无主键返回WeakSet类型)
getRowsDiffExist() 获得是否有差异行数据(即用户是否更改数据) Boolean
getRowsDiffBySaveJson() 获得要保存的差异行数据的后端保存需要的json格式 JSON
getDiff() 获得当前差异数据 JSON
beginAction(action, index, afterCallback, filter, isReload) 新增/修改/查看操作 action:操作类型,新增(add),修改(edit),查看(see)
index:表格数据的行索引(只针对表格)
afterCallback:回调
filter:查询条件
isReload:是否重新从数据库中查询出数据
handelSave(beforeCallback, afterCallback, isReload) 数据新增、修改的保存操作 beforeCallback(newData,action,oldData):保存前回调,返回false将取消保存操作
afterCallback(res, action, currEditSelection, diff):保存后回调
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) 服务器返回结果
afterPvButton 查询获得权限按钮后事件 (pvButtons) 服务器返回的按钮集合与props传入的attButton合并后的值
afterDBSave 数据新增、修改保存后事件 (res,
actionType,
currEditSelection,
diff)		 res：操作结果,
actionType：操作类型,
currEditSelection：数据集,
diff：差异数据
afterDBDel 数据删除后事件 (res, rows) res：执行结果，rows：删除的数据数组
beginDBAdd 开始新增数据时事件 (currEditSelection) 结构体currEditSelection：{
 index:null,//正在新增或编辑的行的行号,只用于表格。
 oldData:{}, //正在新增或编辑的行的副本数据
 newData:{}, //正在新增或编辑的行的副本新数据。
 originalData:{}, //当前操作的原始行数据。
}
beginDBEdit 开始删除数据时事件 (currEditSelection) 结构体currEditSelection：{
 index:null,//正在新增或编辑的行的行号,只用于表格。
 oldData:{}, //正在新增或编辑的行的副本数据
 newData:{}, //正在新增或编辑的行的副本新数据。
 originalData:{}, //当前操作的原始行数据。
}
beginDBSee 开始查看数据时事件 (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

# 后端source变量表

变量名称 功能描述 案例
#{filter} 前端传入的查询条件(注意不加单引号) SELECT * FROM sys_user WHERE #{filter} AND rid='1'
#{cur@uid} 当前用户的登录账号(注意加单引号) SELECT * FROM sys_user WHERE #{filter} AND rid='1' AND uid='#{cur@uid}'
#{cur@oid} 当前用户的部门(注意加单引号) SELECT * FROM sys_user WHERE #{filter} AND rid='1' AND oid='#{cur@oid}'
#{cur@oid} 当前用户的部门(注意加单引号) SELECT * FROM sys_user WHERE #{filter} AND rid='1' AND oid='#{cur@oid}'
#{cur@subOid} 当前用户部门及子部门(注意加单引号) SELECT * FROM sys_user WHERE oid IN ('#{cur@subOid}')
#{cur@sub} 当前用户子部门(注意加单引号) SELECT * FROM sys_user WHERE oid IN ('#{cur@sub}')
#{cur@type} 当前用户的类型(注意加单引号) SELECT * FROM sys_user WHERE #{filter} AND rid='1' AND type='#{cur@type}'
#{cur@rid} 当前用户的角色(注意加单引号) SELECT * FROM sys_user WHERE #{filter} AND rid='1' AND rid='#{cur@rid}'
#{keyField} 当前模块表的主键(注意加单引号) SELECT * FROM sys_user WHERE uid='#{keyField}'
#{field@XX} 从前端传入的查询条件找字段为XX的值进行替换，提取规则为先在 #{filter} 中查找(字段值如果为字符串注意加单引号),如果不存在再在att结构体中查找 获得前端传入的rid字段值，SELECT * FROM sys_user WHERE #{filter} AND rid='1' AND rid='#{field@rid}'
#{fieldMove@XX} 从前端传入的查询条件找字段为XX的值进行替换并从前端传入的查询条件中移除，提取规则为先在 #{filter} 中查找(字段值如果为字符串注意加单引号),如果不存在再在att结构体中查找 SELECT * FROM sys_user WHERE uid='#{fieldMove@uid}'
#{fieldLost@XX} 从前端传入的查询条件找字段为XX的值进行替换，如果前端条件中不存在则移除后端查询条件 SELECT * FROM sys_user WHERE uid='#{fieldLost@uid}'，如果前端无uid值则查询变为：SELECT * FROM sys_user
#{fieldMoveLost@XX} 从前端传入的查询条件找字段为XX的值进行替换，如果前端条件中存在，则将从前端查询条件中移除，如果不存在则移除后端查询条件 SELECT * FROM sys_user WHERE uid='#{fieldMoveLost@uid}'，如果前端无uid值则查询变为：SELECT * FROM sys_user

提示

#{field@XX}不会删除前端传入的该数据，如果条件中还有#{filter}，则该查询条件依然会在#{filter}的条件中。
如果不想加入#{filter}中，还有一种处理方式：前端传入时将字段值放到dataSource的att结构体中，利用#{field@XX}去查找。

# 选项组成

data-source由 head、dict、dependent、option、att、query、data、webEvn、save 组成，其中每部分都是json结构体。

    {
        head: { },       /* 必配，头部，如果不配置则本dataSource无效 */
        option: { }, /* 选配，选项 */
        dependent: { },       /* 选配，依赖，用于本控件值依赖别的控件值变化而变化 */
        dict: {}, /* 选配，对查询的结果后端进行字典翻译后传回前端 */
        att: { },       /* 选配，发送到后端的附加数据 */
        query: { },       /* 选配，查询选项 */
        data: { },       /* 选配，对查询返回后的数据进行处理,例如增加数据、转map、转树形结构等 */
        webEvn: { },       /* 选配，web事件，包括保存前后的事件等 */
        save: { },       /* 选配，保存选项 */
        buttons: {} /* 选配, 定制按钮 */
        export: {} /* 数据导出成excel */
    }
1
2
3
4
5
6
7
8
9
10
11
12
13

# 选项一览表

    {
        head: {               //必配, 操作数据头部
            module: '',       //模块编号,
            source: '',       //数据源编号,使用本项可以不设置module的值
            view: '',         //视图名称,使用本项可以不设置module的值
            table: ''        //表名称,使用本项建议设置module的值
        },
        export: {           //选配，数据导出成excel文件
            head: '', // 选配，设置新的数据源头部，否则采用当前数据源头部
            template: '', //选配，导出的模板文件服务器端相对路径和文件名
            dict: {}        //选配，针对数据导出时的字典翻译,如果不配置则采用上一级的dict
            page: {         //从当前页面数据表格中拿选项，配置本选项时，下面的fields选项无效
                exclusion: '',   //从当前表格列中排除的字段名，多个用逗号分隔
                append: [   //表格中不够时需附加的字段及名称，例如下例增加字段name，标题为用户名
                    {field:'name',title:'用户名'}  //增加字段name，标题为用户名
                ]
            },
            fields: [       //自定义字段，使用本选项时需不配置上面的page选项
                {field:'id',title:'编号'},  //拿字段为id，标题为编号
                {field:'name',title:'用户名'}  //拿字段为name，标题为用户名
            ]
        },
        option: {    //选配
            isDataSourceLoad: true, //是否通过数据源装载数据,默认为true
            isDataSourceSave: true, //是否通过数据源保存数据,默认为true
            isKeepRowsDiff: false,  //是否保留历史更改行数据(常用于非每行更改后都要保存的情况，即一次性保存所有更改数据的情况)
            ignoreNoField: false, //选配, 是否忽略数据库中不存在的字段
            export: true,        //选配, 导出数据时是否从数据库字典表拿字段名称和标题
            attFile: [] | '' | Boolran,        //选配, 如果该文档中包含附件,则指明附件字段名称，例如['file1','file2'] 或 'file1,file2',如果设置为true则代表将上传的临时目录下的所有文件移到正式目录中
            subTable: 0,        //是否将关联平行表或子表的数据传回,0:不传,1:传所有平行表,2:传所有平行表和所有第一级子表,3:传所有第一级子表但不传平行表,4:传所有第一级子表和第二级子表及但不传平行表, 5:传所有第一级子表和第二级子表及第三级子表但不传平行表, 以此类推
            load: true,          //选配, 是否初始化后立即查询,默认为true（注意：只初始化时有用）
            loadData: true,      //选配, 查询时是否拿数据，例如：当只拿权限而不拿数据时可设置为false
            privilege: false,    //选配, 是否加载后立即从服务器拿按钮操作权限,默认为false,可设置类型:Boolean, String, Array,例如只拿新增和编辑权限：'add,edit'
            table: '',          //选配,用于查询或保存时字段名前面加的表名
            keyField: false|'',     //选配, 是否回传主键字段名称, 默认为false, 查询返回数据后变为主键字段的名称,也可以手动指定主键字段名
            keyFieldValue: ()=>$refs.控件名.currSelection.字段名,  //选配, 用于在表格对话框中配置了DataSource，在打开对话框是拿表格数据的字段
            dataConver: {        //选配, 数据转换
                oid: 'array->string'  //web需要的数据类型和服务器端数据类型转换,目前只支持 'array->string' 和 'json->string'
            },
            fields: 'name,id',      //选配, 需要返回的所有字段名称,多个字段间逗号分隔
            initRow: {} | Function(row),     //选配, 新增加一行数据时的每个字段默认值,可以是函数
            dic: '' | {name:'',destroy:true}   //选配,字符串或者json对象格式{name:'',destroy:true}，对服务器返回的数据作为字典缓存,名字尽量与模块名称相同，destroy为tre代表所属控件销毁的时候删除该字典缓存
        },
        dependent: {    //选配, 控件依赖的其它控件,填写此项后数据和权限开始都不会加载,直到依赖的控件的当前行数据currSelection有值才会去加载加载数据和权限
            target: ()=>$refs.控件名,    //必配,格式为引用对象回调,例如依赖ref名称为role的表格控件,则格式为()=>$refs.role,另一种模式为指定的变量(系统则会监听指定的变量的变化)
            filter: (row)=>[{}],    //必配,查询条件,返回json或json数组，参数val可能有2种类型,初始化时为依赖控件的值，当依赖变化时为选中的行json
            call: (datasource,row,oldrow,res)=>{}   //选配, 依赖变化时的回调，参数为:
                                                     datasource: 当前控件的datasource
                                                     row: target控件的当前行数据
                                                     oldrow: target控件的最近一次行数据
                                                     res: 成功后返回的数据
        },
        dict: {     //选配,后端字典翻译
            字段名: {           //必配,要翻译的字段名
                appendField: ''    //选配, 翻译后要增加到结果集中的字段名称，如果翻译后不增加字段则不配置本项，系统将翻译后的字段替换源字段值
                multiSplit: null,  //选配, 当字段值中包含多个值的时候，指定多个值间的分隔符，例如字段值为多个部门编号:a,b，将a和b分别翻译则需指定分隔符为逗号
                fix: {1:'男',0:'女'}  //选配, 固定值翻译，注意：fix和table选项必须配置一个
                table: {    //选配, 数据库查询后翻译， 注意：fix和table选项必须配置一个
                    name: '',    //必配, 表名字
                    field: '',   //必配, 要拿值的字段名称,多个字段用逗号分隔,支持as别名, 例如: name, uid as id
                    where: "字段名=?"  //选配, 查询条件，如果不配置此项，则查询条件默认为翻译的字段名称(当2个表的字段名称相同时可以不配置)
                }
            }
        },
        buttons: {    //选配,按钮配置
            attButtons: {xx:{}}  //前端附加的按钮，格式等同于add等按钮选项
            add: {    //选配, 新增按钮配置选项
                type: 'primary',      //按钮类型
                icon: 'el-icon-plus', //按钮图标
                text: '新增',         //按钮文本
                visible: (row, rows) => null, //选配, 按钮是否可见，返回值true可见,参数为当前选中行和当前已装载的总数据行
                disabled: (row, rows) => null, //选配, 按钮是否禁用，返回true禁用,参数为当前选中行和当前已装载的总数据行
                action: () => null,   //点击按钮时回调，返回false将终止后续操作
            }
            edit: {    //选配, 修改按钮配置选项
                type: 'warning',      //按钮类型
                icon: 'el-icon-edit', //按钮图标
                text: '修改',         //按钮文本
                visible: (row, rows) => null, //选配, 按钮是否可见，返回值true可见,参数为当前选中行和当前已装载的总数据行
                disabled: (row, rows) => null, //选配,按钮是否禁用，返回true禁用,参数为当前选中行和当前已装载的总数据行
                action: (currEditSelection) => null,   //点击按钮时回调，返回false将终止后续操作, 参数为currEditSelection结构体
            }
            del: {    //选配, 删除按钮配置选项
                type: 'danger',      //按钮类型
                icon: 'el-icon-close', //按钮图标
                text: '删除',         //按钮文本
                visible: (row, rows) => null, //选配, 按钮是否可见，返回值true可见,参数为当前选中行和当前已装载的总数据行
                disabled: (row, rows) => null, //选配,按钮是否禁用，返回true禁用,参数为当前选中行和当前已装载的总数据行
                action: (rows) => null,   //点击按钮时回调，返回false将终止后续操作, 参数为要删除的行
            }
            see: {    //选配, 查看按钮配置选项
                type: 'success',      //按钮类型
                icon: 'el-icon-view', //按钮图标
                text: '查看',         //按钮文本
                visible: (row, rows) => null, //选配, 按钮是否可见，返回值true可见,参数为当前选中行和当前已装载的总数据行
                disabled: (row, rows) => null, //选配,按钮是否禁用，返回true禁用,参数为当前选中行和当前已装载的总数据行
                action: (row) => null,   //点击按钮时回调，返回false将终止后续操作, 参数为当前选中行
            }
            save: {    //选配, 保存按钮配置选项
                type: 'warning',      //按钮类型
                icon: 'el-icon-success', //按钮图标
                text: '保存',         //按钮文本
                visible: (row, rows) => null, //选配, 按钮是否可见，返回值true可见,参数为当前选中行和当前已装载的总数据行
                disabled: (row, rows) => null, //选配,按钮是否禁用，返回true禁用,参数为当前选中行和当前已装载的总数据行
                action: (currEditSelection, action) => null,   //点击按钮时回调，返回false将终止后续操作,参数currEditSelection结构体，action操作类型
            }
            cancel: {    //选配, 取消按钮配置选项
                type: 'success',      //按钮类型
                icon: 'el-icon-error', //按钮图标
                text: '取消',         //按钮文本
                visible: (row) => null, //选配, 按钮是否可见，返回值true可见,参数为当前选中行
                disabled: (row) => null, //选配,按钮是否禁用，返回true禁用,参数为当前选中行
                action: (currEditSelection, action) => null,   //点击按钮时回调，返回false将终止后续操作,参数currEditSelection结构体，action操作类型
            }
            export: {    //选配, 导出按钮配置选项
                type: 'primary',      //按钮类型
                icon: 'el-icon-sold-out', //按钮图标
                text: '导出',         //按钮文本
                visible: (row) => null, //选配, 按钮是否可见，返回值true可见,参数为当前选中行
                disabled: (row) => null, //选配,按钮是否禁用，返回true禁用,参数为当前选中行
                action: (json) => null,   //点击按钮时回调，返回false将终止后续操作，参数为要发往服务器的json数据
            }
            audit: {    //选配，审核按钮. 注意: 模块主表中建议配置_STATUS字段(类型与options选项中的value类型一致) 和必须配置 _X_AUDIT字段(类型为JSON)
                type: 'warning',      //按钮类型
                icon: 'el-icon-s-check', //按钮图标
                text: '审核',         //按钮文本
                visible: (row) => null, //选配, 按钮是否可见，返回值true可见,参数为当前选中行
                disabled: (row) => null, //选配,按钮是否禁用，返回true禁用,参数为当前选中行
                action: (row, auditOptions) => null, //点击按钮时回调，返回false将终止操作，auditOptions结构体JSON格式：
                                                    //{ default: null,  //缺省值，是options选项中的其中一个key值
                                                    //  field: '_STATUS', //更改的状态字段名,默认为 _STATUS 字段
                                                    //  options: {100: '审核通过', 1: '审核不通过'}, //选项列表
                                                    //  title: '审核', //弹出框标题
                                                    //  width: null, //弹出框宽度px
                                                    //  height: null //弹出框高度px
                                                    // }
                actionSaveBefore: (row, auditResult) => null,  // 保存前回调，返回false将终止操作，常用于更改主表其它字段内容，只要更改row的数据，则系统会将更改后的数据保存到数据库，auditResult结构体JSON格式：
                                                    //{ _AVALUE: null,  //审核结果值，对应选项中的value值
                                                    //  _ANAME: null,  //核结果名称，对应选项中的label值
                                                    //  _TITLE: '审核', //弹出框标题
                                                    //  _ADVISE: null, //审核人员输入的审核意见
                                                    // }
                send: (json) => null,       //发送到服务器的数据，无返回值
                actionSaveAfter: (array, change, auditResult) => null,    //保存后回调，参数：array：选中行原始数据, change:发往服务器端的行数据， auditResult：审核结果，格式同上
            }
            auditlog: { //选配，审核历史按钮
                title: '审核历史',      // 弹出框标题
                type: 'success',      //按钮类型
                icon: 'el-icon-tickets', //按钮图标
                text: '审核历史',         //按钮文本
                visible: (row) => null,  //选配, 按钮是否可见，返回值true可见,参数为当前选中行
                disabled: (row) => null, //选配,按钮是否禁用，返回true禁用,参数为当前选中行
                action: (row) => null,   //点击按钮时回调，返回false将终止后续操作，参数为当前选中行的json数据
                send: (json) => null     //发送到服务器的数据，无返回值
            }
        }
        att:{},             //选配, 发给服务器的扩展信息,json格式,默认为:null
        query:{             //选配, 查询选项参数
            tree: 'children',    //是否拿树形结构数据，children：拿下级，parent：拿上级，注意：必须在filter中至少给查询条件（_PID或主键字段），如果查询条件中为_PID字段为拿不包含自己的下级(children)或上级(parent)，如果配置的为主键字段则拿包含自己的下级或上级
            onlyField:false,    //只拿查询结果字段,不拿数据,true:只拿字段,不拿数据 false:数据与字段都要拿,默认为false
            url:'',         //选配, 查询地址,默认为: /api/data/public/query
            order:'',       //选配, 服务器查询时排序,例如按姓名升序排序: 'name asc'
            filter:[]|{}|Function,      //选配, json或json数组或函数，服务器SQL过滤条件,每次查询都会带上，如果函数返回false将终止查询
            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 '
        },
        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:{   //选配, 浏览器前端回调函数
            beforeOpen(currSelection, action):         //选配,点击新增、修改、查询按钮前的函数回调, 参数为当前选中行JSON数据，action当前操作类型, 返回false终止操作
            afterOpen(currEditSelection, action):      //选配,点击新增、修改、查询按钮后的函数回调, 参数为currEditSelection结构体和action当前操作类型
    
            beforeAddEvn(currSelection):       //选配, 点击增加按钮前的函数回调, 参数为currSelection当前选中行数据, 返回false终止操作
            afterAddEvn(currEditSelection):    //选配, 点击增加按钮后的函数回调（在afterOpen回调之前）, 参数为currEditSelection结构体
    
            beforeEditEvn(currSelection):      //选配, 点击编辑按钮前的函数回调, 参数为currSelection当前选中行数据, 返回false终止操作
            afterEditEvn(currEditSelection):   //选配, 点击编辑按钮后的函数回调（在afterOpen回调之前）, 参数currEditSelection结构体
    
            beforeDelEvn(rows, callBack):      //选配, 点击删除按钮前的函数回调, 参数为将要删除的JSON数组和回调函数(回调主要是恢复状态机制), 返回false终止操作
      
            beforeSeeEvn(currSelection):       //选配, 点击查看按钮前的函数回调, 参数为currSelection当前选中行数据, 返回false终止操作
            afterSeeEvn(currEditSelection):    //选配, 点击查看按钮后的函数回调(在afterOpen回调前), 参数为currEditSelection结构体

            beforeAddSaveEvn(diff, currEditSelection):      //选配, 新增数据操作转为发往服务器的JSON数据前回调,参数为diff:新增行数据,currEditSelection结构体,返回false终止操作,更改row会影响发往服务器的数据
            afterAddSaveEvn(res, row, currEditSelection):  //选配, 新增数据保存后回调,参数为res(服务器返回数据),row(新增行数据),currEditSelection(结构体) 
    
            beforeEditSaveEvn(diff, currEditSelection):       //选配, 修改数据操作转为发往服务器的JSON数据前回调,参数为diff:差异数据,currEditSelection结构体,返回false终止操作,更改row会影响发往服务器的数据
            afterEditSaveEvn(res, row, currEditSelection):   //选配, 修改数据保存后回调,参数为res(服务器返回数据),row(行修改数据),currEditSelection(结构体) 

            beforeAddEditSaveEvn(row, currEditSelection, actionType): //选配, 新增或修改数据保存前回调,参数为row:保存的数据, currEditSelection:构体类型, action:操作类型, 返回false终止操作, 更改row值会影响发往服务器的数据

            beforeDelSaveEvn(rows, currEditSelection):        //选配, 删除数据保存前回调,参数为rows(要删除的JSON数组),currEditSelection结构体, 返回false终止操作, 更改rows行内主键字段值会影响发往服务器的数据
            afterDelSaveEvn(res, rows, currEditSelection):    //选配, 删除数据保存后回调,参数为res(服务器返回数据),rows(要删除的JSON数组),currEditSelection结构体
    
            beforeSaveEvn(saveJson, action, rows, currEditSelection):  //选配, 对数据库 add,edit,del 操作保存操作前的回调函数, 参数为saveJson:发往服务器的JSON数据, action:操作类型, rows:发往服务器的转换前的数据(对于删除操作是JSON数组，否则为JSON), currEditSelection:结构体, 返回false将终止后续操作, 只有更改saveJson才会影响发往服务器的数据，返回false将终止操作
            afterSaveEvn(action, res, rows, currEditSelection):        //选配, add,edit,del 成功保存后的回调函数, 参数为action(操作类型),res(服务器返回数据),rows(发往服务器的转换前的数据,对于删除操作是数组),currEditSelection(结构体)

            beforeQuery(filter, beforeCallback, afterCallback):        //查询前的回调函数(注意还未产生发往服务器的json),参数为filter(查询条件),返回false终止操作，常用于自定义查询
            beforeQueryEvn(queryJson):     //选配,产生查询条件后，发往服务器前的回调，参数为将发往服务器的JSON数据，返回false终止后续操作

            afterQuery(res):               //选配,查询后将对服务器数据进行组装处理前的回调，参数为res（服务器器返回的原始数据），返回false将终止后续操作
            afterQueryEvn(data):           //选配,查询后对服务器数据进行组装处理后的回调，参数为data（组装后的数据,无状态信息）
    
            afterPvButton(pvButtons):     //选配, 获得服务器端按钮权限时回调，参数pvButtons(服务器端按钮权限与props传入的attButton合并后的值)
        },
        save:{                  //选配, 保存数据的选项
            isReload: true      //保存后是否执行再查询返回查询数据
            noSaveFields:[]     //选配, 服务器不存储的字段数组
            alwaysSaveFields:[]  //选配, 服务器始终要存储的字段数组
            ignoreNoField: false, //选配, 存储时是否忽略数据库中不存在的字段
            rowEvn:             //选配, 数据保存前每一行遍历回调,参数为每一行JSON数据
            url:                 //选配, 提交数据的url地址
            add:{               //选配, 新增加数据时的选项
                head:{}         //选配, 操作数据时的head, 不配置则采用上级的head
                keyVal:false    //选配, 是否需要服务器传回新增加的数据的主键值
                url:''          //选配, 新增数据url地址,默认为: /api/data/public/save，如果配置了此项则上层的url选项无效
                filter:[]       //选配, 格式等同于del选项内的filter
                serverEvn: []   //选配, 格式等同于del选项内的serverEvn
            },
            edit:{              //选配, 修改数据时的选项
                head:{}         //选配, 操作数据时的head, 不配置则采用上级的head
                url:''          //选配, 修改数据地址,默认为: /api/data/public/save，如果配置了此项则上层的url选项无效
                treeFields: ''   //选配, 在修改树形表时同时修改下级的指定字段值与父级的字段值一致，多个字段逗号分隔，例如修改父级的状态为1，则将所有下级的该状态都改为1
                filter:[]       //选配, 格式等同于del选项内的filter
                serverEvn:[     //选配, 注意格式与add和del稍有不同
                    {
                        field:[],       //必配, 字段名称,只有改变此配置的数据才会执行下行的serverEvn
                        serverEvn:[]    //必配, 上面选项field内的字段值有变化才执行此serverEvn, 格式等同于del选项内的serverEvn
                    }
                ]
            }
            del:{           //选配, 删除数据时的选项
                url:''      //选配, 删除数据地址,默认为: /api/data/public/save，如果配置了此项则上层的url选项无效
                filter:[]   //选配,
                serverEvn:[   //选配,服务器端的其它操作
                    {
                        head:{          //选配, 格式等同上级head格式, 如果不配则直接复用上级的head
                            module:'',   //操作的模块,如果不设置则采用上一级的module
                            table: 'sys_user_log',   //操作的表
                        },
                        data:[  //必须配置, 格式等同上级data格式
                            {
                                action: 'del', //必须配置, 操作类型: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
                                    {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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282

# head选项

# 选项格式

说明：head 结构体为 JSON 格式。如果不使用自定义接口，则必须配置头部参数

{
    head: {
        module: 'demo', //模块编号,在_SYS_MODULE表中找,建议此项都配置，以便加快访问速度
        source: 'demo', //sql语句编号,在_SYS_DATA_SQL表中找
        view: '',   //视图名称,在数据库视图名称中找
        table: '',     //表名称,在_SYS_MODULE表中_MAINTABLE字段和_SUBTABLE字段中找
    }
}
1
2
3
4
5
6
7
8

# 选项说明

说明：head 结构体为 JSON 格式。

参数 必填 数据类型 默认值 可选值 说明
module 否 String 说明本组件所属模块编号,建议设置,用于数据操作时的权限判断以及获取该模块的主表及子表
source 否 String 说明本组件操作的sql语句编号（需事先使用超级用户登录在"数据源模块”中设置该sql并设置该数据源的标识后才能访问），使用本项可不设置module值
view 否 String 说明本组件操作的视图编号（需事先在数据库中设置视图），使用本项必须设置module值
table 否 String 说明本组件操作的表名，使用本项须设置module值，只有在该module下有子表并且使用子表时才设置

# option选项

# 选项格式

说明：option 结构体为 JSON 格式，结构体格式为：

option:{    //选配
    isDataSourceLoad: true, //是否通过数据源装载数据,默认为true
    isDataSourceSave: true, //是否通过数据源保存数据,默认为true
    isKeepRowsDiff: false,  //是否保留历史更改行数据(常用于非每行更改后都要保存的情况，即一次性保存所有更改数据的情况)
    ignoreNoField: false, //选配, 是否忽略数据库中不存在的字段
    export:true,        //选配, 导出数据时是否从数据库字典表拿字段名称和标题
    attFile: [],        //选配, 如果该文档中包含附件,则指明附件字段名称,如果设置为true则代表将上传的临时目录下的所有文件移到正式目录中
    subTable: 0,        //是否将关联平行表或子表的数据传回,0:不传,1:传所有平行表,2:传所有平行表和所有第一级子表,3:传所有第一级子表但不传平行表,4:传所有第一级子表和第二级子表及但不传平行表, 5:传所有第一级子表和第二级子表及第三级子表但不传平行表, 以此类推
    load:true,          //选配, 是否初始化后立即查询,默认为true（注意：只初始化时有用）
    loadData:true,      //选配, 查询时是否拿数据，例如：当只拿权限而不拿数据时可设置为false
    privilege:false,    //选配, 是否加载后立即从服务器拿按钮操作权限,默认为false,可设置类型:Boolean, String, Array
    table: '',          //选配,用于查询或保存时字段名前面加的表名
    keyField:false|'',     //选配, 是否回传主键字段名称, 默认为false, 查询返回数据后变为主键字段的名称,也可以手动指定主键字段名
    keyFieldValue: ()=>$refs.控件名.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
19
20
21

# 选项说明

参数 必填 数据类型 默认值 可选值 说明
isDataSourceLoad 否 Boolean true true
false		 是否通过数据源装载数据
isDataSourceSave 否 Boolean true true
false		 是否通过数据源保存数据
isKeepRowsDiff 否 Boolean false true
false		 是否保留历史更改行数据(常用于非每行更改后都要保存的情况，即一次性保存所有更改数据的情况)
export 否 Boolean true true
false		 导出数据时是否从数据库字典表拿字段名称和标题
attFile 否 Array/String 如果该文档中包含附件,则指明存放附件路径的字段名称,如果设置为true则代表将上传的临时目录下的所有文件移到正式目录中
subTable 否 Integer 0 是否将关联平行表或子表的数据传回,0:不传,1:传所有平行表,2:传所有平行表和所有第一级子表,3:传所有第一级子表但不传平行表,4:传所有第一级子表和第二级子表及但不传平行表, 5:传所有第一级子表和第二级子表及第三级子表但不传平行表, 以此类推
load 否 Boolean true true
false		 是否初始化后立即查询,默认为true（注意：只初始化时有用）
loadData 否 Boolean true true
false		 查询时是否拿数据，例如：当只拿权限而不拿数据时可设置为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}

# export选项(导出excel)

说明：将数据导出成excel文件（用于表格数据导出）

    export: {           //选配，数据导出成excel文件
        head: '', // 选配，设置新的数据源头部，否则采用当前数据源头部
        template: '', //选配，导出的模板文件服务器端相对路径和文件名
        dict: {}        //选配，针对数据导出时的字典翻译,如果不配置则采用上一级的dict
        page: {         //从当前页面数据表格中拿选项，配置本选项时，下面的fields选项无效
            exclusion: '',   //从当前表格列中排除的字段名，多个用逗号分隔
            append: [   //表格中不够时需附加的字段及名称，例如下例增加字段name，标题为用户名
                {field:'name',title:'用户名'}  //增加字段name，标题为用户名
            ]
        },
        fields: [       //自定义字段，使用本选项时需不配置上面的page选项
            {field:'id',title:'编号'},  //拿字段为id，标题为编号
            {field:'name',title:'用户名'}  //拿字段为name，标题为用户名
        ]
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# dependent选项(依赖)

# 选项格式

本控件依赖的其它控件,填写此项后数据和权限开始都不会加载,直到依赖的控件的当前行数据currSelection有值才会去加载数据和权限
说明：dependent 结构体为 JSON 格式，结构体格式为：

dependent: {    //选配, 控件依赖的其它控件,填写此项后数据和权限开始都不会加载,直到依赖的控件的当前行数据currSelection有值才会去加载加载数据和权限
        target: ()=>$ref.控件名,    //必配,格式为引用对象回调,例如依赖ref名称为role的表格控件,则格式为()=>$ref.role，另一种模式为指定的变量(系统则会监听指定的变量的变化)
        filter:(val)=>[{}],    //必配,查询条件,返回json或json数组，参数val可能有2种类型,初始化时为依赖控件的值，当依赖变化时为选中的行json
        call:(datasource,row,oldrow, res)=>{}   //选配, 依赖变化时的回调，参数为:
                                                 datasource: 当前控件的datasource
                                                 row: target控件的当前行数据
                                                 oldrow: target控件的最近一次行数据
                                                 res: 成功后返回的数据
    }
1
2
3
4
5
6
7
8
9

# 选项说明

参数 必填 数据类型 默认值 可选值 说明
target 是 Function ()=>$ref.依赖的控件ref名称 格式为引用对象回调,例如依赖ref名称为role的表格控件,则格式为()=>$ref.role，默认监控$ref.role.currSelection对象
filter 是 Function (row)=>[{}] 必配,查询条件,返回json或json数组，参数val可能有2种类型,初始化时为依赖控件的值，当依赖变化时为选中的行json
call 否 Function (datasource,row)=>{} 回调，参数为当前控件的datasource和target控件的当前行数据

# dict选项(字典翻译)

# 选项格式

说明：dict 结构体为 JSON 格式，结构体格式为：

dict: {     //选配,后端字典翻译
        字段名: {           //必配,要翻译的字段名
            appendField: ''    //选配, 翻译后要增加到结果集中的字段名称，如果翻译后不增加字段则不配置本项，系统将翻译后的字段替换源字段值
            multiSplit: null,  //选配, 当字段值中包含多个值的时候，指定多个值间的分隔符(String类型)，例如字段值为多个部门编号:a,b，将a和b分别翻译则需指定分隔符为逗号
            fix: {1:'男',0:'女'}  //选配, 固定值翻译
            sql: ''     //选配, SQL查询翻译，与table选项只能二选一，例如 select name from sys_system where sysid=?
            table: {    //选配, 表查询翻译，与SQL查询选项只能二选一
                name: '',    //必配, 表名字
                field: '',   //必配, 要拿值的字段名称
                where: "字段名=?"  //选配, 查询条件，如果不配置此项，则查询条件默认为翻译的字段名称(当2个表的字段名称相同时可以不配置)
            }
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13

注意：fix和table选项必须配置一个

# 选项说明

针对每个需要翻译的字段配置如下参数

参数 必填 数据类型 默认值 可选值 说明
appendField 否 String 是否对翻译后的字段作为新字段添加到查询结果中,如果不配置此项，则将查询结果替换查询结果中的该字段值
multiSplit 否 String 当字段值中包含多个值的时候，指定多个值间的分隔符（String类型），例如字段值为多个部门编号:a,b，将a和b分别翻译则需指定分隔符为逗号
fix 否 Object 固定值翻译，例如将1翻译为男，0翻译为女，则结构体为:{1:'男',0:'女'}
sql 否 String SQL查询翻译，与table选项只能二选一，例如 select name from sys_system where sysid=?
table 否 Object 表查询翻译，与SQL查询选项只能二选一，有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 格式，发给服务器的附加数据，为后续未来开发提供数据扩展。

提示

配置由服务器上传文件到阿里云oss和删除文档时同时删除阿里云oss文件。

att: {
    aliYunOss: {
        upload: true    #标记由服务器端上传文件到阿里云oss
        delete: true    #标记由删除时由服务器端发起删除阿里云oss文件，默认为true
    }
}
1
2
3
4
5
6

# query选项(查询)

# 选项格式

说明：query 结构体为 JSON 格式，结构体格式为：

query:{             //选配, 查询选项参数
    tree: 'children',    //是否拿树形结构数据，children：拿下级，parent：拿上级，注意：必须在filter中至少给查询条件（_PID或主键字段），如果查询条件中为_PID字段为拿不包含自己的下级(children)或上级(parent)，如果配置的为主键字段则拿包含自己的下级或上级
    onlyField:false, //只拿查询结果字段名称,不拿数据,true:只拿字段,不拿数据 false:数据与字段都要拿,默认为false
    url:'',         //选配, 查询地址,默认为: /api/data/public/query
    order:'',       //选配, 服务器查询时排序,例如按姓名升序排序: 'name asc'
    filter:[]|{}|function,      //选配, json或json数组或函数，服务器SQL过滤条件,每次查询都会带上
    filterOne:[],   //选配, 服务器SQL过滤条件,只使用一次，使用后立即删除该选项,常用于表格加载时使用了查询框中的默认值
    group:'id,name',   //选配,查询结果分组
    sql: ''     //自定义sql(后端服务器要开启允许自定义sql)，如果采用此项，merge\filter\option.fields选项都无效
    merge: ''        //选配,联合查询
},
1
2
3
4
5
6
7
8
9
10
11

# 选项说明

参数 必填 数据类型 默认值 可选值 说明
tree 否 String children children/parent 是否拿树形结构数据，children：拿下级，parent：拿上级，注意：必须在filter中至少给查询条件（_PID或主键字段），如果查询条件中为_PID字段为拿不包含自己的下级(children)或上级(parent)，如果配置的为主键字段则拿包含自己的下级或上级
onlyField 否 Boolean false true/false 只拿查询结果字段名称,不拿数据
url 否 String /api/data/public/query 查询地址
order 否 String 服务器查询时排序,例如按姓名及编号升序排序: 'name asc, id desc'
group 否 String 查询结果分组字段多个字段逗号分隔，例如对name,id字段进行分组则设置为: 'id,name'
filter 否 JSON/Array/Function 服务器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

# 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

# 选项说明

名称 类型 说明
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数据

# buttons选项(操作按钮)

对操作按钮进行控制。
格式如下：

buttons: {    //选配,按钮配置
    attButtons: {xx:{}}  //前端附加的按钮，格式等同于add等按钮选项
    add: {    //选配, 新增按钮配置选项
        type: 'primary',      //按钮类型
        icon: 'el-icon-plus', //按钮图标
        text: '新增',         //按钮文本
        visible: (row, rows) => null, //选配, 按钮是否可见，返回值true可见,参数为当前选中行和当前已装载的总数据行
        disabled: (row, rows) => null, //选配, 按钮是否禁用，返回true禁用,参数为当前选中行和当前已装载的总数据行
        action: () => null,   //点击按钮时回调，返回false将终止后续操作
    }
    edit: {    //选配, 修改按钮配置选项
        type: 'warning',      //按钮类型
        icon: 'el-icon-edit', //按钮图标
        text: '修改',         //按钮文本
        visible: (row, rows) => null, //选配, 按钮是否可见，返回值true可见,参数为当前选中行和当前已装载的总数据行
        disabled: (row, rows) => null, //选配,按钮是否禁用，返回true禁用,参数为当前选中行和当前已装载的总数据行
        action: (currEditSelection) => null,   //点击按钮时回调，返回false将终止后续操作, 参数为currEditSelection结构体
    }
    del: {    //选配, 删除按钮配置选项
        type: 'danger',      //按钮类型
        icon: 'el-icon-close', //按钮图标
        text: '删除',         //按钮文本
        visible: (row, rows) => null, //选配, 按钮是否可见，返回值true可见,参数为当前选中行和当前已装载的总数据行
        disabled: (row, rows) => null, //选配,按钮是否禁用，返回true禁用,参数为当前选中行和当前已装载的总数据行
        action: (rows) => null,   //点击按钮时回调，返回false将终止后续操作, 参数为要删除的行
    }
    see: {    //选配, 查看按钮配置选项
        type: 'success',      //按钮类型
        icon: 'el-icon-view', //按钮图标
        text: '查看',         //按钮文本
        visible: (row, rows) => null, //选配, 按钮是否可见，返回值true可见,参数为当前选中行和当前已装载的总数据行
        disabled: (row, rows) => null, //选配,按钮是否禁用，返回true禁用,参数为当前选中行和当前已装载的总数据行
        action: (row) => null,   //点击按钮时回调，返回false将终止后续操作, 参数为当前选中行
    }
    save: {    //选配, 保存按钮配置选项
        type: 'warning',      //按钮类型
        icon: 'el-icon-success', //按钮图标
        text: '保存',         //按钮文本
        visible: (row) => null, //选配, 按钮是否可见，返回值true可见,参数为当前选中行和当前已装载的总数据行
        disabled: (row) => null, //选配,按钮是否禁用，返回true禁用,参数为当前选中行和当前已装载的总数据行
        action: (currEditSelection, action) => null,   //点击按钮时回调，返回false将终止后续操作,参数currEditSelection结构体，action操作类型
    }
    cancel: {    //选配, 取消按钮配置选项
        type: 'success',      //按钮类型
        icon: 'el-icon-error', //按钮图标
        text: '取消',         //按钮文本
        visible: (row) => null, //选配, 按钮是否可见，返回值true可见,参数为当前选中行
        disabled: (row) => null, //选配,按钮是否禁用，返回true禁用,参数为当前选中行
        action: (currEditSelection, action) => null,   //点击按钮时回调，返回false将终止后续操作,参数currEditSelection结构体，action操作类型
    }
    export: {    //选配, 导出按钮配置选项
        type: 'primary',      //按钮类型
        icon: 'el-icon-sold-out', //按钮图标
        text: '导出',         //按钮文本
        visible: (row) => null, //选配, 按钮是否可见，返回值true可见,参数为当前选中行
        disabled: (row) => null, //选配,按钮是否禁用，返回true禁用,参数为当前选中行
        action: (json) => null,   //点击按钮时回调，返回false将终止后续操作，参数为要发往服务器的json数据
    }
    audit: {    //选配，审核按钮. 注意: 模块主表中建议配置_STATUS字段(类型与options选项中的value类型一致) 和必须配置 _X_AUDIT字段(类型为JSON)
        type: 'warning',      //按钮类型
        icon: 'el-icon-s-check', //按钮图标
        text: '审核',         //按钮文本
        visible: (row) => null, //选配, 按钮是否可见，返回值true可见,参数为当前选中行
        disabled: (row) => null, //选配,按钮是否禁用，返回true禁用,参数为当前选中行
        action: (row, auditOptions) => null, //点击按钮时回调，返回false将终止操作，auditOptions结构体JSON格式：
                                                //{ default: null,  //缺省值，是options选项中的其中一个key值
                                                //  field: '_STATUS', //更改的状态字段名,默认为 _STATUS 字段
                                                //  options: {100: '审核通过', 1: '审核不通过'}, //选项列表
                                                //  title: '审核', //弹出框标题
                                                //  width: null, //弹出框宽度px
                                                //  height: null //弹出框高度px
                                                // }
        actionSaveBefore: (row, auditResult) => null,  // 保存前回调，返回false将终止操作，常用于更改主表其它字段内容，只要更改row的数据，则系统会将更改后的数据保存到数据库，auditResult结构体JSON格式：
                                                //{ _AVALUE: null,  //审核结果值，对应选项中的value值
                                                //  _ANAME: null,  //核结果名称，对应选项中的label值
                                                //  _TITLE: '审核', //弹出框标题
                                                //  _ADVISE: null, //审核人员输入的审核意见
                                                // }
        send: (json) => null,       //发送到服务器的数据，无返回值
        actionSaveAfter: (array, change, auditResult) => null,    //保存后回调，参数：array：选中行原始数据, change:发往服务器端的行数据， auditResult：审核结果，格式同上
    }
    auditlog: { //选配，审核历史按钮
        title: '审核历史',      // 弹出框标题
        type: 'success',      //按钮类型
        icon: 'el-icon-tickets', //按钮图标
        text: '审核历史',         //按钮文本
        visible: (row) => null,  //选配, 按钮是否可见，返回值true可见,参数为当前选中行
        disabled: (row) => null, //选配,按钮是否禁用，返回true禁用,参数为当前选中行
        action: (row) => null,   //点击按钮时回调，返回false将终止后续操作，参数为当前选中行的json数据
        send: (json) => null     //发送到服务器的数据，无返回值
    }

}
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

# webEvn选项(浏览器前端回调事件)

# 选项格式

 webEvn:{   //选配, 浏览器前端回调函数
    beforeOpen(currSelection, action):         //选配,点击新增、修改、查询按钮前的函数回调, 参数为当前选中行JSON数据，action当前操作类型, 返回false终止操作
    afterOpen(currEditSelection, action):      //选配,点击新增、修改、查询按钮后的函数回调, 参数为currEditSelection结构体和action当前操作类型
    
    beforeAddEvn(currSelection):       //选配, 点击增加按钮前的函数回调, 参数为currSelection当前选中行数据, 返回false终止操作
    afterAddEvn(currEditSelection):    //选配, 点击增加按钮后的函数回调（在afterOpen回调之前）, 参数为currEditSelection结构体
    
    beforeEditEvn(currSelection):      //选配, 点击编辑按钮前的函数回调, 参数为currSelection当前选中行数据, 返回false终止操作
    afterEditEvn(currEditSelection):   //选配, 点击编辑按钮后的函数回调（在afterOpen回调之前）, 参数currEditSelection结构体
    
    beforeDelEvn(rows, callBack):      //选配, 点击删除按钮前的函数回调, 参数为将要删除的JSON数组和回调函数(回调主要是恢复状态机制), 返回false终止操作
    
    beforeSeeEvn(currSelection):       //选配, 点击查看按钮前的函数回调, 参数为currSelection当前选中行数据, 返回false终止操作
    afterSeeEvn(currEditSelection):    //选配, 点击查看按钮后的函数回调(在afterOpen回调前), 参数为currEditSelection结构体
    
    beforeAddSaveEvn(diff, currEditSelection):      //选配, 新增数据操作转为发往服务器的JSON数据前回调,参数为diff:新增行数据,currEditSelection结构体,返回false终止操作,更改row会影响发往服务器的数据
    afterAddSaveEvn(res, row, currEditSelection):  //选配, 新增数据保存后回调,参数为res(服务器返回数据),row(新增行数据),currEditSelection(结构体) 
    
    beforeEditSaveEvn(diff, currEditSelection):       //选配, 修改数据操作转为发往服务器的JSON数据前回调,参数为diff:差异数据,currEditSelection结构体,返回false终止操作,更改row会影响发往服务器的数据
    afterEditSaveEvn(res, row, currEditSelection):   //选配, 修改数据保存后回调,参数为res(服务器返回数据),row(行修改数据),currEditSelection(结构体) 
    
    beforeAddEditSaveEvn(row, currEditSelection, action): //选配, 新增或修改数据保存前回调,参数为row:要保存的数据, currEditSelection:构体类型, action:操作类型, 返回false终止操作, 更改row值会影响发往服务器的数据
    
    beforeDelSaveEvn(rows, currEditSelection):        //选配, 删除数据保存前回调,参数为rows(要删除的JSON数组),currEditSelection结构体, 返回false终止操作, 更改rows行内主键字段值会影响发往服务器的数据
    afterDelSaveEvn(res, rows, currEditSelection):    //选配, 删除数据保存后回调,参数为res(服务器返回数据),rows(要删除的JSON数组),currEditSelection结构体
    
    beforeSaveEvn(saveJson, action, rows, currEditSelection):  //选配, 对数据库 add,edit,del 操作保存操作前的回调函数, 参数为saveJson:发往服务器的JSON数据, action:操作类型, rows:发往服务器的转换前的数据(对于删除操作是JSON数组，否则为JSON), currEditSelection:结构体, 返回false将终止后续操作, 只有更改saveJson才会影响发往服务器的数据，返回false将终止操作
    afterSaveEvn(action, res, rows, currEditSelection):        //选配, add,edit,del 成功保存后的回调函数, 参数为action(操作类型),res(服务器返回数据),rows(发往服务器的转换前的数据,对于删除操作是数组),currEditSelection(结构体)
    
    beforeQuery(filter, beforeCallback, afterCallback):        //查询前的回调函数(注意还未产生发往服务器的json),参数为filter(查询条件),返回false终止操作，常用于自定义查询
    beforeQueryEvn(queryJson):     //选配,产生查询条件后，发往服务器前的回调，参数为将发往服务器的JSON数据，返回false终止后续操作

    afterQuery(res):               //选配,查询后将对服务器数据进行组装处理前的回调，参数为res（服务器器返回的原始数据），返回false将终止后续操作
    afterQueryEvn(data):           //选配,查询后对服务器数据进行组装处理后的回调，参数为data（组装后的数据,无状态信息）
    
    afterPvButton(pvButtons):     //选配, 获得服务器端按钮权限时回调，参数pvButtons(服务器端按钮权限与props传入的attButton合并后的值)
},
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

# 选项说明

方法名 功能说明 参数说明 返回值类型 其它说明
beforeOpen(currSelection, action) 点击新增、修改、查询按钮前的函数回调 currSelection:当前选中行JSON数据，action:当前操作类型 返回false终止操作
afterOpen(currEditSelection, action) 点击新增、修改、查询按钮后的函数回调 currSelection:当前选中行JSON数据，action:当前操作类型
beforeAddEvn(currSelection) 点击增加按钮前的函数回调 参数为currSelection当前选中行JSON数据 返回false终止操作
afterAddEvn(currEditSelection) 点击增加按钮后的函数回调 参数为currEditSelection结构体类型
beforeEditEvn(currSelection) 点击编辑按钮前的函数回调 参数为currSelection:当前选中行JSON数据 返回false终止操作
afterEditEvn(currEditSelection) 点击编辑按钮后的函数回调 参数为currEditSelection结构体
beforeDelEvn(rows, callBack) 点击删除按钮前的函数回调 参数为rows数据数组和回调 返回false终止操作
beforeSeeEvn(currSelection) 点击查看按钮前的函数回调 参数为currSelection原始数据 返回false终止操作
afterSeeEvn(currEditSelection) 点击查看按钮后的函数回调 参数为currEditSelection结构体
beforeAddSaveEvn(row, currEditSelection) 新增数据保存前回调 参数为row:新增行数据,currEditSelection:结构体 返回false终止操作 更改row会影响发往服务器的数据
afterAddSaveEvn(res, row, currEditSelection) 新增数据保存后回调 参数为res(服务器返回数据)和row(新增行数据), currEditSelection(结构体)
beforeEditSaveEvn(row, currEditSelection) 修改数据保存前回调 参数为row:行修改数据, currEditSelection:结构体 返回false终止操作 更改row会影响发往服务器的数据
afterEditSaveEvn(res, row, currEditSelection) 修改数据保存后回调 参数为res(服务器返回数据)和row(行修改数据), currEditSelection(结构体)
beforeAddEditSaveEvn(row, currEditSelection, action) 新增或修改数据保存前回调 参数为row:要保存的数据, currEditSelection:构体类型, action:操作类型 返回false终止操作 更改row值会影响发往服务器的数据
beforeDelSaveEvn(rows, currEditSelection) 删除数据保存前回调 参数为rows(要删除的JSON数组)，currEditSelection结构体 返回false终止操作 更改rows行内主键字段值会影响发往服务器的数据
afterDelSaveEvn(res, rows, currEditSelection) 删除数据保存后回调 参数为res(服务器返回数据)和rows(要删除的JSON数组), currEditSelection(结构体))
beforeSaveEvn(saveJson, action, rows, currEditSelection) add,edit,del 操作保存操作前的回调函数 saveJson:要发送到后端的json数据, action:操作类型, rows:发往服务器的转换前的数据(对于删除操作是JSON数组，否则为JSON), currEditSelection: 结构体 只有更改saveJson才会影响发往服务器的数据，返回false将终止操作
afterSaveEvn(action, res, rows, currEditSelection) add,edit,del 成功保存后的回调函数 参数为action(操作类型),res(服务器返回数据),rows(发往服务器的转换前的数据,对于删除操作是数组),currEditSelection(结构体)
beforeQuery(filter, beforeCallback, afterCallback) 查询前的回调函数(注意还未产生发往服务器的json) 参数为filter(查询条件) 返回false终止操作
afterQuery(res) 查询后的回调函数 参数为res(服务器器返回的原始数据)
beforeQueryEvn(queryJson) 查询前的回调方法(在webEvn的beforeQuery函数调用之后), 参数为:发往服务器的json数据 返回false将终止后续操作
afterQueryEvn(data) 查询后的回调 参数为服务器的返回数据（组装后的数据,无状态信息）
afterPvButton(pvButtons) 获得按钮权限时回调 参数为pvButtons(服务器端按钮权限与props传入的attButton合并后的值)

# save选项(保存数据)

# 选项格式

说明：save 结构体为 JSON 格式，可配置同时增/删/修多张表的多条记录，构体格式为：

save:{                  //选配, 保存数据的选项
        isReload: true,       //保存后是否执行再查询返回查询数据
        noSaveFields:[],      //选配, 服务器不存储的字段数组(前端发送时将忽略该字段,即不向服务器发送该字段及值)
        alwaysSaveFields:[],  //选配, 服务器始终要存储的字段数组(前端发送时将始终发送该字段,即始终向服务器发送该字段及值)
        ignoreNoField: false, //选配, 服务器存储时是否忽略数据库中不存在的字段
        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
            treeFields: ''   //选配, 在修改树形表时同时修改下级的指定字段值与父级的字段值一致，多个字段逗号分隔，例如修改父级的状态为1，则将所有下级的该状态都改为1
            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
30
31

# 选项说明

参数 必填 数据类型 默认值 可选值 说明
isReload 否 Boolean true true/false 保存后是否执行再查询返回查询数据
noSaveFields 否 Array 服务器不存储的字段(前端发送时将忽略该字段,即不向服务器发送该字段及值)
alwaysSaveFields 否 Array 服务器始终要存储的字段数组(前端发送时将始终发送该字段,即始终向服务器发送该字段及值)
ignoreNoField 否 Boolean false true
false		 服务器存储时是否忽略数据库中不存在的字段
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

# 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
    treeFields: ''   //选配, 在修改树形表时同时修改下级的指定字段值与父级的字段值一致，多个字段逗号分隔，例如修改父级的状态为1，则将所有下级的该状态都改为1
    filter:[] ,      //选配, 格式等同于del选项内的filter
    serverEvn:[      //选配, 注意格式与add和del稍有不同
        {
            field:[],       //必配, 字段名称,只有改变此配置的数据才会执行下行的serverEvn
            serverEvn:[]    //必配, 上面选项field内的字段值有变化才执行此serverEvn, 格式等同于del选项内的serverEvn
        }
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12

# edit选项说明

参数 必填 数据类型 默认值 可选值 说明
head 否 JSON 操作数据时的head, 不配置则采用上级的head
url 否 String /api/data/public/save 新增数据的url地址
treeFields 否 String 在修改树形表时同时修改下级的指定字段值与父级的字段值一致，多个字段逗号分隔，例如修改父级的状态为1，则将所有下级的该状态都改为1
filter 否 Array 保存时的查询条件
serverEvn 否 Array 注意格式与add和del稍有不同

# delete选项

# delete选项格式

del:{           //选配, 删除数据时的选项
    url:'',      //选配, 删除数据地址,默认为: /api/data/public/save
    filter:[],   //选配,
    serverEvn:[]   //选配,服务器端的其它操作
}
1
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

# 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

# filter选项说明

filte配置字段值时除给固定值外，可以设置为变量，系统根据变量名动态拿值。
变量与serverEvn选项等同。

# 查询中使用数据库函数

凡是函数则使用@字符作为前缀
原始SQL条件: 查询yw字符在field字段中是否存在

FIND_IN_SET('yw', field)
1

等同于，配置为filter格式：

{"@FIND_IN_SET":  ["'yw'", "field"]}
# 注意: yw双引号内还有单引号才能解析为字符，否则解析为yw字段值在field字段中是否存在
1
2

原始SQL条件: 查询yw字符在field字段中是否不存在

FIND_IN_SET('yw', field)
1

等同于，配置为filter格式：

{"@!FIND_IN_SET":  ["'yw'", "field"]}
# 注意: yw双引号内还有单引号才能解析为字符，否则解析为yw字段值在field字段中是否不存在
1
2

原始SQL条件: 查询field字段在"a,b,c"字符串中是否存在

field IN ('a,b,c')
1

等同于，配置为filter格式：

{"@IN":  ["field", "'a','b','c'"]}
# 注意: 对 "a,b,c" 字符串进行拆解后在每个加单引号
1
2

原始SQL条件: 查询yw字符串在"a,b,c"字符串中是否存在

'yw' IN ('a,b,c')
1

等同于，配置为filter格式：

{"@IN":  ["'yw'", "'a','b','c'"]}
# 注意: yw字符串内有单引号才能解析为字符，否则解析为字段, 另外对 "a,b,c" 字符串进行拆解后在每个加单引号
1
2

原始SQL条件: 查询field字段在"a,b,c"字符串中是否不存在

field NOT IN ('a,b,c')
1

等同于，配置为filter格式：

{"@NOT IN":  ["field", "'a','b','c'"]}
# 注意: 对 "a,b,c" 字符串进行拆解后在每个加单引号
1
2

等同于，配置为filter格式：

{"@!IN":  ["field", "'a','b','c'"]}
# 注意: 对 "a,b,c" 字符串进行拆解后在每个加单引号
1
2

原始SQL条件: 使用正则表达式regexp查询yw字符串在field字段中是否存在，注意field字段值可以是逗号分隔的多值

field regexp '(^|,)(yw)(,|$)';
1

等同于，配置为filter格式：

{"@field": " regexp '(^|,)(yw)(,|$)'"}
# 注意: regexp 前后都有空格哦
1
2

# 例子1: AND查询1

原始SQL条件:

(id=1) and (name='zs')
1

等同于，配置为filter格式：

filter: {id: 1, name: 'zs'}
1

等同于，配置为filter格式：

filter: [
    {id: 1},
    {name: 'zs'}
]
1
2
3
4

# 例子2: AND查询2

SQL条件:

(id>1) and (name like '%zs')
1

等同于：

filter: {id: {'>': 1}, name: {like: '%zs'}}
1

等同于：

filter: [
    {id: {'>': 1}},
    {name: {like: '%zs'}}
]
1
2
3
4

# 例子3: OR查询1

SQL条件:

(id=1) or (name='zs')
1

等同于：

filter: {id: 1, {or: {name: 'zs'}}}
1

等同于：

filter: [
    {id: 1},
    {or: [{name: 'zs'}]}
]
1
2
3
4

# 例子4: OR查询2

SQL条件:

(id=1) or (name='zs' and job=2)
1

等同于：

filter: {id: 1, or: {name: 'zs', jon: 2}}
1

等同于：

filter: [
    {id: 1},
    {or: [{name: 'zs'}, {jon: 2}]}
]
1
2
3
4

# 例子5: AND与OR联合查询

SQL条件:

(id=1 or make>1) or (name='zs' and job=2)
1

等同于：

filter: [
    {id: 1, or: {make: {'>': 1}}},
    {or: {name: 'zs', jon: 2}}
]
1
2
3
4

等同于：

filter: [
    [{id: 1},{or: [{make: {'>': 1}}]}],
    {or: [{name: 'zs'}, {jon: 2}]}
]
1
2
3
4

# 例子6: Like查询

SQL条件:

field LIKE '%张三'
1

等同于：

filter: {field: {"*LIKE", "张三"}}
1

SQL条件:

field LIKE '张三%'
1

等同于：

filter: {field: {"LIKE*", "张三"}}
1

SQL条件:

field LIKE '%张三%'
1

等同于：

filter: {field: {"*LIKE*", "张三"}}
1

等同于：

filter: {field: {"LIKE", "张三"}}
1

# 例子7: 两个字段进行操作

默认情况下，json的key是字段，json的value为值，但如果值不为固定值，是字段呢？ 例如： 查询name字段的值等于nick字段的值 SQL条件:

name = nick
1

等同于：

filter: {name: Field@nick}
# 注意：Field@的第一个字母f为大写,其余字符为小写
1
2

SQL条件:

name >= nick
1

等同于：

filter: {name: {'>=', Field@nick}}
# 注意：Field@的第一个字母f为大写,其余字符为小写
1
2

# 例1: 新增加时给字段赋初值

系统默认新增时所有字段初始值为null，可配置给不同的字段赋不同的值。
配置option选项下的initRow即可。
initRow可以是函数，也可以直接是json值。
例如： 配置w1字段的值为123，配置如下：
方式一： 配置为json:

[
    {
        option: {
            initRow: {w1 = 123}
        }
    }
]
1
2
3
4
5
6
7

方式二： 配置为函数:

[
    {
        option: {
            initRow: (row) => row.w1 = 123
        }
    }
]
1
2
3
4
5
6
7

提示

配置为函数时可进行更多的变化。

# 例2: 只拿字段名称，不拿字段值

[
    {
        query: {
            onlyField: true
        }
    }
]
1
2
3
4
5
6
7

# 例3: 初始化时不执行查询

系统默认初始化就立即发起查询，可设置为不查询。

[
    {
        option: {
            load: false
        }
    }
]
1
2
3
4
5
6
7

# 例4: 获得操作按钮

系统默认初始化会自动查询并拿操作按钮，可设置为拿操作按钮。

[
    {
        option: {
            privilege: false
        }
    }
]
1
2
3
4
5
6
7

也可以设置为只拿需要的操作按钮，例如只拿新增按钮(add),删除按钮(del),修改按钮(edit),查看按钮(see)，其它按钮不拿。

[
    {
        option: {
            privilege: ['add', 'del', 'edit', 'see']
        }
    }
]
1
2
3
4
5
6
7

# 例5: 获得主键字段名称

系统默认初始化会自动查询但不拿主键字段名称，可设置为拿主键字段名称。

[
    {
        option: {
            keyField: true
        }
    }
]
1
2
3
4
5
6
7

# 例6: 定制查询字段

系统默认会自动检查需要的字段，如果不够可设置此项增加字段，如果字段重复系统会自动剔除重复字段。
例如还需要拿uuid和name字段：

[
    {
        option: {
            fields: 'uuid,name'
        }
    }
]
1
2
3
4
5
6
7

# 例7: 查询或保存时数据结构转换

针对某些情况，例如前端多选时该值为数据，保存时需将该数组转换为字符串，而从数据库查询后需将该值转回数组的情况。
数组转字符串，配置oid字段数组与字符串的转换：

[
    {
        option: {
            dataConver:{
                oid: 'array->string'
            }
        }
    }
]
1
2
3
4
5
6
7
8
9

json转字符串，配置oid字段数组与字符串的转换：

[
    {
        option: {
            dataConver:{
                oid: 'json->string'
            }
        }
    }
]
1
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

除此之外，还可以配置wenEven事件，在查询后和保存前进行数据转换。

# 例8: 将查询结果作为字典缓存

例如将查询结果作为字典缓存，假设字典名称为sys_system。
注意：此时是前端未刷新主界面前都会缓存，不会删除。

[
    {
        dic: 'sys_system'
    }
]
1
2
3
4
5

例如将查询结果作为字典缓存，假设字典名称为sys_system。
注意：此时是前端该组件销毁时会自动销毁。

[
    {
        dic:{name:'sys_system', destroy:true}
    }
]
1
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

提示

上例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:dependentFilter}, 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>
export default {
    methods: {
        dependentFilter(val) {
            if (lodash.isObject(val)) {
                return {sysid: val.sysid}
            } else {
                return {sysid: val}
            }
        }
    }
}
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

提示

第一步：由于是"角色"控件依赖"所属系统"控件，因此先对"所属系统"控件(即x-select控件)取个名称叫sys(即ref=sys)。

<x-select ref="sys" 。。。/>
1

第二步：在"角色"控件(即另一个x-select控件)配置数据源时配置dependent选项。内容为： dependent: {target:()=>$refs.sys,filter:dependentFilter

<template>
 <x-select :data-source="{。。。,dependent: {target:()=>$refs.sys,filter:dependentFilter}, 。。。}" placeholder="请选择角色"/>
</template>
export default {
    methods: {
        dependentFilter(val) {
            if (lodash.isObject(val)) {
                return {sysid: val.sysid}
            } else {
                return {sysid: val}
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 例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

# 例15: 配置后端字典翻译

强烈建议

这种配置因为需对每个表的操作权限做判断，因此会减缓加载速度，因此强烈建议在模块配置中配置字典翻译。
操作步骤：

  1. 以超级用户登录，在菜单中找到“模块设置”，找到或新建该模块
  2. 在弹出的模块配置界面中配置字典翻译

如果需要后端对查询结果的数据进行翻译，则配置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: 配置多表连接查询

强烈建议

以下2种方式配置的多表连接查询因为需对每个表的操作权限做判断，因此会减缓加载速度，因此强烈建议使用配置数据源source的方式进行。
操作步骤：

  1. 以超级用户登录，在菜单中找到“数据源设置”模块
  2. 点击“新增”按钮，在弹出框中录入数据源标识和SQL语句
  3. 回到开发环境中，配置该data-source配置项下的head选项中的source值为上一步设置的数据源标识。

可通过配置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

注意： 此方式前面一定有个逗号哦。

query: {
    merge: ",sys_user WHERE sys_system.sysid=sys_user.sysid AND sys_user.name='张三'"
}
1
2
3

提示

注意配置方式2前面一定要加逗号。

← 登录(login) →