chore(metadata): metadata Table refactor

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

@@ -0,0 +1,74 @@
+import type { ProColumns } from '@jetlinks/pro-table';
+import type { MetadataItem } from '@/pages/device/Product/typings';
+
+const BaseColumns: ProColumns<MetadataItem>[] = [
+  {
+    dataIndex: 'index',
+    valueType: 'indexBorder',
+    width: 48,
+  },
+  {
+    title: '标识',
+    dataIndex: 'id',
+  },
+  {
+    title: '名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '说明',
+    dataIndex: 'description',
+    ellipsis: true,
+  },
+];
+
+const EventColumns: ProColumns<MetadataItem>[] = BaseColumns.concat([
+  {
+    title: '事件级别',
+    dataIndex: 'expands.level',
+  },
+]);
+
+const FunctionColumns: ProColumns<MetadataItem>[] = BaseColumns.concat([
+  {
+    title: '是否异步',
+    dataIndex: 'async',
+  },
+  {
+    title: '是否只读',
+    dataIndex: 'expands.readOnly',
+    render: (text) => (text ? '是' : '否'),
+  },
+]);
+
+const PropertyColumns: ProColumns<MetadataItem>[] = BaseColumns.concat([
+  {
+    title: '数据类型',
+    dataIndex: 'dataType',
+  },
+  {
+    title: '是否只读',
+    dataIndex: 'expands.readOnly',
+    render: (text) => (text === 'true' || text === true ? '是' : '否'),
+  },
+]);
+
+const TagColumns: ProColumns<MetadataItem>[] = BaseColumns.concat([
+  {
+    title: '数据类型',
+    dataIndex: 'valueType',
+  },
+  {
+    title: '是否只读',
+    dataIndex: 'expands.readOnly',
+    render: (text) => (text === 'true' || text === true ? '是' : '否'),
+  },
+]);
+
+const MetadataMapping = new Map<string, ProColumns<MetadataItem>[]>();
+MetadataMapping.set('property', PropertyColumns);
+MetadataMapping.set('events', EventColumns);
+MetadataMapping.set('tag', TagColumns);
+MetadataMapping.set('function', FunctionColumns);
+
+export default MetadataMapping;

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

@@ -0,0 +1,69 @@
+import type { ProColumns } from '@jetlinks/pro-table';
+import ProTable from '@jetlinks/pro-table';
+import { useCallback, useEffect, useState } from 'react';
+import { useParams } from 'umi';
+import DB from '@/db';
+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';
+
+interface Props {
+  type: 'events' | 'function' | 'property' | 'tag';
+}
+
+const BaseMetadata = (props: Props) => {
+  const { type } = props;
+  const param = useParams<{ id: string }>();
+
+  const [loading, setLoading] = useState<boolean>(true);
+  const [data, setData] = useState<MetadataItem[]>([]);
+
+  const actions: ProColumns<MetadataItem>[] = [
+    {
+      title: '操作',
+      valueType: 'option',
+      align: 'center',
+      width: 200,
+      render: (_: unknown, record: MetadataItem) => [
+        <a
+          key="editable"
+          onClick={() => {
+            console.log(record);
+          }}
+        >
+          <Tooltip title="编辑">
+            <EditOutlined />
+          </Tooltip>
+        </a>,
+        <a key="delete">
+          <Popconfirm title="确认删除？" onConfirm={async () => {}}>
+            <Tooltip title="删除">
+              <MinusOutlined />
+            </Tooltip>
+          </Popconfirm>
+        </a>,
+      ],
+    },
+  ];
+
+  const initData = useCallback(async () => {
+    const result = await DB.getDB().table(`${param.id}-${type}`).toArray();
+    setData(result);
+  }, [param.id, type]);
+
+  useEffect(() => {
+    initData().then(() => setLoading(false));
+  }, [initData]);
+  return (
+    <ProTable
+      loading={loading}
+      dataSource={data}
+      size={'small'}
+      columns={MetadataMapping.get(type)!.concat(actions)}
+      rowKey="id"
+      search={false}
+    />
+  );
+};
+export default BaseMetadata;

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

@@ -1,48 +0,0 @@
-import type { EventMetadata } from '@/pages/device/Product/typings';
-import type { ProColumns } from '@jetlinks/pro-table';
-import ProTable from '@jetlinks/pro-table';
-import { useEffect, useState } from 'react';
-import { useParams } from 'umi';
-import DB from '@/db';
-
-const Event = () => {
-  const columns: ProColumns<EventMetadata>[] = [
-    {
-      dataIndex: 'index',
-      valueType: 'indexBorder',
-      width: 48,
-    },
-    {
-      title: '标识',
-      dataIndex: 'id',
-    },
-    {
-      title: '名称',
-      dataIndex: 'name',
-    },
-    {
-      title: '事件级别',
-      dataIndex: 'expands.level',
-    },
-    {
-      title: '说明',
-      dataIndex: 'description',
-      ellipsis: true,
-    },
-  ];
-
-  const param = useParams<{ id: string }>();
-
-  const [data, setData] = useState<EventMetadata[]>([]);
-
-  const initData = async () => {
-    const result = await DB.getDB().table(`${param.id}-events`).toArray();
-    setData(result);
-  };
-  useEffect(() => {
-    initData();
-    // setData(propertyTable);
-  }, [param]);
-  return <ProTable dataSource={data} size={'small'} columns={columns} rowKey="id" search={false} />;
-};
-export default Event;

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

@@ -1,53 +0,0 @@
-import type { ProColumns } from '@jetlinks/pro-table';
-import ProTable from '@jetlinks/pro-table';
-import type { FunctionMetadata } from '@/pages/device/Product/typings';
-import { useParams } from 'umi';
-import { useEffect, useState } from 'react';
-import DB from '@/db';
-
-const Function = () => {
-  const columns: ProColumns<FunctionMetadata>[] = [
-    {
-      dataIndex: 'index',
-      valueType: 'indexBorder',
-      width: 48,
-    },
-    {
-      title: '标识',
-      dataIndex: 'id',
-    },
-    {
-      title: '名称',
-      dataIndex: 'name',
-    },
-    {
-      title: '是否异步',
-      dataIndex: 'async',
-    },
-    {
-      title: '是否只读',
-      dataIndex: 'expands.readOnly',
-      render: (text) => (text ? '是' : '否'),
-    },
-    {
-      title: '说明',
-      dataIndex: 'description',
-      ellipsis: true,
-    },
-  ];
-
-  const param = useParams<{ id: string }>();
-
-  const [data, setData] = useState<FunctionMetadata[]>([]);
-
-  const initData = async () => {
-    const result = await DB.getDB().table(`${param.id}-function`).toArray();
-    setData(result);
-  };
-  useEffect(() => {
-    initData();
-    // setData(propertyTable);
-  }, [param]);
-  return <ProTable size={'small'} dataSource={data} columns={columns} rowKey="id" search={false} />;
-};
-export default Function;

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

@@ -1,53 +0,0 @@
-import type { ProColumns } from '@jetlinks/pro-table';
-import type { PropertyMetadata } from '@/pages/device/Product/typings';
-import ProTable from '@jetlinks/pro-table';
-import { useEffect, useState } from 'react';
-import DB from '@/db';
-import { useParams } from 'umi';
-
-const Property = () => {
-  const columns: ProColumns<PropertyMetadata>[] = [
-    {
-      dataIndex: 'index',
-      valueType: 'indexBorder',
-      width: 48,
-    },
-    {
-      title: '标识',
-      dataIndex: 'id',
-    },
-    {
-      title: '名称',
-      dataIndex: 'name',
-    },
-    {
-      title: '数据类型',
-      dataIndex: 'dataType',
-    },
-    {
-      title: '是否只读',
-      dataIndex: 'expands.readOnly',
-      render: (text) => (text === 'true' || text === true ? '是' : '否'),
-    },
-    {
-      title: '说明',
-      dataIndex: 'description',
-      ellipsis: true,
-    },
-  ];
-
-  const param = useParams<{ id: string }>();
-
-  const [data, setData] = useState<PropertyMetadata[]>([]);
-
-  const initData = async () => {
-    const result = await DB.getDB().table(`${param.id}-property`).toArray();
-    setData(result);
-  };
-  useEffect(() => {
-    initData();
-    // setData(propertyTable);
-  }, [param]);
-  return <ProTable size={'small'} dataSource={data} columns={columns} rowKey="id" search={false} />;
-};
-export default Property;

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

@@ -1,52 +0,0 @@
-import type { TagMetadata } from '@/pages/device/Product/typings';
-import type { ProColumns } from '@jetlinks/pro-table';
-import ProTable from '@jetlinks/pro-table';
-import { useParams } from 'umi';
-import { useEffect, useState } from 'react';
-import DB from '@/db';
-
-const Tag = () => {
-  const columns: ProColumns<TagMetadata>[] = [
-    {
-      dataIndex: 'index',
-      valueType: 'indexBorder',
-      width: 48,
-    },
-    {
-      title: '标识',
-      dataIndex: 'id',
-    },
-    {
-      title: '名称',
-      dataIndex: 'name',
-    },
-    {
-      title: '数据类型',
-      dataIndex: 'valueType',
-    },
-    {
-      title: '是否只读',
-      dataIndex: 'expands.readOnly',
-      render: (text) => (text === 'true' || text === true ? '是' : '否'),
-    },
-    {
-      title: '说明',
-      dataIndex: 'description',
-      ellipsis: true,
-    },
-  ];
-  const param = useParams<{ id: string }>();
-
-  const [data, setData] = useState<TagMetadata[]>([]);
-
-  const initData = async () => {
-    const result = await DB.getDB().table(`${param.id}-tag`).toArray();
-    setData(result);
-  };
-  useEffect(() => {
-    initData();
-    // setData(propertyTable);
-  }, [param]);
-  return <ProTable dataSource={data} size={'small'} columns={columns} rowKey="id" search={false} />;
-};
-export default Tag;

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

@@ -1,9 +1,10 @@
 import { observer } from '@formily/react';
 import { Button, Space, Tabs } from 'antd';
-import Property from '@/pages/device/Product/Detail/Metadata/Property';
-import Function from '@/pages/device/Product/Detail/Metadata/Function';
-import Event from '@/pages/device/Product/Detail/Metadata/Event';
-import Tag from '@/pages/device/Product/Detail/Metadata/Tag';
+// import Property from '@/pages/device/Product/Detail/Metadata/Property';
+// import Function from '@/pages/device/Product/Detail/Metadata/Function';
+// import Event from '@/pages/device/Product/Detail/Metadata/Event';
+// import Tag from '@/pages/device/Product/Detail/Metadata/Tag';
+import BaseMetadata from '@/pages/device/Product/Detail/Metadata/Base';
 
 const Metadata = observer(() => {
   return (
@@ -16,16 +17,16 @@ const Metadata = observer(() => {
       }
     >
       <Tabs.TabPane tab="属性定义" key="property">
-        <Property />
+        <BaseMetadata type={'property'} />
       </Tabs.TabPane>
-      <Tabs.TabPane tab="功能定义" key="func">
-        <Function />
+      <Tabs.TabPane tab="功能定义" key="functions">
+        <BaseMetadata type={'function'} />
       </Tabs.TabPane>
-      <Tabs.TabPane tab="事件定义" key="event">
-        <Event />
+      <Tabs.TabPane tab="事件定义" key="events">
+        <BaseMetadata type={'events'} />
       </Tabs.TabPane>
       <Tabs.TabPane tab="标签定义" key="tag">
-        <Tag />
+        <BaseMetadata type={'tag'} />
       </Tabs.TabPane>
     </Tabs>
   );

src/pages/device/Product/typings.d.ts

@@ -1,4 +1,4 @@
-import { BaseItem, State } from '@/utils/typings';
+import type { BaseItem, State } from '@/utils/typings';
 
 export type ProductItem = {
   id: string;