yinweiwen
2 years ago
3 changed files with 99 additions and 9 deletions
@ -0,0 +1,89 @@ |
|||
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); |
|||
Loading…
Reference in new issue