feat(metadata): edit metadata

src/pages/device/Product/Detail/Metadata/Base/Edit/index.tsx

@@ -0,0 +1,30 @@
+import { Drawer } from 'antd';
+import { observer } from '@formily/react';
+import MetadataModel from '@/pages/device/Product/Detail/Metadata/Base/model';
+
+const Edit = observer(() => {
+  const metadataTypeMapping = {
+    property: '属性',
+    events: '事件',
+    function: '功能',
+    tag: '标签',
+  };
+
+  return (
+    <Drawer
+      width="20vw"
+      visible={true}
+      title={`编辑${metadataTypeMapping[MetadataModel.type]}`}
+      onClose={() => {
+        MetadataModel.edit = false;
+        MetadataModel.item = {};
+      }}
+      destroyOnClose={true}
+      zIndex={1000}
+    >
+      {MetadataModel.type}
+      {JSON.stringify(MetadataModel.item)}
+    </Drawer>
+  );
+});
+export default Edit;

src/pages/device/Product/Detail/Metadata/Base/index.tsx

@@ -7,12 +7,15 @@ import type { MetadataItem } from '@/pages/device/Product/typings';
 import MetadataMapping from '@/pages/device/Product/Detail/Metadata/Base/columns';
 import { Popconfirm, Tooltip } from 'antd';
 import { EditOutlined, MinusOutlined } from '@ant-design/icons';
+import Edit from '@/pages/device/Product/Detail/Metadata/Base/Edit';
+import { observer } from '@formily/react';
+import MetadataModel from '@/pages/device/Product/Detail/Metadata/Base/model';
 
 interface Props {
   type: 'events' | 'function' | 'property' | 'tag';
 }
 
-const BaseMetadata = (props: Props) => {
+const BaseMetadata = observer((props: Props) => {
   const { type } = props;
   const param = useParams<{ id: string }>();
 
@@ -29,7 +32,9 @@ const BaseMetadata = (props: Props) => {
         <a
           key="editable"
           onClick={() => {
-            console.log(record);
+            MetadataModel.edit = true;
+            MetadataModel.item = record;
+            MetadataModel.type = type;
           }}
         >
           <Tooltip title="编辑">
@@ -55,15 +60,19 @@ const BaseMetadata = (props: Props) => {
   useEffect(() => {
     initData().then(() => setLoading(false));
   }, [initData]);
+
   return (
-    <ProTable
-      loading={loading}
-      dataSource={data}
-      size={'small'}
-      columns={MetadataMapping.get(type)!.concat(actions)}
-      rowKey="id"
-      search={false}
-    />
+    <>
+      <ProTable
+        loading={loading}
+        dataSource={data}
+        size="small"
+        columns={MetadataMapping.get(type)!.concat(actions)}
+        rowKey="id"
+        search={false}
+      />
+      {MetadataModel.edit && <Edit />}
+    </>
   );
-};
+});
 export default BaseMetadata;

src/pages/device/Product/Detail/Metadata/Base/model.ts

@@ -0,0 +1,14 @@
+import { model } from '@formily/reactive';
+import type { MetadataItem } from '@/pages/device/Product/typings';
+
+type MetadataModelType = {
+  item: MetadataItem;
+  edit: boolean;
+  type: 'events' | 'function' | 'property' | 'tag';
+};
+const MetadataModel = model<MetadataModelType>({
+  item: {},
+  edit: false,
+  type: 'events',
+});
+export default MetadataModel;