参考代码：\src\uapbd\customer\custclass\main\index.js
    1、项目目录
    image.png
    2、创建多语文件，.json格式
    image.png
    以下操作针对main文件夹下的index.js文件
    3、渲染
    1）定义全局config，formId是页面模板注册中区域编码，pageCode是添加页面时设置的页面编码
    image.png
    2）树卡结构没有list和card文件，渲染时在不需要导出组件，直接在组件最后render即可
    image.png
    4、页面头部结构

    1. <div className="header">
    2.                     {/* 标题 title*/}
    3.                     <div className="title">{this.config.title}</div>
    4.                     {/*组织选择区域*/}
    5.                     <div className="search-box" style={{ width: 200 }}>
    6.                         <OrgSelect
    7.                             config={orgParam}
    8.                             ref={(OrgSelect) => {
    9.                                 this.OrgSelect = OrgSelect;
    10.                             }}
    11.                         />
    12.                     </div>
    13.                     {/* 显示停用 */}
    14.                     <span className="showOff">
    15.                         <NCCheckbox
    16.                             disabled={this.state.disabledShowOff}
    17.                             defaultChecked={false}
    18.                             checked={this.state.checked}
    19.                             onChange={this.onCheckBoxChange.bind(this)}
    20.                             size="lg"
    21.                         >
    22.                             {this.state.json['10140WKC-000028'] /* 国际化处理： 显示停用 启用2，停用3*/}
    23.                         </NCCheckbox>
    24.                     </span>
    25.                     {/* 按钮组 btn-group*/}
    26.                     <div className="btn-group">
    27.                         {createButtonApp({
    28.                             area: this.config.formId,
    29.                             buttonLimit: 3,
    30.                             onButtonClick: this.onButtonClick.bind(this),
    31.                             popContainer: document.querySelector('.' + this.config.formId)
    32.                         })}
    33.                     </div>
    34.                 </div>

    5、树卡结构

    1. <div className="tree-card">
    2.                     <DragWidthCom
    3.                         // 左树区域
    4.                         leftDom={
    5.                             <WkClassTree
    6.                                 treeConfig={custTreeParam}
    7.                                 syncTree={this.props.syncTree}
    8.                                 ref={(NCCHRTree) => (this.NCCHRTree = NCCHRTree)}
    9.                             />
    10.                         }
    11.                         // 右卡片区域
    12.                         rightDom={
    13.                             <div className="card-area">
    14.                                 {createForm(this.config.formId, {
    15.                                     onAfterEvent: this.onAfterFormEvent.bind(this),
    16.                                     onBeforeEvent: this.onBeforeFormEvent,
    17.                                     cancelPSwitch: true
    18.                                 })}
    19.                             </div>
    20.                         }
    21.                         // 默认左侧区域宽度，px/百分百
    22.                         defLeftWid="20%"
    23.                     />
    24.                 </div>

    6、页面初始化：在构造函数constructor里首先加载多语文件，多语文件加载成功的回调里初始化界面
    image.png

    1. initTemplate = (props, callback) => {
    2.     /**
    3.      * 页面初始设置button状态
    4.      * @param props
    5.      */
    6.     const initButtonStatus = (props) => {
    7.         //设置保存按钮不显示
    8.         props.button.setButtonVisible('save', false);
    9.         //设置取消按钮不显示
    10.         props.button.setButtonVisible('cancel', false);
    11.         //设置保存新增按钮不显示
    12.         props.button.setButtonVisible('saveadd', false);
    13.     };
    14.     props.createUIDom({ pagecode: props.config.pageCode }, (data) => {
    15.         //页面模板
    16.         if (data.template) {
    17.             props.meta.setMeta(data.template);
    18.         }
    19.         //按钮
    20.         if (data.button) {
    21.             props.button.setButtons(data.button);
    22.             //初始按钮状态
    23.             initButtonStatus(props);
    24.         }
    25.     });
    26. };

    7、加载树：切换组织加载相应的树

    1. onOrgChange(value) {
    2.         //选择行政组织钩子
    3.         this.state.curOrg = value;
    4.         this.setReferMeta.call(this);
    5.         this.state.disabledShowOff = !value || value == '' || !value.hasOwnProperty('refpk');
    6.         this.setState(this.state, () => {
    7.             this.loadTreeData();
    8.         });
    9.     }

    8、树新增功能：