Skip to content

S
szse
Commit 5736f07a by zhaochengxiang
Options

要素过滤

parent 3ea3e720
Showing with 186 additions and 270 deletions
src/App.js
......@@ -10,7 +10,6 @@ import Home from './view/Home';
import Manage from './view/Manage';
import Map from './view/Manage/Map';
import Model from './view/Manage/Model';
import Element from './view/Manage/Element';
import DataAssetManage from './view/Manage/AssetManage';
export default class App extends React.Component {
......@@ -25,7 +24,6 @@ export default class App extends React.Component {
<Route path={`${ContextPath}/manage`} component={Manage} />
<Route path={`/center-home/view/modelmap`} component={Map} exact />
<Route path={`/center-home/view/datamodel`} component={Model} exact />
<Route path={`/center-home/view/data-asset-element`} component={Element} exact />
<Route path={`/center-home/view/data-asset-manage`} component={DataAssetManage} exact />
</Switch>
</Router>
......
src/routes.js
......@@ -22,10 +22,7 @@ export const routes = [
{
name: 'assetmanage',
text: '资产管理',
},{
name: 'element',
text: '资产要素',
}
},
]
}
];
......
src/view/Manage/AssetManage/components/AssetItem.jsx
......@@ -55,9 +55,17 @@ const AssetItem = (props) => {
return (
<div key={index} className='d-flex' style={{ alignItems: 'center' }}>
<Avatar className='mr-3' style={{ backgroundColor: colors[index%colors.length] }}>{ _type==='' ? '无' : _type.slice(0, 1) }</Avatar>
<Avatar
className='mr-3'
title={_type}
style={{
backgroundColor: colors[index%colors.length]
}}
>
{ _type==='' ? '无' : _type.slice(0, 1) }
</Avatar>
<div className='textOverflow' style={{ flex: 1 }}>
<Row className='mb-3' style={{ width: '100%' }}>
<Row className='mb-3'>
{
typeOfElements && typeOfElements.elements && typeOfElements.elements.map((element, _index) => {
return (
......
src/view/Manage/AssetManage/components/AssetTable.jsx
......@@ -2,12 +2,13 @@ import React,{ useState, useEffect } from "react";
import { Card, Checkbox, Button, List, Skeleton, Pagination, Space, Modal, Switch, Divider, Tooltip, Popover } from "antd";
import { EditOutlined, ReconciliationOutlined, DeleteOutlined } from '@ant-design/icons';
import { dispatch } from '../../../../model';
import ImportElement from './ImportElement';
import FilterElement from './FilterElement';
import ImportAsset from './ImportAsset';
import AssetModal from "./AssetModal"
import AssetDetail from "./AssetDetail"
import ImportAsset from './ImportAsset';
import AssetItem from './AssetItem';
import ImportElement from './ImportElement';
import { dispatch } from '../../../../model';
import { showMessage } from '../../../../util';
import "./AssetTable.less";
......@@ -30,6 +31,7 @@ const AssetTable = (props) =>{
const [ assetNames, setAssetNames ] = useState([]);
const [ importAssetVisible, setImportAssetVisible ] = useState(false);
const [ importElementVisible, setImportElementVisible ] = useState(false);
const [ filterElementVisible, setFilterElementVisible ] = useState(false);
useEffect(()=>{
getListBasicAttrs();
......@@ -198,7 +200,7 @@ const AssetTable = (props) =>{
}
}
const onImportAssetVisibleChange = (visible = false, refresh = false ) => {
const onImportAssetVisibleChange = (visible = false, refresh = false) => {
setImportAssetVisible(visible);
refresh && getTable();
}
......@@ -207,6 +209,11 @@ const AssetTable = (props) =>{
setImportElementVisible(visible);
}
const onFilterElementVisibleChange = (visible = false, refresh = false) => {
setFilterElementVisible(visible);
refresh && getTable();
}
const onExportElementBtnClick = () => {
window.open('/api/dataassetmanager/elementApi/export');
}
......@@ -218,12 +225,8 @@ const AssetTable = (props) =>{
bodyStyle={{padding:'0 10px'}}
headStyle={{padding:10}}
title={
<div style={{display:'flex',justifyContent:'space-between',height:32}}>
<div style={{fontSize:18,fontWeight:800,color:'#767676',lineHeight:'32px'}}>资产管理</div>
<Space>
{/* <Button type="primary" >回收站</Button> */}
</Space>
<div className='d-flex'>
<Button style={{ marginLeft: 'auto' }} type="primary" >资产回收站</Button>
</div>
}
>
......@@ -236,7 +239,7 @@ const AssetTable = (props) =>{
padding: '10px 0',
borderBottom:'1px solid #f0f0f0'
}} >
<Switch checkedChildren="全选" unCheckedChildren="全选" checked={checkValue} onChange={onCheck} defaultChecked={false} style={{marginTop:4}}/>
<Switch checkedChildren="全不选" unCheckedChildren="全选" checked={checkValue} onChange={onCheck} defaultChecked={false} style={{marginTop:4}}/>
<div>
<Space>
<span>资产要素:</span>
......@@ -250,6 +253,15 @@ const AssetTable = (props) =>{
<Button type="primary">导入</Button>
</Popover>
<Button type="primary" onClick={onExportElementBtnClick}>导出</Button>
<Popover
placement="bottom"
content={<FilterElement elements={attrBox} onCancel={onFilterElementVisibleChange} />}
title='资产要素过滤'
visible={filterElementVisible}
onVisibleChange={onFilterElementVisibleChange}
trigger="click">
<Button type="primary">过滤</Button>
</Popover>
</Space>
<Space className='ml-5'>
<span>资产:</span>
......@@ -310,7 +322,7 @@ const AssetTable = (props) =>{
/>
<Pagination
size="small"
className="text-center mt-3"
className="text-center m-3"
showSizeChanger
showQuickJumper
onChange={changeCurrent}
......
src/view/Manage/AssetManage/components/FilterElement.jsx 0 → 100644
import React, { useEffect, useState } from 'react';
import { Avatar, Row, Col, Divider, Checkbox, Typography, Space, Button, Switch } from 'antd';
import './FilterElement.less';
const colors = [
'#BDD2FD',
'#C2C8D5',
'#FBE5A2',
'#F6C3B7',
'#B6E3F5',
'#D3C6EA',
'#FFD8B8',
'#AAD8D8',
'#FFD6E7',
];
const FilterElement = (props) => {
const { elements, onCancel } = props;
const [ typesOfElements, setTypesOfElements ] = useState([]);
const [ selectedKeys, setSelectedKeys ] = useState([]);
useEffect(() => {
if (elements) {
convertData();
}
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [ elements ]);
const convertData = () => {
const _typesOfElements = [];
const _types = [];
(elements||[]).forEach(element => {
if (_types.indexOf(element.type||'') === -1) {
_types.push(element.type||'');
}
})
_types.forEach(type => {
const _elements = (elements||[]).filter(element => (element.type||'') === type);
_typesOfElements.push({ type, elements: _elements||[] });
})
setTypesOfElements(_typesOfElements);
}
const onCheckChange = (e) => {
if (e.target.checked) {
setSelectedKeys([...selectedKeys, e.target.value]);
} else {
const index = selectedKeys.findIndex(key => key === e.target.value);
selectedKeys.splice(index, 1)
setSelectedKeys([...selectedKeys]);
}
}
const onCheckAllChange = (checked) => {
const _selectedKeys = [];
if (checked) {
(elements||[]).forEach(element => {
_selectedKeys.push(element.id||'');
});
}
setSelectedKeys(_selectedKeys);
}
const onOk = () => {
onCancel && onCancel();
}
return (
<div className='filter-element' style={{ width: 500 }}>
<div className='d-flex'>
<Switch
checkedChildren="全不选"
unCheckedChildren="全选"
onChange={onCheckAllChange}
style={{ marginLeft: 'auto' }}
/>
</div>
<div style={{ maxHeight: 450, overflow: 'auto' }}>
{
(typesOfElements||[]).map((typeOfElements, index) => {
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, 1) }
</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>
)
})
}
</div>
<div className='mt-3 d-flex pt-3' style={{ borderTop: '1px solid rgba(0, 0, 0, 0.06)' }} >
<Space style={{ marginLeft: 'auto' }}>
<Button onClick={() => {
onCancel && onCancel();
}}>取消</Button>
<Button type='primary' onClick={onOk} >确定</Button>
</Space>
</div>
</div>
);
}
export default FilterElement;
\ No newline at end of file
src/view/Manage/AssetManage/components/FilterElement.less 0 → 100644
.filter-element {
.yy-divider-horizontal {
margin: 0 !important;
}
.yy-typography, .yy-typography p {
margin-bottom: 0 !important;
}
}
\ No newline at end of file
src/view/Manage/Element/Component/ImportModal.jsx deleted 100644 → 0
import React, { useState } from 'react';
import { Modal, Button, Upload } from 'antd';
import { DownloadOutlined, UploadOutlined } from '@ant-design/icons';
import { dispatchLatest } from '../../../../model';
import { showMessage } from '../../../../util';
const ImportModal = (props) => {
const { onCancel, visible } = props;
const [ fileList, setFileList ] = useState([]);
const [ confirmLoading, setConfirmLoading ] = useState(false);
const downloadTemplate = () => {
window.open("/data-govern/docs/ElementModel.xlsx");
}
const uploadProps = {
onRemove: file => {
const index = fileList.indexOf(file);
const newFileList = fileList.slice();
newFileList.splice(index, 1);
setFileList(newFileList);
},
beforeUpload: file => {
setFileList([file]);
return false;
},
fileList: fileList||[],
accept:".xlsx",
};
const handleOk = () => {
if ((fileList||[]).length === 0) {
showMessage('info', '请先选择模版上传');
return;
}
setConfirmLoading(true);
dispatchLatest({
type: 'dataassetelement.importElement',
payload: { fileList },
callback: data => {
setConfirmLoading(false);
reset();
onCancel && onCancel(true, data);
},
error: () => {
setConfirmLoading(false);
}
})
}
const reset = () => {
setFileList([]);
}
return (
<Modal
forceRender
confirmLoading={confirmLoading}
visible={visible}
title={"导入资产要素"}
onOk={handleOk}
onCancel={() => {
setConfirmLoading(false);
reset();
onCancel && onCancel();
}}
>
{
<>
<div>
<Button icon={<DownloadOutlined />} onClick={ downloadTemplate }>
模版下载
</Button>
</div>
<div className='mt-3'>
<Upload {...uploadProps}>
<Button icon={<UploadOutlined />}>
选择文件上传
</Button>
</Upload>
</div>
</>
}
</Modal>
)
}
export default ImportModal;
\ No newline at end of file
src/view/Manage/Element/index.jsx deleted 100644 → 0
import React, { useState, useEffect } from 'react';
import { Button, Table, Pagination } from 'antd';
import { dispatchLatest } from '../../../model';
import ImportModal from './Component/ImportModal';
import { showNotifaction } from '../../../util';
import './index.less';
const Element = (props) => {
const [ loading, setLoading ] = useState(false);
const [ tableData, setTableData ] = useState([]);
const [ total, setTotal ] = useState(0);
const [ pagination, setPagination ] = useState( { pageNum: 1, pageSize: 20 } );
const [ importModalVisible, setImportModalVisible ] = useState(false);
const { pageNum, pageSize } = pagination;
useEffect(() => {
getTableData();
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [pagination])
const columns = [
{
title: '序号',
dataIndex: 'key',
render: (text, record, index) => {
return (index+1).toString();
},
width:80
},
{
title: '操作时间',
dataIndex: 'createTimeDesc',
width:180
},
{
title: '操作人',
dataIndex: 'creator',
width:100
},
{
title: '操作类型',
dataIndex: 'operateType',
width:100
},
{
title: '状态',
dataIndex: 'status',
width:80
},
{
title: '变更内容',
dataIndex: 'content'
},
];
const onImportBtnClick = () => {
setImportModalVisible(true);
}
const onExportBtnClick = () => {
window.open('/api/dataassetmanager/elementApi/export');
}
const getTableData = () => {
setLoading(true);
dispatchLatest({
type: 'dataassetelement.getLogs',
payload: {
pageNum,
pageSize
},
callback: data => {
setTableData(data.data||[]);
setTotal(data.total);
setLoading(false);
},
error: () => {
setLoading(false);
}
})
}
const onImportModalCancel = (refresh = false, tip = '') => {
setImportModalVisible(false);
if (refresh) {
setPagination({ pageNum: 1, pageSize: 20 });
}
if (tip && tip!== '') {
showNotifaction('导入提示', tip);
}
}
return (
<div className='element' style={{ backgroundColor: '#fff' }}>
<div
className='p-3'
style={{
display: 'flex',
borderBottom: "1px solid #EFEFEF",
}}
>
<Button type="primary" className='ml-3' style={{ marginLeft: 'auto' }} onClick={onImportBtnClick}>导入</Button>
<Button type="primary" className='ml-3' onClick={onExportBtnClick}>导出</Button>
</div>
<div className='p-3'>
<Table
loading={loading}
columns={columns}
rowKey={'id'}
dataSource={tableData||[]}
pagination={false}
/>
<Pagination
size="small"
className="text-center mt-3"
showSizeChanger
showQuickJumper
onChange={(_pageNum, _pageSize) => {
setPagination({ pageNum: _pageNum, pageSize: _pageSize || 10 });
}}
onShowSizeChange={(_pageNum, _pageSize) => {
setPagination({ pageNum: _pageNum || 1, pageSize: _pageSize });
}}
current={pageNum}
pageSize={pageSize}
defaultCurrent={1}
total={total}
showTotal={total => `共 ${total} 条`}
/>
</div>
<ImportModal
visible={importModalVisible}
onCancel={onImportModalCancel}
/>
</div>
);
}
export default Element;
src/view/Manage/Element/index.less deleted 100644 → 0
.element {
.yy-table {
height: calc(100vh - 64px - 30px - 53px - 20px - 34px) !important;
overflow: auto !important;
}
}
\ No newline at end of file
src/view/Manage/index.jsx
......@@ -8,7 +8,6 @@ import { ManageLayout } from "../../layout";
import Map from './Map';
import Model from './Model';
import AssetManage from './AssetManage';
import Element from './Element';
class Manage extends Component {
constructor(props) {
......@@ -32,7 +31,6 @@ class Manage extends Component {
<Route path={`${match.path}/map`} component={Map} />
<Route path={`${match.path}/model`} component={Model} />
<Route path={`${match.path}/assetmanage`} component={AssetManage} />
<Route path={`${match.path}/element`} component={Element} />
</Switch>
) : (
<GetSession {...this.props} />
......
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