Skip to content

S
szse
Commit 4ff97156 by zhaochengxiang
Options

资产列表调整

parent b06d22e2
Showing with 65 additions and 123 deletions
src/view/Manage/AssetManage/Component/AssetDetailItem.jsx
import React, { useEffect, useState } from 'react';
import { Avatar, Row, Col, Typography, Divider } from 'antd';
import { Row, Col, Typography } from 'antd';
import { highlightSearchContentByTerms } from '../../../../util';
import './AssetItem.less';
const colors = [
'#BDD2FD',
'#C2C8D5',
'#FBE5A2',
'#F6C3B7',
'#B6E3F5',
'#D3C6EA',
'#FFD8B8',
'#AAD8D8',
'#FFD6E7',
];
const AssetItem = (props) => {
const { data, terms } = props;
......@@ -48,36 +36,29 @@ const AssetItem = (props) => {
return (
<div className='asset-item'>
{
(typesOfElements||[]).map((typeOfElements, index) => {
const _type = typeOfElements.type||'';
(typesOfElements||[]).map((elementGroup, index) => {
const _type = elementGroup.type||'';
return (
<div key={index} className='d-flex' style={{ alignItems: 'center' }}>
<Avatar
className='mr-3'
title={_type}
style={{
backgroundColor: colors[index%colors.length]
}}
>
{ _type==='' ? '无' : _type.slice(0, 2) }
</Avatar>
<div className='textOverflow' style={{ flex: 1 }}>
<Row className='mb-3'>
{
typeOfElements && typeOfElements.elements && typeOfElements.elements.map((element, _index) => {
return (
<Col className='mt-3' key={_index} md={8}>
<Typography.Paragraph title={ `${element.name||''}: ${element.value||''}` } ellipsis>
{ `${element.name||''}: `}{highlightSearchContentByTerms(element.value||'', terms)}
</Typography.Paragraph>
</Col>
);
})
}
</Row>
{ index !== ((typesOfElements||[]).length-1) && <Divider /> }
<div>
<div className='flex' style={{ alignItems: 'center', padding: '15px 0' }}>
<div style={{ width: 3, height: 14, backgroundColor: '#2593fc', marginRight: 5 }} />
<span style={{ fontWeight: 'bold', color: '#464646' }}>{_type||''}</span>
</div>
<Row>
{
elementGroup && elementGroup.elements && elementGroup.elements.map((element, _index) => {
return (
<Col className='mb-3' key={_index} md={8}>
<Typography.Paragraph title={ `${element.name||''}: ${element.value||''}` } style={{ color: '#464646' }} ellipsis>
{ `${element.name||''}: `}{highlightSearchContentByTerms(element.value||'', terms)}
</Typography.Paragraph>
</Col>
);
})
}
</Row>
<div style={{ width: '100%', height: 2, backgroundColor: '#ededed' }} />
</div>
)
})
......
src/view/Manage/AssetManage/Component/AssetItem.jsx
import React from 'react';
import { Row, Col, Typography, Divider } from 'antd';
import { Row, Col, Typography } from 'antd';
import './AssetItem.less';
const colors = [
'#BDD2FD',
'#C2C8D5',
'#FBE5A2',
'#F6C3B7',
'#B6E3F5',
'#D3C6EA',
'#FFD8B8',
'#AAD8D8',
'#FFD6E7',
];
const AssetItem = (props) => {
const { data } = props;
......@@ -27,31 +15,24 @@ const AssetItem = (props) => {
return (
<div>
<Divider orientation='left'>{_type||''}</Divider>
{/* <Avatar
className='mr-3'
title={_type}
style={{
backgroundColor: colors[index%colors.length]
}}
>
{ _type==='' ? '无' : _type.slice(0, 2) }
</Avatar> */}
<div>
<Row className='mb-3'>
{
elementGroup && elementGroup.elements && elementGroup.elements.map((element, _index) => {
return (
<Col className='mt-3' key={_index} md={8}>
<Typography.Paragraph title={ `${element.name||''}: ${element.value||''}` } ellipsis>
{ `${element.name||''}: ${element.value||''}` }
</Typography.Paragraph>
</Col>
);
})
}
</Row>
<div className='flex' style={{ alignItems: 'center', padding: '15px 0' }}>
<div style={{ width: 3, height: 14, backgroundColor: '#2593fc', marginRight: 5 }} />
<span style={{ fontWeight: 'bold', color: '#464646' }}>{_type||''}</span>
</div>
<Row>
{
elementGroup && elementGroup.elements && elementGroup.elements.map((element, _index) => {
return (
<Col className='mb-3' key={_index} md={8}>
<Typography.Paragraph title={ `${element.name||''}: ${element.value||''}` } style={{ color: '#464646' }} ellipsis>
{ `${element.name||''}: ${element.value||''}` }
</Typography.Paragraph>
</Col>
);
})
}
</Row>
<div style={{ width: '100%', height: 2, backgroundColor: '#ededed' }} />
</div>
)
})
......
src/view/Manage/AssetManage/Component/AssetItem.less
.asset-item {
margin: 10px 0px 10px 30px;
margin: 0px 0px 0px 30px;
.yy-divider-horizontal {
margin: 0 !important;
......
src/view/Manage/AssetManage/Component/AssetTable.jsx
import React,{ useState, useEffect, useRef } from "react";
import { Card, Checkbox, Button, List, Pagination, Space, Modal, Switch, Divider, Tooltip, Popover, Input, Spin } from "antd";
import { Card, Checkbox, Button, List, Pagination, Space, Modal, Switch, Tooltip, Popover, Input, Spin } from "antd";
import { EditOutlined, ReconciliationOutlined, DeleteOutlined } from '@ant-design/icons';
import classNames from 'classnames';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
......@@ -444,7 +444,7 @@ const AssetTable = (props) => {
<div className='d-flex mt-3 mb-1' style={{ alignItems: 'center' }}>
<div className='textOverflow' style={{ flex: 1 }}>
<Checkbox value={item.id}></Checkbox>
<span title={assetNames[index]||''} style={{ marginLeft:8 }}>{assetNames[index]||''}</span>
<span title={assetNames[index]||''} style={{ marginLeft:8, fontSize: 18, fontWeight: 'bold' }}>{assetNames[index]||''}</span>
</div>
<Space className='m-3' style={{ marginLeft: 'auto' }} size='small'>
{
......@@ -462,7 +462,7 @@ const AssetTable = (props) => {
}
</Space>
</div>
<Divider />
<div style={{ width: '100%', height: 2, backgroundColor: '#ededed' }} />
</>
}
description={ <AssetItem data={item} /> }
......
src/view/Manage/AssetManage/Component/FilterElement.jsx
import React, { useEffect, useState } from 'react';
import { Avatar, Row, Col, Divider, Checkbox, Typography, Space, Button, Switch } from 'antd';
import { Row, Col, Checkbox, Typography, Space, Button, Switch } from 'antd';
import { dispatch } from '../../../../model';
import './FilterElement.less';
const colors = [
'#BDD2FD',
'#C2C8D5',
'#FBE5A2',
'#F6C3B7',
'#B6E3F5',
'#D3C6EA',
'#FFD8B8',
'#AAD8D8',
'#FFD6E7',
];
const FilterElement = (props) => {
const { onCancel } = props;
......@@ -120,36 +108,28 @@ const FilterElement = (props) => {
const _type = typeOfElements.type||'';
return (
<div key={index} className='d-flex' style={{ alignItems: 'center' }}>
<Avatar
className='mr-3'
title={_type}
style={{
backgroundColor: colors[index%colors.length]
}}
>
{ _type==='' ? '无' : _type.slice(0, 2) }
</Avatar>
<div className='textOverflow' style={{ flex: 1 }}>
<Row className='mb-3'>
{
typeOfElements && typeOfElements.elements && typeOfElements.elements.map((element, _index) => {
return (
<Col className='mt-3' key={_index} md={6}>
<div className='d-flex'>
<Checkbox checked={ selectedKeys.indexOf(element.id||'')!==-1 } value={element.id||''} onChange={onCheckChange} >
</Checkbox>
<Typography.Paragraph className='ml-1' title={element.name||''} ellipsis>
{element.name||''}
</Typography.Paragraph>
</div>
</Col>
);
})
}
</Row>
{ index !== ((typesOfElements||[]).length-1) && <Divider /> }
<div>
<div className='flex' style={{ alignItems: 'center', padding: '15px 0' }}>
<div style={{ width: 3, height: 14, backgroundColor: '#2593fc', marginRight: 5 }} />
<span style={{ fontWeight: 'bold', color: '#464646' }}>{_type||''}</span>
</div>
<Row>
{
typeOfElements && typeOfElements.elements && typeOfElements.elements.map((element, _index) => {
return (
<Col className='mb-3' key={_index} md={6}>
<div className='d-flex'>
<Checkbox checked={ selectedKeys.indexOf(element.id||'')!==-1 } value={element.id||''} onChange={onCheckChange} >
</Checkbox>
<Typography.Paragraph className='ml-1' title={element.name||''} ellipsis>
{element.name||''}
</Typography.Paragraph>
</div>
</Col>
);
})
}
</Row>
</div>
)
})
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment