Skip to content

E
Explorer

JDChain / Explorer

通知 0
Star 0
Fork 0
E
Explorer

体验新版 GitCode，发现更多精彩内容 >>

提交 b4c7216a 编写于 作者: W wangzhe409
浏览文件
操作

新增顶部和菜单项

上级 47b3eeb2
隐藏空白更改
内联 并排
Showing with 692 addition and 40 deletion
resources/htmls/overview.html 0 → 100644
浏览文件 @ b4c7216a
<!DOCTYPE html>
<html>
<% if (web) { %>
@@include('./common/headElements.html')
<% } else { %>
<$include src="./common/headElements.html" />
<% } %>
<body>
<% if (web) { %>
@@include('./common/resourceElements.html')
<% } else { %>
<$include src="./common/resourceElements.html" />
<% } %>
<link href="/resources/app/css/common.css?ver=<%=ver%>" rel="stylesheet" />
<link href="/resources/app/css/pages/overview/container.css?ver=<%=ver%>" rel="stylesheet" />
<section id="container"></section>
<script type="text/nornj" data-auto data-target="#container">
<Container>
<#tmpl>
<div class="fjb-pagecontainer">
<fjb-Header no=overview />
<section class="fjb-body">
<aside class="fjb-aside">
<Sider />
</aside>
<section class="fjb-main">
<ant-Breadcrumb>
<ant-BreadcrumbItem>Home</ant-BreadcrumbItem>
<ant-BreadcrumbItem>List</ant-BreadcrumbItem>
<ant-BreadcrumbItem>overview</ant-BreadcrumbItem>
</ant-Breadcrumb>
<section class="fjb-content {styles.content}">
<DataTable />
</section>
</section>
</section>
</div>
</#tmpl>
</Container>
</script>
<% if (web) { %>
@@include('./common/bottomElements.html')
<% } else { %>
<$include src="./common/bottomElements.html" />
<% } %>
<script src="/resources/app/pages/overview/container.js?ver=<%=ver%>"></script>
</body>
</html>
\ No newline at end of file
resources/htmls/user.html 0 → 100644
浏览文件 @ b4c7216a
<!DOCTYPE html>
<html>
<% if (web) { %>
@@include('./common/headElements.html')
<% } else { %>
<$include src="./common/headElements.html" />
<% } %>
<body>
<% if (web) { %>
@@include('./common/resourceElements.html')
<% } else { %>
<$include src="./common/resourceElements.html" />
<% } %>
<link href="/resources/app/css/common.css?ver=<%=ver%>" rel="stylesheet" />
<link href="/resources/app/css/pages/user/container.css?ver=<%=ver%>" rel="stylesheet" />
<section id="container"></section>
<script type="text/nornj" data-auto data-target="#container">
<Container>
<#tmpl>
<div class="fjb-pagecontainer">
<fjb-Header no=user />
<section class="fjb-body">
<aside class="fjb-aside">
<Sider />
</aside>
<section class="fjb-main">
<ant-Breadcrumb>
<ant-BreadcrumbItem>Home</ant-BreadcrumbItem>
<ant-BreadcrumbItem>List</ant-BreadcrumbItem>
<ant-BreadcrumbItem>user</ant-BreadcrumbItem>
</ant-Breadcrumb>
<section class="fjb-content {styles.content}">
<DataTable />
</section>
</section>
</section>
</div>
</#tmpl>
</Container>
</script>
<% if (web) { %>
@@include('./common/bottomElements.html')
<% } else { %>
<$include src="./common/bottomElements.html" />
<% } %>
<script src="/resources/app/pages/user/container.js?ver=<%=ver%>"></script>
</body>
</html>
\ No newline at end of file
resources/images/icon-menu-contract.svg 0 → 100644
浏览文件 @ b4c7216a
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><defs><style>.cls-1{fill:#aab1bb;}</style></defs><title>菜单-合约-icon</title><g id="Layer_4" data-name="Layer 4"><polygon class="cls-1" points="640 832 736 768 832 832 832 576 640 576 640 832"/><path class="cls-1" d="M864,0H160C71.78,0,0,71.78,0,160V864c0,88.25,71.78,160,160,160H864c88.25,0,160-71.75,160-160V160C1024,71.78,952.25,0,864,0Zm96,864a96.1,96.1,0,0,1-96,96H160a96.1,96.1,0,0,1-96-96V160a96.1,96.1,0,0,1,96-96H864a96.1,96.1,0,0,1,96,96Z"/><rect class="cls-1" x="352" y="224" width="320" height="64"/><rect class="cls-1" x="224" y="608" width="256" height="64"/><rect class="cls-1" x="224" y="416" width="576" height="64"/></g></svg>
\ No newline at end of file
resources/images/icon-menu-data.svg 0 → 100644
浏览文件 @ b4c7216a
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1023.93 1016.06"><defs><style>.cls-1{fill:#aab1bb;}</style></defs><title>菜单-数据-icon</title><g id="Layer_4" data-name="Layer 4"><g id="Shape"><path class="cls-1" d="M988.89,949.88H96.23a26.06,26.06,0,0,1-26-26V39A35.08,35.08,0,0,0,0,39V923.84A96.3,96.3,0,0,0,96.23,1020H988.89a35.08,35.08,0,1,0,0-70.15Z" transform="translate(-0.03 -3.97)"/><path class="cls-1" d="M176,637.62a35,35,0,0,0,24.8-10.28L427.34,400.81,647.27,620.74a35.08,35.08,0,0,0,49.62,0l289-289.06a35.08,35.08,0,0,0-49.61-49.61L672.09,546.32,452.15,326.38a35.08,35.08,0,0,0-49.61,0L151.16,577.77A35.08,35.08,0,0,0,176,637.65Z" transform="translate(-0.03 -3.97)"/></g></g></svg>
\ No newline at end of file
resources/images/icon-menu-history.svg 0 → 100644
浏览文件 @ b4c7216a
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><defs><style>.cls-1{fill:#aab1bb;}</style></defs><title>菜单-历史-icon</title><g id="Layer_4" data-name="Layer 4"><g id="Group-15"><path class="cls-1" d="M512,1024C229.69,1024,0,794.31,0,512S229.69,0,512,0s512,229.69,512,512S794.31,1024,512,1024Zm0-960C265,64,64,265,64,512S265,960,512,960,960,759,960,512,759,64,512,64Z"/><polygon class="cls-1" points="572 545.57 572 212 512 212 512 572 513.57 572 640.89 699.31 683.31 656.89 572 545.57"/></g></g></svg>
\ No newline at end of file
resources/images/icon-menu-overview.svg 0 → 100644
浏览文件 @ b4c7216a
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1022.26 988.18"><defs><style>.cls-1{fill:#aab1bb;}</style></defs><title>菜单-总览-icon</title><g id="Layer_4" data-name="Layer 4"><g id="菜单-总览-icon"><path class="cls-1" d="M389.31,17.91H82.63C37.51,17.91.87,54.78.87,100.27V388.47c0,45.49,36.64,82.36,81.76,82.36H471.1V100.27C471.1,54.78,434.5,17.91,389.31,17.91Zm20.46,391.17H123.56c-33.87,0-61.36-27.69-61.36-61.76V141.43c0-34.11,27.49-61.76,61.36-61.76H348.44c33.88,0,61.33,27.65,61.33,61.76ZM941.37,17.91H634.69c-45.19,0-81.8,36.87-81.8,82.36V470.84H941.37c45.12,0,81.76-36.87,81.76-82.36V100.27C1023.13,54.78,986.49,17.91,941.37,17.91Zm20.43,329.4c0,34.08-27.49,61.76-61.36,61.76H614.22V141.43c0-34.11,27.45-61.76,61.33-61.76H900.44c33.87,0,61.36,27.65,61.36,61.76V347.31ZM.87,635.52V923.73c0,45.49,36.64,82.36,81.76,82.36H389.31c45.19,0,81.79-36.87,81.79-82.36V553.16H82.63C37.51,553.16.87,590,.87,635.52Zm408.9-20.6V882.57c0,34.11-27.45,61.76-61.33,61.76H123.56c-33.87,0-61.36-27.65-61.36-61.76V676.68c0-34.07,27.49-61.76,61.36-61.76Zm531.59-61.76H552.9V923.73c0,45.49,36.61,82.36,81.8,82.36H941.37c45.12,0,81.76-36.87,81.76-82.36V635.52C1023.13,590,986.49,553.16,941.37,553.16ZM961.8,882.57c0,34.11-27.49,61.76-61.36,61.76H675.55c-33.87,0-61.33-27.65-61.33-61.76V614.92H900.44c33.87,0,61.36,27.69,61.36,61.76Z" transform="translate(-0.87 -17.91)"/></g></g></svg>
\ No newline at end of file
resources/images/icon-menu-user.svg 0 → 100644
浏览文件 @ b4c7216a
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 988.5 1024"><defs><style>.cls-1{fill:#aab1bb;}</style></defs><title>菜单-用户-icon</title><g id="Layer_4" data-name="Layer 4"><path class="cls-1" d="M672.9,534.73c76-52.63,125.93-141.43,125.93-242.16C798.83,131,670.41,0,512,0S225.16,131,225.16,292.57c0,100.73,50,189.53,125.93,242.16C172.13,584,17.75,709,17.75,858.89c0,220.14,988.5,220.14,988.5,0C1006.25,709,851.86,584,672.9,534.73Zm-376-242.16c0-121.19,96.32-219.43,215.13-219.43s215.12,98.24,215.12,219.43S630.81,512,512,512,296.87,413.76,296.87,292.57ZM89.46,858.89c0-148.81,222.79-273.75,422.54-273.75S934.54,710.08,934.54,858.89C934.54,981.51,89.46,981.51,89.46,858.89Z" transform="translate(-17.75 0)"/></g></svg>
\ No newline at end of file
resources/styles/base.less
浏览文件 @ b4c7216a
......@@ -4,7 +4,7 @@ body,
html {
font-size: 16px;
font-family: "Microsoft YaHei", @fontFamily;
min-width: 1100px;
// min-width: 1100px;
background-color: #ECECEC !important;
}
......@@ -15,7 +15,7 @@ html {
.fjb-header {
height: 70px;
width: 100%;
background-color: #404040;
background-image: linear-gradient(-90deg, #5A77D3 2%, #3C4C9C 100%);
position: fixed;
top: 0;
left: 0;
......@@ -53,12 +53,41 @@ html {
}
.fjb-logo {
width: 120px;
height: 31px;
background: #333;
border-radius: 6px;
margin-top: 20px;
margin-left: 40px;
margin-right: 30px;
float: left;
font-size: 24px;
color: #FFFFFF;
line-height: 24px;
}
.fjb-menu{
width: 18px;
height: 18px;
margin-right: 10px;
display: inline-block;
font-style: normal;
vertical-align: sub;
text-align: center;
text-transform: none;
line-height: 1;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fjb-menu-contract{
background-image:url(../images/icon-menu-contract.svg);
}
.fjb-menu-data{
background-image:url(../images/icon-menu-data.svg);
}
.fjb-menu-history{
background-image:url(../images/icon-menu-history.svg);
}
.fjb-menu-overview{
background-image:url(../images/icon-menu-overview.svg);
}
.fjb-menu-user{
background-image:url(../images/icon-menu-user.svg);
}
resources/styles/common.less
浏览文件 @ b4c7216a
@import '~flarej/lib/styles/common/base';
\ No newline at end of file
@import '~flarej/lib/styles/common/base';
// 自定义菜单样式-start
.ant-menu-dark, .ant-menu-dark .ant-menu-sub{
background: transparent !important;
}
.ant-menu.ant-menu-dark .ant-menu-item-selected, .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected{
background: #1E1E2C !important;
color: #7599E9 !important;
&:before{
content:'';
width: 2px;
height: 60px;
background: #7599E9;
position:absolute;
left: 0;
-webkit-transition: height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
}
.ant-menu-item{
&:before{
content:'';
width: 0px;
height: 0px;
background: #7599E9;
position:absolute;
left: 0;
}
}
.ant-menu-dark.ant-menu-inline .ant-menu-item, .ant-menu-dark.ant-menu-inline .ant-menu-submenu-title{
height: 60px;
font-size: 16px;
line-height: 60px;
}
// 自定义菜单样式-end
\ No newline at end of file
server/app.js
浏览文件 @ b4c7216a
......@@ -33,6 +33,10 @@ const page1 = require('./routes/page1');
app.use('/page1', page1);
const page2 = require('./routes/page2');
app.use('/page2', page2);
const overview = require('./routes/overview');
app.use('/overview', overview);
const user = require('./routes/user');
app.use('/user', user);
//{pages}//
app.post('/common/getLoginInfo', function(req, res) {
......
server/devApp.js
浏览文件 @ b4c7216a
......@@ -70,16 +70,26 @@ app.get('/index', function(req, res) {
res.render('index');
});
app.get('/page1', function(req, res) {
app.get('/pages/page1.html', function(req, res) {
res.type('html');
res.render('page1', { page: 'page1/', title: 'Page 1' });
});
app.get('/page2', function(req, res) {
app.get('/pages/page2.html', function(req, res) {
res.type('html');
res.render('page2', { page: 'page2/', title: 'Page 2' });
});
app.get('/pages/overview.html', function(req, res) {
res.type('html');
res.render('overview', { page: 'overview/', title: 'Overview' });
});
app.get('/pages/user.html', function(req, res) {
res.type('html');
res.render('user', { page: 'user/', title: 'User' });
});
//{pages}//
app.get('/checkUser', function(req, res) {
......
server/routes/overview.js 0 → 100644
浏览文件 @ b4c7216a
'use strict';
const express = require('express');
const _ = require('lodash');
const router = express.Router();
const { resultData } = require('../common/utils');
router.post('/getTableData', function(req, res) {
res.type('json');
let params = req.body,
ret = {};
const datas = _.times(100, function(i) {
let num = i + 1;
return {
test1: num + 100000,
test2: '测试' + num,
test4: _.random(10, 90) + '%',
test5: _.random(10, 90) + '%',
test6: _.random(10, 90) + '%',
test8: _.random(1, 10),
test9: _.random(1, 10),
test10: _.random(1, 10),
test11: _.random(1, 10),
test12: _.random(1, 10),
test14: _.random(10, 90) + '%',
test15: _.random(10, 90) + '%',
test16: _.random(1, 24),
test17: _.random(10, 90) + '%',
test18: _.random(1, 100000)
};
});
const pageIndex = params.currentPage,
pageSize = params.pageSize,
start = (pageIndex - 1) * pageSize,
end = pageIndex * pageSize,
data = datas.filter((obj, i) => {
if (i >= start && i < end) {
return true;
}
});
Object.assign(ret, resultData, {
data,
totalCount: 100
});
res.send(ret);
});
module.exports = router;
\ No newline at end of file
server/routes/user.js 0 → 100644
浏览文件 @ b4c7216a
'use strict';
const express = require('express');
const _ = require('lodash');
const router = express.Router();
const { resultData } = require('../common/utils');
router.post('/getTableData', function(req, res) {
res.type('json');
let params = req.body,
ret = {};
const datas = _.times(100, function(i) {
let num = i + 1;
return {
test1: num + 100000,
test2: '测试' + num,
test4: _.random(10, 90) + '%',
test5: _.random(10, 90) + '%',
test6: _.random(10, 90) + '%',
test8: _.random(1, 10),
test9: _.random(1, 10),
test10: _.random(1, 10),
test11: _.random(1, 10),
test12: _.random(1, 10),
test14: _.random(10, 90) + '%',
test15: _.random(10, 90) + '%',
test16: _.random(1, 24),
test17: _.random(10, 90) + '%',
test18: _.random(1, 100000)
};
});
const pageIndex = params.currentPage,
pageSize = params.pageSize,
start = (pageIndex - 1) * pageSize,
end = pageIndex * pageSize,
data = datas.filter((obj, i) => {
if (i >= start && i < end) {
return true;
}
});
Object.assign(ret, resultData, {
data,
totalCount: 100
});
res.send(ret);
});
module.exports = router;
\ No newline at end of file
src/components/header/header.js
浏览文件 @ b4c7216a
......@@ -4,6 +4,7 @@ import { observer } from 'mobx-react';
import { registerTmpl } from 'nornj-react';
import { autobind } from 'core-decorators';
import 'flarej/lib/components/antd/menu';
import 'flarej/lib/components/antd/select';
import styles from './header.m.less';
import template from './header.t.html';
......
src/components/header/header.m.less
浏览文件 @ b4c7216a
......@@ -3,4 +3,14 @@
margin-top: 10px;
margin-left: 15px;
float: left;
}
.note{
color: #fff;
float:right;
padding-right: 30px;
.value{
width: 472px;
border: 1px solid #ADC6FF;
border-radius: 4px;
}
}
\ No newline at end of file
src/components/header/header.t.html
浏览文件 @ b4c7216a
<header class="fjb-header">
<div class="fjb-logo" />
<ant-Menu theme="dark" mode="horizontal" class="{styles.nav}" defaultSelectedKeys="{[no]}" {onSelect}>
<div class="fjb-logo">区块链浏览器</div>
<!-- <ant-Menu theme="dark" mode="horizontal" class="{styles.nav}" defaultSelectedKeys="{[no]}" {onSelect}>
<ant-MenuItem key="1">page1</ant-MenuItem>
<ant-MenuItem key="2">page2</ant-MenuItem>
<ant-MenuItem key="3">page3</ant-MenuItem>
</ant-Menu>
</ant-Menu> -->
<div class={styles.note}>
账本：<ant-Select placeholder="请选择账本" class={styles.value} >
<ant-Option value="64hnH4a8n48LeEP5HU2bMWmNxUPcaZ1JRCehRwvuNS8Ty" >64hnH4a8n48LeEP5HU2bMWmNxUPcaZ1JRCehRwvuNS8Ty</ant-Option>
</ant-Select>
</div>
</header>
\ No newline at end of file
src/components/sider/sider.m.less
浏览文件 @ b4c7216a
.sider {
height: 100%;
overflow-y: auto;
background: #242433;
padding-top: 11px;
}
src/components/sider/sider.t.html
浏览文件 @ b4c7216a
<div class="{styles.sider}">
<ant-Menu mode="inline" defaultSelectedKeys="{['1']}" defaultOpenKeys="{['sub1']}">
<ant-SubMenu key="sub1">
<@title>
<span><ant-Icon type="user" />subnav 1</span>
</@title>
<ant-MenuItem key="1">option1</ant-MenuItem>
<ant-MenuItem key="2">option2</ant-MenuItem>
<ant-MenuItem key="3">option3</ant-MenuItem>
<ant-MenuItem key="4">option4</ant-MenuItem>
</ant-SubMenu>
<ant-SubMenu key="sub2">
<@title>
<span><ant-Icon type="laptop" />subnav 2</span>
</@title>
<ant-MenuItem key="5">option5</ant-MenuItem>
<ant-MenuItem key="6">option6</ant-MenuItem>
<ant-MenuItem key="7">option7</ant-MenuItem>
<ant-MenuItem key="8">option8</ant-MenuItem>
</ant-SubMenu>
<ant-SubMenu key="sub3">
<@title>
<span><ant-Icon type="notification" />subnav 3</span>
</@title>
<ant-MenuItem key="9">option9</ant-MenuItem>
<ant-MenuItem key="10">option10</ant-MenuItem>
<ant-MenuItem key="11">option11</ant-MenuItem>
<ant-MenuItem key="12">option12</ant-MenuItem>
</ant-SubMenu>
<ant-Menu mode="inline" defaultSelectedKeys="{['1']}" theme="dark">
<ant-MenuItem key="1"><i class="fjb-menu fjb-menu-overview"></i>摘要</ant-MenuItem>
<ant-MenuItem key="2"><i class="fjb-menu fjb-menu-history"></i>历史</ant-MenuItem>
<ant-MenuItem key="3"><i class="fjb-menu fjb-menu-user"></i>用户</ant-MenuItem>
<ant-MenuItem key="4"><i class="fjb-menu fjb-menu-data"></i>数据账户</ant-MenuItem>
<ant-MenuItem key="5"><i class="fjb-menu fjb-menu-contract"></i>合约</ant-MenuItem>
</ant-Menu>
</div>
\ No newline at end of file
src/pages/overview/container.js 0 → 100644
浏览文件 @ b4c7216a
import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import nj from 'nornj';
import { registerTmpl } from 'nornj-react';
import '../../common/containerConfig';
import 'flarej/lib/components/antd/button';
import 'flarej/lib/components/antd/breadcrumb';
import 'flarej/lib/components/antd/table';
import { Message } from 'flarej/lib/components/antd/message';
import { autobind } from 'core-decorators';
import '../../components/header';
import '../../components/sider';
import ContainerHoc from '../../components/higherOrders/container';
import styles from './overview.m.less';
import tmpls from './overview.t.html';
import OverviewStore from '../../stores/OverviewStore';
const overviewStore = new OverviewStore();
//页面容器组件
@inject('store')
@observer
class Container extends Component {
componentDidMount() {
const closeLoading = Message.loading('正在加载数据...', 0);
this.props.store.getTableData(1, this.props.store.pageSize).then(() => closeLoading());
}
render() {
return this.props.tmpls[0](this, {
styles
});
}
}
ContainerHoc('Container', Container, overviewStore);
@registerTmpl('DataTable')
@inject('store')
@observer
class DataTable extends Component {
state = {
columns: [{
title: '测试1',
dataIndex: 'test1',
key: 'test1',
}, {
title: '测试2',
dataIndex: 'test2',
key: 'test2',
}, {
title: '测试3',
dataIndex: 'test3',
key: 'test3',
children: [{
title: '测试4',
dataIndex: 'test4',
key: 'test4',
}, {
title: '测试5',
dataIndex: 'test5',
key: 'test5',
}, {
title: '测试6',
dataIndex: 'test6',
key: 'test6',
}]
}, {
title: '测试7',
dataIndex: 'test7',
key: 'test7',
children: [{
title: '测试8',
dataIndex: 'test8',
key: 'test8',
}, {
title: '测试9',
dataIndex: 'test9',
key: 'test9',
}, {
title: '测试10',
dataIndex: 'test10',
key: 'test10',
}, {
title: '测试11',
dataIndex: 'test11',
key: 'test11',
}, {
title: '测试12',
dataIndex: 'test12',
key: 'test12',
}]
}, {
title: '测试13',
dataIndex: 'test13',
key: 'test13',
children: [{
title: '测试14',
dataIndex: 'test14',
key: 'test14',
}, {
title: '测试15',
dataIndex: 'test15',
key: 'test15',
}, {
title: '测试16',
dataIndex: 'test16',
key: 'test16',
}, {
title: '测试17',
dataIndex: 'test17',
key: 'test17',
}, {
title: '测试18',
dataIndex: 'test18',
key: 'test18',
}]
}]
};
@autobind
onPageChange(page, pageSize) {
const closeLoading = Message.loading('正在加载数据...', 0);
this.props.store.getTableData(page, pageSize).then(() => closeLoading());
}
render() {
return tmpls.dataTable(this.state, this.props, this, {
styles
});
}
}
if (module.hot) {
module.hot.accept();
njr.renderTmplTag({ target: '#container' });
}
\ No newline at end of file
src/pages/overview/overview.m.less 0 → 100644
浏览文件 @ b4c7216a
.content {
}
\ No newline at end of file
src/pages/overview/overview.t.html 0 → 100644
浏览文件 @ b4c7216a
<template name="dataTable">
<ant-Table dataSource={toJS(store.tableData)}
rowKey="test1"
{columns}
bordered
:pagination="{
current: store.pageIndex,
pageSize: store.pageSize,
total: store.count,
onChange: onPageChange
}"/>
</template>
\ No newline at end of file
src/pages/user/container.js 0 → 100644
浏览文件 @ b4c7216a
import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import nj from 'nornj';
import { registerTmpl } from 'nornj-react';
import '../../common/containerConfig';
import 'flarej/lib/components/antd/button';
import 'flarej/lib/components/antd/breadcrumb';
import 'flarej/lib/components/antd/table';
import { Message } from 'flarej/lib/components/antd/message';
import { autobind } from 'core-decorators';
import '../../components/header';
import '../../components/sider';
import ContainerHoc from '../../components/higherOrders/container';
import styles from './user.m.less';
import tmpls from './user.t.html';
import UserStore from '../../stores/UserStore';
const userStore = new UserStore();
//页面容器组件
@inject('store')
@observer
class Container extends Component {
componentDidMount() {
const closeLoading = Message.loading('正在加载数据...', 0);
this.props.store.getTableData(1, this.props.store.pageSize).then(() => closeLoading());
}
render() {
return this.props.tmpls[0](this, {
styles
});
}
}
ContainerHoc('Container', Container, userStore);
@registerTmpl('DataTable')
@inject('store')
@observer
class DataTable extends Component {
state = {
columns: [{
title: '测试1',
dataIndex: 'test1',
key: 'test1',
}, {
title: '测试2',
dataIndex: 'test2',
key: 'test2',
}, {
title: '测试3',
dataIndex: 'test3',
key: 'test3',
children: [{
title: '测试4',
dataIndex: 'test4',
key: 'test4',
}, {
title: '测试5',
dataIndex: 'test5',
key: 'test5',
}, {
title: '测试6',
dataIndex: 'test6',
key: 'test6',
}]
}, {
title: '测试7',
dataIndex: 'test7',
key: 'test7',
children: [{
title: '测试8',
dataIndex: 'test8',
key: 'test8',
}, {
title: '测试9',
dataIndex: 'test9',
key: 'test9',
}, {
title: '测试10',
dataIndex: 'test10',
key: 'test10',
}, {
title: '测试11',
dataIndex: 'test11',
key: 'test11',
}, {
title: '测试12',
dataIndex: 'test12',
key: 'test12',
}]
}, {
title: '测试13',
dataIndex: 'test13',
key: 'test13',
children: [{
title: '测试14',
dataIndex: 'test14',
key: 'test14',
}, {
title: '测试15',
dataIndex: 'test15',
key: 'test15',
}, {
title: '测试16',
dataIndex: 'test16',
key: 'test16',
}, {
title: '测试17',
dataIndex: 'test17',
key: 'test17',
}, {
title: '测试18',
dataIndex: 'test18',
key: 'test18',
}]
}]
};
@autobind
onPageChange(page, pageSize) {
const closeLoading = Message.loading('正在加载数据...', 0);
this.props.store.getTableData(page, pageSize).then(() => closeLoading());
}
render() {
return tmpls.dataTable(this.state, this.props, this, {
styles
});
}
}
if (module.hot) {
module.hot.accept();
njr.renderTmplTag({ target: '#container' });
}
\ No newline at end of file
src/pages/user/user.m.less 0 → 100644
浏览文件 @ b4c7216a
.content {
}
\ No newline at end of file
src/pages/user/user.t.html 0 → 100644
浏览文件 @ b4c7216a
<template name="dataTable">
<ant-Table dataSource={toJS(store.tableData)}
rowKey="test1"
{columns}
bordered
:pagination="{
current: store.pageIndex,
pageSize: store.pageSize,
total: store.count,
onChange: onPageChange
}"/>
</template>
\ No newline at end of file
src/stores/OverviewStore.js 0 → 100644
浏览文件 @ b4c7216a
import { observable, computed, action, transaction } from 'mobx';
import { fetchData } from 'flarej/lib/utils/fetchConfig';
import { autobind } from 'core-decorators';
import { Notification } from 'flarej/lib/components/antd/notification';
export default class OverviewStore {
@observable pageIndex = 1;
@observable pageSize = 10;
@observable count = 0;
@observable tableData = [];
@autobind
@action
getTableData(currentPage = this.pageIndex, pageSize = this.pageSize) {
return fetchData(`${G_WEB_DOMAIN}/overview/getTableData`, result => {
transaction(() => {
if (result.success) {
this.pageIndex = currentPage;
this.pageSize = pageSize;
this.count = result.totalCount;
this.tableData = result.data;
} else {
this.pageIndex = 1;
this.pageSize = 10;
this.count = 0;
this.tableData = [];
Notification.error({ description: '获取表格数据出错，异常是:' + result.msg, duration: null });
}
});
}, {
currentPage,
pageSize,
}, { method: 'post' }).catch((ex) => {
Notification.error({ description: '获取表格数据出错，错误是:' + ex, duration: null });
});
}
}
\ No newline at end of file
src/stores/UserStore.js 0 → 100644
浏览文件 @ b4c7216a
import { observable, computed, action, transaction } from 'mobx';
import { fetchData } from 'flarej/lib/utils/fetchConfig';
import { autobind } from 'core-decorators';
import { Notification } from 'flarej/lib/components/antd/notification';
export default class UserStore {
@observable pageIndex = 1;
@observable pageSize = 10;
@observable count = 0;
@observable tableData = [];
@autobind
@action
getTableData(currentPage = this.pageIndex, pageSize = this.pageSize) {
return fetchData(`${G_WEB_DOMAIN}/user/getTableData`, result => {
transaction(() => {
if (result.success) {
this.pageIndex = currentPage;
this.pageSize = pageSize;
this.count = result.totalCount;
this.tableData = result.data;
} else {
this.pageIndex = 1;
this.pageSize = 10;
this.count = 0;
this.tableData = [];
Notification.error({ description: '获取表格数据出错，异常是:' + result.msg, duration: null });
}
});
}, {
currentPage,
pageSize,
}, { method: 'post' }).catch((ex) => {
Notification.error({ description: '获取表格数据出错，错误是:' + ex, duration: null });
});
}
}
\ No newline at end of file
templates/server/devApp.js
浏览文件 @ b4c7216a
app.get('/#{pageName}#', function(req, res) {
app.get('/pages/#{pageName}#.html', function(req, res) {
res.type('html');
res.render('#{pageName}#', { page: '#{pageName}#/', title: '#{pageName | pascal}#' });
});
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或