feat: 新增子设备

src/pages/device/Instance/Detail/ChildDevice/SaveChild/index.tsx

@@ -0,0 +1,57 @@
+import TitleComponent from '@/components/TitleComponent';
+import { Button, Col, Form, Input, Row } from 'antd';
+import MapTable from '../../EdgeMap/mapTable';
+
+interface Props {
+  close: () => void;
+}
+
+const SaveChild = (props: Props) => {
+  const [form] = Form.useForm();
+  return (
+    <>
+      <TitleComponent
+        data={
+          <>
+            基本信息
+            <Button
+              onClick={() => {
+                props.close();
+              }}
+              style={{ marginLeft: 10 }}
+            >
+              返回
+            </Button>
+          </>
+        }
+      />
+      <Form layout="vertical" form={form}>
+        <Row gutter={[24, 24]}>
+          <Col span={12}>
+            <Form.Item
+              label="设备名称"
+              name="username"
+              rules={[{ required: true, message: 'Please input your username!' }]}
+            >
+              <Input />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item
+              label="产品名称"
+              name="username"
+              rules={[{ required: true, message: 'Please input your username!' }]}
+            >
+              <Input />
+            </Form.Item>
+          </Col>
+        </Row>
+        <Row>
+          <MapTable metaData={[]} deviceId={''} title={'点位映射'} ref={form} />
+        </Row>
+      </Form>
+    </>
+  );
+};
+
+export default SaveChild;

src/pages/device/Instance/Detail/ChildDevice/index.tsx

@@ -13,6 +13,7 @@ import { Link } from 'umi';
 import { getMenuPathByParams, MENUS_CODE } from '@/utils/menu';
 import { useDomFullHeight } from '@/hooks';
 import { onlyMessage } from '@/utils/util';
+import SaveChild from './SaveChild';
 
 const statusMap = new Map();
 statusMap.set('online', 'success');
@@ -22,10 +23,10 @@ statusMap.set('notActive', 'warning');
 const ChildDevice = () => {
   const intl = useIntl();
   const [visible, setVisible] = useState<boolean>(false);
-
   const actionRef = useRef<ActionType>();
   const [searchParams, setSearchParams] = useState<any>({});
   const [bindKeys, setBindKeys] = useState<any[]>([]);
+  const [childVisible, setChildVisible] = useState<boolean>(false);
 
   const { minHeight } = useDomFullHeight(`.device-detail-childDevice`);
 
@@ -138,78 +139,98 @@ const ChildDevice = () => {
 
   return (
     <Card className={'device-detail-childDevice'} style={{ minHeight }}>
-      <SearchComponent<LogItem>
-        field={[...columns]}
-        target="child-device"
-        enableSave={false}
-        // pattern={'simple'}
-        defaultParam={[
-          { column: 'parentId', value: InstanceModel?.detail?.id || '', termType: 'eq' },
-        ]}
-        onSearch={(param) => {
-          actionRef.current?.reset?.();
-          setSearchParams(param);
-        }}
-        // onReset={() => {
-        //   // 重置分页及搜索参数
-        //   actionRef.current?.reset?.();
-        //   setSearchParams({});
-        // }}
-      />
-      <ProTable<LogItem>
-        search={false}
-        columns={columns}
-        size="small"
-        scroll={{ x: 1366 }}
-        actionRef={actionRef}
-        params={searchParams}
-        rowKey="id"
-        columnEmptyText={''}
-        rowSelection={{
-          selectedRowKeys: bindKeys,
-          onChange: (selectedRowKeys, selectedRows) => {
-            setBindKeys(selectedRows.map((item) => item.id));
-          },
-        }}
-        toolBarRender={() => [
-          <Button
-            onClick={() => {
-              setVisible(true);
+      {childVisible ? (
+        <SaveChild
+          close={() => {
+            setChildVisible(false);
+          }}
+        />
+      ) : (
+        <>
+          <SearchComponent<LogItem>
+            field={[...columns]}
+            target="child-device"
+            enableSave={false}
+            // pattern={'simple'}
+            defaultParam={[
+              { column: 'parentId', value: InstanceModel?.detail?.id || '', termType: 'eq' },
+            ]}
+            onSearch={(param) => {
               actionRef.current?.reset?.();
+              setSearchParams(param);
             }}
-            key="bind"
-            type="primary"
-          >
-            绑定
-          </Button>,
-          <Popconfirm
-            key="unbind"
-            onConfirm={async () => {
-              const resp = await service.unbindBatchDevice(InstanceModel.detail.id!, bindKeys);
-              if (resp.status === 200) {
-                onlyMessage('操作成功！');
-                setBindKeys([]);
-                actionRef.current?.reset?.();
-              }
+            // onReset={() => {
+            //   // 重置分页及搜索参数
+            //   actionRef.current?.reset?.();
+            //   setSearchParams({});
+            // }}
+          />
+          <ProTable<LogItem>
+            search={false}
+            columns={columns}
+            size="small"
+            scroll={{ x: 1366 }}
+            actionRef={actionRef}
+            params={searchParams}
+            rowKey="id"
+            columnEmptyText={''}
+            rowSelection={{
+              selectedRowKeys: bindKeys,
+              onChange: (selectedRowKeys, selectedRows) => {
+                setBindKeys(selectedRows.map((item) => item.id));
+              },
             }}
-            title={'确认解绑吗？'}
-          >
-            <Button>批量解绑</Button>
-          </Popconfirm>,
-        ]}
-        pagination={{
-          pageSize: 10,
-        }}
-        request={(params) => service.query(params)}
-      />
-      {visible && (
-        <BindChildDevice
-          data={{}}
-          onCancel={() => {
-            setVisible(false);
-            actionRef.current?.reload?.();
-          }}
-        />
+            toolBarRender={() => [
+              <Button
+                onClick={() => {
+                  // actionRef.current?.reset?.();
+                  setChildVisible(true);
+                }}
+                key="save"
+                type="primary"
+              >
+                新增并绑定
+              </Button>,
+              <Button
+                onClick={() => {
+                  setVisible(true);
+                  actionRef.current?.reset?.();
+                }}
+                key="bind"
+                type="primary"
+              >
+                绑定
+              </Button>,
+              <Popconfirm
+                key="unbind"
+                onConfirm={async () => {
+                  const resp = await service.unbindBatchDevice(InstanceModel.detail.id!, bindKeys);
+                  if (resp.status === 200) {
+                    onlyMessage('操作成功！');
+                    setBindKeys([]);
+                    actionRef.current?.reset?.();
+                  }
+                }}
+                title={'确认解绑吗？'}
+              >
+                <Button>批量解绑</Button>
+              </Popconfirm>,
+            ]}
+            pagination={{
+              pageSize: 10,
+            }}
+            request={(params) => service.query(params)}
+          />
+          {visible && (
+            <BindChildDevice
+              data={{}}
+              onCancel={() => {
+                setVisible(false);
+                actionRef.current?.reload?.();
+              }}
+            />
+          )}
+        </>
       )}
     </Card>
   );

src/pages/device/Instance/Detail/EdgeMap/mapTable/index.tsx

@@ -1,4 +1,5 @@
 import PermissionButton from '@/components/PermissionButton';
+import TitleComponent from '@/components/TitleComponent';
 import { DisconnectOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import { FormItem, ArrayTable, Editable, Select, NumberPicker } from '@formily/antd';
 import { createForm } from '@formily/core';
@@ -11,6 +12,8 @@ import './index.less';
 interface Props {
   metaData: Record<string, string>[];
   deviceId: string;
+  title?: string;
+  ref?: any;
 }
 
 const MapTable = (props: Props) => {
@@ -221,6 +224,7 @@ const MapTable = (props: Props) => {
   return (
     <div>
       <div className="top-button">
+        {props.title && <TitleComponent data={props.title} />}
         <Button
           style={{ marginRight: 10 }}
           onClick={() => {
@@ -229,7 +233,15 @@ const MapTable = (props: Props) => {
         >
           批量映射
         </Button>
-        <Button type="primary">保存</Button>
+        <Button
+          type="primary"
+          onClick={async () => {
+            const formData = await props.ref?.validateFields();
+            console.log(formData, props.ref);
+          }}
+        >
+          保存
+        </Button>
       </div>
       <div>
         <FormProvider form={form}>

src/pages/device/Instance/Detail/EdgeMap/mapTree/index.tsx

@@ -39,6 +39,7 @@ const MapTree = (props: Props) => {
         {
           name: '设备2',
           id: '1-2',
+          parentId: '1',
         },
       ],
     },
@@ -56,6 +57,7 @@ const MapTree = (props: Props) => {
     return nodes.filter((item) => {
       if (lists.indexOf(item.id) > -1) {
         filterRef.current.push(item);
+        console.log(filterRef.current, 'filterRef.current');
         return false;
       }
       // 符合条件的保留，并且需要递归处理其子节点
@@ -68,15 +70,11 @@ const MapTree = (props: Props) => {
     const newTree = data.map((item: any) => {
       if (item.id === node.parentId) {
         item.collectors.push(node);
-        console.log(item, 'item');
       }
       return item;
     });
-    console.log(newTree, 'newTree');
     setData(newTree);
-    const array = filterRef.current.filter((element: any) => element.id !== node.id);
-    setList(array);
-    // console.log(list,'list')
+    filterRef.current = filterRef.current.filter((element: any) => element.id !== node.id);
   };
 
   useEffect(() => {
@@ -92,7 +90,6 @@ const MapTree = (props: Props) => {
   }, []);
 
   useEffect(() => {
-    console.log(filterRef.current);
     setList(filterRef.current);
   }, [filterRef.current]);
 

src/pages/device/Instance/Detail/index.tsx

@@ -211,7 +211,7 @@ const InstanceDetail = observer(() => {
         datalist.push({
           key: 'child-device',
           tab: '子设备',
-          component: <ChildDevice />,
+          component: <ChildDevice data={InstanceModel.detail} />,
         });
       }
       if (response.result) {