feats

src/pages/SystemManagement/Sensing/index.jsx

 import React, { useState, useEffect, useRef } from 'react';
-import { Button, Popconfirm, Modal, Form, Input, message } from 'antd';
+import { Button, Select, Modal, Form, Input, message } from 'antd';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import moment from 'moment';
 import PageTable from '@/components/PageTable';
+import { getDeviceList, deleteDevice, addDevice } from '@/services/device';
+import { queryTable } from '@/utils/request';
 
+const { Option } = Select;
 const formatterTime = (val) => {
   return val && val !== '-' ? moment(val).format('YYYY-MM-DD') : '-';
 };
 const FormItem = Form.Item;
 
 export default (props) => {
+  // 绑定表单
   const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
   const [form] = Form.useForm();
   const [editModal, setEditModal] = useState(false);
   const [loading, setLoading] = useState(false);
-  const [regionId, setRegionId] = useState();
+  const [deviceId, setdeviceId] = useState();
+  const [machineryId, setmachineryId] = useState();
   const actionRef = useRef();
-
-  // const Submit = (values) => {
-  //   setLoading(true);
-  //   if (regionId) {
-  //     updateRegion(regionId, values).then(() => {
-  //       setLoading(false);
-  //       message.success(`修改成功`);
-  //       onCancel();
-  //       actionRef.current.reload();
-  //     }).catch((err) => {
-  //       setLoading(false);
-  //       console.log(err.message)
-  //     });
-  //   } else {
-  //     addRegion(values)
-  //       .then(() => {
-  //         setLoading(false);
-  //         message.success(`保存成功`);
-  //         onCancel();
-  //         actionRef.current.reload();
-  //       })
-  //       .catch((err) => {
-  //         setLoading(false);
-  //         message.error(err.message || err);
-  //       });
-  //   }
-  // };
-  // const handelEdit = (val) => {
-  //   setRegionId(val.regionId);
-  //   form.setFieldsValue(val);
-  //   setEditModal(true);
-  // };
-  // const onCancel = () => {
-  //   setRegionId();
-  //   form.resetFields();
-  //   setEditModal(false);
-  // };
-  // const handleDelete = (id) => {
-  //   deleteRegion(id)
-  //     .then(() => {
-  //       message.success('删除成功');
-  //       actionRef.current.reload();
-  //     })
-  //     .catch((err) => {
-  //       console.log(err.message)
-  //     });
-  // };
+  const [newsTypeList, setNewsTypeList] = useState([]);
   // useEffect(() => {
   //   if (regionId) {
   //   } else {
   //     form.resetFields();
   //   }
   // }, [regionId]);
-  // const actions = () => [
-  //   <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => setEditModal(true)}>
-  //     新增
-  //   </Button>,
-  // ];
+
+  //列表编辑
+  const handelEdit = (val) => {
+    setmachineryId(val.machineryId);
+    form.setFieldsValue(val);
+    setEditModal(true);
+  };
+
+  //绑定弹窗关闭
+  const onCancel = () => {
+    setmachineryId();
+    form.resetFields();
+    setEditModal(false);
+  };
+
+  // 绑定提交
+  const Submit = (values) => {
+    setLoading(true);
+    addDevice(...values, machineryId).then(() => {
+      setLoading(false);
+      message.success(`绑定成功`);
+      onCancel();
+      actionRef.current.reload();
+    });
+    // if (machineryId) {
+    //   deleteDevice(machineryId)
+    //     .then(() => {
+    //       setLoading(false);
+    //       message.success(`解绑成功`);
+    //       onCancel();
+    //       actionRef.current.reload();
+    //     })
+    //     .catch((err) => {
+    //       setLoading(false);
+    //       message.error(err.message || err);
+    //     });
+    // }
+  };
+
+  useEffect(() => {
+    getDeviceList().then((res) => {
+      setNewsTypeList(res.records);
+    }).catch((err) => {
+      console.log(err.message)
+    });
+  }, []);
+
   const columns = [
     {
       title: '行号',
-      dataIndex: 'name',
-      key: 'name',
+      dataIndex: 'deviceId',
+      key: 'deviceId',
     },
     {
       title: '设备编号',
-      dataIndex: 'name',
-      key: 'name',
+      dataIndex: 'deviceNo',
+      key: 'deviceNo',
       search: false,
     },
     {
       title: '设备类型',
-      dataIndex: 'name',
-      key: 'name',
+      dataIndex: 'deviceType',
+      key: 'deviceType',
+      valueType: 'select',
+      // request: () => queryTable(getDeviceList)(),
     },
     {
       title: '在线状态',
-      dataIndex: 'name',
-      key: 'name',
+      dataIndex: 'onlineStatus',
+      key: 'onlineStatus',
+      render: (_, record) => {
+        return record.onlineStatus === 1 ? '在线' : '离线';
+      },
     },
     {
       title: '注册时间',
     },
     {
       title: '绑定农机',
-      dataIndex: 'name',
-      key: 'name',
+      dataIndex: 'machineryId',
+      key: 'machineryId',
       search: false,
     },
     {
       width: 160,
       render: (_, record) => [
         <Button type="link" style={{ padding: 0 }} key={1} onClick={() => handelEdit(record)}>
-          编辑
+          查看作业
+        </Button>,
+        <Button type="link" style={{ padding: 0 }} key={2} onClick={() => handelEdit(record)}>
+          修改
+        </Button>,
+        <Button style={{ padding: 0 }} type="link" key={3} onClick={() => handelEdit(record)}>
+          {record.machineryId === null ? '绑定' : '解绑'}
         </Button>,
-        <Popconfirm
-          key={2}
-          title="您是否确认删除 ?"
-          onConfirm={() => handleDelete(record.regionId)}
-          okText="确定"
-          cancelText="取消"
-        >
-          <Button style={{ padding: 0 }} type="link">
-            删除
-          </Button>
-        </Popconfirm>,
       ],
     },
   ];
   return (
     <PageHeaderWrapper>
       <PageTable
+        request={getDeviceList}
         columns={columns}
         actionRef={actionRef}
-        rowKey="regionId"
+        // rowKey="deviceId"
         options={false}
         // toolBarRender={actions}
         scroll={{ x: 1000 }}
       />
-      {/* <Modal
+      <Modal
         forceRender
-        title={regionId ? '区域编辑' : '区域新增'}
+        title="绑定农机"
         visible={editModal}
         onCancel={onCancel}
         keyboard={false}
         footer={null}
       >
         <Form {...formItemLayout} onFinish={Submit} form={form}>
-          <FormItem label="区域名" name="name" rules={[{ required: true, message: '请输入' }]}>
-            <Input placeholder="请输入" />
+          <FormItem label="农机分类" name="deviceType" rules={[{ required: true, message: '请选择农机分类' }]}
+          >
+            <Select allowClear style={{ width: '320px' }}>
+              {newsTypeList.map((item) => (
+                <Option value={item.deviceType} key={item.deviceType}>
+                  {item.deviceType}
+                </Option>
+              ))}
+            </Select>
+          </FormItem>
+          <FormItem label="选择农机" name="deviceNo" rules={[{ required: true, message: '请选择农机名' }]}>
+            <Select allowClear style={{ width: '320px' }}>
+              {newsTypeList.map((item) => (
+                <Option value={item.deviceNo} key={item.deviceNo}>
+                  {item.deviceNo}
+                </Option>
+              ))}
+            </Select>
           </FormItem>
           <FormItem label=" " colon={false}>
-            <Button type="default" onClick={onCancel}>
+            <Button type="default" onClick={onCancel} style={{ marginTop: '2em', marginLeft: '4em' }}>
               取消
             </Button>
             <Button
               type="primary"
               loading={loading}
               htmlType="Submit"
-              style={{ marginLeft: '4em' }}
+              style={{ marginTop: '2em', marginLeft: '2em' }}
             >
               确认
             </Button>
           </FormItem>
         </Form>
-      </Modal> */}
+      </Modal>
     </PageHeaderWrapper>
   );
 };

src/services/device.js

  */
 export const getHatcDeviceList = (params) => request('/hatc-device', { params });
 
+/**
+ * 传感设备列表
+ * @param {*} params
+ * @returns
+ */
+export const getDeviceList = (params) => request('/device', { params });
+
 /**
  * 通过设备号查询相关设备列表  选好了点击绑定时根据当前选择的设备id查询
  * 同终端列表
  * @returns
  */
 export const addDevice = (data) => request('/device', { method: 'post', data });
+
+/**
+ * 保存农机
+ * @param {*} data
+ * @returns
+ */
+export const addMachinery = (data) => request('/device', { method: 'post', data });
+
+/**
+ * 取消绑定
+ * @param {*} data
+ * @returns
+ */
+export const deleteDevice = (id) => request(`/device/${id}`, { method: 'delete' });