Skip to content

H
hnyc-data
Commit 4111be2b by zhaochengxiang
Options

增加数据指标标准

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