查询区API

  1. import {createPage} from 'nc-light-app';
  2. import {clickSearchBtn, initTemplate} from './events';
  5. class demo extends Component {
  6.  constructor(props) {
  7.         super(props);
  8.         let {form, button, table, insertTable, search} = this.props;
  9.         let {setSearchValue, setSearchValByField, getAllSearchData} = search;
  10.         this.setSearchValByField = setSearchValByField;//设置查询区某个字段值
  11.         this.getAllSearchData = getAllSearchData;//获取查询区所有字段数据
  12.     }
  13.  componentWillMount() {
  15.     }
  17.   /* 编辑后事件 */
  18.     onAfterEvent(field, val){
  19.         console.log(field);
  20.         console.log(val)
  21.     }
  23.      /* 添加高级查询区中的页签 */
  24.     addAdvTabs = () => {
  25.         return [
  26.             {
  27.                 name:'页签2',   //页签名称
  28.                 content:<div>页签2内容</div> //页签内容
  29.             },
  30.             {
  31.                 name:'页签3',
  32.                 content:<div>页签3内容</div>
  33.             }
  34.         ]
  35.     };
  37.      /* 替换高级查询body区域 */
  38.     replaceAdvBody = () => {
  39.         return(
  40.             <div>3333</div>
  41.         )
  42.     }
  44.     //保存查询方案确定按钮事件，用于业务组返回自定义的查询条件
  45.      saveSearchPlan = () => {
  46.         console.log('返回自定义条件')
  47.         return [
  48.             {
  49.                 demo:'666'
  50.             }
  51.         ]
  52.     }
  53.     // 替换高级面板右侧body区域
  54.     replaceRightBody = () => {
  55.         return(
  56.             <div>替换body右侧区域条件</div>
  57.         )
  58.     }
  60.     //点击高级面板中的查询方案事件 ,返回查询方案信息，用于业务组为自定义查询区赋值
  61.     clickPlanEve = (data) => {
  62.         console.log(data)
  63.     }
  65.     // 高级查询面板中的清空按钮 点击事件钩子，用于业务组清除自定义查询条件值
  66.     advSearchClearEve = () => {
  68.     }
  70. render(){
  71.         let {form, button, table, insertTable, search} = this.props;
  72.         let {NCCreateSearch} = search;
  74.     return(
  76.          {NCCreateSearch(
  77.                     searchId,//模块id
  78.                     {
  79.                         clickSearchBtn, // 查询按钮点击事件回调，只返回公共查询条件，不包含自定义查询条件；如果有自定义查询条件，需要业务组在clickPlanEve方法中接收查询方案信息，并保存到业务组的state中，然后在 clickSearchBtn方法中自行合并公共条件和自定义条件。
  80.                         searchBtnName = '查询',
  81.                         onAfterEvent, // 编辑后事件
  82.                         showSearchBtn = true, // 是否显示查询按钮 ,默认显示
  83.                         showAdvBtn = true, // 是否显示高级查询按钮和查询方案按钮 ,默认显示
  84.                         showClearBtn = true, // 是否显示清空按钮
  85.                         showAdvSearchPlanBtn = true, // 高级面板中是否显示保存方案按钮
  86.                         replaceAdvBtnEve, // 业务组替换高级面板 (fun)
  87.                         replaceAdvBody, // 业务组替换高级面板中的body (fun)
  88.                         addAdvTabs, // 添加高级查询区自定义页签 (fun)
  89.                         addAdvBody, // 添加高级查询区自定义查询条件Dom (fun)
  90.                         replaceRightBody, // 添加高级查询区右侧区域自定义查询条件Dom (fun)
  91.                         // oid, // 查询模板的oid
  92.                         hideSearchCondition = false, // 隐藏候选条件
  93.                         saveSearchPlan, // 保存查询方案确定按钮事件 ，用于业务组返回自定义的查询条件
  94.                         clickPlanEve, // 点击高级面板中的查询方案事件 ,用于业务组为自定义查询区赋值
  95.                         clickAdvBtnEve, //单击高级之后的回调方法
  96.                         hideBtnArea = false, // 隐藏查询按钮区域，默认false
  97.                         advSearchClearEve, // 高级查询面板中的清空按钮 点击事件回调，用于业务组清除自定义查询条件值
  98.                         onlyShowSuperBtn = false, // 只显示高级按钮
  99.                         replaceSuperBtn = '高级', // 替换高级按钮
  100.                         onOperateTypeChange, // 操作符改变时的回调
  101.                         onlyShowAdvArea = false, //在查询区只显示 高级查询部分,
  102.                         renderCompleteEvent, //查询区渲染完成之后的回调事件
  103.                         statusChangeEvent, //切换查询区状态时的回调
  104.                         context = '', //如果业务组传了上下文进来，就用业务组的数据
  105.                         setInitValueEvent,//初始化四状态默认值的时候的回调函数
  106.                         onlyShowModal = false, //在查询区只显示 模态框,
  107.                         onlyShowModalCancelCallback // 只渲染modal时 关闭modal 触发的回调（配合onlyShowModal使用）
  108.                     }
  109.                 )}
  110.     )
  111. }
  112. }
  114. //添加页面模板信息
  115. export default function initTemplate(meta) {
  116.      let metas = {
  117.         searchArea: {
  118.             moduleType: 'search',
  119.             items: [
  120.                 {
  121.                     attrcode: 'rangepicker',
  122.                     label: '区间日期',
  123.                     itemtype: 'rangepicker',
  124.                     required:true,
  125.                     visible:true,
  126.                     col: 3,
  127.                     leftspace: 0,
  128.                     rightspace: 0,
  129.                     "queryOperateType": "between",
  130.                     // initialvalue: {
  131.                     //     value:'',
  132.                     //     display:''
  133.                     // }
  134.                 },
  135.                 {
  136.                     "queryOperateType": "=",
  137.                     visible:true,
  138.                     attrcode: 'refer_1',
  139.                     label: '参照',
  140.                     itemtype: 'refer',
  141.                     refcode:'pk_org',
  142.                     col: 3,
  143.                     leftspace: 0,
  144.                     rightspace: 0,
  145.                     // initialvalue: {
  146.                     //     value:'1',
  147.                     //     display:'我是参照'
  148.                     // }
  149.                 },
  150.                 {
  151.                     "queryOperateType": "=",
  152.                     visible:true,
  153.                     attrcode: 'number1',
  154.                     label: '数字',
  155.                     itemtype: 'number',
  156.                     required:true,
  157.                     col: 3,
  158.                     leftspace: 0,
  159.                     rightspace: 0,
  160.                     // initialvalue: {
  161.                     //     value:0,
  162.                     //     display:''
  163.                     // },
  164.                     scale:2
  165.                 },
  166.                 {
  167.                     "queryOperateType": "=",
  168.                     visible:true,
  169.                     attrcode: 'bankname',
  170.                     label: '银行',
  171.                     itemtype: 'input',
  172.                     col: 3,
  173.                     leftspace: 0,
  174.                     rightspace: 0,
  175.                     // initialvalue: {
  176.                     //     value:0,
  177.                     //     display:''
  178.                     // },
  179.                 },
  180.                 {
  181.                     "queryOperateType": "=",
  182.                     visible:true,
  183.                     attrcode: 'investtype',
  184.                     label: '存款类型',
  185.                     itemtype: 'select',
  186.                     col: 3,
  187.                     leftspace: 0,
  188.                     rightspace: 0,
  189.                     // initialvalue: {
  190.                     //     value:0,
  191.                     //     display:''
  192.                     // },
  193.                     options: [{
  194.                         display: '活期',
  195.                         value: 0
  196.                     },
  197.                         {
  198.                             display: '三个月',
  199.                             value: 1
  200.                         },
  201.                         {
  202.                             display: '半年',
  203.                             value: 2
  204.                         },
  205.                         {
  206.                             display: '三年',
  207.                             value: 3
  208.                         },
  209.                         {
  210.                             display: '五年',
  211.                             value: 4
  212.                         }
  213.                     ]
  214.                 },
  215.                 {
  216.                     "queryOperateType": "=",
  217.                     visible:true,
  218.                     attrcode: 'beginmny',
  219.                     label: '起始理财金额',
  220.                     itemtype: 'number',
  221.                     col: 3,
  222.                     leftspace: 0,
  223.                     rightspace: 0,
  224.                     // initialvalue: {
  225.                     //     value:0,
  226.                     //     display:''
  227.                     // },
  228.                 },
  229.                 {
  230.                     "queryOperateType": "=",
  231.                     visible:true,
  232.                     attrcode: 'begindate',
  233.                     label: '起始购买日期',
  234.                     itemtype: 'datepicker',
  235.                     col: 3,
  236.                     leftspace: 0,
  237.                     rightspace: 0,
  238.                     // initialvalue: {
  239.                     //     value:0,
  240.                     //     display:''
  241.                     // },
  242.                 },
  243.                 {
  244.                     "queryOperateType": "=",
  245.                     visible:true,
  246.                     attrcode: 'enddate',
  247.                     label: '截止购买日期',
  248.                     itemtype: 'datepicker',
  249.                     col: 3,
  250.                     leftspace: 0,
  251.                     rightspace: 0,
  252.                     // initialvalue: {
  253.                     //     value:0,
  254.                     //     display:''
  255.                     // },
  256.                 },
  257.                 {
  258.                     "queryOperateType": "=",
  259.                     visible:true,
  260.                     attrcode: 'radioDemo',
  261.                     label: '单选',
  262.                     itemtype: 'radio',
  263.                     col: 3,
  264.                     leftspace: 0,
  265.                     rightspace: 0,
  266.                     // initialvalue: {
  267.                     //     value:0,
  268.                     //     display:''
  269.                     // },
  270.                     options: [
  271.                         {
  272.                             value:'0',
  273.                             display: '活期'
  274.                         },
  275.                         {
  276.                             value:'1',
  277.                             display: '一个月'
  278.                         },
  279.                         {
  280.                             value:'2',
  281.                             display: '一年'
  282.                         },
  283.                     ]
  284.                 },
  285.                 {
  286.                     "queryOperateType": "=",
  287.                     visible: true,
  288.                     attrcode: 'checkbox',
  289.                     label: '复选框',
  290.                     itemtype: 'checkbox',
  291.                     col: 3,
  292.                     leftspace: 0,
  293.                     rightspace: 0,
  294.                     // initialvalue: {
  295.                     //     value: 1,
  296.                     //     display: ''
  297.                     // },
  298.                     options: [
  299.                         {
  300.                             display: '篮球',
  301.                             value: 0
  302.                         }, {
  303.                             display: '跑步',
  304.                             value: 1
  305.                         }, {
  306.                             display: '游泳',
  307.                             value: 2
  308.                         }, {
  309.                             display: '羽毛球',
  310.                             value: 3
  311.                         }
  312.                     ]
  313.                 },
  314.                 {
  315.                     "queryOperateType": "=",
  316.                     visible: true,
  317.                     attrcode: 'switch',
  318.                     label: 'switch',
  319.                     itemtype: 'switch',
  320.                     col: 3,
  321.                     leftspace: 0,
  322.                     rightspace: 0,
  323.                     // initialvalue: {
  324.                     //     value:true,
  325.                     //     display:''
  326.                     // }
  327.                 },
  328.             ]
  329.         }
  330.     };
  332.   props.renderItem('search', 'searchArea', 'refer_1', refer('pk_org'));//参数：查询组件、组件id、字段attrcode、字段refcode
  334.     props.meta.setMeta(metas)
  337. }

3. API

3.1 参数

查询区参数是指在调用 NCCreateSearch(id,config) 方法时传入的静态参数，它一般是用来设置查询区初始状态和回调的。

参数 说明 类型 默认值
id 模板id String 必填
config 查询区的参数字典 Object 必填

config的 参数说明

参数 说明 类型 默认值 备注
clickSearchBtn 查询回调 Function 必填 无
searchBtnName 查询按钮名称 Function ‘查询’ v1909以后不再支持
onAfterEvent 编辑后事件回调 Function 无 无
showSearchBtn 是否显示查询按钮 Boolean true 无
showAdvBtn 是否显示高级查询按钮 Boolean true 无
showClearBtn 是否显示清空按钮 Boolean true 无
showAdvSearchPlanBtn 是否显示查询方案按钮 Boolean true 无
replaceAdvBtnEve 业务组替换高级弹窗 Function 无 无
replaceAdvBody 业务组替换高级弹窗中的面板 Function 无 无
addAdvTabs 添加高级查询区自定义页签 Function 无 无
addAdvBody 添加高级查询区自定义查询条件Dom Function 无 无
replaceRightBody 添加高级查询区右侧区域自定义查询条件Dom Function 无 无
hideSearchCondition 隐藏候选条件 Boolean false 无
saveSearchPlan 保存查询方案确定按钮事件 ，用于业务组返回自定义的查询条件 Function 无 无
clickPlanEve 点击高级面板中的查询方案事件 ,用于业务组为自定义查询区赋值 Function 无 无
clickAdvBtnEve 单击高级按钮之后的回调方法 Function 无 无
hideBtnArea 隐藏查询按钮区域 Boolean false 无
advSearchClearEve 高级查询面板中的清空按钮 点击事件回调，用于业务组清除自定义查询条件值 Function 无 无
onlyShowSuperBtn 只显示高级按钮 Boolean false 无
replaceSuperBtn 替换高级按钮中的文案 String “高级” 无
onOperateTypeChange 查询条件操作符修改的回调函数 Function 无 无
onlyShowAdvArea 在查询区只显示 高级查询面板 Boolean false 无
onlyShowModal 在查询区只显示 高级查询模态框 Boolean false 无
renderCompleteEvent 查询区渲染完成之后的回调事件 Function 无 无
statusChangeEvent 切换查询区状态时的回调 Function 无 无
context 上下文 Object {} 无
setInitValueEvent 初始化四状态默认值的时候的回调函数 Function 无 无
useCache 是否启用查询区缓存 Boolean true 无
isSynInitAdvSearch 是否同步渲染高级查询区 Boolean false 无
onlyShowModalCancelCallback 只渲染modal时 关闭modal 触发的回调 Function 无 无
onlyShowPlan 只显示方案列表和高级查询 Boolean false 无
searchModalTitle 高级查询模态框标题 String “高级查询” 无
currentSearch 多个查询组件同时存在时，用来标识当前查询组件 Boolean true 无

3.2 查询区api

查询区api是指在获取模板数据并初始化查询区之后，可以调用的操纵查询区组件和数据的方法

3.2.1 getAllSearchData

调用样例 : getAllSearchData(moduleId, flag)
说明 : 用于获取查询区所有已有值得查询条件
参数说明:

参数 说明 类型 默认值 备注
moduleId 模板id String 必填 -
flag 是否启用必填校验 Boolean true -

返回值说明 ： 返回一个Object 结构如下

参数 说明 类型 备注
logic 操作符 String -
conditions 查询条件列表 Array -

props.search.getAllSearchData(searchId);

3.2.2 getQueryInfo

调用样例 : getQueryInfo(moduleId, flag)
说明 : 用于获取查询区所有已有值得查询条件，与getAllSearchData功能类似，但返回结果不同
参数说明:

参数 说明 类型 默认值 备注
moduleId 模板id String 必填 -
flag 是否启用必填校验 Boolean true -

返回值说明 ： 返回一个Object 结构如下

参数 说明 类型 备注
queryAreaCode 模板id String -
oid 区域ID String -
querytype 默认’tree’ String -
querycondition 与getQueryInfo返回结构一致 Object -
nctz 时区偏移 Number -

3.2.3 setSearchValByField

调用样例 : setSearchValByField(moduleId, field, data, status)
说明 : 用于设置查询区具体某个字段数据
参数说明:

参数 说明 类型 默认值 备注
moduleId 模板id String 必填 -
field 条件的attrcode String 必填 -
data 条件的值 Object 必填 结构应为{display:””,value:””}
status 设置的区域 String - 默认是当前区域，可选值有’simple’, ‘normal’, ‘super’ 分别标识 简单查询,普通查询，高级查询

返回值说明 ： 返回undefined

3.2.4 setSearchValue

调用样例 : setSearchValue(moduleId, data, callback)
说明 : 设置查询区数据 ，通常是用于将getAllSearchData 获取的数据 反写回查询区
参数说明:

参数 说明 类型 默认值 备注
moduleId 模板id String 必填 -
data 与getAllSearchData返回值结构一致 Object 必填 -
callback 设置成功的回调函数 Function - -

返回值说明 ： 返回undefined

3.2.5 getSearchValByField

调用样例 : getSearchValByField(moduleId, field, status)
说明 : 获取查询区某个字段的数据
参数说明:

参数 说明 类型 默认值 备注
moduleId 模板id String 必填 -
field 条件的attrcode String 必填 -
status 设置的区域 String - 默认是当前区域，可选值有’simple’, ‘normal’, ‘super’ 分别标识 简单查询,普通查询，高级查询

返回值说明 ： 返回一个Object 结构如下

参数 说明 类型 备注
value 返回值 返回一个Object { firstvalue: ‘’, secondvalue: ‘’ }
display 显示得值 String -
oprtype 操作符 String -

3.2.6 setDisabledByField

调用样例 : setDisabledByField(moduleId, field, status)
说明 : 设置某个查询条件是否可用
参数说明:

参数 说明 类型 默认值 备注
moduleId 模板id String 必填 -
field 条件的attrcode String 必填 -
status 设置的区域 String - 默认是当前区域，可选值有’simple’, ‘normal’, ‘super’ 分别标识 简单查询,普通查询，高级查询

返回值说明 ： 返回undefined

3.2.7 closeSearchPlanArea

调用样例 : closeSearchPlanArea(moduleId)
说明 : 关闭查询方案区域
参数说明:

参数 说明 类型 默认值 备注
moduleId 模板id String 必填 -

返回值说明 ： 返回undefined

3.2.8 openAdvSearch

调用样例 : openAdvSearch(moduleId, status, callback)
说明 : 打开/关闭 高级查询面板
参数说明:

参数 说明 类型 默认值 备注
moduleId 模板id String 必填 -
status 打开或关闭的状态 Boolean 必填 true 打开 /false关闭
callback 完成的回调函数 Function 必填 -

返回值说明 ： 返回undefined

3.2.9 setDisabled

调用样例 : setDisabled(moduleId, status)
说明 : 设置查询区不可编辑
参数说明:

参数 说明 类型 默认值 备注
moduleId 模板id String 必填 -
status 打开或关闭的状态 Boolean 必填 true 不可编辑 /false可以编辑

返回值说明 ： 返回undefined

3.2.10 clearSearchArea

调用样例 : clearSearchArea(moduleId)
说明 : 清空查询区值方法
参数说明:

参数 说明 类型 默认值 备注
moduleId 模板id String 必填 -

返回值说明 ： 返回undefined

3.2.11 getOprtypeByField

调用样例 : getOprtypeByField(moduleId, field)
说明 : 获取查询条件的操作符
参数说明:

参数 说明 类型 默认值 备注
moduleId 模板id String 必填 -
field 条件的attrcode String 必填 -

返回值说明 ： 返回 Array 型的操作符列表

3.2.12 changeItemVisibleByField

调用样例 : changeItemVisibleByField(moduleId, field, status)
说明 : 修改条件可见性
参数说明:

参数 说明 类型 默认值 备注
moduleId 模板id String 必填 -
field 条件的attrcode String 必填 -
status 可见性 Boolean false -

返回值说明 ： 返回undefined

3.2.13 setRequiredByField

调用样例 : setRequiredByField(moduleId, field, status)
说明 : 修改查询模板必输性
参数说明:

参数 说明 类型 默认值 备注
moduleId 模板id String 必填 -
field 条件的attrcode String 必填 -
status 必输性 Boolean 必填 -

返回值说明 ： 返回undefined

3.2.14 setTemlateByField

调用样例 : setTemlateByField(moduleId, field, property, value)
说明 : 修改查询模板属性
参数说明:

参数 说明 类型 默认值 备注
moduleId 模板id String 必填 -
field 条件的attrcode String 必填 -
property String 必填 需要修改的属性名 -
value 需要修改的属性值 String、Object 必填 -

返回值说明 ： 返回undefined

4 模板结构

4.1查询区模板整体结构

属性 说明 类型 备注
items 查询条件数组，用于渲染查询条件 Array 详情见4.2
moduletype 模板类型 String search
code 模板编码 String 唯一标识模板
name 模板名称 String -
oid 区域id String -
queryschemes 查询方案列表 Array 详情见4.3

4.2查询条件结构

items的每一项结构如下

属性 说明 类型 备注
isfixedcondition 固定条件标识 Boolean -
required 必填标识 Boolean -
disabled 可编辑性标识 Boolean -
queryOperateType 操作符 String =@is not null@is null 用@分割，默认取第一个
visible 可见性标识 Boolean -
label 查询条件名称 String -
itemtype 查询条件类型 String select、datepicker、number等
col 列宽 Number 查询区用不到
leftspace 左侧空白 Number 查询区用不到
rightspace 右侧空白 Number 查询区用不到
maxlength 最大长度 Number 如果是number类型的条件，会用到
scale 模板精度 Number 如果是number类型的条件，会用到，如果存在数据精度，会优先使用数据精度
isdrag 可拖拽的标识 Boolean 默认高级查询中的条件列表中，只会显示可以拖拽的条件
max 最大值 Number 如果是number类型的条件，会用到，2147483647
min 最小值 Number 如果是number类型的条件，会用到，-2147483648
visibleposition 排序标识 String 该字段用于辅助决定字段排序，但是具体的排序规则还需要根据是否是固定条件、必填条件等因素决定
initialvalue 条件默认值 Object {display:’’,//默认值的标题 value:’’//默认值,scale:’’//数据精度}

4.3查询方案结构

属性 说明 类型 备注
isquickqs 是否是快速查询方案 Boolean 快速查询方案会优先显示，原则上只会有一个快速查询方案，如果有多个则会取最后一个作为快速方案解析
isdefault 是否是默认查询方案 Boolean 出厂预置的方案
name 方案名称 String -
pk_ncc_queryscheme 方案编码 String -
renderobj4web 方案的内容 Array 一般情况下不建议领域干涉本字段

5. 注意事项

  • 在调用查询区api之前，请一定要确认已经初始化了查询区并设置了模板
  • 查询组件只对查询条件负责，不对查询结果负责。
  • 存在多个查询区的情况下，请确认模板都是不同的。