高级搜索页面

d0aa0912 · jinlong12 · 9b9bf59a · d0aa0912 · d0aa0912 · d0aa0912
9 changed file
--- a/resources/htmls/search.html
+++ b/resources/htmls/search.html
+<!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/search/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=search />
+          <section class="fjb-body">
+            <aside class="fjb-aside">
+              <Sider />
+            </aside>
+            <section class="fjb-main">
+              <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/search/container.js?ver=<%=ver%>"></script>
+</body>
+</html>
\ No newline at end of file
--- a/server/app.js
+++ b/server/app.js
@@ -73,6 +73,8 @@ app.use('/*/txs/additional-count', overview);

 app.use('/*/users/*', user);
 app.use('/*/contracts/*', contract);
+const search = require('./routes/search');
+app.use('/search', search);
 //{pages}//

 app.post('/common/getLoginInfo', function(req, res) {

--- a/server/devApp.js
+++ b/server/devApp.js
@@ -105,6 +105,11 @@ app.get('/pages/ledgers.html', function(req, res) {
  res.render('ledgers', { page: 'ledgers/', title: 'Ledgers' });
 });

+app.get('/pages/search.html', function(req, res) {
+  res.type('html');
+  res.render('search', { page: 'search/', title: 'Search' });
+});
+
 //{pages}//

 app.get('/checkUser', function(req, res) {

--- a/server/routes/search.js
+++ b/server/routes/search.js
+'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
--- a/src/components/sider/sider.t.html
+++ b/src/components/sider/sider.t.html
 <div class="{styles.sider}">
  <!-- <ant-Menu mode="inline" defaultSelectedKeys="{['1']}" theme="dark"> -->
  <ant-Menu mode="inline" theme="dark">
+    <ant-MenuItem key="0">
+      <a href="../../pages/search.html" style="color: {href == 'search.html' ? ('#5A77D2', '')}">
+        <i class="fjb-menu fjb-menu-overview"></i>区块搜索
+      </a>
+    </ant-MenuItem>
    <ant-MenuItem key="1">
      <a href="../../pages/overview.html" style="color: {href == 'overview.html' ? ('#5A77D2', '')}">
        <i class="fjb-menu fjb-menu-overview"></i>账本摘要

--- a/src/pages/search/container.js
+++ b/src/pages/search/container.js
+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/input';
+import 'flarej/lib/components/antd/breadcrumb';
+import 'flarej/lib/components/antd/table';
+import { autobind } from 'core-decorators';
+import '../../components/header';
+import '../../components/sider';
+import { Input, Select, Icon, Message } from 'antd';
+import ContainerHoc from '../../components/higherOrders/container';
+import styles from './search.m.less';
+import tmpls from './search.t.html';
+import SearchStore from '../../stores/SearchStore';
+const searchStore = new SearchStore();
+const Option = Select.Option;
+
+//页面容器组件
+@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, searchStore); 
+
+@registerTmpl('DataTable')
+@inject('store')
+@observer
+class DataTable extends Component {
+  searchItem = () => (
+    <Input addonBefore = {this.selectBefore()} className = {`${styles.inputTable}`}/>
+  )
+
+  selectBefore = () => (
+    <Select defaultValue="all">
+      <Option value="all">全部</Option>
+      <Option value="blockchain">区块</Option>
+      <Option value="transaction">交易</Option>
+    </Select>
+  )
+
+  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
--- a/src/pages/search/search.m.less
+++ b/src/pages/search/search.m.less
+.content {
+  .inputTable {
+    min-width: 200px;
+    width: 248px;
+    margin-right: 10px;
+    border-color: #d9d9d9;
+  }
+
+  .bgPageInviting {
+    padding: 10px;
+    .pageSubTitle{
+      font-size: 18px;
+      font-weight: normal;
+      position: relative;
+      line-height: 16px;
+      padding-left: 10px;
+      border-bottom: 1.6px solid #eee;
+      &:before{
+        content: '';
+        position: absolute;
+        left: 0;
+        height: 16px;
+        width: 3px;
+        background: #e13a25;
+      }
+    };
+  }
+}
\ No newline at end of file
--- a/src/pages/search/search.t.html
+++ b/src/pages/search/search.t.html
+<template name="dataTable" class="{styles.content}">
+  <h2 class="fjb-title">区块搜索</h2>
+  <div >
+    {searchItem()}
+    <ant-Button>搜索</ant-Button>
+  </div>
+</template>
\ No newline at end of file
--- a/src/stores/SearchStore.js
+++ b/src/stores/SearchStore.js
+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 SearchStore {
+  @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}/search/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