You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
2.9 KiB
89 lines
2.9 KiB
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 ProtocolInfo = (props) => {
|
|
const { dispatch, actions, productId, product, products, loading } = props
|
|
|
|
const { meta } = actions;
|
|
|
|
useEffect(() => {
|
|
if (!!productId) {
|
|
dispatch(meta.getProduct(productId))
|
|
}
|
|
}, []);
|
|
|
|
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.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>
|
|
<Descriptions.Item label="描述" span={3}>{product?.Desc}</Descriptions.Item>
|
|
<Descriptions.Item label="更新时间" span={3}>{product?.UpdatedAt}</Descriptions.Item>
|
|
<Descriptions.Item label="创建时间" span={3}>{product?.CreatedAt}</Descriptions.Item>
|
|
<Descriptions.Item label="所属公司" >{product?.Company}</Descriptions.Item>
|
|
<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];
|
|
}
|
|
console.log(raw.data?.data ?? [])
|
|
|
|
return {
|
|
user: auth.user,
|
|
actions: global.actions,
|
|
loading: product.isRequesting,
|
|
product: p,
|
|
products: raw.data?.data ?? [],
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(ProtocolInfo);
|