设备

src/pages/Device/index.tsx

@@ -1,10 +1,11 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Button, Tabs, Tree} from 'antd';
+import { Button, Spin, Tabs, Tree} from 'antd';
 import ProTable, { ActionType } from '@ant-design/pro-table';
 import { deviceList, getplaceareaList, roomList } from './service';
 import '@/assets/ld_style.less';
 import { getURLInformation, isNotEmpty } from '@/utils/CommonUtils';
 import ProCard from "@ant-design/pro-card";
+import DeviceForm from './DeviceForm';
 
 
 const deviceTypeEnum = {
@@ -24,6 +25,11 @@ const Index: React.FC<{}> = () => {
   const checkRelationRef = useRef<ActionType>(); //操作数据后刷新列表
   const [treeData, setTreeData] = useState<any>();
   const [treeId, setTreeId] = useState<any>();
+  const [updateVisible, setUpdateVisible] = useState<boolean>(false)
+  const [type, setType] = useState<any>();// 状态 编辑or 查看
+  const [deviceId, setDeviceId] = useState<any>("");//设备id
+  const [spin, spinSet] = useState<boolean>(false);//加载遮罩
+  const [updateChange, setUpdateChange] = useState<string>('')
 
   /*拉取数据*/
   useEffect(() => {
@@ -53,36 +59,36 @@ const Index: React.FC<{}> = () => {
     })
   }, []);
 
+  const toAdd = async (props?: any) => {
+    spinSet(true);
+    setUpdateChange('新增设备');
+    setType("new");
+    setUpdateVisible(true);
+
+  }
+  const toEdit = (props: any) => {
+    setUpdateChange('修改设备');
+    setDeviceId(props.id)
+    setType("edit");
+    setUpdateVisible(true);
+  }
+
+  const toRead = (props: any) => {
+    setUpdateChange('查看设备');
+    setDeviceId(props.id)
+    setType("read");
+    setUpdateVisible(true);
+
+  }
   /**
    *  设备管理
    * @param record
    */
-  const cancel = async (record: any) => {};
+
   const current = getURLInformation('current');
   //列表页loading
   const [spinLoading, setSpinLoading] = useState<boolean>(false);
-  //新建应答格式
-  const toCreate = async () => {
-    // const id = getProId();
-    // const param = {
-    //   tpId: id,
-    //   roomType: getURLInformation('roomType'),
-    // };
-    // await getSectionList(param).then((res) => {
-    //   if ((res.code = 200)) {
-    //     if (res.data.length == 0) {
-    //       message.info(`当前项目无可选${sectionName}，无法新增`);
-    //     } else {
-    //       setSectionList(res.data);
-    //       setCreateVisible(true);
-    //     }
-    //   }
-    // });
-  };
-  //编辑应答格式
-  const toEdit = (values: any, param: any) => {
-    
-  };
+
   const onSelect = (selectedKeys: any, info: any) => {
     selectedKeys.length == 0 ? setTreeId(null) : setTreeId(selectedKeys[0])
 
@@ -153,7 +159,7 @@ const Index: React.FC<{}> = () => {
       render: (text: any, record: any) => {
         return (
           <>
-            <Button type="text" onClick={() => {}} danger>
+            <Button type="text" onClick={() => {toEdit(record.id)}} danger>
               编辑
             </Button>
             <Button type="text" onClick={() => {}} danger>
@@ -166,7 +172,8 @@ const Index: React.FC<{}> = () => {
   ];
   
   return (
-    <>
+    <div style={{ padding: '0px 24px' }}>
+      <Spin spinning={spin}>
     <ProCard  split="vertical" bordered headerBordered>
         <ProCard colSpan="300px">
             {treeData == undefined ? null : (
@@ -230,7 +237,7 @@ const Index: React.FC<{}> = () => {
                       >
                         {searchConfig?.searchText}
                       </Button>,
-                       <Button key="toCreate" onClick={() => toCreate()}>
+                       <Button key="toCreate" onClick={() => toAdd()}>
                        新建
                      </Button>,
                     ];
@@ -245,7 +252,14 @@ const Index: React.FC<{}> = () => {
               />
       </ProCard>
     </ProCard>
-    </>
+    {updateVisible ? (
+              <DeviceForm key={Math.random()} titleName={updateChange}
+          type={type} deviceId={deviceId} onCancel={() => setUpdateVisible(false)}
+          modalVisible={updateVisible} tpId={''} />
+            ) : null}
+    </Spin>
+    </div>
+            
   );
 };
 export default Index