#

luxiaotao1123

2024-03-21 943f2c6e0343a74f376e9f0f2f7ebbfae2a30ce3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import React, { useState, useRef, useEffect } from 'react';
import { Col, Form, Input, Row, Checkbox, Slider, Select, Drawer, Space, Button, InputNumber, Card } from 'antd';
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
import {
    BranchesOutlined,
    BorderOuterOutlined,
} from '@ant-design/icons';
import { createStyles } from 'antd-style';
import * as Utils from '../utils'
import Http from '@/utils/http';
import MapSettings from './mapSettings';
import ConfigSettings from './configSettings';
 
const useStyles = createStyles(({ token, css }) => {
 
})
 
const Settings = (props) => {
    const intl = useIntl();
    const { styles } = useStyles();
    const [activeTabKey, setActiveTabKey] = useState('map');
 
    const [mapForm] = Form.useForm();
    const [configForm] = Form.useForm();
 
    const finishSettings = (values, fn) => {
        fn();
    }
 
    const handleCancel = () => {
        props.onCancel();
    };
 
    const handleOk = () => {
        if (activeTabKey === 'map') {
            mapForm.submit();
        }
        if (activeTabKey === 'config') {
            configForm.submit();
        }
    }
 
    const contentList = {
        map: (
            <MapSettings
                refCurr={props.refCurr}
                curSprite={props.curSprite}
                setSpriteBySettings={props.setSpriteBySettings}
                setDidClickSprite={props.setDidClickSprite}
                onSubmit={finishSettings}
                mapForm={mapForm}
            />
        ),
        config: (
            <ConfigSettings
                refCurr={props.refCurr}
                curSprite={props.curSprite}
                setSpriteBySettings={props.setSpriteBySettings}
                setDidClickSprite={props.setDidClickSprite}
                onSubmit={finishSettings}
                configForm={configForm}
            />
        ),
    };
 
    return (
        <>
            <Drawer
                open={props.open}
                onClose={handleCancel}
                getContainer={props.refCurr}
                rootStyle={{ position: "absolute" }}
                mask={false}
                width={570}
                extra={
                    <Space>
                        <Button onClick={handleCancel}>
                            <FormattedMessage id='common.cancel' defaultMessage='取消' />
                        </Button>
                        <Button hidden={activeTabKey === 'map' || activeTabKey === 'config'} onClick={handleOk} type="primary">
                            <FormattedMessage id='common.submit' defaultMessage='保存' />
                        </Button>
                    </Space>
                }
            >
                <Card
                    hoverable
                    bordered={false}
                    type='inner'
                    tabList={[
                        {
                            key: 'map',
                            tab: intl.formatMessage({ id: 'map.settings.map.param', defaultMessage: '地图参数' }),
                            icon: <BorderOuterOutlined />
 
                        },
                        {
                            key: 'config',
                            tab: intl.formatMessage({ id: 'map.settings.config.param', defaultMessage: '系统参数' }),
                            icon: <BranchesOutlined />
                        },
                    ]}
                    activeTabKey={activeTabKey}
                    onTabChange={(key) => {
                        setActiveTabKey(key)
                    }}
                    tabProps={{
                        centered: true,
                        size: 'large',
                        type: "card",
                        style: {
                        }
                    }}
                >
                    {contentList[activeTabKey]}
                </Card>
 
            </Drawer >
        </>
    )
}
 
export default Settings;