import React, { useState, useRef, useEffect } from 'react';
|
import { Drawer, Space, Button, Card } 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 formRef = useRef();
|
|
useEffect(() => {
|
console.log(batchSprites);
|
}, []);
|
|
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
|
formRef={formRef}
|
onFinish={async () => {
|
await waitTime(1000);
|
message.success('提交成功');
|
}}
|
formProps={{
|
validateMessages: {
|
required: '此项为必填项',
|
},
|
}}
|
>
|
{/************************* 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.Group>
|
<ProFormText name="dbname" label="业务 DB 用户名" />
|
<ProFormSelect
|
label="Pod 调度策略"
|
name="remark2"
|
initialValue="2"
|
options={[
|
{
|
value: '1',
|
label: '策略一',
|
},
|
{ value: '2', label: '策略二' },
|
]}
|
/>
|
</ProForm.Group>
|
</StepsForm.StepForm>
|
{/************************* third ****************************/}
|
<StepsForm.StepForm
|
name="time"
|
title="结果"
|
>
|
</StepsForm.StepForm>
|
</StepsForm >
|
</Card >
|
</Drawer >
|
</>
|
)
|
}
|
|
export default BatchDrawer;
|
