Skip to content

S
szse
Commit cac90179 by zhaochengxiang
Options

资产管理样式调整

parent 532f07d4
Showing with 180 additions and 52 deletions
src/index.less
......@@ -15,7 +15,7 @@ body {
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
font-variant: tabular-nums;
line-height: 1.5;
line-height: 1.0;
background-color: #fff;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
......@@ -118,7 +118,7 @@ div[id^='__qiankun_microapp_wrapper_'] {
}
.yy-table-tbody > tr > td {
padding: 8px 8px !important;
padding: 19px 8px !important;
}
.yy-table-tbody > .yy-table-measure-row > td {
......@@ -193,5 +193,89 @@ tr.drop-over-upward td {
font-size: 13px !important;
padding: 4px 8px !important;
}
}
.primary-color {
color: #196AD2;
}
.title-color {
color: #020202;
}
.text-color {
color: #5B5B5B;
}
.m-common {
margin: 24px 15px;
}
.mx-common {
margin-left: 15px;
margin-right: 15px;
}
.ml-common {
margin-left: 15px;
}
.mr-common {
margin-right: 15px;
}
.my-common {
margin-top: 24px;
margin-bottom: 24px;
}
.mt-common {
margin-top: 24px;
}
.mb-common {
margin-bottom: 24px;
}
.p-common {
padding: 24px 15px;
}
.px-common {
padding-left: 15px;
padding-right: 15px;
}
.pl-common {
padding-left: 15px;
}
.pr-common {
padding-right: 15px;
}
.py-common {
padding-top: 24px;
padding-bottom: 24px;
}
.pt-common {
padding-top: 24px;
}
.pb-common {
padding-bottom: 24px;
}
.yy-table-row {
color: #363636 !important;
.yy-typography {
color: #363636 !important;
}
}
.yy-table-select-row {
.yy-table-cell {
background-color: #F6F6F6 !important;
}
}
\ No newline at end of file
src/view/Manage/AssetManage/Component/AssetDirectory.jsx
......@@ -9,7 +9,8 @@ import AttributeRelationModal from "./AttributeRelationModal";
import FilterElementModal from './FilterElementModal';
import { showNotifaction } from '../../../../util';
import record from '../../../../assets/record.png';
import more from '../Assets/more_h.png';
import record from '../Assets/record.png';
const { Paragraph, Text } = Typography;
......@@ -84,22 +85,22 @@ const AssetDirectory = (props) => {
const elementManageMenu = (
<Menu>
<Menu.Item>
<div onClick={onImportElementBtnClick}>
<div className='text-center' onClick={onImportElementBtnClick}>
导入要素
</div>
</Menu.Item>
<Menu.Item>
<div onClick={onExportElementBtnClick}>
<div className='text-center' onClick={onExportElementBtnClick}>
导出要素
</div>
</Menu.Item>
<Menu.Item>
<div onClick={onFilterElementClick}>
<div className='text-center' onClick={onFilterElementClick}>
要素管理
</div>
</Menu.Item>
<Menu.Item>
<div onClick={onAttributeRelationBtnClick}>
<div className='text-center' onClick={onAttributeRelationBtnClick}>
元数据属性关联
</div>
</Menu.Item>
......@@ -109,63 +110,92 @@ const AssetDirectory = (props) => {
return (
<Spin spinning={loading}>
<div
className='flex'
className='flex p-common'
style={{
alignItems: 'center',
justifyContent: 'space-between',
color: 'rgba(0, 0, 0, 0.85)',
padding: '10px 12px',
borderBottom: '1px solid #f0f0f0',
}}
>
<div style={{ flex: 1, overflow: 'hidden'}}>
<Typography>
<div>
<div className='mb-common'>
<Paragraph>
<Tooltip title={dir?.name||''}>
<Text>名称:&nbsp;{dir?.name||''}</Text>
<Text className='title-color'>
名称:&nbsp;
<Text className='text-color'>{dir?.name||''}</Text>
</Text>
</Tooltip>
&nbsp;&nbsp;
<Tooltip title={dir?.code||''}>
<Text>编号:&nbsp;{dir?.code||''}</Text>
<Text className='title-color'>
编号:&nbsp;
<Text className='text-color'>{dir?.code||''}</Text>
</Text>
</Tooltip>
</Paragraph>
<Paragraph >
</div>
<div className='mb-common'>
<Paragraph>
<Tooltip title={dir?.desc||''}>
<Text ellipsis={true}>
描述:&nbsp;{dir?.desc||''}
<Text className='title-color' ellipsis={true}>
描述:&nbsp;
<Text className='text-color'>{dir?.desc||''}</Text>
</Text>
</Tooltip>
</Paragraph>
</div>
{
(reference === AssetManageReference) &&
<Paragraph >
<Paragraph>
<Tooltip title={dir?.remarks||''}>
<Text ellipsis={true}>
备注:&nbsp;{dir?.remarks||''}
<Text className='title-color' ellipsis={true}>
备注:&nbsp;
<Text className='text-color'>{dir?.remarks||''}</Text>
</Text>
</Tooltip>
</Paragraph>
}
</Typography>
</div>
</div>
<div
className='flex'
style={{
width: 100,
width: 150,
alignItems: 'center',
justifyContent: 'center'
}}
>
<img src={record} style={{ width: 30, height: 30 }} alt="" />
<div>
<div>记录数</div>
<div>{assetCount}</div>
<img src={record} style={{ width: 53, height: 53 }} alt="" />
<div
className='flex ml-2'
style={{
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
}}
>
<div className='text-color'>记录数</div>
<div className='title-color' style={{ fontSize: 25, fontWeight: 'bold' }}>{assetCount}</div>
</div>
</div>
{
(reference===AssetManageReference) && <Dropdown overlay={elementManageMenu} placement="bottomCenter">
<SettingOutlined style={{ fontSize:16,cursor:'pointer', marginBottom: 50 }} />
<div
className='flex primary-color'
style={{
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
marginBottom: 58,
}}
>
<img src={more} style={{ width: 20, height: 20 }} alt="" />
<span style={{ fontSize: 10 }}>更多</span>
</div>
</Dropdown>
}
......
src/view/Manage/AssetManage/Component/AssetTable.jsx
......@@ -13,6 +13,9 @@ 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 "./AssetTable.less";
const { Text } = Typography;
......@@ -468,9 +471,9 @@ const AssetTable = (props) => {
let scrollY = null;
if ((assets||[]).length>0) {
if (fullScreen) {
scrollY = 'calc(100vh - 182px - 52px - 12px)';
scrollY = 'calc(100vh - 182px - 80px)';
} else if (reference===AssetManageReference) {
scrollY = 'calc(100vh - 182px - 84px - 52px - 12px)';
scrollY = 'calc(100vh - 182px - 139px - 15px - 80px)';
} else if (reference===AssetBrowseReference||reference===ResourceBrowseReference) {
scrollY = 'calc(100vh - 182px - 84px - 52px - 12px)';
} else if (reference===AssetRecycleReference) {
......@@ -481,16 +484,13 @@ const AssetTable = (props) => {
return(
<div className={classes}>
<div
className='flex'
className='flex p-common'
style={{
alignItems: 'center',
justifyContent: 'space-between',
borderBottom: '1px solid #EFEFEF',
height: 52,
padding: '0 12px'
}}
>
<Space>
<Space size={15}>
{
(reference===AssetManageReference) && <Button onClick={addAsset}>新增</Button>
}
......@@ -521,13 +521,13 @@ const AssetTable = (props) => {
onChange={onSearchInputChange}
style={{ width: inputWidth }}
/>
<Button onClick={onFullScreenClick}>全屏</Button>
<Tooltip title={fullScreen?'取消全屏':'全屏'}>
<Button onClick={onFullScreenClick} icon={<img src={fullScreen?CancelFullScreenImg:FullScreenImg} width={20} height={20} />} type='text'></Button>
</Tooltip>
</Space>
</div>
<div
style={{
padding: '12px 12px 0',
}}
className='px-common'
>
<Table
rowSelection={rowSelection}
......@@ -551,7 +551,7 @@ const AssetTable = (props) => {
}}
rowClassName={(record, index) => {
if (record?.id===anchorId || record?.id===selectItem?.id) {
return 'highlight-row';
return 'yy-table-select-row';
}
return '';
......
src/view/Manage/AssetManage/Component/Space.jsx 0 → 100644
const Space = (props) => {
const { width = '100%', height = '100%' } = props;
return (
<div style={{ width, height, background: '#f0f2f5' }} />
)
}
export default Space;
\ No newline at end of file
src/view/Manage/AssetManage/index.jsx
......@@ -7,6 +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 { AssetManageReference } from '../../../util/constant';
......@@ -64,17 +65,18 @@ const AssetManage = (props) => {
<div className='left'>
<AssetTree onSelect={onTreeSelect} onDirectoryChange={onDirectoryChange} {...props} />
</div>
<div className='tree-toggle-wrap'>
<div className='tree-toggle' onClick={treeToggleClick}>
{ expandTree ? <CaretLeftOutlined /> : <CaretRightOutlined /> }
</div>
</div>
<Space width={15} />
<div className='middle'>
<AssetDirectory id={nodeId} assetCount={assetCount} directoryChanged={directoryChanged} onElementsChange={onElementsChange} />
<Space height={15} />
<AssetTable nodeId={nodeId} reference={AssetManageReference} elementsChanged={elementsChanged} assetActionChanged={assetActionChanged} onSelect={onTableSelect} onCountChange={onAssetCountChange} {...props} />
</div>
<div className='right'>
<Space width='15px' />
{/* <div className='right'>
<AssetAction form={form} id={assetId} dirId={assetDirId} action='detail' onChange={onAssetActionChange} />
</div> */}
<div className='tree-toggle' onClick={treeToggleClick}>
{ expandTree ? <CaretLeftOutlined /> : <CaretRightOutlined /> }
</div>
</div>
)
......
src/view/Manage/AssetManage/index.less
......@@ -10,16 +10,11 @@
overflow: hidden;
}
.tree-toggle-wrap {
position: relative;
width: 20px;
height: calc(100vh - 94px);
.tree-toggle {
display: flex;
justify-content: center;
align-items: center;
left: 0;
left: 245px;
right: 0;
background: #f2f5fc;
position: absolute;
......@@ -31,10 +26,10 @@
transform: translateY(-50%);
cursor: pointer;
}
}
.middle {
width: calc(100% - 250px - 400px);
// width: calc(100% - 230px - 400px - 30px);
width: calc(100% - 230px - 30px);
}
.right {
......@@ -48,7 +43,12 @@
width: 0;
}
.tree-toggle {
left: 15px;
}
.middle {
width: calc(100% - 20px - 400px);
// 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