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