多来源转单API
多来源转单分为两种：普通多来源和带全部页签的多来源
普通多来源转单
render() {const { transferTable, form, button, search, editTable } = this.props;const { NCCreateSearch } = search;const { createForm } = form;const { createButton } = button;const { createEditTable } = editTable;const { createMultiTransferTable } = transferTable;this.initTransferTemplate = initTransferTemplate;return (<div id="transferDemo" style={{backgroundColor: '#fff'}}><div><div style={{ padding: '20px', borderBottom: '1px solid #d9d9d9' }}>选择订单/入库单<a href="javascript:;" style={{ float: 'right' }} onClick={() => {if (!this.props.meta.getMeta()['reva_revecont_main']) {initTemplateFull(this.props); //加载主子拉平模板}if (!this.props.meta.getMeta()['reva_revecont_main1']) {initTemplateFull1(this.props); //加载主子拉平模板}this.props.transferTable.changeViewType();}}>切换</a></div></div><div>{/* 创建多来源转单 */}{ createMultiTransferTable({onTabClick: (key) => { //点击页签的钩子函数console.log('点击了', key)//拿到当前页签的headTableId给转单页面使用switch (key) {case "1":this.curheadTableId = META.tab2HeadTableId;//记录主表id，供下游转单使用//已经加载过模板不需再次加载if (!this.props.meta.getMeta()[META.tab2HeadTableId]) {initTemplate1(this.props);}break;default:this.curheadTableId = META.tab1HeadTableId;break;}},tabActiveIndex: 1, // 设置显示params中定义的第几个tab （默认为0，params参数第一个参数的下标）类型NumberhideTabs: [0], // 设置隐藏params中定义的哪几个tab （默认为全不隐藏） 类型Arry 如： [0, 2] 则隐藏params中第1个和第三个tabhideTransferBtn: true, // 隐藏transferBtn属性，如果传布尔值true 则隐藏transferTable按钮hideBtnForShowSelectList: true, // 隐藏查看已选按钮属性，如果传布尔值true 则隐藏查看已选按钮showChangeViewBtn:true,//控制已选列表页面 切换主子表/拉平表 切换按钮的显示 Boolean，默认是true显示，需要隐藏未falseonExpandedChange:(pks)=>{//pks Array类型 是当前转单展开的所有主表的pk},},[{tabName: '工程转固',//tab页签显示文字searchArea: () => { //查询区域renderreturn NCCreateSearch('reve_search',{clickSearchBtn: () => {console.log('点击了查询1')this.props.transferTable.setTransferTableValue(META.tab1HeadTableId, 'revecont_b', listTable.data, "crevecontid", 'crevecontbid');}})},headTableId: META.tab1HeadTableId,//表格组件idbodyTableId: 'revecont_b',//子表模板idfullTableId: 'reva_revecont_main',//主子拉平模板idtransferBtnText: '生成工程单', //转单按钮显示文字containerSelector: '#transferDemo', //容器的选择器 必须唯一,用于设置底部已选区域宽度onTransferBtnClick: () => { //点击转单按钮钩子函数hashHistory.push({pathname: `/transferList?type=transfer`})},selectArea: () => {//已选列表个性化区域return <span><span>本次开票数量：5000.00</span><span>本次开票金额：58500.00</span><NCButton>一键制单</NCButton><NCButton>单据对冲</NCButton></span>},onChangeViewClick: () => { //点击切换视图钩子函数if (!this.props.meta.getMeta()['reva_revecont_main']) {initTemplateFull(this.props); //加载主子拉平模板}this.props.transferTable.changeViewType(META.tab1HeadTableId);}},{tabName: '采购转固',//tab页签显示文字headTableId: META.tab2HeadTableId,//表格组件idbodyTableId: 'revecont_b1',//子表模板idfullTableId: 'reva_revecont_main1',//主子拉平模板idsearchArea: () => { //查询区域renderreturn NCCreateSearch('reve_search1', {clickSearchBtn: () => {console.log('点击了查询2')this.props.transferTable.setTransferTableValue(META.tab2HeadTableId, 'revecont_b', listTable1.data, "crevecontid", 'crevecontbid');}})},transferBtnText: '生成采购单', //转单按钮显示文字containerSelector: '#transferDemo', //容器的选择器 必须唯一,用于设置底部已选区域宽度onTransferBtnClick: () => { //点击转单按钮钩子函数hashHistory.push({pathname: `/transferList?type=transfer`})},onChangeViewClick: () => { //点击切换视图钩子函数if (!this.props.meta.getMeta()['reva_revecont_main1']) {initTemplateFull1(this.props); //加载主子拉平模板}this.props.transferTable.changeViewType(META.tab2HeadTableId);}}])}</div></div>);}}
带全部页签的多来源转单
render() {
const { transferTable, form, button, search, editTable } = this.props;
const { NCCreateSearch } = search;
const { createForm } = form;
const { createButton } = button;
const { createEditTable } = editTable;
const { createMultiTransferTable } = transferTable;
let selectedShow = transferTable.getSelectedListDisplay('all');
return (
<div id="transferDemo" style={{ backgroundColor: '#fff' }}>
{
!selectedShow ?
<div>
<div style={{ padding: '20px', borderBottom: '1px solid #d9d9d9' }}>
选择订单/入库单
<a href="javascript:;" style={{ float: 'right' }} onClick={() => {
if (!this.props.meta.getMeta()['reva_revecont_main']) {
initTemplateFull(this.props); //加载主子拉平模板
}
if (!this.props.meta.getMeta()['reva_revecont_main1']) {
initTemplateFull1(this.props); //加载主子拉平模板
}
if (!this.props.meta.getMeta()['reva_revecont_main_all']) {
initTemplateFullAll(this.props); //加载主子拉平模板
}
this.props.transferTable.changeViewType();
}}>切换</a>
</div>
</div> : ''
}
<div>
{/* 创建多来源转单 */}
{createMultiTransferTable({
onTabClick: (key) => { //点击页签的钩子函数
console.log('点击了', key)
//拿到当前页签的headTableId给转单页面使用
switch (key) {
case "1":
this.curheadTableId = META.tab2HeadTableId;//记录主表id，供下游转单使用
if (!this.props.meta.getMeta()[META.tab2HeadTableId]) {
initTemplate1(this.props);
}
if (!this.props.meta.getMeta()['reva_revecont_main1']) {
initTemplateFull1(this.props); //加载主子拉平模板
}
break;
case "2":
this.curheadTableId = META.allHeadTableId;//记录主表id，供下游转单使用
if (!this.props.meta.getMeta()[META.allHeadTableId]) {
initTemplateAll(this.props);
}
default:
this.curheadTableId = META.tab1HeadTableId;
break;
}
},
showAll: true,//是否显示全部页签，不显示全部页签时不需要设置 默认为false
//==========以下参数必须设置showAll为true时才生效==========
allHeadId: META.allHeadTableId, //全部页签的主表id
allBodyId: 'revecont_b_all', //全部页签的子表id
allFullTableId: 'reva_revecont_main',//已选列表中主子拉平模板id
transferBtnText: '生成采购单', //转单按钮显示文字
containerSelector: '#transferDemo', //容器的选择器 必须唯一,用于设置底部已选区域宽度
headPkIds: ['crevecontid', 'crevecontid1'],//主表的主键字段，下游获取已选id时需要用到
bodyPkIds: ['crevecontbid', 'crevecontbid1'],//子表的主键字段，下游获取已选id时需要用到
showChangeViewBtn:true,//控制已选列表页面 切换主子表/拉平表 切换按钮的显示 Boolean，默认是true显示，需要隐藏未false
// selectArea: () => {//已选列表个性化区域 如果所有页签都显示相同内容，在此设置
// return <span>
// <span>本次开票数量：5000.00</span>
// <span>本次开票金额：58500.00</span>
// <NCButton>一键制单</NCButton>
// <NCButton>单据对冲</NCButton>
// </span>
// },
onTransferBtnClick: () => { //点击转单按钮钩子函数
hashHistory.push({
pathname: `/transferList?type=transfer`
})
},
onChangeViewClick: () => { //已选列表中的切换视图钩子函数
if (!this.props.meta.getMeta()['reva_revecont_main_all']) {
initTemplateFullAll(this.props); //加载主子拉平模板
}
this.props.transferTable.changeViewType('all');
},
onSelectedBtnClick: () => { //点击已选列表的钩子函数
this.props.transferTable.getTransferTableSelectedValue();//获取全部已选数据
this.props.transferTable.setMultiSelectedValue(META.allHeadTableId, 'revecont_b_all', listTableAll.data, ['crevecontid', 'crevecontid1'], ['crevecontbid', 'crevecontbid2']);
console.log('已选数据', this.props.transferTable.getTransferTableSelectedValue());
},
onClearAll: () => {
console.log('清空啦')
},
onSelectedItemRemove: (record,bodys) => {
console.log('移除',record)
bodys && console.log('移除的子表数据', bodys)
},
tabActiveIndex: 1, // 设置显示params中定义的第几个tab （默认为0，params参数第一个参数的下标）类型Number
hideTabs: [0], // 设置隐藏params中定义的哪几个tab （默认为全不隐藏） 类型Arry 如： [0, 2] 则隐藏params中第1个和第三个tab
hideTransferBtn: true, // 隐藏transferBtn属性，如果传布尔值true 则隐藏transferTable按钮
hideBtnForShowSelectList: true, // 隐藏查看已选按钮属性，如果传布尔值true 则隐藏查看已选按钮
},[
{
tabName: '工程转固',//tab页签显示文字
searchArea: () => { //查询区域render
return NCCreateSearch('reve_search',{
clickSearchBtn: () => {
console.log('点击了查询1')
this.props.transferTable.setTransferTableValue(META.tab1HeadTableId, 'revecont_b', listTable.data, "crevecontid", 'crevecontbid');
}
})
},
headTableId: META.tab1HeadTableId,//表格组件id
bodyTableId: 'revecont_b',//子表模板id
fullTableId: 'reva_revecont_main',//主子拉平模板id
selectArea: () => {//已选列表个性化区域
return <span>
<span>本次开票数量：5000.00</span>
<NCButton>工程转固</NCButton>
<NCButton>工程转固</NCButton>
</span>
},
onChangeViewClick: () => { //点击切换视图钩子函数
if (!this.props.meta.getMeta()['reva_revecont_main']) {
initTemplateFull(this.props); //加载主子拉平模板
}
this.props.transferTable.changeViewType(META.tab1HeadTableId);
}
},
{
// tableType: 'full',//选填 表格默认显示的类型 full:主子拉平 nest:主子表
tabName: '采购转固',//tab页签显示文字
headTableId: META.tab2HeadTableId,//表格组件id
bodyTableId: 'revecont_b1',//子表模板id
fullTableId: 'reva_revecont_main1',//主子拉平模板id
searchArea: () => { //查询区域render
return NCCreateSearch('reve_search1', {
clickSearchBtn: () => {
console.log('点击了查询2')
this.props.transferTable.setTransferTableValue(META.tab2HeadTableId, 'revecont_b', listTable1.data, "crevecontid", 'crevecontbid');
}
})
},
selectArea: () => {//已选列表个性化区域
return <span>
<span>本次开票数量：5000.00</span>
<span>本次开票金额：58500.00</span>
<NCButton>采购转固</NCButton>
<NCButton>采购转固</NCButton>
</span>
},
onChangeViewClick: () => { //点击切换视图钩子函数
this.props.transferTable.changeViewType(META.tab2HeadTableId);
}
},
{
tabName: '全部',//tab页签显示文字
headTableId: META.allHeadTableId,//表格组件id
bodyTableId: 'revecont_b_all',//子表模板id
fullTableId: 'reva_revecont_main_all',//主子拉平模板id
searchArea: () => { //查询区域render
return NCCreateSearch('reve_search_all', {
clickSearchBtn: () => {
//全部多来源后两个参数需要传数组，将其他页签的主/子表主键字段放到数组中传进来
this.props.transferTable.setTransferTableValue(META.allHeadTableId, 'revecont_b_all', listTableAll.data, ['crevecontid','a'], ['crevecontbid','b']);
console.log('点击了全部查询')
}
})
},
selectArea: () => {//已选列表个性化区域
return <span>
<span>本次开票数量：5000.00</span>
<span>本次开票金额：58500.00</span>
<NCButton>一键制单</NCButton>
<NCButton>单据对冲</NCButton>
</span>
},
onChangeViewClick: () => { //已选列表中的切换视图钩子函数
if (!this.props.meta.getMeta()['reva_revecont_main_all']) {
initTemplateFullAll(this.props); //加载主子拉平模板
}
this.props.transferTable.changeViewType(META.allHeadTableId);
}
}
])}
</div>
</div>
);
}
部分子表无数据不显示主表展开符号 的数据格式
在使用setTransferTableValue设置数据的时候，data格式示例：
{
head: {
reva_revecont: {
rows: [{
values: {
vbillcode: {
value: Math.ceil(Math.random() * 100000000), scale: Math.ceil(Math.random() * 5)
},
pk_org_v: {
display: '辅导辅导费',
value: '1001A11000000000058I'
},
ts: {
value: '2018-03-21 10:53:18'
},
switch1: {
value: true
},
crevecontid: {
display: 'jykukuk',
value: '1001A310000000005SC8'
},
ccustomerid: {
display: '434r32tt',
value: '1001A11000000000223R'
},
pk_org: {
display: '8i87i78i87i',
value: '0001A11000000000246T'
},
ctrantypeid: {
display: 'e32e32e',
value: '1001Z510000000004JMJ'
},
bcloseflag: {
value: false
},
vname: {
value: 'wew'
},
dbilldate: {
value: '2018-05-13 12:00:00'
},
cdeptvid: {
display: "研发部",
value: "1001Z510000000004JMJ"
},
fstatusflag: {
display: "",
value: ""
},
noritotalmny: {
display: "",
value: ""
},
ndealtotalmny: {
display: "",
value: ""
},
fstageflag: {
display: "",
value: ""
},
isstartpf: {
display: "",
value: ""
},
fpfstatusflag: {
display: "",
value: ""
},
ccurrencyid: {
display: "人民币",
value: "u6u6u6u6u6u"
},
ts: {
display: "",
value: "2347784454545"
},
datepicker: {
display: "",
value: "654645757575"
},
dmakedate: {
display: "",
value: "6ui6i77000"
},
vtrantypecode: {
display: "",
value: "5u5uut4t"
},
}
}]
}
},
body: {
revecont_b: {
rows: [ ] //--------------重点在此
}
}
}
方法名 createMultiTransferTable
createMultiTransferTable({
showAll,
allHeadId,
allBodyId,
allFullTableId,
headPkIds,
bodyPkIds,
containerSelector,
transferBtnText,
onTransferBtnClick,
onSelectedBtnClick,
onChangeViewClick,
showChangeViewBtn,
onTabClick,
setMultiSelectedValue,
selectArea,
onClearAll,
onSelectedItemRemove,
tabActiveIndex,
hideTabs,
showSeletedBtn,
showGenerateBtn
}, [...transfers])
| 方法 | 说明 |
|---|---|
| getTransferTableAllSelectedId | 获取所有页签选中的数据pk |
| 参数 | 说明 |
|---|---|
| showAll | 是否显示全部页签，不显示全部页签时不需要设置 默认为false |
| allHeadId | 全部页签的主表id |
| allBodyId | 全部页签的子表id |
| allFullTableId | 已选列表中主子拉平模板id |
| headPkIds | 各页签主表的主键字段, |
| bodyPkIds | 各页签子表的主键字段 |
| containerSelector | 容器的选择器 必须唯一,用于设置底部已选区域宽度 |
| transferBtnText | 转单按钮显示文字 |
| showChangeViewBtn | 转单已选列表页面右上角切换 主子/拉平表的切换按钮的显隐 类型Boolean 默认true |
| onTransferBtnClick | 点击转单按钮钩子函数 |
| onSelectedBtnClick | 点击已选列表的钩子函数 |
| onChangeViewClick | 点击已选列表中的切换视图钩子函数 |
| onTabClick | 点击页签的钩子函数 |
| selectArea | 已选列表底部自定义区域 如果所有页签都显示相同内容，在此设置 |
| onClearAll | 已选列表清空的钩子函数 |
| onSelectedItemRemove | 已选列表移除钩子函数（返回参数：record:移除的数据 bodys:移除主表对应的子表数据，只有移除主表时才生效） |
| tabActiveIndex | 设置显示params中定义的第几个tab （默认为’0’，params参数第一个参数的下标）类型Number/String |
| hideTabs | 设置隐藏params中定义的哪几个tab （默认为全不隐藏） 类型Arry 如： [‘0’, ‘2’] 则隐藏params中第1个和第三个tab |
| showSeletedBtn | 转单显示查看已选按钮默认为true |
| showGenerateBtn | 显示右侧自定义按钮 默认为true |
若有收获，就点个赞吧
0 人点赞
