142 lines
5.0 KiB
JavaScript
142 lines
5.0 KiB
JavaScript
import React, { Component } from 'react'
|
|
import { Button, Tabs } from 'antd'
|
|
import { ComponentDynamic, Container } from 'components'
|
|
import { isEqual } from 'lodash'
|
|
|
|
const tabs = [
|
|
{
|
|
title: '标题',
|
|
component: () => import('./tab'),
|
|
show: true,
|
|
},
|
|
]
|
|
|
|
export default class index extends Component {
|
|
state = {
|
|
actived: '0',
|
|
loading: true,
|
|
record: null,
|
|
saving: false,
|
|
}
|
|
|
|
// 子表单实例集合
|
|
children = []
|
|
|
|
// 整合提交数据
|
|
formData = {}
|
|
|
|
/**
|
|
* 阻止外部组件引发的渲染,提升性能
|
|
* 可自行添加渲染条件
|
|
* [必要]
|
|
* @param {*} props
|
|
* @param {*} state
|
|
* @returns
|
|
*/
|
|
shouldComponentUpdate(props, state) {
|
|
return !isEqual(this.state, state)
|
|
}
|
|
|
|
/**
|
|
* DOM加载完成钩子,可在此获取详细数据赋值到record
|
|
*/
|
|
componentDidMount() {}
|
|
|
|
async onSubmit() {
|
|
for (const child of this.children) {
|
|
try {
|
|
const data = await child.getData()
|
|
this.formData = {
|
|
...this.formData,
|
|
...data,
|
|
}
|
|
} catch (e) {
|
|
return e
|
|
}
|
|
}
|
|
|
|
//#region 提交数据
|
|
this.setState({ saving: true })
|
|
this.setState({ saving: false })
|
|
//#endregion
|
|
}
|
|
|
|
render() {
|
|
const { actived, loading, record, saving } = this.state
|
|
|
|
return (
|
|
<div className="yo-form-page">
|
|
<div className="yo-form-page-layout">
|
|
{/* 底部工具栏(需放在前面) */}
|
|
<div className="yo-form-page--bar yo-form-page--bar--with-tab">
|
|
<Container mode="fluid">
|
|
<div className="yo-form-page--bar-inner">
|
|
<span></span>
|
|
<span>
|
|
<Button onClick={() => window.closeContentWindow()}>
|
|
取消
|
|
</Button>
|
|
<Button
|
|
loading={saving}
|
|
type="primary"
|
|
onClick={() => this.onSubmit()}
|
|
>
|
|
保存
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
</Container>
|
|
</div>
|
|
{/* 顶部信息栏,不需要时刻删除 */}
|
|
<div className="yo-form-page--header" style={{ paddingBottom: 0 }}></div>
|
|
<div className="yo-tab-external-mount">
|
|
<Tabs
|
|
activeKey={actived}
|
|
animated={false}
|
|
onChange={activeKey => {
|
|
this.setState({ actived: activeKey })
|
|
}}
|
|
>
|
|
{tabs.map(
|
|
(tab, i) =>
|
|
tab.show && (
|
|
<Tabs.TabPane
|
|
key={i}
|
|
forceRender={false}
|
|
tab={tab.title}
|
|
></Tabs.TabPane>
|
|
)
|
|
)}
|
|
</Tabs>
|
|
<div className="yo-tab-external-mount-content">
|
|
{tabs.map((tab, i) => {
|
|
if (tab.show) {
|
|
return (
|
|
<div
|
|
key={i}
|
|
className={[
|
|
actived == i
|
|
? 'yo-tab-external-tabpane-active'
|
|
: 'yo-tab-external-tabpane-inactive',
|
|
'yo-tab-external-tabpane',
|
|
].join(' ')}
|
|
>
|
|
<ComponentDynamic
|
|
is={tab.component}
|
|
record={record}
|
|
loading={loading}
|
|
onRef={c => this.children.push(c)}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
return <></>
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|