主子表开发指南

该指南作为平台的文档的完善补充，欢迎大家指正。

1.环境搭建

1.1前端工程

按照平台完成前期工作，之后需要到http://20.12.4.52:7070/gerrit/#/admin/projects/下载UAP_FRONT和UAPBD_FRONT两个工程，分支选择develop_ncc1.0。下载后将代码拷到脚手架的src目录下。

之后修改脚手架中的config.json，需要配置uap和uapbd中refer和自己的业务代码。可以有选择的添加，也可以通过uapbd///*/index.js将所有源码都进行编译，只是编译速度上有区别。

再有就是注意src目录下有一个platform文件夹，该文件夹下为平台所有控件的编译后js。建议大家按照平台文档中描述的方法及时进行更新，以防版本过久导致引发一些莫名其妙的错误。如果遇到一些诡异问题，建议大家更新一下platform。

1.2 后端搭建

后端工程不需要像平台文档中要求的下载那么多工程，经过分析只要引入两个工程Platform和ria_mm即可。ria_mm依赖platform，自己的后端工程同时依赖ria_mm和platform。

Server的启动参数，平台提供的pdf中参数里的逗号是半角的，下面是直接ctrl-v版本。

-Dnc.exclude.modules=${FIELD_EX_MODULES} -Dnc.runMode=develop -Dnc.server.location=${FIELD_NC_HOME} -DEJBConfigDir=${FIELD_NC_HOME}/ejbXMLs -DExtServiceConfigDir=${FIELD_NC_HOME}/ejbXMLs -Duap.hotwebs=nccloud,iuapmdm_fr -Duap.disable.codescan=false -Djavax.xml.parsers.DocumentBuilderFactory=org.apache.xerces.jaxp.DocumentBuilderFactoryImpl -Djavax.xml.parsers.SAXParserFactory=org.apache.xerces.jaxp.SAXParserFactoryImpl -Xms256M -Xmx1024M -XX:NewSize=96M -XX:MaxPermSize=256M -Dorg.owasp.esapi.resources=${FIELD_NC_HOME}/ierp/bin/esapi -Duap.hotwebs=nccloud,fs

2.调试

目前本地开发的环境应为前端通过npm run dev启动，代理配置到后台eclipse配置好的接口，否则前台打开节点会报找不到代码的错误。
2.1 前台调试
通过工作台进入到节点后，F12 在下图目录出打断点调试。

2.2 后台调试
Just debug.

3.节点注册

整理流程为 应用注册->页面注册->按钮注册->菜单注册->职责（剩余和NC相同）
查询区和审计区同时在页面注册中添加。
轻量化的模板配置易用性较NC有了较大提升，大家可以多尝试一下。

4.前端代码梳理

可以参考基础数据的taxregion税类地区节点。下文主要依托于该节点，介绍代码加载的顺序。

4.1 list界面

4.1.1 constructor

可以定义一些全局变量，例如组织、集团、模板区域id等内容。

4.1.2 render

定义整体界面的布局，类似UAP中的xml作用。

render() {
        let { table, button, search, base, modal } = this.props;
        let buttons = this.props.button.getButtons();
        buttons = buttons.sort((a, b) => {
            return b.btnorder - a.btnorder;
        });
        let { createSimpleTable } = table;
        let { NCCreateSearch } = search;
        let { createModal } = modal
        let { createButtonApp, getButtons } = button;
        return (<div className="nc-bill-list">
            <div className='nc-bill-header-area'>
                <div className='header-title-search-area'>
                    <h2 className='title-search-detail'>{this.state.json ? this.state.json['110140PST0022']/*多语号*/ : '110140PST0022'/* 国际化处理： 税收地区*/}</h2></div>
                  <div className="search-box" style={{ position: 'relative' }}>
                    {(this.state.pk_org && this.state.pk_org.refpk)
                        ? '' : <span style={{ color: 'red', position: 'absolute', left: 3, top: 8, zIndex: 1 }}>*</span>}
                    /** 如果节点需要先选择组织后进行后续操作，可以再title后加入业务单元(或其他类型参照)
            * onChange事件中绑定全局的业务单元，作为后续查询使用；同时也可以做一些查询等处理逻辑，看节点要求
            **/
                    {ProducePlanGridRef({
                        onChange: this.onUnitChange.bind(this),
                        value: this.state.pk_org,
                        isDataPowerEnable: false
                    })}
                </div>
                <div className="header-button-area">
                    {createButtonApp({
                        area: 'list-area',//在模板中定义的按钮区域
                        buttonLimit: 3,
                        onButtonClick: this.buttonClick.bind(this),//按钮点击事件，根据id不同进行不同逻辑处理
                        popContainer: document.querySelector('.header-button-area')
                    })}
                </div>
            </div>
            <div className="nc-bill-search-area">
                {NCCreateSearch(this.searchId, {
                    clickSearchBtn: this.clickSearchBtn.bind(this)
                })}
            </div>
            <div className="nc-bill-table-area">
                {createSimpleTable(this.tableId, {
                    //handlePageInfoChange: this.pageInfoClick,
                    dataSource: dataSource,
                    pkname: pk_item,
                    tableModelConfirm: this.tableModelConfirm,
                    showIndex: false,
                    onRowClick: this.onRowClick.bind(this),//可以在此处操作按钮的可用性
                    onRowDoubleClick: this.doubleClick.bind(this)//双击进入卡片等操作
                })}
            </div>
        </div>
        );
    }

4.1.3 componentDidMount

主要作用是加载多语、模板、按钮控制等。为了保证后续的模板、提示等内容能够加载到多语，所以模板的初始化等操作都放到了多语加载成功的回调事件里。
多语参数：moduleid—文件名,domainName—模块名,callback回调函数
多语文件在src/模块/public/lang/standard/simpchn/目录下，为json格式，务必保证编辑后用vscode的格式化format一下，防止有时加载报错。可以参考uap和uapbd模块下的多语书写方式。（后续我会写一个properties文件转换为json的工具，敬请期待。）

componentDidMount() {
        // let searchVal = this.props.search.getAllSearchData(this.searchId);
        // this.getData(searchVal, this.state.isShowOff); //平台考虑效率，打开节点不直接加载数据
        //console.log('component did mount ')
        //应产品要求：列表态头部修改按钮不显示
        //this.props.button.setButtonVisible(['Disable','Enable','Edit'],false)
        let callback = (json, status, inlt) => {
            if (status) {
                this.setState({ json, inlt }, () => {
                    this.initTemplate(this.props)
                })       // 保存json和inlt到页面state中并刷新页面
            }
        }
        this.props.MultiInit.getMultiLang({ moduleId: '10140PSG', domainName: 'uapbd', callback })
        //let disabledButton = {
        //    Enable: true,
        //    Disable: true
        //}
        // let allData = this.props.table.getAllTableData(this.tableId)
        // if(allData.rows.length == 0) {
        //     disabledButton.Print = true
        //     disabledButton.Output = true
        // }
        // this.props.button.setButtonDisabled(disabledButton)
    }

4.1.4 initTemplate

initTemplate = (props) => {
        let _this = this;
        let result = props.createUIDom(
            {
                pagecode: pageId//页面id
            },
            (data) => {
                if (data) {
                    if (data.template) {
                        let meta = data.template;
                        meta = this.modifierMeta(props, meta)//
                        props.meta.setMeta(meta);
                        let searchVal = cacheTools.get('searchParams')
                        let queryInfo = props.search.getQueryInfo('psgquery')
                        let OID = queryInfo.oid
                        //此处应该有查询模板的缓存，待研究
                    }
                    if (data.button) {
                        let button = data.button;
                        props.button.setButtons(button);
                    }
                }
            }
        )
    }