#

Junjie

2024-06-16 83c548d3dba59aaed9b52b5d413c6912a87d2efc

 zy-asrs-flow/src/pages/map/components/settings.jsx

@@ -1,57 +1,62 @@
import React, { useState, useRef, useEffect } from 'react';
import {
    ProForm,
    ProFormDigit,
    ProFormText,
    ProFormSelect,
    ProFormDateTimePicker,
    ProFormTextArea,
    ProFormSlider,
    ProFormSwitch,
} from '@ant-design/pro-components';
import moment from 'moment';
import { Col, Form, Modal, Row, Checkbox, Image, Tree, Drawer, Space, Button, Card, Divider } from 'antd';
import { Col, Form, Input, Row, Checkbox, Slider, Select, Drawer, Space, Button, InputNumber, Card } from 'antd';
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
import * as PIXI from 'pixi.js';
import {
    BranchesOutlined,
    BorderOuterOutlined,
} from '@ant-design/icons';
import { createStyles } from 'antd-style';
import './index.css';
import * as Utils from '../utils'
import Http from '@/utils/http';
import MapSettings from './mapSettings';
import ConfigSettings from './configSettings';

const useStyles = createStyles(({ token, css }) => {

})

const SpriteSettings = (props) => {
const Settings = (props) => {
    const intl = useIntl();
    const { styles } = useStyles();
    const { curSprite } = props;
    const [form] = Form.useForm();
    const [activeTabKey, setActiveTabKey] = useState('map');

    useEffect(() => {
    const [mapForm] = Form.useForm();
    const [configForm] = Form.useForm();

    }, []);

    useEffect(() => {
        form.resetFields();
        form.setFieldsValue({
            ...props.values
        })
    }, [form, props])
    const contentList = {
        map: (
            <MapSettings
                refCurr={props.refCurr}
                curSprite={props.curSprite}
                setSpriteBySettings={props.setSpriteBySettings}
                setDidClickSprite={props.setDidClickSprite}
                onSubmit={props.onSubmit}
                mapForm={mapForm}
            />
        ),
        config: (
            <ConfigSettings
                refCurr={props.refCurr}
                curSprite={props.curSprite}
                setSpriteBySettings={props.setSpriteBySettings}
                setDidClickSprite={props.setDidClickSprite}
                onSubmit={props.onSubmit}
                configForm={configForm}
            />
        ),
    };

    const handleCancel = () => {
        props.onCancel();
    };

    const handleOk = () => {
        form.submit();
    }

    const handleFinish = async (values) => {
        props.onSubmit({ ...values });
    }

    const formValuesChange = (changeValues) => {
        console.log(changeValues);
        if (activeTabKey === 'map') {
            mapForm.submit();
        }
        if (activeTabKey === 'config') {
            configForm.submit();
        }
    }

    return (
@@ -68,72 +73,47 @@
                        <Button onClick={handleCancel}>
                            <FormattedMessage id='common.cancel' defaultMessage='取消' />
                        </Button>
                        <Button onClick={handleOk} type="primary">
                        <Button hidden={activeTabKey === 'map' || activeTabKey === 'config'} onClick={handleOk} type="primary">
                            <FormattedMessage id='common.submit' defaultMessage='保存' />
                        </Button>
                    </Space>
                }
            >
                <ProForm
                    form={form}
                    submitter={false}
                    onFinish={handleFinish}
                    layout="horizontal"
                    grid={true}
                    onValuesChange={formValuesChange}
                <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: {
                        }
                    }}
                >
                    {/* 
                            // position
                            // scale
                            // rotation
                            // copy
                        */}
                    <ProForm.Group>
                        <ProFormText
                            name="name"
                            label="名称"
                            colProps={{ md: 12, xl: 12 }}
                        />
                        <ProFormDigit
                            label="InputNumber"
                            name="input-number"
                            min={1}
                            max={10}
                            colProps={{ md: 12, xl: 12 }}
                        />
                    </ProForm.Group>
                    <ProForm.Group>
                        <ProFormSlider
                            name="slider"
                            label="Slider"
                            width="lg"
                            marks={{
                                0: 'A',
                                20: 'B',
                                40: 'C',
                                60: 'D',
                                80: 'E',
                                100: 'F',
                            }}
                            colProps={{ md: 12, xl: 12 }}
                        />
                        <ProFormSwitch
                            name="switch"
                            label="Switch"
                            colProps={{ md: 12, xl: 12 }}
                        />
                    </ProForm.Group>
                    <ProForm.Group>
                        <ProFormTextArea
                            name="memo"
                            label="备注"
                            colProps={{ md: 24, xl: 24 }}
                        />
                    </ProForm.Group>
                </ProForm>
            </Drawer>
                    {contentList[activeTabKey]}
                </Card>

            </Drawer >
        </>
    )
}

export default SpriteSettings;
export default Settings;