From 83c548d3dba59aaed9b52b5d413c6912a87d2efc Mon Sep 17 00:00:00 2001
From: Junjie <fallin.jie@qq.com>
Date: 星期日, 16 六月 2024 15:50:14 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/pages/map/components/settings.jsx | 168 ++++++++++++++++++++++++-------------------------------
1 files changed, 74 insertions(+), 94 deletions(-)
diff --git a/zy-asrs-flow/src/pages/map/components/settings.jsx b/zy-asrs-flow/src/pages/map/components/settings.jsx
index b1fe434..0a82de3 100644
--- a/zy-asrs-flow/src/pages/map/components/settings.jsx
+++ b/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;
\ No newline at end of file
+export default Settings;
\ No newline at end of file
--
Gitblit v1.9.1