单来源新需求实现

  • 一 createTransferTable方法多增加一个searchAreaCode参数，传查询区编码，用来缓存查询条件，方便切换查看已选和全部列表按钮及跳转页面的时候保存查询条件
  • 二 因多来源做了勾选数据联动处理， 所以业务组在查询数据的时候以及全选的时候需将之前自定义合计方法清零的逻辑删掉

单来源转单API

转单组件分为两部分：上游列表(createTransferTable)和下游转单(createTransferList)。上游列表分为单来源和多来源。

  1. import React, { Component } from 'react';
  2. import { Row,Col } from "tinper-bee";
  3. import { Router, Route, hashHistory } from 'react-router';
  4. import { initTemplate, initTemplateFull, initTransferTemplate, initTransferListTemplate,setTransferListValue,btnClick} from './events';
  5. import { createForm } from 'src/Page/Form';
  6. import { createPage } from 'src';
  7. import NCButton from 'src/base/nc_Button';
  8. import './list.less'
  10. class TransferTable extends Component {
  11.     constructor(props) {
  12.         super(props);
  13.         this.headTableId = "reva_revecont";
  14.         this.transformFormId = "formAreaId";
  15.         this.state = {
  16.             tableData: [] //表格数据
  17.         }
  18.     }
  20.     componentDidMount() {
  21.         setTimeout( () => {
  22.             let transferData = 
  23.             {
  24.                 data:[
  26.                     {
  27.                         head:{
  28.                             reva_revecont:{
  29.                                 rows:[
  30.                                     {
  31.                                         values: {
  32.                                             vbillcode: {
  33.                                                 value: Math.ceil(Math.random() * 100000000)
  34.                                             },
  35.                                             pk_org_v: {
  36.                                                 display: '辅导辅导费',
  37.                                                 value: '1001A11000000000058I'
  38.                                             },
  39.                                             ts: {
  40.                                                 value: '2018-03-21 10:53:18'
  41.                                             },
  42.                                             switch1: {
  43.                                                 value: true
  44.                                             },
  45.                                             crevecontid: {
  46.                                                 display: 'jykukuk',
  47.                                                 value: '1001A310008780005SC8'
  48.                                             },
  49.                                             ccustomerid: {
  50.                                                 display: '434r32tt',
  51.                                                 value: '1001A11000000000223R'
  52.                                             },
  53.                                             pk_org: {
  54.                                                 display: '8i87i78i87i',
  55.                                                 value: '0001A11000000000246T'
  56.                                             },
  57.                                             ctrantypeid: {
  58.                                                 display: 'e32e32e',
  59.                                                 value: '1001Z510000000004JMJ'
  60.                                             },
  61.                                             bcloseflag: {
  62.                                                 value: false
  63.                                             },
  64.                                             vname: {
  65.                                                 value: 'wew'
  66.                                             },
  67.                                             dbilldate: {
  68.                                                 value: '2018-05-12'
  69.                                             },
  70.                                             cdeptvid: {
  71.                                                 display: "研发部",
  72.                                                 value: "1001Z510000000004JMJ"
  73.                                             },
  74.                                             fstatusflag: {
  75.                                                 display: "自由态",
  76.                                                 value: "0"
  77.                                             },
  78.                                             noritotalmny: {
  79.                                                 value: "245456.70"
  80.                                             },
  81.                                             ndealtotalmny: {
  82.                                                 value: "245456.70"
  83.                                             },
  84.                                             fstageflag: {
  85.                                                 display: "已识别合同",
  86.                                                 value: "1"
  87.                                             },
  88.                                             isstartpf: {
  89.                                                 display: "",
  90.                                                 value: "35"
  91.                                             },
  92.                                             fpfstatusflag: {
  93.                                                 display: "",
  94.                                                 value: "35"
  95.                                             },
  96.                                             ccurrencyid: {
  97.                                                 display: "人民币",
  98.                                                 value: "u6u6u6u6u6u"
  99.                                             },
  100.                                             ts: {
  101.                                                 display: "",
  102.                                                 value: "23435454545"
  103.                                             },
  104.                                             datepicker: {
  105.                                                 display: "",
  106.                                                 value: "654645757575"
  107.                                             },
  108.                                             dmakedate: {
  109.                                                 display: "",
  110.                                                 value: "6ui6i77000"
  111.                                             },
  112.                                             vtrantypecode: {
  113.                                                 display: "",
  114.                                                 value: "5u5uut4t"
  115.                                             },
  117.                                         }
  118.                                     }
  119.                                 ]
  120.                             }
  122.                         },
  123.                         body:{
  124.                             revecont_b:{
  125.                                 rows: [
  126.                                     {
  127.                                         status: 0,
  128.                                         values: {
  129.                                             crevecontbid: { value: "43t4t22222" },
  130.                                             crowno: { value: '2018-2-10' },
  131.                                             cpobid: { value: '北京市海淀区第一仓库' },
  132.                                             "cpobid.vname": { value: '张三' },
  133.                                             fconfirmpoint: { value: '0' },
  134.                                             npobnum: { value: 65 },
  135.                                             cunitid: { value: '北京市用友产业园中区' },
  136.                                             nallotmny: { value: '北京市蓝蓝科技公司' },
  137.                                             nfinishnum: { value: '自由' },
  138.                                             nfinishmny: { value: '自由' },
  139.                                             cmaterialvid: { value: '自由' },
  140.                                             ts: { value: '自由11' },
  141.                                             vrownote: { value: '自由' },
  142.                                         }
  143.                                     },
  144.                                     {
  145.                                         status: 0,
  146.                                         values: {
  147.                                             crevecontbid: { value: "878787878" },
  148.                                             crowno: { value: '2018-2-10' },
  149.                                             cpobid: { value: '北京市海淀区第一仓库' },
  150.                                             "cpobid.vname": { value: '张三' },
  151.                                             fconfirmpoint: { value: '0' },
  152.                                             npobnum: { value: 65 },
  153.                                             cunitid: { value: '北京市用友产业园中区' },
  154.                                             nallotmny: { value: '北京市蓝蓝科技公司' },
  155.                                             nfinishnum: { value: '自由' },
  156.                                             nfinishmny: { value: '自由' },
  157.                                             cmaterialvid: { value: '自由' },
  158.                                             ts: { value: '22' },
  159.                                             vrownote: { value: '自由' },
  160.                                         }
  161.                                     },
  162.                                     {
  163.                                         status: 0,
  164.                                         values: {
  165.                                             crevecontbid: { value: "9809090" },
  166.                                             crowno: { value: '2018-2-10' },
  167.                                             cpobid: { value: '北京市海淀区第一仓库' },
  168.                                             "cpobid.vname": { value: '张三' },
  169.                                             fconfirmpoint: { value: '0' },
  170.                                             npobnum: { value: 65 },
  171.                                             cunitid: { value: '北京市用友产业园中区' },
  172.                                             nallotmny: { value: '北京市蓝蓝科技公司' },
  173.                                             nfinishnum: { value: '自由' },
  174.                                             nfinishmny: { value: '自由' },
  175.                                             cmaterialvid: { value: '自由' },
  176.                                             ts: { value: '33' },
  177.                                             vrownote: { value: '自由' },
  178.                                         }
  179.                                     },
  180.                                     {
  181.                                         status: 0,
  182.                                         values: {
  183.                                             crevecontbid: { value: "3r3r3r3" },
  184.                                             crowno: { value: '2018-2-10' },
  185.                                             cpobid: { value: '北京市海淀区第一仓库' },
  186.                                             "cpobid.vname": { value: '张三' },
  187.                                             fconfirmpoint: { value: '0' },
  188.                                             npobnum: { value: 65 },
  189.                                             cunitid: { value: '北京市用友产业园中区' },
  190.                                             nallotmny: { value: '北京市蓝蓝科技公司' },
  191.                                             nfinishnum: { value: '自由' },
  192.                                             nfinishmny: { value: '自由' },
  193.                                             cmaterialvid: { value: '自由' },
  194.                                             ts: { value: '44' },
  195.                                             vrownote: { value: '自由' },
  196.                                         }
  197.                                     }
  198.                                 ]
  199.                             }
  201.                         }
  202.                     },
  204.                 ]
  206.             }
  208.            this.props.transferTable.setTransferTableValue(this.headTableId,'revecont_b', transferData.data,"crevecontid",'crevecontbid');
  209.            this.setState({
  210.                tableData: transferData.data
  211.            })
  212.         }, 100)
  214.     }
  216.     // react：界面渲染函数
  217.     render() {
  218.         const { transferTable, form, button, search, editTable } = this.props;
  219.         const { NCCreateSearch } = search;
  220.         const { createForm } = form;
  221.         const { createButton } = button;
  222.         const { createEditTable } = editTable;
  223.         const { createTransferTable, createTransferList } = transferTable;
  224.         let selectedShow = transferTable.getSelectedListDisplay(this.headTableId);
  225.         this.setTransferListValue = setTransferListValue;
  226.         this.initTransferTemplate = initTransferTemplate;
  227.         this.initTransferListTemplate = initTransferListTemplate;
  229.         return (
  230.             <div className="nc-bill-list" id="transferDemo">
  231.             {
  232.                 !selectedShow ?
  233.                     <div>
  234.                         <div className='nc-bill-header-area'>
  235.                         <div className='header-title-search-area'>
  236.                             <h2 className='title-search-detail'>选择订单/入库单</h2>
  237.                         </div>
  238.                         </div>
  239.                         <div className='nc-bill-search-area'>
  240.                         <a href="javascript:;" style={{float: 'right'}} onClick={() => {
  241.                             if (!this.props.meta.getMeta()['reva_revecont_main']) {
  242.                                 initTemplateFull(this.props); //加载主子拉平模板
  243.                             }
  244.                             this.props.transferTable.changeViewType(this.headTableId);
  245.                         }}>切换</a> 
  246.                         {NCCreateSearch(
  247.                             'reve_search',//模块id
  248.                         )}
  249.                         </div>
  250.                     </div>
  251.                 : ''
  252.             }
  254.                 <div className='nc-bill-transferTable-area'>
  255.                     { createTransferTable(
  256.                         {
  257.                             searchAreaCode: 'search30', // 用于缓存查询条件
  258.                             tableType: 'full',//选填 表格默认显示的类型 full:主子拉平 nest:主子表 
  259.                             headTableId: this.headTableId,//表格组件id
  260.                             bodyTableId: 'revecont_b',//子表模板id
  261.                             fullTableId: 'reva_revecont_main',//主子拉平模板id
  262.                             transferBtnText: '生成采购单', //转单按钮显示文字
  263.                             containerSelector: '#transferDemo', //容器的选择器 必须唯一,用于设置底部已选区域宽度                        
  264.                             showChangeViewBtn:true,//控制已选列表页面 切换主子表/拉平表 切换按钮的显示 Boolean，默认是true显示，需要隐藏未false
  265.                             selectArea: () => {//已选列表自定义区域
  266.                                 return <span>
  267.                                     <span>本次开票数量：5000.00</span> 
  268.                                     <span>本次开票金额：58500.00</span> 
  269.                                     <NCButton>一键制单</NCButton>
  270.                                     <NCButton>单据对冲</NCButton>
  271.                                 </span> 
  272.                             },
  273.                             onExpandedChange:(pks)=>{
  274.                                 //pks Array类型 是当前转单展开的所有主表的pk
  275.                             },
  276.                             onTransferBtnClick: (ids) => { //点击转单按钮钩子函数
  277.                                 console.log(ids)
  278.                                 hashHistory.push({
  279.                                     pathname: '/transferList?type=transfer'
  280.                                 })
  282.                             },
  283.                             onChangeViewClick: () => { //点击切换视图钩子函数
  284.                                 if (!this.props.meta.getMeta()['reva_revecont_main']) {
  285.                                     initTemplateFull(this.props); //加载主子拉平模板
  286.                                 }
  287.                                 this.props.transferTable.changeViewType(this.headTableId);
  288.                             },
  289.                             onCheckedChange: (flag, record, index, bodys) => { //勾选的回调函数
  290.                                 console.log('勾选', flag, record, index)
  291.                                 bodys && console.log('子表', bodys)
  292.                             },
  293.                             onClearAll: () => {
  294.                                 console.log('清空啦')
  295.                             }
  296.                         }
  297.                     )}
  298.                 </div>
  300.             </div>
  301.         );
  302.     }
  303. }
  305. export default createPage({
  306.     initTemplate: initTemplate
  307. })(TransferTable);
参数 参数说明 使用说明
customAreaOfSelectedHead 单转单已选列表右上角自定义区域 customAreaOfSelectedHead : () => {return test}
maxHeight 传入此参数进行设置转单表格最大高度，由此调整表格滚动条的位置 maxHeight : 500
方法名 参数 说明
createTransferTable({
searchAreaCode,
headTableId,
bodyTableId,
fullTableId,
transferBtnText,
onTransferBtnClick,
containerSelector,
onChangeViewClick,
tableType,
selectArea
showMasterIndex
showChildIndex
showChangeViewBtn,
})		 searchAreaCode: 如果在页面跳转的时候需要缓存查询区的查询条件，传此参数，
tableType:表格默认显示的类型，可不填，不填默认为主子表模式 full:主子拉平 nest:主子表 simple:单表
headTableId:表格主表组件id
bodyTableId:表格子表模板id
fullTableId:主子拉平模板id
transferBtnText:转单按钮显示文字
onTransferBtnClick:点击转单按钮钩子函数
containerSelector:容器的选择器 必须唯一,用于设置底部已选区域宽度
onChangeViewClick:点击切换视图钩子函数
selectArea:已选列表底部自定义区域
showMasterIndex:是否显示主表序号
showChildIndex:是否显示子表序号
showChangeViewBtn:true,//控制已选列表页面 切换主子表/拉平表 切换按钮的显示 Boolean，默认是true显示，需要隐藏未false		 创建单来源转单
setTransferTableValue(id, childCode, newData, rowId, childId) id:主表id
childCode:子表id
newData:放入表格的数据
rowId:主表主键字段，如果是全部多来源转单需要传数组，其他页签主表主键放到数组中
childId:子表主键字段，如果是全部多来源转单需要传数组，其他页签子表主键放到数组中

| 设置转单表格数据
单来源：this.props.transferTable.setTransferTableValue(“reva_revecont”,’revecont_b’, transferData.data,”crevecontid”,’crevecontbid’)
单来源单表的子表id和子表主键需要传空字符串：this.props.transferTable.setTransferTableValue(this.headTableId, ‘’, simpleData.data.reva_revecont,”crevecontid”,’’);
多来源（后两个参数需要将其他页签的主/子表主键字段放到数组中传进来）：this.props.transferTable.setTransferTableValue(META.allHeadTableId, ‘revecont_b_all’, listTableAll.data, [‘crevecontid’,’pk1’], [‘crevecontbid’,’pk2’]) | | getTransferTableValue(headTableId) | 当前页签的headTableId | 获取当前页签转单所有数据 | | getTransferTableSelectedValue() | | 获取表格所有勾选数据 | | getSelectedListDisplay() | | 获取已选列表显示状态 | | changeViewType() | | 切换视图 | | setMultiSelectedValue(headId, bodyId, data, rowId, childId) | headId:主表id
bodyId:子表id
data:要设置的数据
rowId:各页签主表主键字段数组
childId:各页签子表主键字段数组 | 设置全部多来源转单已选列表的数据
this.props.transferTable.setMultiSelectedValue(META.allHeadTableId, ‘revecont_b_all’, listTableAll.data, [‘crevecontid’, ‘crevecontid1’], [‘crevecontbid’, ‘crevecontbid2’]); | | onCheckedChange(flag,record,index,bodys) | flag:勾选状态
record:该条勾选的数据
index:勾选的index
bodys:勾选主表的子表数据，如果勾选的不是主表，该参数没有值 | 勾选的钩子函数 | | onClearAll() | | 已选列表清空的钩子函数 | | onSelectedItemRemove(headData, bodyData) | headData移除的表头数据， 移除的表体数据 | 已选列表移除回调函数在回调函数中可进行合计的处理 |