yongxu-web/src/pages/home/overwrite.tsx

import React from 'react';
import { Col, Row, Form, Input, Modal, Select, message, InputNumber, Tabs } from 'antd';
import { overwriteData } from '@/services/home';

interface userEditPros {
  visible: boolean;
  editCallback: () => void;
  params: any;
}

/**
 * 下发页面
 * @param props
 * @constructor
 */
const Overwrite: React.FC<userEditPros> = (props) => {
  const { visible, editCallback, params } = props;

  const [form] = Form.useForm();

  const { TabPane } = Tabs;

  // 下发
  const onOk = () => {
    form.validateFields().then((values) => {
      if (values) {
        const data = {
          gateway: params.device_code,
          gear: values.gear,
          value: values.value,
        };
        overwriteData(data)
          .then((res) => {
            if (res.code === 0) {
              message.success('下发成功');
            } else {
              message.error(res?.message);
            }
          })
          .catch((e) => {
            message.error(e?.message);
          });
      }
    });
  };

  // 取消
  const onCancel = () => {
    editCallback();
  };

  const formItemLayout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 16,
    },
  };

  return (
    <Modal
      title="下发管理"
      open={visible}
      onOk={onOk}
      onCancel={onCancel}
      width={800}
      okText="下发"
    >
      <Tabs defaultActiveKey="1">
        <TabPane tab="档位电压" key="1">
          <Form form={form}>
            <Row>
              <Col span={24}>
                <Form.Item
                  {...formItemLayout}
                  name="device_code"
                  label="设备编号"
                  initialValue={params?.device_code}
                >
                  <Input placeholder="请输入设备编号" readOnly defaultValue={params.device_code} />
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item
                  {...formItemLayout}
                  name="gear"
                  label="档位"
                  rules={[{ required: true, message: '请选择档位' }]}
                  initialValue={params?.gear}
                >
                  <Select placeholder="请选择档位">
                    <Select.Option value={1}>一档</Select.Option>
                    <Select.Option value={2}>二档</Select.Option>
                    <Select.Option value={3}>三档</Select.Option>
                    <Select.Option value={4}>四档</Select.Option>
                    <Select.Option value={5}>五档</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item
                  {...formItemLayout}
                  name="value"
                  label="电压"
                  rules={[{ required: true, message: '请输入电压' }]}
                  initialValue={params?.value}
                >
                  <InputNumber
                    placeholder="请输入电压"
                    style={{ width: '100%' }}
                    min={0}
                    max={100}
                  />
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </TabPane>
      </Tabs>
    </Modal>
  );
};
export default Overwrite;