product-info

code/web/client/src/sections/meta/containers/ProductCard.js

@@ -2,9 +2,12 @@ import React, { useState, useRef, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { Button, Empty, Space, Spin, Tag, Descriptions } from 'antd';
 import '../style.less';
+import { ProTable } from '@ant-design/pro-table';
+import { render } from 'react-dom';
+import { Link } from 'react-router-dom';
 
 const ProductCard = (props) => {
-    const { dispatch, actions, productId, product, loading } = props
+    const { dispatch, actions, productId, product, products, loading } = props
 
     const { meta } = actions;
 
@@ -14,9 +17,31 @@ const ProductCard = (props) => {
         }
     }, []);
 
+    const columns = [{
+        title: '能力',
+        dataIndex: 'cmname'
+    }, {
+        title: '描述',
+        dataIndex: 'cmdesc'
+    }, {
+        title: '接口',
+        dataIndex: 'iname'
+    }, {
+        title: '协议名',
+        dataIndex: 'pmdesc'
+    }, {
+        title: '协议',
+        dataIndex: 'pmname',
+        render: (_, item) => {
+            return <a href={`protocol/${item.pmname}`}>{item.pmname}</a>;
+        },
+    },
+    ]
+
+    const actionRef = useRef();
     return (
         <Spin spinning={loading}>
-            <Descriptions  title="Product Info" bordered>
+            <Descriptions title="Product Info" bordered>
                 <Descriptions.Item label="ID" span={3} >{product?.Id}</Descriptions.Item>
                 <Descriptions.Item label="名称" span={2}>{product?.Name}</Descriptions.Item>
                 <Descriptions.Item label="型号" span={1}>{product?.Model}</Descriptions.Item>
@@ -27,23 +52,37 @@ const ProductCard = (props) => {
                 <Descriptions.Item label="创建用户" >{product?.Username}</Descriptions.Item>
                 <Descriptions.Item label="资源类型" span={3}>{product?.FilterResource}</Descriptions.Item>
             </Descriptions>
+            <h3>能力集合</h3>
+            <ProTable
+                columns={columns}
+                actionRef={actionRef}
+                dataSource={products}
+                options={false}
+                toolBarRender={false}
+                search={false}
+
+            >
+            </ProTable>
         </Spin>
     )
 }
 
 function mapStateToProps(state) {
     const { auth, global, product } = state;
+    console.log(product)
+    let raw = product
     let p = {}
     if (product && product.data && (product.data.data ?? []).length > 0) {
-        p=product.data.data[0];
+        p = product.data.data[0];
     }
+    console.log(raw.data?.data ?? [])
 
     return {
         user: auth.user,
         actions: global.actions,
         loading: product.isRequesting,
         product: p,
-        productCaps: product.data?.data ?? [],
+        products: raw.data?.data ?? [],
     };
 }
 

code/web/client/src/sections/meta/containers/ProductsProfile.js

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { connect } from 'react-redux';
-import { Button, Space, Tag ,Drawer} from 'antd';
+import { Button, Space, Tag, Drawer } from 'antd';
 import '../style.less';
 import ProTable from '@ant-design/pro-table';
 import ConfigModal from './ConfigModal';
@@ -18,6 +18,11 @@ const ProductsProfile = (props) => {
     useEffect(() => {
         dispatch(meta.listProducts())
     }, []);
+
+    useEffect(() => {
+        requestList()
+    }, [products]);
+
     const pageSize = 10
 
     const actionRef = useRef();
@@ -79,44 +84,47 @@ const ProductsProfile = (props) => {
     },
     ]
 
-    const requestList = async (params, sorter) => {
+    const requestList = (params, sort) => {
         if (!products) {
             return null
         }
         let tmp = products;
-        if (!!params.Name) {
+        if (!!params?.Name) {
             tmp = tmp.filter(a => a.Name.includes(params.Name))
         }
-        if (!!params.Id) {
+        if (!!params?.Id) {
             tmp = tmp.filter(a => a.Id.includes(params.Id))
         }
-        if (!!params.Company) {
+        if (!!params?.Company) {
             tmp = tmp.filter(a => a.Company.includes(params.Company))
         }
-        if (!!params.Model) {
+        if (!!params?.Model) {
             tmp = tmp.filter(a => a.Model.includes(params.Model))
         }
-        if (!!sorter.CreatedAt) {
-            console.log(sorter)
+        if (!!sort?.CreatedAt) {
+            console.log(sort)
             tmp = tmp.sort((a, b) => {
                 let aTime = new Date(a.CreatedAt).getTime()
                 let bTime = new Date(b.CreatedAt).getTime()
-                return sorter.CreatedAt === "ascend" ? aTime - bTime : bTime - aTime
+                return sort.CreatedAt === "ascend" ? aTime - bTime : bTime - aTime
             })
         }
-        if (!!sorter.UpdatedAt) {
+        if (!!sort?.UpdatedAt) {
             tmp = tmp.sort((a, b) => {
                 let aTime = new Date(a.UpdatedAt).getTime()
                 let bTime = new Date(b.UpdatedAt).getTime()
-                return sorter.UpdatedAt === "ascend" ? aTime - bTime : bTime - aTime
+                return sort.UpdatedAt === "ascend" ? aTime - bTime : bTime - aTime
             })
         }
-        let pageData = tmp.slice(params.pageSize * (params.current - 1), params.pageSize * params.current);
+        let pageData = params ?
+            tmp.slice(params.pageSize * (params.current - 1), params.pageSize * params.current) :
+            tmp.slice(0, 10);
         pageData = pageData.map(d => ({
             ...d,
             key: d.Id
         }))
-        setFdata(pageData)
+
+        setFdata(tmp)
         return {
             total: tmp.length,
             data: pageData

code/web/package.json

@@ -61,8 +61,6 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
-    "@ant-design/pro-components": "^2.3.25",
-    "@ant-design/pro-descriptions": "^2.0.21",
     "@ant-design/pro-form": "^1.34.0",
     "@ant-design/pro-table": "^2.48.0",
     "@antv/g6": "^4.2.5",