import React, { useState, useRef, useEffect } from 'react';
|
import { Drawer, Space, Button, Card, Select, InputNumber, Input, Result, Form } from 'antd';
|
import {
|
ProCard,
|
ProForm,
|
ProFormCheckbox,
|
ProFormDatePicker,
|
ProFormDateRangePicker,
|
ProFormSelect,
|
ProFormText,
|
ProFormTextArea,
|
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 useStyles = createStyles(({ token, css }) => {
|
return {
|
}
|
})
|
|
const waitTime = (time = 100) => {
|
return new Promise((resolve) => {
|
setTimeout(() => {
|
resolve(true);
|
}, time);
|
});
|
};
|
|
const BatchDrawer = (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]);
|
|
const handleCancel = () => {
|
props.onCancel();
|
};
|
|
return (
|
<>
|
<Drawer
|
open={props.open}
|
onClose={handleCancel}
|
getContainer={props.refCurr}
|
rootStyle={{ position: "absolute" }}
|
mask={false}
|
width={600}
|
style={{
|
opacity: 1
|
}}
|
extra={
|
<Space>
|
<Button onClick={handleCancel}>
|
<FormattedMessage id='common.cancel' defaultMessage='取消' />
|
</Button>
|
</Space>
|
}
|
>
|
<Card
|
className='drawer-card'
|
hoverable
|
bordered={false}
|
type='inner'
|
style={{
|
height: '100%'
|
}}
|
>
|
<StepsForm
|
form={form}
|
current={currentStep}
|
onCurrentChange={setCurrentStep}
|
onFinish={async () => {
|
await waitTime(1000);
|
message.success('提交成功');
|
}}
|
formProps={{
|
validateMessages: {
|
required: '此项为必填项',
|
},
|
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="选择货架"
|
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="设置参数"
|
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="结果"
|
submitter={false}
|
>
|
<Result
|
status="success"
|
title="Successfully Purchased Cloud Server ECS!"
|
subTitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
|
extra={[
|
<Button type="primary" key="console">
|
Go Console
|
</Button>,
|
]}
|
/>
|
</StepsForm.StepForm>
|
</StepsForm >
|
</Card >
|
</Drawer >
|
</>
|
)
|
}
|
|
export default BatchDrawer;
|
