Merge remote-tracking branch 'origin/Four-Way-Rack' into Four-Way-Rack

Junjie

2024-03-25 c4c29d91cccfccf457594b87d09c0181f8810ba2

 zy-asrs-flow/src/pages/map/batch/modify.jsx

New file
@@ -0,0 +1,223 @@
import React, { useState, useRef, useEffect } from 'react';
import { Drawer, Space, Button, Card, Select, InputNumber, Input, Result, Form } from 'antd';
import {
    ProForm,
    StepsForm,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
import { createStyles } from 'antd-style';
import * as Utils from '../utils'
import ShowJson from '../drawer/showJson';

const waitTime = (time = 100) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(true);
        }, time);
    });
};

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

const BatchModify = (props) => {
    const intl = useIntl();
    const { styles } = useStyles();
    const { batchSprites } = props;

    const [form] = Form.useForm();
    const [currentStep, setCurrentStep] = useState(0);

    const resetForm = () => {
        form.resetFields();
        setCurrentStep(0);
    };

    useEffect(() => {
        console.log(batchSprites);
        resetForm();
    }, [props]);

    useEffect(() => {
        console.log(currentStep);
    }, [currentStep]);

    return (
        <>
            <StepsForm
                form={form}
                current={currentStep}
                onCurrentChange={setCurrentStep}
                onFinish={async () => {
                    await waitTime(1000);
                    message.success('提交成功');
                }}
                formProps={{
                    variant: 'filled',
                    layout: 'horizontal',
                    labelCol: {
                        span: 4,
                    },
                    wrapperCol: {
                        span: 20,
                    },
                    labelWrap: true
                }}
                submitter={{
                    render: (props, dom) => {
                        return props.step === 2 ? [] : dom;
                    },
                }}
            >
                {/************************* first ****************************/}
                <StepsForm.StepForm
                    name="base"
                    title={intl.formatMessage({ id: 'map.settings.batch.select.shelf', defaultMessage: '选择货架' })}
                    onFinish={() => {
                        return true;
                    }}
                >
                    <ProForm.Item
                    >
                        <ShowJson
                            data={
                                batchSprites?.filter(item => {
                                    return item.data?.type === Utils.SENSOR_TYPE.SHELF
                                }).map(item => {
                                    return item.data?.no;
                                })
                            }
                            height='500px'
                            jsonType={0}
                        />
                    </ProForm.Item>
                </StepsForm.StepForm>
                {/************************* second ****************************/}
                <StepsForm.StepForm
                    name="checkbox"
                    title={intl.formatMessage({ id: 'map.settings.batch.set.params', defaultMessage: '设置参数' })}
                    onFinish={(values) => {
                        console.log(values);
                        return true;
                    }}
                >
                    <ProForm.Item
                        name='shelfType'
                        label={intl.formatMessage({ id: 'map.settings.shelf.type', defaultMessage: '类型' })}
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Select
                            style={{ width: 120 }}
                            options={[
                                {
                                    label: intl.formatMessage({ id: 'map.settings.shelf.store', defaultMessage: '库位' }),
                                    value: 0
                                },
                                {
                                    label: intl.formatMessage({ id: 'map.settings.shelf.track', defaultMessage: '轨道' }),
                                    value: 3
                                },
                                {
                                    label: intl.formatMessage({ id: 'map.settings.shelf.diable', defaultMessage: '禁用' }),
                                    value: 1
                                },
                            ]}
                            defaultValue={0}
                        />
                    </ProForm.Item>
                    <ProForm.Item
                        label={intl.formatMessage({ id: 'map.settings.shelf.space', defaultMessage: '间距' })}
                    >
                        <Space.Compact>
                            <ProForm.Item
                                name='top'
                                noStyle
                            >
                                <InputNumber
                                    addonBefore={<Space.Compact><FormattedMessage id='map.settings.shelf.top' defaultMessage='上' /></Space.Compact>}
                                    style={{
                                        width: '50%',
                                    }}
                                />
                            </ProForm.Item>
                            <ProForm.Item
                                name='bottom'
                                noStyle
                            >
                                <InputNumber
                                    addonBefore={<Space.Compact><FormattedMessage id='map.settings.shelf.bottom' defaultMessage='下' /></Space.Compact>}
                                    style={{
                                        width: '50%',
                                    }}
                                />
                            </ProForm.Item>
                        </Space.Compact>
                    </ProForm.Item>
                    <ProForm.Item
                        label={' '}
                    >
                        <Space.Compact>
                            <ProForm.Item
                                name='left'
                                noStyle
                            >
                                <InputNumber
                                    addonBefore={<Space.Compact><FormattedMessage id='map.settings.shelf.left' defaultMessage='左' /></Space.Compact>}
                                    style={{
                                        width: '50%',
                                    }}
                                />
                            </ProForm.Item>
                            <ProForm.Item
                                name='right'
                                noStyle
                            >
                                <InputNumber
                                    addonBefore={<Space.Compact><FormattedMessage id='map.settings.shelf.right' defaultMessage='右' /></Space.Compact>}
                                    style={{
                                        width: '50%',
                                    }}
                                />
                            </ProForm.Item>
                        </Space.Compact>
                    </ProForm.Item>
                    <ProForm.Item
                        name='value'
                        label={intl.formatMessage({ id: 'map.settings.shelf.value', defaultMessage: '地图值' })}
                    >
                        <Input
                            style={{
                                width: '50%',
                            }}
                        />
                    </ProForm.Item>
                </StepsForm.StepForm>
                {/************************* third ****************************/}
                <StepsForm.StepForm
                    name="time"
                    title={intl.formatMessage({ id: 'map.settings.batch.result', defaultMessage: '结果' })}
                    submitter={false}
                >
                    <Result
                        status="success"
                        title={intl.formatMessage({ id: 'map.settings.batch.result.title', defaultMessage: '批量设置成功' })}
                        subTitle=""
                        extra={[
                            <Button type="primary" key="console" onClick={props.handleCancel}>
                                <FormattedMessage id='common.confirm' defaultMessage='确定' />
                            </Button>,
                        ]}
                    />
                </StepsForm.StepForm>
            </StepsForm >
        </>
    )
}

export default BatchModify;