自定义设置test

This commit is contained in:
Chengliang 2022-06-10 17:51:55 +08:00
parent 5bfb129380
commit aa499d7855
11 changed files with 2494 additions and 412 deletions

View File

@ -0,0 +1,143 @@
import React, {
Component
} from 'react';
import {
Button,
Form,
Row,
Col
} from 'antd';
import {
WeaFormItem,
WeaNewScroll,
WeaSearchGroup,
} from 'ecCom';
import {
WeaSwitch
} from 'comsMobx';
import _ from 'lodash';
export default class AdvanceSearchFormInfo extends Component {
renderForm = () => {
const {
form,
formFields,
itemRender
} = this.props;
let arr = [];
let formParams = form.getFormParams();
formFields.map(c => {
let _arr = [];
c.items.map((field, index) => {
const customerRender = itemRender != null ? itemRender[field.domkey[0]] : null;
const itemProps = {
ratio1to2: true,
label: field.label,
labelCol: {
span: `${window.HrmEngineLabelCol}`
},
error: form.getError(field),
tipPosition: 'bottom',
wrapperCol: {
span: `${window.HrmEngineWrapperCol}`
}
}
let coms;
if (customerRender == null) {
coms = <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@2tsobq@${index}`} fieldConfig={field} form={form}/>;
} else {
coms = customerRender(field, form, formParams);
}
coms != null && _arr.push(
(
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@xgrs6h@${index}`} span={11} offset={index % 2 === 0 ? 1 : 0}>
<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@l40w8j@${index}`}
ratio1to2
label={`${field.label}`}
labelCol={{span: `${window.HrmEngineLabelCol}`}}
error={form.getError(field)}
tipPosition={'bottom'}
wrapperCol={{span: `${window.HrmEngineWrapperCol}`}}
>
{coms}
</WeaFormItem>
</Col>
)
)
if (_arr.length === 2 || index === c.items.length - 1) {
const clone = [..._arr];
_arr.length = 0;
arr.push(<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@s73jjd@${index}`} gutter={8} style={{marginTop: '10px'}}>{clone}</Row>);
}
})
})
return <Form ecId={`${this && this.props && this.props.ecId || ''}_Form@ojbzkx`}>{arr}</Form>;
}
renderGroupForm = () => {
const {
form,
formFields,
itemRender
} = this.props;
let formParams = form.getFormParams();
let arr = [];
formFields.map((c, i) => {
let _arr = [];
c.items.map((field, index) => {
const customerRender = itemRender != null ? itemRender[field.domkey[0]] : null;
const itemProps = {
ratio1to2: true,
label: field.label,
labelCol: {
span: `${window.HrmEngineLabelCol}`
},
error: form.getError(field),
tipPosition: 'bottom',
wrapperCol: {
span: `${window.HrmEngineWrapperCol}`
}
}
let coms;
if (customerRender == null) {
coms = <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@baa9pz@${index}`} fieldConfig={field} form={form}/>;
} else {
coms = customerRender(field, form, formParams);
}
coms != null && _arr.push({
com: (
<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@t6u2oa@${index}`}
ratio1to2
label={`${field.label}`}
labelCol={{span: `${window.HrmEngineLabelCol}`}}
error={form.getError(field)}
wrapperCol={{span: `${window.HrmEngineWrapperCol}`}}
>
{coms}
</WeaFormItem>
),
col: field.colSpan || 2
})
})
arr.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@w7lkbb@${i}`} showGroup={c.defaultshow} items={_arr} fontSize={13}/>);
})
return arr;
}
renderFormComponent = () => {
const {
formFields
} = this.props;
const com = formFields.length > 1 ? this.renderGroupForm() : this.renderForm();
return com;
}
render() {
return (
<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@sx3az2`} height={'100%'}>
{this.renderGroupForm()}
</WeaNewScroll>
)
}
}

View File

@ -0,0 +1,26 @@
import React, {Component} from 'react';
import {observer} from 'mobx-react';
import { WeaDialog } from "ecCom";
import Tip from './Tip';
import FormInfo from './FormInfo';
@observer
export default class EncryptSetting extends Component{
render(){
const {store} = this.props;
const {encryptDialogProps, formTarget, encryptFormItemRender} = store;
const {
encryptForm,
encryptFormFields,
} = formTarget;
return (
<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@9corpv`} {...encryptDialogProps}>
<Tip ecId={`${this && this.props && this.props.ecId || ''}_Tip@p2simx`} />
<div className='encryptForm' style={{width: '70%', marginLeft: '15%'}}>
<FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@0dc7ac`} center={false} form={encryptForm} formFields={encryptFormFields} itemRender={encryptFormItemRender}/>
</div>
</WeaDialog>
)
}
}

View File

@ -0,0 +1,178 @@
import React, {
Component
} from 'react';
import {
observer
} from 'mobx-react';
import {
WeaRightMenu,
WeaTableEdit,
WeaDialog
} from 'ecCom';
import classnames from 'classnames';
import EncryptSetting from './EncryptSetting';
import ViewRangeForm from './ViewRangeForm';
import ViewRangeSetting from './ViewRangeSetting';
import FormInfo from './FormInfo';
@observer
export default class FieldDef extends Component {
constructor(props) {
super(props);
this.state = {
resize: new Date().getTime()
}
}
componentDidMount() {
window.addEventListener('resize', this.resizeHandle);
}
componentWillUnmount() {
window.removeEventListener('resize', this.resizeHandle);
}
resizeHandle = (e) => {
this.setState({
resize: new Date().getTime()
})
}
render() {
const {
resize
} = this.state;
const {
rightMenu,
store,
resetClass
} = this.props;
const {
setEditTable,
tableEditConfig,
formTarget,
dialogParams,
setDialogVisible,
getDialogOpButtons,
showError,
editorDialogRightMenu,
refreshFeildDef,
refreshForm,
dropdownSelectedKey,
moduleName,
isJobTreeNode
} = store;
const classes = classnames({
['tabPane']: true,
['tabPane-include']: resetClass
})
const {
groupInfoFrom,
groupInfoFromFields,
childInfoForm,
childInfoFormFields
} = formTarget;
const {
editGroupInfo,
groupInfoSetting,
createChildInfo,
childInfoSetting
} = dialogParams;
let tableProps = {};
if (this.tabDom) {
tableProps = {
scroll: {
y: this.tabDom.offsetHeight - 80,
}
}
//人员卡片字段定义页面
if (moduleName === 'resourcefielddefined') {
if ((window.e9_locale.userLanguage == 7)) { //系统语言为中文
Object.assign(tableProps.scroll, {
x: 1200
});
} else {
Object.assign(tableProps.scroll, {
x: isJobTreeNode ? 1400 : 1900
});
}
}
}
const rMenu = [...rightMenu, ...store.getBasicMenus(this.props.logSmallType, this.props.targetId)]
return (
<div className={classes} ref={dom => {this.tabDom = dom}}>
<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@43qdk8`} datas={rMenu}>
<WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@5fu5eh`} tableProps={tableProps} viewAttr={3} rowKey={'fieldidrowKey'}
ref={(editTable) => setEditTable(editTable, 'fieldDef')}
{...tableEditConfig['fieldDef']}
/>
</WeaRightMenu>
<EncryptSetting ecId={`${this && this.props && this.props.ecId || ''}_EncryptSetting@imlc4x`} store={store} />
<ViewRangeSetting ecId={`${this && this.props && this.props.ecId || ''}_ViewRangeSetting@2vmdra`} store={store} />
<ViewRangeForm ecId={`${this && this.props && this.props.ecId || ''}_ViewRangeForm@bg4o68`} store={store} />
<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>
<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@hxqf4v`}
icon="icon-coms-hrm"
iconBgcolor="#217346"
style={{width: 620, height: 450}}
title={groupInfoSetting.title}
visible={groupInfoSetting.visible}
onCancel={() => setDialogVisible('groupInfoSetting', false, '')}
buttons={getDialogOpButtons()}
moreBtn={{datas:editorDialogRightMenu}}
>
<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@u3ghz1`} datas={editorDialogRightMenu}>
<WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@9x9otf`}
ref={(editTable) => setEditTable(editTable, 'groupSetting')}
tableProps={{scroll: {y: 360}}}
{...tableEditConfig['groupSetting']}/>
</WeaRightMenu>
</WeaDialog>
<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@dirux3`}
icon="icon-coms-hrm"
iconBgcolor="#217346"
style={{width: 440, height: createChildInfo.height}}
title={createChildInfo.title}
visible={createChildInfo.visible}
onCancel={() => setDialogVisible('createChildInfo', false)}
buttons={getDialogOpButtons()}
moreBtn={{datas:editorDialogRightMenu}}
>
<FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@mypkxi`} center={false} form={childInfoForm} formFields={childInfoFormFields} menu={editorDialogRightMenu}/>
</WeaDialog>
<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@k8ta6q`}
icon="icon-coms-hrm"
iconBgcolor="#217346"
style={{width: 620, height: 450}}
title={childInfoSetting.title}
visible={childInfoSetting.visible}
onCancel={() => setDialogVisible('childInfoSetting', false, '')}
buttons={getDialogOpButtons()}
moreBtn={{datas:editorDialogRightMenu}}
>
<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@i9bjcx`} datas={editorDialogRightMenu}>
<WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@mma0l9`}
ref={(editTable) => setEditTable(editTable, 'childInfoSetting')}
tableProps={{scroll: {y: 360}}}
{...tableEditConfig['childInfoSetting']}/>
</WeaRightMenu>
</WeaDialog>
</div>
)
};
}

View File

@ -1,272 +1,210 @@
import '../../style/index.less'; import '../../style/index.less';
import React, { import React, {
Component Component
} from 'react'; } from 'react';
import * as mobx from 'mobx'
import { import {
inject, inject,
observer observer
} from 'mobx-react'; } from 'mobx-react';
import { import {
WeaTop, WeaTop,
WeaTab, WeaAlertPage,
WeaAlertPage, WeaLeftTree,
WeaLeftTree, WeaLeftRightLayout,
WeaLeftRightLayout, WeaDropdown
WeaDropdown,
WeaRightMenu,
WeaTableEdit,
WeaDialog
} from 'ecCom'; } from 'ecCom';
import { Spin, Button } from 'antd'; import {Spin} from 'antd';
import Tabs from './Tabs';
import FieldDef from './FieldDef';
import { import {
i18n i18n
} from '../../public/i18n'; } from '../../public/i18n';
import FormInfo from './FormInfo';
const { ButtonSelect } = WeaDropdown; const { ButtonSelect } = WeaDropdown;
const toJS = mobx.toJS;
@inject('fieldDefined') @inject('fieldDefined')
@observer @observer
export default class FieldDefined extends Component { export default class FieldDefined extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.setState = { this.state = {
logSmallType: ''
}
}
} componentDidMount() {
} this.init(this.props);
}
componentDidMount() { componentWillReceiveProps(nextProps) {
this.init(this.props); if (this.props.location.key !== nextProps.location.key) {
} this.init(nextProps);
}
}
componentWillReceiveProps(nextProps) { init = (props) => {
if (this.props.location.key !== nextProps.location.key) { const {
this.init(nextProps); fieldDefined: store,
} params
} } = props, {
checkAuthorized,
initData,
initResourceData
} = store, {
type: moduleType
} = params
let moduleName, logSmallType;
if(moduleType === 'subCompany'){
moduleName = 'subcompanyfielddefined';
logSmallType = 'HRM_ENGINE_SUBCOMPANYFIELDDEFINED';
}else if(moduleType === 'department'){
moduleName = 'departmentfielddefined';
logSmallType = 'HRM_ENGINE_DEPARTMENTFIELDDEFINED';
}else{
moduleName = 'resourcefielddefined';
logSmallType = 'HRM_ENGINE_RESOURCEFIELDDEFINED';
}
let callbackFunc = () => initData(false, true, moduleName);
if (moduleType === 'resource')
callbackFunc = () => initResourceData(moduleName);
checkAuthorized(moduleName, null, callbackFunc);
this.setState({logSmallType})
}
init = (props) => { tabChangeHandle = (key) => {
const { const {
fieldDefined: store, fieldDefined: store
params } = this.props, {
} = props, { tabConfig
// checkAuthorized, } = store;
//initData, store.setActiveTab(tabConfig, key);
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() { render() {
const { const {
fieldDefined fieldDefined: store,
} = this.props; params
const { } = this.props, {
rightMenu containerInitFinished,
} = fieldDefined; refreshMainTabComponent,
spinning
} = store, {
type: moduleType
} = params, {
tabConfig,
btnsAndMenus,
formTarget,
activeTabInfo,
treeConfig,
refreshTree,
selectedTreeNodeInfo,
dropdownProps,
feildDefRemoveable
} = store, {
btns,
menus,
tabBtnDef
} = btnsAndMenus(tabConfig), {
conditionForm: form,
conditionFormFields: fields,
} = formTarget, tabProps = {
tabConfig: tabConfig,
tabChangeHandle: this.tabChangeHandle,
activeTabInfo,
rightMenu: menus,
store: store,
conditionForm: form,
conditionFormFields: fields,
tabBtnDef: [
...tabBtnDef,
<ButtonSelect ecId={`${this && this.props && this.props.ecId || ''}_ButtonSelect@qbn2pl`}
{...dropdownProps()}
btnProps={{
style: { padding: 0, background: 'transparent', border: 'none', color: feildDefRemoveable ? '#dadada': '#34A2FF', fontSize: 20, marginTop: 2},
disabled: feildDefRemoveable,
}}
/>
]
}, 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: btns,
dropMenuDatas: menus
};
let logType;
if(selectedTreeNodeInfo){
if(selectedTreeNodeInfo.viewAttr == 1){
logType = 'HRM_ENGINE_RESOURCEFIELDDEFINED';
}else{
logType = 'HRM_ENGINE_RESOURCEFIELDDEFINED_DETAIL';
}
}
let children = [];
if (containerInitFinished.init && containerInitFinished.authorized) {
switch (moduleType) {
case 'resource':
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}>
{
<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@4k4wsi`} {...tabProps}>
<FieldDef ecId={`${this && this.props && this.props.ecId || ''}_FieldDef@pliw94`} logSmallType={logType || this.state.logSmallType} targetId={activeTabInfo.tabInfo ? activeTabInfo.tabInfo.groupid : ''} resetClass={true}/>
</Tabs>
}
</WeaLeftRightLayout>
</WeaTop>
</Spin>
)
]
break;
default:
children = [
(
<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@qlfpcf`} spinning={spinning}>
<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@ww9tnu`} {...topProps}>
<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@fwerjc`} {...tabProps}>
<FieldDef ecId={`${this && this.props && this.props.ecId || ''}_FieldDef@djaup2`} logSmallType={logType || this.state.logSmallType} targetId={activeTabInfo.tabInfo ? activeTabInfo.tabInfo.groupid : ''}/>
</Tabs>
</WeaTop>
</Spin>
)
]
break;
}
} else if (containerInitFinished.init && !containerInitFinished.authorized) {
children = [
(
<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@z0f4dh`}>
<div style={{ color: '#000' }}>{i18n.message.authFailed()}</div>
</WeaAlertPage>
)
];
}
let menus = []; return (
toJS(rightMenu).map((item, index) => { <div className="hrm_module_container fieldDef">
let obj = { {children}
key: item.menuFun, </div>
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>
)
}
} }

View File

@ -0,0 +1,220 @@
import React, {
Component
} from 'react';
import {
WeaTab
} from 'ecCom';
import {
observer
} from 'mobx-react';
import {
Button
} from 'antd';
import AdvanceSearchFormInfo from './AdvanceSearchFormInfo';
import {
cloneDeep
} from 'lodash';
import {
calFormHeight
} from '../../util/index';
import {
i18n
} from '../../public/i18n';
@observer
export default class Tabs extends Component {
constructor(props) {
super(props);
this.state = {
showSearchAd: false,
};
}
componentWillReceiveProps(nextProps) {
this.setState({
showSearchAd: false,
})
}
doSearch = () => {
const {
conditionForm,
tabConfig,
activeTabInfo,
} = this.props;
let tabInfo = tabConfig.tabs[activeTabInfo.activeTabIndex];
tabInfo.doSearch(conditionForm.getFormParams());
this.setState({
showSearchAd: false
});
}
doReset = () => {
const {
conditionForm
} = this.props;
conditionForm.resetConditionValue();
}
doCancel = () => {
const {
conditionForm
} = this.props;
this.setState({
showSearchAd: false,
});
}
getTabButtonsAd() {
return [
(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@xygary`} type="primary" onClick={this.doSearch}>{i18n.button.search()}</Button>),
(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@5l4fsp`} type="ghost" onClick={this.doReset}>{i18n.button.reset()}</Button>),
(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@yktxms`} type="ghost" onClick={this.doCancel}>{i18n.button.cancel()}</Button>)
]
}
renderForm = () => {
const {
conditionForm,
conditionFormFields,
itemRender
} = this.props;
const {
isFormInit
} = conditionForm;
if (isFormInit)
return <AdvanceSearchFormInfo ecId={`${this && this.props && this.props.ecId || ''}_AdvanceSearchFormInfo@5us8i8`} form={conditionForm} formFields={conditionFormFields} itemRender={itemRender}/>
else
return '';
}
initTab = (props) => {
return React.cloneElement(<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@3x9y9h`}/>, {
...props
});
}
renderTabNav = () => {
//data
const {
activeTabInfo,
tabConfig,
tabChangeHandle,
tabBtnDef,
conditionForm,
conditionFormFields,
advanceHeight,
store,
leftStyle,
} = this.props;
let tabInfo = tabConfig.tabs[activeTabInfo.activeTabIndex];
let tabsData = cloneDeep(tabConfig.tabs) || [];
tabsData != null && tabsData.map(tab => {
if (typeof(tab.title) == 'function'){
tab.title = tab.title();
}
delete tab.topButtonDef;
delete tab.tabButtonDef;
});
let tabProps = {
type: 'editable-inline',
datas: tabsData,
keyParam: tabConfig.keyParam,
selectedKey: tabConfig.activeTabKey,
onChange: tabChangeHandle,
leftStyle
}
tabBtnDef && Object.assign(tabProps, {
buttons: tabBtnDef
});
const searchType = tabInfo.searchType || [];
if (searchType.length > 0) {
Object.assign(tabProps, {
searchType: searchType,
onSearch: (value) => {
if (searchType.indexOf('advanced') >= 0) {
tabInfo.doSearch(conditionForm.getFormParams());
} else {
tabInfo.doSearch({
[tabInfo.searchKey]: value
});
}
}
});
if (searchType.indexOf('advanced') >= 0 && conditionForm != null && conditionForm.isFormInit) {
const formParams = conditionForm.getFormParams();
Object.assign(tabProps, {
searchsBaseValue: formParams[tabInfo.searchKey] || '',
showSearchAd: this.state.showSearchAd,
setShowSearchAd: (bool) => {
this.setState({
showSearchAd: bool
})
},
onSearchChange: (value) => conditionForm.updateFields({
[tabInfo.searchKey]: {
value
}
}, false),
buttonsAd: this.getTabButtonsAd(),
searchsAd: <div
onKeyDown={(e) =>{
if (e.keyCode == 13 && e.target.tagName === "INPUT") {
tabInfo.doSearch(conditionForm.getFormParams());
this.setState({
showSearchAd: false
})
}
} }
>{this.renderForm()}</div>
});
Object.assign(tabProps, {
//advanceHeight: calFormHeight(conditionFormFields.length, _.keys(formParams).length)
advanceHeight: advanceHeight ? advanceHeight : calFormHeight(conditionFormFields.length, conditionForm.fieldArr)
});
}
}
tabConfig.onTabEdit && Object.assign(tabProps, {
onEdit: tabConfig.onTabEdit
});
return this.initTab(tabProps);
}
renderTabContent = () => {
const {
children,
activeTabInfo,
rightMenu,
store
} = this.props;
if (Array.isArray(children)) {
return React.cloneElement(children[activeTabInfo.activeTabIndex], {
rightMenu,
activeTabIndex: activeTabInfo.activeTabIndex,
store
});
} else {
return React.cloneElement(children, {
rightMenu,
activeTabIndex: activeTabInfo.activeTabIndex,
store
});
}
}
render() {
const {
tabConfig
} = this.props;
return (
<div style={{width: '100%', height: '100%'}}>
{tabConfig.tabs.length > 0 && this.renderTabNav()}
{tabConfig.tabs.length > 0 && this.renderTabContent()}
</div>
);
}
}

View File

@ -0,0 +1,13 @@
import React, {Component} from 'react';
import {WeaLocaleProvider} from 'ecCom';
const {getLabel} = WeaLocaleProvider;
export default class Tip extends Component{
render(){
const label = this.props.label || getLabel('524355','提示: 字段一旦加密后无法取消,同时加密后的字段不支持查询,请谨慎操作!');
return (
<div className={'data_security_tip_info' || this.props.className}><i className="icon-coms-Invalid" />{label}</div>
)
}
}

View File

@ -0,0 +1,16 @@
import React, {Component} from 'react';
import {observer} from 'mobx-react';
import { WeaAuth } from "ecCom";
@observer
export default class ViewRangeForm extends Component{
render(){
const {store} = this.props;
const {viewRangeAuthProps} = store;
return (
<WeaAuth ecId={`${this && this.props && this.props.ecId || ''}_WeaAuth@xuisnk`} {...viewRangeAuthProps}>
</WeaAuth>
)
}
}

View File

@ -0,0 +1,21 @@
import React, {Component} from 'react';
import {observer} from 'mobx-react';
import { WeaDialog, WeaTab } from "ecCom";
import {WeaTableNew} from "comsMobx";
const {WeaTable} = WeaTableNew;
@observer
export default class ViewRangeSetting extends Component{
render(){
const {store} = this.props;
const {dialogProps, rangeViewTabProps, rangeViewTableProps} = store;
return (
<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@hsilps`} {...dialogProps}>
<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@36lgpj`} {...rangeViewTabProps} />
<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@fjlkzk`} {...rangeViewTableProps} />
</WeaDialog>
)
}
}

File diff suppressed because it is too large Load Diff

View File

@ -52,6 +52,18 @@ html {
} }
} }
.tabBtn-active {
color: #34a2ff;
}
.tabBtn {
cursor: pointer;
font-size: 20px;
position: relative;
top: 6px;
right: 15px;
}
//组织架构图 //组织架构图
#node { #node {

View File

@ -72,4 +72,21 @@ export const renderNoData = () => (
export const isEmpty = (obj) =>{ export const isEmpty = (obj) =>{
for(var n in obj){return false} for(var n in obj){return false}
return true; return true;
}
export const calFormHeight = (groupLength, children) => {
let childrenLength = 0;
children.map(c => {
if (c.colSpan != null) {
childrenLength += c.colSpan == 2 ? 1 : 2;
} else
childrenLength += 1;
})
let height = (childrenLength / 2 + childrenLength % 2) * 52 + 10;
if (groupLength > 1)
height += groupLength * 45;
if (height > 300)
return 300;
return height;
} }