Skip to content

S
szse
Commit e902212a by zhaochengxiang
Options

资产详情调整

parent cac90179
Showing with 106 additions and 41 deletions
src/index.less
...@@ -199,6 +199,10 @@ tr.drop-over-upward td { ...@@ -199,6 +199,10 @@ tr.drop-over-upward td {
color: #196AD2; color: #196AD2;
} }
.primary-bg-color {
background-color: #196AD2;
}
.title-color { .title-color {
color: #020202; color: #020202;
} }
...@@ -267,6 +271,15 @@ tr.drop-over-upward td { ...@@ -267,6 +271,15 @@ tr.drop-over-upward td {
padding-bottom: 24px; padding-bottom: 24px;
} }
.py-compact-common {
padding-top: 15px;
padding-bottom: 15px;
}
.pb-compact-common {
padding-bottom: 15px;
}
.yy-table-row { .yy-table-row {
color: #363636 !important; color: #363636 !important;
.yy-typography { .yy-typography {
......
src/view/Manage/AssetManage/Component/AssetAction.jsx
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Form, Spin, Input, Descriptions, Space, Button } from 'antd'; import { Form, Spin, Input, Descriptions, Space, Button, Tooltip } from 'antd';
import { DownOutlined, UpOutlined } from '@ant-design/icons'; import { DownOutlined, UpOutlined } from '@ant-design/icons';
import LocalStorage from 'local-storage'; import LocalStorage from 'local-storage';
...@@ -9,6 +9,13 @@ import { highlightSearchContentByTerms, showMessage } from '../../../../util'; ...@@ -9,6 +9,13 @@ import { highlightSearchContentByTerms, showMessage } from '../../../../util';
import { unfoldedElements } from '../util'; import { unfoldedElements } from '../util';
import { AppContext } from '../../../../App'; import { AppContext } from '../../../../App';
import Tag from '../../Tag'; import Tag from '../../Tag';
import Separate from './Separate';
import cancelImg from '../Assets/cancel.png';
import editImg from '../Assets/edit.png';
import saveImg from '../Assets/save.png';
import fullImg from '../Assets/full.png';
import cancelFullImg from '../Assets/cancel_full.png';
const AssetAction = (props) => { const AssetAction = (props) => {
const { id, dirId, action, terms, onChange, readOnly = false, form, onMetadataChange, onElementsChange } = props; const { id, dirId, action, terms, onChange, readOnly = false, form, onMetadataChange, onElementsChange } = props;
...@@ -240,41 +247,66 @@ const AssetAction = (props) => { ...@@ -240,41 +247,66 @@ const AssetAction = (props) => {
> >
{ {
(!readOnly&&action!=='add') && <div (!readOnly&&action!=='add') && <div
className='flex px-3' className='flex px-common primary-bg-color'
style={{ style={{
height: 52, height: 46,
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
borderBottom: '1px solid #f0f0f0', color: '#fff',
}} }}
> >
<div style={{ color: 'rgba(0,0,0,0.75)' }}>资产详情</div> <div>资产详情</div>
<Space> <Space>
{ {
(currentAction!=='detail') && <Button onClick={onCancelButtonClick} >取消</Button> (currentAction!=='detail') && <Tooltip title='取消编辑'>
} <Button
<Button loading={confirmLoading} onClick={onActionButtonClick}>{ currentAction==='detail'?'编辑':'保存'}</Button> onClick={onCancelButtonClick}
<Button onClick={onFullScreenClick}>全屏</Button> icon={<img src={cancelImg} width={20} alt='' />}
type='text'
/>
</Tooltip>
}
<Tooltip title={(currentAction==='detail')?'编辑':'保存'}>
<Button
loading={confirmLoading}
onClick={onActionButtonClick}
icon={<img src={(currentAction==='detail')?editImg:saveImg} width={20} alt='' />}
type='text'
/>
</Tooltip>
<Tooltip title={fullScreen?'取消全屏':'全屏'}>
<Button
onClick={onFullScreenClick}
icon={<img src={fullScreen?cancelFullImg:fullImg} width={20} alt='' />}
type='text'
/>
</Tooltip>
</Space> </Space>
</div> </div>
} }
{ {
(action!=='add') && <div style={{ padding: 10 }}> (action!=='add') && <div>
<div className='pl-common py-compact-common'>
<Descriptions column={1}> <Descriptions column={1}>
{ {
(assets.currentPath||'')!=='' && <Descriptions.Item label='路径' style={{ paddingBottom: 10 }}> (assets.currentPath||'')!=='' && <Descriptions.Item
label={<div className='title-text' style={{ textAlign: 'right', width: 60 }}>路径</div>}
style={{ paddingBottom: 15 }}
>
<a onClick={()=>{jumpToPath();}}> <a onClick={()=>{jumpToPath();}}>
{assets.currentPath||''} {assets.currentPath||''}
</a> </a>
</Descriptions.Item> </Descriptions.Item>
} }
<Descriptions.Item label='标签' style={{ paddingBottom: 0 }}> <Descriptions.Item label={<div className='title-text' style={{ textAlign: 'right', width: 60 }}>标签</div>} style={{ paddingBottom: 0 }}>
{ {
(currentAction==='add'||currentAction==='edit')?<Tag styleType='complex' id={id} />:<Tag id={id} /> (currentAction==='add'||currentAction==='edit')?<Tag styleType='complex' id={id} />:<Tag id={id} />
} }
</Descriptions.Item> </Descriptions.Item>
</Descriptions> </Descriptions>
</div> </div>
<Separate height={8} />
</div>
} }
<div <div
...@@ -304,24 +336,41 @@ const AssetAction = (props) => { ...@@ -304,24 +336,41 @@ const AssetAction = (props) => {
return ( return (
<div key={index}> <div key={index}>
<div <div
className='flex' className='flex pl-common'
style={{ style={{
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
padding: '0 15px', backgroundColor: '#fff',
backgroundColor: '#106baa', height: 46,
color: '#fff', borderBottom: '1px solid #f0f0f0',
height: 32
}} }}
> >
<div>{attribute||''}</div> <div
className='flex'
style={{
alignItems: 'center'
}}
>
<div className='primary-bg-color' style={{ width: 3, height: 14, marginRight: 5 }} />
<div className='title-text' style={{ fontWeight: 'bold' }}>{attribute||''}</div>
</div>
{ {
currentAction!=='add'&&!fullScreen && ( currentAction!=='add'&&!fullScreen && (
attributesFoldMap[attribute] ? <Button type='text' style={{ padding: 0, color: '#fff' }} onClick={() => { onFoldButtonClick(attribute, false) }}>展开<DownOutlined /></Button> : <Button type='text' style={{ padding: 0, color: '#fff' }} onClick={() => { onFoldButtonClick(attribute, true) }}>收起<UpOutlined /></Button> attributesFoldMap[attribute] ? <Button
type='text'
style={{ padding: 0 }}
onClick={() => { onFoldButtonClick(attribute, false) }}
icon={<DownOutlined />}
/> : <Button
type='text'
style={{ padding: 0 }}
onClick={() => { onFoldButtonClick(attribute, true) }}
icon={<UpOutlined />}
/>
) )
} }
</div> </div>
<div style={{ padding: 10 }}> <div className='px-common py-compact-common'>
{ {
(currentAction==='add'||currentAction==='edit') ? <Form {...formItemLayout} form={form}> (currentAction==='add'||currentAction==='edit') ? <Form {...formItemLayout} form={form}>
<AppContext.Consumer> <AppContext.Consumer>
...@@ -344,10 +393,10 @@ const AssetAction = (props) => { ...@@ -344,10 +393,10 @@ const AssetAction = (props) => {
(sameAttributeElements||[]).map((element, _index) => { (sameAttributeElements||[]).map((element, _index) => {
return ( return (
<Form.Item <Form.Item
label={element.name} label={<div className='title-color'>{element.name||''}</div>}
name={element.name} name={element.name}
key={_index} key={_index}
style={{ marginBottom: (_index===sameAttributeElements.length-1)? 0 : 10 }} style={{ marginBottom: (_index===sameAttributeElements.length-1)? 0 : 15 }}
> >
{ (element.name==='资产项') ? <MetadataInfo /> : <Input disabled={element.manualMaintain==='否'} /> } { (element.name==='资产项') ? <MetadataInfo /> : <Input disabled={element.manualMaintain==='否'} /> }
</Form.Item> </Form.Item>
...@@ -360,9 +409,9 @@ const AssetAction = (props) => { ...@@ -360,9 +409,9 @@ const AssetAction = (props) => {
{ {
(sameAttributeElements||[]).map((item, index) => { (sameAttributeElements||[]).map((item, index) => {
return ( return (
<Descriptions.Item label={item.name||''} key={index} style={{ paddingBottom: (index===sameAttributeElements.length-1)? 0 : 10 }}> <Descriptions.Item label={<div className='title-common' style={{ textAlign: 'right', width: 60 }}>{item.name||''}</div>} key={index} style={{ paddingBottom: (index===sameAttributeElements.length-1)? 0 : 10 }}>
{ {
item.name==='资产项' ? <MetadataInfo config={false} value={item.value||''} /> : <span>{highlightSearchContentByTerms(item.value||'', terms)}</span> item.name==='资产项' ? <MetadataInfo config={false} value={item.value||''} /> : <span className='text-color'>{highlightSearchContentByTerms(item.value||'', terms)}</span>
} }
</Descriptions.Item> </Descriptions.Item>
); );
...@@ -371,6 +420,10 @@ const AssetAction = (props) => { ...@@ -371,6 +420,10 @@ const AssetAction = (props) => {
</Descriptions> </Descriptions>
} }
</div> </div>
{
(index < (attributes.length-1)) && <Separate height={8} />
}
</div> </div>
); );
}) })
......
src/view/Manage/AssetManage/Component/AssetTable.jsx
...@@ -13,8 +13,8 @@ import { dispatch, dispatchLatestHomepage } from '../../../../model'; ...@@ -13,8 +13,8 @@ import { dispatch, dispatchLatestHomepage } from '../../../../model';
import { showMessage, showNotifaction, getQueryParam, inputWidth, isSzseEnv } from '../../../../util'; import { showMessage, showNotifaction, getQueryParam, inputWidth, isSzseEnv } from '../../../../util';
import { AnchorId, AnchorTimestamp, AssetBrowseReference, AssetManageReference, AssetRecycleReference, ResourceBrowseReference } from '../../../../util/constant'; import { AnchorId, AnchorTimestamp, AssetBrowseReference, AssetManageReference, AssetRecycleReference, ResourceBrowseReference } from '../../../../util/constant';
import FullScreenImg from '../Assets/fullScreen.png'; import FullScreenImg from '../Assets/full.png';
import CancelFullScreenImg from '../Assets/cancelFullScreen.png'; import CancelFullScreenImg from '../Assets/cancel_full.png';
import "./AssetTable.less"; import "./AssetTable.less";
...@@ -497,7 +497,7 @@ const AssetTable = (props) => { ...@@ -497,7 +497,7 @@ const AssetTable = (props) => {
{ {
(reference===AssetManageReference) && <Button onClick={importAsset}>导入</Button> (reference===AssetManageReference) && <Button onClick={importAsset}>导入</Button>
} }
{ {/* {
(reference===AssetManageReference || reference===AssetRecycleReference) && <React.Fragment> (reference===AssetManageReference || reference===AssetRecycleReference) && <React.Fragment>
<Tooltip title={(checkedKeys||[]).length===0?'请先选择资产':''}> <Tooltip title={(checkedKeys||[]).length===0?'请先选择资产':''}>
<Button onClick={exportAsset} disabled={(checkedKeys||[]).length===0} >导出</Button> <Button onClick={exportAsset} disabled={(checkedKeys||[]).length===0} >导出</Button>
...@@ -511,7 +511,7 @@ const AssetTable = (props) => { ...@@ -511,7 +511,7 @@ const AssetTable = (props) => {
</React.Fragment> </React.Fragment>
} }
<Button onClick={onFilterElementClick}>要素设置</Button> <Button onClick={onFilterElementClick}>要素设置</Button>
<Checkbox onChange={onRecursiveChange} checked={!recursive}>仅显示当前目录</Checkbox> <Checkbox onChange={onRecursiveChange} checked={!recursive}>仅显示当前目录</Checkbox> */}
</Space> </Space>
<Space> <Space>
<Input <Input
......
src/view/Manage/AssetManage/Component/Space.jsx → src/view/Manage/AssetManage/Component/Separate.jsx
const Space = (props) => { const Separate = (props) => {
const { width = '100%', height = '100%' } = props; const { width = '100%', height = '100%' } = props;
return ( return (
...@@ -6,4 +6,4 @@ const Space = (props) => { ...@@ -6,4 +6,4 @@ const Space = (props) => {
) )
} }
export default Space; export default Separate;
\ No newline at end of file \ No newline at end of file
src/view/Manage/AssetManage/index.jsx
...@@ -7,7 +7,7 @@ import AssetTree from './Component/AssetTree'; ...@@ -7,7 +7,7 @@ import AssetTree from './Component/AssetTree';
import AssetDirectory from './Component/AssetDirectory'; import AssetDirectory from './Component/AssetDirectory';
import AssetTable from './Component/AssetTable'; import AssetTable from './Component/AssetTable';
import AssetAction from './Component/AssetAction'; import AssetAction from './Component/AssetAction';
import Space from './Component/Space'; import Separate from './Component/Separate';
import { AssetManageReference } from '../../../util/constant'; import { AssetManageReference } from '../../../util/constant';
...@@ -65,16 +65,16 @@ const AssetManage = (props) => { ...@@ -65,16 +65,16 @@ const AssetManage = (props) => {
<div className='left'> <div className='left'>
<AssetTree onSelect={onTreeSelect} onDirectoryChange={onDirectoryChange} {...props} /> <AssetTree onSelect={onTreeSelect} onDirectoryChange={onDirectoryChange} {...props} />
</div> </div>
<Space width={15} /> <Separate width={15} />
<div className='middle'> <div className='middle'>
<AssetDirectory id={nodeId} assetCount={assetCount} directoryChanged={directoryChanged} onElementsChange={onElementsChange} /> <AssetDirectory id={nodeId} assetCount={assetCount} directoryChanged={directoryChanged} onElementsChange={onElementsChange} />
<Space height={15} /> <Separate height={15} />
<AssetTable nodeId={nodeId} reference={AssetManageReference} elementsChanged={elementsChanged} assetActionChanged={assetActionChanged} onSelect={onTableSelect} onCountChange={onAssetCountChange} {...props} /> <AssetTable nodeId={nodeId} reference={AssetManageReference} elementsChanged={elementsChanged} assetActionChanged={assetActionChanged} onSelect={onTableSelect} onCountChange={onAssetCountChange} {...props} />
</div> </div>
<Space width='15px' /> <Separate width='15px' />
{/* <div className='right'> <div className='right'>
<AssetAction form={form} id={assetId} dirId={assetDirId} action='detail' onChange={onAssetActionChange} /> <AssetAction form={form} id={assetId} dirId={assetDirId} action='detail' onChange={onAssetActionChange} />
</div> */} </div>
<div className='tree-toggle' onClick={treeToggleClick}> <div className='tree-toggle' onClick={treeToggleClick}>
{ expandTree ? <CaretLeftOutlined /> : <CaretRightOutlined /> } { expandTree ? <CaretLeftOutlined /> : <CaretRightOutlined /> }
</div> </div>
......
src/view/Manage/AssetManage/index.less
...@@ -28,8 +28,7 @@ ...@@ -28,8 +28,7 @@
} }
.middle { .middle {
// width: calc(100% - 230px - 400px - 30px); width: calc(100% - 230px - 400px - 30px);
width: calc(100% - 230px - 30px);
} }
.right { .right {
...@@ -48,7 +47,6 @@ ...@@ -48,7 +47,6 @@
} }
.middle { .middle {
// width: calc(100% - 400px - 30px); width: calc(100% - 400px - 30px);
width: calc(100% - 30px);
} }
} }
\ No newline at end of file
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