+
+
+
+
+ {this.state.loading ? '' : this.props.children}
+
+
-
-
-
-
-
-
diff --git a/pages/user.html b/pages/user.html
deleted file mode 100644
index be4482d..0000000
--- a/pages/user.html
+++ /dev/null
@@ -1,18 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/common/lib.js b/src/common/lib.js
deleted file mode 100644
index 19438ec..0000000
--- a/src/common/lib.js
+++ /dev/null
@@ -1 +0,0 @@
-import 'antd/lib/index.css';
diff --git a/src/component/App.jsx b/src/component/App.jsx
deleted file mode 100644
index 0a37080..0000000
--- a/src/component/App.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import { DatePicker , message , Button , Menu, Dropdown, Icon } from 'antd';
-
-const App = React.createClass({
- getInitialState() {
- return {
- date: ''
- };
- },
- handleChange(value) {
- message.info('您选择的日期是: ' + value.toString());
- this.setState({
- date: value
- });
- },
- render() {
- return
-
;
- }
-});
-
-export default App;
diff --git a/src/components/App/index.js b/src/components/App/index.js
new file mode 100644
index 0000000..edf889c
--- /dev/null
+++ b/src/components/App/index.js
@@ -0,0 +1,112 @@
+import React from 'react';
+import {Spin, message} from 'antd';
+import Header from '../Header';
+import Footer from '../Footer';
+import Sidebar from '../Sidebar';
+import Login from '../Login';
+import Breadcrumb from '../Breadcrumb';
+import './index.less';
+import globalConfig from 'config.js';
+import ajax from '../../utils/ajax';
+import Logger from '../../utils/Logger';
+
+const logger = Logger.getLogger('App');
+
+/**
+ * App组件
+ * 定义整个页面的布局
+ */
+class App extends React.Component {
+
+ // 全局的状态
+ state = {
+ loading: true, // 是否在loading状态
+ login: false, // 是否登录
+ userName: '未登录', // 登录后的用户名
+ };
+
+ componentWillMount() {
+ logger.debug('mount and add styles');
+ // 为了兼容登录组件
+ document.body.style.background = 'white'; // FIXME: gross hack
+ }
+
+ componentDidMount() {
+ if (!this.state.login) {
+ const hide = message.loading('正在获取用户信息...', 0);
+
+ // 先去服务端验证下, 说不定已经登录了
+ ajax.get(`${globalConfig.getAPIPath()}${globalConfig.login.getCurrentUser}`).end((err, res) => {
+
+ // 注意这里, debug模式下每次刷新都必须重新登录
+ if (ajax.isSuccess(res) && !globalConfig.debug) {
+ hide();
+ this.loginSuccess(res.body.data);
+ } else {
+ // 如果服务端说没有登录, 就要跳转到sso或者登录界面
+ if (globalConfig.isSSO()) {
+ // debug模式不支持调试单点登录
+ // 因为没有单点登录的地址啊...跳不回来
+ hide();
+ logger.debug('not login, redirect to SSO login page');
+ const redirect = encodeURIComponent(window.location.href);
+ window.location.href = `${globalConfig.login.sso}${redirect}`;
+ } else {
+ hide();
+ message.error('获取用户信息失败, 请重新登录');
+ logger.debug('not login, redirect to Login component');
+ this.setState({loading: false, login: false});
+ }
+ }
+ });
+ }
+ }
+
+ // 登录成功后的回调
+ loginSuccess = (name, showMsg) => {
+ logger.debug('callback logingSuccess, name = %s', name);
+ if (showMsg)
+ message.success('登录成功');
+ document.body.style.background = 'white'; // FIXME: gross hack
+ this.setState({loading: false, login: true, userName: name});
+ }
+
+ render() {
+ // 显示一个加载中
+ if (this.state.loading) {
+ return 当前日期：{this.state.date.toString()}
-
+ {/*整个页面被一个ant-layout-aside的div包围, 分为sidebar/header/footer/content等几部分*/}
+
+ );
+ }
+}
+
+export default App;
diff --git a/src/components/App/index.less b/src/components/App/index.less
new file mode 100644
index 0000000..44aff70
--- /dev/null
+++ b/src/components/App/index.less
@@ -0,0 +1,154 @@
+/*定义整体layout的样式, 直接从antd官网copy的, 稍微修改了一些*/
+/*我本来想把样式拆到各个模块去, 但是太麻烦了...*/
+
+.ant-layout-aside {
+ position: relative;
+ height: 100%;
+}
+
+.ant-layout-aside .ant-layout-logo {
+ width: 200px;
+ height: 32px;
+ background: #333;
+ border-radius: 6px;
+ margin: 16px 8px 16px 12px;
+ transition: all 0.3s ease;
+}
+
+.ant-layout-aside-collapse .ant-layout-logo {
+ width: 32px;
+ margin: 16px;
+ transition: all 0.3s ease;
+}
+
+.ant-layout-aside .ant-layout-sider {
+ width: 224px;
+ background: #404040;
+ position: absolute;
+ overflow: auto;
+ padding-bottom: 24px;
+ height: 100%;
+ transition: all 0.3s ease;
+}
+
+.ant-layout-aside-collapse .ant-layout-sider {
+ width: 64px;
+ transition: all 0.3s ease;
+}
+
+.ant-layout-aside .ant-layout-sider > .ant-menu {
+ margin-bottom: 20px;
+}
+
+.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item {
+ margin: 16px 0;
+}
+
+.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item .nav-text {
+ vertical-align: baseline;
+ display: inline-block;
+}
+
+.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item > .anticon {
+ transition: font-size .3s;
+}
+
+.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item {
+ transition: all 0s ease;
+}
+
+.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item > .anticon {
+ font-size: 16px;
+ display: inline-block;
+}
+
+.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item .nav-text {
+ display: none;
+}
+
+.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item:hover {
+ background: #2db7f5;
+ color: #fff;
+ transition: all 0s ease;
+}
+
+.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item:hover .nav-text {
+ display: inline-block;
+ vertical-align: top;
+ background: #2db7f5;
+ color: #fff;
+ padding-right: 16px;
+ border-radius: 0 5px 5px 0;
+}
+
+/* 实际使用中需要改成 position: fixed */
+.ant-layout-aside .ant-aside-action {
+ height: 42px;
+ width: 224px;
+ position: absolute;
+ bottom: 0;
+ background: #656565;
+ color: #fff;
+ text-align: center;
+ line-height: 42px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.ant-layout-aside-collapse .ant-aside-action {
+ width: 64px;
+ transition: all 0.3s ease;
+}
+
+.ant-layout-aside .ant-layout-header {
+ background: #fff;
+ height: 48px;
+ border-bottom: 1px solid #e9e9e9;
+}
+
+.ant-layout-aside .ant-layout-breadcrumb {
+ margin: 7px 0 -17px 24px;
+}
+
+.ant-layout-aside .ant-layout-main {
+ margin-left: 224px;
+ transition: all 0.3s ease;
+ overflow: auto;
+ height: 100%;
+}
+
+.ant-layout-aside-collapse .ant-layout-main {
+ margin-left: 64px;
+ transition: all 0.3s ease;
+}
+
+.ant-layout-aside .ant-layout-container {
+ margin: 24px 16px;
+}
+
+.ant-layout-aside .ant-layout-content {
+ background: #fff;
+ padding: 24px;
+}
+
+.ant-layout-aside .ant-layout-footer {
+ height: 64px;
+ line-height: 64px;
+ text-align: center;
+ font-size: 12px;
+ color: #999;
+ background: #fff;
+ border-top: 1px solid #e9e9e9;
+ width: 100%;
+}
+
+// 为了在屏幕中间显示一个loading
+.center-div {
+ position: absolute; /*绝对定位*/
+ top: 50%; /* 距顶部50%*/
+ left: 50%; /* 距左边50%*/
+ height: 2px;
+ margin-top: -1px; /*margin-top为height一半的负值*/
+ width: 2px;
+ margin-left: -1px; /*margin-left为width一半的负值*/
+}
diff --git a/src/components/Breadcrumb/index.js b/src/components/Breadcrumb/index.js
new file mode 100644
index 0000000..297cee5
--- /dev/null
+++ b/src/components/Breadcrumb/index.js
@@ -0,0 +1,81 @@
+import React from 'react';
+import {Breadcrumb, Icon} from 'antd';
+import items from 'menu.js';
+import Logger from '../../utils/Logger';
+
+const Item = Breadcrumb.Item;
+const logger = Logger.getLogger('Breadcrumb');
+
+/**
+ * 定义面包屑导航, 由于和已有的组件重名, 所以改个类名
+ */
+class Bread extends React.Component {
+
+ static inited = false; // 表示下面两个map是否初始化
+ static iconMap = new Map(); // 暂存menu.js中key->icon的对应关系
+ static nameMap = new Map(); // 暂存menu.js中key->name的对应关系
+
+ // 初始化iconMap和nameMap
+ static init() {
+ // 箭头函数还是很好用的
+ items.forEach((level1) => {
+ Bread.nameMap.set(level1.key, level1.name);
+ logger.debug('nameMap add entry: key=%s, value=%s', level1.key, level1.name);
+ Bread.iconMap.set(level1.key, level1.icon);
+ logger.debug('iconMap add entry: key=%s, value=%s', level1.key, level1.icon);
+
+ if (level1.child) {
+ level1.child.forEach((level2) => {
+ Bread.nameMap.set(level2.key, level2.name);
+ logger.debug('nameMap add entry: key=%s, value=%s', level2.key, level2.name);
+
+ if (level2.child) {
+ level2.child.forEach((level3)=> {
+ Bread.nameMap.set(level3.key, level3.name);
+ logger.debug('nameMap add entry: key=%s, value=%s', level3.key, level3.name);
+ });
+ }
+ });
+ }
+ });
+ }
+
+ render() {
+ // render之前判断是否要初始化
+ if (!Bread.inited) {
+ logger.debug('not inited, calling init method');
+ Bread.init();
+ Bread.inited = true;
+ }
+
+ const itemArray = [];
+
+ // 面包屑导航的最开始都是一个home图标, 并且这个图标时可以点击的
+ itemArray.push(
+
+
+
+
+
+
+
+ {itemArray}
+
+ );
+ }
+
+}
+
+export default Bread;
diff --git a/src/components/DBTable/InnerForm.js b/src/components/DBTable/InnerForm.js
new file mode 100644
index 0000000..3d9cf4d
--- /dev/null
+++ b/src/components/DBTable/InnerForm.js
@@ -0,0 +1,449 @@
+import React from 'react';
+import {
+ Form,
+ Input,
+ Row,
+ Col,
+ Button,
+ DatePicker,
+ Select,
+ Icon,
+ Radio,
+ InputNumber,
+ Checkbox,
+ message,
+ Upload,
+ notification
+} from 'antd';
+import globalConfig from 'config.js';
+import Logger from '../../utils/Logger';
+
+const FormItem = Form.Item;
+const RadioGroup = Radio.Group;
+const CheckboxGroup = Checkbox.Group;
+const Option = Select.Option;
+
+const logger = Logger.getLogger('InnerForm');
+
+/**
+ * 内部表单组件
+ */
+class InnerForm extends React.Component {
+
+ // 本来想在初始化时解析schema, 结果发现不行
+ // 解析schema的过程还是改到render里了
+
+ /**
+ * 辅助函数, 将一个input元素包装下
+ *
+ * @param formItem
+ * @param field
+ * @returns {XML}
+ */
+ colWrapper = (formItem, field) => {
+ //const {getFieldProps, getFieldError, isFieldValidating} = this.props.form;
+ return (
+
+ `每页${this.props.pageSize}条, 共 ${total} 条`}
+ pageSize={this.props.pageSize} defaultCurrent={1}
+ current={this.props.currentPage}
+ onChange={this.props.parentHandlePageChange}
+ />
+
+ );
+ }
+
+}
+
+export default InnerPagination;
diff --git a/src/components/DBTable/InnerTable.js b/src/components/DBTable/InnerTable.js
new file mode 100644
index 0000000..ee88c02
--- /dev/null
+++ b/src/components/DBTable/InnerTable.js
@@ -0,0 +1,425 @@
+import React from 'react';
+import {
+ Form,
+ Input,
+ Button,
+ DatePicker,
+ Select,
+ Table,
+ Icon,
+ Radio,
+ InputNumber,
+ Checkbox,
+ Modal,
+ message,
+ notification,
+ Affix
+} from 'antd';
+import globalConfig from 'config.js';
+import Logger from '../../utils/Logger';
+import ajax from '../../utils/ajax';
+
+const FormItem = Form.Item;
+const ButtonGroup = Button.Group;
+
+const logger = Logger.getLogger('InnerTable');
+
+/**
+ * 内部表格组件
+ */
+class InnerTable extends React.Component {
+
+ // 很多时候都要在antd的组件上再包一层
+ state = {
+ modalVisible: false, // modal是否可见
+ modalTitle: '新增', // modal标题
+ modalInsert: true, // 当前modal是用来insert还是update
+
+ selectedRowKeys: [], // 当前有哪些行被选中, 这里只保存key
+ selectedRows: [], // 当前有哪些行被选中, 保存完整数据
+ };
+
+ /**
+ * InnerTable组件的重render有两种可能:
+ * 1. 上层组件调用的render方法, 这个时候会触发componentWillReceiveProps方法
+ * 2. 自身状态变化引起的重新render
+ * 注意区分
+ *
+ * 对于第一种情况, 要将组件的状态还原到初始状态
+ *
+ * @param nextProps
+ */
+ componentWillReceiveProps = (nextProps) => {
+ logger.debug('receive new props and try to render, nextProps=%o', nextProps);
+ // 其实传入的props和当前的props可能是一样的, 这个方法不会判断修改才触发
+ // 要自己判断props是否有变化
+
+ // 蛋疼的是, 要区分是上层组件引起的这个方法调用还是InnerTable组件本身引起的
+ // 本来自身的变化是不应该触发的, 但不知antd的form组件做了什么, 每次给表单设置值的时候就会触发, 我讨厌黑盒...
+ // 利用了一个特性: 如果是上层触发的, tableLoading必定是true
+ if (nextProps.tableLoading === true) {
+ // 所有状态都要手动还原到初始值
+ // 这个方法里setState不会触发render
+ this.setState({
+ modalVisible: false,
+ modalTitle: '新增',
+ modalInsert: true,
+
+ selectedRowKeys: [],
+ selectedRows: [],
+ });
+ }
+ }
+
+ /**
+ * 点击新增按钮, 弹出一个内嵌表单的modal
+ *
+ * @param e
+ */
+ onClickInsert = (e) => {
+ e.preventDefault();
+ this.props.form.resetFields();
+ this.setState({modalVisible: true, modalTitle: '新增', modalInsert: true});
+ }
+
+ /**
+ * 点击更新按钮, 弹出一个内嵌表单的modal
+ * 注意区分单条更新和批量更新
+ *
+ * @param e
+ */
+ onClickUpdate = (e) => {
+ e.preventDefault();
+ this.props.form.resetFields();
+ const multiSelected = this.state.selectedRowKeys.length > 1; // 是否选择了多项
+ // 如果只选择了一项, 就把原来的值填到表单里
+ // 否则就只把要更新的主键填到表单里
+ if (!multiSelected) {
+ logger.debug('update single record, and fill original values');
+ this.props.form.setFieldsValue(this.state.selectedRows.pop()); // FIXME: 理论上来说不应该这样去修改state中的值
+ } else {
+ const tmpObj = {};
+ tmpObj[this.primaryKey] = this.state.selectedRowKeys.join(', ');
+ logger.debug('update multiple records, keys = %s', tmpObj[this.primaryKey]);
+ this.props.form.setFieldsValue(tmpObj);
+ }
+
+ if (multiSelected) {
+ this.setState({modalVisible: true, modalTitle: '批量更新', modalInsert: false});
+ } else {
+ this.setState({modalVisible: true, modalTitle: '更新', modalInsert: false});
+ }
+ }
+
+ /**
+ * 点击删除按钮, 弹出一个确认对话框
+ * 注意区分单条删除和批量删除
+ *
+ * @param e
+ */
+ onClickDelete = (e) => {
+ e.preventDefault();
+ Modal.confirm({
+ title: this.state.selectedRowKeys.length > 1 ? '确认批量删除' : '确认删除',
+ content: `当前被选中的行: ${this.state.selectedRowKeys.join(', ')}`,
+ // 这里注意要用箭头函数, 否则this不生效
+ onOk: () => {
+ this.handleDelete();
+ },
+ });
+ }
+
+ /**
+ * 隐藏modal
+ */
+ hideModal = () => {
+ this.setState({modalVisible: false});
+ }
+
+ /**
+ * 点击modal中确认按钮的回调
+ */
+ handleModalOk = () => {
+ // 将表单中的undefined去掉
+ // 表单传过来的主键是逗号分隔的字符串, 这里转换成数组
+ const newObj = {};
+ const primaryKeyArray = [];
+ const oldObj = this.props.form.getFieldsValue();
+ for (const key in oldObj) {
+ if (!oldObj[key])
+ continue;
+
+ if (key === this.primaryKey && typeof oldObj[key] === 'string') {
+ for (const str of oldObj[key].split(', ')) {
+ // 按schema中的约定, 主键只能是int/varchar
+ if (this.primaryKeyType === 'int') {
+ primaryKeyArray.push(parseInt(str));
+ } else {
+ primaryKeyArray.push(str);
+ }
+ }
+ } else {
+ newObj[key] = oldObj[key];
+ }
+ }
+ if (this.primaryKey && primaryKeyArray.length > 0) {
+ newObj[this.primaryKey] = primaryKeyArray;
+ }
+ this.hideModal();
+ logger.debug('click modal OK and the form obj = %o', newObj);
+
+ if (this.state.modalInsert) {
+ this.handleInsert(newObj);
+ } else {
+ this.handleUpdate(newObj);
+ }
+ }
+
+
+ /*下面开始才是真正的数据库操作*/
+
+
+ /**
+ * 真正去处理新增数据
+ */
+ handleInsert = (obj) => {
+ const url = `${globalConfig.getAPIPath()}/${this.props.tableName}/insert`;
+ const hide = message.loading('正在新增...', 0);
+ logger.debug('handleInsert: url = %s, obj = %o', url, obj);
+
+ ajax.post(url).send(obj).end((err, res) => {
+ hide();
+ logger.debug('handleInsert: return error = %o, res = %o', err, res);
+ // err就是一个字符串
+ // res是一个Response对象, 其中的body字段才是服务端真正返回的数据
+ if (err || !res.body.success) {
+ notification.error({
+ message: '新增失败',
+ description: err ? '请求insert接口出错, 请联系管理员' : `请联系管理员, 错误信息: ${res.body.message}`,
+ duration: 0,
+ });
+ } else {
+ notification.success({
+ message: '新增成功',
+ description: this.primaryKey ? `新增数据行 主键=${res.body.data[this.primaryKey]}` : '',
+ duration: 0,
+ });
+ }
+ });
+ }
+
+ /**
+ * 真正去更新数据
+ */
+ handleUpdate = (obj) => {
+ const keys = obj[this.primaryKey];
+ const url = `${globalConfig.getAPIPath()}/${this.props.tableName}/update?keys=${keys instanceof Array ? keys.join(',') : keys}`;
+ const hide = message.loading('正在更新...', 0);
+ obj[this.primaryKey] = undefined;
+
+ logger.debug('handleUpdate: url = %s, obj = %o', url, obj);
+
+ ajax.post(url).send(obj).end((err, res) => {
+ hide();
+ logger.debug('handleUpdate: return error = %o, res = %o', err, res);
+
+ if (err || !res.body.success) {
+ notification.error({
+ message: '更新失败',
+ description: err ? '请求update接口出错, 请联系管理员' : `请联系管理员, 错误信息: ${res.body.message}`,
+ duration: 0,
+ });
+ } else {
+ notification.success({
+ message: '更新成功',
+ description: `更新${res.body.data}条数据`,
+ duration: 0,
+ });
+ // 更新数据后, 注意刷新下整个页面
+ this.props.refresh();
+ }
+ });
+ }
+
+ /**
+ * 真正去删除数据
+ */
+ handleDelete = () => {
+ const url = `${globalConfig.getAPIPath()}/${this.props.tableName}/delete?keys=${this.state.selectedRowKeys.join(',')}`;
+ const hide = message.loading('正在删除...', 0);
+ logger.debug('handleDelete: url = %s', url);
+
+ ajax.post(url).end((err, res) => {
+ hide();
+ logger.debug('handleDelete: return error = %o, res = %o', err, res);
+ if (err || !res.body.success) {
+ notification.error({
+ message: '删除失败',
+ description: err ? '请求delete接口出错, 请联系管理员' : `请联系管理员, 错误信息: ${res.body.message}`,
+ duration: 0,
+ });
+ } else {
+ notification.success({
+ message: '删除成功',
+ description: `删除${res.body.data}条数据`,
+ duration: 0,
+ });
+ // 更新数据后, 注意刷新下整个页面
+ this.props.refresh();
+ }
+ });
+ }
+
+ /**
+ * 辅助函数
+ *
+ * @param formItem
+ * @param field
+ * @returns {XML}
+ */
+ colWrapper = (formItem, field) => {
+ //const {getFieldProps, getFieldError, isFieldValidating} = this.props.form;
+ return (
+
+
+
+ );
+ }
+
+}
+
+InnerTable = Form.create()(InnerTable);
+
+export default InnerTable;
diff --git a/src/components/DBTable/index.js b/src/components/DBTable/index.js
new file mode 100644
index 0000000..de77996
--- /dev/null
+++ b/src/components/DBTable/index.js
@@ -0,0 +1,276 @@
+import React from 'react';
+import {message, notification} from 'antd';
+import Error from '../Error';
+import InnerForm from './InnerForm.js';
+import InnerTable from './InnerTable.js';
+import InnerPagination from './InnerPagination.js';
+import './index.less';
+import globalConfig from 'config.js';
+import ajax from '../../utils/ajax';
+import Logger from '../../utils/Logger';
+
+const logger = Logger.getLogger('DBTable');
+
+/**
+ * 操作数据库中的一张表的组件, 又可以分为3个组件: 表单+表格+分页器
+ */
+class DBTable extends React.Component {
+
+ // 代替componentWillMount
+ constructor(props) {
+ super(props);
+ // 组件初始化时尝试获取schema
+ this.tryFetchSchema(this.props);
+ }
+
+ // 父组件要保存子组件的状态...非常蛋疼...
+ // 破坏了子组件的"封闭"原则
+
+ // 注意: 向父组件传状态, 通过回调函数的形式
+ // 从父组件接收状态, 通过props的形式
+
+ state = {
+ // 表单组件的状态
+ queryObj: {}, // 表单中的查询条件
+
+ // 表格组件的状态
+ data: [], // 表格中显示的数据
+ tableLoading: false, // 表格是否是loading状态
+
+ // 分页器的状态
+ currentPage: 1, // 当前第几页
+ pageSize: 50, // pageSize暂时不可修改, 固定50
+ total: 0, // 总共有多少条数据
+ };
+
+ /**
+ * 尝试获取某个表的querySchema和dataSchema
+ * 无论是从远端获取还是从本地配置读取, 这个方法必须是同步的
+ *
+ * @param dbName
+ * @param tableName
+ */
+ tryFetchSchema(props) {
+ const routes = props.routes;
+ // 这个tableName是路由表配置中传过来的
+ // 可以用这个方法向组件传值
+ const tableName = routes.pop().tableName;
+ if (tableName) {
+ logger.info('init component DBTable with tableName = %s', tableName);
+ } else {
+ logger.error('can not find tableName, check your router config');
+ this.inited = false; // 是否成功获取schema
+ this.errorMsg = '找不到表名, 请检查路由配置'; // 如果没能成功获取schema, 错误信息是什么?
+ return;
+ }
+
+ // 其实很多这种this.xxx变量也可以做成状态, 看情况了
+ // 关键是这些变量变化时, 是否要触发重新render?
+
+ this.tableName = tableName;
+
+ // 尝试加载querySchema
+ try {
+ this.querySchema = require(`../../schema/${tableName}.querySchema.js`);
+ } catch (e) {
+ logger.error('load query schema error: %o', e);
+ this.inited = false;
+ this.errorMsg = `加载${tableName}表的querySchema出错, 请检查配置`;
+ return;
+ }
+
+ // 尝试加载dataSchema
+ try {
+ this.dataSchema = require(`../../schema/${tableName}.dataSchema.js`);
+ } catch (e) {
+ logger.error('load data schema error: %o', e);
+ this.inited = false;
+ this.errorMsg = `加载${tableName}表的dataSchema出错, 请检查配置`;
+ return;
+ }
+
+ // 尝试加载个性化配置, 加载失败也没影响
+ try {
+ this.tableConfig = require(`../../schema/${tableName}.config.js`);
+ } catch (e) {
+ logger.warn('can not find config for table %s, use default instead', tableName);
+
+ // TODO: 默认配置写在这里
+ this.tableConfig = {
+ showExport: true, // 显示导出按钮, 默认true
+ showImport: true, // 显示导入按钮, 默认true
+ }
+ }
+
+ this.inited = true;
+ }
+
+ /**
+ * 刚进入页面时触发一次查询
+ */
+ componentDidMount() {
+ this.refresh();
+ }
+
+ // 在react router中切换时, 组件不会重新mount, 只有props会变化
+ componentWillReceiveProps = (nextProps) => {
+ logger.debug('receive new props and try to render, nextProps = %o', nextProps);
+ this.tryFetchSchema(nextProps); // 根据新的props重新获取配置
+ // 所有状态都要手动还原到初始值
+ // this.setState({
+ // queryObj: {},
+ // data: [],
+ // tableLoading: false,
+ // currentPage: 1,
+ // pageSize: 50,
+ // total: 0,
+ // });
+
+ // 这种写法和setState有何区别?
+ // 似乎setState不是"立即"发生的, 会导致下面refresh时有bug
+ this.state.queryObj = {};
+ this.state.data = [];
+ this.state.tableLoading = false;
+ this.state.currentPage = 1;
+ this.state.pageSize = 50;
+ this.state.total = 0;
+
+ // 切换时也要重新查询一次数据
+ this.refresh();
+ }
+
+ /**
+ * 切换分页时触发查询
+ *
+ * @param page
+ */
+ handlePageChange = (page) => {
+ logger.debug('handlePageChange, page = %d', page);
+ this.setState({tableLoading: true});
+ this.select(this.state.queryObj, page, this.state.pageSize).then((result) => {
+ //message.success('查询成功');
+ this.setState({
+ currentPage: page,
+ data: result.data,
+ total: result.total,
+ tableLoading: false,
+ });
+ }, this.handleError);
+ }
+
+ /**
+ * 点击提交按钮时触发查询
+ *
+ * @param queryObj
+ */
+ handleFormSubmit = (queryObj) => {
+ logger.debug('handleFormSubmit, queryObj = %o', queryObj);
+ this.setState({tableLoading: true});
+ // 这时查询条件已经变了, 要从第一页开始查
+ this.select(queryObj, 1, this.state.pageSize).then((result) => {
+ //message.success('查询成功');
+ this.setState({
+ currentPage: 1,
+ data: result.data,
+ total: result.total,
+ tableLoading: false,
+ queryObj: queryObj,
+ });
+ }, this.handleError);
+ }
+
+ /**
+ * 统一处理ajax失败时的回调
+ *
+ * @param errorMsg
+ */
+ handleError = (errorMsg) => {
+ // 对于错误信息, 要很明显的提示用户, 这个通知框要用户手动关闭
+ notification.error({
+ message: '出错啦!',
+ description: `请联系管理员, 错误信息: ${errorMsg}`,
+ duration: 0,
+ });
+ this.setState({tableLoading: false});
+ };
+
+ /**
+ * 按当前的查询条件重新查询一次
+ */
+ refresh = () => {
+ this.setState({tableLoading: true});
+ this.select(this.state.queryObj, this.state.currentPage, this.state.pageSize).then((result) => {
+ //message.success('查询成功');
+ this.setState({
+ data: result.data,
+ total: result.total,
+ tableLoading: false,
+ });
+ }, this.handleError);
+ }
+
+ /**
+ * 向服务端发送select请求, 会返回一个promise对象
+ *
+ * @param queryObj 包含了form中所有的查询条件, 再加上page和pageSize, 后端就能拼成完整的sql
+ * @param page
+ * @param pageSize
+ * @returns {Promise}
+ */
+ select(queryObj, page, pageSize) {
+ const hide = message.loading('正在查询...', 0);
+ // superagent请求会直接返回一个promise对象, 但不能直接用, 还是要包装一层
+ const tmpObj = Object.assign({}, queryObj); // 创建一个新的临时对象, 其实直接修改queryObj也可以
+ tmpObj.page = page;
+ tmpObj.pageSize = pageSize;
+ const url = `${globalConfig.getAPIPath()}/${this.tableName}/select`; // 拼接要请求的url地址
+ logger.debug('select: url = %s, queryObj = %o', url, tmpObj);
+
+ // 只是为了试下ES6的Promise特性...其实直接用superagent的API也可以
+ const promise = new Promise((resolve, reject) => {
+ ajax.post(url).send(tmpObj).end((err, res) => {
+ hide();
+ // err就是一个字符串
+ // res是一个Response对象, 其中的body字段才是服务端真正返回的数据
+ if (err || !res.body.success) {
+ reject(err ? '请求select接口出错, 请联系管理员' : res.body.message);
+ } else {
+ resolve(res.body);
+ }
+ });
+ });
+
+ return promise;
+ }
+
+ render() {
+ // 如果没能成功加载schema, 显示错误信息
+ if (!this.inited) {
+ return (
+
+ document.getElementById('main-content-div')}>
+
+
+ {/* 注意这里, 如果schema中没有定义主键, 不允许update或delete */}
+
+
+
+
+
+
+
+
+
+ 
+