feats

src/pages/Machinery/Sensing/components/FeiFangForm.jsx

 import React from 'react';
-import { Modal, Form, Input, Button } from 'antd';
+import { Modal, Form, Input, Select, Button } from 'antd';
 
 const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
 const FormItem = Form.Item;
 
 export default (props) => {
-  const { openfeiyang, onCancel, onFinish } = props;
+  const { onCancel, onFinish } = props;
 
   const [form] = Form.useForm();
-  const [loading, setLoading] = React.useState(false);
+
   return (
-    <Modal title="飞防" visible={openfeiyang} maskClosable={false} footer={null} onCancel={onCancel}>
-      <Form {...formItemLayout} onFinish={onFinish} form={form}>
-        <FormItem
-          label="设备编号"
-          name="deviceNo"
-          rules={[{ required: true, message: '请输入设备编号' }]}
-        >
-          <Input placeholder="请输入" />
-        </FormItem>
-        <FormItem label=" " colon={false}>
-          <Button type="default" onClick={onCancel}>
-            取消
-          </Button>
-          <Button type="primary" loading={loading} htmlType="Submit" style={{ marginLeft: '2em' }}>
-            确认
-          </Button>
-        </FormItem>
-      </Form>
-    </Modal>
+    <Form {...formItemLayout} onFinish={onFinish} form={form}>
+      <FormItem
+        label="设备大类"
+        name="deviceKind"
+        initialValue="feifang"
+        rules={[{ required: true, message: '请选择设备大类' }]}
+      >
+        <Select placeholder="请选择">
+          <Select.Option value="feifang">飞防</Select.Option>
+        </Select>
+      </FormItem>
+      <FormItem
+        label="设备编号"
+        name="deviceNo"
+        rules={[{ required: true, message: '请输入设备编号' }]}
+      >
+        <Input placeholder="请输入" />
+      </FormItem>
+      <FormItem label=" " colon={false}>
+        <Button type="default" onClick={onCancel}>
+          取消
+        </Button>
+        <Button type="primary" htmlType="Submit" style={{ marginLeft: '2em' }}>
+          确认
+        </Button>
+      </FormItem>
+    </Form>
   );
-}
+};

src/pages/Machinery/Sensing/components/List.jsx

 import moment from 'moment';
 import { Button, Popconfirm, Dropdown, Menu, message } from 'antd';
 import PageTable from '@/components/PageTable';
-import { } from '@/services/device';
-import { getDeviceList, syncShenSong } from '@/services/device';
+import { getDeviceList } from '@/services/device';
 
 const formatterTime = (val) => {
   return val && val !== '-' ? moment(val).format('YYYY-MM-DD') : '-';
 };
 
-const menus = (
-  <Menu>
-    <Menu.Item key="shensong">深松</Menu.Item>
-    <Menu.Item key="feifang">飞防</Menu.Item>
-  </Menu>
-);
-
 const List = (props, ref) => {
-  const { onBindOpt, onFeiFang } = props;
+  const { onOperate, toolBar } = props;
+
   const columns = [
     {
       title: '设备类型',
     {
       title: '操作',
       valueType: 'option',
-      width: 160,
+      width: 240,
       render: (_, record) => [
         <Link
           to={`/Machinery/OperationStatistics?deviceType=${record.deviceType}&deviceNo=${record.deviceNo}`}
           key={1}
         >
-          查看作业
+          作业
         </Link>,
         record.machineryId === null ? (
-          <Button key={2} type="link" onClick={() => onBindOpt(record)}>
+          <Button key={2} type="link" onClick={() => onOperate(record, 'bind')}>
             绑定
           </Button>
         ) : (
-          <Popconfirm key={3} title={`是否进行'解绑'操作?`} onConfirm={() => onBindOpt(record)}>
+          <Popconfirm
+            key={3}
+            title={`是否进行解绑操作?`}
+            onConfirm={() => onOperate(record, 'unbind')}
+          >
             <Button type="link">解绑</Button>
           </Popconfirm>
         ),
+        <Popconfirm
+          key={4}
+          title={`确认进行删除操作?`}
+          onConfirm={() => onOperate(record, 'delete')}
+        >
+          <a href="#">删除</a>
+        </Popconfirm>,
       ],
     },
   ];
 
-  const [syncing, setSyncing] = React.useState(false);
   const actionRef = React.useRef();
 
-  const onSyncShenSong = () => {
-    setSyncing(true);
-    syncShenSong()
-      .then((res) => {
-        setSyncing(false);
-        actionRef.current.reload();
-        message.success('同步完成');
-      })
-      .catch(() => {
-        setSyncing(false);
-      });
-  };
-
   React.useImperativeHandle(ref, () => {
     return {
       reload: () => actionRef.current.reload(),
       columns={columns}
       rowKey={(row) => `${row.deviceType}-${row.deviceNo}`}
       options={false}
-      toolBarRender={() => [
-        <Button key={1} type="primary" loading={syncing} onClick={onSyncShenSong}>
-          同步深松
-        </Button>,
-        <Button key={3} type="primary" onClick={() => { onFeiFang() }}>
-          同步飞防
-        </Button>,
-      ]}
+      toolBarRender={() => toolBar}
       scroll={{ x: 1000 }}
     />
   );

src/pages/Machinery/Sensing/components/MaBind.jsx

 const Option = Select.Option;
 
 export default (props) => {
-  const { open, onCancel, onFinish } = props;
+  const { onCancel, onFinish } = props;
 
   const [form] = Form.useForm();
   const [machineryTypeList, setMachineryTypeList] = React.useState([]);
   const [typeId, setTypeId] = React.useState();
   const [machineryList, setMachineryList] = React.useState([]);
   const [machineryId, setMachineryId] = React.useState();
-  const [loading, setLoading] = React.useState(false);
 
   // 查询分类列表, 构造下拉框
   React.useEffect(() => {
   }, [typeId]);
 
   return (
-    <Modal title="绑定农机" visible={open} maskClosable={false} footer={null} onCancel={onCancel}>
-      <Form {...formItemLayout} onFinish={onFinish} form={form}>
-        <FormItem
-          label="农机分类"
-          name="typeId"
-          rules={[{ required: true, message: '请选择农机分类' }]}
-        >
-          <Select value={typeId} onChange={setTypeId} allowClear style={{ width: '320px' }}>
-            {machineryTypeList.map((item) => (
-              <Option value={item.typeId} key={item.typeId}>
-                {item.name}
-              </Option>
-            ))}
-          </Select>
-        </FormItem>
-        <FormItem
-          label="选择农机"
-          name="machineryId"
-          rules={[{ required: true, message: '请选择农机名' }]}
-        >
-          <Select
-            value={machineryId}
-            onChange={setMachineryId}
-            allowClear
-            style={{ width: '320px' }}
-          >
-            {machineryList.map((item) => (
-              <Option value={item.machineryId} key={item.machineryId}>
-                {item.name}
-              </Option>
-            ))}
-          </Select>
-        </FormItem>
-        <FormItem label=" " colon={false}>
-          <Button type="default" onClick={onCancel}>
-            取消
-          </Button>
-          <Button type="primary" loading={loading} htmlType="Submit" style={{ marginLeft: '2em' }}>
-            确认
-          </Button>
-        </FormItem>
-      </Form>
-    </Modal>
+    <Form {...formItemLayout} onFinish={onFinish} form={form}>
+      <FormItem
+        label="农机分类"
+        name="typeId"
+        rules={[{ required: true, message: '请选择农机分类' }]}
+      >
+        <Select value={typeId} onChange={setTypeId} allowClear style={{ width: '320px' }}>
+          {machineryTypeList.map((item) => (
+            <Option value={item.typeId} key={item.typeId}>
+              {item.name}
+            </Option>
+          ))}
+        </Select>
+      </FormItem>
+      <FormItem
+        label="选择农机"
+        name="machineryId"
+        rules={[{ required: true, message: '请选择农机名' }]}
+      >
+        <Select value={machineryId} onChange={setMachineryId} allowClear style={{ width: '320px' }}>
+          {machineryList.map((item) => (
+            <Option value={item.machineryId} key={item.machineryId}>
+              {item.name}
+            </Option>
+          ))}
+        </Select>
+      </FormItem>
+      <FormItem label=" " colon={false}>
+        <Button type="default" onClick={onCancel}>
+          取消
+        </Button>
+        <Button type="primary" htmlType="Submit" style={{ marginLeft: '2em' }}>
+          确认
+        </Button>
+      </FormItem>
+    </Form>
   );
 };

src/pages/Machinery/Sensing/index.jsx

 import React, { useState, useEffect, useRef } from 'react';
 import { Button, Modal, Select, Form, message } from 'antd';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { addDevice, deleteDevice } from '@/services/device';
+import {
+  addDevice,
+  deleteDevice,
+  syncShenSong,
+  addRawDevice,
+  deleteRawDevice,
+} from '@/services/device';
 import List from './components/List';
 import MaBind from './components/MaBind';
 import FeiFangForm from './components/FeiFangForm';
 
 export default (props) => {
-  // 绑定表单
-
   const [open, setOpen] = useState(false);
-  const [openfeiyang, setOpenFeiYang] = useState(false);
+  const [syncing, setSyncing] = React.useState(false);
+  const [syncing2, setSyncing2] = React.useState(false);
   const [device, setDevice] = useState();
   const listRef = useRef();
+  const actRef = useRef();
+
+  const modalTitle = actRef.current === 'add' ? '新增设备' : '绑定农机';
 
   // 绑定农机
   const onBind = ({ machineryId }) => {
+    const hide = message.loading('请稍候...', 0);
     const data = { ...device, machineryId };
-    addDevice(data).then((res) => {
-      setOpen(false);
-      message.success(`绑定成功`);
-      listRef.current.reload();
-    });
+    addDevice(data)
+      .then((res) => {
+        hide();
+        setOpen(false);
+        message.success(`绑定成功`);
+        listRef.current.reload();
+      })
+      .catch((err) => {
+        hide();
+        message.error(err.message || err);
+      });
   };
 
   // 解绑
   const unBind = (deviceId) => {
+    const hide = message.loading('请稍候...', 0);
     deleteDevice(deviceId)
       .then(() => {
-        // setLoading(false);
+        hide();
         message.success(`解绑成功`);
         listRef.current.reload();
       })
       .catch((err) => {
-        // setLoading(false);
+        hide();
         message.error(err.message || err);
       });
   };
 
-  // 设备农机绑定或者解绑操作
-  const onBindOpt = (row) => {
+  // 删除设备
+  const onDelete = (row) => {
+    const hide = message.loading('请稍候...', 0);
+    deleteRawDevice(row.deviceId)
+      .then(() => {
+        hide();
+        message.success('删除成功');
+        listRef.current.reload();
+      })
+      .catch((err) => {
+        hide();
+        message.error(err.message || err);
+      });
+  };
+
+  // 新增飞防设备
+  const onAddDevice = ({ deviceNo, deviceKind = 'feifang' }) => {
+    setSyncing2(true);
+    addRawDevice({ deviceKind, deviceNo })
+      .then((res) => {
+        message.success('添加设备成功');
+        setSyncing2(false);
+        setOpen(false);
+        listRef.current.reload();
+      })
+      .catch((err) => {});
+  };
+
+  // 同步深松
+  const onSyncShenSong = () => {
+    setSyncing(true);
+    syncShenSong()
+      .then((res) => {
+        setSyncing(false);
+        listRef.current.reload();
+        message.success('同步完成');
+      })
+      .catch(() => {
+        setSyncing(false);
+      });
+  };
+
+  // 同步飞防
+  const onSyncFeiFang = () => {
+    actRef.current = 'add';
+    setOpen(true);
+  };
+
+  // 设备操作
+  const onOperate = (row, act) => {
+    actRef.current = act;
     setDevice({ ...row });
 
-    if (!row.machineryId) {
-      // 农机ID 不存在, 说明是绑定业务
-      setOpen(true);
-    } else {
-      unBind(row.deviceId);
+    switch (act) {
+      case 'bind':
+        setOpen(true);
+        break;
+      case 'unbind':
+        unBind(row.deviceId);
+        break;
+      case 'delete':
+        onDelete(row);
+        break;
+      default:
+        break;
     }
   };
 
-  //同步飞防弹窗
-  const onFeiFang = () => {
-    setOpenFeiYang(true);
-  }
-
   return (
     <PageHeaderWrapper>
-      <List ref={listRef} onBindOpt={onBindOpt} onFeiFang={onFeiFang} onSyncDevice={console.log} />
-      <MaBind open={open} device={device} onCancel={() => setOpen(false)} onFinish={onBind} />
-      <FeiFangForm openfeiyang={openfeiyang} onCancel={() => setOpenFeiYang(false)} />
+      <List
+        ref={listRef}
+        onOperate={onOperate}
+        toolBar={[
+          <Button ghost key={1} type="primary" loading={syncing} onClick={onSyncShenSong}>
+            同步深松
+          </Button>,
+          <Button ghost key={3} type="primary" loading={syncing2} onClick={onSyncFeiFang}>
+            同步飞防
+          </Button>,
+        ]}
+      />
+      <Modal
+        title={modalTitle}
+        visible={open}
+        maskClosable={false}
+        footer={null}
+        onCancel={() => setOpen(false)}
+      >
+        {actRef.current === 'add' ? (
+          <FeiFangForm onCancel={() => setOpen(false)} onFinish={onAddDevice} />
+        ) : (
+          <MaBind onCancel={() => setOpen(false)} onFinish={onBind} />
+        )}
+      </Modal>
     </PageHeaderWrapper>
   );
 };

src/services/device.js

  * @returns
  */
 export const syncShenSong = () => request('/raw-device/sync', { method: 'put' });
+
+/**
+ * 增加设备
+ * @returns
+ */
+export const addRawDevice = (data) => request('/raw-device', { method: 'POST', data });
+
+/**
+ * 删除设备
+ * @returns
+ */
+export const deleteRawDevice = (id) => request(`/raw-device/${id}`, { method: 'DELETE' });