react主表一条记录对应子表多条记录，为子表增加主表的字段

实现思路

平台：用友iuap
项目：2019-9阳春能源项目
代码目录：energy-analysis-page/base-data-report-config/

实现核心

        /**
         * getSelect：通过主表id查询子表数据
         * @param {*} param
         * @param {*} getState
         */
        async loadBaseDataReportConfigSubList(param, getState) {
            let {queryBaseDataReportConfigSubParam} = getState().masterDetailOneBaseDataReportConfig;
            let { pData } = param;
            param = {...queryBaseDataReportConfigSubParam,...param};
            actions.masterDetailOneBaseDataReportConfig.updateState({ queryBaseDataReportConfigSubParam: param });

            actions.masterDetailOneBaseDataReportConfig.updateState({ showBaseDataReportConfigSubLoading: true });
            const { result } = processData(await commonApi.getBaseDataReportConfigSub(param));  // 调用 getList 请求数据
            actions.masterDetailOneBaseDataReportConfig.updateState({ showBaseDataReportConfigSubLoading: false });
            const { data: res } = result;
            for(let i = 0;i<res.content.length;i++){
                res.content[i].reportname = pData;
            }
            if (res) {
                const BaseDataReportConfigSubObj = structureObj(res, param);
                actions.masterDetailOneBaseDataReportConfig.updateState({ BaseDataReportConfigSubObj }); // 更新 子表
            } else {
                // 如果请求出错,数据初始化
                const { BaseDataReportConfigSubObj } = getState().masterDetailOneBaseDataReportConfig;
                actions.masterDetailOneBaseDataReportConfig.updateState({ BaseDataReportConfigSubObj: initStateObj(BaseDataReportConfigSubObj) });
            }
        },

子表调用函数中增加一个传入值，也就是想要在子表显示的主表字段，子表取出时所有条目是数组，每个条目是对象形式，使用for循环，为数组中的对象增加一个属性，属性值等于传入的值(主表字段)

            for(let i = 0;i<res.content.length;i++){
                res.content[i].reportname = pData;
            }

主页面实现思路

主页面是主子表联动，当选定的主表条目更变时，查询对应的子表。
因此，实现分三种情况，
1、页面刚加载还没有选定条目时
刚加载时调用的loadPage方法,loadPage又调用loadList

componentDidMount() {
        this.loadPage({
            pageParams: {
                pageIndex: 0,
                pageSize: 5,
            },
            sortMap: [],
            whereParams: [],
        });
    }
loadPage = (param = {}) => {
	...//代码省略
	actions.masterDetailOneBaseDataReportConfig.loadList({ ...queryParam, ...param });
	}
//loadList在model.js中
async loadList(param, getState) {
            actions.masterDetailOneBaseDataReportConfig.updateState({ showLoading: true });   // 正在加载数据，显示加载 Loading 图标
            let { result } = processData(await api.getBaseDataReportConfig(param));  // 调用 getList 请求数据
            let { data: res } = result;
            // 默认选中第一条
            actions.masterDetailOneBaseDataReportConfig.updateState({ showLoading: false, selectIndex: 0, queryParam: param });
            let { content = [] } = res || {};

            if (content.length > 0) { // 获取子表数据
                let BaseDataReportConfigObj = structureObj(res, param);
                actions.masterDetailOneBaseDataReportConfig.updateState({ BaseDataReportConfigObj }); // 更新主表数据
                let { id: search_reportid } = content[0];
                let { masterDetailOneBaseDataReportConfig } = getState();
                let BaseDataReportConfigSubParamObj = { pData:BaseDataReportConfigObj.list[0].reportname,pageSize: masterDetailOneBaseDataReportConfig.BaseDataReportConfigSubObj.pageSize, pageIndex: 0, search_reportid };
                actions.masterDetailOneBaseDataReportConfig.loadBaseDataReportConfigSubList(BaseDataReportConfigSubParamObj);
            } else {
                // 如果请求出错,数据初始化
                const { 
                    BaseDataReportConfigObj, 
                    BaseDataReportConfigSubObj,
                } = getState().masterDetailOneBaseDataReportConfig;
                actions.masterDetailOneBaseDataReportConfig.updateState({
                        BaseDataReportConfigObj: initStateObj(BaseDataReportConfigObj),
                        BaseDataReportConfigSubObj: initStateObj(BaseDataReportConfigSubObj),
                    }
                );
            }
        },

loadList中先调用了getBaseDataReportConfig(param)方法，且将值赋值给了BaseDataReportConfigObj，因此可以直接将BaseDataReportConfigObj中的字段增加到调用子表的参数中。这时，加载页面默认显示第一条主表数据，因此子表也默认显示第一条主表对应的子表数据。

2、选定一个条目时

 <Grid
                    ref={(el) => this.grid = el}
                    data={BaseDataReportConfigObj.list}
                    rowKey={(r, i) => i}
                    columns={this.BaseDataReportConfigColumn()}
                    multiSelect={false}
                    dragborder={true}
                    showHeaderMenu={false}  //是否显示锁定解锁
                    showFilterMenu={false} //是否显示行过滤菜单
                    onRowClick={(record, index) => {
                        // 获取子表数据
                        actions.masterDetailOneBaseDataReportConfig.updateState({ selectIndex: index }); // 更新默认主表行 数据
                        const { list } = BaseDataReportConfigObj;
                        const { id: search_reportid } = list[index];
                        const BaseDataReportConfigSubParam = { pData : BaseDataReportConfigObj.list[index].reportname ,search_reportid, pageSize: BaseDataReportConfigSubObj.pageSize, pageIndex: 0 };
                        actions.masterDetailOneBaseDataReportConfig.loadBaseDataReportConfigSubList(BaseDataReportConfigSubParam);
                    }}
                    rowClassName={(record, index, indent) => {
                        return selectIndex === index ? "selected" : "";
                    }}
                    paginationObj={{
                        ...this.getBasicPage(BaseDataReportConfigObj),
                        freshData: pageSize => _this.freshData(pageSize, "BaseDataReportConfigObj"),
                        onDataNumSelect: (index, value) => _this.onDataNumSelect(index, value, "BaseDataReportConfigObj"),
                        dataNum: _this.getDataNum(BaseDataReportConfigObj.pageSize),
                    }} 
                />

选定一个条目时是在主表的Grid组件中绑定了一个OnRowClick函数，点击时函数会传入当前的index值，将这个index对应的主表对象中的显示字段取出，在调用子表的函数中传入到参数中即可。

3、点击分页时。

    onPageSelect = (value, type, tableName) => {
        let queryParam = deepClone(this.props.queryParam); // 深拷贝查询条件从action里
        let modalObj = this.props[tableName];
        let { pageIndex, pageSize } = getPageParam(value, type, modalObj);

        if (tableName === "BaseDataReportConfigObj") { //主表分页
            queryParam.pageParams.pageSize = pageSize;
            queryParam.pageParams.pageIndex = pageIndex;
            actions.masterDetailOneBaseDataReportConfig.updateState({ queryParam });
            actions.masterDetailOneBaseDataReportConfig.loadList(queryParam);
        }
        if (tableName === "BaseDataReportConfigSubObj") { //detail 表分页
            let { selectIndex, BaseDataReportConfigObj } = this.props;
            // console.log(selectIndex);
            let { id: search_reportid } = BaseDataReportConfigObj.list[selectIndex];
            const pData = BaseDataReportConfigObj.list[selectIndex].reportname;//MYX增加主表信息
            // console.log(pData);
            let temp = { pData : pData,search_reportid, pageSize, pageIndex };
            actions.masterDetailOneBaseDataReportConfig.loadBaseDataReportConfigSubList(temp);
        }
    }

点击分页时调用的是OnPageSelect函数，子表分页中使用selectIndex绑定了选中的主表信息，因此只要将selectIndex对应的主表对象的值传入子表调用参数中即可。

新增修改页实现思路

核心

        /**
         * getSelect：通过id查询子表数据 紧急联系人
         * @param {*} param
         * @param {*} getState
         */
        async loadBaseDataReportConfigSubList(param, getState) {
            let {pData} = param;
            let {queryBaseDataReportConfigSubParam} = getState().masterDetailMainBaseDataReportConfig;
            param = {...queryBaseDataReportConfigSubParam,...param};
            actions.masterDetailMainBaseDataReportConfig.updateState({ queryBaseDataReportConfigSubParam: param });

            actions.masterDetailMainBaseDataReportConfig.updateState({ showDetailLoading: true });
            const { result } = processData(await commonApi.getBaseDataReportConfigSub(param));  // 调用 getList 请求数据
            actions.masterDetailMainBaseDataReportConfig.updateState({ showDetailLoading: false });
            const { data: res } = result;
            for(let i = 0 ;i<res.content.length;i++){
                res.content[i].reportname = pData;
            }
            // console.log(res);
            if (res) {
                const queryBaseDataReportConfigSubObj = structureObj(res, param);
                actions.masterDetailMainBaseDataReportConfig.updateState({ queryBaseDataReportConfigSubObj }); // 更新 子表
            } else {
                // 如果请求出错,数据初始化
                const { queryBaseDataReportConfigSubObj } = getState().masterDetailMainBaseDataReportConfig;
                actions.masterDetailMainBaseDataReportConfig.updateState({ queryBaseDataReportConfigSubObj: initStateObj(queryBaseDataReportConfigSubObj) });
            }
        },

子表调用函数中增加一个传入值，也就是想要在子表显示的主表字段，子表取出时所有条目是数组，每个条目是对象形式，使用for循环，为数组中的对象增加一个属性，属性值等于传入的值(主表字段)

1、初加载时

async getQueryParent(param, getState) {
            actions.masterDetailMainBaseDataReportConfig.updateState({ showLoading: true });   // 正在加载数据，显示加载 Loading 图标
            let { result } = processData(await listApi.getBaseDataReportConfig(param));  // 调用 getList 请求数据
            actions.masterDetailMainBaseDataReportConfig.updateState({ showLoading: false });
            let { data: res, status } = result;
            let { content = [] } = res || {};
            let queryParent = content[0] ? content[0] : {};
            actions.masterDetailMainBaseDataReportConfig.updateState({ queryParent });
            if (content.length > 0) { // 获取子表数据
                let { value } = param.whereParams[0];
                let paramObj = { pData:res.content[0].reportname,pageSize: 10, pageIndex: 0, search_reportid: value};
                actions.masterDetailMainBaseDataReportConfig.loadBaseDataReportConfigSubList(paramObj);
            } else {
                // 如果请求出错,数据初始化
                let { queryDetailObj } = getState().masterDetailMainBaseDataReportConfig;
                actions.masterDetailMainBaseDataReportConfig.updateState({
                    queryDetailObj: initStateObj(queryDetailObj),
                    showModalCover: true,
                });
            }
        },

初加载时主表子表一起加载，可以直接将主表的内容赋值给子表参数。

2、分页时

/**
     *
     * @param {Number} value pageIndex 或者 pageSize
     * @param {Number} type type 为0标识为 pageIndex,为1标识 pageSize
     */
    onPageSelect = (value, type) => {
        const { queryParent } = this.props;
        const { id: search_reportid } = queryParent;
        let tabKey = this.tabKey;
        let pData = this.props.queryBaseDataReportConfigSubParam.pData;
        const { pageIndex, pageSize } = getPageParam(value, type, this.props[`query${tabKey}Obj`]);
        const temp = { pData:pData, search_reportid, pageSize, pageIndex };
        actions.masterDetailMainBaseDataReportConfig[`load${tabKey}List`](temp);
    }

分页时使用props中的queryBaseDataReportConfigSubParam，其中存储了pData的信息，可以直接赋值给子表调用参数。

问题：
1、queryBaseDataReportConfigSubParam是哪来的？
2、所有的action调用是怎么将值赋给对应的对象的？