import React, { useState, useRef, useEffect } from 'react';
|
import { message, Form, Input, Row, Checkbox, Slider, Select, Drawer, Space, Button, InputNumber, Card } from 'antd';
|
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
|
import { createStyles } from 'antd-style';
|
import * as Utils from '../utils'
|
import * as PIXI from 'pixi.js';
|
|
const useStyles = createStyles(({ token, css }) => {
|
|
})
|
|
const ConfigSettings = (props) => {
|
const intl = useIntl();
|
const { styles } = useStyles();
|
const { curSprite, configForm: form } = props;
|
|
useEffect(() => {
|
form.resetFields();
|
if (curSprite) {
|
form.setFieldsValue({
|
|
// shelf
|
row: curSprite?.data?.row,
|
bay: curSprite?.data?.bay,
|
no: curSprite?.data?.no,
|
})
|
}
|
}, [props, form]);
|
|
const formValuesChange = (changeList) => {
|
if (curSprite && changeList && changeList.length > 0) {
|
changeList.forEach(change => {
|
const { name: nameList, value } = change;
|
nameList.forEach(name => {
|
switch (name) {
|
case 'row':
|
const bay = form.getFieldValue('bay')
|
if (value && bay) {
|
form.setFieldsValue({
|
no: Utils.pureNumStr(value) + '-' + Utils.pureNumStr(bay)
|
});
|
} else {
|
form.setFieldsValue({
|
no: ''
|
});
|
}
|
break;
|
case 'bay':
|
const row = form.getFieldValue('row')
|
if (value && row) {
|
form.setFieldsValue({
|
no: Utils.pureNumStr(row) + '-' + Utils.pureNumStr(value)
|
});
|
} else {
|
form.setFieldsValue({
|
no: ''
|
});
|
}
|
break;
|
case 'vertical':
|
const horizontal = form.getFieldValue('horizontal')
|
if (value && horizontal) {
|
form.setFieldsValue({
|
no: Utils.pureNumStr(value) + '-' + Utils.pureNumStr(horizontal)
|
});
|
} else {
|
form.setFieldsValue({
|
no: ''
|
});
|
}
|
break;
|
case 'horizontal':
|
const vertical = form.getFieldValue('vertical')
|
if (value && vertical) {
|
form.setFieldsValue({
|
no: Utils.pureNumStr(vertical) + '-' + Utils.pureNumStr(value)
|
});
|
} else {
|
form.setFieldsValue({
|
no: ''
|
});
|
}
|
break;
|
default:
|
break;
|
}
|
Utils.removeSelectedEffect();
|
Utils.showSelectedEffect(curSprite);
|
})
|
})
|
}
|
}
|
|
const onFinishFailed = (errorInfo) => {
|
};
|
|
const handleFinish = (values) => {
|
// execute where the form was finished
|
const confirmSettings = () => {
|
if (curSprite && curSprite?.data?.type) {
|
switch (curSprite.data.type) {
|
case Utils.SENSOR_TYPE.SHELF:
|
curSprite.data.no = values.no; // *
|
curSprite.data.row = values.row;
|
curSprite.data.bay = values.bay;
|
break;
|
case Utils.SENSOR_TYPE.POINT:
|
curSprite.data.no = values.no; // *
|
curSprite.data.horizontal = values.horizontal;
|
curSprite.data.vertical = values.vertical;
|
break;
|
case Utils.SENSOR_TYPE.AGV:
|
curSprite.data.no = values.no; // *
|
break;
|
default:
|
break;
|
}
|
}
|
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '操作成功' }));
|
}
|
|
props.onSubmit({ ...values }, confirmSettings);
|
}
|
|
return (
|
<>
|
<Form
|
form={form}
|
onFieldsChange={formValuesChange}
|
initialValues={{
|
}}
|
onFinish={handleFinish}
|
onFinishFailed={onFinishFailed}
|
autoComplete="off"
|
style={{
|
maxWidth: 600,
|
}}
|
size='defalargeult'
|
variant='filled'
|
labelWrap
|
disabled={false}
|
layout='horizontal'
|
labelCol={{
|
span: 4,
|
}}
|
wrapperCol={{
|
span: 20,
|
}}
|
>
|
<br />
|
|
<Form.Item
|
label={intl.formatMessage({ id: 'map.settings.type', defaultMessage: '类型' })}
|
>
|
<span>{curSprite?.data?.type}</span>
|
</Form.Item>
|
<Form.Item
|
label={intl.formatMessage({ id: 'map.settings.uuid', defaultMessage: '地图号' })}
|
>
|
<span>{curSprite?.data?.uuid}</span>
|
</Form.Item>
|
|
{curSprite?.data?.type === Utils.SENSOR_TYPE.AGV && (
|
<>
|
|
</>
|
)}
|
|
{curSprite?.data?.type === Utils.SENSOR_TYPE.SHELF && (
|
<>
|
<Form.Item
|
name='row'
|
label={intl.formatMessage({ id: 'map.settings.shelf.row', defaultMessage: '排' })}
|
rules={[
|
{
|
required: false,
|
},
|
]}
|
>
|
<InputNumber
|
style={{
|
width: '50%',
|
}}
|
/>
|
</Form.Item>
|
<Form.Item
|
name='bay'
|
label={intl.formatMessage({ id: 'map.settings.shelf.bay', defaultMessage: '列' })}
|
rules={[
|
{
|
required: false,
|
},
|
]}
|
>
|
<InputNumber
|
style={{
|
width: '50%',
|
}}
|
/>
|
</Form.Item>
|
</>
|
)}
|
|
{curSprite?.data?.type === Utils.SENSOR_TYPE.POINT && (
|
<>
|
<Form.Item
|
name='vertical'
|
label={intl.formatMessage({ id: 'map.settings.point.vertical', defaultMessage: '纵向' })}
|
rules={[
|
{
|
required: false,
|
},
|
]}
|
>
|
<InputNumber
|
style={{
|
width: '50%',
|
}}
|
/>
|
</Form.Item>
|
<Form.Item
|
name='horizontal'
|
label={intl.formatMessage({ id: 'map.settings.point.horizontal', defaultMessage: '横向' })}
|
rules={[
|
{
|
required: false,
|
},
|
]}
|
>
|
<InputNumber
|
style={{
|
width: '50%',
|
}}
|
/>
|
</Form.Item>
|
</>
|
)}
|
|
<Form.Item
|
name='no'
|
label={intl.formatMessage({ id: 'map.settings.no', defaultMessage: '编号' })}
|
rules={[
|
{
|
required: false,
|
},
|
]}
|
>
|
<Input
|
style={{
|
width: '50%',
|
}}
|
/>
|
</Form.Item>
|
|
<Form.Item
|
wrapperCol={{
|
offset: 4,
|
span: 16,
|
}}>
|
<Button type="primary" htmlType="submit">
|
<FormattedMessage id='common.submit' defaultMessage='保存' />
|
</Button>
|
</Form.Item>
|
</Form >
|
</>
|
)
|
}
|
|
export default ConfigSettings;
|
