ibizdev提交

app_Default/src/App.tsx

 import React, { PureComponent } from 'react';
+import EntityEditView from './pages/module/entity-edit-view/entity-edit-view';
 import ExampleEditorType from './pages/exapmple/example-editor-type/example-editor-type';
 import ExampleEditView from './pages/exapmple/example-edit-view/example-edit-view';
+import Entity3EditView from './pages/module3/entity3-edit-view/entity3-edit-view';
+import Entity4EditView from './pages/module4/entity4-edit-view/entity4-edit-view';
+import Entity5EditView from './pages/module5/entity5-edit-view/entity5-edit-view';
 import ExampleDLFEditView from './pages/exapmple/example-dlfedit-view/example-dlfedit-view';
+import Entity2EditView from './pages/module2/entity2-edit-view/entity2-edit-view';
 import './App.less';
 import { Layout, Menu, Breadcrumb, Icon } from 'antd';
 const { Header, Content, Footer, Sider } = Layout;
@@ -20,7 +25,7 @@ export default class App extends PureComponent {
      /**
      * 当前页面
      */
-    public currentPage: string = "ExampleEditorType";
+    public currentPage: string = "EntityEditView";
 
     /**
      * 处理菜单点击
@@ -38,15 +43,30 @@ export default class App extends PureComponent {
      * 获取当前视图
      */
     public getCurPage(): any {
+        if (Object.is(this.currentPage, "EntityEditView")) {
+            return <EntityEditView/>;
+        }
         if (Object.is(this.currentPage, "ExampleEditorType")) {
             return <ExampleEditorType/>;
         }
         if (Object.is(this.currentPage, "ExampleEditView")) {
             return <ExampleEditView/>;
         }
+        if (Object.is(this.currentPage, "Entity3EditView")) {
+            return <Entity3EditView/>;
+        }
+        if (Object.is(this.currentPage, "Entity4EditView")) {
+            return <Entity4EditView/>;
+        }
+        if (Object.is(this.currentPage, "Entity5EditView")) {
+            return <Entity5EditView/>;
+        }
         if (Object.is(this.currentPage, "ExampleDLFEditView")) {
             return <ExampleDLFEditView/>;
         }
+        if (Object.is(this.currentPage, "Entity2EditView")) {
+            return <Entity2EditView/>;
+        }
     }
 
     /**
@@ -70,20 +90,40 @@ export default class App extends PureComponent {
         return <div className="App">
             <Layout id="components-layout-demo-custom-trigger">
                 <Sider trigger={null} collapsible style={{ minHeight: '100vh' }}>
-                    <div className="logo"><img src="https://cdn.ibizlab.cn/super-form/logo.png" /></div>
-                    <Menu theme="dark" mode="inline" defaultSelectedKeys={['"ExampleEditorType""ExampleEditView""ExampleDLFEditView"']} onClick={({ item, key, keyPath, domEvent }) => { this.handleMenuClick(item, key, keyPath, domEvent) }}>
-                        <Menu.Item key="ExampleEditorType">
+                    <div className="logo"><img src="assets/images/logo.png" /></div>
+                    <Menu theme="dark" mode="inline" defaultSelectedKeys={['"EntityEditView""ExampleEditorType""ExampleEditView""Entity3EditView""Entity4EditView""Entity5EditView""ExampleDLFEditView""Entity2EditView"']} onClick={({ item, key, keyPath, domEvent }) => { this.handleMenuClick(item, key, keyPath, domEvent) }}>
+                        <Menu.Item key="EntityEditView">
                             <Icon type="user" />
+                            <span>实体编辑视图</span>
+                        </Menu.Item>
+                        <Menu.Item key="ExampleEditorType">
+                            <Icon type="video-camera" />
                             <span>基础编辑器</span>
                         </Menu.Item>
                         <Menu.Item key="ExampleEditView">
-                            <Icon type="video-camera" />
+                            <Icon type="upload" />
                             <span>基础表单项</span>
                         </Menu.Item>
-                        <Menu.Item key="ExampleDLFEditView">
+                        <Menu.Item key="Entity3EditView">
+                            <Icon type="user" />
+                            <span>实体3编辑视图</span>
+                        </Menu.Item>
+                        <Menu.Item key="Entity4EditView">
+                            <Icon type="video-camera" />
+                            <span>实体4编辑视图</span>
+                        </Menu.Item>
+                        <Menu.Item key="Entity5EditView">
                             <Icon type="upload" />
+                            <span>实体5编辑视图</span>
+                        </Menu.Item>
+                        <Menu.Item key="ExampleDLFEditView">
+                            <Icon type="user" />
                             <span>表单项动态逻辑示例</span>
                         </Menu.Item>
+                        <Menu.Item key="Entity2EditView">
+                            <Icon type="video-camera" />
+                            <span>实体2编辑视图</span>
+                        </Menu.Item>
                     </Menu>
                 </Sider>
                 <Layout>

app_Default/src/forms/entity/main/main.less

+// this is less
+.app-form-item {
+    display: flex;
+    justify-content: space-between;
+    padding-right: 16px;
+    margin-bottom: 6px;
+
+    .app-form-item-label {
+        text-align: right;
+        height: 32px;
+        line-height: 32px;
+        padding-right: 16px;
+
+        .isrequired {
+            display: inline-block;
+            margin-right: 4px;
+            font-family: SimSun;
+            line-height: 1;
+            font-size: 14px;
+            color: #f5222d;
+        }
+    }
+
+    .app-form-item-container {
+        .ant-form-item {
+            width: 100%;
+
+            .ant-form-item-control-wrapper {
+                width: 100%;
+                height: auto;
+                min-height: 59px;
+            }
+        }
+    }
+}
+
+.app-form-item-left {
+    flex-direction: row;
+}
+
+.app-form-item-right {
+    flex-direction: row-reverse;
+}
+
+.app-form-item-top {
+    flex-direction: column;
+}
+
+.app-form-item-bottom {
+    flex-direction: column-reverse;
+}
+
+.ant-form-inline .ant-form-item-with-help {
+    margin-bottom: 0px !important;
+}

app_Default/src/forms/entity/main/main.tsx

+import React, { PureComponent } from 'react';
+import { Form, Input, Row, Col, Tabs, Icon, Collapse, Button, Select, message } from 'antd';
+import Schema from "async-validator";
+import { FormButtonModel, FormPageModel, FormItemModel, FormDRUIPartModel, FormPartModel, FormGroupPanelModel, FormIFrameModel, FormRowItemModel, FormTabPageModel, FormTabPanelModel, FormUserControlModel } from '../../../ibizsys/form-detail';
+import { Util } from '../../../ibizsys/utils/util';
+
+import AppDropDownList  from '../../../ibizsys/components/app-dropdown-list/app-dropdown-list';
+import AppRadioGroup from '../../../ibizsys/components/app-radio-group/app-radio-group';
+import AppCheckBox from '../../../ibizsys/components/app-checkbox/app-checkbox';
+import AppCheckBoxGroup from '../../../ibizsys/components/app-checkbox-group/app-checkbox-group';
+import AppDatePicker from '../../../ibizsys/components/app-date-picker/app-date-picker';
+import AppTimePicker from '../../../ibizsys/components/app-time-picker/app-time-picker';
+import AppImageUpload from '../../../ibizsys/components/app-image-upload/app-image-upload';
+import AppFileUpload from '../../../ibizsys/components/app-file-upload/app-file-upload';
+import AppRichTextEditor from '../../../ibizsys/components/app-rich-text-editor/app-rich-text-editor';
+
+import './main.less';
+const { TabPane } = Tabs;
+const { Panel } = Collapse;
+const { Option } = Select;
+const { TextArea  } = Input;
+
+/**
+ * 表单属性
+ *
+ * @export
+ * @interface MainFormData
+ */
+export class MainFormData {
+    /**
+     * 实体名称
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    entityname?: any;
+    /**
+     * 建立人
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    createman?: any;
+    /**
+     * 建立时间
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    createdate?: any;
+    /**
+     * 更新人
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    updateman?: any;
+    /**
+     * 更新时间
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    updatedate?: any;
+    /**
+     * 实体标识
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    entityid?: any;
+}
+
+/**
+ * 输入属性
+ *
+ * @export
+ * @interface MainProps
+ */
+export interface MainProps {
+    /**
+     * 表单数据对象
+     *
+     * @type {MainFormData}
+     * @memberof MainProps
+     */
+    data?: MainFormData;
+    /**
+     * 表单分页切换
+     *
+     * @memberof MainProps
+     */
+    tabChange?: (key: string) => void;
+    /**
+     * 表单项之变化
+     *
+     * @memberof MainProps
+     */
+    formItemChange?:(key:any) => void;
+}
+
+/**
+ * Main
+ *
+ * @export
+ * @class Main
+ * @extends {PureComponent}
+ */
+export default class Main extends PureComponent<MainProps> {
+    /**
+     * 表单数据
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    public data: MainFormData = new MainFormData();
+
+    /**
+     * 初始化实例
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    constructor(props) {
+        super(props);
+        if (this.data && this.props.data && !Object.is(JSON.stringify(this.data), JSON.stringify(this.props.data))) {
+            Object.assign(this.data, this.props.data);
+        }
+        this.initForm();
+    }
+    
+    /**
+     * 在组件接收到一个新的 prop (或更新后)时被调用
+     *
+     * @memberof IBizViewController
+     */
+    public componentWillReceiveProps(nextProps: Readonly<MainProps>, nextContext: any) {
+        if (this.data && nextProps.data && !Object.is(JSON.stringify(this.data), JSON.stringify(nextProps.data))) {
+            Object.assign(this.data, nextProps.data);
+        }
+    }
+
+    /**
+     * 在组件从 DOM 中移除的时候立刻被调用
+     *
+     * @memberof IBizViewController
+     */
+    public componentWillUnmount() {
+
+    }
+
+    /**
+     * 属性值规则
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    public rules: any = {
+        entityname: [
+            { type: 'string', message: '实体名称 值必须为字符串类型', trigger: 'change' },
+            { required: false, type: 'string', message: '实体名称 值不能为空', trigger: 'change' },
+            { required: false, type: 'string', message: '实体名称 值不能为空', trigger: 'blur' },
+        ],
+        createman: [
+            { type: 'string', message: '建立人 值必须为字符串类型', trigger: 'change' },
+            { required: false, type: 'string', message: '建立人 值不能为空', trigger: 'change' },
+            { required: false, type: 'string', message: '建立人 值不能为空', trigger: 'blur' },
+        ],
+        createdate: [
+            { type: 'string', message: '建立时间 值必须为字符串类型', trigger: 'change' },
+            { required: false, type: 'string', message: '建立时间 值不能为空', trigger: 'change' },
+            { required: false, type: 'string', message: '建立时间 值不能为空', trigger: 'blur' },
+        ],
+        updateman: [
+            { type: 'string', message: '更新人 值必须为字符串类型', trigger: 'change' },
+            { required: false, type: 'string', message: '更新人 值不能为空', trigger: 'change' },
+            { required: false, type: 'string', message: '更新人 值不能为空', trigger: 'blur' },
+        ],
+        updatedate: [
+            { type: 'string', message: '更新时间 值必须为字符串类型', trigger: 'change' },
+            { required: false, type: 'string', message: '更新时间 值不能为空', trigger: 'change' },
+            { required: false, type: 'string', message: '更新时间 值不能为空', trigger: 'blur' },
+        ],
+    }
+
+    /**
+     * 详情模型集合
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    public detailsModel: any = {
+        entityname: new FormItemModel({ caption: '实体名称', detailType: 'FORMITEM', name: 'entityname', visible: true, isShowCaption: true, form: this, disabled: false,error:"",isEmptyCaption:"false",validateStatus:"",required:false,enableCond: 3 })
+,
+        group1: new FormGroupPanelModel({ caption: '实体基本信息', detailType: 'GROUPPANEL', name: 'group1', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', langbase: '', extractMode: 'ITEM', details: [] } })
+,
+        formpage1: new FormPageModel({ caption: '基本信息', detailType: 'FORMPAGE', name: 'formpage1', visible: true, isShowCaption: true, form: this })
+,
+        createman: new FormItemModel({ caption: '建立人', detailType: 'FORMITEM', name: 'createman', visible: true, isShowCaption: true, form: this, disabled: false,error:"",isEmptyCaption:"false",validateStatus:"",required:false,enableCond: 3 })
+,
+        createdate: new FormItemModel({ caption: '建立时间', detailType: 'FORMITEM', name: 'createdate', visible: true, isShowCaption: true, form: this, disabled: false,error:"",isEmptyCaption:"false",validateStatus:"",required:false,enableCond: 3 })
+,
+        updateman: new FormItemModel({ caption: '更新人', detailType: 'FORMITEM', name: 'updateman', visible: true, isShowCaption: true, form: this, disabled: false,error:"",isEmptyCaption:"false",validateStatus:"",required:false,enableCond: 3 })
+,
+        updatedate: new FormItemModel({ caption: '更新时间', detailType: 'FORMITEM', name: 'updatedate', visible: true, isShowCaption: true, form: this, disabled: false,error:"",isEmptyCaption:"false",validateStatus:"",required:false,enableCond: 3 })
+,
+        group2: new FormGroupPanelModel({ caption: '操作信息', detailType: 'GROUPPANEL', name: 'group2', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', langbase: '', extractMode: 'ITEM', details: [] } })
+,
+        formpage2: new FormPageModel({ caption: '其它', detailType: 'FORMPAGE', name: 'formpage2', visible: true, isShowCaption: true, form: this })
+,
+        form: new FormTabPanelModel({ caption: 'form', detailType: 'TABPANEL', name: 'form', visible: true, isShowCaption: true, form: this, tabPages: [{ name: 'formpage1', index: 0, visible: true }, { name: 'formpage2', index: 1, visible: true }] }),
+    }
+
+    /**
+      * 代码表模型
+      *
+      * @type {*}
+      * @memberof Main
+      */      
+    public codelistModel:any = {
+      }
+
+    /**
+     * 表单逻辑
+     *
+     * @private
+     * @param { name, newVal, oldVal }
+     * @memberof Main
+     */
+    private formLogic(name: string, newVal: any, oldVal?: any): void {
+                
+
+
+
+
+
+
+
+
+
+    }
+
+
+    /**
+     * 表单分页切换
+     *
+     * @param {string} key 分页标识
+     * @memberof Main
+     */
+    public tabChange(key: string): void {
+        if (this.props.tabChange) {
+            this.props.tabChange(key);
+        }
+    }
+
+    /**
+     * 表单值变化事件
+     *
+     * @memberof Main
+     */
+    public formItemChange(item: string, value: any, isFirst?: boolean) {
+        this.data[item] = value;
+        this.formLogic(item, value);
+        if (!isFirst) {
+            this.validateItem(item, value);
+            if (this.props.formItemChange) {
+                this.props.formItemChange({name:item,value:value});
+            }
+        }
+        this.tick();
+    }
+
+    /**
+     * 按钮点击事件
+     *
+     * @memberof Main
+     */
+    public buttonClick($event:any,value:String){
+        message.info('点击了'+value);
+    }
+
+    /**
+     * 初始化表单
+     * 
+     * @memberof Main
+     */
+    public initForm() {
+        if (Object.keys(this.data).length > 0) {
+            Object.keys(this.data).forEach((item) => {
+                this.formItemChange(item, this.data[item], true);
+            })
+        }
+    }
+
+    /**
+     * 校验单个表单项
+     * @param item 
+     * @param value 
+     */
+    public validateItem(item: string, value: any) {
+        // 做校验
+        // 1.获取数值和规则
+        const rule = this.rules[item];
+        // 2.创建校验规则
+        const schema = new Schema({ [item]: rule })
+        // 校验返回Promise
+        return schema.validate({ [item]: value },undefined,errors => {
+            if (errors) {
+                // 有错
+                this.detailsModel[item].setError(errors[0].message);
+            } else {
+                this.detailsModel[item].setError('');
+            }
+        })
+    }
+
+    /**
+     * 校验表单
+     * 
+     * @memberof Main
+     */
+    public validateForm(callback:Function) {
+        let tasks: any;
+        if (Object.keys(this.data).length > 0) {
+            tasks = Object.keys(this.data).map((item) => {
+                this.validateItem(item, this.data[item]);
+            })
+        }
+        Promise.all(tasks)
+            .then(() => callback(true))
+            .catch(() => callback(false))
+    }
+
+    /**
+     * 绘制内容
+     *
+     * @returns
+     * @memberof Main
+     */
+    public render(): any {
+        return <>
+            <div className="ibiz-form main">
+                <Form layout="inline">
+                    <Tabs defaultActiveKey="1" onChange={(key: string) => this.tabChange(key)}>
+                        <TabPane 
+                            tab={
+                                <span className='caption'>
+                                    基本信息
+                                </span>
+                            } 
+                            key="0">
+                                {this.detailsModel.group1.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+            <Collapse defaultActiveKey={['group1']} className=''>
+        <Panel header="实体基本信息" key="group1">
+            <Row>
+                    
+            {this.detailsModel.entityname.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+                    <div className={`app-form-item app-form-item-left`}>
+                {this.detailsModel.entityname.isShowCaption && !this.detailsModel.entityname.isEmptyCaption ?
+                    <div className="app-form-item-label" style={{ width: '130px' }}>
+                        {this.detailsModel.entityname.required ? <span className="isrequired">*</span> : ""}实体名称
+                    </div> : ""}
+                <div className="app-form-item-container" style={{ width: "calc(100% - 130px)" }}>
+                    <Form.Item    key={'entityname'}  validateStatus={this.detailsModel.entityname.validateStatus} help={this.detailsModel.entityname.error}>
+                    <Input id={'entityname'} disabled={this.detailsModel.entityname.disabled} value={this.data.entityname}     onChange={($event) =>{this.formItemChange('entityname',$event.target.value)}}/>
+                    </Form.Item>
+                </div>
+            </div> 
+            
+                </Col>:""}
+            
+                </Row>
+        </Panel>
+    </Collapse>
+        </Col>:""}
+
+                        </TabPane>
+                        <TabPane 
+                            tab={
+                                <span className='caption'>
+                                    其它
+                                </span>
+                            } 
+                            key="1">
+                                {this.detailsModel.group2.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+            <Collapse defaultActiveKey={['group2']} className=''>
+        <Panel header="操作信息" key="group2">
+            <Row>
+                    
+            {this.detailsModel.createman.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+                    <div className={`app-form-item app-form-item-left`}>
+                {this.detailsModel.createman.isShowCaption && !this.detailsModel.createman.isEmptyCaption ?
+                    <div className="app-form-item-label" style={{ width: '130px' }}>
+                        {this.detailsModel.createman.required ? <span className="isrequired">*</span> : ""}建立人
+                    </div> : ""}
+                <div className="app-form-item-container" style={{ width: "calc(100% - 130px)" }}>
+                    <Form.Item    key={'createman'}  validateStatus={this.detailsModel.createman.validateStatus} help={this.detailsModel.createman.error}>
+                    <span>{this.data.createman}</span>
+                    </Form.Item>
+                </div>
+            </div> 
+            
+                </Col>:""}
+                {this.detailsModel.createdate.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+                    <div className={`app-form-item app-form-item-left`}>
+                {this.detailsModel.createdate.isShowCaption && !this.detailsModel.createdate.isEmptyCaption ?
+                    <div className="app-form-item-label" style={{ width: '130px' }}>
+                        {this.detailsModel.createdate.required ? <span className="isrequired">*</span> : ""}建立时间
+                    </div> : ""}
+                <div className="app-form-item-container" style={{ width: "calc(100% - 130px)" }}>
+                    <Form.Item    key={'createdate'}  validateStatus={this.detailsModel.createdate.validateStatus} help={this.detailsModel.createdate.error}>
+                    <span>{this.data.createdate}</span>
+                    </Form.Item>
+                </div>
+            </div> 
+            
+                </Col>:""}
+                {this.detailsModel.updateman.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+                    <div className={`app-form-item app-form-item-left`}>
+                {this.detailsModel.updateman.isShowCaption && !this.detailsModel.updateman.isEmptyCaption ?
+                    <div className="app-form-item-label" style={{ width: '130px' }}>
+                        {this.detailsModel.updateman.required ? <span className="isrequired">*</span> : ""}更新人
+                    </div> : ""}
+                <div className="app-form-item-container" style={{ width: "calc(100% - 130px)" }}>
+                    <Form.Item    key={'updateman'}  validateStatus={this.detailsModel.updateman.validateStatus} help={this.detailsModel.updateman.error}>
+                    <span>{this.data.updateman}</span>
+                    </Form.Item>
+                </div>
+            </div> 
+            
+                </Col>:""}
+                {this.detailsModel.updatedate.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+                    <div className={`app-form-item app-form-item-left`}>
+                {this.detailsModel.updatedate.isShowCaption && !this.detailsModel.updatedate.isEmptyCaption ?
+                    <div className="app-form-item-label" style={{ width: '130px' }}>
+                        {this.detailsModel.updatedate.required ? <span className="isrequired">*</span> : ""}更新时间
+                    </div> : ""}
+                <div className="app-form-item-container" style={{ width: "calc(100% - 130px)" }}>
+                    <Form.Item    key={'updatedate'}  validateStatus={this.detailsModel.updatedate.validateStatus} help={this.detailsModel.updatedate.error}>
+                    <span>{this.data.updatedate}</span>
+                    </Form.Item>
+                </div>
+            </div> 
+            
+                </Col>:""}
+            
+                </Row>
+        </Panel>
+    </Collapse>
+        </Col>:""}
+
+                        </TabPane>
+                    </Tabs>
+                </Form>
+            </div>
+        </>;
+    }
+
+    /**
+     * 变更监测
+     *
+     * @protected
+     * @memberof Main
+     */
+    protected tick(): void {
+        this.setState({
+            date: new Date()
+        });
+    }
+
+}
\ No newline at end of file

app_Default/src/forms/entity2/main/main.less

+// this is less
+.app-form-item {
+    display: flex;
+    justify-content: space-between;
+    padding-right: 16px;
+    margin-bottom: 6px;
+
+    .app-form-item-label {
+        text-align: right;
+        height: 32px;
+        line-height: 32px;
+        padding-right: 16px;
+
+        .isrequired {
+            display: inline-block;
+            margin-right: 4px;
+            font-family: SimSun;
+            line-height: 1;
+            font-size: 14px;
+            color: #f5222d;
+        }
+    }
+
+    .app-form-item-container {
+        .ant-form-item {
+            width: 100%;
+
+            .ant-form-item-control-wrapper {
+                width: 100%;
+                height: auto;
+                min-height: 59px;
+            }
+        }
+    }
+}
+
+.app-form-item-left {
+    flex-direction: row;
+}
+
+.app-form-item-right {
+    flex-direction: row-reverse;
+}
+
+.app-form-item-top {
+    flex-direction: column;
+}
+
+.app-form-item-bottom {
+    flex-direction: column-reverse;
+}
+
+.ant-form-inline .ant-form-item-with-help {
+    margin-bottom: 0px !important;
+}

app_Default/src/forms/entity2/main/main.tsx

+import React, { PureComponent } from 'react';
+import { Form, Input, Row, Col, Tabs, Icon, Collapse, Button, Select, message } from 'antd';
+import Schema from "async-validator";
+import { FormButtonModel, FormPageModel, FormItemModel, FormDRUIPartModel, FormPartModel, FormGroupPanelModel, FormIFrameModel, FormRowItemModel, FormTabPageModel, FormTabPanelModel, FormUserControlModel } from '../../../ibizsys/form-detail';
+import { Util } from '../../../ibizsys/utils/util';
+
+import AppDropDownList  from '../../../ibizsys/components/app-dropdown-list/app-dropdown-list';
+import AppRadioGroup from '../../../ibizsys/components/app-radio-group/app-radio-group';
+import AppCheckBox from '../../../ibizsys/components/app-checkbox/app-checkbox';
+import AppCheckBoxGroup from '../../../ibizsys/components/app-checkbox-group/app-checkbox-group';
+import AppDatePicker from '../../../ibizsys/components/app-date-picker/app-date-picker';
+import AppTimePicker from '../../../ibizsys/components/app-time-picker/app-time-picker';
+import AppImageUpload from '../../../ibizsys/components/app-image-upload/app-image-upload';
+import AppFileUpload from '../../../ibizsys/components/app-file-upload/app-file-upload';
+import AppRichTextEditor from '../../../ibizsys/components/app-rich-text-editor/app-rich-text-editor';
+
+import './main.less';
+const { TabPane } = Tabs;
+const { Panel } = Collapse;
+const { Option } = Select;
+const { TextArea  } = Input;
+
+/**
+ * 表单属性
+ *
+ * @export
+ * @interface MainFormData
+ */
+export class MainFormData {
+    /**
+     * 实体2名称
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    entity2name?: any;
+    /**
+     * 建立人
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    createman?: any;
+    /**
+     * 建立时间
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    createdate?: any;
+    /**
+     * 更新人
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    updateman?: any;
+    /**
+     * 更新时间
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    updatedate?: any;
+    /**
+     * 实体2标识
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    entity2id?: any;
+}
+
+/**
+ * 输入属性
+ *
+ * @export
+ * @interface MainProps
+ */
+export interface MainProps {
+    /**
+     * 表单数据对象
+     *
+     * @type {MainFormData}
+     * @memberof MainProps
+     */
+    data?: MainFormData;
+    /**
+     * 表单分页切换
+     *
+     * @memberof MainProps
+     */
+    tabChange?: (key: string) => void;
+    /**
+     * 表单项之变化
+     *
+     * @memberof MainProps
+     */
+    formItemChange?:(key:any) => void;
+}
+
+/**
+ * Main
+ *
+ * @export
+ * @class Main
+ * @extends {PureComponent}
+ */
+export default class Main extends PureComponent<MainProps> {
+    /**
+     * 表单数据
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    public data: MainFormData = new MainFormData();
+
+    /**
+     * 初始化实例
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    constructor(props) {
+        super(props);
+        if (this.data && this.props.data && !Object.is(JSON.stringify(this.data), JSON.stringify(this.props.data))) {
+            Object.assign(this.data, this.props.data);
+        }
+        this.initForm();
+    }
+    
+    /**
+     * 在组件接收到一个新的 prop (或更新后)时被调用
+     *
+     * @memberof IBizViewController
+     */
+    public componentWillReceiveProps(nextProps: Readonly<MainProps>, nextContext: any) {
+        if (this.data && nextProps.data && !Object.is(JSON.stringify(this.data), JSON.stringify(nextProps.data))) {
+            Object.assign(this.data, nextProps.data);
+        }
+    }
+
+    /**
+     * 在组件从 DOM 中移除的时候立刻被调用
+     *
+     * @memberof IBizViewController
+     */
+    public componentWillUnmount() {
+
+    }
+
+    /**
+     * 属性值规则
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    public rules: any = {
+        entity2name: [
+            { type: 'string', message: '实体2名称 值必须为字符串类型', trigger: 'change' },
+            { required: false, type: 'string', message: '实体2名称 值不能为空', trigger: 'change' },
+            { required: false, type: 'string', message: '实体2名称 值不能为空', trigger: 'blur' },
+        ],
+        createman: [
+            { type: 'string', message: '建立人 值必须为字符串类型', trigger: 'change' },
+            { required: false, type: 'string', message: '建立人 值不能为空', trigger: 'change' },
+            { required: false, type: 'string', message: '建立人 值不能为空', trigger: 'blur' },
+        ],
+        createdate: [
+            { type: 'string', message: '建立时间 值必须为字符串类型', trigger: 'change' },
+            { required: false, type: 'string', message: '建立时间 值不能为空', trigger: 'change' },
+            { required: false, type: 'string', message: '建立时间 值不能为空', trigger: 'blur' },
+        ],
+        updateman: [
+            { type: 'string', message: '更新人 值必须为字符串类型', trigger: 'change' },
+            { required: false, type: 'string', message: '更新人 值不能为空', trigger: 'change' },
+            { required: false, type: 'string', message: '更新人 值不能为空', trigger: 'blur' },
+        ],
+        updatedate: [
+            { type: 'string', message: '更新时间 值必须为字符串类型', trigger: 'change' },
+            { required: false, type: 'string', message: '更新时间 值不能为空', trigger: 'change' },
+            { required: false, type: 'string', message: '更新时间 值不能为空', trigger: 'blur' },
+        ],
+    }
+
+    /**
+     * 详情模型集合
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    public detailsModel: any = {
+        entity2name: new FormItemModel({ caption: '实体2名称', detailType: 'FORMITEM', name: 'entity2name', visible: true, isShowCaption: true, form: this, disabled: false,error:"",isEmptyCaption:"false",validateStatus:"",required:false,enableCond: 3 })
+,
+        group1: new FormGroupPanelModel({ caption: '实体2基本信息', detailType: 'GROUPPANEL', name: 'group1', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', langbase: '', extractMode: 'ITEM', details: [] } })
+,
+        formpage1: new FormPageModel({ caption: '基本信息', detailType: 'FORMPAGE', name: 'formpage1', visible: true, isShowCaption: true, form: this })
+,
+        createman: new FormItemModel({ caption: '建立人', detailType: 'FORMITEM', name: 'createman', visible: true, isShowCaption: true, form: this, disabled: false,error:"",isEmptyCaption:"false",validateStatus:"",required:false,enableCond: 3 })
+,
+        createdate: new FormItemModel({ caption: '建立时间', detailType: 'FORMITEM', name: 'createdate', visible: true, isShowCaption: true, form: this, disabled: false,error:"",isEmptyCaption:"false",validateStatus:"",required:false,enableCond: 3 })
+,
+        updateman: new FormItemModel({ caption: '更新人', detailType: 'FORMITEM', name: 'updateman', visible: true, isShowCaption: true, form: this, disabled: false,error:"",isEmptyCaption:"false",validateStatus:"",required:false,enableCond: 3 })
+,
+        updatedate: new FormItemModel({ caption: '更新时间', detailType: 'FORMITEM', name: 'updatedate', visible: true, isShowCaption: true, form: this, disabled: false,error:"",isEmptyCaption:"false",validateStatus:"",required:false,enableCond: 3 })
+,
+        group2: new FormGroupPanelModel({ caption: '操作信息', detailType: 'GROUPPANEL', name: 'group2', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', langbase: '', extractMode: 'ITEM', details: [] } })
+,
+        formpage2: new FormPageModel({ caption: '其它', detailType: 'FORMPAGE', name: 'formpage2', visible: true, isShowCaption: true, form: this })
+,
+        form: new FormTabPanelModel({ caption: 'form', detailType: 'TABPANEL', name: 'form', visible: true, isShowCaption: true, form: this, tabPages: [{ name: 'formpage1', index: 0, visible: true }, { name: 'formpage2', index: 1, visible: true }] }),
+    }
+
+    /**
+      * 代码表模型
+      *
+      * @type {*}
+      * @memberof Main
+      */      
+    public codelistModel:any = {
+      }
+
+    /**
+     * 表单逻辑
+     *
+     * @private
+     * @param { name, newVal, oldVal }
+     * @memberof Main
+     */
+    private formLogic(name: string, newVal: any, oldVal?: any): void {
+                
+
+
+
+
+
+
+
+
+
+    }
+
+
+    /**
+     * 表单分页切换
+     *
+     * @param {string} key 分页标识
+     * @memberof Main
+     */
+    public tabChange(key: string): void {
+        if (this.props.tabChange) {
+            this.props.tabChange(key);
+        }
+    }
+
+    /**
+     * 表单值变化事件
+     *
+     * @memberof Main
+     */
+    public formItemChange(item: string, value: any, isFirst?: boolean) {
+        this.data[item] = value;
+        this.formLogic(item, value);
+        if (!isFirst) {
+            this.validateItem(item, value);
+            if (this.props.formItemChange) {
+                this.props.formItemChange({name:item,value:value});
+            }
+        }
+        this.tick();
+    }
+
+    /**
+     * 按钮点击事件
+     *
+     * @memberof Main
+     */
+    public buttonClick($event:any,value:String){
+        message.info('点击了'+value);
+    }
+
+    /**
+     * 初始化表单
+     * 
+     * @memberof Main
+     */
+    public initForm() {
+        if (Object.keys(this.data).length > 0) {
+            Object.keys(this.data).forEach((item) => {
+                this.formItemChange(item, this.data[item], true);
+            })
+        }
+    }
+
+    /**
+     * 校验单个表单项
+     * @param item 
+     * @param value 
+     */
+    public validateItem(item: string, value: any) {
+        // 做校验
+        // 1.获取数值和规则
+        const rule = this.rules[item];
+        // 2.创建校验规则
+        const schema = new Schema({ [item]: rule })
+        // 校验返回Promise
+        return schema.validate({ [item]: value },undefined,errors => {
+            if (errors) {
+                // 有错
+                this.detailsModel[item].setError(errors[0].message);
+            } else {
+                this.detailsModel[item].setError('');
+            }
+        })
+    }
+
+    /**
+     * 校验表单
+     * 
+     * @memberof Main
+     */
+    public validateForm(callback:Function) {
+        let tasks: any;
+        if (Object.keys(this.data).length > 0) {
+            tasks = Object.keys(this.data).map((item) => {
+                this.validateItem(item, this.data[item]);
+            })
+        }
+        Promise.all(tasks)
+            .then(() => callback(true))
+            .catch(() => callback(false))
+    }
+
+    /**
+     * 绘制内容
+     *
+     * @returns
+     * @memberof Main
+     */
+    public render(): any {
+        return <>
+            <div className="ibiz-form main">
+                <Form layout="inline">
+                    <Tabs defaultActiveKey="1" onChange={(key: string) => this.tabChange(key)}>
+                        <TabPane 
+                            tab={
+                                <span className='caption'>
+                                    基本信息
+                                </span>
+                            } 
+                            key="0">
+                                {this.detailsModel.group1.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+            <Collapse defaultActiveKey={['group1']} className=''>
+        <Panel header="实体2基本信息" key="group1">
+            <Row>
+                    
+            {this.detailsModel.entity2name.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+                    <div className={`app-form-item app-form-item-left`}>
+                {this.detailsModel.entity2name.isShowCaption && !this.detailsModel.entity2name.isEmptyCaption ?
+                    <div className="app-form-item-label" style={{ width: '130px' }}>
+                        {this.detailsModel.entity2name.required ? <span className="isrequired">*</span> : ""}实体2名称
+                    </div> : ""}
+                <div className="app-form-item-container" style={{ width: "calc(100% - 130px)" }}>
+                    <Form.Item    key={'entity2name'}  validateStatus={this.detailsModel.entity2name.validateStatus} help={this.detailsModel.entity2name.error}>
+                    <Input id={'entity2name'} disabled={this.detailsModel.entity2name.disabled} value={this.data.entity2name}     onChange={($event) =>{this.formItemChange('entity2name',$event.target.value)}}/>
+                    </Form.Item>
+                </div>
+            </div> 
+            
+                </Col>:""}
+            
+                </Row>
+        </Panel>
+    </Collapse>
+        </Col>:""}
+
+                        </TabPane>
+                        <TabPane 
+                            tab={
+                                <span className='caption'>
+                                    其它
+                                </span>
+                            } 
+                            key="1">
+                                {this.detailsModel.group2.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+            <Collapse defaultActiveKey={['group2']} className=''>
+        <Panel header="操作信息" key="group2">
+            <Row>
+                    
+            {this.detailsModel.createman.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+                    <div className={`app-form-item app-form-item-left`}>
+                {this.detailsModel.createman.isShowCaption && !this.detailsModel.createman.isEmptyCaption ?
+                    <div className="app-form-item-label" style={{ width: '130px' }}>
+                        {this.detailsModel.createman.required ? <span className="isrequired">*</span> : ""}建立人
+                    </div> : ""}
+                <div className="app-form-item-container" style={{ width: "calc(100% - 130px)" }}>
+                    <Form.Item    key={'createman'}  validateStatus={this.detailsModel.createman.validateStatus} help={this.detailsModel.createman.error}>
+                    <span>{this.data.createman}</span>
+                    </Form.Item>
+                </div>
+            </div> 
+            
+                </Col>:""}
+                {this.detailsModel.createdate.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+                    <div className={`app-form-item app-form-item-left`}>
+                {this.detailsModel.createdate.isShowCaption && !this.detailsModel.createdate.isEmptyCaption ?
+                    <div className="app-form-item-label" style={{ width: '130px' }}>
+                        {this.detailsModel.createdate.required ? <span className="isrequired">*</span> : ""}建立时间
+                    </div> : ""}
+                <div className="app-form-item-container" style={{ width: "calc(100% - 130px)" }}>
+                    <Form.Item    key={'createdate'}  validateStatus={this.detailsModel.createdate.validateStatus} help={this.detailsModel.createdate.error}>
+                    <span>{this.data.createdate}</span>
+                    </Form.Item>
+                </div>
+            </div> 
+            
+                </Col>:""}
+                {this.detailsModel.updateman.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+                    <div className={`app-form-item app-form-item-left`}>
+                {this.detailsModel.updateman.isShowCaption && !this.detailsModel.updateman.isEmptyCaption ?
+                    <div className="app-form-item-label" style={{ width: '130px' }}>
+                        {this.detailsModel.updateman.required ? <span className="isrequired">*</span> : ""}更新人
+                    </div> : ""}
+                <div className="app-form-item-container" style={{ width: "calc(100% - 130px)" }}>
+                    <Form.Item    key={'updateman'}  validateStatus={this.detailsModel.updateman.validateStatus} help={this.detailsModel.updateman.error}>
+                    <span>{this.data.updateman}</span>
+                    </Form.Item>
+                </div>
+            </div> 
+            
+                </Col>:""}
+                {this.detailsModel.updatedate.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+                    <div className={`app-form-item app-form-item-left`}>
+                {this.detailsModel.updatedate.isShowCaption && !this.detailsModel.updatedate.isEmptyCaption ?
+                    <div className="app-form-item-label" style={{ width: '130px' }}>
+                        {this.detailsModel.updatedate.required ? <span className="isrequired">*</span> : ""}更新时间
+                    </div> : ""}
+                <div className="app-form-item-container" style={{ width: "calc(100% - 130px)" }}>
+                    <Form.Item    key={'updatedate'}  validateStatus={this.detailsModel.updatedate.validateStatus} help={this.detailsModel.updatedate.error}>
+                    <span>{this.data.updatedate}</span>
+                    </Form.Item>
+                </div>
+            </div> 
+            
+                </Col>:""}
+            
+                </Row>
+        </Panel>
+    </Collapse>
+        </Col>:""}
+
+                        </TabPane>
+                    </Tabs>
+                </Form>
+            </div>
+        </>;
+    }
+
+    /**
+     * 变更监测
+     *
+     * @protected
+     * @memberof Main
+     */
+    protected tick(): void {
+        this.setState({
+            date: new Date()
+        });
+    }
+
+}
\ No newline at end of file

app_Default/src/forms/entity3/main/main.less

+// this is less
+.app-form-item {
+    display: flex;
+    justify-content: space-between;
+    padding-right: 16px;
+    margin-bottom: 6px;
+
+    .app-form-item-label {
+        text-align: right;
+        height: 32px;
+        line-height: 32px;
+        padding-right: 16px;
+
+        .isrequired {
+            display: inline-block;
+            margin-right: 4px;
+            font-family: SimSun;
+            line-height: 1;
+            font-size: 14px;
+            color: #f5222d;
+        }
+    }
+
+    .app-form-item-container {
+        .ant-form-item {
+            width: 100%;
+
+            .ant-form-item-control-wrapper {
+                width: 100%;
+                height: auto;
+                min-height: 59px;
+            }
+        }
+    }
+}
+
+.app-form-item-left {
+    flex-direction: row;
+}
+
+.app-form-item-right {
+    flex-direction: row-reverse;
+}
+
+.app-form-item-top {
+    flex-direction: column;
+}
+
+.app-form-item-bottom {
+    flex-direction: column-reverse;
+}
+
+.ant-form-inline .ant-form-item-with-help {
+    margin-bottom: 0px !important;
+}

app_Default/src/forms/entity3/main/main.tsx

+import React, { PureComponent } from 'react';
+import { Form, Input, Row, Col, Tabs, Icon, Collapse, Button, Select, message } from 'antd';
+import Schema from "async-validator";
+import { FormButtonModel, FormPageModel, FormItemModel, FormDRUIPartModel, FormPartModel, FormGroupPanelModel, FormIFrameModel, FormRowItemModel, FormTabPageModel, FormTabPanelModel, FormUserControlModel } from '../../../ibizsys/form-detail';
+import { Util } from '../../../ibizsys/utils/util';
+
+import AppDropDownList  from '../../../ibizsys/components/app-dropdown-list/app-dropdown-list';
+import AppRadioGroup from '../../../ibizsys/components/app-radio-group/app-radio-group';
+import AppCheckBox from '../../../ibizsys/components/app-checkbox/app-checkbox';
+import AppCheckBoxGroup from '../../../ibizsys/components/app-checkbox-group/app-checkbox-group';
+import AppDatePicker from '../../../ibizsys/components/app-date-picker/app-date-picker';
+import AppTimePicker from '../../../ibizsys/components/app-time-picker/app-time-picker';
+import AppImageUpload from '../../../ibizsys/components/app-image-upload/app-image-upload';
+import AppFileUpload from '../../../ibizsys/components/app-file-upload/app-file-upload';
+import AppRichTextEditor from '../../../ibizsys/components/app-rich-text-editor/app-rich-text-editor';
+
+import './main.less';
+const { TabPane } = Tabs;
+const { Panel } = Collapse;
+const { Option } = Select;
+const { TextArea  } = Input;
+
+/**
+ * 表单属性
+ *
+ * @export
+ * @interface MainFormData
+ */
+export class MainFormData {
+    /**
+     * 实体3名称
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    entity3name?: any;
+    /**
+     * 建立人
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    createman?: any;
+    /**
+     * 建立时间
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    createdate?: any;
+    /**
+     * 更新人
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    updateman?: any;
+    /**
+     * 更新时间
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    updatedate?: any;
+    /**
+     * 实体3标识
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    entity3id?: any;
+}
+
+/**
+ * 输入属性
+ *
+ * @export
+ * @interface MainProps
+ */
+export interface MainProps {
+    /**
+     * 表单数据对象
+     *
+     * @type {MainFormData}
+     * @memberof MainProps
+     */
+    data?: MainFormData;
+    /**
+     * 表单分页切换
+     *
+     * @memberof MainProps
+     */
+    tabChange?: (key: string) => void;
+    /**
+     * 表单项之变化
+     *
+     * @memberof MainProps
+     */
+    formItemChange?:(key:any) => void;
+}
+
+/**
+ * Main
+ *
+ * @export
+ * @class Main
+ * @extends {PureComponent}
+ */
+export default class Main extends PureComponent<MainProps> {
+    /**
+     * 表单数据
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    public data: MainFormData = new MainFormData();
+
+    /**
+     * 初始化实例
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    constructor(props) {
+        super(props);
+        if (this.data && this.props.data && !Object.is(JSON.stringify(this.data), JSON.stringify(this.props.data))) {
+            Object.assign(this.data, this.props.data);
+        }
+        this.initForm();
+    }
+    
+    /**
+     * 在组件接收到一个新的 prop (或更新后)时被调用
+     *
+     * @memberof IBizViewController
+     */
+    public componentWillReceiveProps(nextProps: Readonly<MainProps>, nextContext: any) {
+        if (this.data && nextProps.data && !Object.is(JSON.stringify(this.data), JSON.stringify(nextProps.data))) {
+            Object.assign(this.data, nextProps.data);
+        }
+    }
+
+    /**
+     * 在组件从 DOM 中移除的时候立刻被调用
+     *
+     * @memberof IBizViewController
+     */
+    public componentWillUnmount() {
+
+    }
+
+    /**
+     * 属性值规则
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    public rules: any = {
+        entity3name: [
+            { type: 'string', message: '实体3名称 值必须为字符串类型', trigger: 'change' },
+            { required: false, type: 'string', message: '实体3名称 值不能为空', trigger: 'change' },
+            { required: false, type: 'string', message: '实体3名称 值不能为空', trigger: 'blur' },
+        ],
+        createman: [
+            { type: 'string', message: '建立人 值必须为字符串类型', trigger: 'change' },
+            { required: false, type: 'string', message: '建立人 值不能为空', trigger: 'change' },
+            { required: false, type: 'string', message: '建立人 值不能为空', trigger: 'blur' },
+        ],
+        createdate: [
+            { type: 'string', message: '建立时间 值必须为字符串类型', trigger: 'change' },
+            { required: false, type: 'string', message: '建立时间 值不能为空', trigger: 'change' },
+            { required: false, type: 'string', message: '建立时间 值不能为空', trigger: 'blur' },
+        ],
+        updateman: [
+            { type: 'string', message: '更新人 值必须为字符串类型', trigger: 'change' },
+            { required: false, type: 'string', message: '更新人 值不能为空', trigger: 'change' },
+            { required: false, type: 'string', message: '更新人 值不能为空', trigger: 'blur' },
+        ],
+        updatedate: [
+            { type: 'string', message: '更新时间 值必须为字符串类型', trigger: 'change' },
+            { required: false, type: 'string', message: '更新时间 值不能为空', trigger: 'change' },
+            { required: false, type: 'string', message: '更新时间 值不能为空', trigger: 'blur' },
+        ],
+    }
+
+    /**
+     * 详情模型集合
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    public detailsModel: any = {
+        entity3name: new FormItemModel({ caption: '实体3名称', detailType: 'FORMITEM', name: 'entity3name', visible: true, isShowCaption: true, form: this, disabled: false,error:"",isEmptyCaption:"false",validateStatus:"",required:false,enableCond: 3 })
+,
+        group1: new FormGroupPanelModel({ caption: '实体3基本信息', detailType: 'GROUPPANEL', name: 'group1', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', langbase: '', extractMode: 'ITEM', details: [] } })
+,
+        formpage1: new FormPageModel({ caption: '基本信息', detailType: 'FORMPAGE', name: 'formpage1', visible: true, isShowCaption: true, form: this })
+,
+        createman: new FormItemModel({ caption: '建立人', detailType: 'FORMITEM', name: 'createman', visible: true, isShowCaption: true, form: this, disabled: false,error:"",isEmptyCaption:"false",validateStatus:"",required:false,enableCond: 3 })
+,
+        createdate: new FormItemModel({ caption: '建立时间', detailType: 'FORMITEM', name: 'createdate', visible: true, isShowCaption: true, form: this, disabled: false,error:"",isEmptyCaption:"false",validateStatus:"",required:false,enableCond: 3 })
+,
+        updateman: new FormItemModel({ caption: '更新人', detailType: 'FORMITEM', name: 'updateman', visible: true, isShowCaption: true, form: this, disabled: false,error:"",isEmptyCaption:"false",validateStatus:"",required:false,enableCond: 3 })
+,
+        updatedate: new FormItemModel({ caption: '更新时间', detailType: 'FORMITEM', name: 'updatedate', visible: true, isShowCaption: true, form: this, disabled: false,error:"",isEmptyCaption:"false",validateStatus:"",required:false,enableCond: 3 })
+,
+        group2: new FormGroupPanelModel({ caption: '操作信息', detailType: 'GROUPPANEL', name: 'group2', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', langbase: '', extractMode: 'ITEM', details: [] } })
+,
+        formpage2: new FormPageModel({ caption: '其它', detailType: 'FORMPAGE', name: 'formpage2', visible: true, isShowCaption: true, form: this })
+,
+        form: new FormTabPanelModel({ caption: 'form', detailType: 'TABPANEL', name: 'form', visible: true, isShowCaption: true, form: this, tabPages: [{ name: 'formpage1', index: 0, visible: true }, { name: 'formpage2', index: 1, visible: true }] }),
+    }
+
+    /**
+      * 代码表模型
+      *
+      * @type {*}
+      * @memberof Main
+      */      
+    public codelistModel:any = {
+      }
+
+    /**
+     * 表单逻辑
+     *
+     * @private
+     * @param { name, newVal, oldVal }
+     * @memberof Main
+     */
+    private formLogic(name: string, newVal: any, oldVal?: any): void {
+                
+
+
+
+
+
+
+
+
+
+    }
+
+
+    /**
+     * 表单分页切换
+     *
+     * @param {string} key 分页标识
+     * @memberof Main
+     */
+    public tabChange(key: string): void {
+        if (this.props.tabChange) {
+            this.props.tabChange(key);
+        }
+    }
+
+    /**
+     * 表单值变化事件
+     *
+     * @memberof Main
+     */
+    public formItemChange(item: string, value: any, isFirst?: boolean) {
+        this.data[item] = value;
+        this.formLogic(item, value);
+        if (!isFirst) {
+            this.validateItem(item, value);
+            if (this.props.formItemChange) {
+                this.props.formItemChange({name:item,value:value});
+            }
+        }
+        this.tick();
+    }
+
+    /**
+     * 按钮点击事件
+     *
+     * @memberof Main
+     */
+    public buttonClick($event:any,value:String){
+        message.info('点击了'+value);
+    }
+
+    /**
+     * 初始化表单
+     * 
+     * @memberof Main
+     */
+    public initForm() {
+        if (Object.keys(this.data).length > 0) {
+            Object.keys(this.data).forEach((item) => {
+                this.formItemChange(item, this.data[item], true);
+            })
+        }
+    }
+
+    /**
+     * 校验单个表单项
+     * @param item 
+     * @param value 
+     */
+    public validateItem(item: string, value: any) {
+        // 做校验
+        // 1.获取数值和规则
+        const rule = this.rules[item];
+        // 2.创建校验规则
+        const schema = new Schema({ [item]: rule })
+        // 校验返回Promise
+        return schema.validate({ [item]: value },undefined,errors => {
+            if (errors) {
+                // 有错
+                this.detailsModel[item].setError(errors[0].message);
+            } else {
+                this.detailsModel[item].setError('');
+            }
+        })
+    }
+
+    /**
+     * 校验表单
+     * 
+     * @memberof Main
+     */
+    public validateForm(callback:Function) {
+        let tasks: any;
+        if (Object.keys(this.data).length > 0) {
+            tasks = Object.keys(this.data).map((item) => {
+                this.validateItem(item, this.data[item]);
+            })
+        }
+        Promise.all(tasks)
+            .then(() => callback(true))
+            .catch(() => callback(false))
+    }
+
+    /**
+     * 绘制内容
+     *
+     * @returns
+     * @memberof Main
+     */
+    public render(): any {
+        return <>
+            <div className="ibiz-form main">
+                <Form layout="inline">
+                    <Tabs defaultActiveKey="1" onChange={(key: string) => this.tabChange(key)}>
+                        <TabPane 
+                            tab={
+                                <span className='caption'>
+                                    基本信息
+                                </span>
+                            } 
+                            key="0">
+                                {this.detailsModel.group1.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+            <Collapse defaultActiveKey={['group1']} className=''>
+        <Panel header="实体3基本信息" key="group1">
+            <Row>
+                    
+            {this.detailsModel.entity3name.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+                    <div className={`app-form-item app-form-item-left`}>
+                {this.detailsModel.entity3name.isShowCaption && !this.detailsModel.entity3name.isEmptyCaption ?
+                    <div className="app-form-item-label" style={{ width: '130px' }}>
+                        {this.detailsModel.entity3name.required ? <span className="isrequired">*</span> : ""}实体3名称
+                    </div> : ""}
+                <div className="app-form-item-container" style={{ width: "calc(100% - 130px)" }}>
+                    <Form.Item    key={'entity3name'}  validateStatus={this.detailsModel.entity3name.validateStatus} help={this.detailsModel.entity3name.error}>
+                    <Input id={'entity3name'} disabled={this.detailsModel.entity3name.disabled} value={this.data.entity3name}     onChange={($event) =>{this.formItemChange('entity3name',$event.target.value)}}/>
+                    </Form.Item>
+                </div>
+            </div> 
+            
+                </Col>:""}
+            
+                </Row>
+        </Panel>
+    </Collapse>
+        </Col>:""}
+
+                        </TabPane>
+                        <TabPane 
+                            tab={
+                                <span className='caption'>
+                                    其它
+                                </span>
+                            } 
+                            key="1">
+                                {this.detailsModel.group2.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+            <Collapse defaultActiveKey={['group2']} className=''>
+        <Panel header="操作信息" key="group2">
+            <Row>
+                    
+            {this.detailsModel.createman.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+                    <div className={`app-form-item app-form-item-left`}>
+                {this.detailsModel.createman.isShowCaption && !this.detailsModel.createman.isEmptyCaption ?
+                    <div className="app-form-item-label" style={{ width: '130px' }}>
+                        {this.detailsModel.createman.required ? <span className="isrequired">*</span> : ""}建立人
+                    </div> : ""}
+                <div className="app-form-item-container" style={{ width: "calc(100% - 130px)" }}>
+                    <Form.Item    key={'createman'}  validateStatus={this.detailsModel.createman.validateStatus} help={this.detailsModel.createman.error}>
+                    <span>{this.data.createman}</span>
+                    </Form.Item>
+                </div>
+            </div> 
+            
+                </Col>:""}
+                {this.detailsModel.createdate.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+                    <div className={`app-form-item app-form-item-left`}>
+                {this.detailsModel.createdate.isShowCaption && !this.detailsModel.createdate.isEmptyCaption ?
+                    <div className="app-form-item-label" style={{ width: '130px' }}>
+                        {this.detailsModel.createdate.required ? <span className="isrequired">*</span> : ""}建立时间
+                    </div> : ""}
+                <div className="app-form-item-container" style={{ width: "calc(100% - 130px)" }}>
+                    <Form.Item    key={'createdate'}  validateStatus={this.detailsModel.createdate.validateStatus} help={this.detailsModel.createdate.error}>
+                    <span>{this.data.createdate}</span>
+                    </Form.Item>
+                </div>
+            </div> 
+            
+                </Col>:""}
+                {this.detailsModel.updateman.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+                    <div className={`app-form-item app-form-item-left`}>
+                {this.detailsModel.updateman.isShowCaption && !this.detailsModel.updateman.isEmptyCaption ?
+                    <div className="app-form-item-label" style={{ width: '130px' }}>
+                        {this.detailsModel.updateman.required ? <span className="isrequired">*</span> : ""}更新人
+                    </div> : ""}
+                <div className="app-form-item-container" style={{ width: "calc(100% - 130px)" }}>
+                    <Form.Item    key={'updateman'}  validateStatus={this.detailsModel.updateman.validateStatus} help={this.detailsModel.updateman.error}>
+                    <span>{this.data.updateman}</span>
+                    </Form.Item>
+                </div>
+            </div> 
+            
+                </Col>:""}
+                {this.detailsModel.updatedate.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+                    <div className={`app-form-item app-form-item-left`}>
+                {this.detailsModel.updatedate.isShowCaption && !this.detailsModel.updatedate.isEmptyCaption ?
+                    <div className="app-form-item-label" style={{ width: '130px' }}>
+                        {this.detailsModel.updatedate.required ? <span className="isrequired">*</span> : ""}更新时间
+                    </div> : ""}
+                <div className="app-form-item-container" style={{ width: "calc(100% - 130px)" }}>
+                    <Form.Item    key={'updatedate'}  validateStatus={this.detailsModel.updatedate.validateStatus} help={this.detailsModel.updatedate.error}>
+                    <span>{this.data.updatedate}</span>
+                    </Form.Item>
+                </div>
+            </div> 
+            
+                </Col>:""}
+            
+                </Row>
+        </Panel>
+    </Collapse>
+        </Col>:""}
+
+                        </TabPane>
+                    </Tabs>
+                </Form>
+            </div>
+        </>;
+    }
+
+    /**
+     * 变更监测
+     *
+     * @protected
+     * @memberof Main
+     */
+    protected tick(): void {
+        this.setState({
+            date: new Date()
+        });
+    }
+
+}
\ No newline at end of file

app_Default/src/forms/entity4/main/main.less

+// this is less
+.app-form-item {
+    display: flex;
+    justify-content: space-between;
+    padding-right: 16px;
+    margin-bottom: 6px;
+
+    .app-form-item-label {
+        text-align: right;
+        height: 32px;
+        line-height: 32px;
+        padding-right: 16px;
+
+        .isrequired {
+            display: inline-block;
+            margin-right: 4px;
+            font-family: SimSun;
+            line-height: 1;
+            font-size: 14px;
+            color: #f5222d;
+        }
+    }
+
+    .app-form-item-container {
+        .ant-form-item {
+            width: 100%;
+
+            .ant-form-item-control-wrapper {
+                width: 100%;
+                height: auto;
+                min-height: 59px;
+            }
+        }
+    }
+}
+
+.app-form-item-left {
+    flex-direction: row;
+}
+
+.app-form-item-right {
+    flex-direction: row-reverse;
+}
+
+.app-form-item-top {
+    flex-direction: column;
+}
+
+.app-form-item-bottom {
+    flex-direction: column-reverse;
+}
+
+.ant-form-inline .ant-form-item-with-help {
+    margin-bottom: 0px !important;
+}

app_Default/src/forms/entity4/main/main.tsx

+import React, { PureComponent } from 'react';
+import { Form, Input, Row, Col, Tabs, Icon, Collapse, Button, Select, message } from 'antd';
+import Schema from "async-validator";
+import { FormButtonModel, FormPageModel, FormItemModel, FormDRUIPartModel, FormPartModel, FormGroupPanelModel, FormIFrameModel, FormRowItemModel, FormTabPageModel, FormTabPanelModel, FormUserControlModel } from '../../../ibizsys/form-detail';
+import { Util } from '../../../ibizsys/utils/util';
+
+import AppDropDownList  from '../../../ibizsys/components/app-dropdown-list/app-dropdown-list';
+import AppRadioGroup from '../../../ibizsys/components/app-radio-group/app-radio-group';
+import AppCheckBox from '../../../ibizsys/components/app-checkbox/app-checkbox';
+import AppCheckBoxGroup from '../../../ibizsys/components/app-checkbox-group/app-checkbox-group';
+import AppDatePicker from '../../../ibizsys/components/app-date-picker/app-date-picker';
+import AppTimePicker from '../../../ibizsys/components/app-time-picker/app-time-picker';
+import AppImageUpload from '../../../ibizsys/components/app-image-upload/app-image-upload';
+import AppFileUpload from '../../../ibizsys/components/app-file-upload/app-file-upload';
+import AppRichTextEditor from '../../../ibizsys/components/app-rich-text-editor/app-rich-text-editor';
+
+import './main.less';
+const { TabPane } = Tabs;
+const { Panel } = Collapse;
+const { Option } = Select;
+const { TextArea  } = Input;
+
+/**
+ * 表单属性
+ *
+ * @export
+ * @interface MainFormData
+ */
+export class MainFormData {
+    /**
+     * 实体4名称
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    entity4name?: any;
+    /**
+     * 建立人
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    createman?: any;
+    /**
+     * 建立时间
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    createdate?: any;
+    /**
+     * 更新人
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    updateman?: any;
+    /**
+     * 更新时间
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    updatedate?: any;
+    /**
+     * 实体4标识
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    entity4id?: any;
+}
+
+/**
+ * 输入属性
+ *
+ * @export
+ * @interface MainProps
+ */
+export interface MainProps {
+    /**
+     * 表单数据对象
+     *
+     * @type {MainFormData}
+     * @memberof MainProps
+     */
+    data?: MainFormData;
+    /**
+     * 表单分页切换
+     *
+     * @memberof MainProps
+     */
+    tabChange?: (key: string) => void;
+    /**
+     * 表单项之变化
+     *
+     * @memberof MainProps
+     */
+    formItemChange?:(key:any) => void;
+}
+
+/**
+ * Main
+ *
+ * @export
+ * @class Main
+ * @extends {PureComponent}
+ */
+export default class Main extends PureComponent<MainProps> {
+    /**
+     * 表单数据
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    public data: MainFormData = new MainFormData();
+
+    /**
+     * 初始化实例
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    constructor(props) {
+        super(props);
+        if (this.data && this.props.data && !Object.is(JSON.stringify(this.data), JSON.stringify(this.props.data))) {
+            Object.assign(this.data, this.props.data);
+        }
+        this.initForm();
+    }
+    
+    /**
+     * 在组件接收到一个新的 prop (或更新后)时被调用
+     *
+     * @memberof IBizViewController
+     */
+    public componentWillReceiveProps(nextProps: Readonly<MainProps>, nextContext: any) {
+        if (this.data && nextProps.data && !Object.is(JSON.stringify(this.data), JSON.stringify(nextProps.data))) {
+            Object.assign(this.data, nextProps.data);
+        }
+    }
+
+    /**
+     * 在组件从 DOM 中移除的时候立刻被调用
+     *
+     * @memberof IBizViewController
+     */
+    public componentWillUnmount() {
+
+    }
+
+    /**
+     * 属性值规则
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    public rules: any = {
+        entity4name: [
+            { type: 'string', message: '实体4名称 值必须为字符串类型', trigger: 'change' },
+            { required: false, type: 'string', message: '实体4名称 值不能为空', trigger: 'change' },
+            { required: false, type: 'string', message: '实体4名称 值不能为空', trigger: 'blur' },
+        ],
+        createman: [
+            { type: 'string', message: '建立人 值必须为字符串类型', trigger: 'change' },
+            { required: false, type: 'string', message: '建立人 值不能为空', trigger: 'change' },
+            { required: false, type: 'string', message: '建立人 值不能为空', trigger: 'blur' },
+        ],
+        createdate: [
+            { type: 'string', message: '建立时间 值必须为字符串类型', trigger: 'change' },
+            { required: false, type: 'string', message: '建立时间 值不能为空', trigger: 'change' },
+            { required: false, type: 'string', message: '建立时间 值不能为空', trigger: 'blur' },
+        ],
+        updateman: [
+            { type: 'string', message: '更新人 值必须为字符串类型', trigger: 'change' },
+            { required: false, type: 'string', message: '更新人 值不能为空', trigger: 'change' },
+            { required: false, type: 'string', message: '更新人 值不能为空', trigger: 'blur' },
+        ],
+        updatedate: [
+            { type: 'string', message: '更新时间 值必须为字符串类型', trigger: 'change' },
+            { required: false, type: 'string', message: '更新时间 值不能为空', trigger: 'change' },
+            { required: false, type: 'string', message: '更新时间 值不能为空', trigger: 'blur' },
+        ],
+    }
+
+    /**
+     * 详情模型集合
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    public detailsModel: any = {
+        entity4name: new FormItemModel({ caption: '实体4名称', detailType: 'FORMITEM', name: 'entity4name', visible: true, isShowCaption: true, form: this, disabled: false,error:"",isEmptyCaption:"false",validateStatus:"",required:false,enableCond: 3 })
+,
+        group1: new FormGroupPanelModel({ caption: '实体4基本信息', detailType: 'GROUPPANEL', name: 'group1', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', langbase: '', extractMode: 'ITEM', details: [] } })
+,
+        formpage1: new FormPageModel({ caption: '基本信息', detailType: 'FORMPAGE', name: 'formpage1', visible: true, isShowCaption: true, form: this })
+,
+        createman: new FormItemModel({ caption: '建立人', detailType: 'FORMITEM', name: 'createman', visible: true, isShowCaption: true, form: this, disabled: false,error:"",isEmptyCaption:"false",validateStatus:"",required:false,enableCond: 3 })
+,
+        createdate: new FormItemModel({ caption: '建立时间', detailType: 'FORMITEM', name: 'createdate', visible: true, isShowCaption: true, form: this, disabled: false,error:"",isEmptyCaption:"false",validateStatus:"",required:false,enableCond: 3 })
+,
+        updateman: new FormItemModel({ caption: '更新人', detailType: 'FORMITEM', name: 'updateman', visible: true, isShowCaption: true, form: this, disabled: false,error:"",isEmptyCaption:"false",validateStatus:"",required:false,enableCond: 3 })
+,
+        updatedate: new FormItemModel({ caption: '更新时间', detailType: 'FORMITEM', name: 'updatedate', visible: true, isShowCaption: true, form: this, disabled: false,error:"",isEmptyCaption:"false",validateStatus:"",required:false,enableCond: 3 })
+,
+        group2: new FormGroupPanelModel({ caption: '操作信息', detailType: 'GROUPPANEL', name: 'group2', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', langbase: '', extractMode: 'ITEM', details: [] } })
+,
+        formpage2: new FormPageModel({ caption: '其它', detailType: 'FORMPAGE', name: 'formpage2', visible: true, isShowCaption: true, form: this })
+,
+        form: new FormTabPanelModel({ caption: 'form', detailType: 'TABPANEL', name: 'form', visible: true, isShowCaption: true, form: this, tabPages: [{ name: 'formpage1', index: 0, visible: true }, { name: 'formpage2', index: 1, visible: true }] }),
+    }
+
+    /**
+      * 代码表模型
+      *
+      * @type {*}
+      * @memberof Main
+      */      
+    public codelistModel:any = {
+      }
+
+    /**
+     * 表单逻辑
+     *
+     * @private
+     * @param { name, newVal, oldVal }
+     * @memberof Main
+     */
+    private formLogic(name: string, newVal: any, oldVal?: any): void {
+                
+
+
+
+
+
+
+
+
+
+    }
+
+
+    /**
+     * 表单分页切换
+     *
+     * @param {string} key 分页标识
+     * @memberof Main
+     */
+    public tabChange(key: string): void {
+        if (this.props.tabChange) {
+            this.props.tabChange(key);
+        }
+    }
+
+    /**
+     * 表单值变化事件
+     *
+     * @memberof Main
+     */
+    public formItemChange(item: string, value: any, isFirst?: boolean) {
+        this.data[item] = value;
+        this.formLogic(item, value);
+        if (!isFirst) {
+            this.validateItem(item, value);
+            if (this.props.formItemChange) {
+                this.props.formItemChange({name:item,value:value});
+            }
+        }
+        this.tick();
+    }
+
+    /**
+     * 按钮点击事件
+     *
+     * @memberof Main
+     */
+    public buttonClick($event:any,value:String){
+        message.info('点击了'+value);
+    }
+
+    /**
+     * 初始化表单
+     * 
+     * @memberof Main
+     */
+    public initForm() {
+        if (Object.keys(this.data).length > 0) {
+            Object.keys(this.data).forEach((item) => {
+                this.formItemChange(item, this.data[item], true);
+            })
+        }
+    }
+
+    /**
+     * 校验单个表单项
+     * @param item 
+     * @param value 
+     */
+    public validateItem(item: string, value: any) {
+        // 做校验
+        // 1.获取数值和规则
+        const rule = this.rules[item];
+        // 2.创建校验规则
+        const schema = new Schema({ [item]: rule })
+        // 校验返回Promise
+        return schema.validate({ [item]: value },undefined,errors => {
+            if (errors) {
+                // 有错
+                this.detailsModel[item].setError(errors[0].message);
+            } else {
+                this.detailsModel[item].setError('');
+            }
+        })
+    }
+
+    /**
+     * 校验表单
+     * 
+     * @memberof Main
+     */
+    public validateForm(callback:Function) {
+        let tasks: any;
+        if (Object.keys(this.data).length > 0) {
+            tasks = Object.keys(this.data).map((item) => {
+                this.validateItem(item, this.data[item]);
+            })
+        }
+        Promise.all(tasks)
+            .then(() => callback(true))
+            .catch(() => callback(false))
+    }
+
+    /**
+     * 绘制内容
+     *
+     * @returns
+     * @memberof Main
+     */
+    public render(): any {
+        return <>
+            <div className="ibiz-form main">
+                <Form layout="inline">
+                    <Tabs defaultActiveKey="1" onChange={(key: string) => this.tabChange(key)}>
+                        <TabPane 
+                            tab={
+                                <span className='caption'>
+                                    基本信息
+                                </span>
+                            } 
+                            key="0">
+                                {this.detailsModel.group1.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+            <Collapse defaultActiveKey={['group1']} className=''>
+        <Panel header="实体4基本信息" key="group1">
+            <Row>
+                    
+            {this.detailsModel.entity4name.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+                    <div className={`app-form-item app-form-item-left`}>
+                {this.detailsModel.entity4name.isShowCaption && !this.detailsModel.entity4name.isEmptyCaption ?
+                    <div className="app-form-item-label" style={{ width: '130px' }}>
+                        {this.detailsModel.entity4name.required ? <span className="isrequired">*</span> : ""}实体4名称
+                    </div> : ""}
+                <div className="app-form-item-container" style={{ width: "calc(100% - 130px)" }}>
+                    <Form.Item    key={'entity4name'}  validateStatus={this.detailsModel.entity4name.validateStatus} help={this.detailsModel.entity4name.error}>
+                    <Input id={'entity4name'} disabled={this.detailsModel.entity4name.disabled} value={this.data.entity4name}     onChange={($event) =>{this.formItemChange('entity4name',$event.target.value)}}/>
+                    </Form.Item>
+                </div>
+            </div> 
+            
+                </Col>:""}
+            
+                </Row>
+        </Panel>
+    </Collapse>
+        </Col>:""}
+
+                        </TabPane>
+                        <TabPane 
+                            tab={
+                                <span className='caption'>
+                                    其它
+                                </span>
+                            } 
+                            key="1">
+                                {this.detailsModel.group2.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+            <Collapse defaultActiveKey={['group2']} className=''>
+        <Panel header="操作信息" key="group2">
+            <Row>
+                    
+            {this.detailsModel.createman.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+                    <div className={`app-form-item app-form-item-left`}>
+                {this.detailsModel.createman.isShowCaption && !this.detailsModel.createman.isEmptyCaption ?
+                    <div className="app-form-item-label" style={{ width: '130px' }}>
+                        {this.detailsModel.createman.required ? <span className="isrequired">*</span> : ""}建立人
+                    </div> : ""}
+                <div className="app-form-item-container" style={{ width: "calc(100% - 130px)" }}>
+                    <Form.Item    key={'createman'}  validateStatus={this.detailsModel.createman.validateStatus} help={this.detailsModel.createman.error}>
+                    <span>{this.data.createman}</span>
+                    </Form.Item>
+                </div>
+            </div> 
+            
+                </Col>:""}
+                {this.detailsModel.createdate.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+                    <div className={`app-form-item app-form-item-left`}>
+                {this.detailsModel.createdate.isShowCaption && !this.detailsModel.createdate.isEmptyCaption ?
+                    <div className="app-form-item-label" style={{ width: '130px' }}>
+                        {this.detailsModel.createdate.required ? <span className="isrequired">*</span> : ""}建立时间
+                    </div> : ""}
+                <div className="app-form-item-container" style={{ width: "calc(100% - 130px)" }}>
+                    <Form.Item    key={'createdate'}  validateStatus={this.detailsModel.createdate.validateStatus} help={this.detailsModel.createdate.error}>
+                    <span>{this.data.createdate}</span>
+                    </Form.Item>
+                </div>
+            </div> 
+            
+                </Col>:""}
+                {this.detailsModel.updateman.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+                    <div className={`app-form-item app-form-item-left`}>
+                {this.detailsModel.updateman.isShowCaption && !this.detailsModel.updateman.isEmptyCaption ?
+                    <div className="app-form-item-label" style={{ width: '130px' }}>
+                        {this.detailsModel.updateman.required ? <span className="isrequired">*</span> : ""}更新人
+                    </div> : ""}
+                <div className="app-form-item-container" style={{ width: "calc(100% - 130px)" }}>
+                    <Form.Item    key={'updateman'}  validateStatus={this.detailsModel.updateman.validateStatus} help={this.detailsModel.updateman.error}>
+                    <span>{this.data.updateman}</span>
+                    </Form.Item>
+                </div>
+            </div> 
+            
+                </Col>:""}
+                {this.detailsModel.updatedate.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+                    <div className={`app-form-item app-form-item-left`}>
+                {this.detailsModel.updatedate.isShowCaption && !this.detailsModel.updatedate.isEmptyCaption ?
+                    <div className="app-form-item-label" style={{ width: '130px' }}>
+                        {this.detailsModel.updatedate.required ? <span className="isrequired">*</span> : ""}更新时间
+                    </div> : ""}
+                <div className="app-form-item-container" style={{ width: "calc(100% - 130px)" }}>
+                    <Form.Item    key={'updatedate'}  validateStatus={this.detailsModel.updatedate.validateStatus} help={this.detailsModel.updatedate.error}>
+                    <span>{this.data.updatedate}</span>
+                    </Form.Item>
+                </div>
+            </div> 
+            
+                </Col>:""}
+            
+                </Row>
+        </Panel>
+    </Collapse>
+        </Col>:""}
+
+                        </TabPane>
+                    </Tabs>
+                </Form>
+            </div>
+        </>;
+    }
+
+    /**
+     * 变更监测
+     *
+     * @protected
+     * @memberof Main
+     */
+    protected tick(): void {
+        this.setState({
+            date: new Date()
+        });
+    }
+
+}
\ No newline at end of file

app_Default/src/forms/entity5/main/main.less

+// this is less
+.app-form-item {
+    display: flex;
+    justify-content: space-between;
+    padding-right: 16px;
+    margin-bottom: 6px;
+
+    .app-form-item-label {
+        text-align: right;
+        height: 32px;
+        line-height: 32px;
+        padding-right: 16px;
+
+        .isrequired {
+            display: inline-block;
+            margin-right: 4px;
+            font-family: SimSun;
+            line-height: 1;
+            font-size: 14px;
+            color: #f5222d;
+        }
+    }
+
+    .app-form-item-container {
+        .ant-form-item {
+            width: 100%;
+
+            .ant-form-item-control-wrapper {
+                width: 100%;
+                height: auto;
+                min-height: 59px;
+            }
+        }
+    }
+}
+
+.app-form-item-left {
+    flex-direction: row;
+}
+
+.app-form-item-right {
+    flex-direction: row-reverse;
+}
+
+.app-form-item-top {
+    flex-direction: column;
+}
+
+.app-form-item-bottom {
+    flex-direction: column-reverse;
+}
+
+.ant-form-inline .ant-form-item-with-help {
+    margin-bottom: 0px !important;
+}

app_Default/src/forms/entity5/main/main.tsx

+import React, { PureComponent } from 'react';
+import { Form, Input, Row, Col, Tabs, Icon, Collapse, Button, Select, message } from 'antd';
+import Schema from "async-validator";
+import { FormButtonModel, FormPageModel, FormItemModel, FormDRUIPartModel, FormPartModel, FormGroupPanelModel, FormIFrameModel, FormRowItemModel, FormTabPageModel, FormTabPanelModel, FormUserControlModel } from '../../../ibizsys/form-detail';
+import { Util } from '../../../ibizsys/utils/util';
+
+import AppDropDownList  from '../../../ibizsys/components/app-dropdown-list/app-dropdown-list';
+import AppRadioGroup from '../../../ibizsys/components/app-radio-group/app-radio-group';
+import AppCheckBox from '../../../ibizsys/components/app-checkbox/app-checkbox';
+import AppCheckBoxGroup from '../../../ibizsys/components/app-checkbox-group/app-checkbox-group';
+import AppDatePicker from '../../../ibizsys/components/app-date-picker/app-date-picker';
+import AppTimePicker from '../../../ibizsys/components/app-time-picker/app-time-picker';
+import AppImageUpload from '../../../ibizsys/components/app-image-upload/app-image-upload';
+import AppFileUpload from '../../../ibizsys/components/app-file-upload/app-file-upload';
+import AppRichTextEditor from '../../../ibizsys/components/app-rich-text-editor/app-rich-text-editor';
+
+import './main.less';
+const { TabPane } = Tabs;
+const { Panel } = Collapse;
+const { Option } = Select;
+const { TextArea  } = Input;
+
+/**
+ * 表单属性
+ *
+ * @export
+ * @interface MainFormData
+ */
+export class MainFormData {
+    /**
+     * 实体5名称
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    entity5name?: any;
+    /**
+     * 建立人
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    createman?: any;
+    /**
+     * 建立时间
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    createdate?: any;
+    /**
+     * 更新人
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    updateman?: any;
+    /**
+     * 更新时间
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    updatedate?: any;
+    /**
+     * 实体5标识
+     *
+     * @type {*}
+     * @memberof MainFormData
+     */
+    entity5id?: any;
+}
+
+/**
+ * 输入属性
+ *
+ * @export
+ * @interface MainProps
+ */
+export interface MainProps {
+    /**
+     * 表单数据对象
+     *
+     * @type {MainFormData}
+     * @memberof MainProps
+     */
+    data?: MainFormData;
+    /**
+     * 表单分页切换
+     *
+     * @memberof MainProps
+     */
+    tabChange?: (key: string) => void;
+    /**
+     * 表单项之变化
+     *
+     * @memberof MainProps
+     */
+    formItemChange?:(key:any) => void;
+}
+
+/**
+ * Main
+ *
+ * @export
+ * @class Main
+ * @extends {PureComponent}
+ */
+export default class Main extends PureComponent<MainProps> {
+    /**
+     * 表单数据
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    public data: MainFormData = new MainFormData();
+
+    /**
+     * 初始化实例
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    constructor(props) {
+        super(props);
+        if (this.data && this.props.data && !Object.is(JSON.stringify(this.data), JSON.stringify(this.props.data))) {
+            Object.assign(this.data, this.props.data);
+        }
+        this.initForm();
+    }
+    
+    /**
+     * 在组件接收到一个新的 prop (或更新后)时被调用
+     *
+     * @memberof IBizViewController
+     */
+    public componentWillReceiveProps(nextProps: Readonly<MainProps>, nextContext: any) {
+        if (this.data && nextProps.data && !Object.is(JSON.stringify(this.data), JSON.stringify(nextProps.data))) {
+            Object.assign(this.data, nextProps.data);
+        }
+    }
+
+    /**
+     * 在组件从 DOM 中移除的时候立刻被调用
+     *
+     * @memberof IBizViewController
+     */
+    public componentWillUnmount() {
+
+    }
+
+    /**
+     * 属性值规则
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    public rules: any = {
+        entity5name: [
+            { type: 'string', message: '实体5名称 值必须为字符串类型', trigger: 'change' },
+            { required: false, type: 'string', message: '实体5名称 值不能为空', trigger: 'change' },
+            { required: false, type: 'string', message: '实体5名称 值不能为空', trigger: 'blur' },
+        ],
+        createman: [
+            { type: 'string', message: '建立人 值必须为字符串类型', trigger: 'change' },
+            { required: false, type: 'string', message: '建立人 值不能为空', trigger: 'change' },
+            { required: false, type: 'string', message: '建立人 值不能为空', trigger: 'blur' },
+        ],
+        createdate: [
+            { type: 'string', message: '建立时间 值必须为字符串类型', trigger: 'change' },
+            { required: false, type: 'string', message: '建立时间 值不能为空', trigger: 'change' },
+            { required: false, type: 'string', message: '建立时间 值不能为空', trigger: 'blur' },
+        ],
+        updateman: [
+            { type: 'string', message: '更新人 值必须为字符串类型', trigger: 'change' },
+            { required: false, type: 'string', message: '更新人 值不能为空', trigger: 'change' },
+            { required: false, type: 'string', message: '更新人 值不能为空', trigger: 'blur' },
+        ],
+        updatedate: [
+            { type: 'string', message: '更新时间 值必须为字符串类型', trigger: 'change' },
+            { required: false, type: 'string', message: '更新时间 值不能为空', trigger: 'change' },
+            { required: false, type: 'string', message: '更新时间 值不能为空', trigger: 'blur' },
+        ],
+    }
+
+    /**
+     * 详情模型集合
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    public detailsModel: any = {
+        entity5name: new FormItemModel({ caption: '实体5名称', detailType: 'FORMITEM', name: 'entity5name', visible: true, isShowCaption: true, form: this, disabled: false,error:"",isEmptyCaption:"false",validateStatus:"",required:false,enableCond: 3 })
+,
+        group1: new FormGroupPanelModel({ caption: '实体5基本信息', detailType: 'GROUPPANEL', name: 'group1', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', langbase: '', extractMode: 'ITEM', details: [] } })
+,
+        formpage1: new FormPageModel({ caption: '基本信息', detailType: 'FORMPAGE', name: 'formpage1', visible: true, isShowCaption: true, form: this })
+,
+        createman: new FormItemModel({ caption: '建立人', detailType: 'FORMITEM', name: 'createman', visible: true, isShowCaption: true, form: this, disabled: false,error:"",isEmptyCaption:"false",validateStatus:"",required:false,enableCond: 3 })
+,
+        createdate: new FormItemModel({ caption: '建立时间', detailType: 'FORMITEM', name: 'createdate', visible: true, isShowCaption: true, form: this, disabled: false,error:"",isEmptyCaption:"false",validateStatus:"",required:false,enableCond: 3 })
+,
+        updateman: new FormItemModel({ caption: '更新人', detailType: 'FORMITEM', name: 'updateman', visible: true, isShowCaption: true, form: this, disabled: false,error:"",isEmptyCaption:"false",validateStatus:"",required:false,enableCond: 3 })
+,
+        updatedate: new FormItemModel({ caption: '更新时间', detailType: 'FORMITEM', name: 'updatedate', visible: true, isShowCaption: true, form: this, disabled: false,error:"",isEmptyCaption:"false",validateStatus:"",required:false,enableCond: 3 })
+,
+        group2: new FormGroupPanelModel({ caption: '操作信息', detailType: 'GROUPPANEL', name: 'group2', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', langbase: '', extractMode: 'ITEM', details: [] } })
+,
+        formpage2: new FormPageModel({ caption: '其它', detailType: 'FORMPAGE', name: 'formpage2', visible: true, isShowCaption: true, form: this })
+,
+        form: new FormTabPanelModel({ caption: 'form', detailType: 'TABPANEL', name: 'form', visible: true, isShowCaption: true, form: this, tabPages: [{ name: 'formpage1', index: 0, visible: true }, { name: 'formpage2', index: 1, visible: true }] }),
+    }
+
+    /**
+      * 代码表模型
+      *
+      * @type {*}
+      * @memberof Main
+      */      
+    public codelistModel:any = {
+      }
+
+    /**
+     * 表单逻辑
+     *
+     * @private
+     * @param { name, newVal, oldVal }
+     * @memberof Main
+     */
+    private formLogic(name: string, newVal: any, oldVal?: any): void {
+                
+
+
+
+
+
+
+
+
+
+    }
+
+
+    /**
+     * 表单分页切换
+     *
+     * @param {string} key 分页标识
+     * @memberof Main
+     */
+    public tabChange(key: string): void {
+        if (this.props.tabChange) {
+            this.props.tabChange(key);
+        }
+    }
+
+    /**
+     * 表单值变化事件
+     *
+     * @memberof Main
+     */
+    public formItemChange(item: string, value: any, isFirst?: boolean) {
+        this.data[item] = value;
+        this.formLogic(item, value);
+        if (!isFirst) {
+            this.validateItem(item, value);
+            if (this.props.formItemChange) {
+                this.props.formItemChange({name:item,value:value});
+            }
+        }
+        this.tick();
+    }
+
+    /**
+     * 按钮点击事件
+     *
+     * @memberof Main
+     */
+    public buttonClick($event:any,value:String){
+        message.info('点击了'+value);
+    }
+
+    /**
+     * 初始化表单
+     * 
+     * @memberof Main
+     */
+    public initForm() {
+        if (Object.keys(this.data).length > 0) {
+            Object.keys(this.data).forEach((item) => {
+                this.formItemChange(item, this.data[item], true);
+            })
+        }
+    }
+
+    /**
+     * 校验单个表单项
+     * @param item 
+     * @param value 
+     */
+    public validateItem(item: string, value: any) {
+        // 做校验
+        // 1.获取数值和规则
+        const rule = this.rules[item];
+        // 2.创建校验规则
+        const schema = new Schema({ [item]: rule })
+        // 校验返回Promise
+        return schema.validate({ [item]: value },undefined,errors => {
+            if (errors) {
+                // 有错
+                this.detailsModel[item].setError(errors[0].message);
+            } else {
+                this.detailsModel[item].setError('');
+            }
+        })
+    }
+
+    /**
+     * 校验表单
+     * 
+     * @memberof Main
+     */
+    public validateForm(callback:Function) {
+        let tasks: any;
+        if (Object.keys(this.data).length > 0) {
+            tasks = Object.keys(this.data).map((item) => {
+                this.validateItem(item, this.data[item]);
+            })
+        }
+        Promise.all(tasks)
+            .then(() => callback(true))
+            .catch(() => callback(false))
+    }
+
+    /**
+     * 绘制内容
+     *
+     * @returns
+     * @memberof Main
+     */
+    public render(): any {
+        return <>
+            <div className="ibiz-form main">
+                <Form layout="inline">
+                    <Tabs defaultActiveKey="1" onChange={(key: string) => this.tabChange(key)}>
+                        <TabPane 
+                            tab={
+                                <span className='caption'>
+                                    基本信息
+                                </span>
+                            } 
+                            key="0">
+                                {this.detailsModel.group1.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+            <Collapse defaultActiveKey={['group1']} className=''>
+        <Panel header="实体5基本信息" key="group1">
+            <Row>
+                    
+            {this.detailsModel.entity5name.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+                    <div className={`app-form-item app-form-item-left`}>
+                {this.detailsModel.entity5name.isShowCaption && !this.detailsModel.entity5name.isEmptyCaption ?
+                    <div className="app-form-item-label" style={{ width: '130px' }}>
+                        {this.detailsModel.entity5name.required ? <span className="isrequired">*</span> : ""}实体5名称
+                    </div> : ""}
+                <div className="app-form-item-container" style={{ width: "calc(100% - 130px)" }}>
+                    <Form.Item    key={'entity5name'}  validateStatus={this.detailsModel.entity5name.validateStatus} help={this.detailsModel.entity5name.error}>
+                    <Input id={'entity5name'} disabled={this.detailsModel.entity5name.disabled} value={this.data.entity5name}     onChange={($event) =>{this.formItemChange('entity5name',$event.target.value)}}/>
+                    </Form.Item>
+                </div>
+            </div> 
+            
+                </Col>:""}
+            
+                </Row>
+        </Panel>
+    </Collapse>
+        </Col>:""}
+
+                        </TabPane>
+                        <TabPane 
+                            tab={
+                                <span className='caption'>
+                                    其它
+                                </span>
+                            } 
+                            key="1">
+                                {this.detailsModel.group2.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+            <Collapse defaultActiveKey={['group2']} className=''>
+        <Panel header="操作信息" key="group2">
+            <Row>
+                    
+            {this.detailsModel.createman.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+                    <div className={`app-form-item app-form-item-left`}>
+                {this.detailsModel.createman.isShowCaption && !this.detailsModel.createman.isEmptyCaption ?
+                    <div className="app-form-item-label" style={{ width: '130px' }}>
+                        {this.detailsModel.createman.required ? <span className="isrequired">*</span> : ""}建立人
+                    </div> : ""}
+                <div className="app-form-item-container" style={{ width: "calc(100% - 130px)" }}>
+                    <Form.Item    key={'createman'}  validateStatus={this.detailsModel.createman.validateStatus} help={this.detailsModel.createman.error}>
+                    <span>{this.data.createman}</span>
+                    </Form.Item>
+                </div>
+            </div> 
+            
+                </Col>:""}
+                {this.detailsModel.createdate.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+                    <div className={`app-form-item app-form-item-left`}>
+                {this.detailsModel.createdate.isShowCaption && !this.detailsModel.createdate.isEmptyCaption ?
+                    <div className="app-form-item-label" style={{ width: '130px' }}>
+                        {this.detailsModel.createdate.required ? <span className="isrequired">*</span> : ""}建立时间
+                    </div> : ""}
+                <div className="app-form-item-container" style={{ width: "calc(100% - 130px)" }}>
+                    <Form.Item    key={'createdate'}  validateStatus={this.detailsModel.createdate.validateStatus} help={this.detailsModel.createdate.error}>
+                    <span>{this.data.createdate}</span>
+                    </Form.Item>
+                </div>
+            </div> 
+            
+                </Col>:""}
+                {this.detailsModel.updateman.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+                    <div className={`app-form-item app-form-item-left`}>
+                {this.detailsModel.updateman.isShowCaption && !this.detailsModel.updateman.isEmptyCaption ?
+                    <div className="app-form-item-label" style={{ width: '130px' }}>
+                        {this.detailsModel.updateman.required ? <span className="isrequired">*</span> : ""}更新人
+                    </div> : ""}
+                <div className="app-form-item-container" style={{ width: "calc(100% - 130px)" }}>
+                    <Form.Item    key={'updateman'}  validateStatus={this.detailsModel.updateman.validateStatus} help={this.detailsModel.updateman.error}>
+                    <span>{this.data.updateman}</span>
+                    </Form.Item>
+                </div>
+            </div> 
+            
+                </Col>:""}
+                {this.detailsModel.updatedate.visible?<Col style={{}}  lg={{ span: 24, offset: 0}}>
+                    <div className={`app-form-item app-form-item-left`}>
+                {this.detailsModel.updatedate.isShowCaption && !this.detailsModel.updatedate.isEmptyCaption ?
+                    <div className="app-form-item-label" style={{ width: '130px' }}>
+                        {this.detailsModel.updatedate.required ? <span className="isrequired">*</span> : ""}更新时间
+                    </div> : ""}
+                <div className="app-form-item-container" style={{ width: "calc(100% - 130px)" }}>
+                    <Form.Item    key={'updatedate'}  validateStatus={this.detailsModel.updatedate.validateStatus} help={this.detailsModel.updatedate.error}>
+                    <span>{this.data.updatedate}</span>
+                    </Form.Item>
+                </div>
+            </div> 
+            
+                </Col>:""}
+            
+                </Row>
+        </Panel>
+    </Collapse>
+        </Col>:""}
+
+                        </TabPane>
+                    </Tabs>
+                </Form>
+            </div>
+        </>;
+    }
+
+    /**
+     * 变更监测
+     *
+     * @protected
+     * @memberof Main
+     */
+    protected tick(): void {
+        this.setState({
+            date: new Date()
+        });
+    }
+
+}
\ No newline at end of file

app_Default/src/ibizsys/components/app-rich-text-editor/app-rich-text-editor.tsx

@@ -197,10 +197,10 @@ export default class AppRichTextEditor extends PureComponent<RichTextProps> {
                 { text: "C#", value: "csharp" },
                 { text: "C++", value: "cpp" }
             ],
-            codesample_content_css: "https://cdn.ibizlab.cn/super-form/tinymce/prism.css",
-            skin_url: "https://cdn.ibizlab.cn/super-form/tinymce/skins/lightgray",
+            codesample_content_css: "assets/tinymce/prism.css",
+            skin_url: "assets/tinymce/skins/lightgray",
             language_url:
-                "https://cdn.ibizlab.cn/super-form/tinymce/langs/" +
+                "assets/tinymce/langs/" +
                 (this.langu ? this.langu : "zh_CN") +
                 ".js",
             setup: editor => {

app_Default/src/index.tsx

@@ -7,6 +7,7 @@ import { ConfigProvider } from 'antd';
 import zhCN from 'antd/es/locale/zh_CN';
 import moment from 'moment';
 import 'moment/locale/zh-cn';
+import 'antd/dist/antd.css';
 moment.locale('zh-cn');
 
 ReactDOM.render(<ConfigProvider locale={zhCN}><App/></ConfigProvider>, document.getElementById('root'));

app_Default/src/pages/module/entity-edit-view/entity-edit-view.less

+// this is less

app_Default/src/pages/module/entity-edit-view/entity-edit-view.tsx

+import React, { PureComponent } from 'react';
+import './entity-edit-view.less';
+import Mainform from '../../../forms/entity/main/main';
+
+/**
+ * EntityEditView
+ *
+ * @export
+ * @class EntityEditView
+ * @extends {PureComponent}
+ */
+export default class EntityEditView extends PureComponent {
+
+    public formData = {
+        "bookname":"test1",
+        "input":"文本test",
+        "label":"标签test",
+        "group1":"书籍基本信息test",
+        "formpage1":"基本信息test",
+        "createman":"建立人test",
+        "createdate":"建立时间test",
+        "updateman":"更新人test",
+        "updatedate":"更新时间test",
+        "group2":"操作信息test",
+        "formpage2":"其它test"
+    }
+
+    /**
+     * 绘制内容
+     *
+     * @returns
+     * @memberof EntityEditView
+     */
+    public render() {
+        return <>
+            <div>
+                <Mainform  data={{}}  formItemChange={(value:any) =>{this.formItemChange(value)}}></Mainform>
+            </div>
+        </>;
+    }
+
+    /**
+     * 表单项变化
+     * @param value 
+     */
+    public formItemChange(value:any){
+        console.log(value);
+    }
+
+}
\ No newline at end of file

app_Default/src/pages/module2/entity2-edit-view/entity2-edit-view.less

+// this is less

app_Default/src/pages/module2/entity2-edit-view/entity2-edit-view.tsx

+import React, { PureComponent } from 'react';
+import './entity2-edit-view.less';
+import Mainform from '../../../forms/entity2/main/main';
+
+/**
+ * Entity2EditView
+ *
+ * @export
+ * @class Entity2EditView
+ * @extends {PureComponent}
+ */
+export default class Entity2EditView extends PureComponent {
+
+    public formData = {
+        "bookname":"test1",
+        "input":"文本test",
+        "label":"标签test",
+        "group1":"书籍基本信息test",
+        "formpage1":"基本信息test",
+        "createman":"建立人test",
+        "createdate":"建立时间test",
+        "updateman":"更新人test",
+        "updatedate":"更新时间test",
+        "group2":"操作信息test",
+        "formpage2":"其它test"
+    }
+
+    /**
+     * 绘制内容
+     *
+     * @returns
+     * @memberof Entity2EditView
+     */
+    public render() {
+        return <>
+            <div>
+                <Mainform  data={{}}  formItemChange={(value:any) =>{this.formItemChange(value)}}></Mainform>
+            </div>
+        </>;
+    }
+
+    /**
+     * 表单项变化
+     * @param value 
+     */
+    public formItemChange(value:any){
+        console.log(value);
+    }
+
+}
\ No newline at end of file

app_Default/src/pages/module3/entity3-edit-view/entity3-edit-view.less

+// this is less

app_Default/src/pages/module3/entity3-edit-view/entity3-edit-view.tsx

+import React, { PureComponent } from 'react';
+import './entity3-edit-view.less';
+import Mainform from '../../../forms/entity3/main/main';
+
+/**
+ * Entity3EditView
+ *
+ * @export
+ * @class Entity3EditView
+ * @extends {PureComponent}
+ */
+export default class Entity3EditView extends PureComponent {
+
+    public formData = {
+        "bookname":"test1",
+        "input":"文本test",
+        "label":"标签test",
+        "group1":"书籍基本信息test",
+        "formpage1":"基本信息test",
+        "createman":"建立人test",
+        "createdate":"建立时间test",
+        "updateman":"更新人test",
+        "updatedate":"更新时间test",
+        "group2":"操作信息test",
+        "formpage2":"其它test"
+    }
+
+    /**
+     * 绘制内容
+     *
+     * @returns
+     * @memberof Entity3EditView
+     */
+    public render() {
+        return <>
+            <div>
+                <Mainform  data={{}}  formItemChange={(value:any) =>{this.formItemChange(value)}}></Mainform>
+            </div>
+        </>;
+    }
+
+    /**
+     * 表单项变化
+     * @param value 
+     */
+    public formItemChange(value:any){
+        console.log(value);
+    }
+
+}
\ No newline at end of file

app_Default/src/pages/module4/entity4-edit-view/entity4-edit-view.less

+// this is less

app_Default/src/pages/module4/entity4-edit-view/entity4-edit-view.tsx

+import React, { PureComponent } from 'react';
+import './entity4-edit-view.less';
+import Mainform from '../../../forms/entity4/main/main';
+
+/**
+ * Entity4EditView
+ *
+ * @export
+ * @class Entity4EditView
+ * @extends {PureComponent}
+ */
+export default class Entity4EditView extends PureComponent {
+
+    public formData = {
+        "bookname":"test1",
+        "input":"文本test",
+        "label":"标签test",
+        "group1":"书籍基本信息test",
+        "formpage1":"基本信息test",
+        "createman":"建立人test",
+        "createdate":"建立时间test",
+        "updateman":"更新人test",
+        "updatedate":"更新时间test",
+        "group2":"操作信息test",
+        "formpage2":"其它test"
+    }
+
+    /**
+     * 绘制内容
+     *
+     * @returns
+     * @memberof Entity4EditView
+     */
+    public render() {
+        return <>
+            <div>
+                <Mainform  data={{}}  formItemChange={(value:any) =>{this.formItemChange(value)}}></Mainform>
+            </div>
+        </>;
+    }
+
+    /**
+     * 表单项变化
+     * @param value 
+     */
+    public formItemChange(value:any){
+        console.log(value);
+    }
+
+}
\ No newline at end of file

app_Default/src/pages/module5/entity5-edit-view/entity5-edit-view.less

+// this is less

app_Default/src/pages/module5/entity5-edit-view/entity5-edit-view.tsx

+import React, { PureComponent } from 'react';
+import './entity5-edit-view.less';
+import Mainform from '../../../forms/entity5/main/main';
+
+/**
+ * Entity5EditView
+ *
+ * @export
+ * @class Entity5EditView
+ * @extends {PureComponent}
+ */
+export default class Entity5EditView extends PureComponent {
+
+    public formData = {
+        "bookname":"test1",
+        "input":"文本test",
+        "label":"标签test",
+        "group1":"书籍基本信息test",
+        "formpage1":"基本信息test",
+        "createman":"建立人test",
+        "createdate":"建立时间test",
+        "updateman":"更新人test",
+        "updatedate":"更新时间test",
+        "group2":"操作信息test",
+        "formpage2":"其它test"
+    }
+
+    /**
+     * 绘制内容
+     *
+     * @returns
+     * @memberof Entity5EditView
+     */
+    public render() {
+        return <>
+            <div>
+                <Mainform  data={{}}  formItemChange={(value:any) =>{this.formItemChange(value)}}></Mainform>
+            </div>
+        </>;
+    }
+
+    /**
+     * 表单项变化
+     * @param value 
+     */
+    public formItemChange(value:any){
+        console.log(value);
+    }
+
+}
\ No newline at end of file