#

luxiaotao1123

2024-03-08 c36194702d8ea381849ae50ad576d79dc4ea0d45

#

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

@@ -1,16 +1,6 @@
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, Switch } from 'antd';
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
import * as PIXI from 'pixi.js';
import { createStyles } from 'antd-style';
@@ -50,9 +40,32 @@
        props.onSubmit({ ...values });
    }

    const formValuesChange = (changeValues) => {
        console.log(changeValues);
    const formValuesChange = (value) => {
        switch (value) {
            case 'male':
                break;
            default:
                break;
        }
    }

    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 (
        <>
@@ -74,63 +87,140 @@
                    </Space>
                }
            >
                <ProForm
                <Form
                    form={form}
                    submitter={false}
                    onFieldsChange={formValuesChange}
                    initialValues={{
                    }}
                    onFinish={handleFinish}
                    layout="horizontal"
                    grid={true}
                    onValuesChange={formValuesChange}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                    style={{
                        maxWidth: 600,
                    }}
                    size='default'    // small | default | large
                    variant='filled'    // outlined | borderless | filled
                    labelWrap   // label 换行
                    disabled={false}
                >
                    {/* 
                            // 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>
                    <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: true,
                                    }
                                ]}
                            >
                                <Input disabled={false} />
                            </Form.Item>
                        </Col>
                        <Col span={24}>
                            <Form.Item
                                label="InputNumber"
                            >
                                <InputNumber />
                            </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: true,
                                                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: true,
                                                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: true,
                                        message: 'Please input your phone number!',
                                    },
                                ]}
                            >
                                <Input
                                    addonBefore={prefixSelector}
                                    style={{
                                        width: '100%',
                                    }}
                                />
                            </Form.Item>
                        </Col>



                    </Row>
                </Form>
            </Drawer>
        </>
    )