trunk/pc4mobx/organization/components/fieldDefinedSet/FieldDefined.js

import '../../style/index.less';
import React, {
    Component
} from 'react';
import * as mobx from 'mobx'
import {
    inject,
    observer
} from 'mobx-react';
import {
    WeaTop,
    WeaTab,
    WeaAlertPage,
    WeaLeftTree,
    WeaLeftRightLayout,
    WeaDropdown,
    WeaRightMenu,
    WeaTableEdit,
    WeaDialog

} from 'ecCom';
import { Spin, Button } from 'antd';

import {
    i18n
} from '../../public/i18n';
import FormInfo from './FormInfo';
const { ButtonSelect } = WeaDropdown;
const toJS = mobx.toJS;


@inject('fieldDefined')
@observer
export default class FieldDefined extends Component {
    constructor(props) {
        super(props);
        this.setState = {

        }
    }

    componentDidMount() {
        this.init(this.props);
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.location.key !== nextProps.location.key) {
            this.init(nextProps);
        }
    }

    init = (props) => {
        const {
            fieldDefined: store,
            params
        } = props, {
            // checkAuthorized,
            //initData,
            initResourceData
        } = store, {
            type: moduleType
        } = params
        let moduleName, logSmallType;
        if (moduleType === 'subCompany') {
            moduleName = 'subcompanyfielddefined';
        } else if (moduleType === 'department') {
            moduleName = 'departmentfielddefined';
        } else if (moduleType === 'job') {
            moduleName = 'jobfielddefined';
        } else {
            moduleName = 'resourcefielddefined';
        }
        initResourceData(moduleName);
        //checkAuthorized(moduleName, null, callbackFunc);
    }

    getDropMenuDatas() {
        const {
            fieldDefined
        } = this.props;
        const {
            rightMenu
        } = fieldDefined;

        let menus = [];
        toJS(rightMenu).map((item, index) => {
            let obj = {
                key: item.menuFun,
                icon: <i className={`${item.menuIcon}`} />,
                content: item.menuName,
            }
            if (item.menuFun == 'collection' || item.menuFun == 'help' || item.menuFun == 'pageAddress') {
                obj.disabled = true;
            }
            menus.push(obj);
        })
        return menus;
    }

    getTopMenuBtns() {
        const {
            fieldDefined
        } = this.props;
        const {
            topMenu,
        } = fieldDefined;

        let btns = [];
        topMenu.map((item, i) => {
            btns.push(<Button type='primary' onClick={() => this.handleClick(item)}>{item.menuName}</Button>);
        });

        return btns;
    }

    handleClick(item) {
        const {
            fieldDefined
        } = this.props;
        this[item.menuFun] && this[item.menuFun]();
    }

    new() {
        const {
            fieldDefined
        } = this.props;
        fieldDefined.editGroup();
    }

    onTabChange = tabKey => {
        const {
            fieldDefined
        } = this.props;
        fieldDefined.onTabChange(tabKey);
    }

    onTabEdit = (tabKey, type) => {
        debugger
        console.log('onTabEdit: ', tabKey, type);
    }

    render() {


        const {
            fieldDefined: store,
            params
        } = this.props, {
            spinning,
            refreshMainTabComponent,
            treeConfig,
            formTarget,
            tabInfo,
            tabKey,
            setEditTable,
            tableEditConfig,
            dialogParams,
            setDialogVisible,
            getDialogOpButtons,
            editorDialogRightMenu,

        } = store, {
            type: moduleType
        } = params,
            title = moduleType === 'subCompany' ? i18n.module.subCompanyFieldDef() : moduleType === 'department' ? i18n.module.departmentFieldDef() : i18n.module.resourceFieldDef(),
            topProps = {
                title,
                icon: <i className='icon-coms-hrm' />,
                iconBgcolor: '#217346',
                showDropIcon: true,
                buttons: this.getTopMenuBtns(),
                dropMenuDatas: this.getDropMenuDatas(),

            };
        let children = [];
        
        //tabprops
        let tabsData = cloneDeep(tabConfig.tabs) || [];
        let tabProps = {
            type: 'editable-inline',
            datas: tabsData,
            keyParam: tabConfig.keyParam,
            selectedKey: tabConfig.activeTabKey,
            onChange: tabChangeHandle,
            leftStyle
        }

        //end

        const {
            groupInfoFrom,
            groupInfoFromFields,
            childInfoForm,
            childInfoFormFields
        } = formTarget;

        const {
            editGroupInfo,
            groupInfoSetting,
            createChildInfo,
            childInfoSetting
        } = dialogParams;


        const {
            data,
            onSelectedTreeNode,
            selectedKeys,
            onExpand,
            treeExpandKeys
        } = store.toJS(treeConfig);
        const treeCom = (
            <WeaLeftTree ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftTree@ifgbi1`}
                datas={data}
                onSelect={onSelectedTreeNode}
                selectedKeys={selectedKeys}
                onExpand={onExpand}
                expandedKeys={treeExpandKeys} />
        )
        children = [
            (
                <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@hwytf7`} spinning={spinning}>
                    <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@rdv0wt`} {...topProps}>
                        <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@q6b87k`} leftCom={treeCom}>
                            
                            <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@9c3zts`}
                                leftStyle={{ width: '100%' }}
                                rightStyle={{ display: 'none' }}
                                type='editable-inline'
                                keyParam='tabKey'
                                showAddBtn={false}
                                datas={tabInfo}
                                selectedKey={tabKey}
                                onChange={this.onTabChange}
                                onEdit={this.onTabEdit}
                            />
                            {
                                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@k6oc4u`}
                                    datas={this.getDropMenuDatas()}
                                >
                                    <WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@b813my@`} viewAttr={3} rowKey={'fieldidrowKey'}
                                        ref={(editTable) => setEditTable(editTable, 'fieldDef')}
                                        {...tableEditConfig['fieldDef']}
                                    />
                                </WeaRightMenu>
                            }
                            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@etbstc`}
                                icon="icon-coms-hrm"
                                iconBgcolor="#217346"
                                style={{ width: 440, height: 70 }}
                                title={editGroupInfo.title}
                                visible={editGroupInfo.visible}
                                onCancel={() => setDialogVisible('editGroupInfo', false)}
                                buttons={getDialogOpButtons()}
                                moreBtn={{ datas: editorDialogRightMenu }}
                            >
                                <FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@x4akor`} center={false} form={groupInfoFrom} formFields={groupInfoFromFields} menu={editorDialogRightMenu} />
                            </WeaDialog>
                        </WeaLeftRightLayout>
                    </WeaTop>
                </Spin>
            )
        ]


        return (
            <div className="hrm_module_container fieldDef">
                {children}
            </div>
        )
    }
}