Skip to content

S
szse
Commit e902212a by zhaochengxiang
Options

资产详情调整

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