update 种子模版挪动位置

web-react/seed/form-tabs/index.jsx

@@ -0,0 +1,153 @@
+import React, { Component } from 'react'
+import { Button, Tabs } from 'antd'
+import { ComponentDynamic, Container } from 'components'
+import { isEqual, merge } from 'lodash'
+
+const tabs = [
+    {
+        title: '标题',
+        component: () => import('./tab'),
+        show: true,
+    },
+]
+
+export default class index extends Component {
+    state = {
+        actived: '0',
+        loading: true,
+        record: null,
+        saveDisabled: true,
+        saving: false,
+    }
+
+    // 子表单实例集合
+    children = []
+
+    // 整合提交数据
+    formData = {}
+
+    /**
+     * 阻止外部组件引发的渲染,提升性能
+     * 可自行添加渲染条件
+     * [必要]
+     * @param {*} props
+     * @param {*} state
+     * @returns
+     */
+    shouldComponentUpdate(props, state) {
+        return !isEqual(this.state, state)
+    }
+
+    /**
+     * DOM加载完成钩子,可在此获取详细数据赋值到record
+     */
+    componentDidMount() {}
+
+    /**
+     * 接收到所有子组件已加载完成,并启用提交按钮
+     */
+    call(child, index) {
+        this.children[index] = child
+        if (this.children.filter(p => p).length === tabs.filter(p => p.show).length) {
+            this.setState({ saveDisabled: false })
+        }
+    }
+
+    async onSubmit() {
+        for (const child of this.children) {
+            try {
+                const data = await child.getData()
+                merge(this.formData, data)
+            } catch (e) {
+                return e
+            }
+        }
+
+        //#region 提交数据
+        this.setState({ saving: true })
+        this.setState({ saving: false })
+        //#endregion
+    }
+
+    render() {
+        const { id } = this.props
+
+        const { actived, loading, record, saveDisabled, 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
+                                        disabled={saveDisabled}
+                                        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}
+                                                id={id}
+                                                record={record}
+                                                loading={loading}
+                                                onRef={child => this.call(child, i)}
+                                            />
+                                        </div>
+                                    )
+                                }
+                                return <></>
+                            })}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}