按钮注册和使用说明
标签： NC高级组件
上次修改日期： 2018-9-20
修改时间： 2018-9-27
更新内容：
- 增加了
setButtonTitle方法，用于设置按钮名称 如： 原按钮叫 打印, key为print， setButtonTitle(‘print’, ‘输出’)后 按钮名变为输出 - 增加了
setUploadDocAmount方法，用于设置附件按钮数量， 显示如 附件（99+）； - 传参为： 第一个参数：按钮id； 第二个参数： 附件按钮括号内要显示的数量
一. 按钮注册
按钮类型和对应页面渲染效果
注意：对于页面图标形状的刷新按钮，注册按钮时暂采用：
类型:次要按钮，按钮名称：<空>，父级编码：<空>的方式注册，也就是说对没有名称和父按钮编码的次要按钮，会渲染成刷新按钮，请知悉。
按钮注册关键字段含义
- 按钮编码：标识按钮唯一性的关键字段，绑定事件的时候根据按钮编码来执行对应的事件
- 按钮名称：显示在按钮上的汉字。对于带下拉功能的按钮（下拉按钮，分割下拉按钮，更多按钮），注册时，最外层父按钮下面的分组如果填了按钮名称，就会渲染成分组标题；不填按钮名称，只有一个按钮分组时不渲染分组信息，多于一个按钮分组时会渲染分割线。
- 按钮类型：参见上面的渲染效果。这里的按钮类型主要指的时最外层父按钮的按钮类型，其内部的子按钮通常注册为次要按钮即可（按钮组类型的按钮除外，按钮组类型的子按钮有颜色区分，注册为相应的主要按钮或次要按钮）。
- 父按钮编码：上一级按钮的按钮编码。对于按钮组、下拉按钮、分割下拉按钮、更多按钮等类型，在注册时，需要先注册一个最外层的父按钮，再注册其内部的子按钮；通过指定子按钮的父按钮编码，组成父子关系。
- 按钮区域：按钮在页面上要放置的区域，区域名称可以自定义，推荐使用有业务含义的字符串。在调用 createButtonApp 或者 createOperationApp 方法时，在参数中需要传 area 字段，方法内部会从所有按钮中找到按钮区域为 area 字段传的值的所有按钮，渲染在页面上，因此要求注册时填的按钮区域和调用方法时传的 area 保持一致。同一页面不同区域功能和外观都相同按钮可以注册成一个按钮，在注册时，按钮区域可以填多个值，通过英文的逗号“,”分割。
按钮注册示例
- 按钮注册大致可以分成两类
- 简单按钮（主要按钮，次要按钮，刷新按钮）
- 组合按钮（按钮组，下拉按钮，分割下拉按钮，更多按钮）
- 按钮组
- 简单按钮（主要按钮，次要按钮，刷新按钮）
- 下拉按钮
如果下拉按钮下的分组不填按钮名称，当有多个分组时，分组之间会渲染分割线；如果分组填了按钮名称，这里填的按钮名称会渲染成分组标题。
- 分割下拉按钮： 注册方法和下拉按钮相同，区别只在最外层父按钮选分割下拉按钮
- 更多按钮： 注册方法和下拉按钮相同，区别只在最外层父按钮选更多按钮
表格操作列上的按钮全部注册成次要按钮即可
二. 按钮方法 api
| 序号 | 方法名 | 方法说明 | 参数 | 参数类型 | 返回值 | 说明 |
|---|---|---|---|---|---|---|
| 1 | createButtonApp | 创建按钮组 | {onButtonClick : function, area : string, popContainer : DomNode} | object | - | 1.area: 如果页面中的有多个区域有按钮，这里的area当做筛选条件，只渲染按钮的后台数据中area字段为这里指定值的按钮；不指定时，默认渲染所有按钮; 3. onButtonClick: 按钮的点击事件； 4. popContainer: 指定下拉弹窗渲染的位置，默认是body。(当按钮组放在模态框、侧拉框等内部时，需要指定popContainer，否则会出现下拉弹窗被模态框遮挡，下拉弹窗随着滚动条滚动的问题) |
| 2 | createOprationButton | 创建表格操作列上的按钮 | ([“btn1”,”btn2”],{onButtonClick : function, area : string, buttonLimit : number, popContainer : DomNode}) | (array,object) | - | 参数一：按钮编码组成的数组 参数二：配置信息对象，含义同上一个方法 |
| 3 | getButtons | 获取所有的按钮数据 | - | - | array | 返回所有按钮的数组 |
| 4 | setButtons | 设置按钮的数据到页面 | (按钮的json数据) | array | - | 将后台返回的数据中的按钮数据放在页面中 |
| 5 | setButtonDisabled | 设置按钮的禁用状态 | 1. (btnId,T/F) 2. ([btnId1,btnId2],T/F) 3. ({btnId1:T/F,btnId2:T/F}) |
1. (string,boolean) 2. (array,boolean) 3. object |
- | 1.setButtonDisabled(‘save’,true) 2.setButtonDisabled([‘save’,’add’],true) 3. setButtonDisabled({cancel:false, add:false, save:true}) |
| 6 | getButtonDisabled | 获取一个按钮的禁用状态 | ‘btnId’ | string | boolean | |
| 7 | setButtonVisible | 设置按钮的显隐性 | 1. (‘btnId’,T/F) 2. ([btnId1,btnId2],T/F) 3. {btnId1:T/F, btnId2:T/F} |
1. (string,boolean) 2. (array,boolean) 3. object |
- | 1. setButtonVisible(‘add’, true) 2. setButtonVisible([‘cancel’,’save’], false) 3.({cancel:false, add:false, save:true}) |
| 8 | setButtonsVisible | 设置多个按钮的显隐性（推荐使用上一个setButtonVisible方法，为了兼容以前代码，该方法也还有效） | {btnId1:T/F, btnId2:T/F} | object | - | setButtonVisible({cancel:false, add:false, save:true}) |
| 9 | setMainButton | 设置按钮为主要按钮或次要按钮(T 主要/ F 次要) | 1. (btnId,T/F) 2. ([btnId1,btnId2],T/F) 3. ({btnId1:T/F,btnId2:T/F}) |
1. (string,boolean) 2. (array,boolean) 3. object |
- | 1. setMainButton(‘edit’,true) 2. setMainButton([‘edit’,’delete’],true) 3. setMainButton({edit:true,cancel:false}) |
| 10 | setPopContent | 设置表格操作列中的弹窗提示（只对表格操作列中更多外面的按钮生效，在请求按钮数据并执行 setButtons 方法之后调用） | 1. (btnId,content) 2. ([btnId1,btnId2],content) 3. ({btnId1:content1,btnId2:content2}) |
1. (string,string/HTML) 2. (array,string/HTML) 3. object |
- | 1. setPopContent(‘delete’,’确认要删除该信息吗？’) 2. setPopContent([‘edit’,’delete’],”确认执行该操作吗？”) 3. setPopContent({stop:”确定停用该记录吗？”,delete:”确定删除该信息吗？”}) |
| | 11 | hideButtonsByAreas | 隐藏所传区域的所有按钮 （在请求按钮数据并执行 setButtons 方法之前调用）， 为了解决按钮初次渲染闪烁调用此方法先隐藏区域按钮 再通过设置需要显示的按钮显示 | ([area1, area2….])或者(area1) | hideButtonsByAreas([area1, area2….]) | | | | 12 | setUploadDocAmount | 在请求到附件的数量后通过调用该方法显示 附件按钮的文件数量 | (btnId,90/99+) | (string, number/string) | | 如果文件数量在一百以上，需业务组自行判断传 99+ | | 13 | setButtonTitle | 用于设置按钮名称 | (string, string) | | 原按钮叫 打印, key为print， setButtonTitle(‘print’, ‘输出’)后 按钮名变为输出 | |
三. 在页面创建按钮组步骤
- 第一步：
- 情形1：走平台模板，在
initTemplate.js的createUIDom的回调函数中，将请求回来的按钮组数据设置到页面的buttons属性上props.createUIDom({pagecode: pageId,appid: appid},function (data) {if (data) {if (data.button) {let button = data.button;props.button.setButtons(button);props.button.setPopContent('delete','确认要删除该信息吗？') /* 设置操作列上删除按钮的弹窗提示 */}}})
- 情形2: 不走平台的模板，通过
ajax主动请求按钮组数据，请求URL和参数如下：ajax({url: 'nccloud/platform/appregister/queryallbtns.do',data: {pk_appregister: '0001Z51000000005Y9R1',/* pk_appregister 对应URL路径参数中ar的值 */pagecode: 'page1'},success: (res) => {/* 拿到按钮数据，调用setButtons方法将数据设置到页面上，然后执行后续的按钮逻辑 */this.props.button.setButtons(res.data)}});
- 第二步：在页面的相应位置调用
createButtonApp或者createOprationButton方法创建按钮。
- 肩部按钮：在
index.js的render函数中的合适dom结构处，调用props.button.createButtonApp方法创建按钮组。
注意：createButtonApp 中的参数不是必须的，需要根据页面需要来传，详见上面的 api 中的说明
```jsrender() {let { createButtonApp } = this.props.button;return (<div className="nc-bill-list"><div className="nc-bill-header-area"><div className="header-button-area">{this.props.button.createButtonApp({area: 'page_header',onButtonClick: onButtonClick.bind(this),popContainer: document.querySelector('.header-button-area')})}</div></div></div>)}
2. 表格操作列按钮：在 `initTemplate.js` 修改 `meta` 的函数中，调用`createOprationButton` 方法增加操作按钮
```javascript
function modifierMeta(meta, props) {
let material_event = {
label: '操作',
itemtype: 'customer',
attrcode: 'opr',
width: '150px',
visible: true,
fixed: 'right',
render: (text, record, index) => {
let buttonAry =
props.getUrlParam("status") === "browse"
? [ "open_browse" ]
: [ "open_edit", "copyline", "materialDelLine" ];
return props.button.createOprationButton(buttonAry, {
area: "material_table_row",
buttonLimit: 3,
onButtonClick: (props, key) => tableButtonClick(props, key, text, record, index)
});
}
};
meta.cardbody.items.push(material_event);
return meta;
}
四. 按钮的点击事件示例
肩部按钮点击事件示例
let flag = false; // 示例用，根据需要来写 onClick = (props, id) => { switch (id) { // 按钮的 id 为 main 触发的事件 case 'edit': // 设置按钮数据 参数：json 数组 props.button.setButtons(json); // 获取所有按钮 参数：无 let allButtons = props.button.getButtons(); // 设置按钮的禁用状态 参数：1.对象 {id1:flag，id2:flag} id: 要设置的按钮id props.button.setDisabled({ cancel: flag, save: flag }); // 获取按钮的禁用状态 参数：按钮的 id 字符串 let disabledStatus = props.button.getDisabled('save'); // 设置一个按钮的显示隐藏 参数：1.按钮 id 字符串，2：flag标识 props.button.setButtonVisible('save', flag); // 设置多个按钮的显示隐藏为同一状态 参数：1.按钮 id 组成的数组，2：flag标识 props.button.setButtonVisible(['save','cancel'], flag); // 设置多个按钮的显示隐藏为不同状态 参数：1. 对象{id1:flag，id2:flag} id: 要设置的按钮id props.button.setButtonsVisible({ cancel: flag, save: flag, edit: !flag }); break; default: break; } };
- 表格操作列点击事件示例
import { PAGECODE, STATUS } from '../../constance'; const tableButtonClick = (props, key, text, record, index) => { switch (key) { // 表格操作按钮 case 'open_browse': props.cardTable.toggleRowView(PAGECODE.cardbody, record); break; case 'open_edit': props.cardTable.openModel(PAGECODE.cardbody, STATUS.edit, record, index); break; case 'copyline': props.cardTable.addRow(PAGECODE.cardbody); break; case 'delline': props.cardTable.delRowsByIndex(PAGECODE.cardbody, index); break; default: console.log(key, index); break; } }; export default tableButtonClick;
五. 导入(给按钮增加上传功能)
导入功能使用的是
NCUpload组件，即tinper-bee中的Upload组件，导入配置参数详见tinper-bee中的文档说明，地址：http://bee.tinper.org/bee-upload
- 肩部导入按钮
在initTemplate.js中执行props.button.setUploadConfig('import', config)即可。props.createUIDom( { pagecode: pageId, appid: appid }, function (data) { if (data) { if (data.button) { let button = data.button; let config = { name: 'file', action: '/upload.do', headers: { authorization: 'authorization-text' }, onChange: (info) => { if (info.file.status !== 'uploading') { console.log(info.file, info.fileList); } if (info.file.status === 'done') { console.log(`${info.file.name} file uploaded successfully`); } else if (info.file.status === 'error') { console.log(`${info.file.name} file upload failed.`); } } }; /* 这里的config只是示例，具体的参数说明详见tinper-bee中Upload组件文档 */ props.button.setButtons(button); props.button.setUploadConfig('import', config) /* 给编码为import 的按钮增加文件上传功能，并传入上传组件的配置文件 */ } } } )
- 表格操作列中的导入功能
如果表格操作列中的导入功能在向后台发送数据时要依赖表格行数据作为参数，可以通过下面的方式来实现： ```javascript / 1. 先定义config变量，里面包含了表格每一行都公用的一些属性 / let config = { name: ‘file’, showUploadList: false, action: ‘/nccloud/ic/pub/uploadserial.do’, headers: {
}, onChange: (info) => {authorization: 'authorization-text'
} };if (info.file.status !== 'uploading') { console.log(info.file, info.fileList); } if (info.file.status === 'done') { console.log(`${info.file.name} file uploaded successfully`); } else if (info.file.status === 'error') { console.log(`${info.file.name} file upload failed.`); }
/ 2. 在创建表格操作列的 render 内部改变 config 中不公用的属性 / function modifierMeta(meta, props) { let material_event = { label: ‘操作’, itemtype: ‘customer’, attrcode: ‘opr’, width: ‘150px’, visible: true, fixed: ‘right’, render: (text, record, index) => { let buttonAry = props.getUrlParam(“status”) === “browse” ? [ “open_browse” ] : [ “open_edit”, “copyline”, “materialDelLine” ]; // data 为Upload组件发送给后台的参数，参数的值取自表格行里面的数据 config.data = { billtype: ‘4A’, cgeneralhid: record.values[‘cgeneralhid’] ? record.values[‘cgeneralhid’].value : null, cgeneralbid: record.values[‘cgeneralbid’] ? record.values[‘cgeneralbid’].value : null, cmaterialvid: record.values[FIELD.cmaterialvid] ? record.values[FIELD.cmaterialvid].value : null }; return props.button.createOprationButton(buttonAry, { area: “material_table_row”, buttonLimit: 3, onButtonClick: (props, key) => tableButtonClick(props, key, text, record, index) }); } }; meta.cardbody.items.push(material_event); return meta; }
<a name="49e06592"></a>
## 六. 后台返回的按钮数据结构示例
```json
[
{
"type": "general_btn",
"key": "main",
"btncolor": "button_main",
"title": "主要",
"area": "page_header,table_row"
},
{
"type": "general_btn",
"key": "main22",
"title": "主要2",
"area": "table_header"
},
{
"type": "general_btn",
"btncolor": "button_secondary",
"key": "secondary",
"title": "次要",
"area": "page_header"
},
{
"type": "dropdown",
"key": "contracts",
"title": "单组下拉",
"area": "page_header",
"children": [
{
"title": null,
"key": "contract-group1",
"children": [
{
"key": "contract-1",
"title": "借款合同",
"area": "page_header"
},
{
"key": "contract-2",
"title": "抵/质押合同",
"area": "page_header"
},
{
"key": "contract-3",
"title": "担保合同",
"area": "page_header"
},
{
"key": "contract-4",
"title": "联保合同",
"area": "page_header"
}
]
}
]
},
{
"type": "dropdown",
"key": "contracts2",
"title": "多组下拉",
"area": "page_header",
"children": [
{
"title": null,
"key": "contract-group4",
"children": [
{
"key": "contract2-1",
"title": "借款合同",
"area": "page_header"
},
{
"key": "contract2-2",
"title": "抵/质押合同",
"area": "page_header"
},
{
"key": "contract2-3",
"title": "担保合同",
"area": "page_header"
},
{
"key": "contract2-4",
"title": "联保合同",
"area": "page_header"
}
]
},
{
"title": null,
"key": "contract-group5",
"children": [
{
"key": "contract3-5",
"title": "借款合同",
"area": "page_header"
},
{
"key": "contract3-6",
"title": "抵/质押合同",
"area": "page_header"
},
{
"key": "contract3-7",
"title": "担保合同",
"area": "page_header"
},
{
"key": "contract3-8",
"title": "联保合同",
"area": "page_header"
}
]
}
]
},
{
"type": "dropdown",
"key": "contracts2",
"title": "多组下拉",
"area": "page_header",
"children": [
{
"title": "分组一",
"key": "contract-group4",
"children": []
},
{
"title": "分组二",
"key": "contract-group5",
"children": []
}
]
},
{
"type": "buttongroup",
"key": "buttongroup1",
"title": null,
"area": "page_header",
"children": [
{
"type": "dropdown",
"key": "addgroup",
"title": "新增",
"area": "page_header",
"children": [
{
"title": null,
"key": "hello2",
"parentCode": "addgroup",
"children": [
{
"key": "item1",
"title": "自制",
"parentCode": "hello2",
"area": "page_header"
}
]
},
{
"title": null,
"key": "hello",
"children": [
{
"key": "item2",
"parentCode": "hello",
"title": "采购合同生成订单",
"area": "page_header"
},
{
"key": "item3",
"title": "请购生成订单",
"parentCode": "hello",
"area": "page_header"
},
{
"key": "item4",
"parentCode": "hello",
"title": "直运销售生成订单",
"area": "page_header"
}
]
}
]
},
{
"type": "general_btn",
"key": "edit",
"title": "修改",
"area": "page_header",
"keyboard": "ctrl+m"
},
{
"type": "general_btn",
"key": "delete",
"title": "删除",
"area": "page_header",
"hotkey": "ctrl+d"
},
{
"type": "general_btn",
"key": "copy",
"title": "复制",
"area": "page_header"
}
]
},
{
"type": "divider",
"key": "divider",
"title": "分割按钮",
"area": "page_header",
"isenable": true,
"children": [
{
"title": null,
"isenable": true,
"children": [
{
"key": "import3",
"title": "导入3",
"isenable": true,
"area": "page_header"
},
{
"key": "export",
"title": "导出",
"isenable": true,
"area": "page_header"
}
]
}
]
},
{
"id": "0001Z81000000003486Q",
"type": "divider",
"key": "divider1",
"title": "有权限提交",
"area": "list_head",
"order": "3",
"isenable": true,
"children": [
{
"id": "0001Z810000000039FO2",
"type": "general_btn",
"key": "divider1_group1",
"area": "list_head",
"order": "15",
"parentCode": "divider1",
"isenable": true,
"children": [
{
"id": "0001Z81000000003486R",
"type": "general_btn",
"key": "commit",
"title": "提交",
"area": "list_head",
"order": "4",
"isenable": true,
"parentCode": "divider1_group1",
"children": []
},
{
"id": "0001Z81000000003486S",
"type": "general_btn",
"key": "uncommit",
"title": "收回",
"area": "list_head",
"order": "5",
"isenable": true,
"parentCode": "divider1_group1",
"children": []
}
]
}
]
},
{
"id": "0001Z81000000003486Q",
"type": "divider",
"key": "divider2",
"title": "没权限提交",
"area": "list_head",
"order": "3",
"isenable": false,
"children": [
{
"id": "0001Z810000000039FO2",
"type": "general_btn",
"key": "divider2_group1",
"area": "list_head",
"order": "15",
"parentCode": "divider2",
"isenable": true,
"children": [
{
"id": "0001Z81000000003486R",
"type": "general_btn",
"key": "commit2",
"title": "提交",
"area": "list_head",
"order": "4",
"isenable": true,
"parentCode": "divider2_group1",
"children": []
},
{
"id": "0001Z81000000003486S",
"type": "general_btn",
"key": "uncommit2",
"title": "收回",
"area": "list_head",
"order": "5",
"isenable": true,
"parentCode": "divider2_group1",
"children": []
}
]
}
]
},
{
"type": "more",
"key": "more_opr",
"title": "更多操作",
"area": "page_header",
"children": [
{
"title": "影像",
"children": [
{
"key": "1",
"title": "影像查看",
"area": "page_header"
},
{
"key": "2",
"title": "影像扫描",
"area": "page_header"
}
]
},
{
"title": "联查",
"children": [
{
"key": "3",
"title": "联查单据",
"area": "page_header"
},
{
"key": "4",
"title": "联查余额表",
"area": "page_header"
},
{
"key": "5",
"title": "联查处理情况",
"area": "page_header"
},
{
"key": "6",
"title": "联查凭证",
"area": "page_header"
},
{
"key": "7",
"title": "联查协同单据",
"area": "page_header"
},
{
"key": "8",
"title": "联查首付款协议",
"area": "page_header"
},
{
"key": "9",
"title": "联查计划预算",
"area": "page_header"
}
]
},
{
"title": "导入导出导入导出导入导出",
"children": [
{
"key": "10",
"title": "导入",
"area": "page_header"
},
{
"key": "11",
"title": "导出",
"area": "page_header"
}
]
},
{
"title": "其它",
"children": [
{
"key": "12",
"title": "制单",
"area": "page_header"
},
{
"key": "13",
"title": "红冲",
"area": "page_header"
},
{
"key": "14",
"title": "交易类型",
"area": "page_header"
},
{
"key": "15",
"title": "附件管理",
"area": "page_header"
},
{
"key": "16",
"title": "传金税",
"area": "page_header"
},
{
"key": "17",
"title": "查看当前税务信息",
"area": "page_header"
}
]
}
]
},
{
"type": "button_main",
"key": "main_table",
"title": "主要_表",
"area": "table_header"
},
{
"type": "dropdown",
"key": "contracts_table",
"title": "下拉不分组_表",
"area": "table_header",
"children": [
{
"title": null,
"children": [
{
"key": "contract-1_table",
"title": "借款合同_表",
"area": "table_header"
},
{
"key": "contract-2_table",
"title": "抵/质押合同_表",
"area": "table_header"
},
{
"key": "contract-3_table",
"title": "担保合同_表",
"area": "table_header"
},
{
"key": "contract-4_table",
"title": "联保合同_表",
"area": "table_header"
}
]
}
]
},
{
"type": "general_btn",
"key": "refresh",
"title": null,
"area": "page_header"
},
{ "key": "edit", "title": "修改", "area": "table_row", "keyboard": "ctrl+m" },
{ "key": "del", "title": "删除", "area": "table_row", "keyboard": "del" },
{ "key": "import4", "title": "导入4", "area": "table_row" },
{ "key": "export4", "title": "导出4", "area": "table_row" },
{ "key": "liancha", "title": "联查", "area": "table_row" },
{ "key": "shenpi", "title": "审批", "area": "table_row" },
{ "key": "shouhui", "title": "收回", "area": "table_row" }
]
若有收获，就点个赞吧
0 人点赞
