Skip to content

H
hnyc-data
Commit 4111be2b by zhaochengxiang
Options

增加数据指标标准

parent 4db77976
Showing with 204 additions and 85 deletions
src/layout/Breadcrumb.js → src/layout/PageHeaderWrapper.js 100755 → 100644
import React from "react";
import { Link } from 'react-router-dom';
import { Breadcrumb } from 'antd';
import { routeMap } from '../routes';
export class _Breadcrumb extends React.Component {
import './PageHeaderWrapper.less';
export default class PageHeaderWrapper extends React.Component {
constructor() {
super();
this.state = { routes: null };
......@@ -39,21 +39,34 @@ export class _Breadcrumb extends React.Component {
}
render() {
const { children, extra } = this.props;
const { routes } = this.state;
return <div className="d-flex my-2">
<div className="">
let curRoute = null;
if (routes && routes.length > 0) {
curRoute = routes[routes.length - 1];
}
return (
<div className="page-container">
<div className="page-container-header">
<div className="pl-4 page-container-header-title">
{
curRoute && <span>{curRoute.text}</span>
}
</div>
<div className="ml-auto pt-2">
<Breadcrumb>
{routes && routes.map((r, i) => {
const active = i < routes.length - 1;
return <Breadcrumb.Item key={i}>{active ? <Link to={r.path} >{r.text}</Link> : r.text}</Breadcrumb.Item>
})}
</Breadcrumb>
{
extra&&(
<div className="ml-auto pr-4">
{ extra }
</div>
)
}
</div>
<div className="m-3 page-container-content">
{ children }
</div>
</div>
);
}
}
export default _Breadcrumb;
\ No newline at end of file
src/layout/PageHeaderWrapper.less 0 → 100644
.page-container {
&-header {
display: flex;
align-items: center;
height: 64px;
background-color: #fff;
&-title {
color: rgba(0,0,0,.85);
font-weight: 600;
font-size: 20px;
}
}
}
\ No newline at end of file
src/layout/index.js
......@@ -6,7 +6,6 @@ import { connect } from 'react-redux';
import { ContextPath, Open } from '../util';
import { routes, routeMap } from '../routes';
import Breadcrumb from './Breadcrumb';
import './index.less';
import { dispatchLatest } from "../model";
......@@ -96,8 +95,7 @@ export const ManageLayout = function ({ content, location }) {
</Header>
<Content className="m-3">
<Breadcrumb {...{ location }} />
<Content>
{content}
</Content>
......
src/view/Manage/Assets/index.jsx
import React, { Component } from "react"
import { Row, Col, Card, Input, Pagination } from 'antd';
import classnames from 'classnames';
import AssetTreeCOM from './components/AssetTree';
import AssetListCOM from './components/AssetList';
import { dispatch } from '../../../model';
import PageHeaderWrapper from '../../../layout/PageHeaderWrapper';
const { Search } = Input;
......@@ -61,12 +61,9 @@ class Assets extends Component {
const { treeData, items, total, currentNode,pageNum, pageSize, loading } = this.state;
return (
<Row gutter={16}>
<Col md={6}>
<AssetTreeCOM treeData={treeData} onSelect={this.getList} />
</Col>
<Col md={18}>
<Row className={classnames('text-right p-3 bg-white mb-3')}>
<PageHeaderWrapper
{...this.props}
extra={
<Search
placeholder="请输入"
onSearch={value => {
......@@ -76,7 +73,13 @@ class Assets extends Component {
}}
style={{ width: 300 }}
/>
</Row>
}
>
<Row gutter={16}>
<Col md={6}>
<AssetTreeCOM treeData={treeData} onSelect={this.getList} />
</Col>
<Col md={18}>
<Card bordered={false}>
<AssetListCOM
loading={loading}
......@@ -101,6 +104,7 @@ class Assets extends Component {
</Card>
</Col>
</Row>
</PageHeaderWrapper>
);
}
}
......
src/view/Manage/Search/index.jsx
......@@ -3,6 +3,7 @@ import { Card, Pagination } from 'antd';
import { SearchBar } from './components/SearchHelper';
import AssetListCOM from '../Assets/components/AssetList';
import { dispatch } from '../../../model';
import PageHeaderWrapper from '../../../layout/PageHeaderWrapper';
class SearchResult extends Component {
constructor(props) {
......@@ -40,7 +41,7 @@ class SearchResult extends Component {
render() {
const { items, total, pageNum, pageSize, loading, keyword, domain } = this.state;
return (
<div>
<PageHeaderWrapper {...this.props}>
<Card bordered={false}>
<SearchBar
onChange={this.onSearchBarChange}
......@@ -67,7 +68,7 @@ class SearchResult extends Component {
total={total}
/>
</Card>
</div>
</PageHeaderWrapper>
);
}
}
......
src/view/Metadata/Indicator/components/MetadataList.js
......@@ -29,12 +29,33 @@ export default class MetadataListCOM extends Component {
const { tableModels, loading } = this.props;
const { tableModel, showModal } = this.state;
let _tableModels = null;
if (tableModels) {
_tableModels = tableModels.map((item) => {
item.type = '';
if (item._class.indexOf('IndicatorCatalog') !== -1) {
item.type = '数据指标';
} else if (item._class.indexOf('StandardCatalog') !== -1) {
item.type = '数据标准';
}
item.path = '';
let paths = item.namePath.split(',');
if (paths && paths.length > 2) {
paths = paths.slice(1,paths.length-1);
item.path = paths.map((path) => path).join('/');
}
return item;
});
}
const ListContent = ({ item }) => (
<React.Fragment>
<Row>
<Col md={8}>
<Text>类型：</Text>
{'数据指标'}
{item.type}
</Col>
<Col md={8}>
<Text>标签编号：</Text>
......@@ -42,7 +63,7 @@ export default class MetadataListCOM extends Component {
</Col>
<Col md={24}>
<Text>路径：</Text>
{item.namePath||''}
{item.path||''}
</Col>
<Col md={8}>
<Text>业务定义：</Text>
......@@ -61,7 +82,7 @@ export default class MetadataListCOM extends Component {
<List
loading={loading}
itemLayout="vertical"
dataSource={tableModels || []}
dataSource={_tableModels || []}
renderItem={item => (
<List.Item>
<Skeleton title={false} loading={loading} active>
......@@ -93,9 +114,7 @@ export default class MetadataListCOM extends Component {
this.setState({ showModal: false });
}}
>
<DataDetail
tableModel={tableModel}
/>
<DataDetail tableModel={tableModel}/>
<Tabs
defaultActiveKey="description"
......
src/view/Metadata/Indicator/components/MetadataListHelper.js
......@@ -7,11 +7,9 @@ export class DataDetail extends Component {
return (
<Descriptions size="small" column={2}>
<Descriptions.Item label="类型">
数据指标
</Descriptions.Item>
<Descriptions.Item label="类型">{tableModel.type}</Descriptions.Item>
<Descriptions.Item label="标签编号">{tableModel.name||''}</Descriptions.Item>
<Descriptions.Item label="路径">{tableModel.namePath||''}</Descriptions.Item>
<Descriptions.Item label="路径">{tableModel.path||''}</Descriptions.Item>
<Descriptions.Item label="业务定义"></Descriptions.Item>
<Descriptions.Item label="更新时间">{tableModel.lastUpdateTime||''}</Descriptions.Item>
</Descriptions>
......
src/view/Metadata/Indicator/components/MetadataTree.js
//树形控件异步数据加载:https://codesandbox.io/s/99vcp?file=/index.js:969-1307
import React, { Component } from "react"
import { Tree, Card, Spin, Select } from 'antd';
import { Tree, Card, Spin, Select, Row } from 'antd';
import { connect } from 'react-redux';
import { dispatch } from '../../../../model';
......@@ -14,10 +14,10 @@ class MetadataTreeCOM extends Component {
super(props);
this.state = {
treeData: null,
defaultExpandedKeys: [],
defaultSelectedKeys: [],
expandedKeys: [],
selectedKeys: [],
domains: null,
defaultDomainValue: ''
currentDomainValue: ''
};
}
......@@ -25,10 +25,6 @@ class MetadataTreeCOM extends Component {
this.getDomains();
}
componentDidUpdate(preProps) {
}
getDomains = () => {
const { session } = this.props;
......@@ -39,20 +35,23 @@ class MetadataTreeCOM extends Component {
userId: session.userId
},
callback: data => {
let defaultDomainValue = '';
let currentDomainValue = '';
if (data && data.length>0) {
defaultDomainValue = data[0].domainId;
currentDomainValue = data[0].domainId;
}
_this.setState({ domains: data||[], defaultDomainValue},()=>{
_this.queryTopicAsTree(defaultDomainValue);
_this.setState({ domains: data||[], currentDomainValue},() => {
_this.queryTopicAsTree(currentDomainValue);
});
}
});
}
onDomainChange = (value) => {
this.queryTopicAsTree(value);
const _this = this;
this.setState({ currentDomainValue: value},() => {
_this.queryTopicAsTree(value);
})
}
updateTreeData = (list, key, children) => {
......@@ -70,33 +69,33 @@ class MetadataTreeCOM extends Component {
queryTopicAsTree = (parentNamePath) => {
const { model } = this.props;
const { type } = this.props;
const _this = this;
dispatch({
type: 'metadata.queryTopicAsTree',
payload: {
parentClass: 'Catalog',
model: model,
model: type,
parentNamePath: parentNamePath
},
callback: data => {
const defaultExpandedKeys = data&&data.map((node) => {
const expandedKeys = data&&data.map((node) => {
return node.key;
});
let defaultSelectedKeys = [];
let selectedKeys = [];
if (data && data.length>0) {
defaultSelectedKeys.push(data[0].key);
selectedKeys.push(data[0].key);
}
_this.setState({treeData: data, defaultExpandedKeys, defaultSelectedKeys},()=>{
_this.onTreeSelect(defaultSelectedKeys);
_this.setState({treeData: data, expandedKeys, selectedKeys},()=>{
_this.onTreeSelect(selectedKeys);
});
}
});
}
onLoadData = (node) => {
const { model } = this.props;
const { type } = this.props;
const { treeData } = this.state;
const { eventKey, children } = node.props;
const isLeaf = node.isLeaf();
......@@ -112,7 +111,7 @@ class MetadataTreeCOM extends Component {
type: 'metadata.queryChildTopicAsTree',
payload: {
parentId: eventKey,
model: model,
model: type,
},
callback: data => {
_this.setState({treeData:_this.updateTreeData(treeData, eventKey, data)});
......@@ -124,31 +123,39 @@ class MetadataTreeCOM extends Component {
onTreeSelect = (selectedKeys, e) => {
const { onSelect } = this.props;
this.setState({selectedKeys: selectedKeys});
if (onSelect) {
onSelect(selectedKeys[0]);
onSelect(selectedKeys);
}
}
render() {
const { treeData, defaultExpandedKeys, defaultSelectedKeys, domains, defaultDomainValue } = this.state;
const { treeData, expandedKeys, selectedKeys, domains, currentDomainValue } = this.state;
return (
<Card bordered={false} >
{domains? (
<Select defaultValue={defaultDomainValue} onChange={this.onDomainChange}>
<Row style={{ marginBottom: '16px' }}>
<Select
style={{ width: '100%' }}
loading={domains?false:true}
value={currentDomainValue}
onChange={this.onDomainChange}
>
{
domains.map((domain,index)=>{
domains && domains.map((domain,index)=>{
return <Option key={index} value={domain.domainId}>{domain.domainName}</Option>
})
}
</Select>
) : (
<Spin />
)}
</Row>
<Row>
{treeData ? (
<Tree
className="metadata-tree"
showLine
defaultExpandedKeys={defaultExpandedKeys}
defaultSelectedKeys={defaultSelectedKeys}
expandedKeys={expandedKeys}
selectedKeys={selectedKeys}
loadData={this.onLoadData}
treeData={treeData}
onSelect={this.onTreeSelect}
......@@ -156,6 +163,7 @@ class MetadataTreeCOM extends Component {
) : (
<Spin />
)}
</Row>
</Card>
);
}
......
src/view/Metadata/Indicator/index.jsx
import React, { Component } from "react";
import { Row, Col, Card, Pagination} from 'antd';
import { Row, Col, Card, Pagination, Input } from 'antd';
import PageHeaderWrapper from "../../../layout/PageHeaderWrapper";
import MetadataTreeCOM from "./components/MetadataTree";
import MetadataListCOM from "./components/MetadataList";
import { dispatch } from "../../../model";
import "./style.less";
const { Search } = Input;
export default class Indicator extends Component {
......@@ -33,19 +37,39 @@ export default class Indicator extends Component {
};
onTreeSelect = (value) => {
onTreeSelect = (selectedKeys) => {
const { pageNum, pageSize } = this.props;
this.getList(value, pageNum, pageSize);
if (selectedKeys.length === 0) {
this.setState({ loading: false, items: [], pageNum: 1, total: 0 });
return;
}
this.getList(selectedKeys[0], pageNum, pageSize);
}
render() {
const { treeSelectId, pageNum, pageSize, total, loading, items} = this.state;
return (
<div>
<Row>
<PageHeaderWrapper
{...this.props}
className="indicator-container"
extra={
<Search
placeholder="请输入"
onSearch={value => {
this.setState({ keyword: value }, ()=> {
this.getList(treeSelectId, pageNum, pageSize);
})
}}
style={{ width: 300 }}
/>
}
>
<Row gutter={16}>
<Col md={6}>
<MetadataTreeCOM model="IndicatorCatalog" onSelect={this.onTreeSelect} />
<MetadataTreeCOM type="IndicatorCatalog" onSelect={this.onTreeSelect} />
</Col>
<Col md={18}>
<Card bordered={false}>
......@@ -71,7 +95,7 @@ export default class Indicator extends Component {
</Card>
</Col>
</Row>
</div>
</PageHeaderWrapper>
);
}
}
......
src/view/Metadata/Indicator/style.less 0 → 100644
.indicator-container {
.metadata-tree {
min-height: 300px;
max-height: calc(100vh - 180px);
overflow: auto;
}
}
\ No newline at end of file
src/view/Metadata/Standard/index.jsx
import React, { Component } from "react";
import { Row, Col, Card, Pagination} from 'antd';
import { Row, Col, Card, Pagination, Input } from 'antd';
import PageHeaderWrapper from '../../../layout/PageHeaderWrapper';
import MetadataTreeCOM from "../Indicator/components/MetadataTree";
import MetadataListCOM from "../Indicator/components/MetadataList";
import { dispatch } from "../../../model";
const { Search } = Input;
export default class Standard extends Component {
constructor(props) {
......@@ -33,19 +36,38 @@ export default class Standard extends Component {
};
onTreeSelect = (value) => {
onTreeSelect = (selectedKeys) => {
const { pageNum, pageSize } = this.props;
this.getList(value, pageNum, pageSize);
if (selectedKeys.length === 0) {
this.setState({ loading: false, items: [], pageNum: 1, total: 0 });
return;
}
this.getList(selectedKeys[0], pageNum, pageSize);
}
render() {
const { treeSelectId, pageNum, pageSize, total, loading, items} = this.state;
return (
<div>
<Row>
<PageHeaderWrapper
{...this.props}
extra={
<Search
placeholder="请输入"
onSearch={value => {
this.setState({ keyword: value }, ()=> {
this.getList(treeSelectId, pageNum, pageSize);
})
}}
style={{ width: 300 }}
/>
}
>
<Row gutter={16}>
<Col md={6}>
<MetadataTreeCOM model="StandardCatalog" onSelect={this.onTreeSelect} />
<MetadataTreeCOM type="StandardCatalog" onSelect={this.onTreeSelect} />
</Col>
<Col md={18}>
<Card bordered={false}>
......@@ -71,7 +93,7 @@ export default class Standard extends Component {
</Card>
</Col>
</Row>
</div>
</PageHeaderWrapper>
);
}
}
......
src/view/User/Authorized/index.jsx
......@@ -4,6 +4,7 @@ import { Card, Pagination } from 'antd';
import { dispatch } from '../../../model';
import { paginate } from '../../../util';
import AssetListCOM from '../../Manage/Assets/components/AssetList';
import PageHeaderWrapper from '../../../layout/PageHeaderWrapper';
export default class Authorized extends Component {
......@@ -18,6 +19,7 @@ export default class Authorized extends Component {
}
updateItems() {
this.setState({ loading: true}, () => {
dispatch({
type: 'user.listPrivilegeTableModels',
payload: { },
......@@ -28,6 +30,7 @@ export default class Authorized extends Component {
})
}
})
});
}
render() {
......@@ -36,6 +39,7 @@ export default class Authorized extends Component {
const _items = paginate(items, pageNum, pageSize);
return (
<PageHeaderWrapper {...this.props}>
<Card bordered={false}>
<AssetListCOM
loading={loading}
......@@ -59,6 +63,7 @@ export default class Authorized extends Component {
total={items.length}
/>
</Card>
</PageHeaderWrapper>
);
}
}
src/view/User/Subscrible/index.jsx
......@@ -4,6 +4,7 @@ import { Card, Pagination } from 'antd';
import { dispatch } from '../../../model';
import { paginate } from '../../../util';
import AssetListCOM from '../../Manage/Assets/components/AssetList';
import PageHeaderWrapper from '../../../layout/PageHeaderWrapper';
export default class Subscrible extends Component {
......@@ -18,6 +19,7 @@ export default class Subscrible extends Component {
}
updateItems() {
this.setState({ loading: true}, () => {
dispatch({
type: 'user.getUserSubscribeTableModels',
payload: { },
......@@ -28,6 +30,7 @@ export default class Subscrible extends Component {
})
}
})
});
}
render() {
......@@ -36,6 +39,7 @@ export default class Subscrible extends Component {
const _items = paginate(items, pageNum, pageSize);
return (
<PageHeaderWrapper {...this.props}>
<Card bordered={false}>
<AssetListCOM
loading={loading}
......@@ -59,6 +63,7 @@ export default class Subscrible extends Component {
total={items.length}
/>
</Card>
</PageHeaderWrapper>
);
}
}
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