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 | 268 ++++++++++++++---------------------------------------
1 files changed, 70 insertions(+), 198 deletions(-)
diff --git a/zy-asrs-flow/src/pages/map/components/settings.jsx b/zy-asrs-flow/src/pages/map/components/settings.jsx
index 97ab160..0a82de3 100644
--- a/zy-asrs-flow/src/pages/map/components/settings.jsx
+++ b/zy-asrs-flow/src/pages/map/components/settings.jsx
@@ -1,85 +1,63 @@
import React, { useState, useRef, useEffect } from 'react';
-import moment from 'moment';
-import { Col, Form, Input, Row, Checkbox, Slider, Select, Drawer, Space, Button, InputNumber, Switch } 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) => {
- console.log(values); return
- props.onSubmit({ ...values });
- }
-
- const formValuesChange = (changeList) => {
- if (changeList && changeList.length > 0) {
- changeList.forEach(change => {
- const { name: nameList, value } = change;
- nameList.forEach(name => {
- switch (name) {
- case 'slider':
- form.setFieldsValue({
- no: value
- })
- break;
- case 'no':
- form.setFieldsValue({
- slider: value
- })
- break;
- default:
- break;
- }
- })
- })
+ if (activeTabKey === 'map') {
+ mapForm.submit();
+ }
+ if (activeTabKey === 'config') {
+ configForm.submit();
}
}
-
- const onFinishFailed = (errorInfo) => {
- };
-
- const prefixSelector = (
- <Form.Item name="prefix" noStyle>
- <Select
- style={{
- width: 70,
- }}
- >
- <Option value="86">+86</Option>
- <Option value="87">+87</Option>
- </Select>
- </Form.Item>
- );
return (
<>
@@ -95,153 +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>
}
>
- <Form
- form={form}
- onFieldsChange={formValuesChange}
- initialValues={{
+ <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)
}}
- onFinish={handleFinish}
- onFinishFailed={onFinishFailed}
- autoComplete="off"
- style={{
- maxWidth: 600,
+ tabProps={{
+ centered: true,
+ size: 'large',
+ type: "card",
+ style: {
+ }
}}
- size='default' // small | default | large
- variant='filled' // outlined | borderless | filled
- labelWrap // label 鎹㈣
- disabled={false}
>
- <Row gutter={24}>
- <Col span={6}>
- <Form.Item label="Plain Text">
- <span className="ant-form-text">China</span>
- </Form.Item>
- </Col>
- <Col span={12}>
- <Form.Item
- label="Username"
- name="username"
- hasFeedback
- validateTrigger="onBlur"
- validateDebounce={1000}
- rules={[
- {
- required: false,
- }
- ]}
- >
- <Input disabled={false} />
- </Form.Item>
- </Col>
- <Col span={24}>
- <Form.Item
- label="InputNumber"
- name="no"
- >
- <InputNumber
- changeOnWheel
- min={1} max={10} defaultValue={3}
- />
- </Form.Item>
- </Col>
- <Col span={24}>
- <Form.Item
- label="Switch"
- valuePropName="checked"
- >
- <Switch />
- </Form.Item>
- </Col>
- <Col span={24}>
- <Form.Item name="slider" label="Slider">
- <Slider
- marks={{
- 0: 'A',
- 20: 'B',
- 40: 'C',
- 60: 'D',
- 80: 'E',
- 100: 'F',
- }}
- />
- </Form.Item>
- </Col>
- <Col span={24}>
- <Form.Item label="Memo">
- <Input.TextArea />
- </Form.Item>
- </Col>
- <Col span={24}>
- <Form.Item label="Address">
- <Space.Compact>
- <Form.Item
- name={['address', 'province']}
- noStyle
- rules={[
- {
- required: false,
- message: 'Province is required',
- },
- ]}
- >
- <Select placeholder="Select province">
- <Option value="Zhejiang">Zhejiang</Option>
- <Option value="Jiangsu">Jiangsu</Option>
- </Select>
- </Form.Item>
- <Form.Item
- name={['address', 'street']}
- noStyle
- rules={[
- {
- required: false,
- message: 'Street is required',
- },
- ]}
- >
- <Input
- style={{
- width: '50%',
- }}
- placeholder="Input street"
- />
- </Form.Item>
- </Space.Compact>
- </Form.Item>
- </Col>
- <Col span={24}>
- <Form.Item
- name="phone"
- label="Phone Number"
- rules={[
- {
- required: false,
- message: 'Please input your phone number!',
- },
- ]}
- >
- <Input
- addonBefore={prefixSelector}
- style={{
- width: '100%',
- }}
- />
- </Form.Item>
- </Col>
+ {contentList[activeTabKey]}
+ </Card>
-
-
- </Row>
- </Form>
- </Drawer>
+ </Drawer >
</>
)
}
-export default SpriteSettings;
\ No newline at end of file
+export default Settings;
\ No newline at end of file
--
Gitblit v1.9.1